Utilisation d’HTML5 dans vos projets et nouveautes

Je voulais vous faire partager un retour d’expérience d’un développeur travaillant au Delivery Center d’Hanoi.

Notre client nous a consulté afin de développer une application Web de gestion du temps de travail, basée sur une application déjà existante sous Windows. Le but de cette application est de fournir une solution optimisée de gestion du temps de travail, avec une nouvelle interface plus conviviale pouvant être aisément intégrée dans une utilisation quotidienne.

Typiquement notre client souhaitait “tester” les fonctionnalités HTML5 mais aussi nos compétences dans ce domaine. Essai transformé (puisque c’est d’actualité 🙂 ).

Nous l’avons testé pour vous et voici les informations récoltées au coeur de la production. Mais tout d’abord un peu de formalisme et d’informations généralistes sur HTML5.

I. HTML5, mais d’où ca vient et c’est quoi le but ?

– Comme son nom l’indique HTML5 est la nouvelle génération de HTML V4.01 et XHTML 1.x., la précédente version datant de 1999.
– HTML5 est toujours en phase de développement. Cependant la majorité des browers actuels le supporte.
– Les nouvelles fonctionnalités devraient être basées sur HTML, CSS, DOM, et JavaScript.
– Réduire le besoin de plugin externe (comme Flash).
– Meilleure gestion des erreurs .
– Plus de balisage pour remplacer les scripts .
– Devrait etre indépendant de tout périphérique

II. HTML5, les nouvelles fonctionnalités- :

Constat est fait que les éléments d’ HTML 4.1 sont devenus obsolètes et de moins en moins utilisés. Ces éléments sont désormais réécrits en HTML5 ou supprimés. HTML5 utilise un certain nombre de nouveaux éléments et attributs qui aide à construire un site Web plus moderne. Voici les fonctionnalités présentes dans HTML5 :

– Nouvelles balises  HTML5 comme entre autres: <header>, <article> et <time> qui apportent plus de sémantique à la page.
– Forms : Amélioration des formulaires web HTML où de nouveaux attributs ont été introduits pour la balise <input>.
– LocalStorage : permet de stocker des données plus ou moins persistantes dans le navigateur sans avoir recours à des « plugins » d’applications tierces.
– WebSocket : technologie de communication bidirectionnelle pour les applis web
– Server-Sent Events : HTML5 introduit des événements qui proviennent de serveurs Web vers les browsers et ainsi appelés Server-Sent Events (SSE).
– Canvas : permet de créer des éléments graphiques 2D en Javascript.
– Audio & Vidéo : Vous pouvez intégrer de l’audio ou de la vidéo sur vos pages Web sans avoir recours à des plugins tiers.
– Géolocalisation : Maintenant, les visiteurs peuvent choisir de partager leur emplacement physique avec votre application web.
– Microdata (micro données ): Cela vous permet de créer vos propres vocabulaires au delà d’HTML5 et d’étendre vos pages web avec votre propre sémantique personnalisés. vous pouvez identifier certaines données de votre site Web. Ces données pourront être lues, récupérées et traitées par des logiciels ou des applicatifs Web de façon automatique
– Drag and drop : Glisser-déposer des éléments d’un endroit à un autre sur une même page web.

III. HTML5 et son support dans les “Browsers” :

– HTML5 n’est pas encore un standard officiel et les browsers ne supportent pas encore le full HTML5.
– Néanmoins la majorité des browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue d’ajouter des nouvelles fonctionnaliés à leurs dernières versions.
– Les browsers pré-installés dans les téléphones mobiles comme sur les iPhones, iPads, et Android supportent déjà HTML5.

IV. Notre experience client :

L’utilisation d’HTML5 dans un projet pour un éditeur de logiciels Allemand nous a permis d’être confronté à de nouvelles fonctionnalités mais aussi des contraintes techniques.

a) Les nouvelles fonctionnalités

– HTML5 a permis d’apporter 2 nouveaux objets pour le stockage de données:

• localStorage: permet de stocker des données sans limite de fin
• sessionStorage: permet de stocker des données pour une session

– Cette fonctionnalité était jusqu’à présent gérée par des cookies. Mais les cookies ne sont pas adaptés pour le stockage important de données. En effet ils sont transmis, pour CHAQUE requête, au serveur, rendant ainsi l’échange lent et inefficace . Dans HTML5, les données ne sont pas transmises pour chaque requête au serveur, mais utilisées uniquement lorsqu’elles sont demandées. Il est ainsi possible de stocker d’importantes quantités de données sans affecter les performances du site web. Les données sont stockées à différents endroits pour des sites différents, mais un site web ne peut accéder qu’à ses propres données de stockage. HTML5 utilise JavaScript pour stocker et accéder aux données.

– Une des plus importantes fonctionnalités mise en place pour le projet a été le stockage de données offline grâce à l’ utilisation d’une base de données Web SQL Lite. L »API base de données Web SQL ne fait d’ailleurs pas partie des specifications HTML5 mais se trouve dans une autre specification qui intègre un ensemble d’API pour manipuler des bases de données côté client en utilisant SQL. La base de données Web SQL fonctionnera sur les dernières versions de Safari, Chrome et Opera.

– Les méthodes de base:

• openDatabase: Cette méthode crée un objet base de données soit en utilisant une base de données existantes ou en en créant une nouvelle.
• transaction: Cette méthode nous donne la possibilité de contrôler une transaction et son exécution soit en commit ou en rollback selon sur la situation.
• executeSql: Cette méthode est utilisée pour éxecuter des requêtes SQL réélles.

b) Les contraintes techniques rencontrées

– La problématique majeure, non résolue à ce jour, est liée au Framework Google, désormais disponible en Open Source. En effet, les tests unitaires ont échoué lors de l’écriture des tests unitaires JavaScript lorsque la fonction testée contenait des codes utilisants des éléments des pages HTML.

– Exemple: document.getElementByID(‘id’) dans la fonction JavaScript.

Grâce à ce projet, nous avons pu répondre aux attentes de notre client et ainsi agrandir notre expertise et compétences autour d’HTML et JavaScript.

Je tenais à remercier Huy pour ce retour d’expérience, et le travail de l’équipe sur ce projet fort intéressant.