Aller au contenu | Aller au menu | Aller à la recherche

lundi 7 janvier 2008

1: Afficher une carte avec Google Maps

Voici le premier article d'une série traitant de l'utilisation de l'API Google Maps.

Ce premier article va nous permettre d'étudier les bases nécessaire à l'affichage d'une Google Map sur votre site :

  • Création de la page accueillant la carte,
  • utilisation d'une clef d'API Google Ajax,
  • inclusion des fichiers Javascript nécessaires,
  • et affichage de la carte en elle-même.

Google Maps : Place Bellecour, Lyon, France

Lire la suite...

Utiliser l'API Google Maps : Sommaire

Que ce soit pour présenter des chemins de randonnées, situer des locations de vacances, ou pour préciser l'adresse d'un restaurant, rien de mieux qu'une carte, et ce, même sur Internet !

Cet article correspond au sommaire d'une série d'articles présentant les possibilités offertes par l'API de cartographie de Google Maps, vous permettant d'ajouter des cartes sur votre site, en offrant à vos utilisateurs la possibilité d'interagir avec celles-ci.

Ce sommaire sera mis à jour au fur et à mesure de l'ajout de nouveaux articles :

En projet (dates non définies) :

  • Traffic overlays
  • Driving directions
  • Fenêtre d'informations Ajaxifiée
  • Recherche locale

Note : Selon l'évolution des différents articles, les parties non encore publiées sont susceptibles d'être modifiées.

MAJ le 02/03/2008 : Ajout du lien vers la partie 2.
MAJ le 02/03/2008 : Ajout du lien vers la partie 3.
MAJ le 16/04/2008 : Ajout du lien vers la partie 4.

dimanche 4 novembre 2007

Scriptaculous Ajax.Autompleter : situation réelle : suggestions dynamiques pour la saisie d'une ville

Nous avons vu dans un article précédent comme utiliser le composant Ajax.Autocompleter du framework Javascript Script.aculo.us pour créer une liste de suggestions à partir d'une saisie utilisateur.

Nous allons maintenant voir comment utiliser ce composant dans une situation plus proche d'un cas "réel" :

  • Saisie de plusieurs informations.
  • Utilisation d'une base de données côté serveur,
  • contenant un volume important de données.
  • Affichage d'informations supplémentaires en cours de saisie.
  • Récupération et exploitation de la donnée saisie par l'utilisateur :
    • côté client, pour traitements Javascript pendant l'utilisation du formulaire,
    • et côté serveur, une fois le formulaire validé.

Ajax.Autocompleter : saisie 'lyo'

Lire la suite...

dimanche 28 octobre 2007

Scriptaculous Ajax.Autocompleter : Mettre en place un champ de saisie avec suggestions dynamiques

Il nous arrive, lorsque nous développons une application Web, de devoir afficher à l'utilisateur une liste de choix.
Dans ces cas là, nous sommes généralement tentés d'employer la balise select.

Mais une liste déroulante n'est utilisable que si elle ne contient que peu d'entrées ; pas plus d'une trentaine, au grand maximum - et force le visiteur à choisir l'une des valeurs que vous lui proposez.

Vous pouvez souhaiter

  • lui proposer une liste de choix,
  • tout en lui permettant d'effectuer une saisie libre...
  • Et ce en adaptant la liste proposée en fonction des saisies.

Script.aculo.us fournit un composant dont le rôle est de faciliter la mise en place d'une liste de suggestions : Ajax.Autocompleter.
Cet article va présenter son utilisation dans un cadre basique.

Ajax.Autocompleter : avec style CSS

Lire la suite...

vendredi 13 avril 2007

Indicateur de chargement non obstructif, avec prototype.js

Nous avons vu au sein d'un article précédent comment Afficher un message de chargement pendant l'exécution des requêtes Ajax, avec prototype.js.

Mais la méthode que j'avais proposé posait deux problèmes :

  • le bloc HTML utilisé comme indicateur de chargement devait être inclut dans toutes les pages HTML du site
  • et il était toujours présent dans le corps de la page, même si masqué via son style CSS - ce qui ne le rendait pas invisible aux navigateurs ne supportant pas les CSS, ou le JavaScript - pour qui il est inutile (pas de JS = pas d'Ajax)

Nous allons donc maintenant voir comment rendre cet indicateur de chargement non obstructif (en anglais : unobstrusive).

Lire la suite...

mardi 13 mars 2007

prototype.js : Ajax.Request : Afficher un indicateur de chargement pendant l'exécution des requêtes Ajax

Employer des techniques de type Ajax pour rafraîchir en arrière-plan les données d'une partie de la page, ou pour effectuer un traitement sans recharger celle-ci en entier contourne le fonctionnement normal du navigateur, où chaque action s'accompagne traditionnellement d'un chargement de page.

Une des conséquences est la non-indication par celui-ci qu'un traitement est en cours : aucun indicateur de chargement / d'activité n'est proposé à l'utilisateur, qui ignore donc si ses demandes d'action ont bien été prises en compte.

Cet article va nous permettre de voir comment insérer un indicateur d'activité dans nos pages, lorsque nous utilisons le framework prototype.js pour réaliser des requêtes Ajax.

Lire la suite...

vendredi 23 février 2007

prototype.js : Gestionnaires d'événements pour Ajax.Request

Nous avons vu au cours d'un article précédent comment réaliser une première requête Ajax à l'aide du framework prototype.js.
Cela nous a permis de découvrir le fonctionnement événementiel de la classe Ajax.Request fournie par prototype.js, mais nous n'avions utilisé que l'événement onComplete, toujours appelé en fin de requête.

Cet article va nous permettre d'aller plus loin, en présentant les autres événements que prototype.js nous permet d'exploiter ; par exemple :

  • Pour gérer les cas de requête se terminant avec succès
  • Pour gérer les requêtes générant une erreur
  • Pour tenir compte des exceptions que peut lever l'objet XMLHttpRequest
  • ...

Lire la suite...

mercredi 17 janvier 2007

Annuaire de liens

Cet article est destiné à regrouper l'ensemble des liens apportant une information concrète utilisés au sein des différents articles de ce blog ; il s'agit donc d'un annuaire de liens.

Les liens sont disponibles selon deux organisations :

Cet annuaire de liens sera mis à jour régulièrement - en théorie, à chaque nouvel article.

Lire la suite...

- page 2 de 3 -