Download - Módulos de web
![Page 1: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/1.jpg)
ÚLTIMOS CLIENTES
ONG
EDUARDO FIERRO eduardofierro.pro
youtube.com/EduardoFierroPro
twitch.tv/eduardofierropro
github.com/eduardofierropro
PROFESOR
![Page 2: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/2.jpg)
IndiceMódulos de una web
Introducción al PDF
Lightbox · ¿Qué es? · ¿Qué es el efecto Lightbox? · ¿Qué es Lightbox jQuery? · Ejemplo real · Teoría
+
eduardofierro.pro
Slider · ¿Qué es? · Ejemplo · Teoría
Tabs / Pestañas · ¿Qué es? · Ejemplo real · Teoría
Acordeón · ¿Qué es? · Ejemplo real · Teoría
Menú móvil · ¿Qué es? · Ejemplo real · Teoría
Carrusel · ¿Qué es un carrusel de imágenes? · Carrusel vs Slider · Ejemplo real · Teoría
![Page 3: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/3.jpg)
Sobre este PDFMódulos de una web
eduardofierro.pro
¡Qué pasa, cruck! 😊
En este PDF he recopilado los módulos más genéricos de una web y cómo crearlos, en cada uno vas a tener los enlaces respectivos a sus vídeos y descargas de código en Github.
Así que suscríbete a Youtube o Twitch para apoyarme🔥
Cursos donde soy profesor ↗
Lista de reproducción en Youtube ↗
+
![Page 4: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/4.jpg)
Lightbox
eduardofierro.pro
Módulos de una web
+
eduardofierro.pro
![Page 5: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/5.jpg)
¿Qué es?
eduardofierro.pro
+
Módulos de una web / Lightbox
Un Lightbox es un módulo habitualmente añadido a una web y que suele usarse para mostrar más detalle de algún producto / servicio. El uso más cotidiano es aumentar imágenes.
eduardofierro.pro
Enlace a Github ↗
Vídeo en Youtube sobre Lightbox ↗
![Page 6: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/6.jpg)
¿Qué es el efecto Lightbox?
eduardofierro.pro
+
Módulos de una web / Lightbox
Cuando hablamos del efecto Lightbox, por lo general nos referimos al “aumento” de un elemento o a la aparición de más información producto donde hemos hecho click.
eduardofierro.pro
![Page 7: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/7.jpg)
¿Qué es Lightbox jQuery?
eduardofierro.pro
+
Módulos de una web / Lightbox
jQuery es una librería que nos permite escribir código Javascript de manera más sencilla aunque el rendimiento/optimización se vea “afectado”.
Es decir un Lightbox jQuery es un Lightbox como el que veremos en el vídeo, pero con código jQuery.
eduardofierro.pro
![Page 8: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/8.jpg)
Ejemplo en Amazon
eduardofierro.pro
+
Módulos de una web / Lightbox
Por ejemplo en Amazon cuando te pones sobre una imagen pequeña esta se abre en grande. Y ocurre al hacer mouse over en vez de click sobre una imagen pequeña.
eduardofierro.pro
![Page 9: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/9.jpg)
Teoría de un Lightbox
eduardofierro.pro
+
Módulos de una web / Lightbox
Vamos a ver la teoría y ahora nos ponemos con el código. Aunque te recomiendo ver esta parte directamente en Youtube:
eduardofierro.pro
Vídeo en Youtube sobre Lightbox ↗
![Page 11: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/11.jpg)
eduardofierro.pro
Módulos de una web / Lightbox
eduardofierro.pro
![Page 12: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/12.jpg)
eduardofierro.pro
Módulos de una web / Lightbox
eduardofierro.pro
![Page 13: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/13.jpg)
Carrusel
eduardofierro.pro
Módulos de una web
+
eduardofierro.pro
![Page 14: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/14.jpg)
¿Qué es?
eduardofierro.pro
+
Módulos de una web / Carrusel
Es un módulo que se suele usar en las web para mostrar múltiples elementos uno al lado de otro. Por regla general se usa con imágenes y pequeños bloques de información.
Suele usarse con logotipos de compañías cuando hablamos de portafolios o webs corporativas.
eduardofierro.pro
Enlace a Github ↗
Vídeo en Youtube sobre Carrusel ↗
![Page 15: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/15.jpg)
Carrusel vs Slider
eduardofierro.pro
+
Módulos de una web / Carrusel
Normalmente se les suele llamar igual, pero hay una diferencia esencial: las flechas.
Un carrusel sólo puede tener como máximo “puntos” para movernos dentro de él. En cambio un Slider es exactamente igual pero con flechas a cada lado.
En resumen: · Carrusel NO tiene flechas · Slider SI tiene flechas
eduardofierro.pro
![Page 16: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/16.jpg)
Ejemplo
eduardofierro.pro
+
Módulos de una web / Carrusel
Por ejemplo en la web de la Escuela Trazos se usa un carrusel para hacer pasar los logos de las empresas de la bolsa de trabajo.
eduardofierro.pro
![Page 17: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/17.jpg)
Teoría de un carrusel
eduardofierro.pro
+
Módulos de una web / Carrusel
Vamos a ver la teoría y ahora nos ponemos con el código. Pero te recomiendo ver esta parte en Youtube.
eduardofierro.pro
Vídeo en Youtube sobre Carrusel ↗
![Page 18: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/18.jpg)
200%
50%(100% /2)
50%(100% /2)
Teoría de un carrusel
eduardofierro.pro
Módulos de una web / Carrusel
El problema principal lo tendremos con el CSS, vamos a suponer que tenemos 2 imágenes. Los cálculos serían:
![Page 19: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/19.jpg)
Teoría de un carrusel
eduardofierro.pro
Módulos de una web / Carrusel
Para ver “cada foto” debemos de mover en -50% con translateX el contenedor de ambas imágenes.
0%-50%
![Page 20: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/20.jpg)
Tabs
eduardofierro.pro
Módulos de una web
+
eduardofierro.pro
![Page 21: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/21.jpg)
¿Qué son?
eduardofierro.pro
+
Módulos de una web / Tabs
Las tabs (o pestañas) son un módulo de una web que nos permite dependiendo de en qué botón hacemos click que aparezca información relacionada con cada botón.
eduardofierro.pro
Enlace a Github ↗
Vídeo en Youtube sobre Tabs ↗
![Page 22: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/22.jpg)
Ejemplos
eduardofierro.pro
+
Un ejemplo muy claro es cómo se filtran los comentarios de un producto dentro de Amazon. Aunque a nivel visual (CSS) no sean pestañas el código de programación es el mismo. También ocurre en la web de los accesorios de una PlayStation 5.
eduardofierro.pro
Módulos de una web / Tabs
![Page 23: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/23.jpg)
Vídeo en Youtube sobre Tabs ↗
Teoría de unas tabs
eduardofierro.pro
+
Vamos a ver la teoría y ahora nos ponemos con el código. Pero te recomiendo ver esta parte en Youtube.
eduardofierro.pro
Módulos de una web / Tabs
![Page 24: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/24.jpg)
Teoría
eduardofierro.pro
Cuando hacemos click en un botón, aparece el elemento asociado a él.
Módulos de una web / Tabs
+
![Page 25: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/25.jpg)
Teoría
eduardofierro.pro
Cuando hacemos click en un botón, aparece el elemento asociado a él.
Módulos de una web / Tabs
+
![Page 26: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/26.jpg)
Teoría
eduardofierro.pro
Cuando hacemos click en un botón, aparece el elemento asociado a él.
Módulos de una web / Tabs
+
![Page 27: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/27.jpg)
Acordeón
eduardofierro.pro
Módulos de una web
+
eduardofierro.pro
![Page 28: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/28.jpg)
¿Qué es?
eduardofierro.pro
+
Módulos de una web / Acordeón
Es un módulo muy usado, donde nos podemos encontrar un índice de elementos e información asociada a él, que habitualmente se abre justo debajo de cada índice.
eduardofierro.pro
Enlace a Github ↗
Vídeo en Youtube sobre Acordeón ↗
![Page 29: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/29.jpg)
Ejemplos
eduardofierro.pro
+
Las escuelas usan mucho los acordeones para marcar su temario y el interior de los mismos.
eduardofierro.pro
Módulos de una web / Acordeón
![Page 30: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/30.jpg)
Vídeo en Youtube sobre Acordeón ↗
Teoría
eduardofierro.pro
+
Vamos a ver la teoría y ahora nos ponemos con el código. Pero te recomiendo ver esta parte en Youtube.
eduardofierro.pro
Módulos de una web / Acordeón
![Page 31: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/31.jpg)
TeoríaCuando hacemos click en el primer botón, aparece el elemento asociado a él.
Módulos de una web / Acordeón
eduardofierro.proeduardofierro.pro
![Page 32: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/32.jpg)
TeoríaCuando hacemos click en un segundo botón, aparece el elemento asociado a él.
Módulos de una web / Acordeón
eduardofierro.proeduardofierro.pro
![Page 33: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/33.jpg)
Slider
eduardofierro.pro
Módulos de una web
+
eduardofierro.pro
Próximamente 😊
![Page 34: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/34.jpg)
Menú
eduardofierro.pro
Módulos de una web
+
eduardofierro.pro
Próximamente 😊
![Page 35: Módulos de web](https://reader035.vdocumento.com/reader035/viewer/2022072904/62e25a477d2b0a4f8870fd57/html5/thumbnails/35.jpg)
Únete a Discord ↗
¡Gracias, crucks!
eduardofierro.proeduardofierro.pro
Espero que te haya servido este PDF. Lo seguiré actualizando en un futuro, así que suscríbete a mi canal o pregúntame por Discord si hay alguna nueva actualización.
Si eres alumna o alumno don’t worry te lo explicaré en clase y lo haremos paso a paso 😊
Suscríbete a Youtube ↗
Entorno Digital
+