HTML5 Introduction Fonctionnalités html, multimédia, javascript et css
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
HTML5
{ Introduction
Fonctionnalités
html, multimédia,
javascript et css
Ressources
Licence }
Fichiers des codes sources et exercices disponibles sur demande !
LCProd.net
1 Grandadam EmmanuelINTRODUCTION
Comprendre l’évolution,
Utiliser html5 aujourd’hui,
Détecter le support navigateur,
En résumé,
Les logos,
Pour bien commencer,
Dictionnaire
LCProd.net
2 Grandadam EmmanuelEvolution
๏ Balisage du W3C et normalisation WHATWG
(WHATWG : Groupe formé au sein du W3C pour protester contre la direction et proposer le développement d’outils pour de l’application
Web)
๏ HTML4
๏ XHTML (1 et 2)
๏ CSS (1, 2 et 3)
๏ JS
๏ HTML5 = HTML + CSS + JS
http://validator.w3.org/
http://www.whatwg.org/
http://dev.w3.org/html5/spec/Overview.html
LCProd.net
3 Grandadam Emmanuelhtml5 aujourd’hui
๏ Moteur de rendu
๏ Webkit (Chrome, Safari, Android, Palm webOS...),
๏ Gecko (Mozilla Firefox, SeaMonkey...)
๏ Trident (Internet Explorer)
๏ Navigateur ancien
๏ html5shiv
๏ Google Frame
Ajouter les fonctionnalités HTML5 pour IE6, 7 et 8
http://code.google.com/intl/fr/chrome/chromeframe/
๏ Outils
Test/Score HTML du navigateur, comparaisons.
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
http://html5test.com/
LCProd.net
4 Grandadam Emmanuelhtml5 aujourd’hui
๏ Que devient Adobe Flash ?
๏ Le projet Wallaby (2011)
๏ Convertir des séquences Adobe Flash en HTML5
Projet en cours
Fonctionne pour de petits projets
LCProd.net
5 Grandadam EmmanuelDétecter le support
๏ Détecter le support navigateur
๏ On ne peut donc pas détecter «le support de l'HTML5»
๏ On détecte le support pour chaque caractéristiques !
๏ Document Object Model (DOM) :
๏ La collection d'objets qui représentent les éléments HTML de la page
A la restitution d’une page, le navigateur construit le DOM.
Le DOM indique quelles caractéristiques sont supportées.
๏ Outils
๏ Modernizr
Librairie JavaScript open source, qui détecte les caractéristiques HTML5 & CSS3.
http://www.modernizr.com/
LCProd.net
6 Grandadam EmmanuelEn résumé
๏ HTML5 c’est : (en résumé)
๏ Une API de dessin
Canvas : élément HTML, piloté par du Javascript pour créer des pixels.
Se comporte comme une image et gère les évènements.
๏ La gestion de Médias
Intégration de CODEC audio et vidéo.
๏ Une couche Applicative
La page fait appel à des fonctions intégrées au navigateur.
Ex : Géolocalisation, mode offline...
๏ Une sémantique plus riche
Découpage en zone, description précise des éléments
Indexation plus précise par les moteurs de recherches
LCProd.net
7 Grandadam EmmanuelLes logos
๏ Les différents logos
Connectivité et temps réel Multimédias
CSS3 Javascript
API navigateur Sémantique
WebGL, SVG et Canvas Stockage local et
Bases de données
LCProd.net
8 Grandadam EmmanuelPour bien commencer
๏ Document Type Déclaration : doctype
๏ HTML 4.01
๏ XHTML 1.0
๏ HTML5
LCProd.net
9 Grandadam EmmanuelPour bien commencer
๏ En-tête : Content-Type
๏ HTML 4.01
๏ HTML 5
LCProd.net
10 Grandadam EmmanuelPour bien commencer
๏ En-tête : script
๏ HTML 4.01
๏ HTML 5
LCProd.net
11 Grandadam EmmanuelPour bien commencer
๏ En-tête : link
๏ HTML 4.01
๏ HTML 5
LCProd.net
12 Grandadam EmmanuelPour bien commencer
๏ HTML5
LCProd.net
13 Grandadam EmmanuelDictionnaire
๏ Ressources en ligne
๏ Dictionnaire des balises HTML5
http://www.w3schools.com/html5/
๏ Spécifications HTML5
http://www.whatwg.org/specs/web-apps/current-work/multipage/
LCProd.net
14 Grandadam EmmanuelFONCTIONNALITÉS
HTML
Balisage sémantique
Balises pour applications
Formulaires
Mobiles
Microformats
LCProd.net
15 Grandadam EmmanuelBalisage sémantique
๏ Nouveaux éléments
๏ section
๏ nav
๏ article
๏ aside
๏ hgroup
๏ header
๏ footer
๏ time
๏ mark
LCProd.net
16 Grandadam EmmanuelBalisage sémantique
๏ section ๏ time
Elément générique : regroupement Présente une date (avec
thématique de contenu. éventuellement un décalage de
fuseau horaire).
๏ nav
Zone de navigation. ๏ mark
Mise en avant d’un passage de
๏ article texte en vue d’une référence.
Contenu indépendant, distribuable
ou réutilisable. ๏ details
Des éléments qui ne sont pas
๏ aside visibles par défaut.
Contenu lié à la page (article).
๏ figure/figcaption
๏ hgroup Adjoint à un texte une
Entête de section qui regroupe illustration annotée.
plusieurs niveaux de titres (hx).
๏ meter
๏ header Affiche l’état d’une jauge.
Zone d’aide à la navigation ou
introduction.
๏ footer
Pied de l’élément le plus proche.
LCProd.net
17 Grandadam EmmanuelBalisage sémantique
๏ En résumé
15
avril 2011
Message
Mon Blog Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec hendrerit felis
accumsan turpis pretium tempor. Duis eu
turpis nunc, ut euismod nisl.
TitreDescription.
© 2011 LCProd.net
accueil
blog
a propos
Exercice 1.1 / Fichier 1.1.html
LCProd.net
18 Grandadam EmmanuelBalises pour applications
๏ Indicateurs :
๏ meter
Un indicateur de progression
๏ progress
Sans valeur
Avec valeur et maximum
๏ Liens :
๏ Liens sur des ensembles :
A propos
Information sur notre entreprise.
Exercice 1.2 / Fichier 1.2.html
LCProd.net
19 Grandadam EmmanuelFormulaires
๏ Nouvelle fonctionnalités
๏ placeholder
Affiche un texte par défaut qui s'efface lors du focus.
๏ required
Champ en rouge ou signalé car obligatoire, affichage lors de
l’envoi du formulaire.
๏ autofocus
Sélectionne le champ automatiquement.
Exercice 1.3 / Fichier 1.3.html
LCProd.net
20 Grandadam EmmanuelFormulaires
๏ Nouveaux types
๏ email
Contrôle la normalisation d’un email.
๏ date
Permet la gestion de dates.
๏ range
Barre de réglage avec ou sans pas.
๏ search
Affiche une zone spécifique avec liste et annulation.
๏ color
Ouvre un système de gestion de couleurs.
๏ number
Contrôle la valeur du champ.
permet de ne pas contrôler le champ !
Exercice 1.3 / Fichier 1.3.html
LCProd.net
21 Grandadam EmmanuelFormulaires
๏ Affichage spécifiques pour mobiles
LCProd.net
22 Grandadam EmmanuelMicroformats
๏ Contenu accessible et utilisable par les agents logiciels
๏ Système de méta-données formelles du W3C
Base de données distribuée
Mon nom est Alice.
Mon adresse email pro est pro@gmail.com.
Mon adresse email perso est mail@gmail.com.
Mon blog est http://blog.com.
mail@gmail.com
foaf:mbox
pro@gmail.com
Carte foaf:mbox
de
visite foaf:name Alice
foaf:blog
http://blog.com
LCProd.net
23 Grandadam EmmanuelFONCTIONNALITÉS
JAVASCRIPT
Syntaxe
Stockage local Web Workers
Bases de données locales Glisser / Déposer 1/2/3
Cache du navigateur Géolocalisation
Services Web (WebSocket) Notifications
LCProd.net
24 Grandadam EmmanuelSyntaxe
๏ Code javascript dans la page HTML5
๏ Script dans la page pour IE !
Attribut ‘defer’ permet l’exécution du script de manière différée (deferred),
Après le chargement complet de la page,
Quand le DOM est chargé.
...
๏ Script externe
Appel en en-tête de page :
Attendre le chargement du DOM pour exécuter le script:
Avec JQuery : $(function(){ ... })
Sans JQuery : document.addEventListener("DOMContentLoaded", function(){ ... })
LCProd.net
25 Grandadam EmmanuelStockage local
๏ Enregistrement local (navigateur)
๏ Clé nommée
Les données sont stockées pour un domaine précis et peuvent récupérées dans n'importe
quelle page du domaine en question.
window.localStorage.setItem('valeur', ‘données’);
window.localStorage.getItem('valeur');
window.localStorage.removeItem(‘valeur’);
Exercice 2.1 / Fichier 2.1.html
LCProd.net
26 Grandadam EmmanuelBases de données locales
๏ Ouvrir/Créer une base
๏ L’action d’ouvrir permet de créer la base.
window.openDatabase('Nom', 'Version', 'Description', Taille : 2*1024*1024);
๏ Requête SQL
๏ Utilisation des transactions.
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE test (id REAL UNIQUE, text TEXT)');
});
๏ Parcourir un jeu d’enregistrement
๏ La fonction contient les données du jeu (results)
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM test', [], function (tx, results) {
alert(results.rows.item(0).id);
}
});
Exercice 2.2 / Fichier 2.2.html
LCProd.net
27 Grandadam EmmanuelCache du navigateur
๏ Fichier .manifest
๏ Ajouter une directive à Apache (ou .htaccess)
AddType text/cache-manifest .manifest
๏ Créer le fichier .manifest
CACHE MANIFEST
# version 1.0.0
CACHE:
css/styles.css
jquery-1.5.1.min.js
NETWORK:
*
๏ Modifier la balise html
Exercice 2.3 / Fichier 2.3.html
LCProd.net
28 Grandadam EmmanuelCache du navigateur
๏ Options du fichier .manifest
๏ CACHE
Liste les fichiers à mettre en cache.
๏ NETWORK
Liste les fichiers qui demandent obligatoirement une connexion active.
๏ FALLBACK
Liste les fichiers qui sont renvoyés si la connexion n’est pas active.
Exercice 2.3 / Fichier 2.3.html
LCProd.net
29 Grandadam EmmanuelCache du navigateur
๏ Manipuler le cache en Javascript
๏ status
Connaître le statut du cache.
window.applicationCache.status
๏ updateready
Vérifier les données du fichier .manifest.
window.applicationCache.UPDATEREADY
๏ update()
Relire le fichier .manifest.
window.applicationCache.update();
๏ swapCache();
Charge la nouvelle version
window.applicationCache.swapCache();
Exercice 2.3 / Fichier 2.3.html
LCProd.net
30 Grandadam EmmanuelServices Web
๏ Contacter un Service Web (WebSocket)
๏ Objet WebSocket
new WebSocket('ws://serveur:ip');
๏ Evénements
onopen, à l’ouverture.
onmessage, à la réception d’un message.
onclose, à la fermeture.
onerror, lors d’une erreur.
๏ Méthodes
send(), envoie de données.
close(), fermeture de la connexion.
Exercice 2.4 / Fichier 2.4.html
LCProd.net
31 Grandadam EmmanuelWeb Workers
๏ Exécuter du code javascript en arrière plan
๏ Tâche indépendante du navigateur
๏ Code exécuter dans un processus différent
Idéalement sur un second CPU (multi-tâche)
HTML5 :
var worker = new Worker("fibonacci.js");
worker.onmessage = function(message){...}
worker.postMessage(number);
fibonacci.js
function fibo(number) {...}
onmessage = function(message) {
var result = fibo(message.data);
postMessage(result);
}
LCProd.net
32 Grandadam EmmanuelGlisser/Déposer 1
๏ Dans la page
๏ Attribut HTML
draggable="true"
๏ Les évènements javascript
Intercepte les évènement d’un objet.
dragstart - Début du déplacement.
drag - Exécuté à intervalles réguliers (350ms).
dragenter - Arrive dans un autre élément.
dragleave - Sors d'un autre élément.
dragover - Survol d'un élément. (stopper la propagation).
drop - L’objet tombe dans un autre élément.
dragend - Fin du déplacement.
Exercice 2.5 / Fichier 2.5.html
LCProd.net
33 Grandadam EmmanuelGlisser/Déposer 1
๏ L’objet ‘dataTransfer’
Permet le transfert d’informations d’un élément à un autre (Presse Papier)
๏ Le paramètre ‘effectAllowed’
all - L'élément peut être copié, déplacé et lié.
copy - L'élément peut être copié.
copyLink - L'élément peut être copié et lié.
copyMove - L'élément peut être copié et déplacé.
link - L'élément peut être lié.
linkMove - L'élément peut être déplacé et lié.
move - L'élément peut être déplacé.
none - L'élément ne peut pas être déplacé.
uninitialized - Valeur par défaut. Le comportement est "move" pour les éléments
éditables, "link" pour les ancres et "copy" pour les autres.
Exercice 2.5 / Fichier 2.5.html
LCProd.net
34 Grandadam EmmanuelGlisser/Déposer 1
๏ Les méthodes ‘setData’ et ‘getDate’
Valeur personnalisée pour le transfert.
event.dataTransfer.setData('Text', 'Texte personnalisé')
Valeurs récupérable sur les éléments :
text/uri-list
text/plain
url
Exercice 2.5 / Fichier 2.5.html
LCProd.net
35 Grandadam EmmanuelGlisser/Déposer 2
๏ De plusieurs fichiers sur la page (Drag-In)
๏ Gestion de la réception du fichier
function onDrop(event) {
files = event.dataTransfer.files
for(var i=0;iGlisser/Déposer 3
๏ Téléchargement par glisser/déposer (Drag-Out)
๏ Fonctionne uniquement avec Chrome
Paramètre du lien a :
draggable="true"
data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE"
Sur chaque lien :
event.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
Exercice 2.7 / Fichier 2.7.html
LCProd.net
37 Grandadam EmmanuelGéolocalisation
๏ Géolocalisation du navigateur
๏ Appel de la méthode du navigateur
navigator.geolocation.getCurrentPosition(fonction_de_traitement);
๏ Récupération des données
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var alt = position.coords.altitude;
Exercice 2.9 / Fichier 2.9.html
LCProd.net
38 Grandadam EmmanuelNotifications
๏ Afficher des notifications sur le bureau
๏ Autoriser le site à utiliser les fonctions de notifications
window.webkitNotifications.requestPermission();
๏ Deux type de notifications
Texte
window.webkitNotifications.createNotification('image', 'titre', 'contenu');
Html
window.webkitNotifications.createHTMLNotification('url');
๏ Évènements
ondisplay : à l’ouverture.
onclose : à la fermeture.
๏ Méthode
show(); Affiche la notification.
Exercice 2.10 / Fichier 2.10.html
LCProd.net
39 Grandadam EmmanuelFONCTIONNALITÉS
MULTIMÉDIA
Audio/Vidéo
Canvas 2D
Canvas 3D (WebGL)
SVG
LCProd.net
40 Grandadam EmmanuelAudio/Vidéo
๏ Balises audio et video HTML5
๏ Attributs html ๏ Formats audio
src Ogg
autoplay
controls
MP3
loop Wav
preload
width/height (video uniquement)
poster (video uniquement) - url de
๏ Formats vidéo
l’image
Ogg
๏ Méthodes js Mpeg 4
play(); WebM
pause();
๏ Propriétés js
muted true|false
Exercice 3.1 / Fichier 3.1.html
LCProd.net
41 Grandadam EmmanuelCanvas 2D
๏ Rendus dynamiques d'images via javascript
๏ Zone de dessin : canvas
๏ Accès aux fonctions de dessins : getContext
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
๏ Outils
Rectangles,
Tracés (chemins),
Couleur, styles et ombres,
Textes,
Transformation,
Images,
Modes de compositions,
Manipulation des pixels.
Exercice 3.2 / Fichier 3.2.html / https://github.com/lcprod/canvas_demo
LCProd.net
42 Grandadam EmmanuelCanvas 3D (WebGL)
๏ Utiliser le pilote OpenGL dans un navigateur
LCProd.net
43 Grandadam EmmanuelSVG
๏ SVG : Scalable Vector Graphics
๏ Graphiques vectoriels adaptables
๏ Injecter dans le HTML
๏ Par le biais de javascript
๏ createElementNS
Permet d’ajouter un objet au SVG
๏ appendChild
Ajoute l’objet au rendu SVG
Exercice 3.3 / Fichier 3.3.html
LCProd.net
44 Grandadam EmmanuelFONCTIONNALITÉS
CSS
Sélecteurs, Transitions,
Polices Web, Transformations,
Transparences, Animations
Modes de couleurs,
Arrondis,
Dégradés,
Ombres,
LCProd.net
45 Grandadam EmmanuelSélecteurs
๏ Sélecteurs CSS3
๏ Nième
.row:nth-child(num|even|odd){}
๏ Attributs spécifiques
input[type="text"] {}
๏ Négation
:not(.box) {}
๏ Plus spécifiques
h2:first-child {}
div.text > div {}
๏ Plus d’infos ?
http://www.w3.org/TR/css3-selectors/#selectors
Exercice 4.1 / Fichier 4.1.html
LCProd.net
46 Grandadam EmmanuelPolices Web
๏ Apporter des polices dans la page HTML
๏ Incorporées depuis le serveur
@font-face {
font-family: 'Coda Caption';
src: url('Coda-Caption-Heavy.woff') format('woff');
}
๏ Types supportés
EOT - Embedded OpenType
TTF - TrueType
OTF - OpenType
SVG - Scalable Vector Graphics
WOFF - Web Open Font Format
๏ Utilisation de librairies externes (http://www.google.com/webfonts)
http://www.google.com/webfontsTransparences
๏ Composition des couleurs en rgba
๏ Rouge
๏ Vert
๏ Bleu
๏ Transparence (aplha)
rgba(255, 0, 0, 0.22)
Exercice 4.1 / Fichier 4.1.html
LCProd.net
48 Grandadam EmmanuelModes de couleus
๏ Composition des couleurs :
๏ Couleurs nommées
color:purple;
๏ Couleur HTML
color:#fff;
๏ Composition rgba
color:rgba(127,127,127,.5);
๏ Composition hsla
Teinte Saturation Valeur
color:hsla(128,75%,33%,1);
http://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur
LCProd.net
49 Grandadam EmmanuelArrondis
๏ Prise en charge de border-radius
๏ CSS3
border-radius: 140px;
๏ Pour les autres navigateurs :
Webkit
-webkit-border-radius: 20px;
Gecko
-moz-border-radius: 20px;
Exercice 4.2 / Fichier 4.2.html
LCProd.net
50 Grandadam EmmanuelDégradés
๏ Pas de prise en charge native...
๏ Propriété CSS
Webkit
-webkit-gradient();
Gecko
-moz-linear-gradient();
-moz-radial-gradient();
Opéra
-o-linear-gradient();
-o-radial-gradient();
๏ Types
linear
radial
Exercice 4.2 / Fichier 4.2.html
LCProd.net
51 Grandadam EmmanuelOmbres
๏ Accessibles sur les textes et boîtes
๏ text-shadow
text-shadow:decalX, decalY, force, couleur;
๏ box-shadow
box-shadow:decalX, decalY, force, couleur;
Exercice 4.2 / Fichier 4.2.html
LCProd.net
52 Grandadam EmmanuelTransitions
๏ Effets de transitions de propriétés CSS
๏ transition-property :
la propriété qui sera modifiée par la transition
All ou ls propriétés CSS
๏ transition-timing-function :
la fonction de transition utilisée
ease, linear, ease-in, ease-out, ease-in-out
๏ transition-duration :
la durée de la transition
secondes
๏ transition-delay :
le temps avant que la transition ne se déclenche
secondes
Exercice 4.3 / Fichier 4.3.html
LCProd.net
53 Grandadam EmmanuelTranformations
๏ transform2d ๏ transform3d
Attention ! pas sur Chrome
๏ webkit-transform: ๏ webkit-transform
scale3d
rotateY
translate3d
scaleX
perspective
skew
matrix3d
translate
๏ Centre de la déformation : ๏ Centre de la déformation :
webkit-perspective-origin.
transform-origin : x y.
Exercice 4.3 / Fichier 4.3.html
LCProd.net
54 Grandadam EmmanuelAnimations
๏ Enchaînement d’effets
๏ Un évènement CSS fait appel à une animation
a:hover{
-webkit-animation: pulse 0.7s ease;
}
๏ Déclaration de l’animation
Gestion d’une ‘timeline’ pour les étapes (10%, 20%...)
@-webkit-keyframes pulse {
from {...}
0% {...}
10{...}
to {...}
}
Exercice 4.4 / Fichier 4.4.html
LCProd.net
55 Grandadam EmmanuelRESSOURCES
http://diveintohtml5.org/
http://www.html5rocks.com/
http://html5demos.com/
http://dev.w3.org/html5
http://www.alsacreations.com
http://www.pompage.net
http://www.apple.com/html5/
...
LCProd.net
56 Grandadam EmmanuelLICENCE
Vous êtes libres : de reproduire, distribuer et communiquer
cette création au public
Selon les conditions suivantes :
Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de
l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière
qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).
Pas d'Utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette création à des fins
commerciales.
Pas de Modification. Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette
création.
http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr
LCProd.net
57 Grandadam EmmanuelVous pouvez aussi lire
