Tutoriel : Comment passer les templates de Magento en HTML5

HTML5 et E-commerce n’est ce pas trop tôt ?

Non !
Même si le W3C est toujours en recherche sur ce nouveau langage, beaucoup de balises comme <heade>, <nav> ou <side> et sont pratiquement sûres d’être intégrées dans les nouvelles spécifications HTML5.
De plus, grâce à un petit script, le passage est transparent sur tous les navigateurs, même IE6 (oui, vous avez bien lu :) )

Il est donc temps de préparer nos boutiques au web futur.

Petit retour en arrière, cela fait 10 ans que le HTML n’a pas évolué et propose toujours la même structure et les mêmes balises. Les développeurs web recherchent continuellement de nouvelles fonctionnalités par le biais de Javascripts pour parer aux limites de ce langage vieillissant et qui ne correspond plus aux besoins actuels.

HTML5 est donc l’occasion d’ouvrir nos sites à de nouvelles fonctionnalités, de nouveaux supports (mobiles notamment) et à les rendre plus sémantiques pour nos robots adorés de chez Google.

Pourquoi continuer à hésiter ?
Si vous êtes sur Magento et souhaitez passer en HTML5, cet article mettra en avant les différentes étapes clés pour passer votre boutique en HTML5 afin d’améliorer votre référencement naturel.

Au sommaire :

  • Préparer la balise <head>
  • IE encore et toujours
  • Home page et blocs récurrents
  • La navigation
  • Le footer
  • Page catégories et sidebar produits
  • Listing produit
  • Page produit
  • les micros Data
  • Conclusion

Lire l’article complet d’Aymeric de l’Agence Dn’D sur le site Wikigento.

HTML 5 : Dn'D dans le top 25 de 1stwebdesigner.com !

Agence DnD top 25 ultra modern site using HTML5

Le célèbre Blog 1stwebdesigner.com dédié aux développeurs et designers web vient de publier un top 25 des sites Internet Ultra Modernes utilisant déjà le HTML 5 (« Ultra Modern Website Using HTML5″).

Le site de l’agence est cité dans ce classement international de sites innovants et de « Web Addict » impatients de pouvoir démocratiser l’utilisation du HTML5 !

En savoir plus sur le Top 25 : http://www.1stwebdesigner.com/inspiration/ultra-modern-websites-html5/

HTML 5 : Dn'D anticipe et se prépare au web du futur

Le web est en constante évolution, des sites plus innovants les uns que les autres sont lancés chaque jours, repoussant toujours plus les limites du HTML4. Celui ci arrive au bout de ses possibilités et nous commençons dors et déjà à entrevoir le HTML 5.0 considéré comme le « web du futur ». Tous le monde se prépare déjà à son arrivée depuis que le W3C à migré ses équipes travaillant sur le XHTML2 vers le groupe HTML5. Pourtant nous savons que ses spécifications ne seront complètes qu’à partir de fin 2010.

C’est dans l’optique de pouvoir toucher du doigt le web du futur que l’agence Dn’D a lancé son nouveau site internet développé entièrement en HTML 5.

Pourquoi le HTML5 ?

cinq-sur-clavier

Comme le souligne Fred Cavazza dans l’un de ses articles, cela fait  10 ans que le HTML n’a pas évolué et propose toujours la même structure et les mêmes balises. Cela peut sembler énorme par rapport aux nombreuses révolutions qui ont eu lieu dans le web ces 5 dernières années . En effet, les développeurs web recherchent continuellement de nouvelles fonctionnalités par le biais de javascripts pour parer aux limites de ce langage vieillissant et qui ne correspond plus aux besoins actuels.

C’est une réelle volonté de donner aux développeurs un langage plus flexible et accessible, offrant ainsi à l’internaute une expérience plus interactive. On passe donc d’un web « document » à un web « d’application« . En effet HTML 5 propose de nouvelles fonctionnalités pour les API’s, la sémantique, le multimédia …. Ce nouveau langage aidera donc à construire des pages plus solides ayant un code plus compréhensible et surtout représentatif du contenu des pages. Les navigateurs ainsi que les moteurs de recherches comme Google vont ainsi pouvoir mieux analyser et comprendre le contenu de nos pages.

Qu’y aura-t-il de nouveau ?

Structure HTML5

Tout d’abord : un contenu mieux structuré et défini grâce à de nouvelles balises plus sémantiques (comme vous pouvez le voir sur le schéma ci-dessus). Utilisé intelligemment, ce système permettra aux moteurs de recherches de mieux indexer nos pages. La valeur ajoutée se verra également au niveau de l’accessibilité et plus particulièrement aux personnes mal-voyantes qui pourront naviguer plus facilement sur les sites.

Concernant le multimédia, la balise <video> risque d’être beaucoup utilisée car nous n’aurons plus besoin d’utilier du flash avec la balise <embed>. Il devient aussi simple de mettre une vidéo que d’insérer une image. On arrive donc a un web beaucoup plus intéractif, vivant et simplifié. Les formulaires 2.0. font leur apparition et permettent désormais de spécifier dans certains champs si c’est un champ courriel, url, etc. La géolocalisation sera possible ainsi que le « drag & drop » et  même la capacité de garder de l’information « Off-line » comme le fait actuellement Google Gears, etc …

Enfin, le code des sites sera évidemment plus propre et pourra évoluer avec beaucoup plus de facilité.

Peut-on lancer un site en HTML5 dès aujourd’hui ?

Oui c’est possible !

Après quelques heures d’intégrations sur le site de l’agence Dn’D, nous avons réellement perçu les capacités et l’utilité de ce langage. Le plus dure de la procédure a été de pouvoir le rendre compatible sur tous les navigateurs (surtout les anciens). Résultat, le site est complètement fonctionnel sur la plupart des navigateurs.

Nous n’avons pas encore de retour quant au référencement naturel du site et sont indexation dans les moteurs de recherches, mais la preuve est que le HTML5 peut-être d’ors et déja utilisé !

Conclusion

HTML5 est véritablement le web du futur, car ce langage est plus puissant, plus robuste, évolutif, …

Cependant encore plusieurs questions restent en suspend (le SEO par exemple) car toutes les spécifications ne sont pas encore terminées, affaire à suivre…

Quelques liens interressants

final-safari

Capture d'écran Smashing Magazine

http://media1.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/index.html

http://www.fredcavazza.net/2009/09/10/html-5-css-3-une-revolution-pour-les-interfaces-web/

http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

http://fr.wikipedia.org/wiki/HTML_5