TERESA MARGARITA NAVARRETE CARCAMO

| Ingeniería de Software I, | 13 de noviembre de 2015

DISEÑO WEB. LIQUIDO, HIBRIDO.

PÁGINA 1

Diseño web.

Estructura los elementos gráficos de un sitio web para expresar estéticamente la

identidad visual de una compañía u organización.

Diseño web líquido o fluido.

Se trata de aquel tipo de diseño de página web que se adapta al ancho de la pantalla

del navegador y a la resolución de la pantalla. Es aquel que tiende a ocupar todo el

ancho de la pantalla, sea cual sea el tamaño de esta. En este caso el diseño web

utiliza porcentajes en lugar de pixeles para establecer los anchos de sus diseños,

aunque también se pueden emplear pixeles y medidas máximas y mininas con min-

width y max-width.

En el pasado el diseño de la interfaz se basaba en resoluciones aproximadas de 960

pixeles, y esto funcionaba porque un 99% de los usuarios podían adaptarse y leer

fácilmente esta resolución, independientemente de la máquina, el navegador, o el

sistema operativo que estaban utilizando. Los tiempos cambiaron y cada vez son

más los usuarios que utilizan dispositivos móviles para navegar. Ante esto las

empresas empezaron a diseñar dos aplicativos, para diferentes tipos de dispositivos,

una versión full y una versión más liviana para dispositivos móviles que intentaban

cubrir todo el contenido de la versión original. Está técnica tiene ciertas

desventajas porque exige un mayor esfuerzo, la sensación de no tener todo en la

versión móvil y la creciente diversidad de modelos con una igual cantidad de

tamaños.

PÁGINA 2

La técnica de diseño líquido:

1. El ancho de la pantalla: lo más importante es conseguir un ancho

flexible, es el factor que afecta mucho los diseños cuando se ven en las

pantallas mas pequeñas. Crea contenedores que se extienden o se retrae

en las diferentes resoluciones.

2. Las imágenes: es un tema que tener en cuenta cuando se pasa de ancho

fijo o diseñado fluido, son las imágenes en el HTML (los elementos

<img>). Un archivo de imagen, en su mayor parte es un archivo de

tamaño fijo que no se redimensiona, esto puede dar errores en la

presentación del diseño con imágenes de gran tamaño que se

desbordaran de la ventana del navegador.

3. Elimina el zoom en los dispositivos móviles: los dispositivos celulares

o tablas utilizan una función de “zo0m” para mostrar sitios web muy

grandes, en escala en sus pequeñas pantallas.

4. Utilizar CSS Query @media: las características de “consultas de

medios” en CSS permite aplicar cambios de diseño basado en el tamaño

de visualización y la capacidad del dispositivo en el que se está

mostrando el contenido.

TÉCNICA DE DISEÑO WEB LÍQUIDO.

El contenido ocupa toda el área visual

disponible según el tamaño de

pantalla y las dimensiones de la

ventana del navegador. Este tipo de

diseño es recomendado para sitios web

con un marcado carácter práctico, esto

es, herramientas accesibles a través de

web.

PÁGINA 3

PÁGINA 4

Diseño web hibrido.

Se habla de diseño hibrido cuando en una web se combinan áreas con ancho fijo y

otras con ancho variable. El resultado final es realmente una web de diseño líquido

que conserva las proporciones en determinadas áreas.

Es el diseño y desarrollo de adaptar la apariencia de las páginas web al dispositivo

que esté utilizando para la visualizarla. Hoy en día las páginas web se visualizan en

multitud de tipos de dispositivos como tabletas, teléfonos inteligentes, libros

electrónicos, portátiles, pc, etc. Aun en cada tipo de dispositivo tiene sus

características concretas, tamaño de pantalla, resolución, potencia de CPU,

capacidad de memoria entre otras. Esta tecnología pretende que con un solo diseño

web, se tenga una visualización adecuada en cualquier dispositivo.

PÁGINA 5

Las ventajas del diseño hibrido son:

Con una misma web (un sólo HTML y CSS) se cubren todas las resoluciones de pantalla

Se reducen los costes de creación y mantenimiento de una web, se acorta el desarrollo

Optimización SEO, sólo hay una URL, se ahorran las redirecciones a otros layouts

(mobile.dominio.com)

Todos los usuarios disfrutan del mismo contenido (suele ser frustrante obtener versiones

light de las webs)

De esta manera el diseño responsivo nos proporciona una visualización controlada de la página, muy

similar a la que nos ofrece el diseño de ancho fijo.

Diferencias entre diseño líquido y diseño hibrido.

Diseño líquido o fluido.

Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta 1.980 px

Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para ordenadores de

escritorio con una alta resolución de pantalla (por ejemplo un iMac)

Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para ordenadores de

escritorio normales

Layout para tablets con un ancho mínimo de 720 px en posicion vertical (portrait) y un

máximo de 985 px para tablets en posición horizontal (landscape)

Diseño hibrido.

Ancho y alto de la ventana del navegador (width, high)

Orientación del dispositivo (puede ser portrait o landscape, es decir vertical u horizontal)

Aspect-ratio (proporción entre el ancho y el alto de la pantalla por ejemplo 16:9)

Grid (número de columnas que muestra)

Resolución del dispositivo (densidad de píxeles que muestra la pantalla)

Color (número de colores que representa la pantalla)

Hay cuatro parámetros mas (monochrome, device aspect-ratio, color-index, scan) que

ayudan a definir con mayor exactitud el dispositivo

PÁGINA 6

Diseño web móvil.

En este caso crear un sitio web para ser accedido desde dispositivos móviles o en

pantalla pequeñas, se debe considerar un diseño y otros aspectos como: la

disposición de contenidos, cantidad de

contenido, criterios de accesibilidad, pero

de imágenes y archivos.

Criterios de accesibilidad: menú y rutas de

navegación.

Principales ventajas de una web optimizada para móviles y Tablet.

Diseño adaptado a nuestra pantalla

Comodidad a la hora de navegar y leer textos al no tener que usar el zoom.

Contenido más directo, los elementos irrelevantes se eliminan.

Mayor impacto visual.

PÁGINA 7