S'inscrire |

 
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #1 (permalink)  
Vieux 26/02/2011, 20h56
Www HTML5 pour designers web

HTML5 pour designers web

Salut les IKers.

Je me suis dit qu'il fallait que je me mette au point sur l'HTML5. Je l'ai fait, et donc, autant vous faire partager ce que j'ai appris.

Ma source est principalement le livre de Jeremy Keith : HTML5 for Web Designers. Vous pouvez trouver des infos sur ce livre ici

Mon but ici est de résumer ce qu'est le HTML5. La définition de ce nouveau standard prend des centaines de pages, et est assez illisible pour quelqu'un qui ne souhaite pas y passer des heures. Je vais donc essayer d'aller à l'essentiel. Je suppose que vous vous y connaissez déjà un minimum en HTML/XHTML.

Ce poste est plus un mémo utile du HTML5 qu'un tuto complet pour l'apprendre.

La base d'HTML5

Le but de cette nouvelle norme est d'essayer d'enfin définir un standard réaliste pour la création de pages web. Le HTML5 se veut capable d'être rétro-compatibles avec les normes précédentes (HTML4, XHTML1, ...) et surtout répondre aux attentes des développeurs : avoir un moyen facile de créer une page web affichable sur TOUS les navigateurs.

Le HTML5 se veut simple mais ouvert. De ce fait il est moins strict que le XHTML2 par exemple, dans un soucis de retro-compatibilité. Bien sur, rien de vous empêche de respecter vos propres règles de mise en forme !

Commençons par le début... Vous vous souvenez surement des premières lignes de vos documents HTML, celles que vous ne pouviez pas apprendre par coeur... Ces lignes définissent le langage utilisé, l'encodage des caractères, les adresses des feuilles de style CSS et des scripts JavaScript (JS). En HTML5, ces lignes sont simplifiées :

Doctype :
<!DOCTYPE html>
Encodage des caractères :
<meta charset="UTF-8">
Script JS :
<script src="file.js"></script>
Feuille de style CSS :
<link rel="stylesheet" href="file.css">

Dans un but de simplification, et surtout pour refléter la réalité de ce qui se passe aujourd'hui sur le web, certaines balises HTML sont devenues obsolètes (obsolètes étant différente de dépréciées, ici elles ne servent juste plus à rien...). Les voici:
frame, frameset, noframes, acronym, font, big, center, strike, bgcolor, cellspading, cellpadding et valign.
La plupart d'entre elles sont remplaçables par du code CSS.

Certaines balises de mise en forme sont néanmoins encore présentent, bien que redéfinies.
small : Ne veut plus dire "Afficher en petite taille", mais "Ceci est une annotation (small print en anglais)". Vous allez le remarquer, HTML5 fait beaucoup référence au "sens" de ce qui est encapsulé par les balises. Le but est d'aider le navigateur à comprendre ce qui est codé. La mise est forme n'est que secondaire.
b : veut dire maintenant "ce passage est mis en valeur par un style par rapport au texte normal, mais cette mise en valeur ne reflète aucune importance particulière"
i : veut dire "ce passage a été dit d'une voix différente" mais ne reflète aucune emphase
cite : a n'utilise maintenant que pour citer un titre d'ouvrage, et non plus un nom par exemple.
a : cette balise est essentielle, le HTML5 relâche les contraintes qui lui sont liées. On peut maintenant, à l'intérieur d'une balise a, encapsuler d'autres balises (Un titre et un paragraphe par exemple).

Rich media

La balise canvas

Sert à créer des images dynamiques. C'est à l'aide de JS que le contenu sera généré.
Exemple :
<canvas id="mon-premier-canvas" width="200" height="100">
<p>Vous ne supportez pas la balise Canvas ? Voici une image à l'ancienne à la place</p>
<img src="image.jpg" alt="une jolie image">
</canvas>


Seuls les navigateurs qui ne supportent pas la balise canvas vont pouvoir lire ce qu'il y a entre les balises d'ouverture et de fermeture canvas.

Vous utilisez ensuite JS pour accéder au canvas et l'utiliser :
Code:
var canvas = document.getElementById('mon-premier-canvas');
var context = canvas.getContext('2d');
Vous pouvez maintenant tracer ce que vous voulez dans votre canvas !!

La balise audio


Pour insérer un fichier audio :
<audio src="... .mp3"></audio>
Elle supporte de nouveaux attributs tels que : autoplay, loop, controls, preload="x". Où x = none, auto ou metadata.

Encore une fois, dans un souci de compatibilité (format lus, navigateurs ne connaissant pas la balise audio) vous avez une solution :
<audio controls>
<source src="... .ogg" type="audio/ogg">
<soucre src="... .mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash" data="player.swf?soundFile=... .mp3">
<param name="movie" value="player.swf?soundFile=... .mp3">
</object>
</audio>


Ici encore, tout ce qui se trouve entre <audio> et </audio> et qui n'est pas une balise <source> est lu uniquement par les navigateurs non compatibles avec la balise source. Ici donc, ils voient du flash pour quand même lire le fichier. Bien sur vous pouvez mettre autre chose.
Vous pouvez insérer différentes sources, le but étant que chaque navigateur choisisse celle qu'il peut lire.

La balise Video

Elle fonction comme la balise audio, sauf que d'autres attributs existent : width, height, poster (défini une image statique avant la lecture).

Les formulaires

Le HTML5 enrichit énormément ce qui peut être fait avec des formulaires. Le but étant de mettre directement accessible en HTML5 des options devant être faites en CSS ou JS auparavant.

Voici les nouveaux attributs : placeholder (texte par défaut qui s'enlève après un clique), autofocus, required, autocomplete (mettre à "off" pour désactiver le remplissage automatique des navigateurs).

Encore une fois, il est possible d'être rétro-compatible à l'aide de JS :
Code:
function elementSupportsAttribute(element, attribute){
   var test = document.createElement(element);
   if(attribute in test){
      return true;
   } else {
      return false;
}
Ensuite on utilise :
Code:
if(!elementSupportsAttribute('input','placeholder')){
   // JS que l'on veut faire si pas de support du nouvel attribut
}
Le champ input à des nouveaux attributs qui lui sont propre tels que : datalist qui permet de définir une liste de choix, non obligatoires. Par exemple
<input type="text" name="." id="." list="planettes">
<datalist id="planettes">
<option value="Mars">
<option value="Neptune">
...
</datalist>


L'attribut type de la balise input accepte également de nouvelles valeurs : text, search, email, url, tel, range (pour faire apparaître un slider, avec options min, max), number (range avec valeurs qui s'affichent), date, datetime, datetime-local, time, month (toutes ces derniers sont différents formats de date), color (un sélecteur de couleur, n'est pas encore pris en charge par aucun navigateur), pattern (vous pouvez définir un format particulier avec une expression régulière définie en valeur de l'attribut pattern).

La rétro compatibilité pour tester la lecture de ces nouvelles valeurs se fait ainsi :
Code:
function inputSupportType(test){
   var input = document.createElement('input');
   input.setAttribute('type',test);
   if(input.type=='text'){
      return false;
   } else {
      return true;
   }
}
Sémantique

Nouveaux éléments

mark : "marque un élément dans un texte qui est mis en valeur en référence à un autre contexte". Par exemple, le mot qui vous avez tapé dans un champ de recherche et que vous voulez mettre en valeur dans les résultats.
time : un exemple est plus simple... Vous voulez afficher la date dans un format lisible pour le lecteur et compréhensible pour le parseur du navigateur,
<time datetime="17:00">5pm</time>
<time datetime="2010-04-07">7 avril</time>
<time datetime="2010-04-07T17:00">5pm le 17 avril</time>

meter : pour définir une valeur mesurable
<meter>25°</meter> de température
<meter low="-273" high="100" min="-12" max="30" optimum="21" value="25">C'est assez chaud pour cette période de l'année</meter>

Dans le dernier exemple vous voyez l'utilisation des nouveaux attributs. La valeur n'est pas forcément explicitement donnée entre les balises. La mettre dans l'attribut value est suffisant.
progress : un exemple suffit,
Votre profile est complété à <progress>60%</progress>
ou encore
<progress min="0" max="100" value="60"></progress>

Structure

section : utilisé pour grouper des élément avec un thème en commun
header : Apparait en général en tête de document ou de section. Sert à indiquer un groupe d'informations d'introduction ou d'aide à la navigation.
footer : ... assez transparent
aside : pour encapsuler du contenu avec un thème parallèle au thème courant
nav : contient des informations de navigation
article : comme une section mais avec un contenu avec un thème commun auto-contenu (eh eh, je sais c'est pas très clair). Disons que l'article est un tout fermé. Si vous insérez un champ time dans l'articule vous pouvez y mettre (une seule fois) l'attribut pubdate pour définir une date de publication.

Les modèles de contenu

Text-level semantics : c'est ce qu'on appelait les balises "inline" avant, comme b, i, span, ...
Grouping content : les paragraphs, les listes d'éléments, les div, ...
Forms : tous les éléments de formulaire
Embedded content : les images, audio, video, canvas, ...
Sectioning content : section. En HTML5, chaque section à son propre cadre structurel. C'est à dire que si vous utilisez une hierarchie telle que h1, h2, h3, etc... cette hierarchie sera relative au contenu de la section.
Utiliser un code comme
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>

est équivalent à
<h1>...</h1>
<section><h1>...</h1>
<section><h1>...</h1></section>
</section>

en HTML5.
hgroups : ne fait apparaitre que le premier élément (celui de hiérarchie la plus haute) à l'affichage du hgroup
Sectionning roots : blockquote, fieldset, td... éléments qui sont insensibles à la hiérarchie de section.
Scoped styles : tous les styles définis avec l'attribut scoped ne seront appliqués qu'aux éléments de la section courante. Et là on arrive à la limite du HTML5 >>> cette fonction n'est pour l'instant supportée par personne...

Utiliser dès aujourd'hui le HTML5

Feuilles de styles

Pour être sur que tous les navigateurs puissent lire toutes les nouvelles balises, il est prudent de mettre dans sa feuille de CSS :
section, article, header, footer, nav, aside, hgroup{
display:block;
}


Comme internet explorer n'est pas du tout compatible avec ces nouvelles balises, vous devez exploiter une autre solution : définir chaque balise au préalable en javascript :
Code:
document.createElement('section');
Ou utiliser un script de Remy Sharp :
Code:
<!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
   </script>
<![endif]-->
Pour toutes les balises h1, h2, etc. la nouvelle hiérarchie relative à chaque section n'est pas encore utilisable dans les navigateurs. Et faire comme si elle l'était entraine la création de fichiers CSS très complexes...

ARIA : Accessible Rich Internet Applications

Permet de compléter les informations que l'on peut donner au navigateur en terme de sémantique. Par exemple on peut définir l'attribut role à la valeur "search" pour notre formulaire de recherche, "banner" pour notre header principal, "contentinfo" pour notre footer principal, etc. Vous pouvez également utiliser ces valeurs dans vos feuilles CSS :
header[role="banner"]{}
footer[role="contentinfo"]{}


Validation

Comment valider son code HTML5 ? Allez sur Validator.nu
Ce valideur est utilisé directement par le site du W3C dès que le doctype HTML5 est présent dans le document.

Détection de nouveaux éléments

Est-ce que votre navigateur est compatible avec les nouveaux éléments de l'HTML5 ? Pour le savoir, il vous suffit d'utiliser le fichier JS : Modernizr (Modernizr). Il va détecter le support des balises comme video, audio, ... et les déclarer pour les utilisateurs de IE !
Vous pouvez traiter la rétro-compatibilité comme ceci :
Code:
if(!Modernizer.inputtypes.color){
   // ce que vous voulez faire
}
Voilà pour ce poste. J'espère qu'il vous sera utile. Si vous avez la moindre question, le moindre commentaire, des envies de précisions de suggestions de modifications, n'hésitez pas !

++

ReV

PS : si ça vous plait, j'envisage de faire mon prochain poste sur le CSS3, la suite logique

Dernière modification par ReV ; 26/02/2011 à 21h08.
Réponse avec citation
TEAM
Avatar de Booster2000
Booster2000 est déconnecté Booster2000 est un Homme 03/03
XP de Booster2000 1 268 Nombre total de messages de Booster2000
| Traducteur |
  #2 (permalink)  
Vieux 27/02/2011, 11h40
Très intéressant, merci pour ce papier ReV.
Réponse avec citation
Avatar de Fabrice LM.
Fabrice LM. est déconnecté Sexe Non renseigné 02/11
XP de Fabrice LM. 24 Nombre total de messages de Fabrice LM.
Petit-posteur
  #3 (permalink)  
Vieux 27/02/2011, 15h24
Défoncé Pekab !

Bonjour,

Merci beaucoup pour ce "droit au but", c'est beau le progrès
j'aime beaucoup cette évolution du langage, plus net et explicite.
Je suis intéressé au passage, pour le CSS3 !

Salutations, Fabrice LM.
Réponse avec citation
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #4 (permalink)  
Vieux 18/03/2011, 00h46
Voilà, le tuto sur le CSS3 est en ligne :

http://www.infographik.fr/tutoriaux/...gners-web.html

Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 23h30.