1. Koldo Parra de la Horra 1
REGLAS GENERALES
SOBRE DISEÑO DE
PÁGINAS WEB
Recomendaciones previas a la hora de
crear tus páginas.

2. Koldo Parra de la Horra 2
Nombres de Archivos
• Es importante, para evitar problemas con los nombres de archivo cuando queramos “subirlos” al servidor, que se tengan en cuenta ciertas reglas. De lo contrario, puede ocurrir que nuestra Web funcione
perfectamente en nuestro equipo y en el servidor no:
– Utilizar una sola palabra como nombre de un archivo.
– Que no tenga más de 8 caracteres.
– Que no tenga vocales con tildes, ni mayúsculas, ni “eñes”, ni espacios en blanco.
Ejemplo:
web_1.html
La “barrabaja” es un buen sistema para evitar espacios

3. Koldo Parra de la Horra 3
Resolución
• Actualmente las resoluciones estándar en la Web son la de 800 x 600 píxeles o 1024 x 768 píxeles,
hecho al que ha contribuido la generalización de monitores de 17 e incluso 19 pulgadas en los equipos
nuevos. Con los monitores de 15 pulgadas, el estándar en la Web era de 800 x 600 píxeles.
• La importancia de la resolución de pantalla sobre la forma de ser visualizadas las páginas Web en la
ventana del navegador es muy importante. A mayor resolución se dispone de más puntos de
información para presentar los elementos en pantalla, pero estos puntos son más pequeños, con lo
que los elementos de la interfaz (textos, imágenes, objetos de formulario, etc.) se ven más pequeños.
• Lo mejor es diseñar la página con tamaños relativos, es decir, indicando las dimensiones de las
tablas, imágenes, etc en forma de porcentaje en lugar de fijar medidas absolutas. De esta manera
se ajustará al ancho de pantalla de manera automática.

4. Koldo Parra de la Horra 4
Recomendaciones
• Facilidad de navegación: Un factor importante es la forma de presentar la información. Hay que tener en cuenta que a medida que la cantidad de páginas de una Web aumenta, es cada vez más difícil para las visitas encontrar lo que necesitan. La mejor forma de ofrecer la información es
organizarla en áreas definidas, permitiendo así que la navegación sea muy intuitiva. Si las visitas necesitan emplear mucho tiempo para encontrar la página buscada, es casi seguro que no se va a regresar posteriormente.
• Cuidado con el “tamaño” de las páginas: Un lector no debe tener que esperar “mucho” tiempo para que la página sea completamente mostrada en pantalla. Hay que optimizar las imágenes y otros contenidos para que pesen lo justo y necesario.
• Prueba tus páginas antes de publicarlas: Para asegurarse de que se puede navegar correctamente con cualquier navegador disponible en el mercado (Internet Explorer, Mozilla, etc.) y con diferentes tipos de resolución de pantalla (600 x 800, 1024 x 768 etc.)

5. Koldo Parra de la Horra 5
Planificación de la Web• Debemos preguntarnos:
– ¿Cuales son los objetivos de la página (sitio Web)?
– ¿Qué secciones tendrá?
– Organización interna de cada página del sitio¿Qué marcos tendrá?(Composición visual).
– ¿Cuantas páginas y cómo estarán enlazadas entre sí?
– ¿Cuantos niveles de anidación (subniveles)?
– ¿Qué estructura de menús crearemos?
– ¿Qué aspecto (diseño) le queremos dar? ¿Colores de fondo y del texto?
– ¿Qué lugares ocuparán las imágenes y el texto?
– ¿Vamos a introducir o no contenidos multimedia?
– ¿Tamaños de letra, colores y contraste?
– ¿Logotipos y Text Arts”?
• Por tanto, son muchas las decisiones que hay que tomar antes de empezar a crear la página.

6. Koldo Parra de la Horra 6
Estructura de Carpetas
• Establecer esta estructura (denominado también mapeado del sitio Web) es esencial para la planificación de una Web.
• Se recomienda meter todos los archivos (objetos asociados) de la Web dentro de una carpeta, y dentro de esta crear diferentes carpetas para:
– Imágenes
– Videos
– Sonido
– Documentos
– Etc…
• Colocaremos las imágenes, videos, etc… dentro de la correspondiente carpeta (pueden crearse subcarpetas dentro de estas), pero una vez se haga referencia a su ubicación desde un
archivo de una de las páginas Web ya no deberemos moverlo, puesto que si lo hacemos, no se mostrará.

7. Koldo Parra de la Horra 7
Estructura de Carpetas (2)
• Es importante fijarse en lo siguiente:
– El archivo “index” es la página Web principal. Más tarde crearemos otras que
deberán llevar otros nombres. Pues bien, conviene que la “página index” esté en
el directorio raíz de la carpeta principal.
– Ahora supongamos que al editar la página “index” con el programa Kompozer, insertamos una imagen que está dentro de la carpeta
“imágenes”. Pues bien, realmente no se inserta, sino que se inserta una referencia a la carpeta donde está almacenada la foto para
que el navegador la busque y la muestre.
– Por ello, una vez hecho esto, no debemos cambiar la ubicación ni de la imagen, ni por supuesto del archivo “index”.

8. Koldo Parra de la Horra 8
Estructura de navegación
• A la hora de crear los enlaces entre las distintas páginas de nuestro
proyecto, debemos definir que tipo de estructura queremos:
Estructura lineal: Se va pasando sucesivamente de una hoja a
la siguiente o de esta a la anterior, de manera similar a un libro.
Esta estructura es adecuada para manuales.
Estructura jerárquica (en árbol): Donde existen varios niveles de
anidación. Desde una página principal se accede a unas
secundarias, las cuales a su vez dan paso a un nivel inferior
,etc…. Da mayor sensación de orden a los contenidos.
Estructura mixta: combina los dos modelos anteriores.
Estructura libre: Es el formato más flexible a la hora de la
navegación pero el más confuso, pues proporciona múltiples
enlaces cruzados. Por ello es especialmente importante en este
caso establecer un esquema o mapa Web previo.

9. Koldo Parra de la Horra 9
Estructura de navegación (2)
• Elegida la estructura de navegación, hay que decidir qué queremos
que se vea y dónde:

10. Koldo Parra de la Horra 10
Composición Visual (1)
• No todas las páginas de un sitio requieren tener la misma composición visual. De hecho, la página de portada (index) suele tener una estructura diferente al resto, pues sirve de presentación.
• Lo que si es habitual es organizar la página por marcos, o mediante tablas, reservando así espacios apara las diferentes secciones dentro de la página. Así se establece un encabezado, un pie
de página, una zona de menús y un cuerpo central para los contenidos. No hace falta ser tan rígidos. La estructura puede ser la que queramos, pero estas son las habituales.
• Se desaconseja el uso de plantillas de marcos. El uso de tablas es mucho más versátil y flexible.

11. Koldo Parra de la Horra 11
Adecuación formal de los Textos
El objetivo fundamental es la LEGIBILIDAD
Tres reglas básicas:
1. Los tipos de letra o “fuentes” deben ser comunes.
2. Los tamaños de las tipografías, espaciados, interlineados, alineaciones de párrafos, etc deben ser adecuados y armónicos.
3. Los contrastes entre colores de textos y colores de fondos deben ser adecuados para facilitar la lectura y no cansar la vista.

12. Koldo Parra de la Horra 12
Adecuación formal de Textos (2)
• Tres reglas básicas:
1. Los tipos de letra o “fuentes” deben ser comunes, es decir, aquellos que son utilizados por el 99% de los usuarios y programas navegadores (Consideradas como fuentes “Web-Safe”).
Tipos de letra habituales en el diseño Web son:
– Times New Roman
– Arial
– Verdana
– Tahoma
Otros tipos de letras utilizados con
frecuencia, pero que no se
recomiendan son:
– Trebuchet
– Century Gothic
– Lucida Grande
– Palatino
– Garamond
– Baskerville
– Univers
– Rockwell
– Gotham

13. Koldo Parra de la Horra 13
Adecuación formal de Textos (3)
Aunque resulte una cuestión de diseño avanzado ha de buscarse que la tipografía
elegida y el “Art Text” del logotipo tengan una cierta relación o armonía estética.
Aquí vemos varios ejemplos de elecciones tipográficas correctas.

14. Koldo Parra de la Horra 14
Correcta elección del tamaño de los textos: Debe establecerse una cierta jerarquía textual. Evidentemente los encabezados y títulos a un mayor
tamaño, y el cuerpo de la página a menor tamaño ( conviene utilizar fuentes entre 8 y 12 puntos para cuerpos de texto) . No obstante, no se
recomienda utilizar demasiados tamaños diferentes dentro de una página, sino 3 o 4 máximo. Las viñetas (bullets) y sangrías (indent) son recursos
útiles para estructurar la información, separar conceptos, subordinar unos a otros, crear dependencias, etc.
Una buena estrategia de trabajo es preparar una paleta de fuentes con una letra serif para el
texto, una letra sans para los títulos y subtítulos, con tamaños mayores, otra para los pies de
foto, resúmenes, citas y notas, de menor tamaño, y tal vez, una letra especial para el título
principal. Es una fórmula que es simple y efectiva, que evita la mezcla de diferentes fuentes de
palo seco juntas o diferentes letras serif juntas, combinaciones que raramente funcionan.
Adecuación formal de Textos (4)

15. Koldo Parra de la Horra 15
La mayoría de los editores Web tienen una serie de tamaños predefinidos.
Lo mejor es ajustarse a ellos. Por ejemplo Frontpage:
Sin embargo Kompozer opta por partir de un tamaño de 12 puntos con la
posibilidad de subir o bajar escalonadamente con los botones de aumentar y
disminuir fuente.
Adecuación formal de Textos (5)

16. Koldo Parra de la Horra 16
Para probar diferentes tamaños y tipos de letras se recomienda esta página:
http://www.fonttester.com/web_safe_fonts.html
Escribimos el texto. Ajustamos el tamaño.
Y vemos el efecto en diferentes tipografías.
Adecuación formal de Textos (6)

17. Koldo Parra de la Horra 17
más existen otros factores que influyen en la legibilidad:
La longitud de la línea o el interlineado. Cuando conseguimos que éstos tres elementos armonicen (tipografía y su tamaño, longitud e interlineado) se producirá una mayor facilidad de lectura, será más natural nuestro recorrido visual sobre el texto .
Aplicación de los efectos de Negrita y Cursiva. Que pueden ser utilizadas para proporcionar variedad al texto y para particularizar en el mismo ciertas palabras. Se desaconseja la utilización del subrayado para evitar confusiones con los enlaces Web.
Espaciado entre caracteres: La legibilidad de un texto va a depender del correcto espaciado entre letras y palabras que lo forman.
Alineación de los textos: El texto puede alinearse de cinco formas distintas: alineado a la izquierda, alineado a la derecha, justificado, centrado o asimétrico.
Los comienzos de párrafo deben ser fácilmente reconocibles, pudiendo usar para este fin las sangrías, los estilos o la separación de párrafos con un retorno (uno, nunca dos).
Adecuación formal de Textos (7)

18. Koldo Parra de la Horra 18
as correctas para resaltar textos:
omo norma general, las letras redondas y minúsculas suelen ser dentro de una familia las más legibles, más que las cursivas, negritas, mayúsculas y estrechas.
as negritas (bold) llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por lo que nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. Deben quedar reservadas para enfatizar algunas palabras, siempre de manera muy restringida, y nunca en frases completas. Si son utilizadas adecuadamente ayudan a ojear rápidamente el texto y facilitan la rápida comprensión de la información.
Adecuación formal de Textos (8)

19. Koldo Parra de la Horra 19
Colores, Textos y Contrastes (9)
s correctas para resaltar textos:
s mayúsculas son mucho más difíciles de leer que las minúsculas, por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto le hacen un recurso muy valioso para captar atención sobre un elemento de información.
a opción interesante para publicidad la constituyen las combinaciones de mayúsculas y minúsculas en una misma palabra. Esta combinación presenta una muy difícil lectura lo que requiere mayor procesamiento y por tanto puede producir un mayor recuerdo, si bien esto última hipótesis no ha sido comprobada empíricamente.
s itálicas o cursivas son muy poco legibles y son poco recomendables, solo deben ser utilizadas con fuentes de tamaño suficientemente grande.

20. Koldo Parra de la Horra 20
Espaciado entre caracteres:
El track o tracking ajusta el
espacio entre caracteres
El kern o kerning se utiliza
para ajustar el espacio entre
entre las letras de una misma
palabra o en algunos pares de
caracteres determinados que
llaman la atención por estar
demasiado juntos o separados
Adecuación formal de Textos (10)
El track o tracking ajusta el
espacio entre caracteres
El track o tracking ajusta el
espacio entre caracteres
El track o tracking ajusta el
espacio entre caracteres
El kern o kerning se utiliza
para ajustar el espacio entre
entre las letras de una misma
palabra o en algunos pares de
caracteres determinados que
llaman la atención por estar
demasiado juntos o separados
El track o tracking ajusta el
espacio entre caracteres
Adecuación formal de Textos (10)
El kern o kerning se utiliza
para ajustar el espacio entre
entre las letras de una misma
palabra o en algunos pares de
caracteres determinados que
llaman la atención por estar
demasiado juntos o separados
El track o tracking ajusta el
espacio entre caracteres
Espaciado entre caracteres:
Adecuación formal de Textos (10)
El kern o kerning se utiliza
para ajustar el espacio entre
entre las letras de una misma
palabra o en algunos pares de
caracteres determinados que
llaman la atención por estar
demasiado juntos o separado
El track o tracking ajusta el
espacio entre caracteres

21. Koldo Parra de la Horra 21
longitud de línea:
o factor decisivo en la facilidad de lectura de un texto y en su poder comunicativo es el ancho de línea.
A una menor longitud de línea, mayor velocidad de lectura, razón por la cual los periódicos tienen columnas muy estrechas. Sin embargo, líneas demasiado cortas dificultan la lectura por el ritmo visual al que obliga con el cambio constante de línea.
Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular (el extremo derecho final de una línea) al siguiente (el inicio izquierdo de la siguiente). A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor dificultad de lectura.
mo regla, podemos tomar para una línea más de 40 caracteres y menos de 70. En líneas muy cortas, es importante la correcta distribución de las unidades de significado, procurando siempre que cada línea ofrezca al lector una entidad significativa propia, lo que hace el texto mucho más fácil de leer y más comprensible.
Adecuación formal de Textos (11)

22. Koldo Parra de la Horra 22
longitud de línea:
o factor decisivo en la facilidad de lectura de un texto y en su poder comunicativo es el ancho de línea.
A una menor longitud de línea, mayor velocidad de lectura, razón por la cual los periódicos tienen columnas muy estrechas. Sin embargo, líneas demasiado cortas dificultan la lectura por el ritmo visual al que obliga con el cambio constante de línea.
Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular (el extremo derecho final de una línea) al siguiente (el inicio izquierdo de la siguiente). A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor dificultad de lectura.
mo regla, podemos tomar para una línea más de 40 caracteres y menos de 70. En líneas muy cortas, es importante la correcta distribución de las unidades de significado, procurando siempre que cada línea ofrezca al lector una entidad significativa propia, lo que hace el texto mucho más fácil de leer y más comprensible.
Adecuación formal de Textos (12)

23. Koldo Parra de la Horra 23
terlineado y separación de párrafos:
erlineado (leading), espacio vertical entre las líneas de texto, es un factor importante para que el lector pueda seguir correctamente la lectura sin equivocarse de línea o cansar la vista, además de ser uno de los responsables de la sensación de color que toma un bloque de texto.
o regla general, conviene darle al interlineado uno o dos puntos más que el valor del cuerpo de la fuente, o sea, que si tenemos un texto en cuerpo 10, un interlineado de 12 da un blanco apropiado en la interlinea. Si se utilizan valores de interlineado menores al cuerpo de texto las líneas pueden comerse unas a otras o volverse difícil leer.
yor espacio entre líneas, mayor facilidad de lectura. Se recomienda un interlineado óptimo de un ancho de línea de 1,5.
Adecuación formal de Textos (13)

24. Koldo Parra de la Horra 24
Correcta alineación de los textos:
El texto puede alinearse de cinco formas distintas: alineado a la izquierda, alineado a la derecha, justificado, centrado o asimétrico.
– El texto alineado a la izquierda es el más natural y recomendable para textos largos. Crea una letra y un espacio entre palabras muy uniforme, y dado que las líneas terminan en diferentes puntos, el lector es capaz de localizar fácilmente cada nueva línea. Esta es posiblemente la forma de alineación de textos que resulta más legible. En cuanto a legibilidad, es mejor el texto alineado a la izquierda que el
justificado.
– Por el contrario, la alineación a la derecha va en contra del lector, porque es difícil encontrar la nueva línea. Este método puede ser adecuado para un texto que no sea muy extenso, pero no para grandes bloques.
Adecuación formal de Textos (14)

25. Koldo Parra de la Horra 25
Correcta alineación de los textos (2):
– El texto justificado, puede ser muy legible si el diseñador asegura que el espacio entre letras y
palabras sea uniforme y los molestos huecos entre palabras, denominados "ríos", no interrumpan el
curso del texto. En caso contrario las palabras con mayor espacio entre caracteres sean
involuntariamente enfatizadas. Resulta adecuado en columnas estrechas o bloques de texto de poca
extensión, ya que resulta monótono y cansa al lector.
– Las alineaciones centradas dan al texto una apariencia muy formal y son adecuadas cuando se usan
con mesura. Pero debe evitarse configurar textos demasiado largos con este modelo.
– Las alineaciones asimétricas se usan cuando el diseñador desea romper el texto en unidades de
pensamiento lógicas, o para dar a la página un aspecto más expresivo. Obviamente la configuración
de grandes cantidades de texto de esta manera acaba por cansar al lector.
Adecuación formal de Textos (15)

26. Koldo Parra de la Horra 26
Uno de los factores más importante de los textos, que influye sobremanera en la
legibilidad de los mismos, es el contraste entre estos y el fondo sobre el que se
sitúan. Un contraste adecuado hace que los textos se lean bien y que su lectura
no canse al lector, condición muy importante en obras de contenido textual
importante. Si el tipo se disminuye en tamaño, debe incrementarse la fuerza de
contraste de color.
Colores y Contraste (1)

27. Koldo Parra de la Horra 27
Estamos acostumbrados a ver tipos negros sobre papel blanco, y tradicionalmente
esta combinación es la más legible. Además muchos tipos se han diseñado para
ser leídos como letras negras sobre fondo blanco y ofrecen así su optima
legibilidad. En el momento en que se añade color al tipo o al fondo, se altera la
legibilidad del texto.
Para alcanzar la óptima legibilidad cuando se diseña con tipos y color se han de
sopesar cuidadosamente las tres propiedades del color (tono, valor e intensidad) y
determinar el contraste apropiado entre las letras y su fondo. Podemos usar
contrastes de tono (cálidos y fríos), contrates de valor (luminosos y oscuros) o
contrastes de saturación (vivos y apagados).
Colores y Contraste (2)

28. Koldo Parra de la Horra 28
Si dos colores análogos están demasiado cerca en el círculo cromático y no
aportan suficiente contrate de tono o valor, deberían reajustarse para agudizar
dicho contraste. Un buen principio es coger colores que no estén directamente
enfrentados ni estén demasiado próximos en el círculo cromático.
Un texto de color amarillo sobre fondo blanco perdería importancia, ya que, no
resaltaría al ser los dos colores claros, sin embargo, si el color de fondo es negro,
el amarillo cobraría fuerza. Según algunos estudios, la letra más legible es la
negra sobre fondo amarillo.
Colores y Contraste (3)

29. Koldo Parra de la Horra 29
Existe una herramienta online que nos facilita la elección de los colores en nuestra página es la
siguiente:
http://www.yafla.com/yaflaColor/ColorRGBHSL.aspx
El secreto para combinar colores se esconde en la posición de éstos en el círculo cromático. Ésta
Web te servirá de ayuda para inspirarte si tienes que elegir y combinar una gama completa de
colores para tu Web.
Colores y Contraste (4)
Yafla Color te permite crear la
gama a partir del color que quieras
como principal, en función de su
posición en el círculo cromático te
da el color complementario, tríada,
análogos, etc… con diferentes
matices y además funciona como
conversor entre los modelos de
color RGB y HSV.

30. Koldo Parra de la Horra 30
Otra herramienta similar la puedes encontrara en:
http://www.colorschemer.com/online.html
Colores y Contraste (5)

31. Koldo Parra de la Horra 31
Ayuda con los colores (1)
 Para averiguar cualquier color en Hexadecimal (códigoPara averiguar cualquier color en Hexadecimal (código
RGB recomiendo esta página:RGB recomiendo esta página:
http://http://www.easycalculation.comwww.easycalculation.com/color-/color-coder.php?hexcolorcoder.php?hexcolor=5B8307&=5B8307&rgbcolorrgbcolor=91,131,7=91,131,7
• Introducimos aquí el
valor en Hexadecimal
• Nos muestra el valor
en decimal de los
canales R, G y B.
• Nos muestra el color.

32. Koldo Parra de la Horra 32
Ayuda con los colores (2)
 También es interesante este PDF que te puedesTambién es interesante este PDF que te puedes
descargar aquí:descargar aquí: tabla básica de colores RGB.pdftabla básica de colores RGB.pdf

33. Koldo Parra de la Horra 33
Encabezado y Pie de página (1)
• El encabezado o “header” suele estar formado por un “banner” con el título de la Web y un logotipo o imagen identificativa.
• El encabezado de cualquier sitio Web es importante por partida doble. En primer lugar, define la estética de todo el sitio. Y en muchos casos, incluye botones que deben ser
funcionales para la navegación.

34. Koldo Parra de la Horra 34
Encabezado y Pie de página (2)
• El pie de página o “Footer” suele reservarse para la información técnica de la Web y la información sobre la propiedad y
derechos de la Web.
• Si la página tiene excesivo contenido y obliga a un “scroll” o desplazamiento vertical, (cosa que debe evitarse), deben
colocarse enlaces de retorno en la parte inferior o bien enlaces para navegación a otras partes de la página sin
necesidad de retornar a la zona superior.

35. Koldo Parra de la Horra 35
Uniformidad de estilo (1)
• Las CSS u Hojas de estilo en cascada (Cascade Style Sheets) son unos archivos que se pueden crear también con algunos editores de páginas Web
(por ejemplo Kompozer), y que definen una serie de estilos para los textos (tipos de letra, colores, tamaños, etc..) y también para los colores de fondo y
otras propiedades de la página. Esto da un aspecto u niforme a todas las páginas Web del sitio Web que estemos diseñando lo que añade elegancia y
seriedad al conjunto.
• Es relativamente sencillo configurar una hoja de estilos, pero también podemos descargar de la Web modelos gratuitos e incorporarlos a nuestro
diseño. De esta manera se nos facilita en gran medida el trabajo de diseño formal de la Web, ya que sólo tendremos que incorporar los contenidos.
También son conocidas como “Templates CSS” o plantillas CSS

36. Koldo Parra de la Horra 36
Uniformidad de estilo (2)
• Hay lugares de descarga gratuita de plantillas CSS. Dos ejemplos:
http://www.freecsstem
plates.org/

37. Koldo Parra de la Horra 37
Uniformidad de estilo (3)
http://www.free-css.com/free-css-
templates/page1.php

38. Koldo Parra de la Horra 38
REGLAS GENERALES
SOBRE DISEÑO DE
PÁGINAS WEB
Fin de la presentación.