Diseño y desarrollo Web

Docente: Ing. Yolfer Rosales C.

SESIÓN TEMA
06 Diseño de sitios web con CSS

LOGRO DE SESIÓN :

Al finalizar la sesión, el estudiante es capaz de establecer

animaciones a objetos HTML
¿Qué es diseño adaptable?
¿Qué es diseño adaptable?
(Actividad)

Estudiante

Docente

PC
CELULAR
GRANDE

MENOS
800PX
1. Configurar el viewport

2. Utilizar medidas en % en los contenedores

3. Establecer reglas de CSS en determinados tamaños
Actividad

estudiante
 <meta> Establece ciertas meditas a diferentes tamaños

name:viewport

• Ancho de la pagina debe ser igual al ancho del dispositivo

que estamos viendo la web.

• El usuario no pueda aumentar con los dedos el tamaño

de la pagina web
Mediaqueris Son condicionales que podemos establecer a la
pagina para establecer estilos según el tamaño del
contenido.
Mediaqueris Son condicionales que podemos establecer a la pagina para
establecer estilos según el tamaño del contenido.
SESIÓN TEMA: Flexbox
06

LOGRO DE SESIÓN :

Al finalizar la sesión, el estudiante es capaz de identificar las

propiedades de FlexBox para crear sitios web adaptativos a
dispositivos.
Flexbox Flexbox es un conjunto de propiedades que nos permiten
distribuir nuestros elementos de una forma flexible para
mejores layouts / plantillas o diseños mas fácilmente

Importante!!
Para utilizar flexbox necesitamos un contenedor padre
que tenga elementos hijos. Ya que a estos son los que
se harán flexiblex.
Propiedades Flexbox
de flexbox Flexbox se divide en 2 grupos de propiedades:
1. Propiedades para los elementos padre
2. Propiedades para los elementos hijo

display:flex;
Nos permite habilitar que los elementos hijos sean flexibles
FlexBox

PROPIEDADES PARA
ELEMENTOS PADRE
Propiedades - flex-direction
de flexbox row | row-reverse | column | column-reverse
• Establece una orientación horizontal o vertical al
contenido o objetos hijos

Ejemplo: Establecer una orientación en fila organizando

el contenido al reverso.
Propiedades - flex-wrap:;
no-wrap | wrap | wrap-reverse
de flexbox
Especifica si los elementos "hijos" son obligados a permanecer
en una misma línea o pueden fluir en varias líneas.
 - justify-content:;
Propiedades flex-start | flex-end | center | space-between | space-around
de flexbox
Define cómo el navegador distribuye el espacio entre y
alrededor de los items flex, a lo largo del eje principal de su
contenedor.
Propiedades - align-items:;
flex-start | flex-end | center | stretch | baseline
de flexbox
Alinea los elementos de la línea flexible actual de la misma
forma que justify-content, pero en dirección vertical.
Propiedades - align-content ;
de flexbox IMPORTANTE: Esta propiedad solo funciona cuando hay mas de una
línea de elementos.

flex-start | flex-end | center | stretch | space-between | space-around

Propiedades - order:;
de flexbox Establece un orden de posicionamiento del objeto hijo.

Elementos
hijo
Propiedades - flex-grow:;
de flexbox Acepta un numero que servirá de proporción para hacer
crecer el elemento en relación a los otros.
Si todos los elementos tienen flex-grow 1 el espacio restante
Elementos se distribuirá entre los elementos.
hijo
Propiedades - flex-shrink:;
Define la habilidad de un elemento para hacerse mas
de flexbox
pequeño.
Por defecto todos se pueden hacer mas pequeños pero si
Elementos le ponemos flex-shrink 0 el elemento no podrá ser mas
hijo pequeño que su ancho especificado.
Propiedades - flex-shrink:;
de flexbox

Elementos
hijo
Propiedades - flex-basis:;
Nos permite especificar el valor
de flexbox
inicial que tendrá un elemento.

Elementos
hijo
Propiedades - flex:1 1 auto;
Es un atajo para flex-grow, flex-shrink y flex-basis
de flexbox

- align-self:;
Elementos auto | flex-start | flex-end | center | baseline | stretch;
hijo
Propiedades - align-self:;
auto | flex-start | flex-end | center | baseline | stretch;
de flexbox

Elementos
hijo
Actividad

Pantalla de
PC
Completo
Pantalla
de Tablet
Grande
Pantalla de
Tablet
pequeño
Pantalla de
celular
(Actividad)

Estableces
CSS para que
la web se
adapte a
distintas
pantallas

Importante!
Utilizar
FlexBox