INF04 HTML5 1 Langages et structure du Web. Benoît Habert

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 B. Habert 2013 Langages du Web - HTML5 1 3

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. B. Habert 2013 Langages du Web - HTML5 1 4

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 B. Habert 2013 Langages du Web - HTML5 1 5

INTRODUCTION À HTML5 B. Habert 2013 Langages du Web - HTML5 1 6

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 B. Habert 2013 Langages du Web - HTML5 1 8

(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 B. Habert 2013 Langages du Web - HTML5 1 9

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» B. Habert 2013 Langages du Web - HTML5 1 10

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 B. Habert 2013 Langages du Web - HTML5 1 11

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-designprinciples/ Pas sensible à la case <H1>Scoop<h1> Balises de fermeture pas obligatoires Guillemets facultatifs dans les attributs B. Habert 2013 Langages du Web - HTML5 1 13

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 B. Habert 2013 Langages du Web - HTML5 1 15

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é B. Habert 2013 Langages du Web - HTML5 1 16

Validation http://validator.w3.org/ http://html5.validator.nu/ B. Habert 2013 Langages du Web - HTML5 1 17

Inventaire partiel Eléments supprimés Eléments ajoutés (et changeant le rôle d autres éléments) Eléments explicitement redéfinis B. Habert 2013 Langages du Web - HTML5 1 18

Abandons Au profit de CSS : <basefont>, <big>, <center>, <font>, <strike>, <tt>, <u> Pour des raisons d accessibilité : <frame>, <frameset>, <noframe> B. Habert 2013 Langages du Web - HTML5 1 19

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-aelement.html#the-a-element <cite> : titre d œuvre (<q> et <quote> pour citations brèves / longues) B. Habert 2013 Langages du Web - HTML5 1 20

Redéfinitions <small> : éléments en petits caractères de pied de page (copyright, mentions légales) B. Habert 2013 Langages du Web - HTML5 1 21

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) Incertitude sur le rôle de <i> et <b> NB <em>/<strong> autoimbricables http://html5doctor.com/i-bem-strong-element/ B. Habert 2013 Langages du Web - HTML5 1 22

Flous <b> : «mettre en valeur une portion de texte, sans pour autant lui conférer une importance particulière» <i> : «mettre en exergue une portion de texte différencier certains termes» http://www.w3.org/tr/html5-author/the-belement.html#the-b-element http://www.w3.org/tr/html5-author/the-ielement.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> B. Habert 2013 Langages du Web - HTML5 1 24

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 B. Habert 2013 Langages du Web - HTML5 1 27

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" /> B. Habert 2013 Langages du Web - HTML5 1 29

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" /> B. Habert 2013 Langages du Web - HTML5 1 30

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 B. Habert 2013 Langages du Web - HTML5 1 31

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) B. Habert 2013 Langages du Web - HTML5 1 32

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 B. Habert 2013 Langages du Web - HTML5 1 33

Volets Accéder à du son, de la vidéo, du dessin ou des animations sans plug-in <audio> <video> <canvas> B. Habert 2013 Langages du Web - HTML5 1 34

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) B. Habert 2013 Langages du Web - HTML5 1 38

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 B. Habert 2013 Langages du Web - HTML5 1 39

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/ B. Habert 2013 Langages du Web - HTML5 1 40

HTML5 : MISES EN OEUVRE B. Habert 2013 Langages du Web - HTML5 1 41

FORMULAIRES B. Habert 2013 Langages du Web - HTML5 1 42

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 B. Habert 2013 Langages du Web - HTML5 1 43

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 B. Habert 2013 Langages du Web - HTML5 1 44

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 B. Habert 2013 Langages du Web - HTML5 1 45

renseigneprofil1.html 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 B. Habert 2013 Langages du Web - HTML5 1 46

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 B. Habert 2013 Langages du Web - HTML5 1 47

renseigneprofil2.html 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 B. Habert 2013 Langages du Web - HTML5 1 48

Réalisation Document HTML5 minimal <!DOCTYPE html> <html lang="fr" /> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html> B. Habert 2013 Langages du Web - HTML5 1 49

Réalisation B. Habert 2013 Langages du Web - HTML5 1 50

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 B. Habert 2013 Langages du Web - HTML5 1 56

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) B. Habert 2013 Langages du Web - HTML5 1 57

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 B. Habert 2013 Langages du Web - HTML5 1 58

HTML5ISATION : JEU DES DIFFÉRENCES B. Habert 2013 Langages du Web - HTML5 1 59