AMP

Guías para formatos y tutoriales

Las guías y tutoriales se presentan en Markdown, con un texto preliminar adicional y formato en código corto.

Ubicación de la documentación

El contenido de amp.dev se extrae de dos repositorios, amp.dev y AMPHTML. Toda la documentación de referencia sobre los componentes se extrae de AMPHTML, ya sea de los componentes integrados o de las extensiones.

Hay otros documentos que se importan hacia amp.dev desde AMPHTML. Los cuales se muestran en este archivo. No actualice estos documentos en el repositorio de amp.dev, ¡sus cambios se sobrescribirán en las siguientes versiones!

Texto preliminar

El texto premiliminar se encuentra en la parte superior de cada guía y tutorial.

Ejemplo:

$title: Include Custom JavaScript in AMP Pages
$order: 7
formats:
  - websites
author: CrystalOnScript
contributors:
  - fstanis
description: For web experiences requiring a high amount of customization AMP has created amp-script, a component that allows the use of arbitrary JavaScript on your AMP page without affecting the page's overall performance.
$title Es el título de su documento tal como aparecerá en la Tabla de contenidos. Escriba con mayúscula la primera letra de la primera palabra, excepto en el caso de “AMP” y otros nombres propios. Utilice el símbolo et “&” en lugar de la palabra “y”.
$order Define en qué lugar de la Tabla de contenidos aparece su documento. Posiblemente deba editar el “$order” en otros documentos para que aparezca en la posición correcta.
formats Hace una lista de las experiencias de AMP para las que su documento es importante. Si su documento era relevante para los sitios web e historias de AMP, pero no para los anuncios o el correo electrónico de AMP, colocaría lo siguiente en su texto preliminar: formatos yaml: - sitios web - historias
author ¡Usted es el autor! Utilice su nombre de usuario de GitHub.
contributors Sirve para mencionar a todas las personas que hayan contribuido en su documento. Este campo es opcional.
description Se utiliza para escribir una descripción breve de la guía o tutorial. Esto ayuda a la optimización de los motores de búsqueda, ¡permitiendo que su trabajo llegue a todas las personas que lo necesitan!
tutorial Agregue “tutorial: true” al texto preliminar para que el sitio web agregue el icono del tutorial junto a él. Los tutoriales se encuentran la parte inferior de su sección en la Tabla de contenidos.

Códigos cortos

Para consultar una lista de códigos cortos y la manera de utilizarlos, vaya a documentation.md en GitHub.

Imágenes

¡amp.dev se desarrolló con AMP! Por lo tanto, nuestras imágenes deben coincidir con los criterios amp-img. El proceso de desarrollo utiliza la siguiente sintaxis para convertir las imágenes al formato adecuado amp-img.

Image of basic amp script tutorial starter app

Filtro de secciones

Algunos documentos pueden ser importantes para varios de los formatos de AMP, pero algunos formatos posiblemente requieran descripciones adicionales o información que no sea relevante para los demás. Puede filtrar estas secciones envolviéndolas con el siguiente código corto.

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites, email"]
This is visible for [websites](?format=websites) & [email](?format=email).
[/filter]

[filter formats="stories"]
This is visible for [stories](?format=stories).
[/filter]

Sugerencias

Puede agregar sugerencias y textos destacados envolviendo el texto con el siguiente código corto:

[tip type="default"]
Default tip
[/tip]

[tip type="important"]
Important
[/tip]

[tip type="note"]
Note
[/tip]

[tip type="read-on"]
Read-on
[/tip]

Fragmentos de código

Coloque los fragmentos de código dentro de los conjuntos con tres comillas simples, y especifique el idioma al final del primer conjunto de comillas simples.

```html
  // code sample

wzxhzdk:1



wzxhzdk:2



Advertencia: los ejemplos inline están insertados directamente dentro de la página. Esto podría generar conflictos si los componentes ya se utilizan en la página (por ejemplo, `amp-consent`).

### Previsualización del Top-Frame

Use la previsualización del top-frame siempre que necesite especificar elementos del encabezado o definir estilos globales dentro de `
    
    
      

Hello AMP

``` [/example]
El código se ve de la siguiente manera: [example preview="top-frame" playground="true"] wzxhzdk:3
Abrir este fragmento en Playground
### Historias de AMP Utilice `preview="top-frame"` junto con `orientation="portrait"` para previsualizar las historias de AMP.
```html

Hello World

This is the cover page of this story.

First Page

This is the first page of this story.

``` [/example]
El código se ve de la siguiente manera: [example preview="top-frame" orientation="portrait" playground="true"] wzxhzdk:4
Abrir este fragmento en Playground
### URL absolutas para el correo electrónico de AMP Observe cómo utilizamos para crear un endpoint de la URL absoluta si está integrada dentro del correo electrónico de AMP.
```html
``` [/example]
El código se ve de la siguiente manera: [example preview="top-frame" playground="true"] wzxhzdk:5
Abrir este fragmento en Playground
### Cómo escapar las plantillas mustache Este es un ejemplo de `top-frame` donde se utiliza un endpoint con acceso remoto. Las plantillas Mustache deben escaparse en los ejemplos mediante los códigos y :
```html ``` [/example]
El código se ve de la siguiente manera: [example preview="top-frame" playground="true" imports="amp-list:0.1" template="amp-mustache:0.2"] wzxhzdk:6
Abrir este fragmento en Playground
## Enlaces Puede vincular otras páginas con la sintaxis para enlaces markdown estándar: wzxhzdk:7 Cuando en amp.dev se realiza una vinculación hacia otra página, la referencia será una ruta del archivo que esté relacionada con el archivo de destino. ### Anclajes Puede vincular secciones específicas de un documento utilizando anclajes: wzxhzdk:8 Cree el destino del anclaje utilizando `