Tema 11 Iissi 2 - Responsive Web Design (CSS3 & HTML5) PDF

Preview

Summary

Download Tema 11 Iissi 2 - Responsive Web Design (CSS3 & HTML5) PDF

Description

Introducción a la Ingeniería del Software y a los Sistemas de Información II RESUMEN TEMA 11 – RESPONSIVE WEB DESIGN (CSS3 & HTML5)

•

Comparado con el diseño tradicional, en diseño web no existen limitaciones en ancho y alto ya que el usuario puede hacer scroll de forma horizontal y vertical.

•

Opciones para dispositivos móviles: o

o

Aplicaciones nativas: desarrolladas en el leguaje nativo del terminal, necesitan de un desarrollo distinto para cada OS. Puede acceder a los recursos internos del dispositivo (GPS, cámara, etc). Web mobile: es una web aparte de la original diseñada específicamente para dispositivos móviles. (2 versiones del mismo contenido lo cual complica el mantenimiento).

•

Tipos de diseño web: o Diseño fijo: el diseño permanece inalterable en cualquier dispositivo. El tamaño está preestablecido en píxeles. o Diseño líquido (o fluido): el tamaño se ajusta a la pantalla de forma automática. Utilizan porcentajes, max-width y min-width. El coste de mantenimiento aumenta.

•

Diseño web en la actualidad: o Responsive Web Design (RWD): se adapta a cualquier tamaño de dispositivo mientras que el contenido no varía. El uso de CSS + HTML permite cambiar el tamaño, ocultar, reducir, ampliar o mover el contenido. El propósito de la RWD está descrito por la World Wide Web Consortium (W3C). o Beneficios de la RWD: ▪ Un solo sitio web vale para todos los dispositivos (código único, menor coste y fácil de actualizar). ▪ Una única URL (mejor tratamiento SEO, un solo dominio, menos redirecciones). ▪ Todos los usuarios ven el mismo contenido (no hay versiones “recortadas”). o Principios de la RWD: ▪ No pensar en píxeles sino en porcentajes (proporcionalidad). Pensar en “bloques” (módulos). ▪ Potenciar el diseño en dispositivos móviles. ▪ Usar los formatos básicos de la página (Ej: usar las fuentes que ya están en el dispositivo para no tener que cargar otro archivo más). ▪ Usar “media queries”: módulos CSS que permiten identificar el tipo de medio en el que se está visualizando el sitio web para poder aplicar la mejor configuración.

1

Introducción a la Ingeniería del Software y a los Sistemas de Información II •

HTML5: o Presenta mecanismos para conocer dinámicamente la parte visible de una web:

o o o o

name: nombre del element. viewport: área visible para el usuario (varía con el dispositivo). content: indica que el ancho de la página debe ser el mismo que el ancho del dispositivo. initial-scale=1.0: inicia la visualización de la página sin zoom:

•

CSS3 box-sizing: o Por defecto el tamaño de un elemento es width+padding+border para el ancho y height+padding+border para el alto. o box-sizing es una propiedad de CSS3 que permite modificar el modelo de las cajas: ▪ border-box hace que el ancho se el especificado por width y el alto el especificado por height incluso aunque se hayan definido un padding y un border.

•

Sistema Grid: o El uso de Grid facilita la colocación de elementos en una web. o Construir un Grid en CSS: ▪ Dividir el viewport en 10 columnas iguales (por ejemplo). ▪ Las columnas deben “flotar” a la izquierda con un padding 15px ▪ Las columnas se sacan del flujo de la página y se colocan otros elementos como si las columnas no existieran. o Construir un Grid en HTML: ▪ Se crea un contenedor para las columnas ().

•

Media Queries: o Técnica de CSS3 que permite identificar el dispositivo y adaptar la representación del contenido según las características. o Usa condicionales (if-else) y break-points.

2

Introducción a la Ingeniería del Software y a los Sistemas de Información II

3

Introducción a la Ingeniería del Software y a los Sistemas de Información II

•

Imágenes y Vídeos: o Usando en lugar de tener una imagen que aumenta o disminuye según el dispositivo, se tienen varias imágenes que cambian en función del navegador.

•

Frameworks: o Un framework es un conjunto de conceptos y herramientas que facilita el trabajo de diseñar una web al proporcionar una “base” o “esqueleto” para el diseño. (Ejs: Bootstrap, Foundation, Skeleton, etc).

4...