Questa guida spiega tutti i dettagli tecnici e le procedure consigliate per creare con successo storie web tramite AMP.
Validità AMP
Una Storia web dal punto di vista tecnico è una singola pagina web realizzata tramite AMP e conforme alle specifiche AMP. Essa deve:
Iniziare con il doctype <!doctype html>.
Contenere un tag di primo livello <html ⚡> (<html amp> è ugualmente accettato).
Contenere i tag <head> e <body> (questi sono opzionali in HTML).
Contenere un tag <meta charset="utf-8"> come primo elemento figlio del tag <head>.
Contenere un tag <script async src="https://cdn.ampproject.org/v0.js"></script> all'interno del proprio tag <head>. Le procedure consigliate suggeriscono l'inclusione dello script il prima possibile nella sezione <head>.
Contenere un tag <link rel="canonical" href="page/url"> all'interno della propria sezione <head> con l'elemento href che punta all'URL della Storia web.
Contenere un tag <meta name="viewport" content="width=device-width"> all'interno del tag <head>. Si consiglia inoltre di includere l'attributo initial-scale=1.
La differenza tra una semplice pagina web AMP e una storia web realizzata con AMP è il componente amp-story È l'unico elemento figlio diretto della sezione <body> del documento e deve contenere l'attributo standalone. Tutte le pagine, i livelli e gli elementi della Storia web sono definiti all'interno dei tag <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>
Prestazioni nei momenti di punta ed esperienza utente
Gli utenti potrebbero visualizzare le storie web in aree con connessione di rete scadente o su dispositivi obsoleti. Per garantire sempre la migliore esperienza possibile, si suggerisce di applicare le seguenti procedure consigliate.
Colore dello sfondo
Occorre indicare un colore dello sfondo per ogni pagina di una Storia web. Definire un colore dello sfondo fornisce un buon fallback se le condizioni dell'utente gli impediscono di scaricare immagini o risorse video. Si consiglia di scegliere un colore rappresentativo del colore dominante della risorsa di sfondo prevista per la pagina oppure di utilizzare un tema cromatico coerente per tutte le pagine della storia. Per assicurare la leggibilità inoltre utilizzare un colore di fondo diverso da quello del testo.
Definire il colore dello sfondo per le pagine all'interno dei tag <style amp-custom> nell'intestazione del documento della Storia web o inline nel componente <amp-story-page>.
Stratificazione degli elementi
L'intestazione di sistema contiene controlli come le icone di disattivazione audio e di condivisione. Essa appare a un valore dell'indice z più alto rispetto all'immagine di sfondo e ai video. Verificare che nessuna informazione essenziale sia coperta da queste icone.
Proporzioni
Le risorse delle Storie web vanno definite con proporzioni 9:16. Poiché l'altezza e la larghezza della pagina variano a seconda dei browser e dei dispositivi, mai collocare i contenuti essenziali vicino ai bordi della pagina.
Immagini dei poster
Le immagini di un poster sono visualizzate agli utenti durante il download dei video. L'immagine del poster dovrebbe essere rappresentativa del video per consentire una transizione graduale. Per indicare l'immagine di un poster aggiungere l'attributo poster al relativo elemento amp-video e farlo puntare alla posizione dell'immagine.
Tutti i video devono essere aggiunti tramite il componente 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>
Risoluzione e qualità
Codificare i video per adattare la qualità alle seguenti ottimizzazioni consigliate:
MP4
-crf 23
WEBM
-b:v 1M
Mantenere la durata dei segmenti HLS inferiore ai 10 secondi.
Formato e dimensioni
Mantenere la dimensione dei video al di sotto dei 4 MB per garantire prestazioni ottimali. Considerare anche l'idea di suddividere i video di grandi dimensioni su più pagine.
Se è possibile fornire un solo formato video, scegliere MP4. Se possibile, utilizzare video HLS e indicare MP4 come opzione di fallback per garantire la compatibilità del browser. Utilizzare il seguente codec video:
MP4, HLS e DASH
H.264
WEBM
VP9
Uso di vs src
Utilizzare più elementi figli <source> all'interno del componente <amp-video> per specificare la sorgente video sull'attributo src. L'utilizzo dell'elemento <source> consente di specificare il tipo di video e di aggiungere sorgenti video di backup. È necessario utilizzare l'attributo type per specificare il tipo MIME. Usare application/x-mpegurl o application/vnd.apple.mpegurl per i video HLS. Per tutti gli altri tipi di video, usare il prefisso MIME video/ seguito dal formato video, ad esempio ”video/mp4”.
L'attributo auto-advance-after aggiunto al componente amp-story-page indica se e quando inserire un avanzamento di pagina di una storia senza tocchi da parte dell'utente. Per l'avanzamento automatico dopo un video, far puntare l'attributo all'ID video.
Il formato delle Storie web supporta un'esperienza desktop opzionale. Questo permette di rendere l'esperienza desktop una modalità coinvolgente a tutto schermo, sostituendo il formato predefinito con tre pannelli verticali e permette agli utenti di dispositivi mobili di visualizzare la pagina anche quando il dispositivo è tenuto in orizzontale.
Attivare il supporto del formato desktop aggiungendo l'attributo supports-landscape al componente <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.