Guía 07: Responsividad y Componentes

Guía 07: Responsividad y Componentes#

Actividades previas#

Diseño#

  1. Organice el contenido de su landing page en secciones, p.e.: encabezado, presentación, servicios, testimonios, contacto, etc.

  2. Diseñe cada una de las secciones de la landing page. Primero, considere la versión para la resolución de un dispositivo móvil (640px). Luego para la resolución de una computadora (1280px), p.e.:

Ambiente de desarrollo#

  1. Acceda a su proyecto landing en Codespaces o en su máquina local.

  2. Cree y utilice la(s) rama(s) de desarrollo.

  3. Instale los paquetes y levante el servidor, con:

    npm install
npm run dev

Actividades en clases#

HTML#

Viewport#

  1. Identifique si su archivo index.html contiene la etiqueta <meta>:

    1<head>
2  ...
3  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4  ...
5</head>

  2. Utilice un cliente de IAG para justificar la importancia de la etiqueta <meta>.

Secciones#

  1. Agregue a su archivo index.html:

    Sección con imágenes.#
     1 <section class="bg-white dark:bg-gray-900">
 2     <div id="container-03" class="px-4 py-8 mx-auto">
 3         <div id="container-04">
 4             <img src="https://placehold.co/50" alt="Imagen 1" class="w-full h-auto rounded">
 5             <img src="https://placehold.co/50" alt="Imagen 2" class="w-full h-auto rounded">
 6             <img src="https://placehold.co/50" alt="Imagen 3" class="w-full h-auto rounded">
 7             <img src="https://placehold.co/50" alt="Imagen 4" class="w-full h-auto rounded">
 8         </div>
 9     </div>
10 </section>

  2. Compruebe el resultado en el navegador.

TailwindCSS#

Diseño Responsivo#

  1. Identifica los breakpoints con el simulador del modo de dispositivo en el inspector del navegador.

  2. Utilice la documentación de TailwindCSS - Responsive Design y TailwindCSS - max-width.

  3. Modifique el archivo index.html, verifique el efecto en los breakpoints recomendados con el inspector y analice el uso de las clases con su cliente AIG, de:

    1. Modifique la etiqueta <div id="container-03"> agregándole la clase «max-w-md». Revise la diferencia de los efectos para los breakpoints sm, md, lg, xl y 2xl.

    2. Agregue la clase «md:max-w-xl» a la etiqueta <div id="container-03"> . Revise las diferencias para cada breakpoint.

    3. Modifique la etiqueta <div id="container-04"> agregándole las clases «grid grid-cols-2 gap-4». Revise la diferencia de los efectos para los breakpoints sm, md, lg, xl y 2xl.

    4. Agregue la clase «md:grid-cols-4» a la etiqueta <div id="container-04"> . Revise las diferencias para cada breakpoint.

  4. Compruebe el resultado en el navegador.

Flowbite#

Componentes#

  1. Utilice la documentación de Flowbite

  2. Incluye Flowbite con el CDN en el archivo index.html.

  3. Modifique el archivo index.html, verifique el efecto en los breakpoints recomendados con el inspector y analice el uso de las clases con su cliente AIG

    1. Agregue el componente Default Navbar.

    2. Modifique el componente y compruebe el comportamiento para cada tamaño de dispositivo.

  4. Compruebe el resultado en el navegador.

Versionamiento#

  1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio landing.

  2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

Vercel#

  1. Verifique el despliegue continuo (CD) del proyecto en Vercel.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Diseño responsivo
Contenido