Embed Size (px)
Citation preview
LCProd.netGrandadam Emmanuel
{ }HTML5
Introduction
Fonctionnalitéshtml, multimédia,
javascript et cssRessourcesLicence
1
Fichiers des codes sources et exercices disponibles sur demande !
LCProd.netGrandadam Emmanuel
INTRODUCTION
Comprendre l’évolution,Utiliser html5 aujourd’hui,Détecter le support navigateur, En résumé,Les logos,Pour bien commencer,Dictionnaire
2
LCProd.netGrandadam Emmanuel
Evolution๏ 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
3
LCProd.netGrandadam Emmanuel
html5 aujourd’hui๏ Moteur de rendu
๏ Webkit (Chrome, Safari, Android, Palm webOS...),๏ Gecko (Mozilla Firefox, SeaMonkey...)๏ Trident (Internet Explorer)
๏ Navigateur ancien๏ html5shiv
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
๏ Google FrameAjouter les fonctionnalités HTML5 pour IE6, 7 et 8http://code.google.com/intl/fr/chrome/chromeframe/
๏ OutilsTest/Score HTML du navigateur, comparaisons.http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29http://html5test.com/
4
LCProd.netGrandadam Emmanuel
html5 aujourd’hui๏ Que devient Adobe Flash ?
๏ Le projet Wallaby (2011)
๏ Convertir des séquences Adobe Flash en HTML5Projet en coursFonctionne pour de petits projets
5
LCProd.netGrandadam Emmanuel
Dé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/
6
LCProd.netGrandadam Emmanuel
En résumé๏ HTML5 c’est : (en résumé)
๏ Une API de dessinCanvas : é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édiasIntégration de CODEC audio et vidéo.
๏ Une couche ApplicativeLa page fait appel à des fonctions intégrées au navigateur.Ex : Géolocalisation, mode offline...
๏ Une sémantique plus richeDécoupage en zone, description précise des élémentsIndexation plus précise par les moteurs de recherches
7
LCProd.netGrandadam Emmanuel
Les logos๏ Les différents logos
Connectivité et temps réel
CSS3
API navigateur
WebGL, SVG et Canvas
Multimédias
Javascript
Sémantique
Stockage local et Bases de données
8
LCProd.netGrandadam Emmanuel
Pour bien commencer๏ Document Type Déclaration : doctype
๏ HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
๏ XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
๏ HTML5<!DOCTYPE html>
9
LCProd.netGrandadam Emmanuel
Pour bien commencer๏ En-tête : Content-Type
๏ HTML 4.01<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
๏ HTML 5<meta charset="UTF-8">
10
LCProd.netGrandadam Emmanuel
Pour bien commencer๏ En-tête : script
๏ HTML 4.01<script type="text/javascript" src="file.js"></script>
๏ HTML 5<script src="file.js"></script>
11
LCProd.netGrandadam Emmanuel
Pour bien commencer๏ En-tête : link
๏ HTML 4.01<link rel="stylesheet" type="text/css" href="file.css">
๏ HTML 5<link rel="stylesheet" href="file.css">
12
LCProd.netGrandadam Emmanuel
Pour bien commencer๏ HTML5
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"></head><body>
</body></html>
13
LCProd.netGrandadam Emmanuel
Dictionnaire๏ Ressources en ligne
๏ Dictionnaire des balises HTML5http://www.w3schools.com/html5/
๏ Spécifications HTML5http://www.whatwg.org/specs/web-apps/current-work/multipage/
14
LCProd.netGrandadam Emmanuel
FONCTIONNALITÉSHTML
Balisage sémantiqueBalises pour applicationsFormulairesMobilesMicroformats
15
LCProd.netGrandadam Emmanuel
Balisage sémantique๏ Nouveaux éléments
๏ section๏ nav๏ article๏ aside๏ hgroup๏ header๏ footer๏ time๏ mark
16
<header>
<nav> <aside>
<footer>
<section>
<header>
<article>
<footer>
LCProd.netGrandadam Emmanuel
Balisage sémantique๏ section
Elément générique : regroupement thématique de contenu.
๏ navZone de navigation.
๏ article Contenu indépendant, distribuable ou réutilisable.
๏ asideContenu lié à la page (article).
๏ hgroupEntête de section qui regroupe plusieurs niveaux de titres (hx).
๏ headerZone d’aide à la navigation ou introduction.
๏ footerPied de l’élément le plus proche.
๏ timePrésente une date (avec éventuellement un décalage de fuseau horaire).
๏ markMise en avant d’un passage de texte en vue d’une référence.
๏ detailsDes éléments qui ne sont pas visibles par défaut.
๏ figure/figcaptionAdjoint à un texte une illustration annotée.
๏ meterAffiche l’état d’une jauge.
17
LCProd.netGrandadam Emmanuel
Balisage sémantique๏ En résumé
<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>Mon Blog</title> </head> <body> <header> <hgroup> <h1>Titre</h1><h2>Description.</h2> </hgroup> <nav> <ul> <li><a href="#">accueil</a></li> <li><a href="#">blog</a></li> <li><a href="#">a propos</a></li> </ul> </nav> </header> <article>
<header> <time datetime="2011-04-15" pubdate>15 avril 2011</time> <h1><a href="#" rel="bookmark" title="lien">Message</a></h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl.</p> </article> <footer> <p>© 2011 <a href="#">LCProd.net</a></p> </footer> </body> </html>
18
Exercice 1.1 / Fichier 1.1.html
LCProd.netGrandadam Emmanuel
Balises pour applications๏ Indicateurs :
๏ meterUn indicateur de progression
๏ progressSans valeurAvec valeur et maximum
๏ Liens :๏ Liens sur des ensembles :
<a href="/about.html"> <h2>A propos</h2> <p>Information sur notre entreprise.</p></a>
19
Exercice 1.2 / Fichier 1.2.html
LCProd.netGrandadam Emmanuel
Formulaires๏ Nouvelle fonctionnalités
๏ placeholderAffiche un texte par défaut qui s'efface lors du focus.
๏ requiredChamp en rouge ou signalé car obligatoire, affichage lors de l’envoi du formulaire.
๏ autofocusSélectionne le champ automatiquement.
20
Exercice 1.3 / Fichier 1.3.html
LCProd.netGrandadam Emmanuel
Formulaires๏ Nouveaux types
๏ emailContrôle la normalisation d’un email.
๏ datePermet la gestion de dates.
๏ rangeBarre de réglage avec ou sans pas.
๏ searchAffiche une zone spécifique avec liste et annulation.
๏ colorOuvre un système de gestion de couleurs.
๏ numberContrôle la valeur du champ.
<form novalidate> permet de ne pas contrôler le champ !
21
Exercice 1.3 / Fichier 1.3.html
LCProd.netGrandadam Emmanuel
Formulaires๏ Affichage spécifiques pour mobiles
22
LCProd.netGrandadam Emmanuel
Microformats๏ Contenu accessible et utilisable par les agents logiciels
๏ Système de méta-données formelles du W3CBase de données distribuée
Mon nom est <span itemprop="name">Alice</span>.Mon adresse email pro est <span itemprop="mbox">[email protected]</span>.Mon adresse email perso est <span itemprop="mbox">[email protected]</span>.Mon blog est <span itemprop="blog">http://blog.com</span>.
23
Cartedevisite
Alice
http://blog.com
foaf:mbox
foaf:mbox
foaf:name
foaf:blog
LCProd.netGrandadam Emmanuel
FONCTIONNALITÉSJAVASCRIPT
Syntaxe
Stockage localBases de données localesCache du navigateurServices Web (WebSocket)
Web WorkersGlisser / Déposer 1/2/3GéolocalisationNotifications
24
LCProd.netGrandadam Emmanuel
Syntaxe๏ 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 defer>...</script>
๏ Script externeAppel en en-tête de page :<script src="script.js"></script>
Attendre le chargement du DOM pour exécuter le script:Avec JQuery : $(function(){ ... })Sans JQuery : document.addEventListener("DOMContentLoaded", function(){ ... })
25
LCProd.netGrandadam Emmanuel
Stockage 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’);
26
Exercice 2.1 / Fichier 2.1.html
LCProd.netGrandadam Emmanuel
Bases 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); }});
27
Exercice 2.2 / Fichier 2.2.html
LCProd.netGrandadam Emmanuel
Cache du navigateur๏ Fichier .manifest
๏ Ajouter une directive à Apache (ou .htaccess)AddType text/cache-manifest .manifest
๏ Créer le fichier .manifestCACHE MANIFEST# version 1.0.0
CACHE:css/styles.cssjquery-1.5.1.min.js
NETWORK:*
๏ Modifier la balise html<html manifest="cache.manifest">
28
Exercice 2.3 / Fichier 2.3.html
LCProd.netGrandadam Emmanuel
Cache du navigateur๏ Options du fichier .manifest
๏ CACHEListe les fichiers à mettre en cache.
๏ NETWORKListe les fichiers qui demandent obligatoirement une connexion active.
๏ FALLBACKListe les fichiers qui sont renvoyés si la connexion n’est pas active.
29
Exercice 2.3 / Fichier 2.3.html
LCProd.netGrandadam Emmanuel
Cache du navigateur๏ Manipuler le cache en Javascript
๏ statusConnaître le statut du cache.window.applicationCache.status
๏ updatereadyVérifier les données du fichier .manifest.window.applicationCache.UPDATEREADY
๏ update()Relire le fichier .manifest.window.applicationCache.update();
๏ swapCache();Charge la nouvelle versionwindow.applicationCache.swapCache();
30
Exercice 2.3 / Fichier 2.3.html
LCProd.netGrandadam Emmanuel
Services Web๏ Contacter un Service Web (WebSocket)
๏ Objet WebSocketnew WebSocket('ws://serveur:ip');
๏ Evénementsonopen, à l’ouverture.onmessage, à la réception d’un message.onclose, à la fermeture.onerror, lors d’une erreur.
๏ Méthodessend(), envoie de données.close(), fermeture de la connexion.
31
Exercice 2.4 / Fichier 2.4.html
LCProd.netGrandadam Emmanuel
Web 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.jsfunction fibo(number) {...}
onmessage = function(message) { var result = fibo(message.data); postMessage(result);}
32
LCProd.netGrandadam Emmanuel
Glisser/Déposer 1๏ Dans la page
๏ Attribut HTMLdraggable="true"
๏ Les évènements javascriptIntercepte 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.
33
Exercice 2.5 / Fichier 2.5.html
LCProd.netGrandadam Emmanuel
Glisser/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.
34
Exercice 2.5 / Fichier 2.5.html
LCProd.netGrandadam Emmanuel
Glisser/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-listtext/plainurl
35
Exercice 2.5 / Fichier 2.5.html
LCProd.netGrandadam Emmanuel
Glisser/Déposer 2๏ De plusieurs fichiers sur la page (Drag-In)
๏ Gestion de la réception du fichierfunction onDrop(event) { files = event.dataTransfer.files for(var i=0;i<files.length;i++){ uploadFile(files[i]); }}
๏ Fonction d’affichagefunction uploadFile(file){ var reader = new FileReader(); reader.onload = function (event) { var img = new Image(); img.src = event.target.result; document.getElementById("rep").appendChild(img); } reader.readAsDataURL(file);}
36
Exercice 2.6 / Fichier 2.6.html
LCProd.netGrandadam Emmanuel
Glisser/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);
37
Exercice 2.7 / Fichier 2.7.html
LCProd.netGrandadam Emmanuel
Gé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;
38
Exercice 2.9 / Fichier 2.9.html
LCProd.netGrandadam Emmanuel
Notifications๏ Afficher des notifications sur le bureau
๏ Autoriser le site à utiliser les fonctions de notificationswindow.webkitNotifications.requestPermission();
๏ Deux type de notificationsTextewindow.webkitNotifications.createNotification('image', 'titre', 'contenu');
Htmlwindow.webkitNotifications.createHTMLNotification('url');
๏ Évènementsondisplay : à l’ouverture.onclose : à la fermeture.
๏ Méthodeshow(); Affiche la notification.
39
Exercice 2.10 / Fichier 2.10.html
LCProd.netGrandadam Emmanuel
FONCTIONNALITÉSMULTIMÉDIA
Audio/VidéoCanvas 2DCanvas 3D (WebGL)SVG
40
LCProd.netGrandadam Emmanuel
Audio/Vidéo๏ Balises audio et video HTML5
๏ Attributs htmlsrcautoplaycontrolslooppreloadwidth/height (video uniquement)poster (video uniquement) - url de l’image
๏ Méthodes jsplay();pause();
๏ Propriétés jsmuted true|false
๏ Formats audioOggMP3Wav
๏ Formats vidéo
OggMpeg 4WebM
41
Exercice 3.1 / Fichier 3.1.html
LCProd.netGrandadam Emmanuel
Canvas 2D๏ Rendus dynamiques d'images via javascript
๏ Zone de dessin : canvas<canvas id="canvas" width="200" height="200"></canvas>
๏ Accès aux fonctions de dessins : getContextvar canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');
๏ OutilsRectangles,Tracés (chemins),Couleur, styles et ombres,Textes,Transformation,Images,Modes de compositions,Manipulation des pixels.
42
Exercice 3.2 / Fichier 3.2.html / https://github.com/lcprod/canvas_demo
LCProd.netGrandadam Emmanuel
Canvas 3D (WebGL)๏ Utiliser le pilote OpenGL dans un navigateur
43
LCProd.netGrandadam Emmanuel
SVG๏ SVG : Scalable Vector Graphics
๏ Graphiques vectoriels adaptables
๏ Injecter dans le HTML<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"></svg>
๏ Par le biais de javascript๏ createElementNS
Permet d’ajouter un objet au SVG๏ appendChild
Ajoute l’objet au rendu SVG
44
Exercice 3.3 / Fichier 3.3.html
LCProd.netGrandadam Emmanuel
FONCTIONNALITÉSCSS
Sélecteurs,Polices Web,Transparences,Modes de couleurs,Arrondis,Dégradés,Ombres,
Transitions,Transformations,Animations
45
LCProd.netGrandadam Emmanuel
Sélecteurs๏ Sélecteurs CSS3
๏ Nième.row:nth-child(num|even|odd){}
๏ Attributs spécifiquesinput[type="text"] {}
๏ Négation:not(.box) {}
๏ Plus spécifiquesh2:first-child {}div.text > div {}
๏ Plus d’infos ?http://www.w3.org/TR/css3-selectors/#selectors
46
Exercice 4.1 / Fichier 4.1.html
LCProd.netGrandadam Emmanuel
Polices 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ésEOT - Embedded OpenTypeTTF - TrueTypeOTF - OpenTypeSVG - Scalable Vector GraphicsWOFF - Web Open Font Format
๏ Utilisation de librairies externes (http://www.google.com/webfonts)http://www.google.com/webfonts<link href='http://fonts.googleapis.com/css?family=Lobster type='text/css'>
47
Exercice 4.1 / Fichier 4.1.html
LCProd.netGrandadam Emmanuel
Transparences๏ Composition des couleurs en rgba
๏ Rouge๏ Vert๏ Bleu๏ Transparence (aplha)
rgba(255, 0, 0, 0.22)
48
Exercice 4.1 / Fichier 4.1.html
LCProd.netGrandadam Emmanuel
Modes de couleus๏ Composition des couleurs :
๏ Couleurs nomméescolor:purple;
๏ Couleur HTMLcolor:#fff;
๏ Composition rgbacolor:rgba(127,127,127,.5);
๏ Composition hslaTeinte Saturation Valeur
color:hsla(128,75%,33%,1);
http://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur
49
LCProd.netGrandadam Emmanuel
Arrondis๏ Prise en charge de border-radius
๏ CSS3
border-radius: 140px;
๏ Pour les autres navigateurs :
Webkit-webkit-border-radius: 20px;
Gecko-moz-border-radius: 20px;
50
Exercice 4.2 / Fichier 4.2.html
LCProd.netGrandadam Emmanuel
Dégradés๏ Pas de prise en charge native...
๏ Propriété CSSWebkit-webkit-gradient();
Gecko-moz-linear-gradient();-moz-radial-gradient();
Opéra-o-linear-gradient();-o-radial-gradient();
๏ Typeslinearradial
51
Exercice 4.2 / Fichier 4.2.html
LCProd.netGrandadam Emmanuel
Ombres๏ Accessibles sur les textes et boîtes
๏ text-shadowtext-shadow:decalX, decalY, force, couleur;
๏ box-shadowbox-shadow:decalX, decalY, force, couleur;
52
Exercice 4.2 / Fichier 4.2.html
LCProd.netGrandadam Emmanuel
Transitions๏ Effets de transitions de propriétés CSS
๏ transition-property : la propriété qui sera modifiée par la transitionAll ou ls propriétés CSS
๏ transition-timing-function : la fonction de transition utiliséeease, linear, ease-in, ease-out, ease-in-out
๏ transition-duration : la durée de la transitionsecondes
๏ transition-delay : le temps avant que la transition ne se déclenchesecondes
53
Exercice 4.3 / Fichier 4.3.html
LCProd.netGrandadam Emmanuel
Tranformations๏ transform2d
๏ webkit-transform:rotateYscaleXskewtranslate
๏ Centre de la déformation : transform-origin : x y.
๏ transform3dAttention ! pas sur Chrome
๏ webkit-transformscale3dtranslate3dperspectivematrix3d
๏ Centre de la déformation :webkit-perspective-origin.
54
Exercice 4.3 / Fichier 4.3.html
LCProd.netGrandadam Emmanuel
Animations๏ Enchaînement d’effets
๏ Un évènement CSS fait appel à une animationa:hover{ -webkit-animation: pulse 0.7s ease;}
๏ Déclaration de l’animationGestion d’une ‘timeline’ pour les étapes (10%, 20%...)
@-webkit-keyframes pulse { from {...} 0% {...} 10{...} to {...}}
55
Exercice 4.4 / Fichier 4.4.html
LCProd.netGrandadam Emmanuel
RESSOURCES
http://diveintohtml5.org/http://www.html5rocks.com/
http://html5demos.com/http://dev.w3.org/html5
http://www.alsacreations.comhttp://www.pompage.net
http://www.apple.com/html5/...
56
LCProd.netGrandadam Emmanuel
LICENCE
57
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
![[ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre](https://img.pdfslide.net/doc/110x75/5f4125da22beb41cb4194355/-intgrateur-prestashop-intgrateur-sommaire-grandadam-emmanuel-lcprodnet.jpg)
