Intégration web MMI

ITW_S3 MMI
INTÉGRATION WEB
NIVEAU AVANCÉ ?
1

PIERRE VERT
INTÉGRATEUR FRONTEND // BACKEND
SERVICE DE DONNÉES // OBSERVATOIRE MIDI-PYRENÉES 
CHARGÉ D'ENSEIGNEMENT DUT MMI TARBES-CASTRES 
 
PIERRE.VERT@IUT-TARBES.FR
2

AVANT TOUTES CHOSES
où en êtes-vous  
avec le CSS et l’HTML ?
3

PARLONS LA MÊME LANGUE…
PETIT RAPPEL DE BARÈME…
le fond, la forme ?
display ?
W3C ?
ﬂux ?
Modèle de boite ?
Accessibilité ?
Positionning ?
Responsive ?
Fusion des marges ?

LE FLUX… VOUS Y METTREZ LES DOIGTS

ACCESSIBILITÉ, NORME WCAG (ne pas confondre 
avec le SWAG)

AU MENU
Verrines d’ HTML5
RAPPEL HISTORIQUE
LES PRINCIPAUX ÉLÉMENTS
9

AU MENU
CaSSolette de CSS 
et ses bonnes pratiques
CSS3 IS GOOD FOR YOU !
Reset
Positionning
Display
--preﬁx
Unités
Trucs pour faire joli
SELECTEURS
le FLUX
10

AU MENU
Bisque de Responsive,
accompagné de design ﬂuide
CSS3 IS GOOD FOR YOU !
Débordements
Flexbox
Mobile ﬁrst
Unités
Viewport
MEDIAQUERIES
SVG
11

AU MENU
Outils
EDITEURS // FRAMEWORKS // ICONES
SITES INCONTOURNABLES
12

HTML5
Principaux éléments
14

<!doctype html>

<html>

<head>

<title></title>

<meta />

<link />

</head>

<body>

…

</body>

</html>
HTML5
STRUCTURE DE BASE… <!doctype html> indispensable !
15

HTML5
ELEMENTS SECTIONNANTS
<header> <nav> <main>
<section> <article> <aside>
<footer>
16

HTML5
ELEMENTS GÉNÉRIQUES
<div> <span>
17
gare à la
« divite »

HTML5
SQUELETTE DE BASE…
header

18
nav
footer

mainsection
nav article
article
aside
aside
section article
article
aside
aside

plusieurs possibilités avec les éléments sectionnants…
<header>
<section>
<article>
<aside>
<footer>
19
<header>
p
<aside>
<footer>
<article>
<header>
<section>
<header>
<footer>
p
<section>
ﬁgure
p
<nav>

HTML5
ILLUSTRATIONS / IMAGES
<figure>

<img/>

<figcaption>Légende de l’image<figcaption>

</figure>
20

HTML5
MEDIAS
<audio>

<source/> source 1

<source/> source n

</audio>
<video>

<source/> source 1

<source/> source n

</video>
ATTENTION  aux formats !
<source src="audio.mp3" type="audio/mp3" /> 
<source src="audio.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" /> 
<source src="video.webm" type="video/webm" /> 
<source src="video.ogv" type="video/ogv" />
21

modèle de boite, le display
23
2 DISPLAYS PRINCIPAUX
éléments structurants
98%
en vrai, j’ai jamais compté…
INLINEBLOCK
éléments agissant sur le
contenu éditorial
div, h1, ul, p, li, header, nav, section, … span, a, strong, em, …
+ NONE
code css > display: valeur

modèle de boite, display block
24
height
width
MARGIN
PADDING
BORDER
ZONE DE CONTENU

MERCI box-sizing
25
height
width
MARGIN
PADDING
BORDER
ZONE DE CONTENU
code css > box-sizing: border-box

modèle de boite,
fusion des marges
26

Position static
positionnement normal
dans le ﬂux.

valeur par défaut.
ELEM 1
ELEM 2
ELEM 3
ELEM 4

Position relative
se comporte comme
static, sauf si l’on déﬁnit
les propriétés top,
bottom, left, ou right.
elem2 {  
position:relative; 
top: -10px; 
left: 20px; 
}
ELEM1
ELEM2

Position ﬁxed
Positionné par rapport à la fenêtre
du navigateur (ne bouge pas)

Mêmes propriétés que la position
relative (top, bottom, left, right)

width = ce qu’il contient
elem2 {  
position:ﬁxed; 
bottom: 10px; 
right: 0; 
}
ELEM1
ELEM2

Position
absolute
Positionné par rapport au plus
proche élément parent « positionné »

Mêmes propriétés que la position
relative 
 
Si <elem1> n’était pas « relative »,
<elem2> serait positionné par
rapport à <body>
elem1 {  
position:relative; 
}
ELEM1
ELEM2
elem2 {  
position:absolute; 
top: -10px; 
right: 10px; 
}

Float
permet de sortir du flux… 
enfin pas vraiment,  
…mais si quand même.

le frère d’un flottant se place
derrière, et son contenu s’écoule
autour...

elem1 {  
float:right; 
}
BLABLAB 
BLABLAB
BLA BLABLABLA BLA
BLAB BLZLDAL A ,D
ELEM1
<elem1> 
</elem1> 
<elem2> 
</elem2>

Float
nav {  
ﬂoat: left; 
width:20%; 
}
section {  
ﬂoat: left; 
width:80%; 
}
<SECTION> 
lorem blabla
<NAV>
<DIV>
<FOOTER>

Float, ça déborde !
<SECTION> 
lorem blabla
<NAV>
<DIV>
nav {  
ﬂoat: left; 
width:20%; 
}
<FOOTER>
section {  
ﬂoat: left; 
width:80%; 
}
UN CONTENEUR A POUR HAUTEUR  
CE QU’IL CONTIENT DANS LE FLUX

Clear
<SECTION> 
lorem blabla
<NAV>
<DIV>nav {  
ﬂoat: left; 
width:20%; 
}
<FOOTER>
section {  
ﬂoat: left; 
width:80%; 
}
footer {  
clear: both; 
}

Clear
Remet les flottants qui le précédent dans le flux,  
et interprète leur hauteur afin de placer l’élément après.
Le navigateur intègrera  
les flottants dans le calcul de 
la hauteur du parent.

Clear, pas mal mais bof…
un ﬂottant peut déborder de
son parent...

<P> 
lorem blabla
<NAV>
LINK 1
LINK X
<DIV>
nav {  
ﬂoat: left; 
width:200px; 
}

son parent... mais pas d’un
contexte <P> 
lorem blabla
<DIV>
nav {  
ﬂoat: left; etc… 
} 
div { 
…votre code ici pour  
créer un contexte… 
}
Float, une question de contexte…
<NAV>
LINK 1
LINK X

Un block comme contexte
son parent...

mais pas de son contexte...

<P> 
lorem blabla
<H1>
TITRE
MACHIN
<DIV>
h1 {  
} 
div { 
overﬂow:hidden; 
}
HTTP://WWW.ALSACREATIONS.COM/ASTUCE/LIRE/1543-LE-CONTEXTE-DE-FORMATAGE-BLOCK-EN-CSS.HTML

C’est quoi un sélecteur ?
Le terme sélecteur désigne la partie précédant le bloc de
déclaration, à gauche de l’accolade ouvrante. Il peut être un
sélecteur d’élément(p), une classe (.list-inline), un ID
(#product) ou un sélecteur d’attribut ([role="navtop"].
Nous pouvons déclarer plusieurs sélecteurs, à condition de les
séparer par une virgule.
48
p, .list-inline, #product, [role="nav-top"] { 
margin-top: 20px; 
margin-bottom: 20px; 
}

49
ATTENTION, LES SÉLECTEURS DOIVENT ÊTRE COMPOSÉS
EXCLUSIVEMENT DE :
• CARACTÈRES ALPHANUMÉRIQUES,
• DE TIRETS ( – ) OU D’UNDERSCORES ( _ ).
IL N’EST PAS POSSIBLE DE COMMENCER UN SÉLECTEUR PAR :
• UN CHIFFRE,
• ET PAS RECOMMANDÉ PAR UN TIRET OU UN UNDERSCORE.

Sélecteur universel
Si vous souhaitez sélectionner l’ensemble des éléments de votre
HTML, rien de plus simple que d’utiliser ce qui est une norme en
informatique, l’astérisque.

* {  
box-sizing: border-box; 
}
cette technique n’est pas recommandée, elle sollicite beaucoup trop
lourdement le navigateur…
50

Sélecteur de type
Un sélecteur de type sélectionne un élément par le biais de sa balise
HTML

p {  
color:#00FF00; 
}
51

Sélecteur de classe
Le sélecteur de classe est un nom que l’ont déﬁni librement. Il peut être réutilisé
plusieurs fois dans l’HTML. Un sélecteur de classe est composé d’un nom préﬁxé
d’un point .text-blue. 
Il s’applique sur sur l’élément voulu dans l’HTML avec l’attribut class="text-
blue".

52
HTML CSS
<div class="text-blue">

…

</div>

.text-blue {

color:blue;

}

Sélecteur d’identifiant
Le sélecteur d’identifiant ou ID est un nom que l’ont défini librement. Il peut
être réutilisé que seule fois dans l’HTML. Un sélecteur d’identifiant est
composé d’un nom préfixé d’un dièse #product. 
Il s’applique sur l’élément voulu dans l’HTML avec l’attribut id="product".

53
HTML CSS
<div id="product">

…

</div>

#product {

background-color:blue;

}

Sélecteur d’identifiant
Le sélecteur d’identifiant ou ID est un nom que l’ont défini librement. Il peut
être réutilisé que seule fois dans l’HTML. Un sélecteur d’identifiant est
composé d’un nom préfixé d’un dièse #product. 
Il s’applique sur l’élément voulu dans l’HTML avec l’attribut id="product".

54
HTML CSS
<div id="product">

…

</div>

#product {


}

Sélecteur d’attribut
Les sélecteurs d’attribut ciblent un élément en utilisant
la présence d’un certain attribut ou de la valeur d’un
attribut.

55
HTML CSS
<element attribut="valeur">

…

</element>

[attr="valeur"] {

propriete:valeur;

}

Les sélecteurs d’attribut ciblent un élément en utilisant
la présence d’un certain attribut ou de la valeur d’un
attribut.

56
HTML CSS
<element attribut="valeur">

…

</element>

[attr="valeur"] {

propriete:valeur;

}

un exemple :

57
HTML CSS
<section role="list-article">

…

</section>

[role="list-article"] {


}

[attr]
Représente un élément avec un attribut nommé attr
[attr=valeur]

Représente un élément avec un attribut nommé attr dont
la valeur est exactement « valeur
58

[attr~=valeur] 
Représente un élément avec un attribut nommé attr dont la
valeur est une liste séparée par des espaces, dont l’un d’eux est
exactement « valeur »
[attr|=valeur] 
Représente un élément avec un attribut nommé attr dont la
valeur est une liste séparée par un tiret (-), dont l’un d’eux est
exactement « valeur ». Il peut être utilisé pour cibler les codes de
langue utilisant la sous-dénomination.
59

[attr^=valeur] 
Représente un élément avec un attribut nommé attr dont la valeur
commence par « valeur »
[attr$=valeur] 
Représente un élément avec un attribut nommé attr dont la valeur se
termine par « valeur »
[attr*=valeur] 
Représente un élément avec un attribut nommé attr dont la valeur
contient au moins une occurrence de « valeur » comme sous-chaîne
60

Exemple de sélecteur d’attribut
CIBLE UN ÉLÉMENT SELON SON ATTRIBUT  
[type="submit"] {cursor: pointer} 
→ tous les éléments ayant un attribut HTML « type » dont la valeur est exactement « submit »
auront une curseur différent
[href^="https"] {background-image: url(cadenas.png)} → si « href » débute par «
https » alors on affiche un picto de cadenas
[href$=".pdf"] {background-image: url(pdf.png)} → si « href » finit par « .pdf » alors
on affiche un picto de PDF
[href*="cassoulet"] {background: url(cassoulet.jpg)} → si « href » contient «
cassoulet » alors on affiche l'image
61

Sélecteur d’enfant
Le sélecteur d’enfant direct s’applique à l’enfant ou aux
enfants de l’élément désigné. 
Cette règle s’applique à l’élément elem2 s’il est l’enfant
de elem1 dans l’ordre de déclaration HTML.
62
CSS
elem1 > elem2 {


}

>

Sélecteur de frère adjacent
Le sélecteur de frère adjacent aﬀecte un élément à
condition que celui-ci soit précédé de l’autre élément
spéciﬁé. Cette règle s’applique à l’élément elem2 s’il est
le frère de elem1 dans l’ordre de déclaration HTML.
63
CSS
elem1 + elem2 {


}

+

Sélecteur adjacent général
Le sélecteur adjacent général cible tous les frères elem2
suivant, directement ou non, un élément elem1.
64
CSS
elem1 ~ elem2 {


}

~

Pseudo-classes
Une pseudo-classe CSS est un mot-clé ajouté au sélecteur pour
indiquer un état particulier de l’élément qui doit être sélectionné.
Par exemple, :hover appliquera le style quand l’utilisateur
survolera l’élément visé par le sélecteur.
65
CSS
a:hover {


}

:

Pseudo-classes
66
:
:last-child → dernier enfant d'un élément
:nth-child (aussi:nth-last-child) → Nième enfant d'un élément
:ﬁrst-of-type → 1er enfant du type désigné
:last-of-type → dernier du type désigné
:nth-of-type (aussi:nth-last-of-type) → Nième du type désigné
:only-child → enfant unique
:only-of-type → élément unique du type désigné
liste non exhaustive, la suite dans le doc mémento CSS

Pseudo-classe :nth-child
67
:
Retrouvez vos enfants
http://nth-test.com/
http://nthmaster.com/

Pseudo-elements
Comme les pseudo-classes, les pseudo-éléments sont ajoutés aux sélecteurs.
Au lieu de décrire un état contextuel (survol), ils permettent de cibler certaines parties du
document, et de créer « virtuellement » un nouvel élément... (j'ai pas trouvé mieux comme
explication...)
Par exemple ::first-line cible la première ligne de l’élément ciblé par le sélecteur.
68
CSS
p::ﬁrst-line {


}

::

Pseudo-elements
69
::
::before
cible le premier enfant virtuel de l’élément
::after
cible le dernier enfant virtuel de l’élément
::first-letter
cible la première lettre de la première ligne d’un bloc
::first-line
cible la première ligne de l’élément ciblé par le sélecteur
::selection
applique des règles de décoration à la portion du texte qui a été surligné (non standard)
liste non exhaustive, la suite dans le doc mémento CSS
Vous verrez parfois le simple deux-points (:)  
au lieu du double (::) 
 
La plupart des navigateurs acceptent les deux valeurs.

 
Depuis CSS3, cela permet de diﬀérencier les pseudo-
classes(:), des pseudo-éléments(::)

Poids des sélecteurs
71
!important <style> #id
.class 
[attr] 
:pseudo-
élément
bazooka has been nul bien yeah baby
Aﬁn d’améliorer la notion de priorité et de poids nous attribuerons  
un système de points aux sélecteurs.  
 
Nous pouvons ainsi appliquer des styles à un élément de manière  
plus souple, en utilisant un sélecteur avec le moins de poids possible.

72
selecteurs !important <style> #id
.class 
[attr] 
:pseudo-
élément
sélecteur joker(*), de parenté(>) ou d'adjacence(+) 0 0 0 0 0
sélecteur CSS div, p 0 0 0 0 1
une classe .my-class 0 0 0 1 0
un sélecteur d’attribut [class*="col-"] 0 0 0 1 0
une pseudo-classe :only-of-type 0 0 0 1 0
un ID #my-id 0 0 1 0 0
un style en ligne (injecté souvent par javascript)  
<ul style="padding: 0;">...</ul> 0 1 0 0 0
!important (DANGER ZONE) 1 0 0 0 0

73
selecteurs !important <style> #id
.class 
[attr] 
:pseudo-
élément
#header .logo img 0 0 1 1 1
div#header a.logo img 0 0 1 1 3
div[id=header] a.logo img 0 0 0 2 3
.logo > img 0 0 0 1 1
.logo img:hover 0 0 0 2 1

Préfixes constructeurs
Proposés par le W3C
Liste (non exhaustive) :

-moz- pour le moteur de rendu Gecko de Mozilla Firefox ou Thunderbird  
-ms- pour Microsoft Internet Explorer 
-o- pour Opera 
-webkit- pour les moteurs WebKit de Safari et Chrome par exemple

Concerne :  
Propriétés encore non finalisées (ex. -moz-animation, -webkit-border- radius)  
Éléments propriétaires (ex. -ms-filter, -webkit-mask)
74

RESPONSIVE WEB DESIGN (RWD)
SOURCE > HTTP://BLOG.FROONT.COM/9-BASIC-PRINCIPLES-OF-RESPONSIVE-WEB-DESIGN/

PLAN
76
• Terminologie & définition
• Etat des lieux
• Design fluide
• Contenu fluide
• Media Queries
• Tailles

DÉFINITION
Le Responsive Web Design (RWD) est un ensemble de principes/
méthodes permettant de rendre un site web adaptable à chaque
terminal aﬁn d'apporter la meilleure expérience utilisateur, quel
que soit le contexte de visualisation.
77

TERMINOLOGIE
Design statique

>> LAYOUT FIXE
Design ﬂuide

>> LAYOUT OCCUPE TOUTE LA FENÊTRE NAVIGATEUR, QUELQU’EN SOIT LA TAILLE
Design adaptative

>> LAYOUT CHANGE POUR CERTAINES TAILLES DE LA FENÊTRE NAVIGATEUR (POINTS DE RUPTURE / BREAKPOINTS)
Design responsive

>> LAYOUT S’ADAPTE À LA FENÊTRE NAVIGATEUR, QUELQU’EN SOIT LA TAILLE
78

RESPONSIVE VS ADAPTATIVE
79

BREAKPOINTS VS SANS BREAKPOINT
80

TERMINOLOGIE
Contenus ﬂuides

>> LES CONTENUS S’ADAPTENT EN FONCTION DE LA TAILLE DE LEUR CONTENEUR (GESTION DES DÉBORDEMENTS)
Images ﬂuides

>> LES IMAGES S’ADAPTENT EN FONCTION DE LA TAILLE DE LEUR CONTENEUR (GESTION DES DÉBORDEMENTS)
Media Queries

>> PERMETTENT DE DÉFINIR DES POINTS DE RUPTURE (BREAKPOINTS)
81

TERMINOLOGIE
Desktop ﬁrst

>> ON COMMENCE PAR CODER LA VERSION DESKTOP (DU + GRAND AFFICHAGE)
Mobile ﬁrst

>> ON COMMENCE PAR CODER LA VERSION MOBILE (DU + PETIT AFFICHAGE)
82

DESKTOP FIRST VS MOBILE FIRST
83

RESPONSIVE OU APP ???
84
le choix dépend de la typologie du contenu et du besoin

ÉTAT DES LIEUX
QUELQUES STATS…
85
SOURCES > HTTP://GS.STATCOUNTER.COM

88
Desktop vs Mobile vs Tablette

QUELLE UNITÉ, POUR QUEL
USAGE ?
92
LE PIXEL : PX
• Unité « ﬁxe »  
• Unité « rassurante »  
• Produit par les logiciels graphiques  
• Éventuellement source de problèmes d'accessibilité (zoom texte
impossible)  
• Indispensable à certains éléments (images, iframes, etc.)

USAGE ?
93
LE CADRATIN : EM
font-size:****em; width:***em;
• Police relative à la font-size du
parent  
• Taille de police répercutée
d'enfant en enfant (« cascade »)  
• Varie en fonction de la taille de
police utilisateur  
• Largeur (hauteur) du bloc
relative à sa propre font-size
(width: 10em = « 10 caractères
M »)

police utilisateur

USAGE ?
94
LE CADRATIN : EM
taille ?
SOURCE > ALSACRÉATIONS QUIZZ

USAGE ?
95
LE POURCENTAGE : %
font-size:****%; width:***%;
parent  
• Taille de police répercutée
d'enfant en enfant (« cascade »)  
relative à la largeur du bloc
parent 
(width: 10% = 10% du parent)

la fenêtre navigateur

USAGE ?
96
LE POURCENTAGE : %
taille ?

USAGE ?
97
ROOT EM : REM
font-size:****rem; width:***rem;
parent de <html>  
• Pas de « cascade »  
relative à sa propre font-size
(width: 10rem = « 10 caractères
M »)

police utilisateur

USAGE ?
98
ROOT EM : REM
taille ?

USAGE ?
99
VIEWPORT UNITS
font-size:****vw; width:***vw;
• Police relative à la largeur de
fenêtre

• Pas de « cascade »

fenêtre navigateur 
relative à la largeur de fenêtre
(width: 10vw = 10% de la
fenêtre)

la fenêtre navigateur
vw, vh, vmin, vmax

USAGE ?
100
VIEWPORT UNITS
vw, vh, vmin, vmax
vmin,vmax → hauteur ou largeur du viewport,  
selon que l’un ou l’autre soit  
inférieur
Rendre à Goetter, ce qui appartient à Goetter : Blog / Formation

USAGE ?
101
VIEWPORT UNITS
vw, vh, vmin, vmax
taille ?

USAGE ?
102
MINIMAS / MAXIMAS UNITS
• min-width :largeur minimum

• max-width : largeur maximum
• min-height :hauteur minimum

• max-height : hauteur maximum

USAGE ?
103
MINIMAS / MAXIMAS UNITS

USAGE ?
104

COLONNES FLUIDES
105
• Mélange des unités

largeur en % + padding et bordures en pixel ?

• Débordements

les mots longs et URL qui dépassent 
(on va y revenir)

REMEMBER : Un block comme contexte
son parent...

mais pas de son contexte...

<P> 
lorem blabla
<H1>
TITRE
MACHIN
<DIV>
h1 {  
} 
div { 
overﬂow:hidden; 
}

COLONNES FLUIDES
107
• Mélange des unités

largeur en % + padding et bordures en pixel ?

• Débordements

les mots longs et URL qui dépassent 
(on va y revenir)

GRILLES FLEXIBLES
108
• Des générateurs existent

• Frameworks pour vous servir (bootstrap/foundation/knacss/etc…)

GRILLES FLEXIBLES
109
• Ethan Marcotte : ROBOT OR NOT

GRILLES FLEXIBLES
110
Les frameworks ont

des grilles ﬂexibles,  
mais pas vraiment 
responsive… 
plutôt adaptative…

BREAKPOINTS SELON LES STANDARDS…  
PAS SELON LE BESOIN !!!!

GRILLES FLEXIBLES
111
en avez-vous réellement besoin…?

CONTENUS FLUIDES débordements…

GÉRER LES DÉBORDEMENTS DE CONTENUS
113
word-wrap: break-word ;

114
hyphens: auto ;
Attention aux --preﬁxCésure intelligente !

115
table {
table-layout: ﬁxed;
width:100%;
}
SUR LES CELLULES DE TABLEAUX

IMAGES FLUIDES
116
GÉRER LES DÉBORDEMENTS DE MEDIAS
Y a des gens qui n’ont pas  
réussi parce qu’ils ne  
sont pas awares
ÇA DÉBORDE LÀ…

IMAGES FLUIDES
117
GÉRER LES DÉBORDEMENTS DE MEDIAS
Y a des gens qui n’ont pas  
réussi parce qu’ils ne  
sont pas awares
max-width: 100% ;
height : auto ;

→ sur img, table, td, blockquote,

object, video, input, textarea

Media Queries
119
LES POINTS DE RUPTURE (BREAKPOINTS)
SOURCE : HTTP://WWW.JOHNBHARTLEY.COM/SPEAKING/BUFF/

120
Les frameworks ont

des grilles ﬂexibles,  
mais pas vraiment 
responsive… 
plutôt adaptative…

BREAKPOINTS SELON LES STANDARDS…  
PAS SELON LE BESOIN !!!!
Media Queries

121
Media Queries
QUELS BREAKPOINTS UTILISER ?

122
CELA DEPEND DE VOTRE DESIGN !
Media Queries
QUELS BREAKPOINTS UTILISER ?
UNE GRILLE FLEXIBLE GÉNÉRÉE N’EST PAS FORCEMENT UTILE

123
Media Queries
CIBLER SELON LA TAILLE DE L’ÉCRAN
@media (max-width:640px) {

body { width: auto; } 
 
}
ET PLEINS D’AUTRES CSS ICI, 
DÉDIÉS AUX PETITS ÉCRANS
PROPRIÉTÉS

124
Media Queries
CRITÈRES DES MEDIAS QUERIES
• width, height
largeur, hauteur de la zone d’aﬃchage (viewport)  
• device-width, device-height
largeur, hauteur du périphérique (« résolution »)  
• resolution

densité de pixels (ex. 192dpi)  
• orientation
périphérique tenu en portrait (portrait) ou paysage (landscape)

125
Media Queries
CUMUL DE CRITÈRES
• and → « et »

• only → « uniquement »

• not → « non »

• , → « ou »
@media (max-width:640px) and (orientation:portrait) {}
@media only screen and (max-width:1024px) {}
@media (max-width:640px) , print {}
@media (max-width:640px) and not (orientation:portrait) {}

bienvenu en enfer…
127
http://mydevice.io/
http://screensiz.es/
http://viewportsizes.com/
http://mqtest.io/

128
UN PIXEL EST-IL UN PIXEL ?

129

130
viewport (faux pixels)

ce que le device accepte d’aﬃcher…

largeur réelle (vrais pixels)
device-width (largeur déclarée, faux pixels)

ce que le device déclare faire comme largeur
1
2
3

131
largeur réelle (vrais pixels)
1UN PIXEL EST-IL UN PIXEL ?
« LARGEUR DE L’ÉCRAN D’UN TERMINAL MOBILE »
iPhone 3 : 320px

Samsung Galaxy S : 480px  
iPhone 4, iPhone 5 : 640px  
Nokia Lumia 920 : 768px

iPad, iPad Mini : 768px  
Sony Xperia Z : 1080px  
Samsung Galaxy S4 : 1080px  
iPad 3 : 1536px

132
device-width  
(largeur déclarée, faux pixels)2UN PIXEL EST-IL UN PIXEL ?
« LARGEUR DÉCLARÉE PAR UN TERMINAL MOBILE »
iPhone 3, 4, 5 : 320px

 
iPhone 6 : 375px

iPhone 6 Plus : 414px

 
Sony Xperia Z : 360px

Nokia Lumia 920 : 320px

Samsung Galaxy S4 : 360px

 
iPad 1, 2, 3 : 768px

 
iPad mini : 768px

133

« LARGEUR DE FENÊTRE »
« SURFACE VIRTUELLE QU’UN MOBILE ACCEPTE  
D’AFFICHER PAR DÉFAUT À L’ÉCRAN »

134

Safari : 980px

 
Opera mini : 850px

Opera mobile : 980px

Android 1,2,3 : 800px

Android 4 : 980px

 
IE mobile : 1024px

135
largeur physique
device-width
viewport
Niveau de zoom :

device-width / viewport

320 / 980 = 0,33

Forcer le viewport
136
<meta name="viewport" content="width=320">
BALISE META VIEWPORT
LARGEUR DE FENÊTRE 320PX

Forcer le viewport
137
<meta name="viewport" content=« width=device-width">
LARGEUR DE FENÊTRE = DEVICE-WIDTH

Forcer le viewport
138
<meta name="viewport" content=« initial-scale=1.0 »>
NIVEAU DE ZOOM INITIAL = 1 (PAS DE ZOOM)

Forcer le viewport
139
<meta name="viewport" content=« width=device-width,  
initial-scale=1.0 »>
LARGEUR DE FENÊTRE = DEVICE-WIDTH ET NIVEAU DE ZOOM INITIAL
<meta name="viewport" content=« initial-scale=1.0 »>

Forcer le viewport
140
• width / height : impose une largeur / hauteur de viewport  
(ex : « width=device-width »)

• initial-scale : impose un zoom initial (ex : « initial-scale=1.0 »)

• user-scalable : zoom autorisé ou non (ex : « user-scalable=no »)

• minimum-scale : taille de zoom mini (ex : « minimum-scale=1.0 »)

• maximum-scale : taille de zoom maxi (ex : « maximum-scale=1.0 »)

<meta name="viewport" content="">

Forcer le viewport
141
hop hop hop ! doucement là…du html pour gérer le design > beurk

Forcer le viewport
142
LA FUTURE MÉTHODE VIEWPORT
@viewport { 
width: device-width;  
height: device-height;  
zoom: 1; 
max-zoom: 1;  
min-zoom: 1;  
user-zoom: ﬁxed;  
orientation: portrait;
}
DÉJÀ RECONNU PAR :
OPERA,
IE MOBILE 10
FIREFOX MOBILE (EX. @-O-VIEWPORT)!

Privilégiez le format SVG
145

Privilégiez les fonts « systèmes »
146

Optimisez vos images !
147
Ensuite, chargez les en fonction :
• de la taille du device
• si l’écran est retina
• en fonction de la connectivité

on arrête pas le progrès…
148
http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-
adaptation-mobile.html
TRÈS BON ARTICLE DE STEPHANIE WALTER (ALSACRÉATIONS):

références, webographie…
149
LINK
Responsive Web Design
ETHAN MARCOTTE
EDITIONS EYROLLES
RAPHAËL GOETTER HTTP://GOETTER.FR/LIVRES/
EDITIONS EYROLLES
QUELQUES LIVRES…

150
HTTPS://WWW.YOUTUBE.COM/WATCH?V=115RDUBV--U
Le futur du Responsive Web Design
HTTP://WWW.PARIS-WEB.FR/2013/CONFERENCES/HTML-CSS-BOUSCULEZ-VOS-HABITUDES.PHP
html/css, bousculez vos habitudes :
QUELQUES CONFÉRENCES…

151
http://www.alsacreations.com/tutoriels/
https://css-tricks.com/
QUELQUES SITES…
https://svgontheweb.com/
http://caniuse.com/
http://tympanus.net/codrops/css_reference/
http://sarasoueidan.com/

Pour vous servir…
152
https://www.facebook.com/pierre.vert.733

Intégration web MMI

Recommandé

Recommandé

Contenu connexe

Similaire à Intégration web MMI

Similaire à Intégration web MMI (20)

Intégration web MMI