HTML 5

driftsaultInternet and Web Development

Jun 25, 2012 (4 years and 11 months ago)

384 views

Présentation
SEM
par Johann Sievering
HTML 5
simple évolution ou révolution ?
30 avril 2012
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Contenu
 Introduction
 Démonstrations

 EVOLUTION
 Html 5
 historique
 nouveautés
 l'état de l'art et les contraintes des navigateurs

 REVOLUTION
 détails et exemples
 perspectives

 Question-réponse
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Introduction
Pourquoi HTML 5 ?

 Converger vers une approche services
 Se rendre indépendant de la technologie au niveau utilisateur
 Se rendre le plus possible indépendant du stockage
 Mettre à disposition des applications web
 RIA :
Rich Internet Application
 Assurer l'itinérance
 Disponibilité de l’application en tout temps

 Actuellement principalement : Ajax

 HTML 5
 Interface utilisateur
 Gestion des données (stockage local, socket)
 Multimédia, interactivité
 Hors ligne

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
DÉMONSTRATIONS
Voir avant de discuter
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
HTML 5
Offline / Storage
Realtime
Communication
File
Hardware
Access
Semantics &
Markup
Graphics
Multimedia
CSS3
Nuts & Bolts
Audio
vidéo
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Sites de démonstrations
 Vue d'ensemble
 http://html5demos.com/

 http://www.html5rocks.com/en/

 Présentation générale
 http://slides.html5rocks.com/#landing-slide

 Sites web
 http://www.makeuseof.com/tag/10-websites-html5/

 Applications

http://slodive.com/web-development/html5-canvas-demos-
and-applications/

 Canvas

http://net.tutsplus.com/articles/web-roundups/21-ridiculously-
impressive-html5-canvas-experiments/


http://www.queness.com/post/6886/9-incredible-html5-
canvas-and-javascript-experiments

 http://www.canvasdemos.com/



Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Sites de démonstrations
 Canvas simulation physique

http://www.html5canvastutorials.com/labs/html5-canvas-
physics-engine-with-curve-detection/

 Photo galerie avec envoi

http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-
jquery/demo.php

 JavaScript

http://www.1stwebdesigner.com/freebies/examples-html5-
javascript-uses/

 Jeux
 http://www.jeux-html5.net/

 http://html5games.com/

 http://www.jeux-en-html5.fr/


Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
HISTORIQUE
Les origines
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Evolution du web
 Interface interactif : http://evolutionofweb.appspot.com/


Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Historique
 1991 HTML
 1994 HTML 2
 1996 CSS 1 & JavaScript
 1997 HTML 4
 1998 CSS 2
 2000 XHTML 1
 2002 fin de la mise en page par des tableaux
 2003 Web 2
 Fin 2003 : WhatWG
 2005 Ajax (Asynchronous JavaScript Xml)
 JavaScript, CSS, XML, DOM, XMLHttpRequest
 2007 : W3C + émergence du Web 2
 2009 HTML 5
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Standardisation
 W3C
(world wide web consortium)
:
organisation de standardisation du web (fin 1994)
 Compatibilité des technologies du web
 Recommandation et bonnes pratiques;
 Evolution du langage;
 Standardisation du langage;
 WHATWG :
(Web Hypertext Application Technology Working Group)
 Développeurs
 Accélérer la mise en place des standards
 Accélérer la standardisation
 HTML 5
 W3C + WHATWG

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Standardisation
 Définition W3C
 http://dev.w3.org/html5/spec/Overview.html

 Définition WhatWD
 http://www.whatwg.org/specs/web-apps/current-work

 Comparaison entre HTML 4 et HTML 5
 http://www.w3.org/TR/html5-diff/


Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
HTML 5
Ce que c’est et ce que ce n’est pas
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
HTML 5
HTML 5 ?
 Ce n’est pas un nouveau langage
 Html5 n’est pas encore finalisé
 Tous les navigateurs n’implémentent pas encore
l’ensemble de la norme
 La sécurité n’est pas encore garantie

Mais
 On ne perd pas tous les acquis
 Code simplifié
 API enrichit
 Fonctions innovantes

Quand commencer ?
 Tout de suite
 MAIS en veillant au public et à l’application cible
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
CE QUI CHANGE AVEC HTML 5
• HTML
• JavaScript
• CSS
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les plus d’HTML 5

(1/2)
Structure de la page
 header, section, article, nav, aside, footer

Description des relations des uri
 rel: archives, sidebar, tag, licence, icon

Microdatas
 Permet de définir le vocabulaire des éléments
 Itemprop: name, nationality, band

Attributs ARIA
(Accessible Rich Internet Applications)
 Sémantique, défini le but de chaque élément de la page
 role : tree, treeitem, group
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les plus d’HTML 5
(2/2)
Champ formulaires
 range, autofocus, placeholder, menu
 Intègre les tests de validité, complétude et les pattern
(expression régulière)
 Type de champs, permet l’adaptation à l’équipement client

Balises média
 audio et video

Canvas
 2D et 3D
 Inline SVG
(Scalable Vector Graphics)

Interprétation audio
 Speech input
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les plus de JavaScript
(1/3)
Sélecteurs DOM
 Class DOM : getElementById, getElemetnsByClassName
 CSS : querySelector, querySelectorAll

Stockage web local: localStorage
 Application asynchrone
 Se préserver des crash
 Retrouver le contexte

SGBD Web avec requête SQL
 Application web

Base de données indexées
 Couple <clé, valeur>
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les plus de JavaScript
(2/3)
Accès au système de fichiers
 Production de fichiers dans les applications web
 Sécurité (sandbox)

Cache d’application
 Optimisation

Sockets web
 Communication full-duplex bas niveau
 Optimise la bande passante réseau (pas de header)
 Connexion en tout temps avec serveurs et clients

Workers (threads)
 Paralléliser les tâches
 Réduire les blocages et attentes

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les plus de JavaScript
(3/3)
Notifications
 Interactions asynchrones par écoute d’événements

Drag and drop natif et depuis le bureau
 Sur toutes les balises
 Amélioration de l’ergonomie

Géolocalisation

Utilisation des dispositifs locaux
 orientation

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les plus du CSS
(1/2)
Sélecteurs CSS:
 nth-child(even), nth-child(odd), :not, first-child

Polices web
 Importation des police à la demande
 @font-face

Text wrapping
 text-overflow: ellipsis

Gestion des encolonnages

Insertion de texte sur la page

Opacité
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les plus du CSS
(2/2)
Gestion des bordures

Fond dégradés

Ombres sur texte et sur box

Backgrounds améliorés
 Ajustement de la taille en fonction de la div, backgrounds
multiples

Transitions
 Avec effet ou directe

Transformation et rotations d'éléments

Animations
 Divers types d’animation
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
NOUVEAUTÉS
Ce qui a changé
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Nouveauté : code html
 Nouveaux éléments
 Harmoniser les médias
 Structurer la mise en page
 Donner un sens aux éléments (sémantique)
 Accessibilité au contenu
 Interopérabilité (limiter les formats propriétaires)
 Faciliter l’analyse des pages (robots)
 Améliorer l’accès à tous les utilisateurs (synthèse vocale)
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Nouveauté : formulaire
 Objets
 Validation
 Norme W3C
 http://www.w3.org/TR/html5/forms.html

 Tester les objets des formulaire
 http://www.scriptol.fr/html5/formulaire.php

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Nouveauté : formulaire
 Formulaire
 Interaction entre l'utilisateur et
l'interface
 Spécification Web Forms 2.0
 Remplace les fonctions de gestion
antérieurement réalisée avec
JavaScript
Exemples
http://24ways.org/2009/have-a-field-day-with-html5-forms

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Nouveauté : formulaire
 Les nouveautés
 contraintes des champs input
 validation de la conformité des entrées
 les champs peuvent être dissociés de la balise form
 attribut autofocus qui placera le focus dans le premier
champ de saisie dès l'ouverture de la page
 attribut placeholder permet d’afficher un texte par défaut en
grisé, il s’efface automatiquement lorsque le champ est
sélectionné
(attention pas égal à value qui pré-remplit le champ).
 Attribut novalidate par défaut les champs des formulaires
sont validés par le navigateur, cet attribut permet de
désactiver cette fonctionnalité

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Nouveauté : formulaire
 Les nouveaux champs de saisie (input)
 email
 Pour les périphérique tactile sans clavier tel qu’un iPhone ou un téléphone sous Androide le clavier virtuel s’adapte afin
de proposer l’arobase et le point.
 url
 Peu de navigateurs effectuent un changement visible au niveau de l’apparence, l’iPhone affiche un bouton avec les
extension les plus répandues et un caractères /. Au niveau de la validation Opera rajoute http:// et Firefox 4 vérifie la
présence de http://.
 number
 Le type number permet de sélectionner un nombre avec un spinner sans javascript. Il est possible de définir le minimum
et le maximum, une valeur par défaut et le pas. Sur un iPhone la clavier par défaut et celui numérique.
 range
 permet la sélection de valeur numérique mais cette fois sous forme de slider. Avec les mêmes paramètres que number.
 search
 Le type search permet de préciser que le texte entrer servira à effectuer une recherche. certain navigateur rajoute un
petite croix afin de vider le champ.
 tel
 permet de préciser qu’un numéro de téléphone vas être entré. Sur un iPhone le clavier est celui de la composition de
numéros. Aucune validation particulière n’est effectué.
 color
 permet de choisir une couleur afin d’obtenir sa valeur hexadécimal.
 Les sélections de date
 Permet de choisir une date ou une heure. Il existe 6 types afin de sélectionner une date

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Nouveauté : formulaire
 Nouvelles fonctions d'interactivité utiles aux
formulaires WEB 2
 attribut draggable s'intègre à tous éléments
(balises)
 attribut contenteditable indique que l'élément est
éditable par l'internaute
 interface UndoManager permet quant à elle de
proposer des possibilités d'annuler la dernière
opération effectuée
 attribut Progress permet d'afficher un indicateur
de progression du chargement
 mode déconnecté (offline) des applications Web
 fonctions pour stocker des données en local,

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
ETAT DE L’ART
Ce qui existe et est utilisable actuellement
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les navigateurs
 HTML 5 pas encore implémenté entièrement dans les
navigateurs
 Tous les navigateurs ne sont pas au même niveau
d’intégration d’HTML 5
 Il faut tester les navigateurs

 Avant de développer un site ou une application web, il est
nécessaire de faire une étude sur le public cible
 Cette étude permettra de définir les fonctionnalités
disponibles
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Compatibilité des navigateurs
http://html5demo.braincracking.org/

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Tester les navigateurs
 Objectifs
 Adéquation du navigateur avec le standard
 Mettre en avant ce qui fonctionne de ce qui ne
fonctionne pas encore
 Comparer les navigateurs
 Principes
 Analyser le navigateur sur tous les éléments du
standard visé
 Attribuer un score par critère
 Attribuer un score global

Ajouter des bonus (ce qui va au-delà de la norme)

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Tester les navigateurs
 Pour Html 5 les critères sont :

 Doctype
 Canvas
 Video
 Audio
 Géolocation
 Stockage
 Offline Web Applications
 Workers (threads)
 Section elements
 Grouping content elements
 Text-level semantic elements
 Formulaires
 Interaction utilisateur
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Test votre navigateur
 Tester les capacité des standards web
 http://acid3.acidtests.org/

 Tester les capacité HTML 5
 http://html5test.com/

 Tester les capacities CSS
 http://html5test.com/

 http://html5readiness.com/

 Faire un test d’ensemble
 http://caniuse.com/

 http://findmebyip.com/litmus/
s

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
DÉTAILS ET EXEMPLES
Plongeons dans les codes (simples)
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Les outils de développement
 Pour le développement
 Machine
 PC ou Mac
 Toutes plate-forme

 IDE
(EDI ou IDE Integrated Development Environment)
 Editeurs : netbeans, Eclipse, Mercury HTML5
Editor, Mercury HTML5 Editor, Maqetta,
notepad++

 Plusieurs navigateurs pour les tests
 chrome, FireFox, IE
 Avec les modules d’analyse de page (FireBug)

 Serveur
 XAMP local ou un hébergeur
 FTP (FileZilla)

Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Premier code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Page Ivan-Daniel</title>
<link rel="stylesheet" href="css/gi-
san.css"

type="text/css" />
</head>
<body>
<div><h1>Test Ivan-Daniel</h1></div>
</body>
</html>
Document html 5 rédigé en français,
ayant un CSS (gi-san.css) et comme titre « Page Ivan-Daniel »
Avec un titre h1 pour contenu.
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Une page très simple
<!DOCTYPE html>
<html lang="fr">
<html>
<head>
<title>DEMO</title>
<link rel="stylesheet"
href="style.css"
type="text/css"
media="screen">
</head>
<body>
<header>
</header>

<nav>
</nav>

<div id=“content">
</div>

<footer>
</footer>
</body>
</html>
Mise en forme
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Une page très simple
<body>
<header>
</header>

<nav>
</nav>

<div id=“content">
<article class="mon_article">
<h1>titre de mon article</h1>
<p>texte de mon article</p>
</article>
</div>

<footer>
</footer>
</body>
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Jeux de caractères
 Pour le français, allemand, espagnol, etc. utiliser :
 ISO-8859-1 ou Latin-1
 <meta charset="ISO-8859-1" />
 Pour utilisation de plusieurs jeux de caractères
(occidentaux, ou non occidentaux)
 UTF-8
(137’468 caractères)
 <meta charset="UTF-8 " />

<head>

<meta charset="utf-8" />
<title>Page Ivan-Daniel</title>
<link rel="stylesheet" href="css/gi-san.css" type="text/css" />
</head>
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Langue du document
 Langue choisie pour le document sera utilisée par les moteurs
de recherche
 Il est important de le signaler, sinon un traitement
supplémentaire de découverte de langue sera nécessaire pour
indexer la page
 Est utilisé également pour les applications des malvoyants
 Paramètre langue dans l’élément html


 Il est possible de spécifier une autre langue dans le contenu
<html lang="fr">
<span lang="en">Hello world</span>
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
PERSPECTIVES
Et après … ?
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
WEB 2
 L’utilisateur est acteur
 Simplicité
 Interactivité
 Contribution / participation
 Echange (web social)
 Le Web devient une («la») plate-forme
 Notions de services

 Web 2 un buzzword ?

 Web 3 … le web sémantique
 Les contenus interprétables et exploitables
par des agents logiciels
 Métadonnées, RDF, OWL, SPARQL
Frédéric Cozic
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
Architecture orientée agent
 Composant projectif
 Autonomie
 Perception de l’environnement
 Motivation interne
 Communicant
 Pouvant négocier
 Cognitif

 L’objet est un composant passif offrant des services qui doivent être
invoqué de manière explicite et externe
Vfinale-
2012/04/30

johann.sievering@edu.ge.ch
QUESTION - REPONSES
Pour détailler et éclaircir