# Apuntes 1 DIW

## 1. Elementos del diseño

Diseñar es la capacidad humana de imaginar algo, con una serie de características (color, forma...) para poder crearlo. Requiere una conjunción de términos sociales así como psicológicos y su "eficacia" dependerá de lo bien desarrollado que está enfocado a un nicho de mercado objetivo.

### 1.1. Percepción visual

La percepción es la interpretación de los datos que recogemos por medio de nuestro sistema ocular.
Existe una teoría (psicología de la Gestalt) sobre la percepción que dice que nuestro cerebro decodifica la información que recibe por medio de asociaciones que se producen en cuanto vemos algo. Según dicha teoría, la mente "configura" los elementos que llegan a traves de los canales sensoriales o a través d ela memoria.

### 1.2. Elementos conceptuales: línea, punto, plano y volumen.

* Punto: Unidad mínima en el diseño. Es percibido como una unidad pequeña y redonda. Suele indicar posición, no tiene largo ni ancho ni ocupa una zona del espacio, es el comienzo y final de una línea y a su vez es donde dos líneas se encuentran o cruzan.

* Línea: Es el resultado del movimiento de un punto por una superficie. Es el resultado del desplazamiento de un punto. Tiene largo pero no ancho, tiene posición y dirección. La línea delimita espacios dando lugar a las formas, representa el perfil o el contorno de las cosas. Lo solemos relacionar con el borde.

* Plano: Resultado del movimiento de una línea que se mueve en una dirección. Un plano tien elargo y ancho pero no grososr, tiene posición y dirección. Es la porción de suiperficie limitada por una línea cerrada. Define los límites extremos de un volumen (espacio ocupado por un cuerpo).

* Volumen: Resultado del movimiento de un plano que se desplaza en una dirección distinta a la suya. Tiene una posición en el espacio y está limitado por planos. En un diseño bidimensional el volumen es ilusorio.

### 1.3. Elementos visuales: forma, medida, color y textura.

* Forma: Identificamos lo que percibimos porque lo que vemos posee una forma. Se define como un área que se destaca del espacio que la rodea debido a un límite definido explícita o implícitamente.

* Medida: Todas las formas tienen un volumen o una dimensión. El tamaño de las formas se puede establecer de una forma relativa, por comparaci´çon de unas con otras, pudiendo decir así que una forma es más grande o pequeña que otra, pero en cualquier caso, físicamente medible.

* Color: Pos eso.

* Textura: Característica visual o táctil de todas las superficies. El material con el que se hacen los objetos aporta a su superficie una textura determinada con unas determinadas características de rugosidad, suavidad, aspereza, homogeneidad, etc.

### 1.4. Elementos de relación: dirección, posición, espacio y gravedad.

* Dirección: Depende de su relación con el observador, con el marco que la contiene o con otras formas cercanas con las cuales se compara.

* Posición: La posición de una forma es juzgada por su relación respecto al cuadro que la contiene o la estructura global del diseño.

* Espacio: Las formas ocupan espacio. Así el espacio puede estar ocupado o vacío. Se puede usar la perspectiva para organizar y sugerir el espacio creando la ilusión de profundidad. Se pueden superponer objetos de modo que el observador percibe como más cercano el objeto que está delante de los demás. También podemos lograr profundidad dentro del campo visual usando el contraste y variación en las formas.

* Gravedad: Es una sensación, por ende, es psicológico. Tenemos tendencia a aplicar cualidades tales como pesadez o ligereza, estabilidad o inestabiulidad, tanto a las formas individuales como a los grupo sde formas.

### 1.5. Elementos prácticos, representación, significado y función.

* Representación: Una forma es representativa cuando se deriva de la naturaleza o del mundo hecho por el sel humano. La representación puede ser realista, estilizada o medio abstracta. Una fotografía de un monumento es una representación realista del mismo. Un dibujo de los perfiles de dicho monumento es una representación estilizada del monumento y un dibujo naif del monumento es una representación semi abstracta.

* Significado: Es la imagen conceptual que se representa en nuestra mente cuando el diseño transporta un mensaje visual. Cada receptor del mensaje le dará una interpretación, un significado distinto, según sean sus conocimientos y experiencias previas.

* Función: Cuando un diseño sirve un propósito concreto.

## 2. Interfaces web.

El creciente número de usuarios de Internet y de páginas web refleja la transformación en la forma de trabajar y relacionarse de las personas. Internet no solo proporciona flexibilidad laboral, sino que también redefine las interacciones sociales. La creación de páginas web se realiza con diversos propósitos, desde compartir experiencias personales y opiniones hasta buscar beneficios comerciales. El diseño de estas páginas desempeña un papel crucial en alcanzar los objetivos planteados, ya que influye significativamente en su efectividad.

### 2.1. Interacción persona Ordenador.

Nos comunicamos con el entorno a través de nuestros sentidos, aunque al interactuar con computadoras utilizamos principalmente la vista, el oído y el tacto. La Interacción Persona-Ordenador (IPO) se ocupa del intercambio de información entre las personas y las computadoras. Una comunicación efectiva entre usuario y computadora mejora la eficiencia, reduce errores y aumenta la satisfacción del usuario. La mayoría de los sistemas informáticos son interactivos, y su éxito depende en gran medida de la interfaz persona-ordenador, que debe diseñarse considerando las necesidades de los usuarios, quienes presentan diferentes niveles de preparación y expectativas al interactuar con las computadoras.

### 2.2. Diseño de una interfaz Web. Objetivos.

Al diseñar una interfaz web, es crucial considerar los objetivos del sitio y dirigirse a los usuarios adecuados. La interfaz web, como sistema gráfico, utiliza elementos conocidos para facilitar el acceso a los contenidos. El diseño debe priorizar la rápida y sencilla accesibilidad a los contenidos para mantener la atención de los usuarios, ya que la paciencia es limitada. La estética, aunque subjetiva, influye en la experiencia del usuario. Un diseño cuidadoso y una interfaz agradable contribuyen a retener visitantes. Además, enlaces que no funcionan generan desconfianza y pueden llevar a los usuarios a no regresar.

### 2.3. Características: Usable, visual, educativa y actualizada.

Al diseñar un sitio web, es esencial considerar lo que satisface a los visitantes y los mantiene comprometidos. Se deben tener en cuenta aspectos como las necesidades de diferentes grupos de usuarios, la forma en que las personas sienten y procesan la información. La usabilidad es clave, no solo acceder a la página, sino que la interfaz sea fácil de usar. La visualidad también desempeña un papel crucial, ya que la percepción positiva del usuario contribuye a la popularidad del sitio. La interfaz debe ser coherente visualmente y educativa, facilitando el aprendizaje del usuario. La actualización regular del contenido y la mejora de la interfaz son importantes para mantener la popularidad y la atención de los visitantes.

### 2.4. Componentes de una interfaz web.

Una interfaz web puede estar compuesta por varios elementos, cuya cantidad depende del propósito del sitio. Los elementos destacados incluyen:

1. Elementos de Identificación: Identifican plenamente al sitio web, indicando a quién pertenece. Ejemplos incluyen el título, imágenes de banderas y escudos.

2. Elementos de Navegación: Presentes en todas las pantallas, permiten al usuario moverse entre secciones y volver a la portada. Deben ser intuitivos. Ejemplos incluyen menús y enlaces en la página de inicio.

3. Elementos de Contenidos: Mostrados en diferentes zonas de las páginas web, presentan información relevante. Incluyen la zona de título del contenido y la zona de contenido propiamente dicho.

4. Elementos de Interacción: Aunque no mencionados específicamente, pueden incluir elementos como botones, formularios u otros elementos que permiten la interacción del usuario con la página.

Cada elemento cumple un papel específico en la experiencia del usuario, y su presencia y diseño dependen del tipo de sitio web y sus objetivos específicos.

#### 2.4.1 Zona de navegación.

La usabilidad de una página web se logra a través de un sistema de navegación efectivo que evite que el usuario se pierda. Los elementos esenciales para lograr esto son:

1. Elemento de Regreso a la Portada: Es crucial proporcionar al usuario un medio para volver al inicio sin depender del navegador. Esto se logra comúnmente mediante un enlace en el logotipo de la empresa en la parte superior izquierda de cada página.

2. Menú de Secciones y/o Áreas de Interés: Ubicado generalmente en la parte superior de cada página, debajo del logotipo, este menú detalla las secciones y áreas del sitio web. Debe ser fácilmente localizable, identificado con texto descriptivo o imágenes representativas, y mantener una posición consistente en todas las páginas.

3. Información sobre la Ubicación del Usuario: En sitios web extensos, es esencial que el usuario conozca su ubicación. Esto se logra informando en cada página el camino desde la página principal hasta la actual, mediante una línea de texto debajo del menú de secciones y encima de los contenidos. Esta línea también puede incluir enlaces que permitan retroceder en la navegación.

Estos elementos se ilustran en la imagen proporcionada, utilizando como ejemplo la página del Consejo General del Estado en el sitio web del Ministerio de Educación y Ciencia.

#### 2.4.2 Zona de contenido e interacción.

La esencia de una página web reside en su contenido, el cual debe ser claro, conciso y presentarse en un formato agradable y fácil de leer. En sitios extensos, es preferible dividir el contenido en varias páginas vinculadas para evitar desplazamientos extensos. La interacción del usuario va más allá de simplemente hacer clic en enlaces; incluye acciones como elegir el idioma, realizar búsquedas, dar opiniones o firmar un libro de visitas. Estas acciones forman la "zona de interacción". La imagen proporcionada destaca la zona de contenido, dividida en título y contenido, así como zonas de interacción, como cambiar el idioma y buscar contenido. Elementos de interacción incluyen botones, áreas de texto, botones de opción y casillas de verificación, cada uno con funciones específicas y diseño coherente en todo el sitio web.

### 2.5 Maquetación web.

Al iniciar un proyecto de construcción de una vivienda unifamiliar, se inicia con un boceto que representa la distribución de espacios sin considerar aún las condiciones del terreno ni los materiales. De manera análoga, al comenzar un proyecto web, se debe realizar una maqueta del sitio web, pensando en los elementos de cada página y su disposición en relación con el espacio disponible en la ventana del navegador. Los bocetos preliminares se basan en datos recopilados durante la entrevista con el cliente.

La analogía de un diseño premeditado, añadiendo grandes bloques, se compara con la forma en que se crean los sitios web. Se destaca la importancia de diseñar una distribución de grandes bloques de elementos de información, con la imagen que ilustra una muestra de cómo suelen organizarse estos bloques. Aunque los sitios web no tienen bloques físicos como las pirámides, se enfatiza la necesidad de tiempo y consistencia en el diseño de todas las páginas del sitio, tema que se profundizará en la sección de plantillas de diseño.

#### 2.5.1 Elementos de ordenación

En una página web, los bloques fundamentales cumplen distintas funciones:

1. Encabezado: Situado en la parte superior de la página, contiene elementos identificativos como el logotipo y el nombre de la empresa. Además, puede incluir acciones como cambiar el idioma, realizar búsquedas y elementos de navegación en sitios extensos.

2. Navegación: Este bloque alberga el sistema de navegación, discutido previamente en los apartados sobre componentes de interfaz y zonas de navegación, contenidos e interacción.

3. Contenido: Aquí se presentan los contenidos de la página, siendo la meta principal del usuario al visitar el sitio. Se destaca la importancia de un diseño que permita una lectura cómoda sin la necesidad de desplazamientos horizontales.

4. Pie de página: Ubicado al final de la página y repetido en todas las páginas del sitio, complementa la zona superior del encabezado como una área de navegación adicional. Aunque su diseño es menos elaborado, incluye enlaces recurrentes como el mapa del sitio y nuevos enlaces a información legal.

El diseño del pie de página tiende a ser más simple para que el usuario pueda identificar fácilmente su ubicación en la página, especialmente si necesita realizar desplazamientos verticales.

### 2.6 Mapa de navegación.

En sitios web extensos y complejos, como el del Ministerio de Educación y Ciencia, es recomendable contar con un mapa del sitio para facilitar a los usuarios la búsqueda de información. La página de portada del ejemplo proporciona enlaces al mapa del sitio tanto en el encabezado como en el pie de la página. El mapa del sitio muestra la estructura del sitio, y su enlace se encuentra disponible tanto en la página de portada como en el propio mapa. La necesidad de crear un mapa del sitio está relacionada con la complejidad y extensión del sitio. Si el sitio es simple, con una única página y enlaces externos, no es necesario incluir un enlace al mapa del sitio. Sin embargo, si el sitio tiene una estructura más compleja con secciones y subsecciones, es conveniente crear un mapa del sitio y enlazarlo desde la página principal.

#### 2.6.1 Prototipos.

Los mapas de sitios web pueden tener diversas estructuras según la relación entre las páginas. Se destacan cuatro tipos de estructuras:

1. Lineal: Adecuada para sitios donde la lectura es secuencial, similar a avanzar en un libro, permitiendo retroceder a páginas anteriores.

2. Reticular: Utilizada en sitios donde todas las páginas están interrelacionadas. No es ideal para sitios extensos, ya que los usuarios podrían perderse.

3. Jerárquica: La más común, empleada en sitios con varias secciones bien diferenciadas pero de baja complejidad, evitando la necesidad de navegar entre secciones.

4. Lineal Jerárquica: Común en sitios con secciones que contienen información secuencial o con grados de dificultad, permitiendo la navegación entre secciones.

La representación gráfica de estas estructuras se muestra esquemáticamente en la imagen.

### 2.7 Detección de patrones.

La Psicología de la Gestalt examina cómo el cerebro organiza la información percibida mediante leyes que rigen la percepción sensorial y el pensamiento. Los Patrones de Diseño, soluciones recurrentes a problemas similares, se dividen en Patrones de Diseño de Software (funcionalidad) y Patrones de Diseño de Interacción (usabilidad). En el diseño de interfaces web, la aplicación de principios de la Gestalt, como reglas organizativas, contribuye a desarrollar diseños centrados en la usabilidad, eficiencia y satisfacción del usuario. La imagen muestra un ejemplo de patrón de diseño de la librería de Quince, que explora varios patrones mediante etiquetas o funcionalidades. Los siguientes sub-apartados detallan los principios básicos de la Gestalt y su aplicación en el diseño de interfaces web.

#### 2.7.1 Principios de proximidad y de semejanza

**Principio de Proximidad:**
La mente tiende a agrupar elementos basándose en la distancia entre ellos. En una imagen, se forma una percepción de 3 columnas, 4 filas y 6 bloques. Un ejemplo se observa en la página de la Comunidad de Madrid, donde enlaces con formato similar y proximidad se agrupan visualmente, aunque se encuentren en rectángulos distintos.

La proximidad entre elementos del mismo tipo lleva al usuario a percibirlos como una unidad única, mientras que la distancia suficiente entre bloques indica que pertenecen a categorías diferentes.

**Principio de Semejanza:**
La mente agrupa elementos similares en apariencia visual, como forma, color y tamaño. En una imagen, se perciben 3 filas de elementos amarillos y 3 de marrones, líneas diagonales con elementos de la misma forma, y bloques de rectángulos. Un ejemplo en la página de la Xunta de Galicia muestra elementos similares en forma y tamaño agrupados visualmente mediante rectángulos azules, a pesar de ser enlaces a diversas páginas.

#### 2.7.2 Principios de simetría y continuidad.

**Principio de Simetría:**
La mente tiende a percibir como un único elemento aquellos dispuestos simétricamente. En un dibujo, el símbolo © del Copyright girado se percibe como los pétalos de una flor. En la página de la Tienda Online de Bornay Desserts, una línea vertical de color azul separa dos zonas simétricas, dando la ilusión de un único elemento centrado.

**Principio de Continuidad:**
La mente tiende a percibir elementos como continuos aunque estén interrumpidos. En una imagen de ovejas en un camino, las que avanzan no se ven claramente, pero se perciben debido al principio de continuidad. En la página de la Tienda Online de Bornay Desserts, una línea vertical de color azul separa una imagen central original de la percepción del usuario, destacando la letra B completa y el hueco como elementos unidos, a pesar de estar interrumpidos.

#### 2.7.3 Principios de cierre y de área o tamaño relativo.

**Principio de Cierre:**
La mente tiende a percibir figuras completas o cerradas a partir de contornos, incluso si están incompletos. En la página web de la empresa Enesa Logística, S.L., se utiliza este principio en tres zonas marcadas con un rectángulo grisáceo en la parte derecha de la imagen.

**Principio de Área o Tamaño Relativo:**
La mente tiende a percibir como objeto principal el más pequeño de dos objetos que se superponen, considerando el objeto de mayor tamaño como fondo. En la imagen, el hexágono se percibe como el objeto principal, y el cuadrado azul como el fondo sobre el cual se encuentra el hexágono. Este principio se aplica en las zonas enmarcadas mediante círculos en la parte derecha de la imagen, donde la circunferencia roja representa el fondo y los círculos pequeños son los elementos de interés.

### 2.7.4 Principio de figura-fondo.

Este principio señala que nuestra mente tiende a percibir ciertos elementos como figuras, con forma y borde, destacándolos del resto de los objetos que los envuelven (fondo). En la imagen proporcionada, se destaca el triángulo de color claro como una forma sobre un rectángulo de color azul que sirve de fondo. Este concepto refleja cómo la percepción se centra en la figura, resaltándola del fondo circundante. Un ejemplo práctico se observa en la página de ISAIAH FRAZIER ARTISTIC DESIGNS, donde un corazón se destaca como objeto principal sobre un fondo de rectángulos de colores.

#### 2.7.5 Ley de simplicidad, pregnancia o buena forma.

La Ley de Simplicidad, también conocida como Pregnancia o Buena Forma, engloba los principios previamente mencionados. Esta ley establece que nuestra mente tiende a percibir formas más simples, lo que facilita su recuerdo y reduce ambigüedades en la experiencia perceptiva. Se busca la organización de elementos de manera que se destaque un objeto separándolo claramente del entorno.

En la imagen proporcionada, se ilustra cómo la mente percibe un círculo claro y uno oscuro detrás de rombos, aunque en realidad están detrás de ellos. Esto demuestra la preferencia por formas simples y la capacidad de nuestra mente para simplificar la percepción.

La misma imagen sirve como aplicación práctica de varios principios, como la tonalidad más oscura para el sistema de navegación (principio de semejanza), la agrupación de elementos por proximidad, y la percepción de rectángulos completos a pesar de estar recortados (principio de cierre).

En el diseño de sitios web, es crucial lograr un equilibrio entre los elementos de la interfaz, de manera que esta pase desapercibida para el usuario. La búsqueda de la imperceptibilidad utilizando principios basados en la percepción destaca la importancia de un diseño centrado en el usuario y su rápida familiarización con la interfaz. Se emplean los principios de la Gestalt para lograr una interfaz usable y visualmente efectiva.

### 2.8 El color

Es importante considerar que una misma página web puede percibirse de manera diferente según la plataforma, sistema operativo, navegador y monitor utilizados. Los colores están interrelacionados, y la rueda de color, compuesta por 12 colores, es una herramienta crucial para crear combinaciones cromáticas y realizar diversas clasificaciones:

1. Colores Primarios, Secundarios y Terciarios:

* Tres colores primarios (rojo, amarillo y azul) forman un triángulo equilátero en la rueda.
* Los tres colores secundarios (verde, púrpura y naranja) se encuentran opuestos a los primarios y se obtienen mezclando los colores adyacentes.
* Seis colores terciarios se generan combinando un color primario con su color secundario adyacente.

2. Colores Fríos y Cálidos:

* Colores fríos van desde el amarillo-verdoso hasta el púrpura.
* Colores cálidos van desde el rojo-púrpura hasta el amarillo.

3. Colores Complementarios, Análogos y Monocromáticos:

* Colores complementarios son opuestos en la rueda de color y se utilizan para crear contraste.
* Colores análogos son adyacentes en la rueda y se emplean para lograr armonía cromática.
* Colores monocromáticos abarcan diferentes tonos y matices de un solo color.

El entendimiento de estas clasificaciones y relaciones cromáticas es esencial en el diseño web para garantizar la consistencia y la percepción deseada, considerando las variaciones de visualización en distintas plataformas.

#### 2.8.1 Sistema RGB.

El ojo humano percibe únicamente los colores rojo, verde y azul, y los demás colores se obtienen mediante la combinación de estos tres en diversas proporciones. Este concepto da origen al Modo de Color RGB (Red, Green, Blue), utilizado por los ordenadores para representar colores. En este sistema, 8 bits se asignan a cada color, generando una escala de 256 grados para cada uno.

Con 256 grados por color y considerando las combinaciones posibles, el sistema RGB permite representar 16.777.216 colores. El ordenador utiliza el modelo RGB con notación decimal o hexadecimal para describir cada color. Por ejemplo, el código hexadecimal para una combinación específica de colores se traduce a su equivalente decimal.

En la imagen proporcionada, se muestra una tríada de colores primarios del sistema RGB, centrada en el azul y sus colores complementarios equidistantes. Los códigos hexadecimales y sus equivalentes decimales se presentan para cada combinación de colores, ofreciendo una referencia visual para el diseño de esquemas de colores.

#### 2.8.2 Colores seguros.

Aunque el color rojo siempre se percibirá como rojo, es importante tener en cuenta que algunos usuarios pueden utilizar monitores antiguos o navegadores desactualizados que limitan la visualización a 256 colores. Para abordar esta variabilidad, se emplean los "colores seguros" en el diseño web, asegurando una apariencia consistente en todos los navegadores.

Los colores seguros son combinaciones de los tres colores primarios (rojo, verde y azul) con valores hexadecimales específicos: 00, 33, 66, 99, CC y FF. Estos valores generan seis grados distintos para cada color, resultando en un total de 216 colores (6 x 6 x 6). La elección de colores seguros garantiza una reproducción uniforme del sitio web en diversas plataformas, como se ilustra en la imagen seleccionando colores seguros en los enlaces de la barra superior izquierda.

## 3. Generación de documentos y sitios web.

Al emprender un nuevo proyecto web, es esencial reconocer la importancia tanto del resultado visible para los usuarios como del trabajo previo de diseño y documentación. El proceso de creación de un sitio web, similar a proyectos de software, implica varias fases, cuya complejidad dependerá del alcance del sitio:

1. Análisis: En esta etapa, se recopila la información necesaria para establecer los requisitos del sitio web, su sistema de navegación y funcionalidad. Se eligen herramientas y lenguajes para su implementación, junto con pautas de diseño que abarcan tipografía, colores, iconografía y distribución de elementos.

2. Desarrollo: Utilizando las herramientas y lenguajes seleccionados, se implementa el sitio web siguiendo las pautas establecidas en la fase de análisis.

3. Pruebas y Depuración: Se llevan a cabo pruebas para asegurar el funcionamiento de todos los enlaces y la interacción correcta de los usuarios con las páginas del sitio. En sitios extensos, es crucial verificar la operatividad del diseño desarrollado.

4. Documentación: Realizada en paralelo con las demás fases, implica documentar los requisitos establecidos durante el análisis. También se documenta el código según sea necesario durante la implementación para facilitar el mantenimiento futuro. Una correcta tabulación del código permite realizar modificaciones sin depender de programas especiales y facilita la comprensión por parte de los visitantes. Sin embargo, la documentación más crucial es la de las pautas de diseño recopiladas en una guía de estilo, que sirve al equipo durante la generación y mantenimiento del sitio.

### 3.1 Guías de estilo. Elementos.
Algunos manuales de estilo se centran en el diseño gráfico, abordando aspectos como tipografía, colores y espacios en blanco. Sin embargo, los manuales de estilo específicos para sitios web se enfocan tanto en aspectos técnicos como visuales de la publicación. Esto incluye la prosa, el uso correcto del lenguaje, gramática, puntuación, ortografía y, sobre todo, la estética. La estricta adherencia a estas normativas proporciona uniformidad al aspecto visual de un documento.

La guía de estilo está diseñada para el equipo encargado del diseño y programación de la interfaz web. Debe abordar todos los aspectos relacionados con el diseño de la interfaz del sitio y servir como una herramienta eficaz para la toma de decisiones tanto en el proceso de diseño como en las fases posteriores de mantenimiento del sitio web.

Entre los elementos incluidos en una guía de estilo se encuentran aspectos relacionados con la integración de fotografías, logotipos, imágenes, iconos, colores, tipos de letra y maquetación web. Los enlaces proporcionados muestran ejemplos de guías de estilo de sitios web interesantes, como la Universidad de Alicante, el Gobierno de Navarra y la Universidad Politécnica de Valencia. Estos ejemplos pueden ser explorados para comprender cómo se han desarrollado las guías en cada uno de estos sitios.

#### 3.1.1 Fotos y logos.

El uso adecuado de recursos gráficos en la web puede mejorar la experiencia del usuario y agregar valor al sitio, pero su uso inadecuado puede tener el efecto contrario. Al emplear imágenes en la web, es crucial considerar que son archivos con un tamaño, y para visualizarse correctamente, deben descargarse previamente. Se deben evitar imágenes cuya única finalidad sea decorativa, y en la unidad de trabajo número 5 se abordará este tema con mayor profundidad.

En la planificación de interfaces web, es esencial incluir en la guía de estilo información específica sobre los recursos gráficos. La guía debe proporcionar al equipo de desarrollo de la interfaz detalles como:

* Formato: Tipo de formato en el que deben almacenarse las imágenes o logotipos utilizados.
* Tamaño: Dimensiones de la imagen o logotipo, especificando el ancho y alto en píxeles.
Además, se debe considerar la diversidad de tamaños según la funcionalidad o la ubicación en la página. Por ejemplo, una imagen en la zona de contenidos puede tener diferentes dimensiones que un logotipo en la cabecera de las páginas. Todos los tamaños y formatos pertinentes deben estar detallados de manera exhaustiva en el documento de la guía de estilo.

#### 3.1.2 Tipografías.

Al seleccionar la tipografía adecuada para un sitio web, varios elementos deben ser considerados:

* Fuente: No todas las fuentes ofrecen la misma legibilidad y visualización en todas las plataformas. Arial es una fuente ampliamente utilizada que asegura visibilidad correcta en diferentes tamaños y plataformas.

* Estilo o Tipo de Fuente: La guía de estilo debe especificar cuándo usar negrita, subrayado, cursiva u otras combinaciones. Es importante no confundir al usuario, por ejemplo, utilizando subrayados para propósitos distintos a los enlaces.

* Tamaño de Fuente: La guía de estilo debe reflejar los tamaños recomendados según la ubicación y propósito del texto, considerando que no se utiliza el mismo tamaño para titulares y contenido principal.

* Color de Fuente respecto al Fondo: La guía debe especificar los colores de fuente según la ubicación y función del texto, considerando factores como la legibilidad (texto oscuro sobre fondo claro) y la preferencia por fondos lisos en lugar de texturas o imágenes.

Es fundamental conocer los tipos de fuentes y sus comportamientos en diversos navegadores y sistemas operativos para garantizar una visualización coherente del sitio web.

#### 3.1.3. Colores.

En la guía de estilos, es crucial especificar el color de la fuente y el fondo según su función en el sitio web. Muchos sitios utilizan colores distintivos en los enlaces de navegación y luego aplican estos mismos colores para representar secciones específicas. Por ejemplo, la Junta de Castilla y León utiliza diferentes colores para secciones como Medio Ambiente, Empleo, Administración Pública, Vivienda y Urbanismo.

La guía de estilos debe detallar las combinaciones hexadecimales para:

* Las fuentes en el bloque central de la página principal.
* Los fondos de los títulos de las secciones de la página principal.
* Las fuentes del menú de navegación y del título del contenido en cada página de las secciones.
* Los fondos de las opciones del menú de navegación y de su título en cada página de las secciones.
*
Consejos adicionales:

* Si se usan colores como sistema de codificación, asegurarse de que sea comprensible.
* Mantener la consistencia en el uso de colores para evitar confusiones.
* Evitar el exceso de colores diferentes.
* Utilizar combinaciones de colores que transmitan armonía.
* Aplicar correctamente el contraste para destacar partes relevantes del sitio.
* Considerar la psicología del color en el diseño para lograr impacto emocional.

#### 3.1.4. Iconografía.

Un icono informático es un pequeño gráfico en pantalla que representa y identifica objetos, a menudo con simbolismo gráfico. Desde el punto de vista del diseño web, un icono es una forma de representación, significado y función. Representa algo del mundo real, transmite un mensaje visualmente y atrae la atención del usuario, permitiéndole comprender rápidamente el mensaje sin necesidad de leer el texto asociado.

Los iconos son comúnmente utilizados para complementar los textos de los enlaces en la página de inicio. Es esencial que los iconos sean reconocibles de inmediato, requiriendo la menor cantidad de detalles posible sin perder su significado. La elección de iconos es crucial, ya que deben ser comprensibles a simple vista para ahorrar tiempo al usuario al visualizar la página.

Es recomendable utilizar iconos familiares para el usuario, y en la guía de estilos del sitio web se deben especificar los iconos a emplear, su ubicación y su propósito. Emplear iconos solo por motivos estéticos y que no aportan significado es riesgoso y contraproducente en el diseño de páginas web.

#### 3.1.5.

Este apartado se vincula con la maquetación web y los mapas de navegación previamente abordados. Se destaca la importancia de que la guía de estilos refleje no solo la disposición de bloques en cada página del sitio, sino también el esquema de navegación entre las distintas páginas.

En sitios web extensos, es común que la página principal tenga un diseño diferente al de otras páginas. Sin importar si las páginas son uniformes o agrupadas, la guía de estilo debe detallar todos los posibles diseños, incluyendo aspectos como:

* Tamaño en píxeles del encabezado, ubicación y tamaño de sus elementos.
* Tamaño de la zona de navegación, su ubicación, disposición (horizontal, vertical) y divisiones.
* Organización y tamaño de enlaces dentro de la zona de navegación.
* Tamaño, ubicación y formato de la zona de posicionamiento.
* Tamaño y ubicación de la zona de contenido, incluyendo la colocación del título.
* Cuadros de contenidos secundarios, si los hay, especificando tamaño, posición y visibilidad.
* Tamaño y distribución de elementos en el pie de página.
* Espacios vacíos deliberados, si se desean incorporar.
La guía de estilos debe proporcionar detalles exhaustivos sobre la estructura y navegación, asegurando consistencia y coherencia en todo el sitio web.

### 3.2 Lenguajes de marcas.

Los sitios web están conformados por páginas escritas en lenguajes específicos. Aunque algunas herramientas permiten el diseño sin conocimientos profundos, para dedicarse profesionalmente, es esencial comprender y utilizar los lenguajes de marcas.

* HTML (HyperText Markup Language): Es el lenguaje predominante para crear páginas web. Describa tanto la estructura como el contenido de una página mediante etiquetas, usualmente delimitando el texto entre una etiqueta de apertura y cierre. Algunas etiquetas no tienen cierre. Se distinguen por encerrarse entre corchetes angulares y siguen normas sintácticas específicas.

* XML (eXtensible Markup Language): Es un metalenguaje extensible para intercambiar información estructurada entre plataformas. A diferencia de HTML, es estricto en sus normas de sintaxis, y los errores pueden afectar la interpretación. Desarrollado por el W3C.

* XHTML (eXtensible Hypertext Markup Language): Utiliza las mismas etiquetas y atributos que HTML pero aplica reglas de sintaxis más estrictas, siguiendo los estándares de XML. Combina las ventajas de HTML y XML.

### 3.3. Tablas, capas, marcos.

En la maquetación web, aprendiste a distribuir bloques en una página y exploraste lenguajes para diseñar. Inicialmente, en HTML, la estructuración dependía en gran medida de tablas anidadas, complicando la definición de tamaños y posiciones. Aunque efectivo, era laborioso y requería una organización meticulosa del código.

La evolución trajo los "Frames" o marcos, presentes en versiones posteriores de navegadores. Estos permitían dividir la ventana del navegador en secciones independientes, mostrando páginas HTML distintas en cada una. Comparado con las tablas, los marcos ofrecían ventajas al dejar zonas visibles permanentemente y simplificaban el mantenimiento al separar las funciones en áreas distintas.

### 3.4 Plantillas de diseño.

En el apartado de Maquetación web, exploramos una distribución típica de bloques en una página web, común en sitios menos complejos con una zona de navegación siempre visible y otra de contenidos para presentar enlaces. Aunque existen varias distribuciones, con el tiempo notamos patrones recurrentes. ¿Por qué diseñar algo nuevo si lo que ya funciona está disponible?

Las plantillas de diseño web son sitios prediseñados que sirven como base para un diseño web, permitiendo una adaptación rápida y sencilla a las necesidades del diseñador. Esto ahorra tiempo y dinero. En la imagen se muestra un ejemplo de una página diseñada en menos de 20 minutos a partir de una plantilla proporcionada por webself.net. Hoy en día, hay numerosos sitios comerciales que ofrecen plantillas de diseño web a precios accesibles, a menudo con alojamiento gratuito durante el primer año.

### 3.5 Colores psicológicos.