Material a nivel intermedio sobre desarrollo y diseño de sitios web con AMP (Accelerated Mobile Pages), adaptado a español de los materiales publicados en amp.dev.
hay un componente <amp-newsletter-subscription-form> • Podemos resolver esto combinando componentes • Decide qué quieres construir. • Encuentra uno o más componentes que resuelvan esos desafíos • Conecta los componentes juntos
• Esta es una continuación del curso para principiantes. • Deberías sentirte cómodo con: • El AMP boilerplate y la estructura de la página • El validador de AMP y cómo usarlo • Cómo usar componentes AMP y su documentación
tu Glitch desde el curso para principiantes • O puede comenzar con esto: • glitch.com/~grateful-block • Ambos contienen todo lo que necesita para este y futuros cursos (por ejemplo, imágenes y código del servidor) • Se proporcionará un nuevo Glitch con ejercicios de código completos al final de cada curso •
navegación • Muchos sitios y aplicaciones móviles usan un menú de navegación • Nuestro menú debe: • Abrir dando clic en un icono (☰) en la parte superior de la página • Cerrar el menú abierto dando clic fuera del menú o haciendo clic en el icono ✕ • Contener varios enlaces a otras páginas.
¿Cómo interactúan los usuarios con un sitio web? • Dando clic con el mouse • Tocando con los dedos en una pantalla táctil • Escribiendo con un teclado • Estas interacciones también se llaman eventos.
¿Cómo responde un sitio a las interacciones del usuario? • Al hacer clic en un botón, se marca todo nuestro correo electrónico como leído o se abre un menú • Presionando Escape en el teclado cierra un menú • Deslizar hacia la derecha con los dedos acepta una tarea o conexión • En AMP estas respuestas se llaman “acciones”
En AMP trabajamos con eventos a través del atributo on • Este atributo especifica el evento de interés y la acción a tomar cuando ocurre. • Las interacciones del usuario desencadenan eventos, y luego AMP verifica si hay una acción asociada con ese evento para el componente afectado: <button on="tap:warning.hide">
hide es una de las acciones genéricas para todos los componentes / elementos • Algunos componentes también tienen acciones únicas • Las acciones pueden parecer funciones y pueden aceptar argumentos • A veces, la acción se puede omitir por completo si no es ambigua
La barra lateral con ID sidebar1 se puede abrir con las acciones: • sidebar1.open • sidebar1.toggle • sidebar1 • Se puede cerrar con la acción sidebar1.close
que contenga el ☰ que muestra u oculta el menú cuando es tocado. La etiqueta <div> debería tener la clase navbar-trigger. • Agrega un componente <amp-sidebar> con el id sidebar1 y la clase sidebar • La barra debería contener un elemento <nav> con la clase nav • En el elemento <nav> agrega una lista de cuatro enlaces, todos deben apuntar a # por ahora: “Nuestra historia”, “Nuestras bicicletas”, “Modelos recientes” y “Contacto” • Las etiquetas <ul> deberían usar la clase label • Las etiquetas <li> deberían usar la clase nav-item • Agrega una etiqueta <div> al menú con una ✕ que cierre el menú cuando sea tocado.
como estos en el ejercicio • AMP aplica las mejores prácticas para la accesibilidad • Los elementos interactivos necesitan atributos adicionales para las personas que utilizan tecnologías de asistencia.
de button (¡o utilizar una etiqueta <button> en su lugar!) • Los elementos interactivos necesitan poder recibir foco con el teclado, así que también necesita un atributo tabindex
elementos principales sean seleccionados. • <amp-sidebar> no dice cómo crear menús anidados. • Necesitaremos utilizar otro componente para resolver este requerimiento.
devuelve resultados para "acordeones" • Los componentes de acordeón se expanden o contraen al seleccionarlos. • El componente AMP se llama <amp-accordion>
Se expande automáticamente cuando es seleccionado • Contiene una o más etiquetas <section> • Cada <section> debe contener dos etiquetas:: • El encabezado • El contenido expandible • Podemos colocar un <amp-accordion> en <amp-sidebar> así como colocamos una <amp-img> en el <amp-carousel>
un <amp-accordion> que contenga una lista con enlaces a “Ricotta Racer”, “Cheddar Chaser” y “Parmesan Pacer”. • Convertir el elemento “Modelos más Recientes” en un <amp-accordion> que contenga una lista con el enlace “Ricotta Racer”. • <amp-accordion> debería tener una clase dropdown y el layout container • Añade la clase nav-dropdown a las etiquetas <li> que contienen un <amp-accordion> • Las etiquetas <ul> en <amp-accordion> deberían tener una clase dropdown-items • Las etiquetas <li> en <amp-accordion> deberían tener una clase dropdown-item
correo • Queremos que los usuarios se suscriban a nuestro boletín de marketing • El formulario de registro debe: • Aceptar el nombre completo y el correo electrónico del usuario (se requieren ambos campos) • Si el envío falla, mostrar un error • Si el envío se realiza correctamente, agradecer al usuario por su registro. • En las páginas que no son AMP, usaríamos <form>, pero AMP proporciona <amp-form> • ¡Veamos cómo son diferentes!
servidor • Estos contienen entradas como: • Campos de texto • Cuadros de opciones • Casillas de verificación • Botones de radio • Después de enviar el formulario, la página se actualiza con la respuesta del servidor.
web más amigables • La página no debe actualizarse cuando se envía el formulario • Los usuarios quieren confirmación de que sus datos fueron aceptados • Deben mostrarse mensajes útiles si se producen errores. • Los desarrolladores suelen buscar JavaScript para resolver estos problemas.
HTML normales con formas más fáciles de resolver: • Validación de formulario • Verificación de formulario • Envío de formulario sin actualización de página • Mensajes de éxito y error • Proporcionan eventos que permiten que el sitio reaccione cuando se envían formularios, válidos, inválidos, verificados, etc. • ¡Estos eventos son útiles para mostrar cuadros de diálogo o iconos de progreso!
a las entradas • Los eventos "change" y "input-debounced" facilitan el seguimiento cuando los valores de entrada están cambiando • Ganchos CSS para facilitar el diseño de formularios • AMP también proporciona polyfills que hacen que los formularios funcionen bien en todos los navegadores
Incluye campos para nombre de usuario y email • Incluye un botón de “Suscripción” • El formulario utiliza /submit-form en tu servidor en Glitch • El atributo method te permite elegir los métodos POST o GET para tu envío • El atributo action-xhr contiene el URL del servidor al que se enviarán los datos.
de redes sociales con la clase main-heading y el contenido “Suscribete a nuestro Boletín” • Añade un <div> con la clase subscribe-card-container debajo del <h2> • En ese <div>, agrega un <div> con la clase subscribe-card • En el <div> de subscribe-card agrega un <form> con la clase main-form, el método post, la action-xhr en /submit-form y el target como _top • Agrega dos elementos <input> de tipo text y nombres name y email • Cada uno debe estar dentro de un <div> con la clase input • Agrega una etiqueta <input> con tipo submit y la etiqueta “Suscríbete” con la clase btn
envía, pero no sabemos si el envío se realizó correctamente. • amp-form ayuda al proveer submit-success y submit-error • Estos elementos deben ser hijos directos de <form> • Solo se muestran cuando el envío del formulario es exitoso o cuando falla • El contenido de los elementos etiquetados con submit-success or submit-error tienen un tratamiento diferente
convierten datos dinámicos en HTML • El tipo más común de tipo de plantilla en AMP es amp-mustache • Las plantillas mustache sirven para llenar los huecos en una oración • “Hay muchas maneras {{ adjetivo }} de escoger a tus {{ sustantivo }}” • Si agregamos “edificante” y “amigos” entonces la oración se lee: “Hay muchas maneras edificantes de escoger a tus amigos” • Las plantillas mustache hacen lo mismo pero utilizan JSON para generar HTML
"trabajo": "constructor" } y esta plantilla: <template type="amp-mustache"> <p>¡{{nombre}} es un excelente {{trabajo}}!</p> </template> Se generará el siguiente HTML: <p>¡Roberto es un excelente constructor!</p>
cosas: • Pueden iterar sobre una colección de valores • El contenido puede mostrarse de manera condicional si una variable es definida • Pueden incluso mostrar contenido HTML sin escapar La documentación tiene más information
para agregar mensajes de éxito y error a tu formulario. • El mensaje de éxito debería agradecer al usuario por su nombre al suscribirse. • El mensaje de error debería decir al usuario que hubo un error.
datos de éxito del servidor es: { "name": "Bob Johnson", "email": "[email protected]" } • Las plantillas no necesitan tener ninguna variable de mustache.
un <div> con el atributo submit-success • Agrega una <template> con type amp-mustache • Debería generar una <p> con la clase form-submit-response • El mensaje debería incluir el name desde el servidor • Agrega una <div> con el atributo submit-error • Agrega una <template> con type amp-mustache • Debería generar una <p> con la clase form-submit-response • Este mensaje no requiere de name
inicial, agregamos un carrusel de imágenes de bicicletas • Responderemos a los comentarios de los evaluadores: • "Quiero saltar directamente a una diapositiva en particular" • "No sé en cuál diapositiva estoy" • "Las imágenes son demasiado pequeñas, no puedo ver los detalles de la imagen" • ¡Necesitamos abordar esta retroalimentación!
las siguientes mejoras en el carrusel: • Agregar un carrusel adicional de imágenes en miniatura que cambien la diapositiva del carrusel original al hacer clic • Distinguir visualmente la miniatura de la diapositiva actual • Al hacer clic en la imagen del carrusel original, se mostrará una versión ampliada de la imagen. • Usaremos nuevos componentes y haremos que trabajen juntos
Un carrusel de tipo carrusel muestra múltiples diapositivas horizontalmente • Cuando los usuarios dan clic en una imagen del carrusel de miniaturas, la diapositiva del carrusel original debe cambiar • ¿Cómo?
como un evento! • "... cambiar la diapositiva" - ¡suena como una acción! • El evento para clics o pulsaciones de dedos es tap • En la documentación, la acción para cambiar la diapositiva de un carrusel es goToSlide (index = N) • N está indexado a cero (es decir, la segunda diapositiva es el índice 1) • Solo está disponible en <amp-carousel> con diapositivas tipo slides
un layout=fixed-height, una clase thumbnail-carousel y una altura de 78 pixeles • Dale a cada imagen miniatura <amp-img> un layout=fixed, un ancho de 96 pixeles y una altura de 72 pixeles. • Las imágenes miniatura son: cheddar-chase-thumb, cheese-thumb, and mouse-thumb, in that order • Cuando cualquier <amp-img> reciba un clic, se debe mostrar la imagen correspondiente en el carrusel original.
una colección de elementos seleccionables • Los elementos seleccionables tienen el atributo option • Los elementos seleccionables no tienen que ser hijos directos de <amp-selector> • Al elemento seleccionado se le asigna el atributo selected
original debe cambiar también la miniatura seleccionada • ¡"Cuando la diapositiva cambie" suena como un evento! • ¡"Establecer la miniatura seleccionada" suena como una acción! • El evento para cuando cambia la diapositiva <amp-carousel> es slideChange • Puede obtener el nuevo índice de diapositiva usando event.index • La acción para cambiar la selección de <amp-selector> es toggle(index = N) • N es el valor del atributo option de un elemento seleccionable
nombra single_image_select y layout container que rodee al carrusel de miniaturas • Agrega un atributo option a cada miniatura que coincida con el índice de diapositiva de la imagen correspondiente en el carrusel original • Agrega un controlador de eventos al carrusel original que alterne la miniatura apropiada cuando la diapositiva cambia • No se necesita actualizar los estilos
imágenes de nuestro carrusel • Una opción es utilizar una caja de luz, o lightbox • El contenido de la caja de luz se muestra al frente del resto del contenido de la página • El resto de la página se oscurece.
una caja de luz • Define el ID de un <amp-image-lightbox> en la acción de un evento en un <amp-img> para expandir la imagen a pantalla completa • Generalmente tiene un layout de nodisplay para que no sea visible hasta que sea abierto.
<amp-carousel> • Agrega el atributo lightbox para abrir una caja de luz cuando el componente es seleccionado • No es necesario tener un <amp-image-lightbox> conectado • No se necesita un manejador de eventos para abrir la caja de luz
eventos y acciones • Cómo capturar datos del usuario con <amp-form> • Cómo alinear los componentes de AMP a los requerimientos • Construir características elaboradas al combinar componentes • Los componentes pueden colocarse dentro de otros o comunicarse con eventos y acciones
nuestro sitio: • Menús anidados • Forma de suscripción a boletín de correo • Carrusel de imágenes en miniatura • Una caja de luz para la galería Qué construímos
almacenar datos locales en variables de estado • Descargar datos de un servidor en respuesta a la interacción del usuario • Cómo reaccionar ante las acciones del usuario y cambiar lo que está en la pantalla • Analizar otros tipos de sitios web y crearlos con AMP • El repositorio en Glitch con todos los ejercicios completos de este curso está en :glitch.com/~enshrined-eyebrow
coppelux
bgpat
philipschwarz
pauloxnet
kuroppe1819
dunglas
benjaminkim
salaboy
gussan0223
pospome
1wedge_one
manfredsteyer
zenorocha
keithpitt
keathley
tammyeverts
jacobian
jeffersonlam
samanthasiow
eileencodes
chriscoyier
rasmusluckow
davidbonilla
lemiorhan
