DESARROLLO WEB I
Dr. Ing. Denys Alberto Jaramillo Peralta
Semestre académico 2024-II
djaramillo@[Link]
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
Objetivos
• Conocer el uso del responsive web design.
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
Responsive Web Desing
Es la técnica que nos permite crear sitios adaptables a las condiciones del
ordenador o dispositivo desde donde se van a acceder, sobre todo en lo que
tiene relación con la pantalla del sistema donde se está visualizando
Estrategias de diseño web adaptable
Diseño líquido o fluido: En este tipo de diseño se usan los porcentajes en
las cajas y así estas puedan expandirse o contraerse cuando la ventana del
navegador cambie.
Consulta de media queries: A través de los media queries podemos
definir reglas CSS que se ejecuten en tamaños específicos y solo impacten
en estos. videos y tablas: Podemos definir anchos máximos y mínimos a
Imágenes
nuestros elementos como imágenes, videos o tablas para que se adapten a
distintas resoluciones.
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
Responsive Web Desing
Estrategias de diseño web adaptable
Mobile First: la idea de mobile first es empezar a desarrollar para mobile y
luego a desktop.
Desktop First: Se empieza desde dispositivos de escritorio y luego en los
otros.
Viewport
Propiedades Valor Significado
Width Device-width Indica un ancho para el viewport
Height Device-height Indica un alto para el viewport
Initial-scale 1 Escala inicial con la que se visualiza la web
Minimum-scale 0.1 Escala mínima a la que se puede reducir al hacer zoom
Maximum-scale 10 Escala máxima a la que se puede aumentar al hacer zoom
User-scalable No fixed|yes/zoom Posibilidad de hacer zoom en la web
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
Responsive Web Desing
Media queries
Ejemplo:
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Bordes redondeados y sus variantes
Ejemplo:
• Border-top-left-radius.
• Border-top-right-radius.
• Border-bottom-right-radius.
• Border-bottom-left-radius.
• Border-radius
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Box Shadow
La propiedad box-shadow no permitirá agregar sombras a nuestras cajas.
Sintaxis:
Inset: sombra interna
Offset-x: sombra sobre el eje x
Offset-y: sombre sobre el eje y
Blur-radius: difuminado de sombra
Spread-radius: expansión de sombra
Color: color de sombra
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Box Shadow
La propiedad box-shadow no permitirá agregar sombras a nuestras cajas.
Ejemplo:
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Text Shadow
La propiedad text-shadow no permitirá agregar sombras a los textos.
Sintaxis: offset-x offset-y blur-radius color
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Degradado
Existen dos tipo de degradados: degrado lineal y degradado circular.
Sintaxis degradado lineal:
Background: linear-gradient (to bottom | to right | to top | to left | angle,
color1, color 2)
Sintaxis degradado circular:
Background: radial-gradient (color | percent?, color | percent?, color |
percent?)
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Degradado
Ejemplos:
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Transiciones
Proporcionan una forma de animar los cambios de las propiedades CSS, en
lugar de que los cambios surtan efecto de manera instantánea.
Propiedades
Transition-duration: tiempo de duración, cuyo valor es 0 | tiempo.
Transition-property: propiedades del CSS afectadas por la transición,
teniendo como valor: all | none |propiedad del CSS.
Transition-timing-function: ritmo de la transición.
Transition-delay: tiempo de retardo inicial, valor: 0 |tiempo
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Transiciones-ejemplo
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Animaciones Transform
La propiedad transform nos va permitir modificar los
elementos.
Dentro de sus
Translate: propiedad
traslada se tiene:
al elemento en el eje X e Y.
Translate x: traslada el elemento en el eje X.
Translate y: traslada el elemento en el eje Y.
Scale: escala el elemento desde sus 4 lados.
Scale x: escala el elemento sobre el eje X.
Scale y: escala el elemento sobre el eje Y.
Rotate: rota el elemento en sentido horario y también
antihorario.
Rotate x: rota el elemento sobre el eje X.
Rotate y: rota el elemento sobre el eje Y.
Skew: inclina el elemento sobre el eje x y también sobre el
eje y.
Skew X: inclina el elemento sobre el eje X.
Skew Y: inclina el elemento sobre el eje Y.
Translate3d: traslada el elemento en el eje X e Y también
en el eje Z
Dr. Ing. Denys Alberto Jaramillo Peralta
TranslateZ: traslada el elemento en el eje Z.
Desarrollo Web I
CSS3
Transform-ejemplos
Translate
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Transform-ejemplos
Scale Rotate Skew
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
¿Qué es CSSGrid?
Se destaca por permitir dividir una pagina en áreas o regiones principales, por
definir la relación en términos de tamaño, posición y capas entre partes de un
control construido a partir de primitivas de HTML.
Propiedades
Contenedor: el elemento padre contenedor que definirá la cuadrícula o rejilla.
Item: uno de los hijos que contiene la cuadrícula.
Celda o grid cell: es cada uno de los cuadritos.
Área o grid área: región o conjunto de celdas de la cuadrícula.
Banda o grid track: banda horizontal o vertical de celdas de la cuadrícula.
Linea o grid line: separador horizontal o vertical de las celdas de la
cuadrícula.
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
CSSGrid-ejemplo
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Áreas
Un área es la unión de varias celdas o de tracks, estas áreas tienen que ser
rectangulares, no pueden ser áreas en forma de L por ejemplo. Para declarar un
área primero tendremos que definir los elementos que forman esta área, luego
definiremos sus dimensiones en la grilla.
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Áreas
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Alineaciones
Se puede alinear las grillas en el eje x y en el eje y.
Propiedades de Alineaciones
Propiedad Valores Afecta a
Justify-item Start|end|center|stretch Elementos 1
Align-ítems Start|end|center|stretch Elementos 2
Justify-content Start|end|center|stretch|space-around|space-between|space-evenly Contenido 1
Align-content Start|end|center|stretch|space-around|space-between|space-evenly Contenido 2
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Alineaciones-Ejemplos
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
Posicionamiento de ítems o celdas irregulares
La posición de ítems se realiza mediante las siguientes propiedades:
Propiedades de Alineaciones
Propiedad Valores
Grid-column-start Indica en que columna empezará el item de la cuadrícula
Grid-column-end Indica en que columna terminará el item de la cuadrícula
Grid-row-start Indica en que fila empezará el item en la cuadrícula
Grid-row-end Indica en que fila empezará el item en la cuadrícula
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
osicionamiento de ítems o celdas irregulares-ejemplos
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
CSS3
osicionamiento de ítems o celdas irregulares-ejemplos
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
Gracias
Dr. Ing. Denys Alberto Jaramillo Peralta Desarrollo Web I
