10 composants AMP (Accelerated Mobile Pages) importants que vous devez savoir

Accelerated Mobile Pages ou AMP est l'initiative de Google pour rendre le Web mobile plus rapide . Pour atteindre cet objectif, les normes AMP limitent la façon dont vous pouvez utiliser HTML, CSS et JavaScript, et gère le chargement de ressources externes, telles que des images, des vidéos et des publicités via son propre environnement d'exécution .

Cela implique que vous ne pouvez pas utiliser de JavaScript personnalisé (écrit par l'auteur ou de tiers) ou d'éléments HTML liés aux ressources tels que des images et des vidéos dans vos documents AMP.

Pour combler le fossé entre les besoins des utilisateurs et les meilleures pratiques de performance, AMP a des composants spécifiques que vous pouvez utiliser à la place de ces éléments exclus .

Les composants AMP sont des balises HTML spécifiques . Ils se comportent comme des balises HTML ordinaires: ils ont des balises d'ouverture et de fermeture, des attributs, et la plupart d'entre eux peuvent être stylés avec CSS. Ils peuvent être facilement reconnus, car ils commencent toujours par le préfixe d' amp- .

Il existe deux types de composants AMP: les composants intégrés et étendus .

Composants AMP intégrés

Les built -ins sont intégrés dans le runtime JavaScript d'AMP, vous n'avez donc pas besoin de les inclure séparément.

1. amp-img

remplace le tag dans les documents HTML AMP. Vous devez ajouter les attributs src et alt exactement comme lorsque vous travaillez avec le standard élément.

possède également deux autres attributs obligatoires: vous devez toujours spécifier les attributs width et height dans les valeurs de pixels entiers, car cela permet au runtime AMP de calculer la disposition à l'avance .

Si vous voulez rendre l'image réactive, ajoutez l'attribut layout="responsive" . L'attribut layout contrôle la disposition dans les documents AMP et peut être ajouté à tous les composants AMP (pour en savoir plus sur le système AMP Layout).

Vous pouvez également utiliser l'attribut srcset sur le tag pour spécifier différentes images pour différentes fenêtres et densités de pixels. Cela fonctionne de la même manière qu'avec les images non-AMP.

2. amp-video

peut être utilisé pour intégrer directement des vidéos HTML dans des documents HTML AMP. Il remplace le

La source de la vidéo doit être diffusée via le protocole HTTPS . Vous devez ajouter les attributs width et height, tout comme avec le composant.

le tag a de nombreux attributs optionnels, tels que autoplay et poster que vous pouvez spécifier pour affiner la façon dont votre vidéo HTML5 est affichée.

supporte mp4, webm, ogg, et tous les autres formats supportés par HTML5

Si vous le souhaitez, vous pouvez également ajouter des vidéos de remplacement pour les utilisateurs dont les navigateurs ne prennent pas en charge les vidéos HTML5, en utilisant l'attribut fallback et le Balise HTML

Votre navigateur ne prend pas en charge les vidéos HTML5.

3. amp-ad et amp-embed

vous fournit des sandbox iframe dans lesquels vous pouvez afficher vos annonces . Vous devez diffuser vos annonces via le protocole HTTPS .

Vous ne pouvez pas exécuter vous-même les scripts fournis par votre réseau publicitaire. Au lieu de cela, le moteur d'exécution AMP exécute le code JavaScript du réseau donné dans le sandbox. Vous devez seulement spécifier le réseau que vous utilisez et ajouter vos données.

le Le composant vous oblige à ajouter les dimensions de l'annonce à l'aide des attributs width et height .

Vous pouvez définir le réseau publicitaire que vous utilisez avec l'attribut type . Voir la liste des réseaux publicitaires pris en charge

Chaque réseau publicitaire a ses propres attributs data-* vous devez également ajouter. Pour voir celui dont vous avez besoin, cliquez sur votre réseau publicitaire dans la liste ci-dessus.

est l'alias de , la documentation ne dit pas grand-chose à part qu'elle peut être utilisée à la place de quand c'est sémantiquement plus précis . Comme Google promet de faire évoluer les composants AMP liés à la publicité au fil du temps, cela pourrait changer à l'avenir.

4. amp-pixel

Avec , vous pouvez ajouter un pixel de suivi à vos documents HTML AMP pour compter les pages vues . Il n'a qu'un seul attribut, l'attribut src requis, dans lequel vous devez spécifier l'URL appartenant au pixel de suivi .

le tag permet des substitutions d'URL standard, ce qui signifie que vous pouvez générer une valeur d'URL aléatoire pour suivre chaque impression.

Consultez le guide de substitution d'URL d'AMP si vous souhaitez utiliser ce composant. Notez que vous ne pouvez pas styler le composant.

Composants AMP étendus

Comme les composants AMP étendus ne font pas partie du runtime JavaScript, vous devez toujours les importer dans le section de la page AMP sur laquelle vous souhaitez les utiliser.

Note: les versions des composants peuvent changer dans le futur, alors n'oubliez pas de vérifier la version actuelle dans la documentation.

5. amp-audio

remplace le

Pour l'utiliser, vous devez spécifier les attributs src, width et height, et vous pouvez également ajouter trois attributs optionnels: autoplay, loop et muted .

Il peut également être judicieux d' ajouter des fichiers audio de secours pour les utilisateurs dont les navigateurs ne prennent pas en charge HTML5. Vous pouvez le faire en utilisant l'attribut fallback et le tag, tout comme avec le susdit composant.

le Le composant AMP prend en charge les mêmes formats audio que le

Votre navigateur ne supporte pas l'audio HTML5.

Utiliser , incluez le script suivant dans le section de votre document AMP:

6. amp-iframe

affiche un iframe dans les documents AMP. a été conçu pour être plus sécurisé que les iframes HTML classiques. Par conséquent, ils sont sandboxed par défaut .

Il y a quelques règles liées à Vous devez suivre pour valider.

Vous devez spécifier les attributs width, height et sandbox . L'attribut sandbox est vide par défaut, mais vous pouvez lui donner des valeurs différentes afin de modifier le comportement de l'iframe, par exemple sandbox="allow-scripts" permet à l'iframe d'exécuter JavaScript. Vous pouvez également utiliser les attributs des iframes standard.

Alors que les dimensions de sont prédéfinies par les attributs width et height, il existe un moyen de le redimensionner en runtime. Pour utiliser le composant, ajoutez le script suivant à votre page AMP:

7. amp-accordion

Les accordéons constituent un modèle d'interface utilisateur fréquent dans la conception mobile, car ils permettent d'économiser de l'espace, tout en affichant le contenu de manière accessible. permet d' ajouter rapidement des accordéons aux pages AMP.

Les sections de l'accordéon doivent utiliser le

Tag HTML5, et doivent être les enfants directs de la marque.

Chaque section doit avoir deux enfants directs :

1. un pour le titre
2. un pour le contenu (le contenu peut aussi être une image)

Utilisez l'attribut expanded sur toute section que vous souhaitez développer par défaut.

Section 1 
 Contenu de la section 1 
Section 2 
Contenu de la section 2
Section 3 

Pour utiliser le composant dans votre document AMP, inclure le script suivant:

8. amp-lightbox

ajoute une lightbox à différents éléments (dans la plupart des cas, des images) sur les pages mobiles accélérées.

Lorsque l'utilisateur interagit avec l'élément, par exemple en tapant sur celui-ci, la visionneuse se développe et remplit l'ensemble de la fenêtre . Vous devez ajouter un bouton ou un autre contrôle sur lequel l'utilisateur peut appuyer.

Notez que l' amp-lightbox ne peut être utilisé qu'avec la disposition nodisplay .

 Développer 

Pour utiliser le composant, vous devez l'importer avec le code suivant:

9. amp-carousel

Les carrousels sont fréquemment utilisés dans la conception mobile, car ils permettent d' afficher de nombreux éléments similaires (le plus souvent des images) le long de l'axe horizontal. Les résultats AMP sont également présentés dans un format carrousel dans la recherche Google.

le composant vous permet d'ajouter des carrousels à votre site. Les enfants directs de la composant sera considéré comme les éléments du carrousel . Vous devez définir les dimensions du carrousel avec les attributs width et height .

Vous pouvez utiliser l'attribut type facultatif pour déterminer comment afficher les éléments du carrousel . Si l'attribut type prend la valeur "carousel", les éléments seront affichés sous la forme d'une bande continue (c'est la valeur par défaut), tandis que la valeur "slides" affichera les éléments au format des diapositives .

le tag a également d'autres attributs optionnels qui peuvent vous aider à affiner le résultat.

Dans l'exemple ci-dessous, remarquez que le carrousel et tous ses éléments utilisent les mêmes valeurs de width et de height .

le Le composant nécessite l'ajout du script suivant:

10. amp-analytics

peut être utilisé pour collecter des données analytiques sur des pages AMP. Actuellement, prend en charge quatre types d'événements de suivi, mais cela peut changer à l'avenir:

1. Vue de page
2. Clics d'ancrage
3. Minuteur
4. Défilement

Utiliser , vous devez ajouter un objet de configuration JSON dans un

Ajoutez le script suivant au section de votre page HTML AMP pour importer le composant:

Mots finaux

Dans cet article, nous avons examiné tous les composants AMP intégrés et certains des composants étendus. Comme Accelerated Mobile Pages est encore nouvelle, beaucoup de choses peuvent changer à l'avenir, donc il vaut mieux garder un œil sur la documentation soit sur Github ou sur le site officiel de l'AMP.

Comme ces composants AMP sont open source, vous pouvez également contribuer au développement, même en créant votre propre composant . Si vous voulez voir à quoi ressemble une page AMP complète avec différents composants, vous pouvez consulter ces quelques exemples sur Github.

Développeurs: Larder est l'outil de bookmarking que vous aimerez

GitHub est une ressource puissante pour les développeurs de se connecter et de partager le travail. Mais ce n'est pas le meilleur outil d'organisation pour sauvegarder et trier les bibliothèques .Avec Larder, vous pouvez mettre en signet toutes vos bibliothèques, cadres, plugins et outils préférés en un seul endroit. Vous

(Conseils techniques et de conception)

Tiny Hands - La police libre inspirée par l'écriture de Donald Trump

Plus tôt cette année, un groupe d'étudiants en programmation a créé Trump Script, qui est une tentative de satire la campagne présidentielle de Donald Trump. Aujourd'hui, Buzzfeed a décidé de s'y joindre. Le graphiste de Font Bureau, Mark Davis, a créé une police gratuite inspirée de l'écriture de Donald.La police g

(Conseils techniques et de conception)