SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
L’avenir du WEB
Initiation au web et au
HTML 5HTML 5
25/12/2013
Introduction
• Une brève histoire du WEB
• Le consortium W3C et le groupe WhatWG
• Le fonctionnement du WEB
Qu’est ce que HTML 5 ?
• HTML 5 : un ensemble de technologies (HTML 5, CSS 3, JavaScript)
• Son support dans les navigateurs
Une introduction au langage HTML
• Premier document HTML 5
• Un document html avec le CSS et le JavaScript
Les grandes nouveautés HTML 5
• Les balises sémantiques
• Les nouveautés CSS 3
• Les balises multimédias (audio et vidéo)
• Le dessin avec le Canvas (dessin 2D et aperçus de la 3D)
Conclusion
• Perspectives
Plan de la présentationPlan
A l’origine du WEB : Tim berners-Lee
 L’initiateur du premier site internet et du premier
navigateur (WWW) en 1990 est Tim berners-Lee
 Il est à l’origine des 3
technologies principales du
WEB : Les adresses web, le
protocole HTTP et le HTML
 Il est le fondateur et le président du W3C depuis
1994.
UnebrèvehistoireduWEB
Créations de nouvelles technologies
 1993 : Le navigateur Mosaic développé pour Sun intègre la
balise img pour l’intégration des images
 Une partie de l’équipe développe l’année suivante
Netscape Navigator
 Il devient par la suite nécessaire de standardiser les
langages du WEB -> Création du W3C par Tim
 A partir de 1995, tout s’accélère : création de Javascript,
de l’HTML 2.0, et de la 1ère
version d’internet explorer.
 S’en suit en 1996, un nouveau standard nommé CSS
UnebrèvehistoireduWEB
Le fonctionnement du WEBLefonctionnementduWEB
 Le HTML 5 est fondamentalement le langage HTML dans
sa 5ème
version…
 …Mais il regroupe, par un abus de langage justifié, le
HTML 5, le CSS 3 et le JavaScript. Le HTML 5 est donc
la pierre angulaire de cet l’édifice.
On va donc avoir :
 HTML -> fond du document
 CSS -> forme du document
 JavaScript -> dynamisme
du document
HTML 5 : HTML 5, CSS 3 et JavaScriptQu’estcequeHTML5?
 HTML (Hypertext Markup Language) est le format de
données structurant une page web.
 HTML est initialement dérivé du SGML (Standard
Generalized Markup Language) dont la première
publication date de 1986.
 C’est un langage de balisage : <balise>Contenu</balise>
Introduction au langage HTMLPremierdocumentHTML
<html>
<head>
Les en-têtes du document
</head>
<body>
Le corps du document
</body>
</html>
 Exemple de document
HTML avec les
premières balises html,
head et body
 Le doctype est le préambule d’une page HTML, il
spécifie le type de document.
 Doctype HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 Doctype XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 Doctype HTML 5
<!DOCTYPE html>
Le Doctype avant toutLeDoctype
 Code HTML 5 valide W3C (à tester sur http://validator.w3.org)
 Code XHTML 1.1 valide W3C (à tester sur http://validator.w3.org)
Codes HTML valides W3C
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="UTF-8">
</head>
<body>
Vive HTML 5 ! :D
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p><span>Vive pas xHTML5 ! :D</span></p>
</body>
</html>
LavalidationW3C
Le CSSLedocumentHTML
 Comme vu précédemment, le code CSS va mettre en
forme notre document HTML
 Syntaxe générale :
sélecteur {
propriété : valeur;
}
 Exemple :
p {
font-size : 10px;
color : ‘blue’
}
 Dans notre exemple, le contenu texte de toutes nos
balises <p> auront une taille de 10 px et une couleur grise.
<p>Le CSS !!!</p> Le CSS !!!
 Association des 3 langages piliers du WEB :
Code HTML avec du CSS et du JavaScript
Inclusion de notre
fichier CSS
Inclusion de
notre
fichier JavaScript
Note HTML 5
LedocumentHTML
Les grandes nouveautés de l’HTML 5LesnouveautésHTML5
 Les nouvelles balises sémantiques (<header>, <footer> …)
 Les principales nouveautés CSS 3
 Les balises multimédias (<audio> et <vidéo>)
 La balise <canvas> pour un affichage dynamique
 Le stockage hors ligne
 La géolocalisation
 Une gestion des formulaires plus poussée
Les nouvelles balises sémantiquesLesbalisessémantiques
Les nouvelles balises sémantiquesLesbalisessémantiques
Les nouvelles balises sémantiquesLesbalisessémantiques
Le CSS 3 : les nouveautésLesnouveautésduCSS3
Le CSS 3 : quelques nouveautésLesnouveautésduCSS3
 Border Radius
 Box Shadow
 Text Shadow
 Multiple Columns
 Gradients http://www.colorzilla.com/gradient-editor/
border-radius: 30px;
box-shadow: 10px 10px 10px 1px ;
text-shadow: 2px 2px 5px #444 ;
column-count: 2;
column-gap: 10px;
background: linear-gradient(left,
rgba(208,228,247,1) 0%,rgba(115,177,231,1)
24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1)
79%,rgba(135,188,234,1) 100%);
Les nouvelles balises <audio> et <video>Lesbalisesaudioetvideo
Les nouvelles balises <audio> et <video>
 Une des grandes nouveautés de l’HTML 5 est la prise en
charge sans plugins, de la lecture des flux audio et vidéo
 Fondamentalement, les nouvelles balises <audio> et <video>
se comporte de la même manière et s’utilisent quasiment de
la même façon que l’inclusion d’une simple image !
<video src="video.webm"></video>
• syntaxe minimale pour la lecture d’un fichier vidéo :
• syntaxe minimale pour la lecture d’un fichier audio:
• syntaxe minimale pour l’inclusion d’une image :
<img src="image.png" alt="Une image !">
<audio src="audio.mp3" controls></audio>
Lesbalisesaudioetvideo
La nouvelle balise <video>
 La simple syntaxe
nous offre donc la possibilité de lire une vidéo directement dans notre navigateur :
Aperçus dans Google Chrome
 Cependant, l’absence de
l’attribut controls
implique que la lecture,
la pause et le stop
doivent s’effectuer avec
le clique droit ce qui n’est
pas très pratique….
<video src="video.webm"></video>
Lesbalisesaudioetvideo
La nouvelle balise <video>
 Code source d’un élément <video> plus complet avec le
contrôle, la taille, l’image d’intro, les différentes sources et le
texte alternatif.
 Exactement la même vidéo
que précédemment mais
avec l’image d’intro et le
contrôleur visible par le
client.
Aperçus dans Mozilla Firefox
La balise <video> possède également
l’attribut autoplay, preload et loop
Lesbalisesaudioetvideo
La nouvelle balise <video>
 La prise en charge par les navigateurs des différents
formats vidéos est la suivante :
Navigateur H.264/MP4/AAC Ogg/Theora/Vorbis WebM
3.5+ 3.5+ 4.0+
10.5 10.5+ 10.6+
9.0+ 9.0+ 9+ avec installation d’un plugin
3.0+ 4.1+ 3.0+ 6.0+
4.0+ 3.1+ 9+ avec installation d’un plugin
 Pour une prise en charge simplifié par les navigateurs, il existe de nombreux scripts JavaScript comme :
Popcorn.js, videoJS, html5media, SublimeVideo ect…
 Outil de conversion vidéo simple (Micro Video Converter) http://www.mirovideoconverter.com/
Lesbalisesaudioetvideo
La nouvelle balise <audio>
 La syntaxe
nous offre la possibilité de lire un fichier audio directement
dans notre navigateur tout comme pour la vidéo.
 Aperçus dans les principaux navigateurs :
<audio src="audio.mp3" controls></audio>
Lesbalisesaudioetvideo
La nouvelle balise <audio>
 De même que pour l’élément <video> , nous pouvons avec
l’élément <audio> gérer plusieurs sources pour répondre à
l’incompatibilité des navigateurs.
La balise <audio> possède également l’attribut autoplay, preload et loop
Lesbalisesaudioetvideo
La nouvelle balise <audio>Lesbalisesaudioetvideo
 La prise en charge par les navigateurs des différents
formats audio est la suivante :
Navigateur MP3 Ogg Vorbis ACC WAV
3.5+
10.5
9.0+
3.0+
4.0+
 De même que pour la balise vidéo, vous pouvez utiliser les
scripts JavaScript vus précédemment pour une
manipulation simplifiée de ces balises.
Activité sur les balises <audio> et <video>
 En utilisant les codes sources de cette présentation, essayez de
faire marcher la lecture d’un fichier audio et vidéo sur la même
page dès son chargement avec l’intégration des contrôles.
On souhaite obtenir ce résultat :
Lesbalisesaudioetvideo
Le dessin avec CanvasLedessinavecCanvas
Canvas rider
Le dessin avec CanvasLedessinavecCanvas
 HTML 5 offre aujourd’hui la possibilité de dessiner, de traiter des
images en allant jusqu’à la possibilité de créer un jeu complet
grâce au nouvel élément <canvas>
 Ainsi, cette fonctionnalité devient une alternative puissante face
au flash ou encore au Java dans la réalisation des ces différentes
tâches
 La syntaxe HTML pour la création d’un élément canvas est très
simple :
<canvas id="dessin" width="640" height="480">
Votre navigateur ne support pas canvas ! Bouuuu …
</canvas>
Dessiner un rectangle rouge
 Pour créer un dessin dans cet élément, on va recourir à l’API de dessin
2D avec le langage JavaScript
 Exemple de création d’un simple rectangle rouge :
 Aperçus du résultat :
LedessinavecCanvas
<canvas id="dessin" width="640" height="480">
Votre navigateur ne support pas canvas ! Bouuuu …
</canvas>
<script>
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
forme.fillStyle = "red";
forme.fillRect(20, 30, 100, 50);
</script>
Formes géométriques
 Les formes primitives en Canvas ne comprennent que des fonctions de la famille des rectangles :
 Code source pour un drapeau suisse :
LedessinavecCanvas
Fonction Rôle
fillRect(x, y, w, h) Rectangle plein
strokeRect(x, y, w, h) Rectangle surligné
clearRect(x, y, w, h) Rectangle vide (efface)
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
forme.lineWidth = 2; // Largeur du trait
forme.strokeStyle = "#ccc"; // Couleur du trait
forme.fillStyle = "red"; // Rectangle plein rouge
forme.fillRect(10, 10, 200, 100); // coor. + taille rectangle
forme.clearRect(100, 20, 20, 80); // rectangle qui efface
forme.clearRect(70, 50, 80, 20); // 2ème rectangle qui efface
forme.strokeRect(1, 1, 220, 120); // cadre gris
 Résultat :
Tracer un chemin
 A défaut d’avoir simplement le rectangle comme tracé de
primitive, Canvas possède l’avantage d’une grande liberté
avec le tracé de chemins
 Tracé d’un triangle avec les chemins :
LedessinavecCanvas
<script>
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
forme.fillStyle = "#FFFF00"; // triangle jaune
forme.strokeStyle = "#EABB00"; // contour jaune foncé
forme.lineWidth = 5; // Largeur du contour
forme.beginPath(); // Commence le chemin
forme.moveTo(100, 50); // Se positionner
forme.lineTo(160, 150); // Se rendre à ...
forme.lineTo(40, 150); // Se rendre à ...
forme.closePath(); // Termine le chemin
forme.fill(); // color le fond
forme.stroke(); // trace le contour
</script>
 Résultat :
(40, 150)
(100, 50)
(160, 150)
Activité : tracer la triforce de ZeldaLedessinavecCanvas
<script>
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
forme.fillStyle = "#FFFF00";
forme.strokeStyle = "#EABB00";
forme.lineWidth = 5;
var x = 200;
var y = 200;
forme.beginPath();
forme.moveTo(x, y);
forme.lineTo(x+60, y+100);
forme.lineTo(x-60, y+100);
forme.closePath();
forme.fill();
forme.stroke();
</script>
 En utilisant le code source suivant comme base de
l’exercice, essayez de tracer la triforce de Zelda.
Les autres possibilités de CanvasLedessinavecCanvas
 Il existe de nombreuses possibilités à Canvas que vous
pouvez retrouver notamment sur la documentation de
Mozilla : https://developer.mozilla.org/fr/HTML/Canvas
 Ces possibilités nous permettent de gérer la transparence,
les dégradés, de faire des transformations (échelle,
rotation, translation …), de traiter des images, de modifier
des pixels, de gérer les sprites, d’écrire du texte ect…
 Applications marquantes utilisant les canvas :
 Sketchpad http://mugtug.com/sketchpad/
 The Wilderness Downtown : http://www.thewildernessdowntown.com/
La 3D avec CanvasLedessinavecCanvas
 Le socle canvas a permis le saut vers WebGL, une API
JavaScript spécialement conçus pour la création 3D.
 Cette technologie est en cours d’expérimentation et est
principalement compatible avec Google Chrome et Mozilla
Firefox pour le moment.
 Quelques expérimentations :
 Google : http://www.chromeexperiments.com/webgl
 Hakim El Hattab : http://hakim.se/experiments/
 Mr doob : http://mrdoob.com/
 Jeu de rally : http://triggerrally.com/
La balise canvas et les navigateursLedessinavecCanvas
 La prise en charge par les navigateurs de la balise canvas
est la suivante :
Navigateur Version
3+
9+
9+
1+
3.1+
 Il existe une solution alternative pour internet explorer < 9
avec une librairie JavaScript :
http://code.google.com/p/explorercanvas
Présentation terminée !Theend!
Cette présentation sur le HTML 5 est
désormais terminée !
Avez-vous des questions ?
Référence utilisée

Contenu connexe

Tendances

Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5Aymen Hamdouni
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3G²FOSS ENIT
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygenEmmanuelle Morlock
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Stephane PERES
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSABNSA - Aquitaine
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java scriptArrow Group
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 

Tendances (20)

HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Html
HtmlHtml
Html
 
Html 5
Html 5Html 5
Html 5
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
WordPress
WordPressWordPress
WordPress
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 

En vedette

Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...
Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...
Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...UNITEC
 
3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert Janssen
3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert Janssen3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert Janssen
3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert JanssenRobbert Janssen
 
2012 03 05 Boucles cyclo famille
2012 03 05 Boucles cyclo famille2012 03 05 Boucles cyclo famille
2012 03 05 Boucles cyclo familleStéphanie Dabernat
 
Présentation de la société Sierra Echo
Présentation de la société Sierra EchoPrésentation de la société Sierra Echo
Présentation de la société Sierra EchoSIERRA ECHO
 
Narrative Summary Rubric
Narrative Summary RubricNarrative Summary Rubric
Narrative Summary RubricEmily Kissner
 
Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...
Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...
Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...NC State Turf Pathology
 
Plot Elements
Plot ElementsPlot Elements
Plot Elementslbherring
 
2.endocadite inféctieuse tizi dim 29 09-2013
2.endocadite inféctieuse tizi dim 29 09-20132.endocadite inféctieuse tizi dim 29 09-2013
2.endocadite inféctieuse tizi dim 29 09-2013killua zoldyck
 
Avoiding the seven deadly sins of IBM Connections and how to plot the route ...
Avoiding the seven deadly sins of IBM Connections and how to plot the route ...Avoiding the seven deadly sins of IBM Connections and how to plot the route ...
Avoiding the seven deadly sins of IBM Connections and how to plot the route ...Stuart McIntyre
 
Startup & entrepreneuriat #3 : startup ideas
Startup & entrepreneuriat #3 : startup ideasStartup & entrepreneuriat #3 : startup ideas
Startup & entrepreneuriat #3 : startup ideasJean Michel
 
A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014
A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014
A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014Agathe Guerrier
 
Le gois noirmoutier
Le gois noirmoutierLe gois noirmoutier
Le gois noirmoutierdenis
 
Impact of Fertilization Programs and Preventive Fungicides on Spring Dead Spot
Impact of Fertilization Programs and Preventive Fungicides on Spring Dead SpotImpact of Fertilization Programs and Preventive Fungicides on Spring Dead Spot
Impact of Fertilization Programs and Preventive Fungicides on Spring Dead SpotNC State Turf Pathology
 

En vedette (20)

Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...
Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...
Le Numérique Pilier d'innovation sociétale et économique ? - Antoine CHOTARD ...
 
Xml
XmlXml
Xml
 
3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert Janssen
3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert Janssen3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert Janssen
3-D Printing vs. The Supply Chain - 2016 edition, EN - TNO Robbert Janssen
 
2012 03 05 Boucles cyclo famille
2012 03 05 Boucles cyclo famille2012 03 05 Boucles cyclo famille
2012 03 05 Boucles cyclo famille
 
Présentation de la société Sierra Echo
Présentation de la société Sierra EchoPrésentation de la société Sierra Echo
Présentation de la société Sierra Echo
 
Narrative Summary Rubric
Narrative Summary RubricNarrative Summary Rubric
Narrative Summary Rubric
 
Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...
Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...
Impact of Fertilization Programs and Preventive Fungicide Applications On Spr...
 
Plot Elements
Plot ElementsPlot Elements
Plot Elements
 
2.endocadite inféctieuse tizi dim 29 09-2013
2.endocadite inféctieuse tizi dim 29 09-20132.endocadite inféctieuse tizi dim 29 09-2013
2.endocadite inféctieuse tizi dim 29 09-2013
 
Avoiding the seven deadly sins of IBM Connections and how to plot the route ...
Avoiding the seven deadly sins of IBM Connections and how to plot the route ...Avoiding the seven deadly sins of IBM Connections and how to plot the route ...
Avoiding the seven deadly sins of IBM Connections and how to plot the route ...
 
Produtos AG
Produtos AGProdutos AG
Produtos AG
 
Startup & entrepreneuriat #3 : startup ideas
Startup & entrepreneuriat #3 : startup ideasStartup & entrepreneuriat #3 : startup ideas
Startup & entrepreneuriat #3 : startup ideas
 
MAtlas: A case study on Milan mobility
MAtlas: A case study on Milan mobilityMAtlas: A case study on Milan mobility
MAtlas: A case study on Milan mobility
 
A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014
A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014
A New Value Framework for Creative Businesses - BBH Labs at SPOT Conference 2014
 
Isw4 fiche produit
Isw4 fiche produitIsw4 fiche produit
Isw4 fiche produit
 
Le gois noirmoutier
Le gois noirmoutierLe gois noirmoutier
Le gois noirmoutier
 
Webinar Lean Startup
Webinar Lean StartupWebinar Lean Startup
Webinar Lean Startup
 
Catálogo Iluminación LED Ineslam 2015
Catálogo Iluminación LED Ineslam 2015Catálogo Iluminación LED Ineslam 2015
Catálogo Iluminación LED Ineslam 2015
 
Research highlights in industrial biomaterials 2009–2012
Research highlights in industrial biomaterials 2009–2012Research highlights in industrial biomaterials 2009–2012
Research highlights in industrial biomaterials 2009–2012
 
Impact of Fertilization Programs and Preventive Fungicides on Spring Dead Spot
Impact of Fertilization Programs and Preventive Fungicides on Spring Dead SpotImpact of Fertilization Programs and Preventive Fungicides on Spring Dead Spot
Impact of Fertilization Programs and Preventive Fungicides on Spring Dead Spot
 

Similaire à Prsentationhtml5 html5 ii twebteck

Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation webMOHAMMED MOURADI
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaverdavidbx
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?Frédéric Harper
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Fnot
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxFootballLovers9
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVGChristian SUMBANG
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies webIrinaTsimpilova1
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !matparisot
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Mathieu Parisot
 

Similaire à Prsentationhtml5 html5 ii twebteck (20)

Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVG
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Cours html5
Cours html5Cours html5
Cours html5
 

Plus de TECOS

Bouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecosBouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecosTECOS
 
D3 js-last
D3 js-lastD3 js-last
D3 js-lastTECOS
 
Summer internship
Summer internshipSummer internship
Summer internshipTECOS
 
Mohamed bouhamed - ccna2
Mohamed bouhamed  - ccna2Mohamed bouhamed  - ccna2
Mohamed bouhamed - ccna2TECOS
 
Mohamed bouhamed - ccna1
Mohamed bouhamed  -  ccna1Mohamed bouhamed  -  ccna1
Mohamed bouhamed - ccna1TECOS
 
Mobile certified
Mobile certifiedMobile certified
Mobile certifiedTECOS
 
Analytics certified
Analytics certifiedAnalytics certified
Analytics certifiedTECOS
 
Ad words certified
Ad words certifiedAd words certified
Ad words certifiedTECOS
 
Télémétrie d’openstack
Télémétrie d’openstackTélémétrie d’openstack
Télémétrie d’openstackTECOS
 
cloudu certification
cloudu certificationcloudu certification
cloudu certificationTECOS
 
Internship report
Internship reportInternship report
Internship reportTECOS
 
Gsm presntation
Gsm presntationGsm presntation
Gsm presntationTECOS
 
Td gsm iit
Td gsm iitTd gsm iit
Td gsm iitTECOS
 
Complément réseaux informatiques
Complément réseaux informatiquesComplément réseaux informatiques
Complément réseaux informatiquesTECOS
 
Cours réseauxs gsm
Cours réseauxs gsmCours réseauxs gsm
Cours réseauxs gsmTECOS
 
Cours sécurité 2_asr
Cours sécurité 2_asrCours sécurité 2_asr
Cours sécurité 2_asrTECOS
 
chapitre 1
chapitre 1chapitre 1
chapitre 1TECOS
 
Serveur web iit_asr_p2i
Serveur web iit_asr_p2iServeur web iit_asr_p2i
Serveur web iit_asr_p2iTECOS
 
Examen
Examen Examen
Examen TECOS
 

Plus de TECOS (20)

Bouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecosBouhamed vuejs-meetup-tecos
Bouhamed vuejs-meetup-tecos
 
D3 js-last
D3 js-lastD3 js-last
D3 js-last
 
Mta
MtaMta
Mta
 
Summer internship
Summer internshipSummer internship
Summer internship
 
Mohamed bouhamed - ccna2
Mohamed bouhamed  - ccna2Mohamed bouhamed  - ccna2
Mohamed bouhamed - ccna2
 
Mohamed bouhamed - ccna1
Mohamed bouhamed  -  ccna1Mohamed bouhamed  -  ccna1
Mohamed bouhamed - ccna1
 
Mobile certified
Mobile certifiedMobile certified
Mobile certified
 
Analytics certified
Analytics certifiedAnalytics certified
Analytics certified
 
Ad words certified
Ad words certifiedAd words certified
Ad words certified
 
Télémétrie d’openstack
Télémétrie d’openstackTélémétrie d’openstack
Télémétrie d’openstack
 
cloudu certification
cloudu certificationcloudu certification
cloudu certification
 
Internship report
Internship reportInternship report
Internship report
 
Gsm presntation
Gsm presntationGsm presntation
Gsm presntation
 
Td gsm iit
Td gsm iitTd gsm iit
Td gsm iit
 
Complément réseaux informatiques
Complément réseaux informatiquesComplément réseaux informatiques
Complément réseaux informatiques
 
Cours réseauxs gsm
Cours réseauxs gsmCours réseauxs gsm
Cours réseauxs gsm
 
Cours sécurité 2_asr
Cours sécurité 2_asrCours sécurité 2_asr
Cours sécurité 2_asr
 
chapitre 1
chapitre 1chapitre 1
chapitre 1
 
Serveur web iit_asr_p2i
Serveur web iit_asr_p2iServeur web iit_asr_p2i
Serveur web iit_asr_p2i
 
Examen
Examen Examen
Examen
 

Prsentationhtml5 html5 ii twebteck

  • 1. L’avenir du WEB Initiation au web et au HTML 5HTML 5 25/12/2013
  • 2. Introduction • Une brève histoire du WEB • Le consortium W3C et le groupe WhatWG • Le fonctionnement du WEB Qu’est ce que HTML 5 ? • HTML 5 : un ensemble de technologies (HTML 5, CSS 3, JavaScript) • Son support dans les navigateurs Une introduction au langage HTML • Premier document HTML 5 • Un document html avec le CSS et le JavaScript Les grandes nouveautés HTML 5 • Les balises sémantiques • Les nouveautés CSS 3 • Les balises multimédias (audio et vidéo) • Le dessin avec le Canvas (dessin 2D et aperçus de la 3D) Conclusion • Perspectives Plan de la présentationPlan
  • 3. A l’origine du WEB : Tim berners-Lee  L’initiateur du premier site internet et du premier navigateur (WWW) en 1990 est Tim berners-Lee  Il est à l’origine des 3 technologies principales du WEB : Les adresses web, le protocole HTTP et le HTML  Il est le fondateur et le président du W3C depuis 1994. UnebrèvehistoireduWEB
  • 4. Créations de nouvelles technologies  1993 : Le navigateur Mosaic développé pour Sun intègre la balise img pour l’intégration des images  Une partie de l’équipe développe l’année suivante Netscape Navigator  Il devient par la suite nécessaire de standardiser les langages du WEB -> Création du W3C par Tim  A partir de 1995, tout s’accélère : création de Javascript, de l’HTML 2.0, et de la 1ère version d’internet explorer.  S’en suit en 1996, un nouveau standard nommé CSS UnebrèvehistoireduWEB
  • 5. Le fonctionnement du WEBLefonctionnementduWEB
  • 6.  Le HTML 5 est fondamentalement le langage HTML dans sa 5ème version…  …Mais il regroupe, par un abus de langage justifié, le HTML 5, le CSS 3 et le JavaScript. Le HTML 5 est donc la pierre angulaire de cet l’édifice. On va donc avoir :  HTML -> fond du document  CSS -> forme du document  JavaScript -> dynamisme du document HTML 5 : HTML 5, CSS 3 et JavaScriptQu’estcequeHTML5?
  • 7.  HTML (Hypertext Markup Language) est le format de données structurant une page web.  HTML est initialement dérivé du SGML (Standard Generalized Markup Language) dont la première publication date de 1986.  C’est un langage de balisage : <balise>Contenu</balise> Introduction au langage HTMLPremierdocumentHTML <html> <head> Les en-têtes du document </head> <body> Le corps du document </body> </html>  Exemple de document HTML avec les premières balises html, head et body
  • 8.  Le doctype est le préambule d’une page HTML, il spécifie le type de document.  Doctype HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  Doctype XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  Doctype HTML 5 <!DOCTYPE html> Le Doctype avant toutLeDoctype
  • 9.  Code HTML 5 valide W3C (à tester sur http://validator.w3.org)  Code XHTML 1.1 valide W3C (à tester sur http://validator.w3.org) Codes HTML valides W3C <!DOCTYPE html> <html> <head> <title>HTML5</title> <meta charset="UTF-8"> </head> <body> Vive HTML 5 ! :D </body> </html> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>XHTML</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <p><span>Vive pas xHTML5 ! :D</span></p> </body> </html> LavalidationW3C
  • 10. Le CSSLedocumentHTML  Comme vu précédemment, le code CSS va mettre en forme notre document HTML  Syntaxe générale : sélecteur { propriété : valeur; }  Exemple : p { font-size : 10px; color : ‘blue’ }  Dans notre exemple, le contenu texte de toutes nos balises <p> auront une taille de 10 px et une couleur grise. <p>Le CSS !!!</p> Le CSS !!!
  • 11.  Association des 3 langages piliers du WEB : Code HTML avec du CSS et du JavaScript Inclusion de notre fichier CSS Inclusion de notre fichier JavaScript Note HTML 5 LedocumentHTML
  • 12. Les grandes nouveautés de l’HTML 5LesnouveautésHTML5  Les nouvelles balises sémantiques (<header>, <footer> …)  Les principales nouveautés CSS 3  Les balises multimédias (<audio> et <vidéo>)  La balise <canvas> pour un affichage dynamique  Le stockage hors ligne  La géolocalisation  Une gestion des formulaires plus poussée
  • 13. Les nouvelles balises sémantiquesLesbalisessémantiques
  • 14. Les nouvelles balises sémantiquesLesbalisessémantiques
  • 15. Les nouvelles balises sémantiquesLesbalisessémantiques
  • 16. Le CSS 3 : les nouveautésLesnouveautésduCSS3
  • 17. Le CSS 3 : quelques nouveautésLesnouveautésduCSS3  Border Radius  Box Shadow  Text Shadow  Multiple Columns  Gradients http://www.colorzilla.com/gradient-editor/ border-radius: 30px; box-shadow: 10px 10px 10px 1px ; text-shadow: 2px 2px 5px #444 ; column-count: 2; column-gap: 10px; background: linear-gradient(left, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
  • 18. Les nouvelles balises <audio> et <video>Lesbalisesaudioetvideo
  • 19. Les nouvelles balises <audio> et <video>  Une des grandes nouveautés de l’HTML 5 est la prise en charge sans plugins, de la lecture des flux audio et vidéo  Fondamentalement, les nouvelles balises <audio> et <video> se comporte de la même manière et s’utilisent quasiment de la même façon que l’inclusion d’une simple image ! <video src="video.webm"></video> • syntaxe minimale pour la lecture d’un fichier vidéo : • syntaxe minimale pour la lecture d’un fichier audio: • syntaxe minimale pour l’inclusion d’une image : <img src="image.png" alt="Une image !"> <audio src="audio.mp3" controls></audio> Lesbalisesaudioetvideo
  • 20. La nouvelle balise <video>  La simple syntaxe nous offre donc la possibilité de lire une vidéo directement dans notre navigateur : Aperçus dans Google Chrome  Cependant, l’absence de l’attribut controls implique que la lecture, la pause et le stop doivent s’effectuer avec le clique droit ce qui n’est pas très pratique…. <video src="video.webm"></video> Lesbalisesaudioetvideo
  • 21. La nouvelle balise <video>  Code source d’un élément <video> plus complet avec le contrôle, la taille, l’image d’intro, les différentes sources et le texte alternatif.  Exactement la même vidéo que précédemment mais avec l’image d’intro et le contrôleur visible par le client. Aperçus dans Mozilla Firefox La balise <video> possède également l’attribut autoplay, preload et loop Lesbalisesaudioetvideo
  • 22. La nouvelle balise <video>  La prise en charge par les navigateurs des différents formats vidéos est la suivante : Navigateur H.264/MP4/AAC Ogg/Theora/Vorbis WebM 3.5+ 3.5+ 4.0+ 10.5 10.5+ 10.6+ 9.0+ 9.0+ 9+ avec installation d’un plugin 3.0+ 4.1+ 3.0+ 6.0+ 4.0+ 3.1+ 9+ avec installation d’un plugin  Pour une prise en charge simplifié par les navigateurs, il existe de nombreux scripts JavaScript comme : Popcorn.js, videoJS, html5media, SublimeVideo ect…  Outil de conversion vidéo simple (Micro Video Converter) http://www.mirovideoconverter.com/ Lesbalisesaudioetvideo
  • 23. La nouvelle balise <audio>  La syntaxe nous offre la possibilité de lire un fichier audio directement dans notre navigateur tout comme pour la vidéo.  Aperçus dans les principaux navigateurs : <audio src="audio.mp3" controls></audio> Lesbalisesaudioetvideo
  • 24. La nouvelle balise <audio>  De même que pour l’élément <video> , nous pouvons avec l’élément <audio> gérer plusieurs sources pour répondre à l’incompatibilité des navigateurs. La balise <audio> possède également l’attribut autoplay, preload et loop Lesbalisesaudioetvideo
  • 25. La nouvelle balise <audio>Lesbalisesaudioetvideo  La prise en charge par les navigateurs des différents formats audio est la suivante : Navigateur MP3 Ogg Vorbis ACC WAV 3.5+ 10.5 9.0+ 3.0+ 4.0+  De même que pour la balise vidéo, vous pouvez utiliser les scripts JavaScript vus précédemment pour une manipulation simplifiée de ces balises.
  • 26. Activité sur les balises <audio> et <video>  En utilisant les codes sources de cette présentation, essayez de faire marcher la lecture d’un fichier audio et vidéo sur la même page dès son chargement avec l’intégration des contrôles. On souhaite obtenir ce résultat : Lesbalisesaudioetvideo
  • 27. Le dessin avec CanvasLedessinavecCanvas Canvas rider
  • 28. Le dessin avec CanvasLedessinavecCanvas  HTML 5 offre aujourd’hui la possibilité de dessiner, de traiter des images en allant jusqu’à la possibilité de créer un jeu complet grâce au nouvel élément <canvas>  Ainsi, cette fonctionnalité devient une alternative puissante face au flash ou encore au Java dans la réalisation des ces différentes tâches  La syntaxe HTML pour la création d’un élément canvas est très simple : <canvas id="dessin" width="640" height="480"> Votre navigateur ne support pas canvas ! Bouuuu … </canvas>
  • 29. Dessiner un rectangle rouge  Pour créer un dessin dans cet élément, on va recourir à l’API de dessin 2D avec le langage JavaScript  Exemple de création d’un simple rectangle rouge :  Aperçus du résultat : LedessinavecCanvas <canvas id="dessin" width="640" height="480"> Votre navigateur ne support pas canvas ! Bouuuu … </canvas> <script> var dessin = document.getElementById('dessin'); var forme = dessin.getContext('2d'); forme.fillStyle = "red"; forme.fillRect(20, 30, 100, 50); </script>
  • 30. Formes géométriques  Les formes primitives en Canvas ne comprennent que des fonctions de la famille des rectangles :  Code source pour un drapeau suisse : LedessinavecCanvas Fonction Rôle fillRect(x, y, w, h) Rectangle plein strokeRect(x, y, w, h) Rectangle surligné clearRect(x, y, w, h) Rectangle vide (efface) var dessin = document.getElementById('dessin'); var forme = dessin.getContext('2d'); forme.lineWidth = 2; // Largeur du trait forme.strokeStyle = "#ccc"; // Couleur du trait forme.fillStyle = "red"; // Rectangle plein rouge forme.fillRect(10, 10, 200, 100); // coor. + taille rectangle forme.clearRect(100, 20, 20, 80); // rectangle qui efface forme.clearRect(70, 50, 80, 20); // 2ème rectangle qui efface forme.strokeRect(1, 1, 220, 120); // cadre gris  Résultat :
  • 31. Tracer un chemin  A défaut d’avoir simplement le rectangle comme tracé de primitive, Canvas possède l’avantage d’une grande liberté avec le tracé de chemins  Tracé d’un triangle avec les chemins : LedessinavecCanvas <script> var dessin = document.getElementById('dessin'); var forme = dessin.getContext('2d'); forme.fillStyle = "#FFFF00"; // triangle jaune forme.strokeStyle = "#EABB00"; // contour jaune foncé forme.lineWidth = 5; // Largeur du contour forme.beginPath(); // Commence le chemin forme.moveTo(100, 50); // Se positionner forme.lineTo(160, 150); // Se rendre à ... forme.lineTo(40, 150); // Se rendre à ... forme.closePath(); // Termine le chemin forme.fill(); // color le fond forme.stroke(); // trace le contour </script>  Résultat : (40, 150) (100, 50) (160, 150)
  • 32. Activité : tracer la triforce de ZeldaLedessinavecCanvas <script> var dessin = document.getElementById('dessin'); var forme = dessin.getContext('2d'); forme.fillStyle = "#FFFF00"; forme.strokeStyle = "#EABB00"; forme.lineWidth = 5; var x = 200; var y = 200; forme.beginPath(); forme.moveTo(x, y); forme.lineTo(x+60, y+100); forme.lineTo(x-60, y+100); forme.closePath(); forme.fill(); forme.stroke(); </script>  En utilisant le code source suivant comme base de l’exercice, essayez de tracer la triforce de Zelda.
  • 33. Les autres possibilités de CanvasLedessinavecCanvas  Il existe de nombreuses possibilités à Canvas que vous pouvez retrouver notamment sur la documentation de Mozilla : https://developer.mozilla.org/fr/HTML/Canvas  Ces possibilités nous permettent de gérer la transparence, les dégradés, de faire des transformations (échelle, rotation, translation …), de traiter des images, de modifier des pixels, de gérer les sprites, d’écrire du texte ect…  Applications marquantes utilisant les canvas :  Sketchpad http://mugtug.com/sketchpad/  The Wilderness Downtown : http://www.thewildernessdowntown.com/
  • 34. La 3D avec CanvasLedessinavecCanvas  Le socle canvas a permis le saut vers WebGL, une API JavaScript spécialement conçus pour la création 3D.  Cette technologie est en cours d’expérimentation et est principalement compatible avec Google Chrome et Mozilla Firefox pour le moment.  Quelques expérimentations :  Google : http://www.chromeexperiments.com/webgl  Hakim El Hattab : http://hakim.se/experiments/  Mr doob : http://mrdoob.com/  Jeu de rally : http://triggerrally.com/
  • 35. La balise canvas et les navigateursLedessinavecCanvas  La prise en charge par les navigateurs de la balise canvas est la suivante : Navigateur Version 3+ 9+ 9+ 1+ 3.1+  Il existe une solution alternative pour internet explorer < 9 avec une librairie JavaScript : http://code.google.com/p/explorercanvas
  • 36. Présentation terminée !Theend! Cette présentation sur le HTML 5 est désormais terminée ! Avez-vous des questions ? Référence utilisée

Notes de l'éditeur

  1. Tim berners-Lee à travaillé au sein du CERN avant de rejoindre le MIT en 1994. Il est le président du W3C.
  2. Netscape Navigator : Ajout de nombreux éléments de présentation (police des textes, alignement, clignotement)
  3. Le meilleur exemple de site présentant des designs divers pour un même code HTML.