Curso on-line

Editor de Páginas Web

(NVU) / KompoZer

Anexo 2: Nociones sobre Diseño Web

Versión 1.1 elaborado por

Fecha: 07/12/2010

Este documento, así como el resto de material que compone el Curso, están disponibles en la
dirección: http://digitallearning.es/online , según esta licencia Creative Commons
Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web

Anexo 2: Nociones sobre Diseño Web

En este breve anexo, vamos a plantear algunas cuestiones relacionadas con el Diseño de
estructuras (o layouts) de páginas Web:

• Particularidades del diseño web

• Factores a tener en cuenta
• Técnicas existentes
• Pruebas que deberíamos realizar
• Utilizar diseños/hojas de estilo de otros autores
• Diseño orientado al visitante de nuestro sitio web: Usabilidad

Elaborado por Digital Learning (v1.1 - 07/12/10) 2 de 7

Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web

¿Qué tiene de particular el diseño web?

El diseño web difiere del diseño gráfico orientado a un medio impreso. En este último, el
diseñador puede fijar todos los aspectos de su trabajo para que se reproduzca tal como lo
había planteado. Esto no se da en el entorno web, donde los diversos tamaños y resoluciones
de pantallas o los distintos tipos y configuraciones de navegador de los visitantes, hacen que la
presentación de nuestra página pueda diferir respecto al diseño que habíamos ideado.

¿Qué factores pueden afectar a nuestro diseño web?

Algunos factores que pueden afectar a nuestro diseño son los siguientes:
• Tamaño del monitor/pantalla del dispositivo donde se visualiza: pensemos desde un
móvil navegando en Internet, pasando por un miniportatil de 10”, un portatil de 15” a
un PC con pantalla de más de 22”. Incluso aunque solo diseñaramos para un tamaño de
pantalla, el visitante podría estar visualizando nuestra página en una ventana no
maximizada, como ocurre a veces con monitores más grandes.
• Resolución a la que está configurado la pantalla: una resolución de 1024x768, implica
ver 1024 pixeles en horizontal y 768 en vertical, cada uno de ellos con una anchura de
1/1024 y una altura de 1/768 veces la pantalla. Aplicando ese cálculo, en una de
1280x1024 los pixeles serán más pequeños y más grandes en una de 800x600.

• Navegador del usuario: cada navegador presenta sus particularidades a la hora de

mostrar (o renderizar) una página web en función de cómo se ajusten a lo estándares
HTML y CSS (o cómo los interpreten). Aunque se ha avanzado mucho en este aspecto,
siguen existiendo excepciones, con el caso más negativo del Internet Explorer de
Microsoft que en casi todas sus versiones puede mostrar efectos muy anómalos por su
mal cumplimiento de los estándares.
• Configuración del navegador: aunque tienen valores estándar por defecto, el usuario
puede fijar valores de referencia mayores o menores para el tamaño de letra o de
zoom, es decir, un re-escalado de imágenes y texto al mismo tiempo.
Puede haber algún factor más, cómo que el usuario fuerze su propia presentación (fuentes,
tamaños, colores...) frente a la nuestra, pero en definitiva, queda claro que no tenemos
certeza de como se verá nuestra página en los equipos de nuestros visitantes.

Viewport: término de mayor precisión cuando se habla en este

contexto. Se refiere al tamaño del visor/ventana en que el usuario
visualiza la página, y que no teine por qué coincidir con el de su
pantalla/monitor.

Elaborado por Digital Learning (v1.1 - 07/12/10) 3 de 7

Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web

¿Qué efectos pueden darse en la pantalla del visitante a nuestro web debido a estos
factores?.
Dependerá de nuestro diseño, pero suelen ser habituales algunos de éstos:
• áreas o zonas que se solapan
• texto que se desborda de su columna o del área en que ésta ubicado
• líneas de texto que se dividen en dos o más afectando al efecto de diseño que se había
elaborado (por ejemplo en títulos / cabeceras)
• página que se visualizan muy pequeñas, con grandes márgenes a los lados, zonas
vacías o con texto ilegible
• páginas muy anchas, de líneas muy largas que pueden afectar a la comodidad de la
lectura

• Páginas más anchas que la pantalla que exige hacer scroll horizontal para poder ver
todo el contenido. Además de ser molesto, a veces no es percibido por el usuario,
perdiéndose información
• incorrecta visualización de imágenes: mal posicionadas o desplazadas, tamaño no
proporcionado con el resto del contenido

¿Hay alguna receta infalible para el diseño de layouts de páginas web?

Hay técnicas pero ninguna puede cubrir todos los aspectos, ya que como hemos visto, la
combinación de factores es múltiple y genera configuraciones muy variadas, algunas casi
incompatibles. Por ejemplo, ¿qué pasa en el caso de un dispositivo móvil de pequeñas
dimensiones? Podríamos crear hojas de estilos personalizadas aprovechando que existe el
atributo media que nos permite definir un valor (handheld) específico para estos dispositivos,
pero no todos dan soporte (o hacen caso) a dicho parámetro. De hecho ¿puede un diseño
adaptarse a 3” (pulgadas) y a 22” o es mejor crear páginas diferentes para casos tan
dispares?.
En definitiva, como comentan algunos autores, aún dejando fuera casos tan extremos, el
diseño de una web de cierta complejidad, tiene tanto de ciencia como de arte, con cierta (o
bastante) dosis de prueba-error.
No obstante, no partimos de cero. Contamos con guías o técnicas utilizando HTML y CSS (ver
nota 1) que nos permiten abordar el diseño del layout dentro de unos ciertos esquemas. Estos,
se mueven entre dos filosofías de diseño: rígido o flexible. La primera trata de preservar la
apariencia diseñada en papel y la segunda trata de de adaptarse a las condiciones en que
visualiza la página el visitante. Entre medias, es frecuente el empleo de métodos mixtos que
combinan características de ambos enfoques.

Vamos a describirlas esquemáticamente en la siguiente página:

Elaborado por Digital Learning (v1.1 - 07/12/10) 4 de 7

Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web

• Diseño de ancho fijo:

◦ Especifica la anchura de la página y los contenedores en pixels, pensando en las
resolución de pantalla más común que pueden tener los que nos visitan
◦ Posiblemente la técnica más extendida ya que intenta preservar el diseño original
(proporción de las diversas áreas, longitud de las líneas) y la más fácil de realizar en
cuanto a cálculos de tamaños.

◦ Según la resolución que tenga el usuario, la página puede quedar muy estrecha o
por el contrario, ser necesario un scroll horizontal. Si el usuario aumenta tamaño de
texto, las líneas pueden quedar muy cortas o perderse parte del diseño. Por
ejemplo, un título en una línea, puede pasar a ocupar dos, trastocando la apariencia
original.
◦ Puede haber variantes según utilicemos posicionamiento absoluto, (diseño aún más
rígido), o hagamos que los contenedores floten.
• Diseño Fluido o Líquido:
◦ la página y sus áreas se redimensionan de acuerdo al tamaño de la ventana del
navegador del usuario
◦ Utiliza como unidades de medida el porcentaje (%)
◦ Si el diseño implica 2 ó más columnas, al menos uno de los contenedores se
posiciona flotando a uno u otro lado de la pantalla.
◦ Este diseño se adapta muy bien a la variabilidad de este medio pero pueden darse
efectos perjudiciales para la accesibilidad del sitio, como por ejemplo, líneas muy
largas en pantallas grandes que dificultan su lectura.
• Diseño Elástico:
◦ cambia el tamaño de las áreas de la página en función del tamaño del texto que
elige el usuario, tratando de mantener el número de caracteres por línea igual al
diseño 'original'.
◦ los contenedores los dimensionamos con medidas en 'em', unidad proporcional al
tamaño de texto definido (o redimensionado por el usuario) en cada área.
◦ El tamaño de las imágenes no varía al modificarse el tamaño de texto por el
usuario, con lo que se romperían las proporciones (aunque hay formas más
elaboradas para evitarlo)
• Diseño híbridos o mixtos:
◦ utilizan combinaciones de unidades sobre estas técnicas. Por ejemplo, definir en un
diseño fluido un ancho fijo para alguna columna-contenedor o fijar tamaños
mínimos o máximos de página para evitar tamaños no deseables.

Nota 1: existen también técnicas para detectar ciertas configuraciones

del equipo en que se visualiza nuestra página (tipo de navegador,
resolución, plugins instalados,....), empleando por ejemplo JavaScript.
Se pueden servir páginas 'optimizadas' a esos parámetros, aunque no
se recomienda, salvo quizás para evitar algunos bugs conocidos en
determinados navegadores.

Elaborado por Digital Learning (v1.1 - 07/12/10) 5 de 7

Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web

¿Estas técnicas son tan genéricas como se describen aquí, o se dan consejos más
detallados?
Por supuesto, al profundizar en estos temas vas a encontrar numerosa documentación en
Internet en forma de cursos/tutoriales, páginas web o blogs (aquí tienes un ejemplo), que te
detallaran mucho más como definir esos diseños. Incluso, hay numerosas herramientas on-line
que automatizan la creación de estructuras de página y hojas de estilo asociadas, según
distintas técnicas y el diseño que se quiera obtener, aunque recomendamos su uso si es como
apoyo y complemento al aprendizaje del propio alumno.
En cuanto a libros, hay muchos y muy buenos que tratan este tema dentro del contexto HTML
y CSS, pero podemos recomendar uno que se centra específicamente en estas cuestiones:

• Flexible Web Design: Creating Liquid and Elastic Layouts with CSS (Zoe Gillenwater )

¿Cómo debemos comprobar el diseño que realicemos?

Podemos empezar probando en nuestro propio equipo. Si vamos a crear páginas web puede
ser una buena idea tener instalados los navegadores más utilizados. Internet Explorer y
Firefox, serían casi obligatorios (o y muy recomendables Google Chrome, Opera y Safari.
Por supuesto, conviene que probemos con diversas configuraciones, aumentando tamaño de
texto, haciendo zoom, minimizando la ventana y cambiando la resolución. Esto nos puede dar
una idea rápida de como se comportan las páginas en situaciones diversas.
Tenemos no obstante ayudas que nos pueden interesar. Por un lado, las estadísticas que
suministran las herramientas de análisis de visitas a nuestras páginas (Webanalyzer, Google
Analytics,...) nos dan información sobre el navegador y algunos aspectos de la configuración
del equipo de nuestros visitantes. Podemos ver cuales son las más comunes o si hay alguna
significativa que no habíamos tenido en cuenta.
Por otro lado, hay servicios on-line gratuitos que nos realizan estas comprobaciones. Dos
ejemplos: browsershots.org nos muestra capturas de pantalla de nuestra página en multitud
de configuraciones(sobre todo con distintas versiones de cada navegador, algo que puede ser
más complicado de probar en nuestro equipo) o este script que nos muestra nuestro sitio web
en un amplio rango de resoluciones de pantalla.

Nota 2: Las estadísticas generales en este área varían (están influidas por el
tipo de visitantes de los sitios que las recogen, aquí puedes ver un
ejemplo) pero nos vienen a indicar que hay una gran variedad. Podemos
pensar en 1024x768 y 1280x800 como la más comunes, aunque cada vez más
monitores con mayores resoluciones y disminuyendo mucho la de 800x600 que
hace unos años era la más extendida.

Elaborado por Digital Learning (v1.1 - 07/12/10) 6 de 7

Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web

¿Y si utilizo hojas de estilos ya creadas?

En Internet hay numerosos sitios que recopilan ejemplos de múltiples tipos de layouts y hojas
de estilo, de los que podemos aprender las mejores prácticas. Además, muchas están bajo una
licencia que permite su libre copia y uso, aunque conviene comprobar si bajo alguna condición.
Te mencionamos dos de los más conocidos:

• Open Source Web Design

• Open Design Community

Nuestra recomendación, no obstante, es que esto no sustituya al aprendizaje práctico que nos
permite idear y experimentar con los resultados de las distintas reglas de estilo que creemos.
Aunque podamos copiar o enlazar a la hoja de estilo creada por otro autor, el contar con
suficientes conocimientos nos permitirá comprender su funcionamiento, editarla y
personalizarla y en definitiva, tener un mayor control sobre nuestras páginas.
En esta línea, es muy recomendable para aquellos que empiezan en este campo y no la
conozcan, instalar una herramienta como Firebug, extensión de Firefox, que permite analizar
y experimentar (a nivel de su código HTML, CSS y JavaScript) tanto con las páginas que
creemos como con aquellas que nos parezcan de interés, mientras navegamos. Si preferimos
otro navegador, los más populares traen incorporadas utilidades en este sentido, que conviene
que exploremos y aprendamos a utilizar.

¿Alguna cuestión más a tener en cuenta en el diseño web?

Sí. Por ejemplo las cuestiones relacionadas con la arquitectura de la web, donde planteamos la
organización y distribución lógica del contenido a través de las diferentes páginas del sitio.
También el diseño gráfico, que marca el aspecto visual final de nuestra web y donde
deberemos tener en cuenta no solo las buenas prácticas aceptadas en este campo, sino su
aplicación en un medio concreto como es la Web, con variedad de equipos y entornos en que
se reproducirá dicho diseño.
Sin entrar en cuestiones teóricas sobre la estrecha relación y áreas de solapamiento entre
todos estos campos, apuntamos un concepto fundamental más: la USABILIDAD. Como su
nombre indica, es un atributo relacionado con la facilidad de uso, de exploración de nuestro
sitio web. Surge a partir del concepto de diseño centrado en el usuario, a diferencia de los
diseños más basados en la tecnología o los orientados a la creatividad visual. Engloba aspectos
que ya hemos apuntado o que entran de lleno en los campos que citábamos al principio, pero
con el enfoque a la facilidad de interacción del usuario con nuestro sitio web.
No podemos ahondar más en ello, pero puedes encontrar mucha información disponible en
Internet sobre este tema, buscando por dicho término. Como ejemplo, en esta página tienes
una buena introducción a este campo. Uno de los gurús en este área es Jakob Nielsen, del que
si estás interesado, puedes leer su libro traducido al español:

• “Usabilidad: Prioridad en el diseño Web” (Ed. Anaya Multimedia – 2006)

o consultar su web: http://www.useit.com (¡curiosamente diseñada con una dudosa estructura
de tablas!)

Elaborado por Digital Learning (v1.1 - 07/12/10) 7 de 7