Développement HTML5

2011 sera sans aucun doute l’année du HTML5. L’existence d’un standard pour les applications et sites web permettra un usage plus agréable de ces derniers. KerniX vous propose de développer vos applications web et mobile en HTML5, tout en respectant les normes du W3C.

Les différentes nouveautés associées au développement HTML5 sont les suivantes :

• Mode Offline et stockage des données
• Connectivité / temps réel
• Multimédia (audio, vidéo)
• Graphisme, 3D et effets
• Géolocalisation / accès aux périphériques
• Performance et rapidité
• Sémantique
• CSS3 (Polices web, mise en forme avancée avec structure sémantique)

Mode offline et stockage des données

Le mode offline se définit comme une mémoire d'applications ("application cache"), qui conserve la page et les données de la base de données des applications. Ces applications offline qui utilisent “l’application cache” du navigateur permettent notamment :

• D’utiliser une application web ou de naviguer sur un site entier sans connexion internet.
• D’améliorer la vitesse de chargement des pages puisque les fichiers sont présents en local.
• De réduire la charge du serveur, puisqu’en effet, il n’enverra que les fichiers qui auront changé depuis le dernier passage de l’utilisateur.

Connectivité / temps réel

Utilisation des Web sockets pour des chat et jeux en temps réel. Les Web Sockets sont là pour palier les insuffisances du protocole HTTP totalement inefficace pour transférer de petites données pourtant nécessaires aux traitements en temps réel des applications Web. On peut prendre en exemple les sites communautaires (Facebook, Twitter, etc.), ou les jeux en ligne qui utilisent ces applications.

Multimédia (audio, vidéo)

Balises <audio> et <video>
La balise <video> offre une solution simple, native pour les navigateurs pour l'intégration d'une vidéo dans une page web. Elle permet également de proposer une alternative à l'utilisation de Flash pour les plateformes ne le supportant pas.
La balise <audio> est l'équivalent pour les fichiers sonores.

Graphisme, 3D et effets

La balise <canvas> a été introduite afin de pouvoir créer des éléments graphiques 2D et 3D en Javascript. Il permet de mettre en place une zone pour les dessins ou les applications graphiques. Un éditeur qui fonctionne entièrement sur canvas a d'ores et déjà été mis en place par Mozilla

Géolocalisation / accès aux périphériques

La géolocalisation est utilisable via une API d'un navigateur. Cela permet aux pages web d'interroger le navigateur sur la position géographique de l'utilisateur. L'API de base permet d'obtenir les coordonnées en latitude et en longitude ainsi que l'altitude. Celles-ci peuvent alors être exploitées par le biais d'une carte (de type Google Map).

Performance et rapidité

Des applications Web plus performantes et rapides grâce à des techniques et technologies html5 telles que les Web Workers. Web Workers est une technologie du HTML5 qui permet d’exécuter des scripts en arrière-plan en préservant la stabilité du navigateur. Un exemple sur la recherche des nombres premiers parmi une liste de nombres illustre l’intérêt des Web Workers pour le multi-tâche.

Sémantique (nouvelles balises html, RDFa, Microdata, Microformats, plus de sens au contenu)

Balises HTML et trois solutions de métadonnées
La nouvelle norme HTML fait un pas en avant dans cette logique. De nouvelles balises font donc leur apparition, pour les entêtes (header) et pied de page (footer), le menu (nav), les articles (article), les encarts (aside)... Une nomenclature utilisée depuis longtemps par les développeurs, ici standardisée donc exploitable.
Trois solutions de metadonnées sont disponibles via le développement HTML5.

• Microformats, qui prône une grande simplicité
• RDFa préfère la flexibilité
• Microdata est un compromis entre les deux premières techniques.

CSS3 (Polices web, mise en forme avancée avec structure sémantique)

CSS3 propose une large gamme de styles et effets et l'amélioration des applications web sans sacrifier votre structure sémantique ou la performance de votre site web.