87

OFFERT
3 HEURES
DE FORMATION [Link]
en anglais

AVRIL - MAI 2018

HTML5 CSS3 jQuery JavaScript

ANIMATION
BEL/LUX : 8,90€ - DOM/S : 8,90€ - CAL/S : 1100 CFP - POL/S : 1150 CFP - CH : 15,80FS - CAN : 14,95$CAD - MAR : 90 MAD - IT/[Link] : 8,50€

CSS
10 ÀUTILISERTOUTDESUITE
API HTML
TUT
ORI
EL
60 IMAGES
PAR SECONDE
LA COUV
EN
ACTION
Page 40

Bloquez le déclencheur avec CSS & JS

20 TECHNIQUES ÉTONNANTES
RECRÉEZ LES MEILLEURS EFFETS D’AUJOURD’HUI
CONSTRUISEZ
UNE APPLI ACTIVÉE
PAR LA VOIX
Codez une to-do list avec [Link]
L 18927 - 87 - F: 7,90 € - RD MASTERCLASS
CONSOLES
100 PAGES

CRÉEZ DES EFFETS

DE TEXTE 3D
Ajoutez de l’intéraction à votre typographie
Web Design n°87 DE NAVIGATEUR
Des outils pour plonger dans votre code

[Link] 1 26/02/2018 17:56

 Meta

Sommaire
Numéro 87

Nouveautés, techniques et inspirations pour les Webdesigners

Discutez avec l’équipe et les autres lecteurs des nouvelles technologies, tendances et techniques
mail@[Link] • @WebDesignMag • [Link]

08 Mozilla propose l’API En couverture

ANIMATIO
Mixed Reality
Afin d’aligner WebAR sur WebVR, Mozilla
propose l’API WebXR. Web Design enquête…

CSS
09 Tops et ressources du Web
Besoin d’un framework ou d’une
bibliothèque ? Commencez ici !

11 WordPress :
il est temps de changer
Le fondateur de Make Do chante les louanges
de Gutenberg, le nouvel éditeur du CMS.

14 Lightbox
Une galerie de sites inspirants et les techniques
utilisées pour les créer.

26 Plateforme pour chaussures

Quand Swear a demandé une nouvelle image en
ligne, les experts en ecommerce qui s’y sont
attelés se sont rendu compte que ce n’était pas
qu’une question de forme…

32 Une latitude de design

51North, immergé dans tous les domaines
numériques, est un studio qui sait pleinement
communiquer des messages à plusieurs publics

20 TECHNIQUES ÉTONNA
différents par un design incroyablement
fascinant.

40 Animation CSS
Voici comment recréer certaines des meilleures
animations qu’on trouve aujourd’hui sur le web

70 Les meilleures API du moment

LES MEILLEURES API
RECRÉEZ LES MEILLEURS EFFETS D’AUJOU
Découvrez les API HTML et externes du web
de la prochaine génération

78 Les consoles des navigateurs

LES MEILLEURES

API
Mozilla et Google ont récemment placé la barre
encore plus haut en offrant des consoles
avancées dans leurs navigateurs web. Nous
vous montrons les deux différentes approches
et comment les utiliser au mieux dans
vos projets.

96 Portfolio des lecteurs

Découvrez les portfolios de Angela Madrid
et Marcelo Coelho.
DU MOMENT
70 78
Les meilleures API Les consoles des navigateurs
Construisez la prochaine generation de site Jetez un oeil au code de votre site

70 ________________________________________________ dossier

6 ______________________________________________ sommaire 10MAGWEBDMAR18_070-077_API.indd 70 26/02/2018 15:55

image_sommaire+[Link] 1

[Link] 6 26/02/2018 17:56

 98 Visitez le shop de WEB DESIGN

Bonus offerts
Vos bonus à télécharger
sur [Link]
Trouver les numéros précédents et spéciaux

Vidéo • [Link] - 3h de vidéo

Image • 50 textures asphalt
• 8 actions pour Photoshop
Tutoriels
Des gourous vous guident pas à pas
Typo • Police sans sérif False Nine à travers les techniques du Web

Ne ratez aucun

TION
numéro

SS
Abonnez-vous
Jetez un oeil page 25
Abonnement annuel en page 68

50 Effets de typo interactifs en 3D

Développez des effets de texte captivants, réactifs aux
mouvements de la souris et parfaits pour des en-têtes.

54 UI ultra fluides en CSS et JS

Créer des animations à 60 i/s en utilisant les dernières
propriétés CSS et l’API Web Animations.

58 Propulser un blog WordPress

Comment implémenter l’API WordPress dans une appli
[Link] en utilisant Vuex, un gestionnaire d’état.

64 Mises en pages complexes en CSS

Exploitez la puissance du module Grid Layout pour créer
des designs accrocheurs de style magazine.

Web Workshop
Le nouvel éditeur,

ONNANTES
48 Vidéo d’instructions
Gutenberg, vise à tout [Link]
placer dans un système Ajouter une vidéo pour présenter votre app.
de création de mises
D’AUJOURD’HUI en page plus moderne 62 Effet de texte

40 et plus facile d’utilisation.

TRIBUNE - Kimb Jones - p. 11
[Link]/real/dante-ariola
Créez un effet de texte transparent et surligné.

Web développeur
78 Les consoles des navigateurs
Nous vous montrons les deux différentes approches
et comment les utiliser au mieux dans vos projets.

84 Commentez votre code

Ajoutez des commentaires dans votre code pour les
styles et les composants JavaScript pour générer et
maintenir une documentation complète.

90 Activation vocale
32 14 Faites vos premiers pas vers les appareils à commande
Profil : 51North Lightbox : Name That Place vocale en développant une app de gestion de tâches
Faire passer le message Testez vos connaissances avec ce quiz
avec [Link] et [Link].

sommaire_______________________________________________ 7
26/02/2018 15:27

[Link] 7 26/02/2018 17:56

 VOICI COMMENT RECRÉER
CERTAINES DES MEILLEURES
ANIMATIONS QU’ON TROUVE
AUJOURD’HUI SUR LE WEB.

FAIRE DES BULLES 7UP PAYS-BAS [Link]/7up

DE BELLES BULLES ANIMÉES.
</g> </g>
Le site de 7UP (Pays-Bas) est un bel créons deux couches de bulles : </g> </g>
exemple d’une marque dont on retrouve une pour les grosses bulles, une pour ...
le design dans celui de son site. Ce dernier les petites. Nous plaçons toutes nos </g> 3. ANIMATION
comporte plusieurs animations joliment bulles en bas de la viewbox. Le CSS a un moteur d’animation
faites, mais ce sont les bulles qui sont les <g class="bubbles-large" 2. ENCADRER LES BULLES puissant et un code vraiment simple
plus intéressantes. Leur animation est stroke-width="7"> Afin d’appliquer deux animations pour faire des animations complexes.
composée de plusieurs éléments : <g transform="translate(10 différentes à nos SVG, toutes deux Nous commençons par déplacer les
le «dessin» SVG des bulles, et deux 940)"> faisant usage de la propriété transform, bulles vers le haut de l’écran et par
animations pour chaque bulle. La première <circle cx="35" cy="35" nous devons les appliquer à des modifier leur opacité afin qu’elles
modifie l’opacité de la bulle et la déplace à r="35"/> éléments différents. En SVG on peut apparaissent et disparaissent en fondu
la verticale dans la viewbox ; la deuxième </g> utiliser l’élément <g> comme une div en au début et à la fin de l’animation.
crée l’effet de tremblement pour plus de ... HTML : nous devons encadrer toutes les @keyframes up {
réalisme. On gère les décalages en ciblant </g> bulles (qui sont déjà groupées) par une 0% {
chaque bulle et en appliquant une durée <g class="bubbles-small" balise de type groupe. opacity: 0;
et un retard d’animation différents. stroke-width="4"> <g> }
<g transform="translate(147 <g transform="translate(10 10%, 90% {
1. SVG 984)"> 940)"> opacity: 1;
Pour faire nos bulles nous utiliserons <circle cx="15" cy="15" <circle cx="35" cy="35" }
le format SVG. Dans notre SVG nous r="15"/> r="35"/> 100% {

40 ________________________________________________ dossier

[Link] 40 26/02/2018 17:58

 ANIMATION CSS

opacity: 0; 5. PRÉPARER LES ÉLÉMENTS LE CODE

[Link]/PxF2R
transform: translateY(-1024px); À L’ANIMATION
} Afin d’appliquer l’animation à nos bulles quelques secondes les uns des autres,
} nous emploierons les groupes que nous et que cela se répète à l’infini. Pour finir,
avons déjà utilisés auparavant, et nous appliquons une fonction de
4. TREMBLEMENT "nth-of-type" pour identifier chaque timing "ease-in-out" à notre animation
Afin de créer un effet de tremblement il groupe de bulles. Nous commençons par de tremblement pour qu’elle ait l’air un
nous suffit de déplacer la bulle (d’en faire appliquer une valeur "opacity" aux bulles peu plus naturelle.
une translation) vers la gauche et la et à la propriété "will-change" afin de faire .bubbles-large g:nth-of-type(1) { STEVEN ROBERTS
droite, d’exactement le nombre de pixels usage de l’accélération matérielle. animation: up 6.5s infinite; } Steven est le développeur front-
qu’il faut. Si on la déplace trop l’animation .bubbles-large > g { .bubbles-large g:nth-of-type(1) end principal de Better Brand
sera trop saccadée et décousue, tandis opacity: 0; circle { Agency à Middlesbrough, au
que si l’on ne la déplace pas assez elle will-change: transform, opacity;} animation: wobble 3s infinite Royaume-Uni. Cette fois-ci il écume
le web pour trouver les meilleures
ne se verra pas. Quand on fait des .bubbles-large g:nth-of-type(1) ease-in-out; }
animations à décortiquer et
animations, il est essentiel d’expérimenter. {...} ...
à recréer. Lisez leur code et
@keyframes wobble { ... bubbles-small g:nth-of-type(9) découvrez le secret de l’élaboration
33% { .bubbles-small g:nth-of-type(10) circle { de belles animations pratiques sur
transform: translateX(-50px); {...} animation: wobble 3s 275ms le web d’aujourd’hui.
} infinite ease-in-out; }
66% { 6. APPLIQUER LES ANIMATIONS .bubbles-small g:nth-of-type(10)
BETTER BRAND AGENCY
transform: translateX(50px); Nous voulons que les durées et {
[Link]
} } décalages des animations soient tous à animation: up 6s 900ms infinite;}

dossier _________________________________________________ 41

[Link] 41 26/02/2018 17:58

 Tutoriels

Créer des effets de

typographie
interactifs en 3D
Développez des effets de texte captivants, réactifs aux
mouvements de la souris et parfaits pour des en-têtes.

TÉLÉCHARGEMENT DES FICHIERS

[Link]
50 �������������������������������������������������tutoriel

[Link] 50 26/02/2018 17:58

 Tutoriels

l
a typographie a toujours eu un rôle 2. Mettre la particule à jour [Link](force);
important pour les designers, qui Pour déplacer la particule, une fonction update va être }
sélectionnent la meilleure police pour exécutée à chaque image. Elle calculera la vélocité de la
transmettre un message et le présenter particule et l’accélération de la vélocité. La vélocité sera 5. Afficher la particule
de façon optimale. Au cours des huit dernières années, limitée par une variable globale que nous ajouterons plus La fonction show affiche la particule. Elle commence par
les webdesigners ont eu la possibilité d’ajouter des tard. La vélocité est ajoutée à la position de la particule ajouter un contour gris clair d’un pixel pour créer la ligne. La
polices personnalisées dans leurs designs. Ils ont individuelle. En créant d’abord une particule, nous ligne est dessinée entre sa position actuelle et sa dernière
aujourd’hui le même contrôle sur la typographie que les pourrons ensuite ajouter plusieurs milliers de particules position dans l’image précédente. La position précédente
designers print. En regardant les sites qui sont à l›écran à n’importe quel moment. est stockée pour son prochain passage dans la boucle.
récompensés ou élus « site du jour », on s’aperçoit que [Link] = function () { [Link] = function () {
l’utilisation de la typographie est au cœur du design et [Link]([Link]); stroke(180);
qu’elle leur permet de se démarquer des autres [Link]([Link]); strokeWeight(1);
productions. Il peut s’agir de formes de lettres animées, [Link]([Link]); line([Link].x, [Link].y, this.
de réactions aux interactions utilisateur, ou encore de [Link](0); prevPos.x, [Link].y);
textes géants qui occupent tout l’écran. L’effet que nous } [Link]();
allons créer dans ce tutoriel utilise des masques en forme }
de lettres sur des traînées de particules fluides qui vont 3. Suivre le courant [Link] = function () {
tournoyer dynamiquement et passer dans les lettres. Pour donner aux particules leur mouvement fluide, nous [Link].x = [Link].x;
L’animation sera très belle, et comme elle sera affichée allons ajouter un champ de propagation généré par le bruit. [Link].y = [Link].y;
dans l’élément canvas HTML5, nous allons la transformer La fonction créée ici permet de générer le courant puis de }
en 3D pour qu’elle pivote vers la souris lorsqu’elle se forcer les particules à le suivre, d’où son nom. La force de la
déplace sur l’écran. Cet effet est parfait pour les en-têtes direction du vecteur sera appliquée à la particule. 6. Envelopper
de sites, ou simplement pour attirer l’attention des [Link] = function (vectors) { La fonction edges calcule si la particule atteint le bord
utilisateurs sur un call-to-action. var x = floor([Link].x / scl); de l’écran. Si c’est le cas, elle l’enveloppe pour la
var y = floor([Link].y / scl); repositionner de l’autre côté. Ce morceau de code gère la
1. Commencer le processus var index = x + y * cols; position x. Nous détectons si la position x est supérieure
Ouvrez le dossier start des fichiers du projet dans votre var force = vectors[index]; à la largeur de l’écran. Si c’est le cas, nous envoyons
éditeur de code. Nous allons commencer par créer la [Link](force); la particule de l’autre côté de l’écran et vice versa.
classe d’objet particule. Elle nous servira à créer l’image } [Link] = function () {
affichée dans le texte. Ouvrez le fichier [Link] et if ([Link].x > width) {
ajoutez la variable suivante pour commencer à créer 4. Suivre, mais pas de trop près [Link].x = 0;
la particule de base. Pour éviter que toutes les particules s’agglomèrent,
function Particle() { ce qui est vite fait dans ce type de mouvements,
[Link] = createVector(random(width),
random((height - 100)));
nous ajoutons un facteur aléatoire à la position des
particules, pour qu’elles se dispersent légèrement.
Définir une particule
Une particule peut être vue comme un grain de
[Link] = createVector(0, 0); [Link] = function (vectors) { poussière vu dans un rayon de lumière. Numériquement,
[Link] = createVector(0, 0); [Link].x += random(-0.9, 0.9); elle peut représenter n’importe quoi, de la neige, de la
[Link] = maxSpeed; [Link].y += random(-0.9, 0.9); pluie, des explosions ou la manière dont un liquide se
déplace. Il faut généralement beaucoup de particules
[Link] = [Link](); }
pour créer un système de particules.
[Link] = function (force) {

À gauche
Cet effet est réalisé en grande partie grâce à la
bibliothèque [Link], qui ajoute un certain nombre d’outils
pratiques pour dessiner dans l’élément canvas HTML5.
Coin gauche
La mise en page basique en HTML5 a été créée en amont
pour que vous puissiez vous concentrer sur l’intégration
des lignes fluides de l’effet de texte en JavaScript.
Coin droit
Une fois que la classe d’objet particule est créée, un certain
nombre de particules sont ajoutés sur la page. Les lignes
fluides sont visibles avant l’ajout de l’effet de texte.

tutoriel ��������������������������������������������������51

[Link] 51 26/02/2018 17:58

 Tutoriels

Créer des UI ultra

fluides en CSS et JS
Créer des animations à 60 images par seconde en utilisant
les dernières propriétés CSS et l’API Web Animations.

TÉLÉCHARGEMENT DES FICHIERS

[Link]
54��������������������������������������������������tutoriel

[Link] 54 26/02/2018 17:58

 Tutoriels

P
lus un site web devient complexe, plus 2. Passer au calque supérieur barre latérale. N’oubliez pas de noter l’état de la barre
la performance est un problème. Pour l’instant, il n’y a pas de couche en plus et notre barre latérale dans le module.
On porte souvent beaucoup d’attention latérale est au milieu de la page. Cette couche let visible = false;
au chargement initial de la page, mais superposée doit occuper tout l’écran et mettre en avant [Link]('click',
moins à la performance du site à l’usage. Les utilisateurs la barre latérale. Nous devons modifier sa position et lui toggleSidebar);
veulent des pages fluides, tout le temps. Les navigateurs faire occuper 100% du viewport. function toggleSidebar() {
optimisent ce qu’ils peuvent, mais il n’est pas toujours Dans [Link], ajoutez du code pour que la couche if (visible) {
facile de savoir quelles étaient les intentions initiales superposée remplisse tout l’écran. N’oubliez pas d’ajuster hideSidebar();
du développeur. le z-index pour qu’elle soit au-dessus du contenu de la } else {
Une bonne performance résulte d’un équilibre délicat page. showSidebar();
entre HTML, CSS et JavaScript. Ils jouent tous un rôle .sidebar { } }
dans l’affichage de la page, à différents stades. On peut position: fixed;
risquer de paralyser un site si on se concentre trop sur top: 0; 5. Ajouter le code pour afficher/
l’un d’entre eux. Plus on enlève de pression du thread left: 0; masquer
principal, plus il aura de temps pour répondre aux actions width: 100%; Plutôt que d’animer en JavaScript, nous allons utiliser
de l’utilisateur. En utilisant certaines nouvelles options du height: 100%; du CSS. Les navigateurs arrivent mieux à gérer les
navigateur, nous pouvons lui dire ce qu’il peut exécuter background-color: rgba(0,0,0,0.5); animations CSS que l’ajustement des positions top et left
en dehors du thread principal. z-index: 2; } avec JavaScript.
Dans ce tutoriel, nous allons créer deux petites Créez les fonctions show et hide qui ajoutent
animations sur l’interface pour donner vie à un site web 3. Masquer par défaut et retirent la classe visible de sidebar pour l’afficher
assez basique. La première sera une barre latérale Notre barre latérale est maintenant bien jolie, mais elle ou la masquer, et mettent l’état interne à jour.
glissante, pour laquelle nous utiliserons uniquement du est tout le temps à l’écran. Elle devrait être cachée au function showSidebar() {
CSS. La seconde animation sera liée à l’ajout d’un produit chargement de la page et ne s’afficher que lorsqu’elle [Link]('
dans le panier. Comme nous allons utiliser l’API Web est appelée. sidebar--visible');
Animations, nous devons utiliser un navigateur Normalement, nous pourrions régler le problème en visible = true;
compatible, comme Chrome ou Firefox. utilisant display: none, mais pour obtenir une animation }
fluide dès le départ, notre élément doit être prêt à function hideSidebar() {
1. Ajouter la structure de la barre bouger. [Link]('
latérale Ajouter deux propriétés dans les styles de sidebar sidebar--visible');
Avant de commencer, il est important d’avoir la bonne pour la rendre invisible et pour la rendre non-interactive, visible = false;
structure HTML. Nous voulons éviter d’ajouter du code puis inversez-les sur la classe visible. }
inutile qui compliquerait l’animation. .sidebar {
La <div> sidebar agira comme une couche […] 6. Cacher au clic sur la couche
superposée lorsque la navigation disparaît. Elle aura opacity: 0; superposée
un élément <nav> enfant qui devient la barre latérale, pointer-events: none; Quand l’utilisateur clique sur la couche superposée
et qui sera le seul élément transformé. } ou sur un élément de la barre latérale, nous devons
Ouvrez [Link] et ajoutez le code suivant dans .[Link]--visible { à nouveau tout cacher.
la <div> sidebar : pointer-events: auto; Nous pouvons appliquer un écouteur sur le conteneur
<nav class="sidebar__contents"> opacity: 1; } de la barre latérale pour économiser de la mémoire en
<ul class="sidebar__nav">
<li class="sidebar__nav-item"> 4. Activer la visibilité de la barre
<a href="#home" class=" latérale Visibilité vs opacité
sidebar__nav-item-link">Accueil</a> Le bouton en haut à gauche va déclencher l’apparition visibility: hidden et opacity: 0 servent tous les deux
</li> de la barre latérale. Nous avons besoin de JavaScript à masquer un élément, mais modifier la visibilité va
redessiner la page, ce qui peut être gourmand en
</ul> pour montrer et masquer la barre latérale au clic. Ouvrez
termes de calculs et doit être évité.
</nav> [Link] et ajoutez un écouteur pour afficher/cacher la

À gauche
Modifier les
propriétés CSS
peut provoquer
différents
comportements
selon les
navigateurs. Le
site csstriggers.
com regroupe ces
comportements
par propriété.
Ci-dessus
N’oubliez pas d’inverser la propriété pointer-events, sinon les
utilisateurs ne pourront interagir avec la barre latérale qu’avec
le clavier.

tutoriel ������������������������������������������������� 55

[Link] 55 26/02/2018 17:58

 LES MEILLEURES API

LES MEILLEURES

API
DU MOMENT
DÉCOUVREZ LES API HTML ET EXTERNES DU WEB
DE LA PROCHAINE GÉNÉRATION

70 ________________________________________________ dossier

[Link] 70 26/02/2018 17:59

 LES MEILLEURES API

QU’EST-CE QUI CONSTITUE UNE API ?

LES CRITÈRES POUR ÊTRE UNE API.
Quand vous écrivez du code dans fonctionnalités basiques du langage
n’importe quel langage, vous utilisez que tous les programmeurs Java
certainement plusieurs d’API sans le connaissent.
savoir. Dans sa forme la plus simple, une Ce sont les API qui nous permettent
API (Application Programming Interface) de créer des fonctionnalités utiles dans
est une spécification clairement définie le logiciel que nous écrivons. Bien sûr, les
pour communiquer entre deux composants logiciels ont toujours eu
composants logiciels. Les API peuvent besoin de communiquer, mais ce qui fait
prendre différentes formes, mais incluent d’une API une API, ce sont les concepts
généralement une combinaison de de standardisation, d’ouverture, et de
fonctions ou de méthodes, et des ré-utilisabilité. Les fonctionnalités
structures de données. En résumé, elles sous-jacentes sont présentées dans une
offrent des fonctionnalités pré-fabriquées documentation qui permet à n’importe
que vous pouvez utiliser pour qui de les utiliser. Si vous travaillez dans
développer votre propre application. le domaine technologique, il est fort
Java est livré avec un ensemble d’API probable que votre entreprise développe
dans ses paquets java.*. Elles offrent les son propre écosystème d’API.

QU’EST-CE QU’UNE API NAVIGATEUR ?

APPRENEZ À FAIRE LA DIFFÉRENCE.
Dans le contexte du web, vous voyez ensemble d’API, qui sont constamment
Le développement web est en constante évolution. peut-être les API comme des services
offerts par des tiers. Par exemple,
mises à jour. Ces « API côté-client »
fournissent de nombreuses options
Les organismes de normalisation et les navigateurs Google propose l’API Google Maps, basiques qui semblent toujours avoir fait
introduisent en permanence de nouvelles API sur le web, que vous pouvez utiliser en tant que partie de JS, comme la manipulation du

qui nous aident à développer des sites et des apps plus développeur pour intégrer des cartes
Google dans vos apps. Cela nécessite
DOM, l’intégration de graphismes ou de
sons, ou encore l’interface entre le code
facilement, ou à réduire l’écart entre les logiciels natifs et d’importer des scripts hébergés sur et l’appareil que vous utilisez. Vous avez

ceux des navigateurs. Suivre les avancées et adopter les les serveurs Google, puis d’utiliser des
objets et des fonctions de ces scripts en
probablement déjà lu la documentation
sur ces fonctionnalités en ligne lorsque
nouvelles API lorsqu’elles sont suffisamment supportées suivant la documentation de l’API. Les vous avez créé un site ou une app. Ces

peut vraiment vous simplifier la vie, et garantir une API comme celle-ci sont généralement
appelées des « API côté-serveur ».
API sont généralement basées sur une
seule spécification qui garantit que tous
expérience moderne pour vos utilisateurs. Néanmoins, vous n’avez peut-être les navigateurs implémentent les
jamais compris que les fonctionnalités fonctionnalités uniformément, pour que
SIMON JONES
Directeur d’ingénierie logicielle
JS basiques intégrées dans le navigateur
sont également composées d’un
votre code fonctionne dans tous les
navigateurs.

LES API COURAMMENT UTILISÉES L’ÉCOSYSTÈME JAVASCRIPT ENTIER EST CONSTRUIT À PARTIR D’API,
QUE VOUS CONNAISSEZ DÉJÀ SÛREMENT POUR LA PLUPART.
CANVAS & SVG XMLHTTPREQUEST WEB SOCKETS FONCTIONS DU DOM
[Link] [Link] [Link] [Link]
[Link] XMLHttpRequest est l’API JavaScript Web Sockets permet à une session de Même les fonctions JavaScript
Canvas et SVG sont les exemples utilisée pour envoyer des requêtes communication bidirectionnelle d’être principales permettent de faire des
les plus évidents d’API navigateur asynchrones à un serveur. Cela peut ouverte entre un navigateur et un choses comme manipuler le DOM.
largement utilisées. Toutes deux vous permettre, par exemple, de serveur. Cela permet au serveur d’offrir Voyez l’objet document comme un
proposent un ensemble simple de récupérer des données d’un serveur des mises à jours à l’utilisateur sans que point d’accès. Cela signifie que même
points d’accès et de fonctions et de mettre à jour une page sans avoir le navigateur ait besoin d’interroger le si elles sont définies dans une
JavaScript pour remplir leurs objectifs à recharger la page entière. Son nom est serveur à intervalles réguliers. Les Web spécification distincte, il y a peu de
respectifs. On pourrait également un anachronisme puisqu’elle fonctionne Sockets sont utilisés sur de nombreux différence entre les nouvelles API que
ajouter WebGL à la liste, pour les aussi bien avec JSON qu’avec XML. D’ici sites. Sur Stack Overflow, ils servent à nous allons explorer et les fonctions
graphismes en 3D, mais nous y quelque temps, elle sera probablement envoyer des notifications live en cas de JavaScript de base qui existent depuis
reviendrons plus tard. remplacée par l’API Fetch. réponse à des questions. des années.

dossier __________________________________________________71

[Link] 71 26/02/2018 17:59

 LES CONSOLES DES NAVIGATEURS

LES CONSOLES
DES NAVIGATEURS MOZILLA ET GOOGLE ONT RÉCEMMENT PLACÉ LA BARRE ENCORE PLUS HAUT
EN OFFRANT DES CONSOLES AVANCÉES DANS LEURS NAVIGATEURS WEB. NOUS VOUS
MONTRONS LES DEUX DIFFÉRENTES APPROCHES ET COMMENT LES UTILISER
AU MIEUX DANS VOS PROJETS.

78_________________________________________________ dossier

[Link] 78 26/02/2018 17:59

 LES CONSOLES DES NAVIGATEURS

À QUOI ÇA SERT ?
GOOGLE CHROME A UN ONGLET
CONSOLE DEPUIS LONGTEMPS.
EXAMINONS-LE DE PLUS PRÈS.
Les consoles peuvent servir à plusieurs
choses : traditionnellement, les
développeurs web les utilisent pour
afficher des informations textuelles
pour débugger ou pour afficher les
journaux de débogage. Google a pour
objectif d’améliorer les fonctionnalités
existantes de l’onglet Console, qui ont
déjà cependant fait leurs preuves.
Google va même jusqu’à intégrer sur
son système d’exploitation mobile une
des options de journalisation les plus
avancées. Si vous avez déjà utilisé
LogCat et que vous devez revenir à
une implémentation inférieure, vous
allez souffrir. Google concentre donc
le travail de ses équipes sur des
DÉBUTER
fonctionnalités qui améliorent
POUR OUVRIR LA CONSOLE, IL SUFFIT DE FAIRE CTRL+MAJ+J. d’avertissement indiquent que vous
l’expérience existante. Par exemple, les Une fois que la fenêtre de la console est [Link](“Ceci est une pouvez obtenir plus d’informations.
informations peuvent désormais être à l’écran, il est temps de commencer à erreur !”); Une option très pratique vous
regroupées, pour pouvoir mieux suivre afficher des informations du journal. Au [Link](“Ceci est un permet de modifier l’affichage en
les données du journal qui ne cessent lieu de simplement utiliser [Link], avertissement...”); passant des paramètres CSS ou printf :
d’augmenter. vous pouvez désormais utiliser un [Link](“Au revoir !”); [Link](“%cGros texte bleu”,
En bref, la console web de Chrome ensemble de fonctions. } “color: blue; font-size:
est la référence pour récupérer des Exécutez l’extrait de code JavaScript runMe() x-large”);
données à utiliser pour des analyses suivant pour générer les résultats Comme vous pouvez le voir, les [Link](“%s has %d points”,
approfondies. Chrome offre même une affichés sur la capture ci-dessus : avertissements et les erreurs sont “Sam”, 100);
solution simple pour mesurer le temps <html> affichés de couleurs différentes dans le N’oubliez pas que les résultats de la
d’exécution. En bref, la console propose <body> journal. Cela vous permet de remarquer console peuvent être sauvegardés à tout
un ensemble de fonctionnalités <script> facilement les erreurs pertinentes. De moment. Faites simplement un clic droit
vraiment intéressantes qui méritent function runMe(){ plus, les petites icônes affichées sur le sur la fenêtre de la console et
toute votre attention. [Link](“Bonjour!”); côté gauche des lignes d’erreur et sélectionnez Save as.

RÉDUISEZ LES PROBLÈMES DE PERFORMANCE

SURVEILLER LE COMPORTEMENT DU SYSTÈME AVEC LES API D’ASSISTANCE.
Pour effectuer une analyse du temps d’exécution de fib() peut être analysé N’oubliez pas que tous les fib(80000000);
d’exécution, nous devons créer un avec la console web : microbenchmarks comme celui-ci sont, }
système inefficace dont nous allons function runner(){ par définition, imprécis. Pour obtenir Les personnes attentives auront
ensuite examiner les performances. La [Link](“On lance le des données comparables et peut-être remarqué que la timeline du
complexité de l’algorithme de Fibonacci Fib!”); intéressantes en les utilisant, il faut une navigateur se remplit lorsque l’exemple
nous donne plusieurs solutions pour fib(20000000); certaine rigueur scientifique, ce qui primitif fib est exécuté. La capture
créer des implémentations idiotes et fib(40000000); pourrait faire l’objet d’un autre article. accompagnant cette étape montre la
peu performantes comme celle-ci : fib(60000000); vue zoomée : on peut discerner quelle
function fib(num){ fib(80000000); À VOS MARQUES ! invocation de fib prend le plus de temps.
var a = 1, b = 0, accu; [Link](“On lance le Récupérer les temps d’exécution ne Malheureusement, cela ne peut pas être
while (num >= 0){ Fib!”); suffit généralement pas. La console web combiné avec l’enregistrement normal
accu = a; } Chrome vous permet en plus de tracer time() à cause de bizarreries de Chrome.
a = a + b; runner() des évènements spécifiques. Nous allons
b = accu; time et timeEnd prennent en paramètre essayer ici en créant la fonction suivante : RAPIDE CAR NON EXISTANT
num--; une chaîne de caractères qui identifie le function runner(){ La logique nous dit que le code le plus
} processus de comptage déclenché. À [Link](“C’est rapide est celui qui n’est jamais exécuté.
return b; l’invocation de timeEnd, la console émet parti !”); La fonction count() vous permet de
} un message contenant à la fois la chaîne fib(20000000); trouver exactement quelles méthodes
Dans l’étape suivante, le temps et le temps écoulé du début à la fin. [Link](“fib8”); sont invoquées et à quelle fréquence.

dossier _________________________________________________79

[Link] 79 26/02/2018 17:59

 NE MANQUEZ AUCUN NUMÉRO
OFEFUERRETS
DE
HRMATION [Link]
3DE FO
87

en anglais

2018
AVRIL - MAI

T I O N
JavaScript

A
jQuery

M
RECEVEZ
CSS3

I
HTML5

AN

CSS +
BEL/LUX : 8,90€
- DOM/S : 8,90€
- CAL/S
: 1100 CFP - POL/S

1 AN - 6 NUMÉROS
LA COUV
EN
: 1150 CFP - CH

ACTION
Page 3
: 15,80FS - CAN

60 IMAGES
TUTO
RIEL

PAuezRle décSE COND&EJS

: 14,95$CAD

10API HTML
lencheur avec CSS

LE LIVRE WEBDESIGN
- MAR : 90 MAD

Bloq

NNJOAURND’THUESI
TE
À UTILISER TOUT DE SUI
ES É TO
IQ U GALLERY
- IT/[Link]

20 T E C H N FETS D’AU
NT : 8,50€

EURS EF
RECRÉEZ LES MEILL

au prix de 42€
CONSTRUISEZTIVÉE
UNE APPLI AC MASTERCLASS
PAR LA oVO IX CONSOLES
DE NAVIGATEUR
list avec [Link]
Codez une to-d

seulement
CRÉEZ DES EFFETS
ger dans votre code
Des outils pour plon

DEtezTEde l’intéXTractiEon3Dà votre typographie

Ajou
26/02/2018
16:21

au lieu de 65,30€
indd 1
001_COUV.
BDMAR18_
10MAGWE

SOIT 36 %
DE RÉDUCTION !*

ABONNEMENT À
A découper ou à photocopier, puis à retourner complété et accompagné de votre règlement à l’adresse suivante :
CRM ART – WEB DESIGN – Service Abonnements – CS15245 – 31152 Fenouillet cedex - France
Informatique et Libertés : en application de l’article L.27 de la loi du 6 janvier 1978, relative
à l’informatique et aux libertés, vous disposez d’un droit d’accès et de rectification pour toute
information vous concernant en vous adressant à notre siège social. Les informations requises sont

❒ Oui, je m’abonne à Web Design pour 1 an - 6 nos + Le livre webdesign gallery au prix de 42 € au lieu de 65,30 € (36 % de réduction)*
❒ Oui, je m’abonne à Web Design pour 1 an - 6 nos, au prix de 38 € au lieu de 47,40 € (20 % de réduction)
L’abonnement prendra effet à partir de Web Design n° 88, parution le 23 mai 2018, si le coupon est renvoyé avant le 11 mai 2018.

NOM PRÉNOM
ADRESSE
nécessaires à l’établissement de votre abonnement.

CODE POSTAL VILLE

EMAIL
Date et signature obligatoires : Je règle aujourd’hui par : chèque bancaire ou postal à l’ordre de Web Design / ORACOM SA

n
WD87D

* offre valable jusqu’au 22 mai 2018, en France Métropolitaine uniquement. Si vous êtes à l’étranger ou dans les DOM-TOM, abonnez-vous sur la boutique en ligne à l’adresse suivante :
[Link]. Le livre webdesign gallery est disponible pour tout abonnement à l’offre de 42€, dans la limite des stocks disponibles. Ce produit peut être acheté séparément au
prix de 17,90 € auprès du Service client : service-client@[Link]

10MAGWEBDMAR18_068-069_DOUBLEABO.indd 69 27/02/2018 17:13