INF04 – HTML5 1 Langages’etstructure’du’Web · 2013. 1. 14. · INTRODUCTION À HTML5 B. Habert 2013 Langages du Web - HTML5 1 6 . Etat des lieux : avan ... L’élément

INF04 – HTML5 1 Langages et structure du Web

Benoît Habert

Plan du cours

•  Programmation côté client (4 séances) BH – HTML5

•  Nouvelles balises « sémantiques » •  Rich media : audio, vidéo

– CSS3 (transitions, animations, rotations) – Canvas 2D

B. Habert 2013 Langages du Web - HTML5 1 2

Plan du cours

•  Programmation avancée côté serveur (5 séances) LM – Rappel : SOAP et REST – AJAX (échanges asynchrones – Web sockets : communication bidirectionnelle

client/serveur – Web RTC (Real-Time Communication) – Web storage – Requêtage cross-domain


Plan du cours

•  Programmation Web mobile (3 séances) LM – Responsive Web Design (design adaptatif) – Récupération d'information (géolocalisation,

orientation). – Savoir se servir d'une interface tactile. – Compilation en applications Web ou natives.



Séance 1

•  Présentation d’HTML5 –  Histoire –  Statut actuel –  Ajouts de structure et formulaires

•  Mises en œuvre –  Formulaires –  Autopsie/amendement d’un environnement

reposant sur HTML5

INTRODUCTION À HTML5


Etat des lieux : avant

•  Ajustements : interaction avec une BD •  (re)Structuration logique : XML et XSLT •  Structuration grossière de la page : HTML •  Mise en place d’accroches : <div>, <span> •  Rendu d’empans identifiés (structure,

classes, éléments nommés de manière unique) : CSS

•  Interactions côté client : JavaScript B. Habert 2013 Langages du Web - HTML5 1 7

Accroches de rendu

•  <div> : conteneur de type bloc •  <span> (traduction : empan) : conteneur

de type en ligne Aucun des deux n’a de valeur sémantique. L’élément (la balise) permet d’associer un rendu •  Ajout d’un attribut id ou class pour

associer des règles CSS


(di|con)vergences

•  W3C en 1998 – Figement de HTML (4.01) – Spécification de XHTML

•  Groupe (Opera, Mozilla, Apple) non convaincu par la XMLisation du Web : WHATWG (Web HyperText Application Technology Working Group)

•  Reprise par/avec W3C entre 2006 et 2009


HTML5 : un nécessaire compromis

•  Tension entre l’instituant et l’institué (le « patrimoine » de pages existantes

•  Prise en charge différenciée entre les moteurs de rendu et les navigateurs

•  Instabilité des « genres » du Web

•  … si bien qu’est limitée l’avancée vers un balisage plus « sémantique »


Stabilisations et balisage

TeX et LaTeX •  TeX : primitives de

description de documents (caractères, espacements, page, tableaux…)

•  LaTeX : types de documents (article, book, report, letter) Le rendu des subdivisions (section) dépend de la classe

TEI •  Structuration d’ensemble

du « texte » et des métadonnées

•  Briques de base : mise en évidence, citations

•  Spécificités de « genres » : théâtre, poésie, terminologie…


HTML5 : in progress

•  Spécification à l’état de brouillon (draft) avec évolutions – Ex. <time> supprimée en octobre 2011 et

rétablie un mois après – Ex. <aside>

•  Départ: informations liées au contenu principal (comme un glossaire)

•  Maintenant : sidebar

•  Compatibilité ascendante (rétrospective) B. Habert 2013 Langages du Web - HTML5 1 12

Permissivité HTML5ienne

http://www.w3.org/TR/html-design-principles/

•  Pas sensible à la case <H1>Scoop<h1> •  Balises de fermeture pas obligatoires •  Guillemets facultatifs dans les attributs


Bonnes pratiques

•  Etre cohérent •  Forme XHTML de HTML5

– Toute balise ouvrante doit être fermée – Les balises vides doivent être fermées <br /> – Balises et attributs : en minuscules – Chaque attribut doit avoir une valeur entre

guillemets ou apostrophes – Les éléments doivent être correctement

imbriqués B. Habert 2013 Langages du Web - HTML5 1 14

Minimal HTML5 <!DOCTYPE html> <html lang="fr" /> <head> <meta charset="utf-8" /> <title>Essai 1</title> </head> <body> </body> </html> En gris : optionnel

•  NB –  L’élément <body> peut

être omis (pas pour IE8 et ses ancêtres)

–  L’enveloppement par l’élément <head> aussi

–  Cependant on s’en tiendra à un modèle qui les conserve


Inclusion CSS et JS

<link rel="stylesheet" href="css/fs1.css" /> <style> /** Règles CSS **/ </style> <script src="js/script1.js"></script> NB : JS est le type par défaut, il n’a plus à être spécifié


Validation

http://validator.w3.org/ http://html5.validator.nu/


Inventaire partiel

•  Eléments supprimés •  Eléments ajoutés (et changeant le rôle

d’autres éléments) •  Eléments explicitement redéfinis


Abandons

•  Au profit de CSS : <basefont>, <big>, <center>, <font>, <strike>, <tt>, <u>

•  Pour des raisons d’accessibilité : <frame>, <frameset>, <noframe>


Redéfinitions

•  <a> : peut contenir tout type d’élément (titre, paragraphe, liste, table…) sauf les éléments d’interaction (lien, bouton, champs de formulaire)

http://www.w3.org/TR/html5-author/the-a-element.html#the-a-element

•  <cite> : titre d’œuvre (<q> et <quote> pour citations brèves / longues)


Redéfinitions

•  <small> : éléments en petits caractères de pied de page (copyright, mentions légales)


Restructurations

Au départ •  Proximité/confusion

rendu/rôle –  <i> : italiques –  <b> : bold (gras)

XHTML et HTML5

•  Découplage rôle/rendu –  <em> : mise en exergue –  <strong> : importance forte

(le rendu peut varier : gras / majusculisation)

NB <em>/<strong> auto-imbricables •  Incertitude sur le rôle de

<i> et <b> http://html5doctor.com/i-b-em-strong-element/


Flous •  <b> : « mettre en valeur une portion de

texte, sans pour autant lui conférer une importance particulière »

http://www.w3.org/TR/html5-author/the-b-element.html#the-b-element •  <i> : « mettre en exergue une portion de

texte… différencier certains termes… » http://www.w3.org/TR/html5-author/the-i-element.html#the-i-element B. Habert 2013 Langages du Web - HTML5 1 23

Ajouts structure globale

•  <article> : portion de contenu indépendant (peut contenir un autre <article> - cf. Post avec commentaire)

•  <aside> : contenu indirectement lié au contenu principal

•  <section> : section de contenu ou d’application (plus générique que <article>, <nav>, <header>, <footer>, <aside>). Mais peut découper un <article>


Ajouts structure globale

•  <nav> : liens pour naviguer (site, document)

•  <header> : pour le document mais aussi pour <section> ou <article>

•  <footer> : du document ou d’une section au sens large

NB Les modes d’accès en CSS permettent de renvoyer aux différents niveaux d’emboîtement d’éléments comme footer B. Habert 2013 Langages du Web - HTML5 1 25

Ajouts hiérarchisation

•  <hgroup> : regroupement de titres (titre et sous-titre, par ex.). Un élément h2 après un h1 dans un hgroup est davantage associé au h1, comme un sous-titre

•  <figure> <img src=… /> <figcaption>…<figcaption>

</figure> Fait un tout d’une image et d’une légende B. Habert 2013 Langages du Web - HTML5 1 26

Ajouts autres

•  <time> – avec attribut datetime ayant pour valeur une

date lisible par une machine (pour extraction d’information)

<time datetime=‘2013-01-08’>mardi 8 janvier 2013</time> – Attribut pubdate : indique que le <time> est la

date de publication de l’élément <article> ou <body> le contenant


Regroupements

<fieldset> <legend>…</legend> <input type=… /> … </fieldset> Permet par exemple de regrouper des éléments input dans un formulaire et de fournir une légende pour ce regroupement B. Habert 2013 Langages du Web - HTML5 1 28

Formulaires

•  Esprit – Avoir des entrées plus spécialisées que

<input type=‘text’… /> (typage plus fin) – Déporter de JavaScript vers HTML5 les

contrôles de validité – côté client – de la valeur fournie par l’utilisateur

•  Nouveaux champs « vérifiants » – <input type="email" /> – <input type="tel" />


Formulaires

•  Nouveaux champs « vérifiants » (suite) – <input type="search" /> – <input type="url" /> – <input type="color" /> – <input type="date" /> (et time, week, datetime) – <input type="number" min="N" max="M"

step="O" /> – <input type="range" min="N" max="M" />


Formulaires •  Attributs

–  placeholder=‘A afficher dans le champ’. La valeur est un représentant, un « lieutenant », un vicaire qui aide à comprendre ce qu’il faut mettre. Par exemple : JJ/MM/AAAA pour une année

–  pattern : regexp contraignant la forme de ce qui est attendu. Exemple pour un numéro de téléphone : ‘[0-9]{10}’ : une suite de 10 chiffres

–  required : le champ doit être renseigné, sans quoi la validation est impossible


Formulaires •  Attributs (suite)

–  autofocus : champ du formulaire par lequel on souhaite que l’utilisateur commence la saisie. Le focus y est mis quand la page est chargée

–  autocomplete : par défaut à on au niveau du formulaire ou du champ

–  form : permet de placer une partie de formulaire en dehors d’un formulaire tout en l’y rattachant (permet de répartir les endroits de recueil d’information de la manière souhaitée et pas forcément tout ensemble)


Formulaires

•  Etiquetage (réactif) des champs – <label>X <input… /></label> – <label for=‘Y’>X <input…id=‘Y’ /></label> – <label for=‘Y’>X</label> <input…id=‘Y’ />

Pointer l’élément label rend actif l’input correspondant. Zone réactive plus large

- accessibilité - adapté aux smartphones


Volets

•  Accéder à du son, de la vidéo, du dessin ou des animations sans plug-in – <audio> – <video> – <canvas>


Non abordé •  Attributs data-*=‘X’ : intégration de données

« internes » (pas destinées à l’utilisateur) •  Microdonnées (item…) : description du contenu

pour des programmes tiers •  Appui à l’accessibilité : rôles WAI-ARIA

(Accessible Rich Internet Application Suite) http://www.w3.org/WAI/PF/aria/#usage-intro http://www.w3.org/WAI/PF/aria-practices/ indication du rôle d’un élément HTML B. Habert 2013 Langages du Web - HTML5 1 35

Contenus HTML5

•  Contenu de métadonnées – dans la partie <head> – y compris donc <style> et <script>

(contribuent à l’apparence et au comportement du contenu principal)

•  Contenu de flux (flow) : ensemble du contenu – Contenu de section : <article>, <aside>,

<nav>, <section> ; portée en-têtes/pieds B. Habert 2013 Langages du Web - HTML5 1 36

Contenus HTML5

•  Contenu de flux (flow) – suite – Contenu d’en-tête (heading) : <h1> à <h6>,

<hgroup> – Contenu de phrasé (phrasing) : texte du

document •  Contenu embarqué (embedded) : import

de ressource - image, vidéo, audio •  Contenu interactif (interactive) : <a>,

<input>, <button>, <textarea> B. Habert 2013 Langages du Web - HTML5 1 37

Démarche

•  Ne pas oublier la persistance des versions anciennes (en particulier IE en milieu industriel)


Démarche

•  Vérifier – L’accessibilité http://html5accessibility.com/ –  la prise en charge CSS, HTML, JS… http://caniuse.com/

•  Combiner – Pris en charge – Adaptations constructeurs – Solutions de remplacement/contournement


Aller plus loin

•  Une prise de recul http://diveintohtml5.info/ Avec liens vers les informations du WHATWG •  Groupe de développement http://developers.whatwg.org/


HTML5 : MISES EN OEUVRE


FORMULAIRES


Environnement

•  Créer un répertoire HTML5 dans le répertoire où Apache cherche les scripts exécutables

•  Dans ce répertoire – Déposer

•  utilitaires.php •  afficheProfil.php

– Développer renseigneProfilK.html


renseigneProfil1.html

•  Ecrire un document HTML5 minimal de nom renseigneProfil1.html, le tester

•  Ajouter – Un hgroup avec un h1 et un h2 – Un formulaire appelant en mode POST

afficheProfil.php avec •  2 boutons : effacer / valider


renseigneProfil1.html •  Ajouter

– Un élément fieldset avec •  Un élément <legend> •  Autant de couples <label><input> que demandé

en choisissant le type idoine –  Prénom –  Email –  Tél. fixe –  Tél. portable – Date de naissance –  Âge – Couleur préférée



•  Ouvrir tous les navigateurs dont vous disposez

•  Notez dans le pad sous votre nom – La combinaison système d’exploitation/

navigateur/version – Pour chaque version de renseigneProfilK.html

indiquer les comportements observés •  contrôles effectivement mis en place •  Environnement transmis


renseigneProfil2.html •  Sauvez renseigneProfil1.html sous

renseigneProfil2.html •  Modifier en conséquence le texte de

l’élément <title> •  Utilisez les attributs pour modifier les

comportements des contrôles (écriture XTHML : X=‘X’)

•  Notez dans le pad les modifications observées selon les navigateurs



•  Modifications visées – Faites que le focus de départ soit sur le

prénom – Contraignez la « forme » du téléphone

portable et rendez cette information nécessaire

– Fournissez un guide de saisie pour la date – Donnez une fourchette raisonnable pour l’âge

(7 à 77) et un « pas » de 1


Réalisation

•  Document HTML5 minimal

<!DOCTYPE html> <html lang="fr" /> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>


Réalisation


Réalisation


Réalisation


Réalisation


Réalisation


Réalisation


Réalisation

•  renseigneProfilK.html est un formulaire faisant appel aux nouveaux contrôles HTML5

•  Valider ce formulaire déclenche afficheProfil.php à qui est transmis en mode POST un environnement, un ensemble de variables et de valeurs. Ex. le premier input text associe à la variable prenom la chaîne entrée par l’utilisateur


Réalisation

•  afficheProfil.php fait appel à des fonctions PHP contenues dans le fichier utilitaires.php chargé par la fonction prédéfinie PHP require_once(nom de fichier)

•  Les fonctions utilitaires facilitent la création d’un document HTML5 minimum (ce sont des raccourcis)


Réalisation

•  afficheProfil.php se contente d’afficher (via une boucle foreach) les associations variable-valeur qui sont contenues dans le tableau $_POST qui donne accès à l’environnement transmis par renseigneProfilK.html


HTML5ISATION : JEU DES DIFFÉRENCES


Documents

INF04 – HTML5 1 Langages’etstructure’du’Web · 2013. 1. 14. · INTRODUCTION À HTML5 B. Habert 2013 Langages du Web - HTML5 1 6 . Etat des lieux : avan ... L’élément