Sesion14 DW
Sesion14 DW
Sesion14 DW
DISEÑO WEB
SESIÓN
15
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
www.usat.edu.pe
www.usat.edu.pe
Presentación inicial
• Marcar asistencia
www.usat.edu.pe
Propósito de la sesión
Objetivo de la sesión:
✓ Realizar estructuras HTML responsivas utilizando el modelo Grid CSS
Contribuye al logro
Contribuye al logro
Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s)
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
3 www.usat.edu.pe
Contenidos
Métodos de visualización
Diseño responsivo
Media Queries
Ejercicios
4 www.usat.edu.pe
Diferentes métodos de CSS para cambiar el orden
de visualización
• Método #1: Floats
• Método #2: Posicionamiento
• Método #3: Propiedad direction
• Método #4: Transformaciones
• Método #5: Flexbox
• Método #6: Columnas (usado por bootstrap)
• Metodo #7: Maquetado CSS Grid
5 www.usat.edu.pe
Ejercicio
• Utilizando Float y etiquetas HTML5 realizar la siguiente estructura HTML
6 www.usat.edu.pe
Grid CSS (Cuadrículas)
7 www.usat.edu.pe
Iniciar uso de Grid
• Para utilizar Grid CSS necesitaremos tener en cuenta una serie de
conceptos que utilizaremos a partir de ahora y que definiremos a
continuación: Contenedor: Existe un elemento padre que es el
•
9 www.usat.edu.pe
Grid con filas y columnas
10 www.usat.edu.pe
Ejercicio 01: Definir HTML
Para utilizar cuadriculas Grid CSS, trabajaremos bajo el siguiente
escenario:
<div class="grid"> <!-- contenedor -->
<div class="a">Item 1</div> <!-- cada uno de los ítems del grid -->
<div class="b">Item 2</div>
<div class="c">Item 3</div>
<div class="d">Item 4</div>
</div>
11 www.usat.edu.pe
Ejercicio 02: Iniciar Grid
.grid {
display: grid;
grid-template-columns: 50px 300px;
grid-template-rows: 200px 75px;
}
12 www.usat.edu.pe
fr: Unidad fracción restante
13 www.usat.edu.pe
Ejercicio 03
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr;
}
14 www.usat.edu.pe
Filas y columnas repetitivas
15 www.usat.edu.pe
Ejercicio 04
.grid {
display: grid;
grid-template-columns: 100px repeat(2, 50px) 200px;
grid-template-rows: repeat(2, 50px 100px);
}
Su equivalente es:
.grid {
display: grid;
grid-template-columns: 100px 50px 50px 200px;
grid-template-rows: 50px 100px 50px 100px;;
}
16 www.usat.edu.pe
Grid por áreas
Propiedad Descripción
grid-template- Indica la disposición de las áreas en el grid. Cada texto entre comillas
areas simboliza una fila.
grid-area Indica el nombre del área. Se usa sobre ítems hijos del grid.
17 www.usat.edu.pe
Ejercicio 05 Menu Cabecera
.grid {
display: grid;
grid-template-areas: "head head"
"menu main"
"foot foot";
}
contenido
.a { grid-area: head; background: blue }
.b { grid-area: menu; background: red } Pie de
pagina
.c { grid-area: main; background: green }
.d { grid-area: foot; background: orange }
18 www.usat.edu.pe
Ejercicio
• Utilizando GRID realizar la siguiente estructura HTML
19 www.usat.edu.pe
¿Qué es diseño responsivo?
ES RESPONSIVO
NO ES RESPONSIVO
https://github.com/
http://intranet.usat.edu.pe/campusvirtual/estudiante/index.as
p
www.usat.edu.pe
¿Qué es diseño responsivo?
www.usat.edu.pe
¿Por dónde empezar?
www.usat.edu.pe
Media Queries
• Las media queries (en español "consultas de medios") son útiles cuando
deseas modificar tu página web o aplicación en función del tipo de
dispositivo (como una impresora o una pantalla) o de características y
parámetros específicos (como la resolución de la pantalla o el ancho
del viewport del navegador).
23 www.usat.edu.pe
Cómo colocar en el orden adecuado los Media
Queries
Por lo que el orden que se usa habitualmente para las Media Queries
queda así:
• Los estilos sin Media Queries serán globales y estos afectarán a todos los
dispositivos.
• Lo siguiente es colocar en cabeza las Media Queries con la siguiente
anchura de pantalla que necesites.
• Por último, colocaremos las Media Queries para situar en orden
creciente el resto de anchura de pantallas. Es decir, se finaliza con las
Media Queries con la anchura mayor de pantalla.
24 www.usat.edu.pe
Puntos de quiebre (breakpoints)
• Los puntos de quiebre (o breakpoints) son los anchos (en pixeles) en los
que ocurren cambios en nuestra página para que se adapte a diferentes
pantallas.
25 www.usat.edu.pe
Sintaxis
@media (min-width: TAMAÑO-EN-PÍXELES) {
/* Los estilos aquí contenidos solo se aplicarán a partir
del tamaño de pantalla indicado */
}
> 1000px
Entre 600 a 1000px
First mobile
27 www.usat.edu.pe
Caso de aplicación
28 www.usat.edu.pe
Conclusiones
29 www.usat.edu.pe
Referencias
[1] C. Aubry, HTML5 y CSS – Revolucione el diseño de sus sitios web, Tercera ed.,
Barcelona: ENI, 2017.
[2] M. Rubiales, Curso de Desarrollo Web. HMTL, CSS y JavaScript. Madrid: Anaya, 2018
[3] OpenClassroom, «Aprende a crear tu propio sitio Web con HTML5 y CSS3,» 6 mayo
2020. [En línea]. Disponible: https://openclassrooms.com/en/courses/3339201-
aprende-a-crear-tu-propio-sitio-web-con-html5-y-css3. [Último acceso: 13 mayo
2020].
[4] J. Lòpez y T. Ester, «HTML5 y CSS3,» 2019. [En línea]. Available:
https://www.html6.es/index.html#. [Último acceso: 19 mayo 2020].
[5] ARKAITZ GARRO, «CSS3,» 28 enero 2014. [En línea]. Available:
https://www.arkaitzgarro.com/css3/. [Último acceso: 19 mayo 2020].
31 www.usat.edu.pe
Enlaces de interés
• https://uniwebsidad.com/libros/css
• https://uniwebsidad.com/libros/css-avanzado
32 www.usat.edu.pe
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
http://www.facebook.com/usat.peru
https://twitter.com/usatenlinea
https://www.youtube.com/user/tvusat
https://plus.google.com/+usateduperu
www.usat.edu.pe
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: