SlideShare une entreprise Scribd logo
© Tous les droits sont résérvés
Présenté Par : Mohamed ELLOUZE
22
I- Introduction
II- Les bases de HTML5
III- Travailler en HTML5 avec les nouvelles balises et propriétés
IV- La mise en forme avec CSS3
V- Les nouveaux API du HTML5
VI- Responsive Web Design
VII- Conclusion
Sommaire
HTML5
HTML5 - Structure de base
Structure de base d’une page HTML5
 Pour XHTML 1.0, il fallait écrire : <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
 Avec HTML 5, il suffit de mettre
une balise doctype courte
<!DOCTYPE html>.
 Utiliser le site http://validator.nu
pour valider le contenu de votre
page web
4
 Les éléments de section (section, article, nav, aside, header, footer)
possèdent une valeur sémantique particulière contrairement à des éléments
génériques comme span ou div qui ont un rôle totalement neutre.
 Plusieurs balises ont été introduites avec
HTML5 :
<header> : en-tête
<footer> : pied de page
<nav> : liens principaux de navigation
<section> : section de page
<aside> : informations complémentaires
<article> : article indépendant.
Structure et sémantique
 Pour définir ses nouvelles balises, des statistiques ont été élaborées sur les
attributs id les plus fréquemment attribués aux grands découpages de pages
HTML. http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html
5
6
Structure et sémantique
Exemple d’utilisation des nouvelles balises HTML5
7
 Une technique alternative consiste à déclarer ces éléments au préalable en
JavaScript. Un script (nommé html5shim ou html5shiv) est prévu à cet
effet et mis à disposition à cette adresse :
 Pour les versions antérieures à Internet Explorer 9, ces nouveaux
éléments ne sont pas reconnus par l'analyseur syntaxique.
Étant muni d'un commentaire conditionnel, il ne sera chargé que pour ces
versions spécifiques (Internet Explorer 6 à 8 inclus).
Structure et sémantique
Un cas particulier : Internet Explorer <9
8
Nouveautés avec
HTML5
9
Nouveautés avec HTML5
La balise <details> :
La balise <mark>:
 La balise <mark> est
employée pour mettre
en avant une partie
d'un contenu
 La balise <details> définit les détails supplémentaires que l’utilisateur
peut afficher ou masquer à la demande.
10
La balise <figure> :
Nouveautés avec HTML5
 L'élément <figure> s'utilise avec l'élément <figcaption> pour définir
des illustrations, des diagrammes, des schémas, des tableaux, …
La balise <time> :
 L’information n’attends pas et Google
indexe toujours plus vite … Si vous
éditez un blog ou un site dont vous
datez les articles, vous aurez surement
remarqué que, suite à son indexation
dans Google, sous le titre de votre
page et juste avant le début de sa
description, dans la page des résultats,
apparait la date de publication
11
Nouveautés avec HTML5
L’attribut contenteditable :
contentEditable
 true : l'élément est éditable.
 false : l'élément n'est pas éditable.
 inherit : prend la valeur de l'élément parent.
 L'attribut contentEditable indique que l'élément est une zone
éditable. L'utilisateur peut en changer le contenu et ainsi manipuler
le balisage.
NB: Pour plus de détail vous pouvez aller sur le site WHATWG
 Il faudra penser à vérifier les
paramètres du navigateur.
12
Nouveautés avec HTML5
L’attribut spellcheck :
 Permet de savoir si l'orthographe de l'élément doit être vérifiée.
Web Forms 2.0
14
 HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux
formulaires. De nouveaux types de champs sont en effet apparus
avec cette version.
Les Formulaires
 T
y
p
e
=
d
a
t
e
 T
y
p
e
=
c
o
l
o
r
 T
y
p
e
=
e
m
a
i
l
Clavier de saisie email sur iPhone
 Sachez que certains navigateurs, comme les
navigateurs mobiles sur iPhone et Android,
affichent un clavier adapté à la saisie d'e-mail
15
Les Formulaires
 Type=url  Type=range
Clavier de saisie de numéro de
téléphone sur iPhone
 Avec le type url, on peut demander à saisir
une adresse absolue (commençant généralement
par http://)
Clavier de saisie d’URL sur iPhone
Le type range permet de sélectionner un nombre
avec un curseur (aussi appelé slider)
Vous pouvez personnaliser le fonctionnement du
champ avec les attributs suivants :
 min : valeur minimale autorisée.
 max : valeur maximale autorisée.
 step : c'est le « pas » de déplacement.
 Type=tel
 Ce champ est dédié à
la saisie de numéros de
téléphone Le champ s'affichera en général
avec des petites flèches pour changer
la valeur.
 Type=url
16
 placeholder est un attribut qui permet de renseigner un texte indicatif
par défaut dans un champ de formulaire. C'est une valeur qui s'efface
dès que l'utilisateur active le champ de formulaire
 Le placeholder n'est qu'un
indice supplémentaire, il ne doit
pas être indispensable.
 L'attribut required permet de rendre obligatoire le remplissage d'un
champ et bloquer la validation du formulaire si l'un des champs
(concernés par cet attribut) n'a pas été renseigné.
Les Formulaires
L’attribut Placeholder :
L’attribut required :
Ou bien
17
Les Formulaires
 L’attribut Pattern permet à l'utilisateur d'être informé très rapidement
de ses erreurs et de les corriger étape par étape grâce aux indications
fournies par les infobulles situées sous chacun des champs invalides.
L’attribut Pattern :
Ce champ attend une valeur numérique d'au moins 16 chiffres
 L'attribut pattern peut être placé uniquement sur l'élément
<input> ayant pour types text, search, password, url, tel, email.
L’attribut autofocus:
 Vous pouvez placer automatiquement le
curseur dans l'un des champs de votre
formulaire avec l'attribut autofocus. Dès
que le visiteur chargera la page, le
curseur se placera dans ce champ.
Sélectionner
automatiquement un champ
18
Les Formulaires
 Mis à « off », « autocomplete » désactive la complétion automatique
des champs basée sur l’historique de saisie.
L’attribut autocomplete:
 N’oubliez pas de verifier les
paramètres de votre navigateur
 <datalist> est un élément de formulaire permettant de lier une liste de
choix à un élément input. Il est voué à fournir des fonctionnalités d'auto-
complétion ou d'auto-suggestion, dans un formulaire classique ou un champ
de recherche
L’élément <datalist> :
19
Les Formulaires
http://scriptol.fr/html5/formulaire.php
https://miketaylr.com/code/input-type-attr.html
 Vérifier la compatibilité de
votre navigateur grâce au
site miketaylr.com
 Tester directement sur
scriptol.fr les nouvelles
widgets HTML5
Vidéo & Audio
HTML5 supports Multimedia
Introduction
 Depuis l'arrivée de Youtube et Dailymotion, il est devenu courant
aujourd'hui de regarder des vidéos sur des sites web. Cependant,
aucune balise HTML ne permettait jusqu'ici de gérer la vidéo. Il
fallait à la place utiliser un plugin, comme Flash.
 Mais utiliser un plugin a de nombreux défauts : on ne peut pas
toujours contrôler son fonctionnement et en plus il y a parfois des
failles de sécurité.
 C'est pour cela que « The World Wide
Web Consortium (W3C) » a introduit
deux nouvelles balises en HTML5 :
<video> et <audio>
22
HTML5 supports Multimedia
Playing Video
 L’objectif de W3C d’introduire une nouvelle balise <video> était de
pouvoir standardiser la lecture d’une vidéo sur le web sans le
recours d’utiliser un Plugin.
 Malheureusement, l’objectif a été contourné par l’absence d’accord
sur le format vidéo qui devrait être utilisé dans les navigateurs
Web.
 Chaque navigateur pourra décider
du format supporté
 Chaque développeur sera donc
obligé de préciser le type de
format à supporter pour chaque
navigateur
23
HTML5 supports Multimedia
Video Formats
 Un Codec gratuit et libre de droits. Il est bien reconnu sous Linux
mais, sous Windows, il faut installer des programmes pour pouvoir
le lire.
 L'un des plus puissants et des plus utilisés aujourd'hui
 Un autre codec gratuit et libre de droits, plus récent. Proposé par
Google
Ogg/Theora (.ogv extension) :
Supporté par :
Supporté par :
Supporté par :
WebM/VP8 (.webm extension) :
MPEG-4/H.264 (.mp4 extension) :
23
HTML5 supports Multimedia
Implémentation de la balise <video>
 La balise <video> est utilisée pour lire une vidéo.
 L’attribut « controls » permet
de fournir des contrôles pour
démarrer et arrêter la vidéo, pour
afficher et définir l'emplacement
du curseur vidéo et pour
maximiser et restaurer la taille de
la vidéo sur l'écran.
24
HTML5 supports Multimedia
Configuring the <video> element :
 La balise <video> pourra être configurée. Voici la liste des attributs :
 autoplay : Indique que la vidéo sera joué dès le chargement
 controls : Indique que les boutons de contrôles (pause, play,..)
seront affichés
 height : Indique la hauteur en pixels de l’élément <video> rendu
 loop : Indique que la vidéo sera rejoué dès qu’elle atteint la fin
 muted : Indique que l’audio est muet
 poster : permet de spécifier l’image à afficher quand la vidéo est
en mode arrêt.
 preload : spécifie comment la vidéo doit être chargé (auto,
metadata,none)
 src : spécifie l’URL de la vidéo
 width : Indique la largeur en pixels de l’élément <video> rendu
25
HTML5 supports Multimedia
La balise <source> :
 La balise <source> permet de spécifier la source de la vidéo. Au
minimum on aura besoin de définir l’attribut « src ».
 Il faudra fournir de nombreuses sources afin
que le navigateur pourra choisir le codec le
plus approprié (ex: Miro Video Converter).
 Dans l’exemple ci-dessous, la même vidéo
« movie » a été générée avec trois formats
différents (avec Firefogg) afin que le film
pourra être lu dans n’importe quel navigateur.
26
HTML5 supports Multimedia
WebVTT (Video Text Tracks) :
 Le W3C a mis au point une nouvelle
norme, appelée WebVTT (Web Video
Text Tracks), qui offre la possibilité
d'afficher des sous-titres au niveau de
la vidéo.
27
HTML5 Video Caption Maker
 Le lecteur vidéo HTML5 a besoin de fichiers de piste
correctement construits, ce qui peut être compliqué
s’ils sont créés «à la main». La version de
démonstration HTML5 Video Caption Maker est un
outil simple mais efficace permettant de créer des
fichiers au format WebVTT.
HTML5 supports Multimedia
28
Gérer d’autres langues :
 Tous les navigateurs implémentant la balise <track> pourront
supporté le format WebVTT.
HTML5 supports Multimedia
WebVTT – Mise en Forme:
Compatible uniquement pour Chrome,
Safari, iOS7 et Opera 16+.
29
 vertical: lr | rl
 line: XX%
 align: start | middle | end
 position: XX%
 size: XX%
HTML5 supports Multimedia
Playing Audio :
 L’objectif de W3C d’introduire une nouvelle balise <audio> était de
pouvoir standardiser la lecture d’une audio sur le web sans le
recours d’utiliser un Plugin.
 Malheureusement, l’objectif a été contourné par l’absence d’accord
sur le format audio qui devrait être utilisé dans les navigateurs
Web.
 Chaque navigateur pourra décider du format supporté
 Chaque développeur sera donc obligé de préciser le type de format
à supporter pour chaque navigateur
30
HTML5 supports Multimedia
Audio – Les différents Formats :
31
MP3
 C'est l'un des plus vieux, mais aussi l'un des
plus compatibles, ce qui fait qu'il est
toujours très utilisé.
Supporté par :
AAC
 Utilisé majoritairement par Apple sur
iTunes, c'est un format de bonne qualité.
Les iPod, iPhone et autres iPad savent les
lire sans problème.
Supporté par :
OGG
 Le format Ogg Vorbis est très répandu dans
le monde du logiciel libre, notamment sous
Linux. Ce format a l'avantage d'être libre.
Supporté par :
WAV (format non compressé) : évitez autant que possible de
l'utiliser car il est très volumineux.
HTML5 supports Multimedia
Implémentation de la baslise <audio> :
 La balise <audio> est reconnue par tous les navigateurs récents,
y compris Internet Explorer à partir de la version 9 (IE9).
32
 Dans l’exemple ci-dessous, la même audio « kittycat » a été
générée avec trois formats différents afin que la chanson pourra être
lu dans n’importe quel navigateur.
33
34
La norme Microdata
 Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec
l’arrivée de HTML5 que la profession et les outils sont suffisamment
mûres pour commencer à les exploiter réellement.
L’origine : Les microformats
 Les microformats sont une manière d'attacher un sens supplémentaire
à l'information publiée sur une page web. Ils proposent une syntaxe qui
s’apparente à du HTML classique et s’applique bien en dehors de la
norme HTML5 puisqu’il est compatible avec HTML4, ou XHTML1.0
 Ils utilisent l’attribut class et certaines valeurs bien précises afin qu’il
soit interprété comme une donnée bien spécifique.
35
Fraicheur avec HTML5 : Microdata
 itemscope : crée un nouvel item
 itemtype : couplé à itemscope, il accueille une URL vers la référence du
schéma (ex : “http://schema.org/Review”)
 itemid : définit un identifiant unique pour l'item
 itemprop : indique la nature du contenu
 itemref : permet de créer une référence, c'est-à-dire lier un item avec
un autre, qui fournirait des informations plus détaillées.
 Sortie avec HTML5, Les microdonnées (Microdata en anglais) sont
représentées par l’arrivée de nouveaux attributs en HTML5. Il est alors
possible de donner la référence du document directement au sein de
l’élément porteur de ces informations.
 Microdata ajoute 5 attributs utilisables sur la plupart des éléments HTML :
 Google, Bing et Yahoo se sont alliés pour créer une nouvelle référence
nommée schema.org. Il s’agit d’un site mettant à disposition une listes de
vocabulaire pouvant être utilisé au sein des Microdatas.
La norme Microdata
36
La norme Microdata
Exemple :
NB: vous pouvez créer vos Microdata à partir du site : http://schema-creator.org/
37http://www.w3.org/
http://developers.whatwg.org/http://www.whatwg.org/
Liens utiles
http://www.w3schools.com/
CSS3
Introduction
Historique
 Le langage CSS a été mis en place au milieu des années 90’ et a connu
plusieurs versions depuis. La version qui sert de base au codage
actuel, la "2.1" a été officiellement adoptée en 2007 et n’est toujours
pas implémentée partout.
 CSS3 n’est pas encore adopté partout mais plusieurs navigateurs
tirent vers l’avant cette norme de description CSS. Il existe plusieurs
sites qui référencent la compatibilité de chaque navigateur avec
chaque fonctionnalité.
http://fmbip.com/litmus/http://www.normansblog.de/demos
/browser-support-checklist-css3/
Les moteurs de rendu
webkit
Trident
Geckowebkit
Presto
 Tous les navigateurs ne font pas appel au même moteur de rendu.
Les préfixes
 Du faite de la non prise en charge commune par les navigateurs,
beaucoup de fabricants de moteur de rendu sont arrivées à l’utilisation
des préfixes.
 -moz- pour Firefox
 -webkit- pour Chrome, Safari, iPhone, Android
 -o- pour Opera
 -ms- pour Internet Explorer
 Seuls les navigateurs modernes, reconnaissent les nouvelles propriété
CSS3. Il s'agit d'Internet Explorer 9+, Firefox 4+, Chrome 10+, Safari
5.1+, Opera 10.5+, Opera Mobile 11+.
 Pour rendre la déclaration compatible avec de
vieilles versions, on devra préfixé plusieurs fois la
propriété par :
42
Nouveautés avec CSS3
Box shadow
 La déclaration "box-shadow", comme son nom le laisse entendre,
permet de mettre une ombre portée à un élément de type block.
 Pour des raisons de compatibilité avec les versions antérieurs, on
devra déclarer plusieurs fois le box shadow en le précédent de
préfixes - moz- et -webkit-
décalage horizontal vers la droite
décalage vertical vers le bas
Étandue du dégradé
43
Nouveautés avec CSS3
Border Radius :
 border-radius permet de manière très intuitive d'arrondir un ou
plusieurs angles d'un élément en indiquant la valeur de l'arrondi
souhaité.
 Vous pouvez utiliser le site
http://border-radius.com/ pour un résultat
instantanée de la fonctionnalité border-
radius et une génération automatique du
code.
44
Nouveautés avec CSS3
 De nouvelles propriétés permettent de réaliser et gérer des arrière-
plans de teintes dégradées. Il s'agit de linear-gradient pour les
dégradés linéaires et radial-gradient pour les dégradés radiaux.
Gradient
1- Linear Gradient
2- Radial Gradient
 x et/ou y définissent la direction du dégradé.
Exemple : "to right" ou "to left bottom"
 couleur : le nom, la valeur hexadécimal ou
la valeur RGBa
 Forme : circle, ellipse
 x et/ou y point d'origine du dégradé radial,
 couleur : nom, valeur hexadecimal, RGBa
45
Nouveautés avec CSS3
@font-face
 Grâce à @font-face on peut à présent utiliser des polices de
caractère exotiques et laisser cours à son inventivité.
 Obtenir tous les formats nécessaires
- Récupérer votre police de caractère (ex:Candlescript.otf sur daFont)
 Les navigateurs ou nouveau médias (tablette, smartphone) ne
suivent pas les mêmes standards. Pour faire face à tous ceux-ci, il
faut pas moins de 4 fichiers (On pourra utiliser le générateur
FontSquirrel pour fournir tous les formats nécessaires )
 TrueType (Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)
 EOT (Internet Explorer 4+)
 WOFF (Firefox 3.6+, Internet Explorer 9+, Chrome 5+)
 SVG (iPad and iPhone)
46
Nouveautés avec CSS3
 Pour des raisons de performance il faudra que l'ordre de déclaration des
différents formats soit du plus léger au plus lourd.
47
Nouveautés avec CSS3
 L’écriture RGBa introduit la notion de
transparence dans les valeurs associées à
une couleur. Elle permet de jouer sur les
effets d’opacité entre les différentes
couches d’éléments HTML.
RGBa:
 Contrairement à ce que l'on peut croire, le principe de la transparence
RGBa est radicalement différent de la propriété opacity. En effet,
opacity s'applique à l'élément dans son intégralité (ainsi qu'à tous ses
descendants) tandis que RGBa est une valeur qui s'applique à une
propriété de l'élément sélectionné uniquement.
Opacity:
48
Nouveautés avec CSS3
 La propriété text-shadow permet de créer des ombres sur un texte.
Text shadow
HSL(A)
 La notation HSL (Hue, Saturation,
Lightness) un peu moins commune
permet d’obtenir les mêmes résultats
en jouant sur la teinte, la saturation
et la luminosité.
49
 Le principe de base d'une transition CSS3 est de permettre une transition
douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS
lorsqu'un événement est déclenché (:hover, :focus, :active, ..)
Nouveautés avec CSS3
Transition
 Les deux propriétés minimales nécessaires pour rendre fonctionnelle une
transition en CSS 3 sont transition-property et transition-duration. Il
existe d'autres propriétés CSS spécifiques aux transitions : transition-
timing-function, transition-delay
50
 Permet de définir quelles propriétés seront affectées par les transitions.
Nouveautés avec CSS3
Transition-property
valeur Explication
all (valeur par défaut) toutes les propriétés
animables seront animés
property Le nom d’une propriété parmi celles-ci
none Aucune propriété ne sera animé
 Cette propriété permet de préciser la durée de la transition (par défaut elle
vaut 0).
Transition-duration
Exemple
51
Nouveautés avec CSS3
 Pour calculer les valeurs intermédiaires, le navigateur procède à une
interpolation. La fonction calculant la valeur de cette interpolation
influence directement la fluidité de l'animation.
Transition-timing-function
 Certaines animations sont plus
rapides sur le début et ralentissent
sur la fin, d'autres sont constantes
dans leur vitesse (linéaires).
 ease : Rapide sur le début et ralenti sur la fin.
 linear : La vitesse est constante sur toute la durée de
l'animation.
 ease-in : Lent sur le début et accélère de plus en plus
vers la fin.
 ease-out : Rapide sur le début et décèlere sur la fin.
 ease-in-out : Le départ et la fin sont lents.
 Les fonctions prédéfinies sont les suivantes :
52
Nouveautés avec CSS3
 La transition commence, par défaut, dès que la propriété est changée
suite à l'événement. La propriété transition-delay permet d'adapter ce
comportement en retardant ou en avançant le début de la transition.
Transition-delay
La notation raccourcie transition
 Il existe une notation raccourcie
pour déclarer les transitions. La
syntaxe est la suivante :
 Il est possible de préciser plusieurs transitions à l'aide de la propriété en
séparant les déclarations par des virgules
53
DEMO
54
 Le CSS3 présente un nouveau module connu, à juste titre, en tant que
mise en page en multi-colonnes. Il permet de spécifier en combien de
colonnes le texte doit être divisé et comment celles-ci doivent apparaître.
Les multiples colonnes
 column-count : Nombre de colonnes
 column-width : Largeur de chaque colonne
 column-gap : l’espace entre chaque colonne
 column-rule : une bordure entre chaque d’elles
 Il y a quatre propriétés qui se rapportent à la mise en page de multiples
colonnes en CSS3, permettant de définir :
 Actuellement, un préfixe propre au navigateur est également nécessaire
pour définir comment il doit afficher la propriété.
 Il faut savoir qu’un générateur de
multi-colonnes performant existe qui
vous simplifiera encore la tâche.
Nouveautés avec CSS3
55
Exemple
Nouveautés avec CSS3
56
Les sélecteurs CSS3
Les sélecteurs d’attributs
 Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr"
commence exactement par la valeur "stringValue".
 Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr"
finit exactement par la valeur "stringValue".
 Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr"
comporte au moins une fois la valeur "stringValue".
[attr^="stringValue"]
[attr$="stringValue"]
[attr*="stringValue"]
Exemple
57
Les sélecteurs CSS3
Le combinateur d’adjacence directe
 Permet d’ajouter un style à tous les éléments qui suivent un élément
particulier.
Exemple
58
Les sélecteurs CSS3
 :nth-child(expression : Ce sélecteur permet de cibler tous les éléments
en se basant sur leur position dans la liste des enfants de leur parent.
Exemple
Les pseudo-classes
 expression peut être un nombre, une expression numérique ou un mot clé
tel que "odd" ou "even".
 Je vous invite également à regarder :nth-last-child(expression), :last-child,
:first-child, :nth-of-type(expression), :first-of-type, :only-child, …
59
Les sélecteurs CSS3
 Correspond aux éléments cochés d'un formulaire.
 Représente un élement qui n'est pas
représenté par l'expression donnée
en argument.
Les pseudo-classes
 Correspond aux éléments dont le contenu
textuel contient la sous-chaîne donnée en
argument.
:checked
:contains(value)
:empty
 Correspond aux éléments n'ayant pas d'enfant.
:not([expression])
60
Les sélecteurs CSS3
Les pseudo-éléments
::first-line
 Applique la règle de style à la première
ligne du texte de l'élément.
 Applique la règle de style à la première
lettre du texte de l'élément.
 Applique la règle de style à la sélection
du texte de l'élément faite par
l'utilisateur.
 Génère un contenu avant ou après un contenu d'un élément.
::first-letter
::selection
::before et ::after
Les API JavaScript
Web Storage
 Cette fonctionnalité est similaire au cookies de session HTTP mais
permet de sauvegarder les données voulues dans une "base de
données" coté client (c'est a dire au niveau du navigateur).
 La fonctionnalité Storage est une nouveauté HTML5, Ce procédé
va permettre de simplifier le processus de sauvegarde et de
persistance des données.
 On peut enregistrer des données même quand la connexion
internet est coupé (le storage étant dans le navigateur).
 On peut gérer des données par session (si vous avez 2 fenêtres
sur le même site, une action sur le sessionStorage sera répercuté
sur l'autre).
 On peut gérer des données par page (localStorage)
Intérêt du storage
NB : Le storage a pour but de répondre à une des limites des cookies, c'est a
dire leur taille (4 ko pour les cookies et jusqu'à 10Mo pour le storage!). 62
63
Web Storage
63
 L'interface sessionStorge mémorise
les données sur la durée d'une
session de navigation, et sa
portée est limitée à la fenêtre ou
l'onglet actif. Lors de sa fermeture,
les données sont effacées.
 L'interface localStorage mémorise les données sans limite de
durée de vie. Contrairement à sessionStorage, elles ne sont pas
effacées lors de la fermeture d'un onglet ou du navigateur. La portée
de localStorage est de facto plus large : il est possible de l'exploiter à
travers plusieurs onglets ouverts pour le même domaine ou plusieurs
fenêtres ; à partir du moment où il s'agit bien sûr du même
navigateur.
HTML
LocalStorage sessionStorage
 Web Storage met à disposition deux interfaces nommées
sessionStorage et localStorage dont la seule différence concerne la
persistance des données.
64
Web Storage
Demo
65
HTML5 et la Géolocalisation
 Une des nouvelles fonctionnalités intéressantes que HTML 5
fournit est la capacité de géo-localiser l’utilisateur peu importe la
plateforme sur laquelle l’application s’exécute.
 HTML 5 fournit deux fonctionnalités de géo-localisation : soit
obtenir la position actuelle ou effectuer un suivi de la position dans
le cas où la personne se déplace (watch).
Récupérer les coordonnées
66
HTML5 et la Géolocalisation
 La méthode getCurrentPosition() peut prendre un second paramètre le
callback d’erreur. Il sera appelée dans les cas où:
 L’utilisateur refuse l’autorisation d’accès à sa position
 L’emplacement de l’utilisateur n’ait pas pu être déterminé
 Le service de géolocalisation ne réponde pas assez vite
67
HTML5 et la Géolocalisation
 Enfin, le 3ème paramètre de getCurrentPosition() sert à indiquer
certaines options particulières, écrites de la forme suivante :
{nom:valeur, nom:valeur, …}.
On peut ainsi spécifier :
 L’utilisation du GPS pour obtenir des coordonnées beaucoup plus
précises
 Un Timeout si l’on a besoin d’une réponse avant un certain délai
 La durée de vie maximale d’une coordonnée envoyée par
l’utilisateur
68
HTML5 et la Géolocalisation
Suivre les déplacements
 Dans de nombreux cas, on aimerait mettre à jour la position de
l’utilisateur si celui-ci se déplace. Avec HTML5, il suffit simplement de
remplacer la méthode getCurrentPosition() par watchPosition()
 Comme on veut permettre à l’utilisateur d’arrêter le suivi de ses
déplacements, on ajoute un simple lien effectuant un appel à
clearWatch().
69
Demo
HTML5 et la Géolocalisation
Responsive Web Design
70
71
Le site http://gs.statcounter.com/ montre des courbes éloquentes
concernant l'évolution du mobile par rapport aux ordinateurs de
bureau
Evolution de l’usage
Mobile Vs Desktop
72
Vous avez un site ou vous prévoyez d'en faire un ? Vous vous demandez
certainement "Comment je peux faire en sorte que mon site soit
adapté aux mobiles ?".
Site dédié, application ou responsive ?
 Un site dédié : Un projet de site dédié consiste à concevoir deux
ou plusieurs entités différentes selon le dispositif visé : un site
principal, un site pour smartphones, un site pour tablettes, etc
 Une application native : Une application native est un produit
développé spécifiquement dans divers "langages" (iOS, Android,
WindowsPhone) et qui se télécharge et se référence au sein d'un
"Store" (AppStore, Google Play, Windows store).
 Une version Responsive : une notion de conception de sites
web qui permet une consultation optimale facilitant la lecture et la
navigation à travers une large gamme d'appareils (moniteurs
d'ordinateur, smartphones, tablettes, TV, etc.)
73
Un site dédié : une fausse bonne idée ?
Exemple
o Possibilité d'affiner précisément la structure du site et ses contenus
en regard du périphérique utilisé
o Possibilité de cibler et de s'adapter à des fonctionnalités variées
(notamment le touch)
Version mobile
mobile.lemonde.fr
Version ordinateur (Desktop)
•www.lemonde.fr
Avantages
Inconvénients
o Contenu dupliqué
o La maintenance de plusieurs versions de site
74
Web mobile vs native apps
- Simplicité de mise en œuvre
(technologies et langages habituels)
- Directement multiplatefore
(aucune spécifité d’OS)
- Déploiement simplifié
(distribution unique)
- Google peut pointer dessus
(utilisation classique des moteurs)
- Contrôle complet d’un site
(simple modification,suppression,..)
- Un site web peut être applicatif
(intéraction avec des données dynamiques)
- Utilisation des applications
(carnet d’adresse, téléphone)
- Meilleures gestion des périphériques
(caméra, microphone,…)
- Pas de connexion web
(nature embarqué du contenu)
- Réception de données en continu
(de données Push)
- Meilleure immersion d’interface
(ergonomie, performances, densité de pixels)
Comparatifs non exhaustifs
web site
native app
75
 Le Responsive Web design est
une approche de conception Web
qui vise à l'élaboration de sites
offrant une expérience de lecture
et de navigation optimales pour
l'utilisateur quelle que soit sa
gamme d'appareil (téléphones
mobiles, tablettes, ordinateur de
bureau).
Introduction
Qu’est ce que le Responsive Web Design
 Une expérience utilisateur "Responsive" réussie implique un
minimum de redimensionnement (zoom), de recadrage, et de
défilements multidirectionnels de pages.
 Le responsive web design se base sur les Media Queries pour
faire en sorte que le design s'adapte à toutes les résolutions
d'écran.
76
Responsive Web Design
Une version Responsive
 Des coûts inférieurs aux techniques citées précédemment
 Une maintenance de projet facilitée (un seul css, un seul html,..)
 Une mise à jour transparente et un déploiment multi-plateformes
 Prévoir des tests nombreux et variés tout au long du projet
 Il est difficile de contourner les limites ergonomiques des
navigateurs web
s'adapter à tout type d'appareil de
manière transparente pour l'utilisateur
Avantages
Inconvénients
77
Les Medias Queries
 Les Media Queries sont apparues avec les spécifications CSS3.
 Les media queries permettent d'adapter la présentation du contenu
à une large gamme d'appareils sans changer le contenu lui-même.
Présentation
NB : Les media queries fonctionnent sur tous les navigateurs récents, y
compris Internet Explorer à partir de la version 9 (IE9).
o En écrivant la règle directement
dans le fichier .css
Il y a deux façons de les utiliser :
o En chargeant une feuille de
style .css différente en fonction
du péréfirique utilisé
78
o color : gestion de la couleur (en bits/pixel)
o height : hauteur de la zone d'affichage (fenêtre)
o width : largeur de la zone d'affichage (fenêtre)
o device-height : hauteur du périphérique
o device-width : largeur du périphérique
o orientation : orientation du périphérique (portrait ou paysage)
o media : type d'écran de sortie. Voici les plus utilizes :
 screen : pour principalement les moniteurs couleurs
 handheld : périphérique mobile
 print : écran en mode apercu avant impression
 tv : pour les appareils de type télévision
 projection : pour les presentations en projection
 all : convient pour tous les types d'écran
Les règles disponibles
Utilisation des Medias Queries
 Voici les principales règles permettant de construire des Medias Queries :
NB : On peut rajouter le préfixe min- ou max- devant la plupart de ces règles
 La Media Queries est composé de plusieurs éléments : le media et
les propriétés, le tout est lié avec des opérateurs logiques.
Utilisation des Medias Queries
 Le média, c'est lui qui va définit le support affichage pour lequel vont
s'appliquer des propriétés css spécifiques.
 Une propriété, c'est par exemple une largeur de la zone d'affichage,
une orientation du périphérique,... Une propriété s'écrit toujours entre
parenthèse : " (orientation:landscape) "
NB : Les propriétés sont précédées d'un opérateur logique et
peuvent être cumulées.
79
1- Support d'affichage
2- Les propriétés
80
Les opérateurs logiques sont and , only, not , "," (virgule).
Utilisation des Medias Queries
3- Les opérateurs logiques
1- L’opérateur logique « and »
 Lorsque on utilise des requêtes séparées par and, il faut
obligatoirement utiliser un media et une propriété ou une propriete
et une propriété.
NB : Si le media est homis, alors le navigateur considère qui est à all
81
Utilisation des Medias Queries
2- L’opérateur logique « only »
3- L’opérateur logique « not »
 Les anciens navigateurs, notamment IE6, IE7 et IE8, ne connaissent
pas les media queries mais sont capables d'interpréter le début de la
règle (ils savent lire @media screen par exemple). Ils vont donc lire les
propriétés CSS qui suivent même s'ils ne sont pas concernés par la
règle ! Pour éviter cela, une astuce consiste à utiliser le mot-
clé only que ces vieilles versions ne connaissent pas :
« @media only screen » ne provoquera pas de bug sur les vieux
navigateurs.
 L'utilisation de not inverse les conditions.
Si la requête renvoi vrai (true) alors je n'interprète pas ce qui est
entre accolade ("{}"), Si la requête renvoi faux (false) alors
j'interprète ce qui est entre accolade ("{}")
82
4- L’opérateur logique « virgule »
 Lorsque vous utilisez des requêtes séparées par des virgules,
alors chaque requête entre les virgules est analysée
individuellement et si une des requêtes est valide alors j'interprète
ce qui est entre accolade ("{}")
 Les périphériques mobiles ne dépassant pas 480 px de large, on pourra
viser uniquement les navigateurs mobiles avec cette media query :
Exemple de Medias Queries pour cibler les smartphones
Utilisation des Medias Queries
83
Mobile first
« Prendre en compte les contraintes du mobile pour se
concentrer sur l’essentiel du service que nous concevons. »
 Une approche Mobile First consiste à répondre à de nombreuses
contraintes et donc faire des choix pour se centrer sur l’essentiel.
 Cette approche incite les
webdesigners à commencer par
proposer la version mobile et par
la suite developer la version
desktop. Ainsi, les navigateurs
mobiles, qui sont moins puissants,
récupèreront les règles CSS
destinées au mobile et ignoreront
les autres destinées au desktop.
 Mobile First est une approche qui a été proposée par Luke
Wroblewski en 2011 dans son livre Mobile First
Adobe a développé une application incontournable « Edget Inspect cc» qui
permet d’afficher , en temps réel, l’ensemble de modifications apportés sur une
page web sur différents terminaux mobiles.
https://creative.adobe.com/fr/products/inspect
1- Télécharger Edge Inspect sur votre ordinateur
2- Installer l’extension pour navigateur Google Chrome
3- Installer le client mobile sur vos appareils
Adobe Edge Inspect cc
Installation :
Pour plus de détail :
Comment tester son site sur différents
terminaux mobiles
85
http://mediaqueri.es/
http://ucsd.edu/
http://www.arrowfinco.com/
Demo
http://mediaqueri.es/
Demo
86
http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
Parts de marché des navigateurs web
Browser Statistics
Différences entre navigateurs
Comprendre les différences entre navigateurs
 Des sites comme normansblog.de et caniuse.com tiennent notamment à
jour une liste des fonctionnalités HTML et CSS prises en charge par les
différentes versions de chaque navigateur
 Il existe sous Windows un
programme appelé IETester. Il
permet de vérifier le rendu de son
site sous différentes versions
d'Internet Explorer
normansblog.decaniuse.com
88
89
Questions
2ème Session
Offline Web Application
Workers et Messaging
WebSocket
SVG
Grille fixe
Transformation 3D
Canvas
Grille fluide
Drag’n’Drop
Timers
Web SQL Database
WAI-ARIA
Initializr
modernizr

Contenu connexe

Tendances

Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
Cours développement côté serveur
Cours développement côté serveurCours développement côté serveur
Cours développement côté serveur
Houda TOUKABRI
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2
Faycel Chaoua
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
ENSET, Université Hassan II Casablanca
 
Introduction au web cours.pdf
Introduction au web cours.pdfIntroduction au web cours.pdf
Introduction au web cours.pdf
Elomyakobi
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
Abdoulaye Dieng
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
ENSET, Université Hassan II Casablanca
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Langage HTML
Langage HTMLLangage HTML
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menus
Lilia Sfaxi
 
Programmation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulationProgrammation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulation
ECAM Brussels Engineering School
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
ENSET, Université Hassan II Casablanca
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Olivier Le Goaër
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Cours développement côté serveur
Cours développement côté serveurCours développement côté serveur
Cours développement côté serveur
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Introduction au web cours.pdf
Introduction au web cours.pdfIntroduction au web cours.pdf
Introduction au web cours.pdf
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menus
 
Programmation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulationProgrammation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulation
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 

En vedette

Cours BIA des 03 et 06 novembre 2014
Cours BIA des 03 et 06 novembre 2014Cours BIA des 03 et 06 novembre 2014
Cours BIA des 03 et 06 novembre 2014
WaltAirFormations
 
Aviation
AviationAviation
Aviation
alexartiste
 
Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...
Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...
Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...
Softeam agency
 
Final com de crise dossier air france2
Final com de crise dossier air france2Final com de crise dossier air france2
Final com de crise dossier air france2Alice Baron
 
Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)
Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)
Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)
Softeam agency
 
Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5
Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5
Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5
Stéphane Salmons
 
Cartes OACI
Cartes OACICartes OACI
Cartes OACI
Bordeaux Paramoteur
 
Vintage Aviation - Avions D'Heir et D'Aujourd' Hui
Vintage Aviation - Avions D'Heir et D'Aujourd' HuiVintage Aviation - Avions D'Heir et D'Aujourd' Hui
Vintage Aviation - Avions D'Heir et D'Aujourd' Huihalffast
 
La météo du pilote VFR
La météo du pilote VFRLa météo du pilote VFR
La météo du pilote VFRthomas69290
 
com de crise dossier air france
com de crise dossier air francecom de crise dossier air france
com de crise dossier air france
Alice Baron
 
Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)
Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)
Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)
Softeam agency
 
Formation FI(A) : Le lâché (Briefing long AéroPyrénées)
Formation FI(A) : Le lâché (Briefing long AéroPyrénées)Formation FI(A) : Le lâché (Briefing long AéroPyrénées)
Formation FI(A) : Le lâché (Briefing long AéroPyrénées)
Softeam agency
 
Ppt edf (version finale)
Ppt edf (version finale)Ppt edf (version finale)
Ppt edf (version finale)William Walle
 
Mémo Pilotage PPL(A) DR400 1.8
Mémo Pilotage PPL(A) DR400 1.8Mémo Pilotage PPL(A) DR400 1.8
Mémo Pilotage PPL(A) DR400 1.8
Stéphane Salmons
 

En vedette (17)

Cours BIA des 03 et 06 novembre 2014
Cours BIA des 03 et 06 novembre 2014Cours BIA des 03 et 06 novembre 2014
Cours BIA des 03 et 06 novembre 2014
 
Aviation
AviationAviation
Aviation
 
Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...
Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...
Formation FI(A) : Virages en palier, montée et descente. Symétrie du vol. (Br...
 
Final com de crise dossier air france2
Final com de crise dossier air france2Final com de crise dossier air france2
Final com de crise dossier air france2
 
Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)
Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)
Formation FI(A) : Les règles d'altimétrie (Exposé AéroPyrénées)
 
Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5
Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5
Aviation-MémoPPLA-PilotagePratique-dr400-v0.9.5
 
Vues D Ulm Gp
Vues D Ulm GpVues D Ulm Gp
Vues D Ulm Gp
 
Cartes OACI
Cartes OACICartes OACI
Cartes OACI
 
Vintage Aviation - Avions D'Heir et D'Aujourd' Hui
Vintage Aviation - Avions D'Heir et D'Aujourd' HuiVintage Aviation - Avions D'Heir et D'Aujourd' Hui
Vintage Aviation - Avions D'Heir et D'Aujourd' Hui
 
La météo du pilote VFR
La météo du pilote VFRLa météo du pilote VFR
La météo du pilote VFR
 
com de crise dossier air france
com de crise dossier air francecom de crise dossier air france
com de crise dossier air france
 
Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)
Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)
Formation FI(A) : Le calcul mental (Exposé AéroPyrénées)
 
Descriptiongazaile
DescriptiongazaileDescriptiongazaile
Descriptiongazaile
 
Formation FI(A) : Le lâché (Briefing long AéroPyrénées)
Formation FI(A) : Le lâché (Briefing long AéroPyrénées)Formation FI(A) : Le lâché (Briefing long AéroPyrénées)
Formation FI(A) : Le lâché (Briefing long AéroPyrénées)
 
Avion arabe
Avion arabeAvion arabe
Avion arabe
 
Ppt edf (version finale)
Ppt edf (version finale)Ppt edf (version finale)
Ppt edf (version finale)
 
Mémo Pilotage PPL(A) DR400 1.8
Mémo Pilotage PPL(A) DR400 1.8Mémo Pilotage PPL(A) DR400 1.8
Mémo Pilotage PPL(A) DR400 1.8
 

Similaire à Formation html5 css3 java script

Cours html5
Cours html5Cours html5
Cours html5
Abdelmonem NAAMANE
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
Hafid Denguir
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
mdallamohamed
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Html
HtmlHtml
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
Fnot
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
4gnzggpfdw
 
Formation html3 css3
Formation html3 css3Formation html3 css3
Formation html3 css3
Thierry Gayet
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013
gdgyaounde
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
BNSA - Aquitaine
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
BrahimKarimi
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
IrinaTsimpilova1
 

Similaire à Formation html5 css3 java script (20)

Cours html5
Cours html5Cours html5
Cours html5
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
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.ppt
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Html
HtmlHtml
Html
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Présentation WPF
Présentation  WPFPrésentation  WPF
Présentation WPF
 
Formulaires
FormulairesFormulaires
Formulaires
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Formation html3 css3
Formation html3 css3Formation html3 css3
Formation html3 css3
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 

Plus de Arrow Group

Techday Arrow Group: Java 8
Techday Arrow Group: Java 8Techday Arrow Group: Java 8
Techday Arrow Group: Java 8
Arrow Group
 
Techday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big DataTechday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big Data
Arrow Group
 
Arrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'AssuranceArrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group
 
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3DTechday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Arrow Group
 
Advanced html5
Advanced html5Advanced html5
Advanced html5
Arrow Group
 
Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group
 
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Group
 

Plus de Arrow Group (7)

Techday Arrow Group: Java 8
Techday Arrow Group: Java 8Techday Arrow Group: Java 8
Techday Arrow Group: Java 8
 
Techday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big DataTechday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big Data
 
Arrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'AssuranceArrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
 
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3DTechday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3D
 
Advanced html5
Advanced html5Advanced html5
Advanced html5
 
Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015
 
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
 

Dernier

MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
AlbertSmithTambwe
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 

Dernier (9)

MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 

Formation html5 css3 java script

  • 1. © Tous les droits sont résérvés Présenté Par : Mohamed ELLOUZE
  • 2. 22 I- Introduction II- Les bases de HTML5 III- Travailler en HTML5 avec les nouvelles balises et propriétés IV- La mise en forme avec CSS3 V- Les nouveaux API du HTML5 VI- Responsive Web Design VII- Conclusion Sommaire
  • 4. HTML5 - Structure de base Structure de base d’une page HTML5  Pour XHTML 1.0, il fallait écrire : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">  Avec HTML 5, il suffit de mettre une balise doctype courte <!DOCTYPE html>.  Utiliser le site http://validator.nu pour valider le contenu de votre page web 4
  • 5.  Les éléments de section (section, article, nav, aside, header, footer) possèdent une valeur sémantique particulière contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre.  Plusieurs balises ont été introduites avec HTML5 : <header> : en-tête <footer> : pied de page <nav> : liens principaux de navigation <section> : section de page <aside> : informations complémentaires <article> : article indépendant. Structure et sémantique  Pour définir ses nouvelles balises, des statistiques ont été élaborées sur les attributs id les plus fréquemment attribués aux grands découpages de pages HTML. http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html 5
  • 6. 6 Structure et sémantique Exemple d’utilisation des nouvelles balises HTML5
  • 7. 7  Une technique alternative consiste à déclarer ces éléments au préalable en JavaScript. Un script (nommé html5shim ou html5shiv) est prévu à cet effet et mis à disposition à cette adresse :  Pour les versions antérieures à Internet Explorer 9, ces nouveaux éléments ne sont pas reconnus par l'analyseur syntaxique. Étant muni d'un commentaire conditionnel, il ne sera chargé que pour ces versions spécifiques (Internet Explorer 6 à 8 inclus). Structure et sémantique Un cas particulier : Internet Explorer <9
  • 9. 9 Nouveautés avec HTML5 La balise <details> : La balise <mark>:  La balise <mark> est employée pour mettre en avant une partie d'un contenu  La balise <details> définit les détails supplémentaires que l’utilisateur peut afficher ou masquer à la demande.
  • 10. 10 La balise <figure> : Nouveautés avec HTML5  L'élément <figure> s'utilise avec l'élément <figcaption> pour définir des illustrations, des diagrammes, des schémas, des tableaux, … La balise <time> :  L’information n’attends pas et Google indexe toujours plus vite … Si vous éditez un blog ou un site dont vous datez les articles, vous aurez surement remarqué que, suite à son indexation dans Google, sous le titre de votre page et juste avant le début de sa description, dans la page des résultats, apparait la date de publication
  • 11. 11 Nouveautés avec HTML5 L’attribut contenteditable : contentEditable  true : l'élément est éditable.  false : l'élément n'est pas éditable.  inherit : prend la valeur de l'élément parent.  L'attribut contentEditable indique que l'élément est une zone éditable. L'utilisateur peut en changer le contenu et ainsi manipuler le balisage. NB: Pour plus de détail vous pouvez aller sur le site WHATWG
  • 12.  Il faudra penser à vérifier les paramètres du navigateur. 12 Nouveautés avec HTML5 L’attribut spellcheck :  Permet de savoir si l'orthographe de l'élément doit être vérifiée.
  • 14. 14  HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De nouveaux types de champs sont en effet apparus avec cette version. Les Formulaires  T y p e = d a t e  T y p e = c o l o r  T y p e = e m a i l Clavier de saisie email sur iPhone  Sachez que certains navigateurs, comme les navigateurs mobiles sur iPhone et Android, affichent un clavier adapté à la saisie d'e-mail
  • 15. 15 Les Formulaires  Type=url  Type=range Clavier de saisie de numéro de téléphone sur iPhone  Avec le type url, on peut demander à saisir une adresse absolue (commençant généralement par http://) Clavier de saisie d’URL sur iPhone Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider) Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :  min : valeur minimale autorisée.  max : valeur maximale autorisée.  step : c'est le « pas » de déplacement.  Type=tel  Ce champ est dédié à la saisie de numéros de téléphone Le champ s'affichera en général avec des petites flèches pour changer la valeur.  Type=url
  • 16. 16  placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire. C'est une valeur qui s'efface dès que l'utilisateur active le champ de formulaire  Le placeholder n'est qu'un indice supplémentaire, il ne doit pas être indispensable.  L'attribut required permet de rendre obligatoire le remplissage d'un champ et bloquer la validation du formulaire si l'un des champs (concernés par cet attribut) n'a pas été renseigné. Les Formulaires L’attribut Placeholder : L’attribut required : Ou bien
  • 17. 17 Les Formulaires  L’attribut Pattern permet à l'utilisateur d'être informé très rapidement de ses erreurs et de les corriger étape par étape grâce aux indications fournies par les infobulles situées sous chacun des champs invalides. L’attribut Pattern : Ce champ attend une valeur numérique d'au moins 16 chiffres  L'attribut pattern peut être placé uniquement sur l'élément <input> ayant pour types text, search, password, url, tel, email. L’attribut autofocus:  Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec l'attribut autofocus. Dès que le visiteur chargera la page, le curseur se placera dans ce champ. Sélectionner automatiquement un champ
  • 18. 18 Les Formulaires  Mis à « off », « autocomplete » désactive la complétion automatique des champs basée sur l’historique de saisie. L’attribut autocomplete:  N’oubliez pas de verifier les paramètres de votre navigateur  <datalist> est un élément de formulaire permettant de lier une liste de choix à un élément input. Il est voué à fournir des fonctionnalités d'auto- complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche L’élément <datalist> :
  • 19. 19 Les Formulaires http://scriptol.fr/html5/formulaire.php https://miketaylr.com/code/input-type-attr.html  Vérifier la compatibilité de votre navigateur grâce au site miketaylr.com  Tester directement sur scriptol.fr les nouvelles widgets HTML5
  • 21. HTML5 supports Multimedia Introduction  Depuis l'arrivée de Youtube et Dailymotion, il est devenu courant aujourd'hui de regarder des vidéos sur des sites web. Cependant, aucune balise HTML ne permettait jusqu'ici de gérer la vidéo. Il fallait à la place utiliser un plugin, comme Flash.  Mais utiliser un plugin a de nombreux défauts : on ne peut pas toujours contrôler son fonctionnement et en plus il y a parfois des failles de sécurité.  C'est pour cela que « The World Wide Web Consortium (W3C) » a introduit deux nouvelles balises en HTML5 : <video> et <audio> 22
  • 22. HTML5 supports Multimedia Playing Video  L’objectif de W3C d’introduire une nouvelle balise <video> était de pouvoir standardiser la lecture d’une vidéo sur le web sans le recours d’utiliser un Plugin.  Malheureusement, l’objectif a été contourné par l’absence d’accord sur le format vidéo qui devrait être utilisé dans les navigateurs Web.  Chaque navigateur pourra décider du format supporté  Chaque développeur sera donc obligé de préciser le type de format à supporter pour chaque navigateur 23
  • 23. HTML5 supports Multimedia Video Formats  Un Codec gratuit et libre de droits. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.  L'un des plus puissants et des plus utilisés aujourd'hui  Un autre codec gratuit et libre de droits, plus récent. Proposé par Google Ogg/Theora (.ogv extension) : Supporté par : Supporté par : Supporté par : WebM/VP8 (.webm extension) : MPEG-4/H.264 (.mp4 extension) : 23
  • 24. HTML5 supports Multimedia Implémentation de la balise <video>  La balise <video> est utilisée pour lire une vidéo.  L’attribut « controls » permet de fournir des contrôles pour démarrer et arrêter la vidéo, pour afficher et définir l'emplacement du curseur vidéo et pour maximiser et restaurer la taille de la vidéo sur l'écran. 24
  • 25. HTML5 supports Multimedia Configuring the <video> element :  La balise <video> pourra être configurée. Voici la liste des attributs :  autoplay : Indique que la vidéo sera joué dès le chargement  controls : Indique que les boutons de contrôles (pause, play,..) seront affichés  height : Indique la hauteur en pixels de l’élément <video> rendu  loop : Indique que la vidéo sera rejoué dès qu’elle atteint la fin  muted : Indique que l’audio est muet  poster : permet de spécifier l’image à afficher quand la vidéo est en mode arrêt.  preload : spécifie comment la vidéo doit être chargé (auto, metadata,none)  src : spécifie l’URL de la vidéo  width : Indique la largeur en pixels de l’élément <video> rendu 25
  • 26. HTML5 supports Multimedia La balise <source> :  La balise <source> permet de spécifier la source de la vidéo. Au minimum on aura besoin de définir l’attribut « src ».  Il faudra fournir de nombreuses sources afin que le navigateur pourra choisir le codec le plus approprié (ex: Miro Video Converter).  Dans l’exemple ci-dessous, la même vidéo « movie » a été générée avec trois formats différents (avec Firefogg) afin que le film pourra être lu dans n’importe quel navigateur. 26
  • 27. HTML5 supports Multimedia WebVTT (Video Text Tracks) :  Le W3C a mis au point une nouvelle norme, appelée WebVTT (Web Video Text Tracks), qui offre la possibilité d'afficher des sous-titres au niveau de la vidéo. 27 HTML5 Video Caption Maker  Le lecteur vidéo HTML5 a besoin de fichiers de piste correctement construits, ce qui peut être compliqué s’ils sont créés «à la main». La version de démonstration HTML5 Video Caption Maker est un outil simple mais efficace permettant de créer des fichiers au format WebVTT.
  • 28. HTML5 supports Multimedia 28 Gérer d’autres langues :  Tous les navigateurs implémentant la balise <track> pourront supporté le format WebVTT.
  • 29. HTML5 supports Multimedia WebVTT – Mise en Forme: Compatible uniquement pour Chrome, Safari, iOS7 et Opera 16+. 29  vertical: lr | rl  line: XX%  align: start | middle | end  position: XX%  size: XX%
  • 30. HTML5 supports Multimedia Playing Audio :  L’objectif de W3C d’introduire une nouvelle balise <audio> était de pouvoir standardiser la lecture d’une audio sur le web sans le recours d’utiliser un Plugin.  Malheureusement, l’objectif a été contourné par l’absence d’accord sur le format audio qui devrait être utilisé dans les navigateurs Web.  Chaque navigateur pourra décider du format supporté  Chaque développeur sera donc obligé de préciser le type de format à supporter pour chaque navigateur 30
  • 31. HTML5 supports Multimedia Audio – Les différents Formats : 31 MP3  C'est l'un des plus vieux, mais aussi l'un des plus compatibles, ce qui fait qu'il est toujours très utilisé. Supporté par : AAC  Utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème. Supporté par : OGG  Le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre. Supporté par : WAV (format non compressé) : évitez autant que possible de l'utiliser car il est très volumineux.
  • 32. HTML5 supports Multimedia Implémentation de la baslise <audio> :  La balise <audio> est reconnue par tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9). 32  Dans l’exemple ci-dessous, la même audio « kittycat » a été générée avec trois formats différents afin que la chanson pourra être lu dans n’importe quel navigateur.
  • 33. 33
  • 34. 34 La norme Microdata  Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arrivée de HTML5 que la profession et les outils sont suffisamment mûres pour commencer à les exploiter réellement. L’origine : Les microformats  Les microformats sont une manière d'attacher un sens supplémentaire à l'information publiée sur une page web. Ils proposent une syntaxe qui s’apparente à du HTML classique et s’applique bien en dehors de la norme HTML5 puisqu’il est compatible avec HTML4, ou XHTML1.0  Ils utilisent l’attribut class et certaines valeurs bien précises afin qu’il soit interprété comme une donnée bien spécifique.
  • 35. 35 Fraicheur avec HTML5 : Microdata  itemscope : crée un nouvel item  itemtype : couplé à itemscope, il accueille une URL vers la référence du schéma (ex : “http://schema.org/Review”)  itemid : définit un identifiant unique pour l'item  itemprop : indique la nature du contenu  itemref : permet de créer une référence, c'est-à-dire lier un item avec un autre, qui fournirait des informations plus détaillées.  Sortie avec HTML5, Les microdonnées (Microdata en anglais) sont représentées par l’arrivée de nouveaux attributs en HTML5. Il est alors possible de donner la référence du document directement au sein de l’élément porteur de ces informations.  Microdata ajoute 5 attributs utilisables sur la plupart des éléments HTML :  Google, Bing et Yahoo se sont alliés pour créer une nouvelle référence nommée schema.org. Il s’agit d’un site mettant à disposition une listes de vocabulaire pouvant être utilisé au sein des Microdatas. La norme Microdata
  • 36. 36 La norme Microdata Exemple : NB: vous pouvez créer vos Microdata à partir du site : http://schema-creator.org/
  • 38. CSS3
  • 39. Introduction Historique  Le langage CSS a été mis en place au milieu des années 90’ et a connu plusieurs versions depuis. La version qui sert de base au codage actuel, la "2.1" a été officiellement adoptée en 2007 et n’est toujours pas implémentée partout.  CSS3 n’est pas encore adopté partout mais plusieurs navigateurs tirent vers l’avant cette norme de description CSS. Il existe plusieurs sites qui référencent la compatibilité de chaque navigateur avec chaque fonctionnalité. http://fmbip.com/litmus/http://www.normansblog.de/demos /browser-support-checklist-css3/
  • 40. Les moteurs de rendu webkit Trident Geckowebkit Presto  Tous les navigateurs ne font pas appel au même moteur de rendu.
  • 41. Les préfixes  Du faite de la non prise en charge commune par les navigateurs, beaucoup de fabricants de moteur de rendu sont arrivées à l’utilisation des préfixes.  -moz- pour Firefox  -webkit- pour Chrome, Safari, iPhone, Android  -o- pour Opera  -ms- pour Internet Explorer  Seuls les navigateurs modernes, reconnaissent les nouvelles propriété CSS3. Il s'agit d'Internet Explorer 9+, Firefox 4+, Chrome 10+, Safari 5.1+, Opera 10.5+, Opera Mobile 11+.  Pour rendre la déclaration compatible avec de vieilles versions, on devra préfixé plusieurs fois la propriété par :
  • 42. 42 Nouveautés avec CSS3 Box shadow  La déclaration "box-shadow", comme son nom le laisse entendre, permet de mettre une ombre portée à un élément de type block.  Pour des raisons de compatibilité avec les versions antérieurs, on devra déclarer plusieurs fois le box shadow en le précédent de préfixes - moz- et -webkit- décalage horizontal vers la droite décalage vertical vers le bas Étandue du dégradé
  • 43. 43 Nouveautés avec CSS3 Border Radius :  border-radius permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.  Vous pouvez utiliser le site http://border-radius.com/ pour un résultat instantanée de la fonctionnalité border- radius et une génération automatique du code.
  • 44. 44 Nouveautés avec CSS3  De nouvelles propriétés permettent de réaliser et gérer des arrière- plans de teintes dégradées. Il s'agit de linear-gradient pour les dégradés linéaires et radial-gradient pour les dégradés radiaux. Gradient 1- Linear Gradient 2- Radial Gradient  x et/ou y définissent la direction du dégradé. Exemple : "to right" ou "to left bottom"  couleur : le nom, la valeur hexadécimal ou la valeur RGBa  Forme : circle, ellipse  x et/ou y point d'origine du dégradé radial,  couleur : nom, valeur hexadecimal, RGBa
  • 45. 45 Nouveautés avec CSS3 @font-face  Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité.  Obtenir tous les formats nécessaires - Récupérer votre police de caractère (ex:Candlescript.otf sur daFont)  Les navigateurs ou nouveau médias (tablette, smartphone) ne suivent pas les mêmes standards. Pour faire face à tous ceux-ci, il faut pas moins de 4 fichiers (On pourra utiliser le générateur FontSquirrel pour fournir tous les formats nécessaires )  TrueType (Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)  EOT (Internet Explorer 4+)  WOFF (Firefox 3.6+, Internet Explorer 9+, Chrome 5+)  SVG (iPad and iPhone)
  • 46. 46 Nouveautés avec CSS3  Pour des raisons de performance il faudra que l'ordre de déclaration des différents formats soit du plus léger au plus lourd.
  • 47. 47 Nouveautés avec CSS3  L’écriture RGBa introduit la notion de transparence dans les valeurs associées à une couleur. Elle permet de jouer sur les effets d’opacité entre les différentes couches d’éléments HTML. RGBa:  Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity. En effet, opacity s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. Opacity:
  • 48. 48 Nouveautés avec CSS3  La propriété text-shadow permet de créer des ombres sur un texte. Text shadow HSL(A)  La notation HSL (Hue, Saturation, Lightness) un peu moins commune permet d’obtenir les mêmes résultats en jouant sur la teinte, la saturation et la luminosité.
  • 49. 49  Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché (:hover, :focus, :active, ..) Nouveautés avec CSS3 Transition  Les deux propriétés minimales nécessaires pour rendre fonctionnelle une transition en CSS 3 sont transition-property et transition-duration. Il existe d'autres propriétés CSS spécifiques aux transitions : transition- timing-function, transition-delay
  • 50. 50  Permet de définir quelles propriétés seront affectées par les transitions. Nouveautés avec CSS3 Transition-property valeur Explication all (valeur par défaut) toutes les propriétés animables seront animés property Le nom d’une propriété parmi celles-ci none Aucune propriété ne sera animé  Cette propriété permet de préciser la durée de la transition (par défaut elle vaut 0). Transition-duration Exemple
  • 51. 51 Nouveautés avec CSS3  Pour calculer les valeurs intermédiaires, le navigateur procède à une interpolation. La fonction calculant la valeur de cette interpolation influence directement la fluidité de l'animation. Transition-timing-function  Certaines animations sont plus rapides sur le début et ralentissent sur la fin, d'autres sont constantes dans leur vitesse (linéaires).  ease : Rapide sur le début et ralenti sur la fin.  linear : La vitesse est constante sur toute la durée de l'animation.  ease-in : Lent sur le début et accélère de plus en plus vers la fin.  ease-out : Rapide sur le début et décèlere sur la fin.  ease-in-out : Le départ et la fin sont lents.  Les fonctions prédéfinies sont les suivantes :
  • 52. 52 Nouveautés avec CSS3  La transition commence, par défaut, dès que la propriété est changée suite à l'événement. La propriété transition-delay permet d'adapter ce comportement en retardant ou en avançant le début de la transition. Transition-delay La notation raccourcie transition  Il existe une notation raccourcie pour déclarer les transitions. La syntaxe est la suivante :  Il est possible de préciser plusieurs transitions à l'aide de la propriété en séparant les déclarations par des virgules
  • 54. 54  Le CSS3 présente un nouveau module connu, à juste titre, en tant que mise en page en multi-colonnes. Il permet de spécifier en combien de colonnes le texte doit être divisé et comment celles-ci doivent apparaître. Les multiples colonnes  column-count : Nombre de colonnes  column-width : Largeur de chaque colonne  column-gap : l’espace entre chaque colonne  column-rule : une bordure entre chaque d’elles  Il y a quatre propriétés qui se rapportent à la mise en page de multiples colonnes en CSS3, permettant de définir :  Actuellement, un préfixe propre au navigateur est également nécessaire pour définir comment il doit afficher la propriété.  Il faut savoir qu’un générateur de multi-colonnes performant existe qui vous simplifiera encore la tâche. Nouveautés avec CSS3
  • 56. 56 Les sélecteurs CSS3 Les sélecteurs d’attributs  Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" commence exactement par la valeur "stringValue".  Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" finit exactement par la valeur "stringValue".  Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" comporte au moins une fois la valeur "stringValue". [attr^="stringValue"] [attr$="stringValue"] [attr*="stringValue"] Exemple
  • 57. 57 Les sélecteurs CSS3 Le combinateur d’adjacence directe  Permet d’ajouter un style à tous les éléments qui suivent un élément particulier. Exemple
  • 58. 58 Les sélecteurs CSS3  :nth-child(expression : Ce sélecteur permet de cibler tous les éléments en se basant sur leur position dans la liste des enfants de leur parent. Exemple Les pseudo-classes  expression peut être un nombre, une expression numérique ou un mot clé tel que "odd" ou "even".  Je vous invite également à regarder :nth-last-child(expression), :last-child, :first-child, :nth-of-type(expression), :first-of-type, :only-child, …
  • 59. 59 Les sélecteurs CSS3  Correspond aux éléments cochés d'un formulaire.  Représente un élement qui n'est pas représenté par l'expression donnée en argument. Les pseudo-classes  Correspond aux éléments dont le contenu textuel contient la sous-chaîne donnée en argument. :checked :contains(value) :empty  Correspond aux éléments n'ayant pas d'enfant. :not([expression])
  • 60. 60 Les sélecteurs CSS3 Les pseudo-éléments ::first-line  Applique la règle de style à la première ligne du texte de l'élément.  Applique la règle de style à la première lettre du texte de l'élément.  Applique la règle de style à la sélection du texte de l'élément faite par l'utilisateur.  Génère un contenu avant ou après un contenu d'un élément. ::first-letter ::selection ::before et ::after
  • 62. Web Storage  Cette fonctionnalité est similaire au cookies de session HTTP mais permet de sauvegarder les données voulues dans une "base de données" coté client (c'est a dire au niveau du navigateur).  La fonctionnalité Storage est une nouveauté HTML5, Ce procédé va permettre de simplifier le processus de sauvegarde et de persistance des données.  On peut enregistrer des données même quand la connexion internet est coupé (le storage étant dans le navigateur).  On peut gérer des données par session (si vous avez 2 fenêtres sur le même site, une action sur le sessionStorage sera répercuté sur l'autre).  On peut gérer des données par page (localStorage) Intérêt du storage NB : Le storage a pour but de répondre à une des limites des cookies, c'est a dire leur taille (4 ko pour les cookies et jusqu'à 10Mo pour le storage!). 62
  • 63. 63 Web Storage 63  L'interface sessionStorge mémorise les données sur la durée d'une session de navigation, et sa portée est limitée à la fenêtre ou l'onglet actif. Lors de sa fermeture, les données sont effacées.  L'interface localStorage mémorise les données sans limite de durée de vie. Contrairement à sessionStorage, elles ne sont pas effacées lors de la fermeture d'un onglet ou du navigateur. La portée de localStorage est de facto plus large : il est possible de l'exploiter à travers plusieurs onglets ouverts pour le même domaine ou plusieurs fenêtres ; à partir du moment où il s'agit bien sûr du même navigateur. HTML LocalStorage sessionStorage  Web Storage met à disposition deux interfaces nommées sessionStorage et localStorage dont la seule différence concerne la persistance des données.
  • 65. 65 HTML5 et la Géolocalisation  Une des nouvelles fonctionnalités intéressantes que HTML 5 fournit est la capacité de géo-localiser l’utilisateur peu importe la plateforme sur laquelle l’application s’exécute.  HTML 5 fournit deux fonctionnalités de géo-localisation : soit obtenir la position actuelle ou effectuer un suivi de la position dans le cas où la personne se déplace (watch). Récupérer les coordonnées
  • 66. 66 HTML5 et la Géolocalisation  La méthode getCurrentPosition() peut prendre un second paramètre le callback d’erreur. Il sera appelée dans les cas où:  L’utilisateur refuse l’autorisation d’accès à sa position  L’emplacement de l’utilisateur n’ait pas pu être déterminé  Le service de géolocalisation ne réponde pas assez vite
  • 67. 67 HTML5 et la Géolocalisation  Enfin, le 3ème paramètre de getCurrentPosition() sert à indiquer certaines options particulières, écrites de la forme suivante : {nom:valeur, nom:valeur, …}. On peut ainsi spécifier :  L’utilisation du GPS pour obtenir des coordonnées beaucoup plus précises  Un Timeout si l’on a besoin d’une réponse avant un certain délai  La durée de vie maximale d’une coordonnée envoyée par l’utilisateur
  • 68. 68 HTML5 et la Géolocalisation Suivre les déplacements  Dans de nombreux cas, on aimerait mettre à jour la position de l’utilisateur si celui-ci se déplace. Avec HTML5, il suffit simplement de remplacer la méthode getCurrentPosition() par watchPosition()  Comme on veut permettre à l’utilisateur d’arrêter le suivi de ses déplacements, on ajoute un simple lien effectuant un appel à clearWatch().
  • 69. 69 Demo HTML5 et la Géolocalisation
  • 71. 71 Le site http://gs.statcounter.com/ montre des courbes éloquentes concernant l'évolution du mobile par rapport aux ordinateurs de bureau Evolution de l’usage Mobile Vs Desktop
  • 72. 72 Vous avez un site ou vous prévoyez d'en faire un ? Vous vous demandez certainement "Comment je peux faire en sorte que mon site soit adapté aux mobiles ?". Site dédié, application ou responsive ?  Un site dédié : Un projet de site dédié consiste à concevoir deux ou plusieurs entités différentes selon le dispositif visé : un site principal, un site pour smartphones, un site pour tablettes, etc  Une application native : Une application native est un produit développé spécifiquement dans divers "langages" (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).  Une version Responsive : une notion de conception de sites web qui permet une consultation optimale facilitant la lecture et la navigation à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphones, tablettes, TV, etc.)
  • 73. 73 Un site dédié : une fausse bonne idée ? Exemple o Possibilité d'affiner précisément la structure du site et ses contenus en regard du périphérique utilisé o Possibilité de cibler et de s'adapter à des fonctionnalités variées (notamment le touch) Version mobile mobile.lemonde.fr Version ordinateur (Desktop) •www.lemonde.fr Avantages Inconvénients o Contenu dupliqué o La maintenance de plusieurs versions de site
  • 74. 74 Web mobile vs native apps - Simplicité de mise en œuvre (technologies et langages habituels) - Directement multiplatefore (aucune spécifité d’OS) - Déploiement simplifié (distribution unique) - Google peut pointer dessus (utilisation classique des moteurs) - Contrôle complet d’un site (simple modification,suppression,..) - Un site web peut être applicatif (intéraction avec des données dynamiques) - Utilisation des applications (carnet d’adresse, téléphone) - Meilleures gestion des périphériques (caméra, microphone,…) - Pas de connexion web (nature embarqué du contenu) - Réception de données en continu (de données Push) - Meilleure immersion d’interface (ergonomie, performances, densité de pixels) Comparatifs non exhaustifs web site native app
  • 75. 75  Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, ordinateur de bureau). Introduction Qu’est ce que le Responsive Web Design  Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.  Le responsive web design se base sur les Media Queries pour faire en sorte que le design s'adapte à toutes les résolutions d'écran.
  • 76. 76 Responsive Web Design Une version Responsive  Des coûts inférieurs aux techniques citées précédemment  Une maintenance de projet facilitée (un seul css, un seul html,..)  Une mise à jour transparente et un déploiment multi-plateformes  Prévoir des tests nombreux et variés tout au long du projet  Il est difficile de contourner les limites ergonomiques des navigateurs web s'adapter à tout type d'appareil de manière transparente pour l'utilisateur Avantages Inconvénients
  • 77. 77 Les Medias Queries  Les Media Queries sont apparues avec les spécifications CSS3.  Les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même. Présentation NB : Les media queries fonctionnent sur tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9). o En écrivant la règle directement dans le fichier .css Il y a deux façons de les utiliser : o En chargeant une feuille de style .css différente en fonction du péréfirique utilisé
  • 78. 78 o color : gestion de la couleur (en bits/pixel) o height : hauteur de la zone d'affichage (fenêtre) o width : largeur de la zone d'affichage (fenêtre) o device-height : hauteur du périphérique o device-width : largeur du périphérique o orientation : orientation du périphérique (portrait ou paysage) o media : type d'écran de sortie. Voici les plus utilizes :  screen : pour principalement les moniteurs couleurs  handheld : périphérique mobile  print : écran en mode apercu avant impression  tv : pour les appareils de type télévision  projection : pour les presentations en projection  all : convient pour tous les types d'écran Les règles disponibles Utilisation des Medias Queries  Voici les principales règles permettant de construire des Medias Queries : NB : On peut rajouter le préfixe min- ou max- devant la plupart de ces règles
  • 79.  La Media Queries est composé de plusieurs éléments : le media et les propriétés, le tout est lié avec des opérateurs logiques. Utilisation des Medias Queries  Le média, c'est lui qui va définit le support affichage pour lequel vont s'appliquer des propriétés css spécifiques.  Une propriété, c'est par exemple une largeur de la zone d'affichage, une orientation du périphérique,... Une propriété s'écrit toujours entre parenthèse : " (orientation:landscape) " NB : Les propriétés sont précédées d'un opérateur logique et peuvent être cumulées. 79 1- Support d'affichage 2- Les propriétés
  • 80. 80 Les opérateurs logiques sont and , only, not , "," (virgule). Utilisation des Medias Queries 3- Les opérateurs logiques 1- L’opérateur logique « and »  Lorsque on utilise des requêtes séparées par and, il faut obligatoirement utiliser un media et une propriété ou une propriete et une propriété. NB : Si le media est homis, alors le navigateur considère qui est à all
  • 81. 81 Utilisation des Medias Queries 2- L’opérateur logique « only » 3- L’opérateur logique « not »  Les anciens navigateurs, notamment IE6, IE7 et IE8, ne connaissent pas les media queries mais sont capables d'interpréter le début de la règle (ils savent lire @media screen par exemple). Ils vont donc lire les propriétés CSS qui suivent même s'ils ne sont pas concernés par la règle ! Pour éviter cela, une astuce consiste à utiliser le mot- clé only que ces vieilles versions ne connaissent pas : « @media only screen » ne provoquera pas de bug sur les vieux navigateurs.  L'utilisation de not inverse les conditions. Si la requête renvoi vrai (true) alors je n'interprète pas ce qui est entre accolade ("{}"), Si la requête renvoi faux (false) alors j'interprète ce qui est entre accolade ("{}")
  • 82. 82 4- L’opérateur logique « virgule »  Lorsque vous utilisez des requêtes séparées par des virgules, alors chaque requête entre les virgules est analysée individuellement et si une des requêtes est valide alors j'interprète ce qui est entre accolade ("{}")  Les périphériques mobiles ne dépassant pas 480 px de large, on pourra viser uniquement les navigateurs mobiles avec cette media query : Exemple de Medias Queries pour cibler les smartphones Utilisation des Medias Queries
  • 83. 83 Mobile first « Prendre en compte les contraintes du mobile pour se concentrer sur l’essentiel du service que nous concevons. »  Une approche Mobile First consiste à répondre à de nombreuses contraintes et donc faire des choix pour se centrer sur l’essentiel.  Cette approche incite les webdesigners à commencer par proposer la version mobile et par la suite developer la version desktop. Ainsi, les navigateurs mobiles, qui sont moins puissants, récupèreront les règles CSS destinées au mobile et ignoreront les autres destinées au desktop.  Mobile First est une approche qui a été proposée par Luke Wroblewski en 2011 dans son livre Mobile First
  • 84. Adobe a développé une application incontournable « Edget Inspect cc» qui permet d’afficher , en temps réel, l’ensemble de modifications apportés sur une page web sur différents terminaux mobiles. https://creative.adobe.com/fr/products/inspect 1- Télécharger Edge Inspect sur votre ordinateur 2- Installer l’extension pour navigateur Google Chrome 3- Installer le client mobile sur vos appareils Adobe Edge Inspect cc Installation : Pour plus de détail : Comment tester son site sur différents terminaux mobiles
  • 87. Différences entre navigateurs Comprendre les différences entre navigateurs  Des sites comme normansblog.de et caniuse.com tiennent notamment à jour une liste des fonctionnalités HTML et CSS prises en charge par les différentes versions de chaque navigateur  Il existe sous Windows un programme appelé IETester. Il permet de vérifier le rendu de son site sous différentes versions d'Internet Explorer normansblog.decaniuse.com
  • 88. 88
  • 90. 2ème Session Offline Web Application Workers et Messaging WebSocket SVG Grille fixe Transformation 3D Canvas Grille fluide Drag’n’Drop Timers Web SQL Database WAI-ARIA Initializr modernizr

Notes de l'éditeur

  1. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  2. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  3. Facilitez l’indexation de la date de publication en encadrant celle-ci des balises TIME
  4. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  5. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  6. The World Wide Web Consortium (W3C) introduced the video element for the purpose of playing videos and movies. The intent was to offer a standard way to play video on the web without requiring plug-ins. This goal has been circumvented by lack of agreement about which video formats should be supported in web browsers. Currently, the W3C does not specify which video formats browsers should support. Browsers can decide which format they want to support, so the developer must provide formats that are available across most browsers.
  7. In this example, the <video> element size is set to 320 pixels by 240 pixels. The controls attribute provides controls to start and stop the video, to view and set the video cursor loca-tion, and to maximize and restore the video size on the screen. The <video> element contains a <source> element that describes the video source as .mp4. The <video> element also con-tains text that is displayed on browsers that don’t support the <video> element.
  8. autoplay Specifies that video starts playing immediately. ■ ■controls Specifies that the play/pause button, video cursor, and maximize be displayed. ■ ■height Indicates the height in pixels of the rendered <video> element. ■ ■loop Specifies that the video will repeat when it has reached the end of its stream. ■ ■muted Specifies that the audio is silent. ■ ■poster Specifies that the URL of an image is to be shown when the video is not playing. ■ ■preload Specifies how the video should be loaded when the page loads. It can be set to auto, metadata, or none. The auto setting starts loading the video when the page loads. The metadata setting loads only the metadata, and the none setting doesn’t load anything. ■ ■src Specifies the URL of the video. ■ ■width Indicates the width in pixels of the rendered <video> element.
  9. When the developer provides multiple formats, the browser can choose the format it can use to display the video, which provides the most compatible experience to users. The position of the <source> elements is important because a browser starts looking at the top and stops when it finds a file that it can display. The recommended order is to start with the .webm file because it’s royalty free and open source, and it’s becoming more popular. Next, use the .ogv file because it is also royalty free, but the quality is not as good as the .webm file. Finally, use the .mp4 format for browsers that don’t support .webm or .ogv files. The type attribute includes both the MIME type and the codecs. Although the type attribute isn’t usually required, the browser can use it to help choose the proper video file to display.
  10. Accessing tracks The W3C has developed a new standard, called WebVTT (Web Video Text Tracks), that provides the ability to display captions on the video; all browsers implementing the <track> element will support it. The WebVTT file format is simple and easily readable by browsers and developers. It’s based on a popular subtitling format called SubRip Text (SRT). If you already have your content in SRT format, converters are available on the web to convert to the WebVTT format. A less-used standard called Timed Text Markup Language (TTML) is an XML-based format that is more verbose than WebVTT. TTML is outside the scope of this book.
  11. The W3C introduced the <audio> element for the purpose of playing music and sounds. Like the introduction of the <video> element, the intent was to offer a standard way to play multi- media on the web without requiring plug-ins.
  12. Audio formats : The W3C does not specify which audio formats browsers should support, but the battle over formats is not as competitive as for the video formats. The W3C is trying to decide on an audio format that can be specified for all browsers to support as a minimum. There are many audio formats, but the following are the most common. ■■ Ogg/Vorbis (.oga, .ogg extention) This format appears to be royalty free without patent issues. It’s supported by the Firefox, Chrome, and Opera browsers and has a MIME type of audio/ogg and a codec of vorbis. ■■ MP3 (.mp3 extension) This format is pervasive because it’s a common format for much of the music media. It’s supported by the Safari, Chrome, and Internet Explorer browsers and has a MIME type of audio/mpeg and a codec of .mp3. ■■ MP4 (.mp4, .mp4a, .aac extension) This format is primarily used by Apple. In spite of this format’s high quality AAC or AAC+ codec, the MP3 format is still more preva- lent. This format is supported on the Internet Explorer and Safari browsers and has a MIME type of audio/mp4; mp4a.40.5 is the codec value. ■■ WAV (.wav extension) This format is also pervasive and is usually used for audio fragments, or snippets, such as ring tones and sounds. It’s supported by the Firefox, Chrome, and Opera browsers and has a MIME type of audio/wav and a codec of 1 (the number one).
  13. The <audio> element is used to play audio. The following is a sample implementation of the <audio> element. <audio controls="controls"> <source src="song.mp3" /> You need a browser that supports HTML5! </audio> In this example, the <audio> element is configured with the controls attribute, which pro- vides controls to start and stop the audio, to view and set the audio cursor location, and to set the volume. The <audio> element contains a <source> element that describes the audio source as .mp3. The <audio> element also contains text that is displayed on browsers that don’t support the <audio> element. One characteristic of audio is that the developer might play multiple audio files at the same time. Although this is common in games, most browsers can’t handle playing multiple audio files at the same time. Setting the source The <source> element specifies an audio source. At a minimum, you need to set the src attribute to the URL of the audio. You should also include more than one <source> element to provide many sources so the browser can choose the most appropriate audio codec. In the following example, the same sound has been rendered for each of the three most popular formats. <audio id="audio" controls="controls"> <source src="media/kittycat.oga" type='audio/ogg; codecs="vorbis"' /> <source src="media/kittycat.wav" type='audio/wav; codecs="1"' /> <source src="media/kittycat.mp3" type='audio/mpeg; codecs="mp3"' /> </audio> By providing multiple formats, the browser can choose the format that displays the audio, which provides the most compatible experience to users. As mentioned earlier, the position of the <source> elements is important because a browser starts looking at the top and stops when it finds a file it can display. The recommended order is to start with the .oga file because it’s royalty free, open source, and becoming more popular for the web. Next, use the .wav file, because it is also quite popular. Finally, use the .mp3 for browsers that don’t support .oga and .wav files. The type attribute includes both the MIME type and the codecs. Although the type attribute isn’t usually required, the browser can use it to help choose the proper audio file to display.
  14. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  15. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  16. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  17. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  18. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).
  19. HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01).