Tag Archives: html 5

Html5 boilerplate : La boîte à outil du bon intégrateur

29 Juin

Pour bien se lancer dans le HTML5, il est important de disposer des bons outils dès le départ !

Html5 boilerplate logoHtml5 boilerplate fait partie de ces bijoux qu’on est bien content d’avoir dans ses favoris.

Ce projet met à votre disposition une architecture de base (Html5, CSS, htaccess, outils de compilation, etc…) vous permettant de disposer très vite d’un site valide, et regroupant toute une série de best practices connues sur le web.

Trois versions sont disponibles :

  • Stripped – Version sans commentaire ni aide
  • Documented – Version commentée avec des astuces
  • Custom – Version personnalisée en fonction de vos besoins (type de serveur, librairie javascript à utiliser, etc…)

Je vous conseille dans un premier temps la version Documented qui vous permettra de vous faire la main dessus, de l’adapter à vos besoins et d’enlever le superflu.

Tour du propriétaire

Une fois l’archive téléchargée et décompressée, vous pouvez commencer.

Le fichier index.html contient une structure de base pour votre code, il vous reste à placer votre markup, en oubliant pas la sémantique des nouvelles balises introduites en Html5 !

Un fichier CSS se charge d’appliquer des styles identiques sur chaque navigateur sans affecter le comportement des autres balises (à l’inverse d’un CSS reset).

Un fichier .htaccess est présent pour vous servir de base de réflexion, et savoir comment optimiser chaque requête effectuée sur le serveur.

Plusieurs astuces se trouvent dans le fichier html, le css et dans le .htaccess, ces astuces permettent de combler des manquements de certaines navigateurs et assurent une compatibilité maximale avec ceux-ci.

Un build script est fourni, il permet de compresser automatiquement les images, css et html. Je n’ai malheureusement pas encore eu l’occasion de tester ce script mais je le ferai dès que possible et rédigerai un article à ce sujet tellement il est intéressant pour accélérer l’affichage de votre site !

Une fois votre template html terminé, n’oubliez pas de le valider au W3C !

Conclusion

Html5 boilerplate est la référence si vous voulez débuter un site en Html5 dès maintenant sans vous heurter à différents problèmes de compatibilité.

La base des utilisateurs grandit de jour en jour et les mainteneur du dépôt Github sont très actifs et très ouverts, le projet évolue donc dans le bon sens.

En revanche, l’entièreté des scripts n’est pas facile à appréhender pour un débutant voire même un utilisateur confirmé. Le build script est très puissant mais encore trop jeune et pas toujours facile à adapter à un projet déjà existant…

HTML5 : l’évolution du web

15 Juin

On arrête pas d’en entendre parler, il est le Saint-Graal des développeurs web et pourtant il est encore trop peu utilisé à l’heure actuelle.

Le HTML 5 est un ensemble de technologies simples basées sur des principes déjà bien établis dans le web 2.0.

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

Logo HTML 5

Pour palier aux manques cruels de certaines fonctionnalités sur le web, les développeurs ont dû pendant des années trouver des solutions alternatives et pas toujours optimales. Ces palliatifs ont été développés grâce à l’aide du Javascript poussé dans ses derniers retranchements. Cette évolution a été bénéfique sur le plan des navigateurs et a permis de ressusciter une bataille en eux, les amenant vers des niveaux inédits en terme de performances.

Le web s’en retrouve maintenant grandit mais doit encore traîner des boulets. Notamment les versions d’Internet Explorer < 9 et des vieux sites tenus par des personnes pas nécessairement à l’écoute des nouvelles technologies.

Apports du HTML5

Glisser-déposer de fichiers, d’éléments, nouvelles balises et amélioration de la gestion des formulaires. C’est en substance les améliorations les plus visibles et les plus utiles qu’apporte le HTML5 lors de la conception d’une page web.

Ensuite, d’autres techniques telles que la géolocalisation, le push et les webworkers (permettant d’exécuter plusieurs tâches en même temps pour profiter des processeurs multicoeurs) sont des apports non-négligeables permettant d’améliorer l’interactivité des pages, améliorer les performances des serveurs et des applications client.

L’avenir s’annonce très bon pour les amateurs de nouvelles technologies et pour les concepteurs web. N’hésitez pas à vous tenir au courant dès maintenant de ces techniques et à les utiliser afin de ne pas être totalement « has-been » d’ici quelques années !

Souscrivez à ce blog pour recevoir des extraits de code et des expérimentations faites en HTML5 !