En la primera página del curso, vamos a comenzar a conocer AMP partiendo desde lo más básico, totalmente desde cero.
¿Para quién es este curso?
Este curso está diseñado para aspirantes a desarrolladores web primerizos y desarrolladores actuales que buscan crear sitios web de alto rendimiento. A lo largo de este y los siguientes cursos, podrás:
- Conocer las diferencias entre las páginas AMP y los sitios web tradicionales.
- Crear de forma progresiva un proyecto de muestra utilizando componentes y prácticas recomendadas reales de AMP.
- Aprender estrategias para crear sitios web modernos.
Prerrequisitos
Para aprovechar al máximo estos cursos, debe tener conocimientos básicos de HTML y CSS. Es suficiente ser capaz de reconocer código HTML y CSS, y poder realizar pequeñas adiciones y alteraciones como se indica en los ejercicios. Tenga en cuenta que la enseñanza de estos conceptos está más allá del alcance de este curso.
Si es necesario, puede encontrar un repaso sobre HTML aquí y sobre CSS aquí.
Sigue el código con Glitch
Para completar los ejemplos de código incluidos en estos cursos, usaremos Glitch. Glitch es un editor de código en línea que le permite crear y ver sitios web sin la necesidad de instalar nada en su computadora. También le permite crear un servidor, todo dentro de la interfaz Glitch.
Apartados del editor online Glitch
- El cuadro rojo de arriba se corresponde al editor en línea donde escribirás HTML y CSS.
- El cuadro verde indica el botón que lo llevará a la versión en vivo de la página que está creando.
- El cuadro amarillo es el botón que le permite crear una copia de este proyecto y editarlo.
- El cuadro azul indica los archivos que tiene disponibles.
- En la carpeta de “assets”, puede encontrar tus imágenes.
Siguiendo con el curso
A lo largo de estos cursos, necesitarás varias imágenes para completar los ejercicios. Todas las imágenes que necesitas están contenidas dentro de los proyectos Glitch.
Abra este proyecto para comenzar.
Para ver las imágenes en tu proyecto, solamente deberás hacer clic en la entrada de “assets” en la lista de archivos en el lado izquierdo del editor Glitch.
Para obtener el enlace a una sola imagen, selecciona la imagen de la lista de “assets” en el lado derecho, y haz clic en el botón “COPY” junto a la URL en la ventana emergente que aparece.
Luego puedes usar ese enlace en cualquier lugar donde necesites la imagen correspondiente.
En este curso, comenzaremos con una página HTML básica. Hemos creado un proyecto vacío en Glitch que contiene algunas imágenes, el código del servidor que necesitarás más adelante y un archivo index.html con un título y una sola imagen.
Haz clic en el botón “REMIX EDIT” que se encuentra en la parte superior derecha para crear un nuevo proyecto editable.
Podrás seguir utilizando este editor para el curso actual y para los futuros cursos.
No es totalmente obligatorio que utilices Glitch para completar estas prácticas. Sin embargo, parte del código necesario para completar los ejercicios solo se incluyen en los ejemplos de Glitch.
Si desea usar otro editor, es posible que aún debas volver a las muestras de Glitch para encontrar el código.
Configuración del validador de AMP
Para detectar errores en nuestras páginas AMP, tenemos una valiosa herramienta a nuestro alcance: el Validador AMP.
Escribir páginas AMP válidas es clave para acceder a todos los beneficios del framework. Se puede acceder al Validador de AMP de dos maneras: a través de una extensión de Chrome o agregando un parámetro a nuestra URL para que nuestra página de AMP utilice el validador integrado.
Para los propósitos de este curso, le sugerimos que utilice la extensión de Chrome, ya que es más fácil de usar y acceder mientras creas tu sitio.
- Ve aquí para instalar la extensión de Chrome.
Para usar en su lugar el validador de AMP integrado, agregue #development=1 al final de la URL de su página de AMP y abra la consola de desarrollador en su navegador para que se muestren los resultados.
No es necesario que agregues este parámetro si estás utilizando la extensión.
¿Qué construiremos en el curso básico de AMP?
A lo largo de nuestros tres cursos, creará un sitio web para la tienda de bicicletas “Quesos Chico”. Chico ha desarrollado una bicicleta revolucionaria hecha completamente de queso.
La demanda de bicicletas nuevas es tan alta que Chico necesita crear un sitio web lo más rápido posible. Cuando terminemos con estos cursos, el sitio de Chico se verá totalmente adaptado para AMP y tendrá una rapidez extraordinaria.
¿Cuál será el resultado final del proyecto?
Puede hacer clic en este enlace para ver una vista previa del sitio resultante que crearás.
Echa un vistazo al sitio y comprueba de todos los apartados que esta formado; tienes videos, un formulario de registro, un carrusel de imágenes y botones para compartir a través de redes sociales.
Abre el menú de navegación haciendo Clic en el icono de hamburguesa formado por tres líneas que se encuentra en la esquina superior izquierda.
Una vez que se expanda el menú, haga clic en el enlace “Nuestros productos / OUR PRODUCTS” para navegar a una lista de productos.
Intenta ordenar la lista de productos por precio o filtrar la lista de productos por categorías de productos.
Elegimos el sitio de Chico como nuestro modelo porque ofrece una colección de características que vemos comúnmente en los sitios web más populares.
El sitio fue construido completamente usando AMP. En el transcurso de las lecciones, crearás este sitio desde cero.
? Anterior{: .btn .btn-primary .btn-lg .pull-left} Siguiente ?{: .btn .btn-primary .btn-lg .pull-right}
Relacionados
? Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!
