Langage HTML5
Najib Tounsi
Lien permanent : http://www.mescours.ma/
TechWeb/HTML/html5-tdm.html
NB. On pourra souhaiter voir d'abord HTML
basique
Question
Qu'est-ce que le Web après tout ?
- I)
Un lieu où on navigue dans un océan d'informations interconnectées par
des liens et où et les gens (les scientifiques) mettent des documents
Hypertexte et les partagent avec les autres?
- II) Une
plate-forme pour des applications (Clients/Serveurs, protocole HTTP)
quelconques, SI, BD, Social Web, etc?
- Plus encore
(diffusion musique TV, communication temps réel, ...).
- Les navigateurs ne sont-ils pas devenus des OS?
-
Quoi d'autre ?..
HTML5 pour les Web Apps
- HTML5 serait plutôt la deuxième vision. Ou plutôt les deux à la
fois.
- Quoique...
- HTML4 .. XML .. XHTML(1 & 2) ➔ applications Web
sémantique, moteurs de recherche etc.
- XForms pour les UIs et les Web Apps.
- voir plus loin...
HTML5 Destiné au Web
- Langage centrale de la plate-forme du Web (avec CSS, JS)
- Destiné au Web (publication, navigation)
- Balisage sémantique
- navigation/interaction riches ...
... et aux applications
Web
- Offre toutes les caractéristiques applicatives, APIs
- Interaction (formulaire riches, ...)
- Musique, Vidéo ... (plus besoin de flash)
- Graphiques (SVG, Canevas 2D)
- Publication eBook
- Mémoire locale
- Microdata
- Parallélisme
- les Web
Workers permettent de lancer des processus légers (threads)
exécutés en arrière plan.
- Communication temps réel (Web RTC)
- ...
- → Plus intéressant que Mobile Apps.
HTML ➔ XHTML ➔ HTML5 ...
- HTML5 et le nouveau langage HTML qui remplace HTML4.01 et la
famille XHTML.
- HTML5 est un langage pour applications Web, plus qu'il n'est un
langage de formatage de documents hypertextes.
- Nouveau éléments structurants (e.g. pour générer les sommaires des
documents) ou donnant plus de sémantique (time, summary/
details, mark,...)
- HTML5 rassemble et standardise plusieurs
caractéristiques utilisées par les développeurs et qui en font,
avec Javascript et CSS, une véritable plate-forme
pour développer des applications sur le Web.
HTML ➔ XHTML ➔ HTML5
- HTML5 tourne sur tous les navigateurs modernes
et il est indépendant des OS.
- Il a été spécialement conçu pour offrir un contenu multimédia sans
avoir besoin de modules d'extension (plug-ins).
- HTML5 intègre tout, de l'animation au graphiques, de la musique aux
vidéos, et peut être utilisé pour construire des applications Web
complexes.
- HTML5 est également multi-plateforme. Il est conçu pour fonctionner
que vous utilisiez un PC ou une tablette, un smartphone ou une
Smart-TV. (Responsive Web Design)
- Démo
...
(Source : https://www.w3.org/2010/Talks/0430-www2010-plh/ugly.xhtml)
Quelques faits historiques
de HTML5
(Aller directement à HTML5
quoi de neuf, pour sauter cette partie)
- L'une des premières choses qui frappe dans HTML5 c'est la première
ligne DOCTYPE simplifiée
<!DOCTYPE html>
<html>
...
</html>
- Ensuite vient le document entouré de des balises <html>
</html> sans espace de nom tel que xmlns
ou autre.
Types de Documents (MIME)
Internet
- Par exemple:
Content-Type: text/html
- C'est l'information primordiale qui permet à un client HTTP
d'interpréter correctement une ressource rendue par un serveur, et
donc à un navigateur d'afficher une page.
- Chaque chose a son MIME
type (image/jpeg, video/mpeg, image/svg+xml,
application/xml, text/plain,
text/css, application/pdf,
etc.)
- Syntaxe générale: Type/Sous-type
HTML ➔ XHTML
- XHTML est une reformulation de HTML en XML
- :-) Bonne pratique (balisage... stricte)
- :-) Compatible avec parser XML
- :-( XML: gestion draconienne des erreurs !
- XHTML 1.0 peut-être servi comme text/html
ou application/xhtml+html
- 99%? des pages ne sont pas "XML - bien formée" dans leur syntaxe.
- XHTML, ok, mais servi text/html.
- HTML très libéral avec les erreurs
- Possible avec XHTML 1.0, mais pas avec XHTML1.1 (ou XHTML2)
HTML vs. XHTML
- Exercice: Tester le programme python2 suivant (fichier serveXHTML.py,
répertoire cgi-bin)
#!/usr/bin/python
print "Content-type: text/html"
#print "Content-type: application/xhtml+xml"
print """
<!DOCTYPE html>
<html>
<body>
<p> Bonjour ...</p>
</body>
</html>
"""
- Ouvrir le programme avec http://localhost/.../cgi-bin/serveXHTML.py
- Le résultat s'affiche normalement.
- Commenter le premier print
et décommenter le deuxième.
- Le résultat s'affiche en tant qu'arbre XML.
- Retirer le </p>
dans la ligne <p>
Bonjour </p>.
- L'erreur XML est signalé, et la page n'est plus affichée!
HTML ➔ HTML5
- 2004, Workshop
W3C sur les applications Web.
- Ne pas "casser" la compatibilité avec les contenus existants.
- Ce n'est pas le cas de XHTML1.1 et 2 (servi uniquement comme
application/xhtml-xml)
- XForm n'est pas compatible avec les forms HTML existantes
- Form HTML très déployées sur le Web
- Définir un traitement d'erreur souple et utilisable par tous les UA.
- WHAT-WG
(initiative Opera et Mozilla), pour une nouvelle spec. basée sur
HTML et les technologies existantes (CSS, DOM, Javascript...)
-
→ Web Application 1.0
Objectifs de WHAT-WG
- Documenter le comportement réel des navigateur et standardiser les
extensions utiles
- Développer de nouvelles fonctionnalités pratiques
- Compatibilité avec l'existant et meilleure prise en compte des
erreurs
- API pour applications Web off-line
- Spécification HTML en développement continu (Living Standard)
HTML ➔ HTML5
- 2006, W3C (Tim Berners-Lee) décide de
prendre
le train en marche.
- W3C et WHATWG, travailleront ensemble sur un nouveau HTML
- La spec. WHATWG bien avancée
- Web Form2.0 avec de nouvelles fonctionnalités
- "Web Application 1.0"
avec canevas pour dessins graphiques 2D, vidéo et audio intégrés,
nouveaux éléments sémantiques, etc.
- Nouveau groupe de travail HTML au W3C
- "Web Application 1.0" devient HTML5
HTML5 Syntaxe Abstraite
- La spécification HTML 5 est la description d'un vocabulaire qu'on
peut écrire dans deux syntaxes différentes: HTML et XML.
- HTML5 appelé HTML
tout court actuellement.
HTML5 quoi de neuf
- Idée de créer des sections sémantiques
→ Entête <header>,
bas de page <footer>, article <article>,
section <section>, marge <aside>,
barre de navigation <nav> etc. Voir plus loin.
→ Web storage API : localStorage
(mémoire locale côté client, alternative aux cookies), sessionStorage
et IndexedDB.
→ Geolocation, Web Workers,
HTML Cache (application Web offline), MàJ page automatique, Web
RTC etc. et d'autres dans différents domaines comme le
paiement Web par exemple.
Ça évolue continuellement (Living
Standard).
- Canvas 2D, Webform, Webfonts,
- vidéo/audio incorporées
- Microdata
- HTML5 est au cœurs de la Open
Web Platform.
- Eléments obsolètes: applet,
frames, marquee,
et
d'autres.
HTML5 ... Tout au début
- Nouveau Doctype simplifié
en première ligne
<!DOCTYPE html>
- Charset aussi (dans la
partie
<head> )
<meta charset="UTF-8" />
au lieu de <meta content="text/html; charset=UTF-8"
http-equiv="content-type">
- Elément racine (de préférence avec la langue de l'audience :-)
<html lang="ar-MA">
<html xmlns="xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar-MA">
HTML5 ... Nouveaux
Eléments Sémantiques
Eléments qui non seulement permettent de structurer une page, mais
ont un sens particulier pour les analyseurs de pages Web.
- Avant: forme d'une page
couramment utilisée en HTML
<div
id ="entête">
|
<div
id="barreNav"> |
<div id="contenu">
|
<div id="navCôté"> |
<div
id ="basDePage"> |
- avec un style de type
{#contenu: color: green;....},
sélecteur utilisateur...
- Après: avec nouveaux
éléments on pourrait faire
<header>
|
<nav> |
<section>
|
<aside> |
<article>
|
<footer> |
-
- le style cette fois-ci sera
article {color: green;....}
avec sélecteur d'élément
- Les sections
<section> et articles <article>
peuvent se répéter dans la partie contenu
- L'élément
<header> peut aussi
servir à l'intérieur de section ou article, créant ainsi une structure
hiérarchique de contenus
HTML5 <header>
<header>
<h1>Ma Page Personnelle</h1>
<p> Commentaire court sur cette page... </p>
</header>
- Peut aussi servir dans un article (ou section)
<article>
<header>
<h1>Titre de l'Article</h1>
<p>Ecrit par Ali Benali</p>
</header>
<p>... tous deux magnifiques ...</p>
</article>
- On peut mettre plusieurs éléments
<header>
un pour chaque section ou article ...
- L'importance de ces entêtes se retrouve par exemple dans les outils
outliner
qui font les sommaires (e.g. http://gsnedders.html5.org/outliner/process.py).
- Dans cet exemple on aura :
- Ma Page Personnelle
-
Titre de l'Article
- Ces sommaires sont très utiles pour naviguer dans une page. Les
lecteurs d'écrans utilisent ces sommaires pour aider les malvoyants à
naviguer par exemple.
HTML5 <article>
- La balise
<article> précise un contenu autonome
qui peut être pris et utilisé indépendamment.
- Cela pourrait être un post sur le forum, un article de magazine
ou d'un journal, une entrée de blog, un commentaire soumis par
l'utilisateur, ou tout autre morceaux de contenu relativement
indépendant (spec. W3C).
- Un élément
<article> a généralement un titre
(introduit par la balise <header>), et parfois un
pied de page (<footer>). On peut penser à un <article>
comme un item de news dans un site d'information par exemple ou un
entrée de blog.
<article>
<header>
<h1>Le Pigeon</h1>
<p>Film italien de Mario Monicelli sorti en 1958.</p>
</header>
<p>Cosimo est arrêté par la police alors qu'il tente
de voler une voiture. Pour sortir de prison plus rapidement,
il demande à ses complices de lui trouver un "pigeon",
quelqu'un qui prendra sa place derrière les barreaux moyennant
retribution.
...
</p>
...
<footer>
<p><small>Catégories: Film italien (1958). Comédie.</small></p>
</footer>
</article>
HTML5 ... Retour sur les <header>
- L'intérêt des balises sémantiques se retrouve dans un exemple comme
:
<body>
<header>
<h1>Ma Page Personnelle</h1>
<p>Bienvenue...</p>
</header>
<article>
<header>
<h1>Le pigeon</h1>
<p>Film italien de Mario Monicelli sorti en 1958.</p>
</header>
<p>... un type est arrêté par la police alors qu'il ...</p>
</article>
<article>
<header>
<h1>Les temps modernes</h1>
<p>Film de Charlie Chaplin sorti en 1936...</p>
</header>
<p>... une comédie dramatique américain ...</p>
</article>
</body>
- HTML5 définit an algorithme pour générer un sommaire (outline)
d'une page.
- Ici cela donnerait, alors que tous les titres sont de niveau
<h1>
- Ma Page Personnelle
- Le pigeon
- Les temps modernes
Article introduit un nouveau nœud dans l'arbre (DOM) du
document. Ce qui fait que les niveaux <h1>
sont décalés- En HTML4, avec
<div> au lieu de
<article>, on aurait
- Ma Page Personnelle
- Le pigeon
- Les temps modernes
car pour avoir un deuxième niveau il faut obligatoirement un <h2>
- Une entrée structurée comme un article dans cet exemple peut être
insérée dans un autre document (ou template)
sans en gêner la structure.
HTML5 <section>
<article>
<header>
<h1>Le Pigeon</h1>
<p>Film italien de Mario Monicelli sorti en 1958.</p>
</header>
<section>
<h2>Synopsis</h2>
<p>Cosimo est arrêté par la police alors qu'il tente
de voler une voiture. Pour sortir de prison plus rapidement,
il demande à ses complices de lui trouver un "pigeon",
quelqu'un qui prendra sa place derrière les barreaux.</p>
...
</section>
<section>
<h2>Fiche technique</h2>
<p> Titre original: I Soliti ignoti
... </p>
<footer>
<p><small>Catégories: Film italien sorti en 1958. Comédie</small></p>
</footer>
</article>
HTML5 <section>
- L'élément
<section> est aussi un élément
structurant un texte.
- A la différence d'article, une section
<section>
est plutôt prévue pour grouper des contenus proches ou à propos d'une
thématique particulière.
- On peut tout aussi bien grouper plusieurs
<article>
dans une même <section>.
- Le choix est déterminé par l'auteur...
<section>
<article>
<header>
<h2>C++</h2>
<header>
<p> C'est un langage de programmation orienté objets .... </p>
</article>
<article>
<header>
<h2>Java</h2>
<p>Langage plus récent, créé en </p>
<header>
<p> Java est un langage créé par Sun Microsystems et racheté
par Oracle en 2010 ... </p>
</article>
...
</section>
HTML5 <footer>
- Elément qui peut se trouver en fin de section (ou d'article).
- Contient en général les informations telles que la personne auteure,
une adresse, liens vers les documents en rapport, copyrights
etc.
- Peut être des sections ou contenir des éléments
<nav>
- Exemple http://www.w3.org/#w3c_footer
HTML5 <nav>
- L'élément
<nav> permet d'introduire une liste de
liens.
- Un style qui s'est imposé dans beaucoup de pages Web, est la barre
de navigation sous forme de suite de liens.
- Peut être horizontale (en général, en haut de page) ou verticale sur
le côté.
- La balise
<nav> de HTML5 est là pour donner un
sens "liens" à cette liste.
<nav>
<ul>
<li><a href="/accueil.html">Accueil</a></li>
<li><a href="/">the.html</a>Thé</li>
<li><a href="/cafe.html">Café</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
- Dans une page on peut vouloir utiliser ces liens pour sauter
directement vers les parties utiles.
- Elément important aussi pour l'accessibilité.
- Passer facilement d'un lien utile à un autre, ou bien sauter au delà
vers le contenu effectif de la page.
HTML5 <aside>
- Un élément
<aside> , inspiré des sections
placées à côté dans les textes imprimés, était initialement
prévu pour mettre un contenu en marge du contenu normale mais qui est
en rapport
- Citations, annonces, ou bien un groupe d'éléments <nav>
etc.
<aside> est défini pour être :- Utilisé à l'intérieur d'un élément
<article>,
son contenu doit être spécifiquement lié à cet article (par exemple,
un glossaire).
- Utilisé en dehors d'un élément
<article, le
contenu doit être liés au site
- Un blog, des groupes de navigation supplémentaires, et même la
publicité si ce contenu est lié à la page).
<body>
....
<article>
<header>
<h1>إنشاء</h1>
</header>
<p> ... ويكيبيديا مشروع متعدد اللغات يضم مشاريعَ بأكثر من 280 لغة ...</p>
<aside>
<!-- Contenu lié à cet article -->
<h1>المصطلحات</h1>
<dl>
<dt>ويكيبيديا</dt>
<dd>مدونة</dd>
</dl>
</aside>
</article>
<aside>
<!-- contenu lié à la page -->
<h2>مدونة</h2>
<ul>
<li><a href="#">أمينة</a></li>
<li><a href="#">علي</a></li>
<li><a href="#">كريم</a></li>
</ul>
</aside>
</body>
Nouvelles Fonctionnalités
HTML
- Canevas
- Formulaires
- Web Workers
- Mémoire locale
- Microformats
- "BD" indexée
- Web RTC
- ...
Canevas 2D
- La balise
<canevas> crée une zone (container)
pour dessiner des graphiques dans une page Web. graphiques tracés en
Javascript.
- Par exemple, la méthode getContext
() retourne un objet («2D»), qui peut être utilisé pour dessiner du
texte, des lignes, des boîtes, des cercles, et plus encore.
- exemple A, exemple
B... (le source HTML contient le code canevas)
- Autres
démos ...
Fomulaires
- Les formulaires HTML sont utilisés principalement pour saisir les
données utilisateurs.
- Balise
<form> ... </form>
- Intérêt des widgets utilisés pour faciliter les saisie
(date/heure, couleurs, email syntaxe, etc...)
- Exemple (essayer
avec Google Chrome)
Web Workers
- Un Web Worker est un programme Javascript qui s'exécute de
manière autonome en arrière plan.
- N'affecte donc pas l'interaction avec la page.
- Modèle
w = new Worker("mon_workers.js"); création d'une
objet WebWorker avec lancement de programme Javascript
téléchargé de façon asynchronew.terminate(); arrêt du programme- Le programme worker peut faire
postMessage(m) pour
envoyer un contenu m
à la page HTML (via la script de lancement).
- La règle (ou événement)
w.onmessage permet
d'écouter si le worker a envoyé un truc et de déclencher l'action
appropriée (i.e. définir un gestionnaire d'événement).
w.onmessage = function(e){ ... le champs e.data contient le
message m envoyé ... }
La fonction définit le handler de l'événement.
- Exemple: compteur, ...
Mémoire Locale
- Caractéristique qui permet de mémoriser des données dans le
navigateur.
- Stocker plus de données qu'avec le mécanisme des cookies.
- On peut stocker pour une session ou pour plus longtemps.
- Données de type Clé / Valeur, accès associatif.
Mémoire Cache
- Caractéristique qui permet de stocker localement une version hors
ligne d'une application web
- L'application est cachée, est accessible même sans connexion
internet.
- Avantage
- naviguer localement
- Accès rapide aux ressources cachées.
- Le navigateur téléchargera les mises à jours, le cas échéant.
- Remarque: (cf. "save page (complete HTML) as"
de Mozilla-Firefox, ou la cache normal du navigateur (durée de vie
limitée, les ressource de la page téléchargée...)
Base de données locale (IndexedDB)
- BD transactionnelle locale pour des collections d'objets JSON
- API navigateur avec de véritables fonctionnalités BD
- Non SQL, modèle plutôt clé : valeur
- Stocker dans des "ObjetctStore" des objets JSON
{ Num# : 123, nom : "Benali", prénom : 'Ali' }...
- Table ≈ ObjectStore, ligne ≈ objet structuré, Clé unique,
indexes, références
- API standardisée
- Exemple...
Web RTC
- Audio / Vidéo en temps réel dans le navigateur
- Trois APIs
- MediaStream − accès camera et microphone utilisateurs.
- RTCPeerConnection − Facilités pour appels audio ou video.
- RTCDataChannel − communication pair-à-pair.
- Market Worth US$81.52 Billion by 2025 (source Yahoo-finances,
avril 2017)
- Démo
Les microformats et microdata apportés par HTML5
- Permettent de donner une sémantique supplémentaire aux éléments
d'une page HTML
- Exemple simple:
<section itemscope itemtype="http://www.emi.ac.ma/">
Bonjour, Mon nom est
<span itemprop="nom">Benali Ali</span>,
I am a
<span itemprop="titre">Doctorant</span>
à l'Ecole
<span itemprop="affiliation">EMI</span>.
J'habite à:
<section itemprop="adresse" itemscope itemtype="http://monSite.ma/moi">
<span itemprop="rue">Avenue de France</span>,
<span itemprop="localité">Agdal</span>,
<span itemprop="ville">Rabat</span>.
</section>
</section>
- Existe APIs pour traiter les micro-données
- Moteurs de recherche, navigateurs peuvent extraire et traiter des
microdonnées à partir d'une page Web et les utiliser pour une
meilleure expérience utilisateurs.
- https://www.creativejuiz.fr/blog/
tutoriels/microdata-html5
Open Web Plateforme vs.
Native Apps.
- Mobile Web App. ou Mobile App.?
- HTML5: Write once, run everywhere...
- Application mobiles fermées. On ne sait pas ce qu'elles peuvent
faire (en sous-main).
- HTML open.
- Considérer domaine application:
- application à déployer pour atteindre public (site publique ou
entreprise, eCom, eGov etc...)
- ou à vendre dans iTune?
- Mobile app. intéressant pour vendre travail développeur dans
iTune ou autre. Travail de support et maintenance
- Considérer coût développement et maintenance
- Avec OWP et HTML, on a
- API pour accéder aux ressources des appareils
- JS devenu performant
- ... push notifications, offline support, etc.
- What else...
Web
vs. Native ...
The web has inherited many capabilities that were formerly the sole
preserve of native apps — for example accelerometer capabilities,
geolocation, drag and drop, and video and audio capture with WebRTC.
This, coupled with that fact that browsers have made significant
performance gains, means the technological gap between web and native
apps has never been narrower.
... Retrospectivement
- “HTML5 has improved to provide better and richer features, browsers
have gotten much better at implementing HTML5, and processing
JavaScript has become a lot faster”
- “HTML5 as a solution for the future of all application development”
- “It was clear at the time that JavaScript engines were becoming much
faster, and therefore it was allowing developers to do a lot more
dynamically than they were able to than before,” said Philippe Le
Hegaret,
- http://sdtimes.com/transforming-the-web-with-html5/
