30008-S02-PRESENTACION - July Luo

Vista previa del material en texto

PROGRAMACIÓN WEB I
CONTENIDO, COMPLEMENTOS Y HELPERS
Tipografía
Imágenes responsive
Estilos personalizados
Implementación de carousel
Barras de navegación
Videos
SESIÓN 02
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
1
INTRODUCCIÓN
DE LA SESIÓN
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
Durante esta sesión:
Conocerás las ventajas de usar estilos CSS personalizados en Bootstrap, los cuales permitirán aplicar diferentes diseños durante la construcción de un sitio web.
Identificarás cómo es la implementación de un carousel animado para mostrar imágenes que se adapten al tamaño del navegador.
Aprenderás el uso e instalación de las barras de navegación que tiene el Framework Bootstrap.
+ INTRODUCCIÓN 
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
3
TIPOGRAFÍA
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
4
TIPOGRAFÍA EN BOOTSTRAP
El framework permite distintos estilos que se pueden aplicar a los textos.
https://www.youtube.com/watch?v=8wHeZ5CUANg
“TIPOGRAFÍA EN BOOTSTRAP”
+ TIPOGRAFÍA
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
Tipografía en Bootstrap: el framework permite aplicar diferentes estilos tipográficos a los textos, en el presente video se puede ver el listado de los estilos con los que cuenta, así como también su personalización.
5
ENCABEZADO
Los encabezados permiten tener una jerarquía en los títulos y subtítulos de una página web. En html las etiquetas convencionales son h1 hasta el h6, pero en Bootstrap las podemos encontrar como clases class=“h1”.
+ TIPOGRAFÍA
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
6
DISPLAY
Los encabezados “display” pueden emplearse para resaltar títulos y para que se puedan ver más estilizados. 
+ TIPOGRAFÍA
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
7
ESTILOS EN LÍNEAS DE TEXTOS
Existen las siguientes etiquetas que se pueden usar para dar un estilo diferente a las líneas y cuerpos de textos en Bootstrap. 
+ TIPOGRAFÍA
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
8
ESTILOS EN LÍNEAS DE TEXTOS
Existen las siguientes etiquetas que se pueden usar para dar un estilo diferente a las líneas y cuerpos de textos en Bootstrap. 
+ TIPOGRAFÍA
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
9
IMÁGENES 
RESPONSIVE
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
10
IMÁGENES EN BOOTSTRAP
Para lograr que las imágenes sean flexibles se debe agregar el estilo .img-fluid. Este estilo conseguirá que la imagen se adapte al 100% de su estilo padre.
+ IMÁGENES RESPONSIVE
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
11
ESTILOS 
PERSONALIZADOS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
12
CSS en Bootstrap
Bootstrap incluye alrededor de dos docenas de propiedad personalizadas en su CSS compilado. Estos brindan un fácil acceso a los valores de uso común, como los colores de nuestro tema, los puntos de interrupción y las pilas de fuentes primarias cuando se trabaja en el inspector de su navegador, una caja de arena de código o la creación de prototipos en general.
+ ESTILOS PERSONALIZADOS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
13
CSS prefijo para evitar complifictos en Bootstrap
Las personalizaciones de los estilos deben ir con el prefijo de “bs-” para evitar coflictos con los CSS preestablecidos.
+ ESTILOS PERSONALIZADOS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
14
IMPLEMENTACIÓN 
DE CAROUSEL
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
15
CAROUSEL CON BOOTSTRAP
Es un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel. 
El carrusel es una presentación de diapositivas para recorrer una serie de contenidos, construidos con transformaciones CSS 3D y un poco de JavaScript. 
Funciona con una serie de imágenes, texto o marcado personalizado. También incluye soporte para controles e indicadores anteriores / siguientes.
+ IMPLEMENTACIÓN DE CAROUSEL
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
16
CAROUSEL CON BOOTSTRAP
Un carousel con solo diapositivas. Se debe tener en cuenta la presencia de .d-blocky .w-100 en las imágenes del carrusel para evitar la alineación de la imagen predeterminada del navegador.
Ejemplo: Carousel Simple 
runebook.dev
+ IMPLEMENTACIÓN DE CAROUSEL
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
17
CAROUSEL CON BOOTSTRAP
Un carousel con solo diapositivas. Se debe tener en cuenta la presencia de .d-blocky .w-100 en las imágenes del carrusel para evitar la alineación de la imagen predeterminada del navegador.
Ejemplo: Carousel con Controles
runebook.dev
+ IMPLEMENTACIÓN DE CAROUSEL
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
18
BARRAS
DE NAVEGACIÓN
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
19
NAVEGACIÓN CON BOOTSTRAP
Bootstrap permite la creación de barras de navegación. Para esto se debe iniciar con el estilo .nav. 
Además se puede agregar distintas interacciones, como botones con estados activos y deshabilitados.
Estructura base de .nav (barra de navegación)
+ BARRAS DE NAVEGACIÓN
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
20
NAVEGACIÓN: ALINEAMIENTO HORIZONTAL
Para alinea los botones al centro .justify-content-center
+ BARRAS DE NAVEGACIÓN
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
21
NAVEGACIÓN : ALINEAMIENTO HORIZONTAL
Para alinear los botones al final .justify-content-end
+ BARRAS DE NAVEGACIÓN
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
22
NAVEGACIÓN: ALINEAMIENTO VERTICAL
Para alinea los botones de forma vertical .flex-column
+ BARRAS DE NAVEGACIÓN
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
23
NAVEGACIÓN : DROPDOWN
El uso de los dropdown permiten esconder más botones dentro de uno principal. Se uso para categorizar la navegación.
+ BARRAS DE NAVEGACIÓN
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
24
VIDEOS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
25
VIDEOS RESPONSIVE EN BOOTSTRAP
El framework permite una forma rápida de ingresar videos y que estos sean flexibles a los tamaños de los navegadores. Primero se debe definir el aspecto del video que se va a ingresar.
+ VIDEOS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
26
VIDEOS RESPONSIVE EN BOOTSTRAP
Una vez seleccionado el aspecto del video, se debe ingresar el iframe con el video a proyectar.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen>
</iframe> 
</div> 
+ VIDEOS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
27
CONCLUSIONES
MÁS REFERENCIAS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
Framework Bootstrap permite que las imágenes y videos se adapten al tamaño de los navegadores.
Bootstrap incluye estilos tipográficos para elaborar un diseño amigable y moderno.
La creación de barras de navegación permite navegar por las distintas páginas de un sitio web. Bootstrap brinda una estructura de rápido uso para la creación de estas.
+ CONCLUSIONES 
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
29
BIBLIOGRAFÍA
MÁS REFERENCIAS
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
Bootstrap. (2021). Recuperado de: https://getbootstrap.com/docs/5.0/getting-started/introduction
Programmers. (2020). Tipografías en Bootstrap 5. Recuperado de https://www.youtube.com/watch?v=8wHeZ5CUANg. Fechade consulta: 24 de setiembre de 2021.
+ BIBLIOGRAFÍA
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados
PROGRAMACIÓN WEB I  SESIÓN 02
© ISIL. Todos los derechos reservados