Les bases de HTML5 - les nuls

HTML5 est l'évolution la plus récente du langage HTML. Cette génération offre un ensemble élargi d'éléments et de propriétés - permettant de nouvelles possibilités de conception et d'interaction. Parce que HTML5 prend également en charge les appareils Web mobiles, il est rapidement devenu la nouvelle norme et est désormais pris en charge par tous les principaux navigateurs (bien que Internet Explorer exige que la page Web comprenne un code shim - redondant segment de code écrit d'une manière qu'Internet Explorer peut comprendre).

Une solution mobile et conviviale pour les sites Web

Avec l'introduction du HTML5, un problème particulièrement épineux a finalement été résolu: obtenir des effets d'animation sympas sur les appareils Apple sans utiliser Flash. La plate-forme d'appareils Apple n'a jamais pris en charge Flash. Ce refus concernait davantage les ressources de la batterie et de la bande passante Flash que la rivalité de l'entreprise avec Adobe (les fabricants de Flash). Quoi qu'il en soit, tous les sites Web qui utilisent Flash pour quelque chose que ce soit - par exemple, la navigation, l'interaction ou les effets d'animation - ne fonctionneraient tout simplement pas sur les iPhones ou les iPads. HTML5 est venu à la rescousse.

Une alternative d'animation

Avec l'introduction du nouvel élément en HTML5, il y a maintenant un conteneur (similaire à l'élément div CSS) qui peut contenir des animations JavaScript et des fonctions interactives. Parce que JavaScript est un langage de script puissant et peut faire beaucoup de choses que Flash peut faire, cette combinaison toile-plus-JavaScript présente une approche alternative réelle à l'animation web supportée sur les navigateurs de bureau et mobiles.

L'inconvénient, bien sûr, c'est que vous devrez apprivoiser JavaScript pour que tout se passe bien - et JavaScript est un langage assez robuste! L'avantage est que le ciel est la limite. Avec JavaScript, vous pouvez créer des interfaces utilisateur sophistiquées, dessiner des diagrammes avec des éléments de forme basiques, mettre à l'échelle et faire pivoter des éléments, et charger des images externes à l'intérieur et à l'extérieur. Pour utiliser la balise, vous devez effectuer deux actions: Vous incluez une balise dans votre code HTML et créez un code JavaScript qui cible le canevas.

Prise en charge de l'écran tactile

Ces dernières années, l'avènement des appareils à écran tactile a obligé les concepteurs à repenser la façon dont ils conçoivent les interfaces. Les concepteurs peuvent utiliser plusieurs événements tactiles : doigt sur quelque chose, doigt se déplaçant sur un élément et doigt supprimé - ou (en termes plus techniques) touchstart, touchmove, touchend et touchcancel. Ces événements natifs HTML5 fonctionnent dans WebKit (qui sont les navigateurs Chrome et Safari) et permettent presque n'importe quel type d'interaction avec les doigts, comme le glisser, le pincement et le zoom, et la rotation.

Géolocalisation des sites Web

Dans le passé, pour obtenir la position géographique d'un utilisateur, vous deviez utiliser un script de détection IP accédant à une base de données et faire une estimation raisonnable des localisations générales de l'utilisateur.. HTML5 prend désormais en charge la récupération de géolocalisations plus spécifiques: en utilisant JavaScript, vous pouvez trouver des informations de longitude et de latitude via le GPS (pour les appareils mobiles) et les informations sur le routeur Wi-Fi (pour les ordinateurs portables et de bureau). Vous pouvez même obtenir l'altitude et un horodatage sur l'emplacement. Bien sûr, l'utilisateur doit accepter de publier ces informations de localisation.

Désormais, les points de longitude et de latitude d'un utilisateur ne sont utiles que dans le contexte d'une carte. Vous devez donc intégrer ces données à l'API Static Map de Google.

L'autre chose à noter est qu'une fois que le navigateur connaît votre position, il est également possible de suivre votre position! Cela pourrait sembler Big Brother-ish, mais imaginez une application mobile qui sait où vous êtes dans un centre commercial et sert des coupons pour les magasins que vous êtes ou à proximité que vous vous déplacez.

Gestion de contenu puissante

Plusieurs mises à niveau en HTML5 permettent aux concepteurs de mieux contrôler les différents éléments de contenu de la page. Par exemple, le nouvel attribut contenteditable peut être affecté à n'importe quel élément que vous voulez que l'utilisateur puisse éditer - par exemple, un champ de texte contenant un exemple de texte que l'utilisateur peut remplacer par du texte spécifique.

Une autre mise à niveau apportée par HTML5 est une extension de la boîte à outils de conception de formulaire. Vous pouvez maintenant ajouter des curseurs de plage, un champ de recherche, une option pour insérer du texte par défaut dans des champs de saisie tels que rechercher des livres, un calendrier contextuel pour la sélection de date et même un sélecteur de couleurs. En outre, HTML5 offre un support natif pour les éléments de formulaire requis. Vous pouvez simplement ajouter l'attribut requis à un élément d'entrée, de sélection ou de zone de texte. De concert avec ce nouveau composant requis, CSS vous permet de cibler ces champs obligatoires et de leur donner un aspect unique.