En esta guía se explica toda la información técnica y las prácticas recomendadas que debe conocer para crear satisfactoriamente historias web con AMP.
AMP válido
Una historia web técnicamente es una página web construida con AMP y que cumple con las especificaciones de AMP:
Comenzar por el tipo de documento <!doctype html>.
Incluir una etiqueta de nivel superior <html ⚡> o <html amp>.
Incluir etiquetas <head> y <body>.
Incluir una etiqueta <meta charset="utf-8"> como la primera etiqueta secundaria de la etiqueta <head>.
Incluir una etiqueta <script async src="https://cdn.ampproject.org/v0.js"></script> dentro de la etiqueta <head>. Como práctica recomendada, debe incluir el script lo antes posible en el <head>.
Incluir una etiqueta <link rel="canonical" href="page/url"> dentro de <head> y href debe indicar cuál es la URL de la historia web.
Incluir una etiqueta <meta name="viewport" content="width=device-width"> dentro de la etiqueta <head>. También se recomienda incluir initial-scale = 1.
La diferencia entre una página web de AMP y una historia web que se construyó con AMP es el componente amp-story. Este es el único elemento secundario directo del documento <body> y debe contener el atributo standalone. Todas las páginas, capas y elementos que conforman la historia web se definen dentro de las etiquetas <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>
Los usuarios pueden ver Historias web en áreas con poca conexión a Internet o dispositivos antiguos. Asegúrese de que disfruten su experiencia siguiendo estas prácticas recomendadas.
Color del fondo
Especifique un color para el fondo de cada página de la historia web. Tener un color de fondo proporciona una buena solución alternativa si las condiciones del usuario le impiden descargar imágenes o elementos de video. Seleccione un color que sea representativo del color dominante en el elemento de fondo previsto para la página o utilice un tema de color uniforme para todas las páginas de la historia. Asegúrese de que el color del fondo sea diferente al del texto para facilitar la legibilidad.
Defina el color de fondo que tendrán las páginas dentro de las etiquetas <style amp-custom> que se encuentran en el encabezado del documento de la historia web o en línea dentro del componente <amp-story-page>.
Capas de elementos
El encabezado del sistema contiene controles como los iconos de Silencio y Compartir. Este aparece con un índice Z mayor que la imagen y el video de fondo. Asegúrese de que estos iconos incluyan la información que no es esencial.
Relación de aspecto
Diseñe los elementos de las historias web con una relación de aspecto de 9:16. Debido a que el alto y el ancho de la página varían según los navegadores y los dispositivos, no sitúe contenido esencial cerca de los bordes de la página.
Imágenes de carteles
Al usuario se le muestra la imagen de un cartel mientras descarga un video. Dicha imagen debe ser representativa del video para permitir que la transición se realice sin problemas. Para especificar la imagen de un cartel agregue el atributo poster a su elemento amp-video e indique cuál es la ubicación de la imagen.
Todos los videos deben agregarse mediante el 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>
Resolución y calidad
Codifique videos para ajustar la calidad en las siguientes optimizaciones sugeridas:
MP4
-crf 23
WEBM
-b:v 1M
Intente mantener los segmentos de HLS por debajo de los 10 segundos de duración.
Formato y tamaño
Cuide que los videos sean menores a 4 MB para garantizar que su rendimiento sea óptimo. Si es necesario, considere dividir los videos que sean más grandes en varias páginas.
En caso de que solamente pueda proporcionar un formato de video, trate de que sea en formato MP4. Cuando sea posible, utilice videos HLS y especifique el formato MP4 como una solución alternativa para asegurar la compatibilidad con el navegador. Utilice el siguiente códec de video:
MP4, HLS y DASH
H.264
WEBM
VP9
Especificar vs src
Utilice elementos secundarios <source> dentro del componente <amp-video> para especificar la fuente del video sobre el atributo src. El uso del elemento <source> le permitirá definir el tipo de video y agregar fuentes de respaldo para el video. Es necesario que utilice el atributo type para definir el tipo MIME. Utilice application/x-mpegurl o application/vnd.apple.mpegurl para los videos HLS. En el caso de todos los demás tipos de video, utilice el prefijo de MIME video/ y siga el formato del video, como en ”video/mp4”.
El atributo auto-advance-after que se muestra en la página de la historia de AMP determina si la página de una historia debe avanzar y cuándo debe hacerlo sin que el usuario la toque. Para avanzar después de un video, indique el atributo hacia el ID del video.
<amp-story-pageauto-advance-after="myvideo">
Experiencia con equipos de escritorio
El formato de las historias web es compatible con una experiencia opcional para equipos de escritorio. Esto cambia la experiencia que se tiene con los equipos de escritorio hacia un modo de pantalla completa inmersivo, el cual reemplaza la experiencia predeterminada de tres paneles verticales y permite que los usuarios de dispositivos móviles la vean cuando su dispositivo se coloca horizontalmente.
Suscríbase para recibir ayuda con su equipo de escritorio, para ello agregue el atributo 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.
