Este curso te enseñará conceptos generales de desarrollo web del lado cliente, metodologías de trabajo y herramientas. Aprenderás sobre diseño responsive, grillas, y componentes CSS y Javascript de Bootstrap. Practicarás con preprocesadores de CSS, Less y Sass. También aplicarás conceptos básicos de Node.js y NPM para gestionar tus sitios web. Al finalizar este curso, habrás practicado con todas esas herramientas y serás capaz de diseñar una página web e implementar ese diseño con Bootstrap, crear un diseño responsive y preparar tu sitio web para salir a producción.
Trabajando con carousel
Loading...
Del curso dictado por Universidad Austral
Diseñando páginas web con Bootstrap 4
2 calificaciones
Explore Related Videos
At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you
Universidad Austral
2 calificaciones
Curso 1 de 4 en SpecializationFull Stack Web Development en Español
De la lección
COMPONENTES JAVASCRIPT DE BOOTSTRAP
Este módulo comprende los componentes Javascript de Bootstrap. Aprenderás sobre pestañas, navegación con pestañas, navegación con botones, diferentes tipos de alertas, carroussel, scrollspy, affix y tooltips.
Conoce a los instructores
Ezequiel LamónicaLicenciado en Ciencias de la Computación (UBA), IAE EMBA Candidate 2018.
[MÚSICA]
[MÚSICA] Hola.
Vamos a ver este último componente del módulo 3, que es el carousel.
Elemento muy utilizado que da una estética moderna y generalmente los marketplace,
los sitios de e-commerce, de hoteles, como el que estamos desarrollando,
o diversas tiendas lo utilizan a modo de vitrina para mostrar los artículos
destacados y mientras el usuario explora la página.
Lo típico del carrusel es que vaya ciclando,
es decir, vaya rotando las imágenes de diferentes productos o
artículos para que el usuario lo pueda ver.
A su vez, como esta rotación se hace con una animación,
no es que se cambie instantáneamente la imagen,
llama la atención de la persona y ahí es donde se suele dirigir la mirada.
Por lo tanto, el uso típico de estos carousel van a ser
las secciones destacadas de nuestro sitio,
donde queremos que el usuario sí o sí ponga atención.
De nuevo, es muy sencillo de usar, pero como hay que describir
varios elementos, you lo he definido
para mostrarte cómo se usa y le vamos a agregar algunas cositas más.
Vamos a ver cómo creamos este carousel básico,
que va ir ciclando por imágenes de hoteles.
Estas imágenes las cree con un programa común y corriente.
¿Qué es lo que hicimos?
Hay diferentes configuraciones del carousel.
Uno puede configurar, agregarle botones, que lo vamos a ver después,
para que el usuario pueda desplazar por las imágenes, uno puede hacer que no se
ponga ningún botón y que desplacen solas, como es lo que estamos haciendo ahora,
también se puede indicar, con unos elementos, todos los ítems
que hay en el carousel y es como que es una rayita que se prende, mostrando
cuál es el ítem activo y eso también permite navegar al usuario tocando ahí.
Hay diferentes formas, todas son, el uso es prácticamente el mismo.
Después en la documentación adicional lo vas a poder ver.
Y también podemos editar unas cuantas cosas,
configurar el tiempo de ciclado, que cicle más rápido, que cicle más lento
y varias cosas más que, por supuesto, en la documentación están.
Vamos a ver cómo lo armamos.
Ubicamos un div, le pusimos un id, es importante este id, después lo vamos
a usar, más que nada cuando definamos controles para este carousel.
Siempre esos controles van a aplicar sobre algún componente.
Bueno, ¿qué componente va a ser?
Si tengo más de un carousel, ¿cómo lo indico?
Bueno, por eso el data target de esos componentes va a ser
el id del carousel que lo definamos.
Perdón si soy reiterativo con esto de los data attributes,
sobre todo con el data target, pero es que el uso es bastante sencillo,
una vez que uno entiende que siempre tiene que hacer referencia a un componente
a través del data target para agregarle comportamiento,
you se entendió y se entiende cuál es el criterio y la lógica que
usan los componentes de JavaScript de Bootstrap para poder darles comportamiento
utilizando los data attributes sin necesidad de programar.
Porque, por supuesto, todo esto se puede hacer haciendo script de programación,
pero, como eso nos llevaría más tiempo, y esa complejidad extra,
que no es tanta, pero es una complejidad extra, puede introducir errores,
nos acostumbramos a usar los data attributes con la lógica que nos proponen,
que es bastante coherente y está muy bien implementada.
Bien.
Siguiente.
Dentro de ese div, las clases que vamos a definir es carousel y slide.
Estas dos para agregarle los estilos.
Data-ride, un nuevo atributo que aparece,
le decimos que esto va a ser de tipo carousel.
Luego dentro, definimos otro div que va a ser para
las imágenes, mejor dicho, que van a ir rotando, y ahí tenemos que ponerle la
clase carousel-inner.
Y luego vamos definiendo cada una de las imágenes que incorporamos.
Cada una de esas imágenes, tenemos que agregarle la clase carousel-item.
Y a una le tenemos que poner active
para indicar que esa va a ser la que va a comenzar.
Si no ponemos la clase active, no va a andar el carousel.
Por lo tanto, es importante que recuerdes de agregárselo.
Luego agregamos la imagen.
Acá estoy usando imágenes de 800 por 400 píxeles, 800 de ancho por 400 de alto.
Es una medida estándar, puedes usar la que vos quieras.
Y dato importante, podés no utilizarlo pero te sugiero que lo hagas,
haré otras clases a las imágenes de d-block y w-100.
Esto setea estilos que impiden que el browser
autoajuste las imágenes por default.
Si uno no los incorpora, puede pasar que, depende del browser y algunas condiciones
más, el browser defina él las dimensiones y
eso va a ser que no se vaya a ver bien y no tengamos control sobre la imagen.
Por lo tanto, recordá agregárselo.
Bien. Veamos entonces cómo quedó esto.
Fijate que es un carrusel típico.
Habrás visto unos cuantos en tu experiencia de usuario.
Vamos a agregarle un par de botones.
you de vuelta los tengo fuera del carousel-inner.
Fijate que cierra acá.
Agregamos dos elementos a, dos links.
Y de clases,
le agregamos el carousel-control-prev, carousel-control-next.
Esto, por supuesto, podrás decir, ché, pero son un montón de nombres,
que si bien tienen cierto criterio, no me lo voy a acordar.
Bueno, para eso tené siempre la documentación a mano.
Yo también lo hago.
Es imposible que te acuerdes todo absolutamente.
Lo importante es que entiendas qué cosas existen y cuál es el criterio de uso.
Después en la documentación chequeas que, bueno, hay que poner -prev para ir para
atrás, -next para indicar que vaya hacia adelante, y algunas cosas más.
Pero es importante que te quede claro cuál es el criterio.
Aparte, por otro lado, estas cosas, los nombres de las clases,
de los elementos, suele cambiar bastante entre versión y versión.
Por lo tanto, siempre es bueno que tengás la
documentación a mano al momento de trabajar.
Bien.
Acá, luego de los a, indicamos con el href cuál es el id,
siempre con numeral y el nombre del id del carrusel.
Bueno, indicamos el rol y el atributo data-slide, que en el caso de ir
hacia atrás, para ver el anterior, le ponemos prev y en el otro el next.
Luego le agregamos algunas clases que definen el ícono,
you son los íconos definidos y demás, y you nos queda.
Vamos a guardar.
Veamos cómo queda.
Fijate que you agrega las flechitas, que tienen una ligera transparencia.
Se nota que no es un color solido, con lo cual queda bastante bien.
Bueno, y por último, lo que te voy a mostrar es,
uno puede configurar ciertas cosas cuando define el carousel.
En este caso, te voy a mostrar solo una para ver cómo se
modifica lo que es el tiempo de, el intervalo entre transición y transición,
el tiempo de transición si querés.
Bien. Entonces, vamos a tomar, usando jQuery,
los elementos que definan la clase carousel.
[SONIDO] Y acá mandamos el mensaje de carousel,
que esto es como para iniciar el carousel, es como si lo iniciáramos a mano.
Bootstrap lo hace solo,
porque you tenemos la clase definida con todos los componentes incorporados.
Pero esto lo podremos usar para,
en el caso de que nosotros querramos indicar solo utilizar un carousel
y que comience a ciclar manualmente, digamos, esto es lo que usaríamos.
Ejecutando el método carousel sobre los elementos que implementen la clase
carousel, le pasamos como argumento un objeto en JSON, es decir,
entre llaves, y definimos el atributo interval, en este caso vamos a poner,
está en milisegundos, que cada dos segundos vaya a rotar.
Veamos cómo queda.
¿Ves?
Cada dos segundos está rotando.
Podemos jugar un poco, vamos a poner que rote cada un segundo.
Ahí notás que va más rápido.
Vamos a poner que rote cada 100 milisegundos, que para no estar así,
pero este es lo mínimo que puede ciclar.
Y bueno, con estos podés ir jugando y ajustando a lo que mejor te parezca.
Si es una imagen que va a tener mucho texto, probablemente vos quieras que rote
cada cinco segundos, cada tres segundos, cada seis segundos,
eso lo verás vos, lo que resulte más razonable.
Para finalizar, como siempre,
detenemos la ejecución del servidor y vamos a hacer un commit.
Agregamos carousel
en la home.
Y agregamos las imágenes también.
[MÚSICA]
[MÚSICA]
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2019 Coursera Inc. Todos los derechos reservados.
