Pertinence de créer un site en HTML 5

Bonjour

Je vais me lancer bientôt dans la création d'un site Internet et je me posais la question sur la pertinence de le créer en HTML 5 et CSS3.

Ce site sera développé via un CMS (sûrement Drupal 7) en 2 langues. Il présentera un catalogue de documentaires, il y aura donc pas mal de vidéos.

Par contre pour le moment aucune version mobile n'est pas envisagée. Donc pas de responsive design à l'ordre du jour.

Selon ces précisions est-ce pertinent de concevoir un site en HTML 5 ou vaut il mieux rester au bon vieux XHTML ?

Mais si le site est conçu en HTML5, il sera plus simple d'y ajouter une version mobile d'en l'avenir ?

Merci d'avance pour vos avis.

Phil
Modifié par ensemblevide (30 Aug 2013 - 08:36)

Selon ces précisions est-ce pertinent de concevoir un site en HTML 5 ou vaut il mieux rester au bon vieux XHTML ?

Un lien :

http://www.pompage.net/traduction/html5-et-le-futur-du-web

http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html

Tu devras tôt ou tard passer au HTML5. L'usage de HTML 4.01 ou de XHTML 1.0 ne se justifie plus guère que par la nécessité de toucher des publics utilisant d'anciennes versions d'Internet Explorer et ne pouvant ou ne voulant installer et utiliser ou navigateur récent.

Les autres navigateurs majeurs disposent tous de système de mise à jour, de sorte que l'ensemble de ceux-ci est mis à jour très rapidement.

A toi de voir si tu veux/as besoin de toucher ces publics, et quel sera le coût/temps de conversion HTML 4.01/XHTML 1.0 > HTML5, et si cela se justifie.

Mais si le site est conçu en HTML5, il sera plus simple d'y ajouter une version mobile d'en l'avenir ?

On peut faire du mobile en HTML 4.01/XHTML 1.0.

Le principal intérêt du HTML5. Offrant tout un lot de nouvelles balises et attributs, il permet de créer des documents HTML avec un balisage plus sémantique (header, main, footer, article, au lieu de div id="header", div id="main", div id="footer", div id="article"), et disposant de nouvelles fonctionnalités (pour les formulaires, notamment).

L'usage de ces nouvelles balises, combiné avec les nouveaux sélecteurs CSS (nth-child, nth-of-type, nth-last-of-type, etc.), permet de créer un code HTML beaucoup plus simple, en évitant grandement de devoir recourir aux ids et aux classes pour cibler des éléments.

Enfin, côté vidéo, le HTML5 dispose précisément d'une balise video qui permet de se passer du plugin Flash, mais je ne sais pas si cette solution est actuellement satisfaisante (rendu, fonctionnalités nécessité de déclarer plusieurs formats vidéo, etc.).

http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

http://www.alsacreations.com/xmedia/tuto/html5/video/exemples.html

Bonne continuation.
Modifié par thierry (30 Aug 2013 - 15:39)

Merci thierry pour ta réponse détaillée.

Tu devras tôt ou tard passer au HTML5. L'usage de HTML 4.01 ou de XHTML 1.0 ne se justifie plus guère que par la nécessité de toucher des publics utilisant d'anciennes versions d'Internet Explorer et ne pouvant ou ne voulant installer et utiliser ou navigateur récent.

Les autres navigateurs majeurs disposent tous de système de mise à jour, de sorte que l'ensemble de ceux-ci est mis à jour très rapidement.

A toi de voir si tu veux/as besoin de toucher ces publics, et quel sera le coût/temps de conversion HTML 4.01/XHTML 1.0 > HTML5, et si cela se justifie.

Je vais commencer par demander les stats du site que je dois refondre afin de savoir quelles sont les habitudes en terme d'utilisation de navigateurs. Le site, en 2 langues, peut être vu au quatre coins du monde. Il y a peut être des coins qui utilisent des navigateurs plus anciens. A voir ...

On peut faire du mobile en HTML 4.01/XHTML 1.0.

D'accord, mais pas du responsive ?

L'intérêt du HTML5 pour la vidéo est grand. Par contre il faut encoder les vidéos en 2 formats.

Est-il indispensable d'associer HTML5 et CSS3 ?

Phil
Modifié par ensemblevide (30 Aug 2013 - 15:56)

Bonjour,

HTML5 et CSS3 n'ont aucun rapport : on peut faire du HTML5 avec du CSS2.1 ou 1 si ça nous chante ou du HTML4.01 stylé en CSS3... Ils sont souvent associés comme buzzword "HTML5" fourre-tout.

Thierry a résumé l'intérêt d'utiliser HTML5 (nouveaux éléments et attributs et notamment pour les formulaires, nouvelles API comme canvas, géolocalisation et une vingtaine d'autres).
Rien n'oblige à les utiliser et en fait on peut se contenter d'utiliser le doctype HTML5: "<!doctype html>", n'utiliser que les éléments d'HTML4.01 et aucune API donc absolument rien d'autre que le doctype HTML5 et on peut fièrement annoncer que "mon site est codé en HTML5". Yep, le doctype est bien celui d'HTML5 c'est rigoureusement exact (et ridicule).

Tu peux donc choisir le doctype HTML5 sans aucun problème et introduire au rythme qui te chante les nouveautés d'HTML5. Les nouveaux input c'est plutôt très simple par exemple et les anciens navigateurs qui ne reconnaissent pas <input type="search"> ou type="date" vont se rabattre sur type="text", ça ne change donc rien pour eux alors que sur mobile, les navigateur de ces derniers vont afficher un joli calendrier ce qui simplifie bien la vie des utilisateurs... pour un effort vraiment minimal de notre part. Si on met type="email", le clavier des mobiles change légèrement pour rajouter l'arobase "@" dans les touches dispos... C'est bien pensé

EDIT: IE8 et avant ont besoin d'un petit bout de JS pour reconnaître les nouveaux éléments comme header, aside, etc. Il s'appelle "html5shiv" (ou shim) et se place au début du code HTML, en fin d'élément head mais PAS en fin de code HTML comme on fait avec la plupart des scripts pour des raisons de performance.
Si ce n'est pas déjà fait par ce html5shiv, il faut aussi en CSS déclarer display: block; sur la plupart des nouveaux éléments (les navigateurs savent tous que par défaut un div devrait être display: block; les récents le font pour header par exemple mais IE8 date d'avant HTML5; il faut donc le lui "apprendre" à chaque chargement de page)


Les Media Queries pour adapter une page à d'autres résolutions (entre autres), c'est du CSS3, aucun rapport avec HTML5
Quand je démarrais mon apprentissage des MQ pour adapter des pages existantes, j'avais particulièrement apprécié le code de base d'une feuille de styles de base pour le Web mobile (avec l'élément meta qui va bien sans quoi il ne se passera rien...)
Astuce pour tester dans une résolution faible : Firefox et la combinaison de touches Shift-Ctrl-M (à tester sur www.alsacreations.fr ou .com par exemple . Ça ne remplace pas un vrai mobile de test iPhone ou Android ou bada ou etc mais ça aide
Modifié par Felipe (30 Aug 2013 - 20:28)