Geekfault

Géolocalisation

Très intéressant sur le web qui devient de plus en plus mobile aujourd’hui, l’HTML 5 intègre une API qui permet d’aisément obtenir les coordonnées géographiques du visisteur :

Normalement le navigateur demande à l’utilisateur l’autorisation d’envoyer sa position. Sur un iPhone par exemple, elle sera calculée grâce à la puce GPS. Sur un navigateur desktop, la méthode est variable (triangulation WiFi, puce GPS, services de localisation d’IP ou simplement demander l’adresse de l’utilisateur).

ContentEditable

(Attention, paragraphe très… personnel ^^) Alors là je suis fan de cette fonctionnalité : elle permet de rendre n’importe quelle partie d’une page éditable. On voyait ça apparaître de plus en plus dans les applications en ligne, et maintenant c’est standardisé et extrêmement facile à mettre en place. La preuve? Essayez de cliquer sur ce paragraphe !

Et en plus c’est du WYSIWYG ! Essayez Ctrl+B ou Ctrl+I (sous Chromium) ! Et voilà le code source qui m’a permis de faire ça :

Je vois déjà toutes les possibilités ouvertes par une fonctionnalité si simple à mettre en place, comme par exemple corriger une erreur dans nos articles ou modifier une page de WikiPédia en deux clics.

Nouveaux inputs

Essentiellement dans le soucis de rendre le web encore plus accessible (aux handicapés) et aux système d’auto-remplissage, le HTML 5 intègre une dizaine de nouveaux types d’inputs textuels : tel, search, url, email, datetime, date, month, week, time, datetime-local, number et color. Les navigateurs sont supposés proposer une interface à l’utilisateur comme par exemple un calendrier pour remplir un datetime, mais ni Chromium ni Firefox ne semble s’y conformer pour l’instant.

On remarque aussi l’apparition de l’input range qui vient combler une déficience qui forçait souvent à avoir recours à une librairie JavaScript.

Autres nouvelles balises

Le W3C introduit dans l’HTML 5 de nombreuses nouvelles balises, dont voici la liste exhaustive

• section, article, aside, hgroup, header, footer, nav encadrent les principaux contenus d’une page web typique. On abandonne ainsi l’utilisation constante de, par exemple, <div id=”header”>
• figure et son sous-élément figcaption permettent de lier une légende à une image ou une vidéo
• embed a pour but de remplacer object lors de l’insertion de Flash ou de Java (dans les rares cas où ce sera nécessaire)
• mark encadre un mot ou un texte important pour, par exemple, le surligner en CSS
• progress est l’élément à privilégier si vous affichez la progression d’une tâche
• meter représente une mesure telle que l’utilisation du disque
• time représente une date et/ou une heure
• ruby, rt, rp permet d’intégrer des annotations ruby (WTF?)
• command représente une commande que l’utilisateur peut invoquer
• details encadre un complément d’information ou des contrôles supplémentaires que l’utilisateur peut obtenir sur demande
• keygen permet de fournir une clé de contrôle pour la vérification de la validité des données
• output encadre une zone où un script affichera son résultat

La plupart de ces nouveaux éléments sont liés à l’accessibilité mais peuvent aussi présenter un avantage de lors de la création de scripts complexes.

Et nouveaux attributs

Je vouais ai déjà parlé de contentEditable mais il y a beaucoup d’autres nouveaux attributs standards en HTML 5.

• contextmenu permet de lier un menu au clic droit sur un élément
• draggable détermine si un élément peut être soumis au drag & drop. Cette fonctionnalité est malheureusement soumise à controverse à cause de sa complexité, c’est pourquoi je ne l’ai pas abordé dans l’article.
• hidden est un boléen qui remplace sa fonction homonyme en style ou CSS. L’intérêt? Cacher les éléments même dans les navigateurs pour malvoyants qui n’interprètent pas les styles.
• item et itemprop et subject permettent de regrouper des éléments
• spellcheck est un boléen qui spécifie si la correction orthographique mérite d’être activée sur un élément

Finalement, vous pouvez lier n’importe quel attribut personnalisé (ce qui peut être pratique pour certains scripts) sans contredire les standards du W3C (et donc passer les tests des validateurs) à condition que cet attribut commence par data-.