-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·379 lines (290 loc) · 19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>TP3 - RWD</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">TP3 - RWD</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio">Les surfaces écrans</a>
</li>
<li class="page-scroll">
<a href="#about">Les images responsives</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" width="256" height="256" alt="">
<div class="intro-text">
<span class="name">TP3</span>
<hr class="star-light">
<span class="skills">Responsive Web Design</span>
</div>
</div>
</div>
</div>
</header>
<!-- Portfolio Grid Section -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Les surfaces écrans</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h3>SURFACE RÉELLE</h3>
<p>C'est le nombre physique de pixels qui composent l’écran. On le dénomme par le qualificatif : définition. Voici par exemple un écran de 2560x1440pixels. C’est sa surface.
<img class="img-responsive" src="img/img.png" width="500px" alt="">
Quelques exemples de surfaces réelles de terminaux divers:<br>
iPhone 4(4, 4S) : 640x960<br>
Galaxy SIII : 720x1280<br>
Nokia Lumia 520 : 480x800<br>
Apple iPad 3/4 : 1536x2048<br>
On remarque très logiquement que plus la surface réelle est grande, plus l’écran sera grand.</p>
<h3>CSS PIXEL</h3>
<p>La vérité c’est qu’il y a deux définitions au mot pixel: il peuvent être la plus petite unité qu’un écran comporte (le pixel qu’on parle dans la surface réelle) ; ou soit être basé sur une unité optique cohérente appellé “pixel de référence”. (le pixel CSS).
Ainsi, le pixel CSS, plus communément appelé “device independant pixels” (DIPs) est le nombre de pixels virtuels que le terminal pense avoir et sur lequel il fonde son affichage. Pour des raisons de rétrocompatibilité, les constructeurs se basent sur cette unité de pixel qui demeure identique quelle que soit la résolution. La valeur du device-width d’un périphérique est donc non pas exprimée en pixels mais en DIPs.</p>
<h3>PIXEL RATIO</h3>
<p>Le “pixel ratio” correspond ainsi au rapport entre les pixel réels (hardware) et les pixels CSS (software). Par exemple, l’iPhone 4 est décrit par un pixel ratio de 2 car sa définition en pixel physique est le double de sa définition en pixel CSS.
Surface réelle : 960 x 640
Pixels CSS: 480 x 320
Il y a donc 2 pixels de surface réelle pour un pixel CSS.
Avec ces deux définitions, nous pouvons remarquer le rapport suivant:
width/pixel ratio = device width.</p>
<h3>VIEWPORT</h3>
<p>On parle souvent à tort de “screen size” (taille de l’écran) mais nous devrions parler de viewport.
<img class="img-responsive" src="img/img2.jpg" alt="">
On pourrait dire que le viewport, c’est tout ce qui commence avec la balise < html > et ce qui finit avec < /html>. Le viewport c’est la surface du navigateur.</p>
<h3>RESOLUTION</h3>
<p>A ne pas confondre avec définition, la résolution, c’est le nombre de pixel contenu dans un pouce (2,54cm). Cela n’a donc rien à voir avec la définition d’un écran, on peux d’ailleurs avoir deux écrans de même définition mais avec une résolution différente : l’iPhone 3GS et l’iPhone 4.
Plus la résolution est grande, plus les pixels seront petits (on arrive à en caser plus sur moins de place). Conclusion: en rendu final, les pixels seront moins visibles, cela représente donc un argument marketing fort car la différence entre qualité print et écran se réduit chaque année un peu plus.
<img class="img-responsive" src="img/img3.png" width="700px" alt="">
Grâce à toutes ces informations, nous pouvons maintenant comprendre la fameuse déclaration HTML5 qui rend tout site “responsivable” :
<img class="img-responsive" src="img/img4.png" alt="">
</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Les images responsives</h2>
<hr class="star-gazer">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h3>Quelles solutions pour des images responsives?</h3>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p>62% de la taille du web n’est constitué que d’images, et nous en envoyons chaque jour toujours plus. Et pourtant, de toutes ces images, on en fait bien peu cas. En effet, même si on entend partout et tout le temps que le web est au “responsive”, que l’industrie entière a pris ce mouvement a bras le corps, les images ont littéralement été mise de côté de ce grand chamboulement. Leur seul possibilité, dans le code, est d’être coincé entre une balise < img > et son attribut src.<br>
Etre une image ou ne pas être. C’est tout.<br>
Bien évidemment, les développeurs avaient le choix. Soit ils rendaient leurs site moins décoré, ou soit plus lent pour tous. Ils ont choisi la dernière option, délivrant des images en résolution toujours plus grande. Ainsi, on peux parler de gâchis.</p>
<h4>Au présent</h4>
<p>En effet, a quoi ressemble l’univers des image aujourd’hui? A pas grand chose.</p>
<p>Lorsque l’on insère une image dans nos pages web, il y a de fortes chances pour que nous utilisions un code semblable à :
<pre>
<code>
<img src="mon-image.jpg" width="850" height="475" alt="">
</code>
</pre></p>
<p>Tout ce qu’on dit ici c’est de réserver une boite de taille fixe et d’y mettre une image. En 2014, avec l’explosion des surfaces d’écran diverses et variées, l’arrivée des smartwatch, la pénétration du smartphone dans les pays en développement, c’est tout ce que nous avons en HTML5/CSS.</p>
<p>Alors oui, tel Bootstrap, on peut rajouter un peu de “responsiveness”:
<pre>
<code>
img {
max-width: 100%;
height: auto;
}
</code>
</pre>
</p>
<p>Mais c’est de la triche. On conviendra que charger une image de 850 x 475 px n'est pas très adapté sur un écran de 320 px de large (si on prend comme exemple la largeur actuelle gérée par l'iPhone). Une image de cette taille pèse environ 150 Ko (compression de 40% sur une photographie), là où une image adaptée de 320 x 179 px ferait environ 23 Ko avec la même compression. Soit une différence de 127 Ko, multiplié par le nombre d'images du même genre dans votre page.</p>
<p>Mais heureusement, car il faut bien une fin heureuse, quelques éléments commencent à émerger et vont sauver les images:<br>
- srcset / sizes<br>
- picture / source</p>
<h4>Au futur</h4>
<strong>SRCSET/SIZES</strong>
<p>
<img class="img-responsive" src="img/quarter.png" alt="">
</p>
<p>La première technique pour créer des images responsive est l’élément “srcset”, accolés à son ami “sizes”. Nous allons voir en quoi ces deux éléments sont magiques.</p>
<p>Le gros du problème avec les images, c’est le partage d’information. En effet, certaines variables sont connus seulement par l’intégrateur, quand d’autres sont connus seulement par le navigateur.</p>
<p>Par exemple, les dimensions du viewport de l’utilisateur final? C’est le navigateur qui les connait. L’espace que va prendre l’image au sein du viewport? C’est l’intégrateur. La densité de pixel de l’écran? Le navigateur. Les dimensions de l’image? L’intégrateur.</p>
<p>On remarque ainsi un balancement d’informations entre navigateur/intégrateur. Personne ne dispose de toutes les informations. Or, pour pouvoir mettre en place un élément aussi puissant que les images responsives, il faut que le navigateur sache tout de l’image....et c’est justement ce à quoi sert SRCSET et SIZES! Srcset va le renseigner sur les dimensions de l’image, et sizes sur la place que sera concédé à l’image au sein de notre page.</p>
<p>Regardons un exemple de code et analysons-le.
<pre>
<code>
<img src="small.jpg"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
100vw"
alt="A rad wolf" />
</code>
</pre></p>
<p>La première ligne est assez banale et reconnaissable, elle renseigne sur la location de l’image.
A la deuxième ligne, entre en scène SRCSET. Chaque ligne correspond à une surface d’image différente (large, moyen, petit). A la fin de chaque ligne se trouve ce que l’on appelle le descripteur. Ici “w” (1024w, 640w, 320w). Il renseigne sur la largeur de l’image. Grâce à cela, le navigateur sait maintenant, au chargement de la page, la taille de l’image finale et va pouvoir servir à l’utilisateur seulement celle dont son périphérique pourra jouir.</p>
<p>Mais ce n’est pas fini, la spécification prévoit également un élément “sizes” qui va renseigner le navigateur sur la taille que prendra l’image au sein du viewport. Sizes est rédigé comme une media-query. Ici, on dit que : Pour tous les viewport qui font au minimum 36em de large, l’image prendra 33,3% de la largeur du viewport. Pour les écran plus petit à 36em, on l’affichera sur toute la largeur du viewport (100vw).</p>
<p>C’est tout! Avec ces deux éléments, le navigateur devient super intelligent et délivre ainsi des images intelligentes.</p>
<p>Petite démo avec le code précédent:</p>
<p>
<img src="img/small.jpg"
srcset="img/large.jpg 1024w,
img/medium.jpg 640w,
img/small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
100vw"
alt="A rad wolf" />
</p>
<strong>PICTURE/SOURCE</strong>
<p>Le seul défaut de l’élément SRCSET, c’est qu’on donne toutes les infos aux navigateurs, et c’est ce dernier qui a le contrôle sur l’image qui sera délivré à l’utilisateur final. En effet, les media query que l’on peut insérer dans l’attribut “sizes” ne servent qu’à donner une indication sur la proportion de l’image dans le viewport, mais pas de l’image en elle-même. Certains critiquent même le fait que l’élément “srcset” soit trop permissif de ce point de vue et que tout est “au bon vouloir” du navigateur, laissant la possibilité que l’affichage diffère d’un navigateur à un autre.</p>
<p>Ce petit problème, s’il n’est pas génant, n’est pas présent avec l’élément PICTURE, où l’intégrateur reprend pleinement son rôle de magicien du code. Avec picture, on va pouvoir spécifier tel image pour tel configuration d’écran:</p>
<pre>
<code>
<picture>
<source srcset="runner-wide.jpg" media="(min-width: 1000px)">
<source srcset="runner-narrow.jpg" media="(min-width: 500px)">
<img src="runner-square.jpg" alt="Photograph of a man running along a pier at sunset, with a harbour in the background">
</picture>
</code>
</pre>
<p>Expliquons par l’exemple. On voit dans ce snippet de code que l’élément picture n’est qu’un “wrapper” de l’élément ancestral < img > qui agit ici comme un fallback (oui ça fait beaucoup d’anglais dans une phrase française).</p>
<p>Picture est accolé à l’élément “source” qui, de part son attribut SRCSET identifie une image. A l’inverse de la technique srcset/sizes où l’intégrateur donnait une donnée de taille sur l’image, là c’est nous qui allons donner un ordre de taille quant aux viewports que nous désirons viser. Pour l’exemple du runner-wide.jpg par exemple, nous visons les périphériques ayant une largeur minimale de 1000px. Sinon le navigateur passe à la 2ème ligne. Si le viewport a une width comprise entre 500 et 1000 alors ce sera runner-narrow.jpg qui sera chargé. Sinon, le viewport étant en dessous de 500pixels de large, c’est l’élément wrappé < img > qui prendra le relais avec l’image runner-square.jpg.</p>
<p>Attention à l’ordre des sources! En effet, les éléments source doivent respecter un ordre précis si on ne veux pas que le navigateur charge le mauvais élément, il faut qu’ils soient classés dans l’ordre décroissant en min-width (plus grand viewport au plus petit) et du plus grand au plus petit en max-width.</p>
<p>Mauvais exemple:
<pre>
<code>
<picture>
<source srcset="small.jpg" media="(min-width: 768px)">
<source srcset="wider.jpg" media="(min-width: 1024px)">
<source srcset="small.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
</code>
</pre>
</p>
<p>Imaginons l’exemple d’un périphérique à 1024w, son image adapté est donc wider.jpg mais il ne la verra jamais car la première condition est respecté (il a bien une surface plus grande que 768px). Il téléchargera donc de manière erronée small.jpg.</p>
<p>Démonstration avec le code précédent:</p>
</div>
<div class="col-lg-12">
<picture>
<source srcset="img/runner-wide.jpg" media="(min-width: 1000px)">
<source srcset="img/runner-narrow.jpg" media="(min-width: 500px)">
<img src="img/runner-square.jpg" alt="Photograph of a man running along a pier at sunset, with a harbour in the background">
</picture>
</div>
<div class="col-lg-8 col-lg-offset-2">
<p><h4>Sans oublier....</h4></p>
<p>Nous avons présenté les deux grands pilliers des images responsives qui, dans quelques années, deviendront très certainement la norme du web. Mais il ne faudrait pas oublier quelques outils que nous avons déjà et qui peuvent nous aider dans le paysage des images responsives.</p>
<p>- le <strong>format SVG</strong><br>
<figure>
<img src="img/svg-logo.svg" alt="" width="100">
</figure>
<p>
Autant que possible, pourquoi ne pas se passer des images basées sur le pixel? On a vu tout au long de cet article combien elles posent problème alors, si on peut les éviter, allons-y! Mais comment? En utilisant le format SVG, qui sont des images se basant sur des formules mathématiques : des vecteurs. Étant donné que l’image n’est faite que de formules mathématiques, elle est et très légère, et d’emblée responsive (agrandir ou réduire une image SVG ne consistant qu’à changer les chiffres des vecteurs).</p>
<p>- les <strong>“fonts icons”</strong><br>
Au lieu de contenir des caractères, ces polices contiennent des graphiques, malin! En plus d’être simple à mettre en place (via l’élément @font-face), elles offrent des performances très économiques. En effet, étant une police de caractère, celle-ci se charge en 1 seule requête HTTP. Plusieurs images chargés en 1 seule requête HTTP, c’est très proche de la technique des CSS sprite, et donc très intéressant.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4 col-md-offset-4">
<h3>A propos</h3>
<p>Raphaël Martin<br>Etudiant en MMI2, groupe A</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © 2014
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll visible-xs visble-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
</html>