Le projet Accelerated Mobile Pages (AMP) ne cesse de s’étoffer et d’élargir ses champs d’actions sur le plan du code AMP HTML. Le blog officiel a annoncé le 24 mai 2016 la sortie de 3 nouvelles balises ainsi que l’arrivée de classes dynamiques en CSS. Passons en revue ces nouveaux éléments…
Rappelons avant tout que l’objectif de l’AMP est d’accélérer considérablement l’affichage d’un maximum de contenus grâce à un système de cache novateur et efficace. Plus l’AMP HTML recouvrira de types différents de contenu, plus les pages web pourront être chargées rapidement (ou tout du moins, plus des pages web pourront opter pour AMP). Après avoir mis en place les balises classiques comme amp-video, amp-audio ou amp-img par exemple, le projet s’attèle désormais aux contenus bien plus spécifiques générés via des codes Javascript, comme les menus en sidebar déroulante, les menus accordéons (“accordion”), etc.
Les menus latéraux en slide (via une sidebar déroulante) sont monnaie courante dans pléthores de thèmes mobiles, et il peut se révéler intéressant d’accélérer considérablement leur temps de chargement. Les concepteurs du projet AMP ont donc pensé à la création d’une balise <amp-sidebar> pour contrôler ce type de média, et elle se révèle assez simple à mettre en oeuvre (la facilité de mise en oeuvre est relative, j’évoque cela si vous partez d’une feuille blanche, pas si vous devez modifier dynamiquement un menu latéral en version AMP HTML).
Certaines règles sont à respecter, comme le fait de n’avoir droit qu’à une seule <amp-sidebar> par page, d’une hauteur maximale de 100vh (donc une hauteur d’écran complète) ou encore que seulement certaines balises AMP HTML peuvent être contenus dans une sidebar de ce type.
Pour la mise en oeuvre, il faut retenir trois étapes, et c’est tout :
L’exemple ci-dessous est certainement plus parlant pour les néophytes :
Ce qui donne en image quelque chose comme ceci (exemple au ralenti, et pourtant déjà rapide) :
L’usage de menus accordéon (ou même de zone en montrer/cacher) est très courant sur le web, et les créateurs du projet AMP ne l’ont pas oublié. C’est pourquoi ils ont créé la balise <amp-accordion> pour répondre à ce besoin. Si son usage est assez évident, il faut bien avouer que son passage en AMP HTML a limité son champ d’action à cause des contraintes que la balise impose, dont voici quelques extraits :
Il suffit de tapoter (mobile) ou de cliquer sur un titre pour ouvrir la section masquée, c’est aussi simple que cela. Comme toujours, n’oubliez pas le script spécifique pour faire fonctionner la balise : <script async custom-element=”amp-accordion” src=”https://cdn.ampproject.org/v0/amp-accordion-0.1.js”></script>.
Voici un exemple simple :
En soi, cela semble simple à mettre en oeuvre, mais si vous devez effectuer une transformation dynamique d’un menu accordéon classique en version AMP HTML, c’est une autre histoire… Qui plus est, la limitation des deux blocs par section peut s’avérer peu pratique dans quelques cas de figures (mais c’est contournable), mais cela reste globalement simple à mettre en place. Voici un Gif animé fourni par le blog officiel pour représenter ce type de menu.
Difficile de ne pas comprendre l’objectif de la balise <amp-social-share> à la lecture de son nom. L’AMP HTML se dote donc d’une balise générique pour unifier les boutons de partage vers les réseaux sociaux. L’inconvénient de cette balise est son implémentation, pas du tout en adéquation avec des boutons de partage classiques (créés via des balises <a> ou <button>), il faudra donc réécrire complètement le code pour obtenir des boutons valides…
Tout se passe au sein de la balise ouvrante <amp-social-share>. Ce sont donc les attributs intégrés dans la balise ouvrante qui ont une importance capitale. Encore une fois, n’oubliez pas le script spécifique, mais vous devez commencer à vous en douter… 😀
La balise accueille plusieurs attributs, dont certains sont optionnels :
Par défaut, la documentation recommande de fournir les images des boutons en CSS, via un “background-image”. Mais il semble tout-à-fait possible d’intégrer une balise <amp-img> entre la balise ouvrante <amp-social-share> et la fermante </amp-social-share>, donc vous êtes libre sur ce point.
Voici un exemple succinct :
Clôturons notre tour d’horizon des nouveautés AMP par l’intégration de classes CSS dynamiques directement en AMP HTML. Cela ne devrait pas être utile pour une majorité d’utilisateurs à ce jour, mais peut-être qu’à terme, il deviendra incontournable d’en passer par là…
Côté intégration, j’avoue que pour une fois, je ne peux pas dire que c’est difficile tant c’est simple à mettre en oeuvre. Il suffit uniquement d’ajouter un script qui active les classes CSS dynamiques :
Une fois la balise de script mise en place, AMP va générer automatiquement une ou deux classes CSS dynamiques :
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (345 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (570 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 29,90 € (522 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 19,90 € (411 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 29,90 € (622 pages)
Télécharger “SwipeMenu.zip”SwipeMenu.zip – Téléchargé 18100 fois – 52 Ko
Télécharger “Spider Simulator PHP”spider-simulator.zip – Téléchargé 17506 fois – 2 Ko
Télécharger “ReadingIndicator 1.0”readingIndicator-1.0.zip – Téléchargé 15940 fois – 7 Ko
Télécharger “Parseur Facebook”parser-facebook.zip – Téléchargé 17346 fois – 3 Ko
Télécharger “Pack complet – moteur de recherche PHP 5.5 – PHP 7”moteurPHP5.5.zip – Téléchargé 34922 fois – 171 Ko
Ce blog est le résultat de plusieurs années de travail mais il ne fait pas manger son homme. Découvrez l’agence web et l’organisme de formation géré par Mathieu Chartier et n’hésitez pas à prendre contact pour suivre des formations personnalisées.
Tous droits réservés © Blog Internet-Formation 2009 – 2023