Formation html5 css3 java script

© 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 - 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
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).
Un cas particulier : Internet Explorer <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
La balise <figure> :
 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
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
L’attribut spellcheck :
 Permet de savoir si l'orthographe de l'élément doit être vérifiée.

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

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

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

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

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

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

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

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
Gérer d’autres langues :
 Tous les navigateurs implémentant la balise <track> pourront
supporté le format WebVTT.

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%

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

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.

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.

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/

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
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
 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
@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
 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
 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
 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, ..)
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.
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
 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
 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
 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.

55
Exemple

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".
finit exactement par la valeur "stringValue".
comporte au moins une fois la valeur "stringValue".
[attr^="stringValue"]
[attr$="stringValue"]
[attr*="stringValue"]
Exemple

57
Le combinateur d’adjacence directe
 Permet d’ajouter un style à tous les éléments qui suivent un élément
particulier.
Exemple

58
 :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
 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 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

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.

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
 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
 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
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

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.
 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).
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
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

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

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

Formation html5 css3 java script

Contenu connexe

Tendances (20)

En vedette (17)

Similaire à Formation html5 css3 java script (20)

Plus de Arrow Group (7)

Formation html5 css3 java script

Notes de l'éditeur