Bien qu'il y ait {{result.totalResults}} résultats correspondants au total, nous ne pouvons pas en afficher plus de 100.
{{/result.isTruncated}}
Une erreur s'est produite lors du chargement des résultats de recherche supplémentaires. Nous vous prions de nous excuser pour la gêne occasionnée. Veuillez réessayer plus tard.
;(
Une erreur s'est produite…
... en essayant de charger les résultats de la recherche. Nous vous prions de nous excuser pour la gêne occasionnée. Veuillez réessayer plus tard.
¯\_(ツ)_/¯
Aucun résultat trouvé.
Nous n'avons trouvé aucun résultat correspondant à votre recherche.
Sélectionnez votre format pour une expérience plus rationalisée
Ce guide explique tous les détails techniques et les bonnes pratiques que vous devez connaître pour réussir à créer des stories Web avec AMP.
AMP Valid
Techniquement, une story Web est une page Web unique créée avec AMP et conforme aux spécifications AMP:
Commencer par le type de document <!doctype html>.
Contient une balise de niveau supérieur <html ⚡> ou <html amp>.
Contenir les balises <head> et <body>.
Contenir une balise <meta charset="utf-8"> comme premier enfant de la balise <head>.
Contenir une balise <script async src="https://cdn.ampproject.org/v0.js"></script> dans la balise <head>. Une bonne pratique est d'inclure ce script le plus tôt possible dans <head>.
Contenir une balise <link rel="canonical" href="page/url"> dans <head> avec un href qui pointe vers l'URL de la story Web.
Contenir une balise <meta name="viewport" content="width=device-width"> dans la balise <head>. il est également recommandé d'ajouter initial-scale=1.
La différence entre une page Web AMP et une story Web créée avec AMP est le composant amp-story. C'est le seul enfant direct du <body> du document et doit contenir l'attribut standalone. Toutes les pages, couches et éléments de la story Web sont définis dans les balises <amp-story>.
<!doctype html><html⚡><head><metacharset="utf-8"><title>Joy of Pets</title><linkrel="canonical"href="pets.html"><metaname="viewport"content="width=device-width"><styleamp-boilerplate>body{-webkit-animation:-amp-start8ssteps(1,end)0s1normalboth;-moz-animation:-amp-start8ssteps(1,end)0s1normalboth;-ms-animation:-amp-start8ssteps(1,end)0s1normalboth;animation:-amp-start8ssteps(1,end)0s1normalboth}@-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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><scriptasyncsrc="https://cdn.ampproject.org/v0.js"></script><scriptasynccustom-element="amp-video"src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script><scriptasynccustom-element="amp-story"src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script><styleamp-custom>...</style></head><body><!-- Cover page --><amp-storystandalonetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/AMP-Brand-White-Icon.svg"poster-portrait-src="assets/cover.jpg"><amp-story-pageid="cover"><amp-story-grid-layertemplate="fill"><amp-imgsrc="assets/cover.jpg"width="720"height="1280"layout="responsive"></amp-img></amp-story-grid-layer><amp-story-grid-layertemplate="vertical"><h1>The Joy of Pets</h1><p>By AMP Tutorials</p></amp-story-grid-layer></amp-story-page><!-- Page 1 --><amp-story-pageid="page1"><amp-story-grid-layertemplate="vertical"><h1>Cats</h1><amp-imgsrc="assets/cat.jpg"width="720"height="1280"layout="responsive"></amp-img><q>Dogs come when they're called. Cats take a message and get back to you. --Mary Bly</q></amp-story-grid-layer></amp-story-page>
...
</amp-story></body></html>
Les utilisateurs peuvent consulter des stories Web dans des zones avec une faible connexion réseau ou des appareils anciens. Assurez-vous que les stories sont intéressantes en suivant ces bonnes pratiques.
Couleur d'arrière plan
Spécifiez une couleur d'arrière-plan pour chaque page de story Web. Avoir une couleur d'arrière-plan offre une bonne solution de secours si les conditions de l'utilisateur les empêchent de télécharger des images ou des vidéos. Choisissez une couleur représentative de la couleur dominante de l'élément d'arrière-plan de la page ou utilisez un thème de couleur unique pour toutes les pages de stories. Assurez-vous que la couleur d'arrière-plan est différente du texte pour une meilleure lisibilité.
Définissez la couleur d'arrière-plan des pages dans les balises <style amp-custom> dans l'en-tête du document de story Web ou en ligne sur le composant <amp-story-page>.
Éléments de superposition
L'en-tête système contient des commandes telles que les icônes de mise en sourdine et de partage. Elles apparaissent à un index-z plus élevé que l'image et la vidéo d'arrière-plan. Assurez-vous qu'aucune information essentielle n'est couverte par ces icônes.
Proportions
Concevez les stories Web au format 9:16. Étant donné que la hauteur et la largeur de la page varient selon les navigateurs et les appareils, ne placez pas du contenu essentiel près des bords de la page.
Images d'affiche
L'utilisateur voit une image d'affiche pendant le téléchargement d'une vidéo. L'image de l'affiche doit être représentative de la vidéo pour permettre une transition subtile. Spécifiez une image d'affiche en ajoutant l'attribut poster à votre élément amp-video et en le pointant vers l'emplacement de l'image.
Toutes les vidéos doivent être ajoutées via le composant amp-video.
<amp-videocontrolswidth="640"height="360"layout="responsive"poster="/static/inline-examples/images/kitten-playing.png"><sourcesrc="/static/inline-examples/videos/kitten-playing.webm"type="video/webm"/><sourcesrc="/static/inline-examples/videos/kitten-playing.mp4"type="video/mp4"/><divfallback><p>This browser does not support the video element.</p></div></amp-video>
Résolution et qualité
Encodez les vidéos pour ajuster la qualité des optimisations recommandées suivantes:
MP4
-crf 23
WEBM
-b:v 1M
Essayez de garder les segments HLS à moins de 10 secondes.
Format et taille
Ajoutez des vidéos de moins de 4 Mo pour des performances optimales. N'hésitez pas à diviser les grosses vidéos sur plusieurs pages.
Si vous ne pouvez fournir qu'un seul format vidéo, choisissez MP4. Lorsque cela est possible, utilisez le format HLS et spécifiez MP4 comme solution de secours pour la compatibilité du navigateur. Utilisez le codec vidéo suivant:
MP4, HLS et DASH
H.264
WEBM
VP9
Specifier vs src
Utilisez les éléments enfants <source> dans le composant <amp-video> pour spécifier la source vidéo via l'attribut src. L'utilisation de l'élément <source> vous permet de spécifier le type de vidéo et d'ajouter des sources vidéo de sauvegarde. Vous devez utiliser l'attribut type pour spécifier le type MIME. Utilisez application/x-mpegurl ou application/vnd.apple.mpegurl pour les vidéos HLS. Pour tous les autres types de vidéo, utilisez le préfixe MIME video/ suivi du format vidéo, tel que ”video/mp4”.
L'attribut auto-advance-after affiché par amp-story-page spécifie si et quand une page de story doit avancer sans le clic de l'utilisateur. Pour avancer après une vidéo, pointez l'attribut vers l'identifiant de la vidéo.
<amp-story-pageauto-advance-after="myvideo">
Sur ordinateur de bureau
Le format de story Web prend en charge une une version sur ordinateur de bureau en option. Cela offre un mode immersif à fond perdu sur ordinateur de bureau, remplaçant l'affichage en portrait par défaut à trois panneaux et permet aux utilisateurs mobiles de voir la page même lorsque leur appareil est à l'horizontale.
Activez la prise en charge de la version pour ordinateur de bureau en ajoutant l'attribut supports-landscape au composant <amp-story>.
<amp-storystandalonesupports-landscapetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/icon.svg"poster-portrait-src="assets/cover.jpg"></amp-story>
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.