web development with amp beginning course

Confidential + Proprietary
Hamidou Bah
AMP
Débuter avec AMP
GDG Ratoma

Web Development
with AMP
Beginning Course Workshop

contentbazaar.co/20160314/pi-way
Content displaced by adsUnresponsive pagesSlow loading
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis
nostrud exercitation ullamco

How AMP helps
AMP HTML AMP JS AMP Cache

Comment AMP améliore les performances Web
● Étend le HTML en ajoutant des
balises pour les fonctionnalités
courantes du site Web
● JavaScript est restreint
● Le validateur signale des
problèmes qui pourraient
affecter l'accessibilité ou les
performances
● Les serveurs mettent en cache
et optimisent les pages AMP
valides
AMP HTML
AMP JS
AMP Cache

<amp-youtube
layout="responsive"
width="480"
height="270"
data-videoid="lBTB7yLsBY">
</amp-youtube>

Apprendre AMP pour apprendre le
développement web
Création de sites Web:
● CMS: pas de programmation
● JS / CSS / HTML: toute la programmation
● AMP: entre les deux

Conditions préalables
CSS
un ensemble de règles qui
définissent l'apparence de tout
HTML
langage de balisage standard
pour la création de pages Web
Javascript
le code sur un site Web, utilisé
pour rendre le site interactif

Suivez le code avec Glitch
● Editeur de code en ligne
● Recommandé pour terminer
les exercices du cours
● Exemples de code et de
solutions fournis en tant que
référentiels Glitch

Dépôt de glitch de cours pour débutants
● Ce cours commence ici :
https://glitch.com/~showy-
way
● Contient tout ce dont vous avez
besoin pour ce cours et les futurs
(par exemple, images et code
serveur)

Trouver nos images dans Glitch

Configuration du validateur AMP
● Extension Chrome qui détecte
les erreurs sur les pages AMP
● Fonctionne automatiquement
sur les pages AMP
● Trouvez l'extension en visitant
validator.ampproject.org et en
cliquant sur "Extension
Chrome".

Commençons notre voyage
● Les pages AMP ont ⚡ ou amp dans la balise HTML
● Des outils comme le validateur et le cache reconnaissent des sites
comme AMP
● Le validateur AMP peut montrer ce dont nous avons besoin pour une
page AMP valide
<html ⚡ lang="en">
<html amp lang="en">

Exemple de composant - <amp-img>
<amp-img
src="IMG-URL"
width="640"
height="480"
layout="responsive">
</amp-img>

Exemple de composant - <amp-twitter>
<amp-twitter
width="486"
height="657"
layout="responsive"
data-tweetid="ID">
</amp-twitter>

Exemple de composant- <amp-youtube>
<amp-youtube
data-videoid="ID"
width="480"
height="270"
layout="responsive">
</amp-youtube>

Ajout d'un script d’une extension composant
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,
initial-scale=1">
<style amp-boilerplate>(✄snip)</style>
<noscript><style amp-boilerplate>(✄)</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-twitter"
src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
</head>
<body>Hello World!</body>
</html>

Exercise 1 :
Notre premier
composant- <amp-img>

Objectifs de l'exercice
● Correction de l'erreur de validation sur notre site
● Utilisez notre premier composant AMP
● Découvrez comment les composants AMP remplacent certaines
balises HTML

<amp-img>
● Composant intégré
● Remplace la balise <img>
● Prend en charge le
chargement d'images
paresseux intelligent
● Nécessite des dimensions
pour permettre une mise en
page fluide

<amp-img>
● Remplacez <img> par <amp-
img> dans votre site
● Les dimensions de l'image
doivent être de 640 pixels sur
480 pixels
● Attributs requis:
● src
● largeur
● la taille

Solution
<amp-img
src= "https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2F
ricotta-racer.jpg?1540228217746"
width="640"
height="480">
</amp-img>

Disposition et dimensionnement des
composants
● L'image court toujours sur le côté de
l'écran sur les petits appareils
● La propriété de mise en page indique
à AMP comment ajuster la taille des
éléments sur différentes tailles de
page
● Pour résoudre le problème de mise
en page, nous allons lui donner une
mise en page de responsive

Disposition et dimensionnement des
composants
<amp-img
src="(✄snip)"
layout="responsive"
width="640"
height="480">
</amp-img>

Valeurs d'attribut de layout
● fixed - taille fixe sans réactivité
● intrinsic - conserve le rapport d'aspect mais a une taille intrinsèque
● responsive - conserve le rapport hauteur / largeur
● De plus, vous pouvez en lire plus dans la documentation!

Exercise 2 :
Incorporation de vidéo

● Intégrez une vidéo YouTube à notre site
● Entraînez-vous à utiliser la disposition sur un composant AMP
● Utiliser d'autres attributs de composant

<amp-youtube>
● Composant étendu
● Intègre une vidéo YouTube
● Besoin de l'ID de la vidéo
(c'est-à-dire
youtube.com/watch? V =
BlpMQ7fMCzA)

<amp-youtube>
● Ajoutez <amp-youtube> au bas de
votre site
● La taille est 480px par 270px
● L'ID vidéo est BlpMQ7fMCzA (utilisez
l'attribut data-videoid)
● La mise en page est réactive
● N'oubliez pas la balise script

Solution
<amp-youtube
data-videoid="BlpMQ7fMCzA"
layout="responsive"
width="480"
height="270">
</amp-youtube>

Ajout d'un script d’extension de composant
<!doctype html>
<html ⚡>
<head>
initial-scale=1">
<script async custom-element="amp-youtube"
src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
</head>
</html>

Navigation dans la documentation des
composants AMP
Comment trouver des composants au-delà de <amp-img> et <amp-
youtube>?
Nous utilisons la documentation!

● Nous voulons ajouter une collection d'images à
cliquer
● Un carrousel est implémenté avec <amp-
carousel>
● Jusqu'à présent, les composants ont été
relativement simples
● Nous avons besoin de la documentation pour
en savoir plus sur <amp-carousel>
Ajout d'un carrousel d'images

Questions sur les composants AMP
● Que fait ce composant?
● Comment utiliser ce composant?
● Comment puis-je personnaliser ce composant avec des attributs?
● Comment styliser ce composant?
● Ce composant a-t-il besoin de sa propre balise de script?
● Quelles dispositions ce composant prend-il en charge?

Exemple de documentation de composant AMP

Sections de documentation des composants
AMP
● Description - Que fait ce composant?
● Comportement - Comment utiliser ce composant?
● Attributs - Comment personnaliser ce composant avec des attributs?
● Style - Comment puis-je styliser ce composant?
● Script requis - Ce composant a-t-il besoin de sa propre balise de script?
● Disposition prise en charge - Quelles sont les dispositions prises en
charge par ce composant?

Exemple <amp-carousel>
<amp-carousel id="carousel-with-preview"
width="450" height="300" layout="responsive" type="slides">
<amp-img src="images/image1.jpg"
width="450" height="300" layout="responsive" alt="apples"></amp-img>
width="450" height="300" layout="responsive" alt="lemons"></amp-img>
width="450" height="300" layout="responsive" alt="blueberries"></amp-img>
</amp-carousel>

Exercise 3 :
Création d'un
diaporama d'images

● Ajouter un carrousel d'images sur notre site
● Entraînez-vous à utiliser la documentation AMP

Gestion des assets Glitch (mise à jour)

<amp-carousel>
● Ajoutez un carrousel au-dessus de la vidéo
YouTube
● Donnez-lui une mise en page réactive
● Le type de carrousel doit être des «diapositives»
● Le carrousel devrait reboucler après la dernière
diapositive
● Carrousel / images doivent être 412 px × 309 px
● Images: cheddar-chaser.jpg, cheese.jpg, mouse.jpg

Solution
<amp-carousel width="412" height="309" layout="responsive" type="slides" loop>
<amp-img width="412" height="309" layout="responsive" src="https://cdn.glitch.com/
d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366">
</amp-img>
d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785">
</amp-img>
d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963">
</amp-img>
</amp-carousel>

Ajout d'un script d’extension de composant
<!doctype html>
<html ⚡>
<head>
initial-scale=1">
<script async custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
</head>
</html>

Découvrir de nouveaux composants
● Je ne peux pas toujours connaître les noms des composants dont vous
avez besoin
● Trouver des composants en recherchant par nom ou par description
● La référence des composants AMP répertorie tous les composants
AMP par catégorie

Référence des composants AMP

AMP par l'exemple
● De nombreux exemples avec
du code
● Cas d'utilisation courants
● Accessible par des liens de la
documentation des
composants

Exercise 4 :
Ajout de liens de
partage social

● Ajoutez un ensemble de liens de partage social à notre site
● S'exercer à trouver un composant avec des informations limitées
● Utiliser la documentation pour implémenter le composant trouvé

Liens de partage social
● Donnez un moyen de partager du contenu avec d'autres réseaux
sociaux
● AMP fournit des paramètres par défaut préconfigurés pour les réseaux
sociaux les plus populaires
● Composant étendu

Social Sharing Links
● Trouvez le composant approprié dans la
documentation AMP
● Ajoutez les liens de partage social au bas de votre
page
● Permettre aux utilisateurs de partager avec: Email,
Tumblr, LinkedIn et Twitter
● Enveloppez les boutons de partage dans <div> avec
la classe "social-bar«
● La taille de chaque bouton est de 44 px × 44 px

Solution
<div class="social-bar">
<amp-social-share type="email" width="44" height="44"></amp-social-share>
<amp-social-share type="linkedin" width="44" height="44"></amp-social-share>
<amp-social-share type="tumblr" width="44" height="44"></amp-social-share>
<amp-social-share type="twitter" width="44" height="44"></amp-social-share>
</div>

Adding Extended Component Script
<!doctype html>
<html ⚡>
<head>
initial-scale=1">
<script async custom-element="amp-social-share"
src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js">
</script>
</head>
</html>

CSS and AMP
● CSS inclus dans la balise <style amp-custom> dans <head> ou en tant
que styles en ligne
o Cela améliore les performances de votre page!
● Restrictions CSS:
o Limite de 50 Ko
o Vous ne pouvez pas utiliser! Important
o Certains paramètres CSS sont restreints (comme la transition)

Exemple de CSS AMP
<style amp-custom>
body {
font-family: sans-serif;
line-height: 1.5rem;
padding: 20px;
}
p, h2 {
border: 1px dotted red;
}
</style>

AMP Validation
● Valid AMP is important, because valid AMP is good for your users
● Plus, you need valid AMP to get into AMP caches!
● AMP rules represent best practices in accessibility, performance, etc.
● Errors tell you there is room to improve the experience of your users

Le cache AMP
● Les robots des moteurs de recherche
recherchent les pages AMP et indiquent à un
cache AMP de les stocker
● Stocke uniquement les pages AMP valides
● Permet aux pages AMP d'être préchargées en
toute sécurité et efficacement
● Optimise les pages mises en cache

Optimisations des performances du cache AMP
● Caches les images et les polices
● Limite les dimensions maximales de l'image et ajoute srcset
● Convertit et compresse les images
● Assainit le HTML pour empêcher les attaques XSS ou les erreurs
d'analyse

Exercice bonus:
Construire le menu

● Ajoutez un menu de navigation à notre site
● S'exercer à utiliser des événements et des actions

<amp-sidebar>
● Masque le contenu jusqu'à son
ouverture
● La barre latérale avec ID sidebar1 peut
être ouverte avec des actions:
o sidebar1.open
o sidebar1.toggle
o sidebar1
● Peut se fermer avec l'action
sidebar1.close

Instructions pour l'exercice
● Dans <header> ajoutez un <div> contenant ☰ qui fait basculer le menu lorsque
vous appuyez dessus. Le <div> devrait avoir la classe navbar-trigger.
● Ajouter un composant <amp-sidebar> avec id sidebar1 et class sidebar
● La barre latérale doit contenir un élément <nav> avec la classe nav
● À l'élément <nav>, ajoutez une liste de quatre liens qui vont tous à # pour
l'instant: «Notre histoire», «Nos vélos», «Derniers modèles» et «Contact»
● Les balises <ul> doivent avoir une étiquette de classe
● Les balises <li> doivent avoir la classe nav-item
● Ajoutez un <div> à la barre latérale avec un ✕ qui ferme le menu lorsque vous
appuyez dessus

Solution
<header class="headerbar">
<div class="navbar-trigger" role="button" tabindex="0"
on="tap:sidebar1.toggle">☰</div>
<h2>Chico's Cheese Bicycles</h2>
</header>

Solution
<amp-sidebar class="sidebar" id="sidebar1" layout="nodisplay" side="left">
<div class="navbar-trigger" role="button" tabindex="0"
on="tap:sidebar1.toggle">✕</div>
<nav class="nav">
<ul class="label">
<li class="nav-item">
<a href="#">Our Story</a>
</li>
(✄snip)
</ul>
</nav>
</amp-sidebar>

Ajout d'un script de composant étendu
<!doctype html>
<html ⚡>
<head>
initial-scale=1">
<script async custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
</head>
</html>

Anatomie d'une page AMP
● Toutes les pages AMP commencent par le même code de base (le
passe-partout AMP)
● Vous pouvez simplement le copier depuis
amp.dev/documentation/guides-and-
tutorials/start/create/basic_markup
● Générateur de plaques de chaudière plus avancé sur:
amp.dev/boilerplate/

AMP Boilerplate
<!doctype html>
<html ⚡> | <html amp>
<head>
initial-scale=1">
</head>
</html>

AMP Boilerplate
<!doctype html>
<html ⚡>
<head>
initial-scale=1">
</head>
</html>

AMP Boilerplate
<!doctype html>
<html ⚡>
<head>
<meta name="viewport" content="width=device-width,
minimum-scale=1, initial-scale=1">
</head> <body>Hello World!
</body>
</html>

AMP Boilerplate
<!doctype html>
<html ⚡>
<head>
initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start
8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s
steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-
moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
</html>

Ce que nous avons construit
● Un site AMP de base sans
erreur de validation
● Nous avons ajouté à notre site:
● Images
● Carrousel
● Vidéo Youtube
● Boutons de partage social

Que se passe t-il après?
● Comment répondre aux entrées de l'utilisateur comme les clics ou les
pressions de touches
● Appeler des actions sur les composants pour les modifier
● Combiner des composants pour créer des interfaces utilisateur plus
élaborées
● Poursuivre la construction de notre site Cheese Bike
● Glitch repo avec tous les exercices terminés de ce cours sur:
glitch.com/~aquamarine-baritone

web development with amp beginning course

Contenu connexe

Tendances

web development with amp beginning course