Planificación de Interfaces Gráficas PDF

La planificación de interfaces gráficas es una tarea fundamental en el diseño de interfaces Web, ya que conlleva un conocimiento previo y una organización y documentación de las tareas a desarrollar, obteniendo un resultado final más consistente y fácil de mantener. ¿En que piensas cuando eliges una lámpara auxiliar para tu salón? Y cuando compras unos zapatos o un abrigo, ¿has pensado alguna vez en el tiempo que han dedicado las empresas que fabricaron estos productos a su diseño? Las personas del mundo civilizado vivimos rodeadas de cosas que han sido fruto del diseño. Desde la silla donde nos sentamos, el microondas donde calentamos la leche o la cafetera que nos proporciona nuestro estimulante café por las mañanas, hasta las suaves sábanas en las que no acurrucamos durante la noche y el colchón que nos garantiza ese sueño reparador. Todas y cada una de las cosas de nuestro entorno han pasado por un proceso de diseño para lograr aquello que se pretendía con su fabricación: funcionalidad, comodidad, atractivo, etcétera. Utilizado habitualmente en el contexto de las artes, ingeniería, arquitectura y otras disciplinas creativas, **diseño** se define como el proceso previo de configuración mental, \"pre-figuración\", en la búsqueda de una solución en cualquier campo. Diseñar requiere principalmente consideraciones funcionales y estéticas. Esto necesita de numerosas fases de investigación, análisis, modelado, ajustes y adaptaciones previas a la producción definitiva del objeto. Además comprende multitud de disciplinas y oficios dependiendo tanto del objeto a diseñar, como del número de personas que participan en el proceso. Diseñar es una tarea compleja, dinámica e intrincada. Es la integración de un conjunto de requisitos técnicos, sociales y económicos, de necesidades biológicas con efectos psicológicos y de materiales, forma, color, volumen y espacio, todo ello pensado e interrelacionado con el entorno. Las personas dedicadas al diseño deben comunicar las ideas y conceptos, de una forma clara y directa, por medio de los elementos gráficos. Por tanto, la eficacia de la comunicación de los mensajes visuales que elaboran estas personas dependerá de la elección que haga de los elementos a emplear y del conocimiento que tenga de ellos. Percibimos todo lo que nos rodea a través de los sentidos. [Percepción](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#tf284bcde-14ff-5b24-37ea-acb7e2eb5d13), es el proceso de recogida y tratamiento de la información sensorial. Consiste en recibir, a través de los sentidos, las imágenes, sonidos, impresiones o sensaciones externas y elaborar e [interpretar](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t5d22c88f-0df8-318e-bc30-e6c586e08852) toda la información recibida. La percepción es una interpretación significativa de las sensaciones.\ La percepción visual es la sensación interior de conocimiento aparente que resulta de un [estímulo](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t92d6dc53-11b2-5374-3ac3-0116f28582d5) o impresión luminosa registrada en nuestros ojos. Existe una teoría (psicología de la [Gestalt](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t74804ff0-02f3-a428-8c31-be45a04eef96)) sobre la percepción que estudia la forma en que nuestro cerebro decodifica la información que recibe a través de diversas asociaciones que se producen en el momento de la percepción. Según esta teoría, la mente configura, a través de ciertas leyes, los elementos que le llegan a través de los canales sensoriales (percepción) o a través de la memoria (pensamiento, inteligencia y resolución de problemas). Toda percepción es un acto de búsqueda de significado y, en este sentido, es un acto de comunicación o de búsqueda de comunicación. Percibir no es recibir pasivamente información visual. Percibir implica buscar, seleccionar, relacionar, organizar, establecer conexiones, recordar, identificar, jerarquizar, evaluar, aprender e interpretar. Principio del formulario Final del formulario Las personas dedicadas al diseño son comunicadores visuales por lo que deben conocer al público, sus necesidades e inquietudes para poder lograr que el mensaje visual llegue de manera correcta a los receptores del mismo. Cuando utilizamos imágenes para construir mensajes audiovisuales, debemos tener presente que con las imágenes sólo podemos comunicar las experiencias comunes. Los elementos conceptuales del diseño son la base del mismo, sobre ellos se asientan los demás elementos que veremos más adelante. Cada uno tiene sus propias características que les permiten desempeñar funciones determinadas dentro de una composición. **PUNTO**. Es el resultado del primer encuentro de la punta de un lápiz, la pluma o pincel, con el papel, la tela u otro material. El [punto](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t6a1de0e4-93d6-0642-6015-f5c785eedff9) es concebido en la imaginación pequeño y redondo. Un punto indica posición. No tiene largo ni ancho ni ocupa una zona del espacio. Es el principio y el fin de una línea y, es donde dos líneas se encuentran o se cruzan. **LÍNEA**. La línea no es visible por sí sola en la naturaleza. Es el resultado del movimiento de un punto que se desplaza por una superficie. La línea tiene largo pero no ancho, tiene posición y dirección. Está limitada por dos puntos siendo la distancia más pequeña entre ambos. La línea delimita espacios dando lugar a las formas, representa el perfil o el [contorno](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t4b1bb8a3-be22-5459-a2bc-ffaefb7b3806) de las cosas. La percepción de la línea en la naturaleza es similar a la [línea geométrica](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t28ba9a7a-c44f-0af7-f31a-2019fa64f0f5) cuando la relacionamos con el borde real de una [superficie](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t90c4f6c1-8a2b-a102-0c49-d7c20284db85). También forma los bordes de un plano. **PLANO**. Es el resultado del movimiento de una línea que se desplaza en una dirección distinta a la suya. Un plano tiene largo y ancho pero no grosor, tiene posición y dirección. Es la porción de superficie limitada por una línea cerrada. Define los límites extremos de un [volumen](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#td2cdef5a-6c12-e1ad-13b5-11e52a8df7d5). **VOLUMEN**. Es el 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](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#tb07789c6-f1ae-60f7-c6e3-fca0c61d06fa). Cuando dibujamos una línea en un papel, empleamos una línea visible para representar una línea conceptual. La línea visible tiene largo y ancho y, su color y textura quedan determinados tanto por los materiales empleados como por la forma de usarlos. Así, cuando los elementos conceptuales se hacen visibles, tienen forma, medida, color y textura. **FORMA**. Identificamos lo que percibimos porque lo que vemos posee una [forma](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t28c4a3b5-d825-9b69-b984-7a2c02733cc1). 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](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t9b0abb3a-41ce-df6c-6fbf-57d17a43f772). El tamaño de las formas se puede establecer de forma relativa, por comparación de unas con otras, pudiendo decir así que una forma es más grande o más pequeña que otra pero, en cualquier caso, es físicamente medible. **COLOR**. Todo lo que existe en la naturaleza tiene color. Las cosas que vemos no sólo se diferencian entre sí por su forma y tamaño, sino también por su colorido. El color y, el contraste de color en particular, se utilizatambién para llamar la atención sobre una parte determinada de la imagen. **TEXTURA**. Es la 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étera. **Autoevaluación** Principio del formulario **¿Son las líneas visibles en la naturaleza?** Verdadero. Falso. Final del formulario **1.4.- Elementos de relación: dirección, posición, espacio, gravedad.** **Reflexiona** Estás en el puerto y ves un barco ¿Cómo sabes si se está acercando o se está alejando? Este grupo de elementos gobierna la ubicación y la interrelación de las formas en un diseño. Algunos, como la dirección y la posición, pueden ser percibidos y otros, como el espacio y la gravedad, pueden ser sentidos. **DIRECCIÓN.** La dirección de una forma 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 a la estructura global del diseño. **ESPACIO.** Las formas por muy pequeñas que sean, ocupan un espacio. Así, el [espacio](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t6557a165-13fe-055c-099b-e9d2a263c7d1) puede estar ocupado o vacío. Se puede utilizar la [perspectiva](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#tfaf09faf-882b-d94e-c786-ef5f6f7486a2) 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 la profundidad dentro del campo visual utilizando el contraste y la variación de tamaño en las formas. **GRAVEDAD**. La sensación de gravedad no es visual, es psicológica. Tenemos tendencia a aplicar cualidades tales como pesadez o ligereza, estabilidad o inestabilidad, tanto a las formas individuales como a los grupos de formas. **1.5.- Elementos prácticos: representación, significado, función.** **Reflexiona** Cuando vas por la calle y ves de pie en la acera o anclado sobre la pared un objeto más o menos circular con un agujero ¿por qué sabes que es una papelera? No hay ningún cartel que lo indique y, sin embargo, lo sabes. Los elementos prácticos del diseño permanecen ocultos en el contenido y en la trascendencia del diseño. **REPRESENTACIÓN**. Una forma es representativa cuando se deriva de la naturaleza o del mundo hecho por el ser humano. La representación puede ser realista, [estilizada](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#teb5b8d41-f66f-83f9-3a33-19146930f212) o medio [abstracta](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#tc164c8d8-ae3f-603f-9d32-5f4fa3870170). 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](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t2734f448-f846-ca67-a0e3-5b5b01695838) del monumento es una representación semiabstracta. **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**. La función se hace presente cuando un diseño debe servir a un determinado propósito.\ La imagen anterior cumple una función muy importante. Colocada en el lugar adecuado como por ejemplo, una sala de revelado de fotografías, o una sala de microfilmación cumple la función de mantener el ambiente oscuro para poder trabajar. **Autoevaluación** **Relaciona los elementos de diseño de la columna de la izquierda con el grupo al que pertenecen de la columna de la derecha, escribiendo el número asociado al grupo en el hueco correspondiente.** Principio del formulario ------------------------ -------------- ------------------- **Elemento de diseño** **Relación** **Grupo** Volumen. 1.- De relación. Textura. Dirección. 2.- Conceptuales. Forma. Significado. 3.- Prácticos. Medida. Posición. 4.- Visuales. Línea. ------------------------ -------------- ------------------- Final del formulario **2.- Interfaces Web.** **Caso práctico** **Ana** tiene experiencia experiencia en diseño gráfico. Sabe la importancia que tiene un buen diseño en la comunicación de mensajes. Por ello quiere aportar todos sus conocimientos sobre diseño gráfico y aplicarlos al diseño de interfaces Web. **Reflexiona** ¿Te has parado a pensar la cantidad de personas que pueden llegar a visitar un sitio Web? ¿Has pensado en lo diferentes que pueden ser esas personas? El número de usuarios de Internet aumenta día a día y, el número de páginas Web también. Internet ha cambiado no sólo la forma de trabajar de algunas personas con una mayor flexibilidad de horarios, también ha cambiado la manera en la que se relacionan algunas personas. [[Pixabay]](https://www.pexels.com/es-es/foto/adentro-arquitectonico-arquitectura-arte-161043/) ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) **Para saber más** En el siguiente enlace podrás conocer la historia de Internet, su tamaño y su tecnología. [[Internet]](http://es.wikipedia.org/wiki/Internet) **Debes conocer** En el siguiente enlace podrás conocer el funcionamiento de la World Wide Web, su historia, estándares y tecnologías. Debes consultar también los enlaces de cada uno de los estándares. [[World Wide Web]](http://es.wikipedia.org/wiki/World_Wide_Web) Creamos páginas web para poder comunicar cosas a través de Internet. Creamos páginas de tipo personal donde publicamos lo que nos sucede, las fotos de nuestros viajes, nuestras opiniones sobre los temas que nos interesan pretendiendo, no sólo entretenernos, sino también mantener informados a nuestros amigos. También creamos páginas con las que pretendemos obtener algún tipo de beneficio comercial. Todas y cada una de estas páginas son diseñadas con alguna finalidad. Lograr nuestro objetivo dependerá en gran medida del diseño que hagamos. **2.1.- Interacción persona-ordenador.** **Reflexiona** Mira a tu alrededor. Estamos rodeados de interfaces. El botón que te permite llamar al ascensor, la llave que abre la puerta de tu casa. El mando del grifo que te proporciona el agua o el vaso que utilizas para beber. Todas esas cosas son interfaces porque son el medio que empleamos para conseguir un objetivo. Nuestro objetivo no es pulsar el botón, es llegar a un piso concreto. Nuestro objetivo calmar nuestra sed, el grifo y el vaso son los medios con los que interactuamos para lograr dicho objetivo. Nos comunicamos con el mundo que nos rodea a través de nuestros sentidos: la vista, el oído, el olfato, el gusto, el tacto, aunque actualmente empleamos únicamente la vista, el oído y el tacto en nuestra comunicación con el ordenador. Empleamos la vista para ver las imágenes o leer los textos que se nos muestran por la pantalla, el oído para escuchar la música o el sonido de los vídeos a través de los altavoces y, empleamos el tacto cuando escribimos un texto con el teclado o cuando seleccionamos un enlace de una página con el ratón. La Interacción Persona-Ordenador es la disciplina relacionada con el diseño, evaluación e implementación de sistemas informáticos interactivos para ser usados por personas, y con el estudio de los fenómenos más importantes que están relacionados. [[Burst]](https://www.pexels.com/es-es/foto/adentro-adulto-beber-bebida-374016/) ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) La IPO (Interacción Persona-Ordenador) es la disciplina que estudia el intercambio de información entre las personas y los ordenadores. Cuando hay una buena comunicación entre el usuario y el ordenador el intercambio de información es más eficiente, se reducen los errores y aumenta la satisfacción del usuario. Hoy en día, la mayor parte de los sistemas informáticos son sistemas interactivos y su éxito o fracaso depende, en gran medida, de la interfaz persona-ordenador. Por este motivo la interfaz tiene que estar diseñada pensando en las necesidades del usuario. Debemos tener en cuenta que cada día aumenta el número de personas que utilizan el ordenador, que estas personas se enfrentan a la interacción con el ordenador con diferentes grados de preparación y con distintas expectativas. **Reflexiona** ¿Por qué es tan importante estudiar la interfaz de usuario? Principio del formulario Final del formulario **Autoevaluación** Principio del formulario **Cuál de los siguientes NO es un estándar Web:** Identificador de Recurso Uniforme (URI). Protocolo de Transferencia de Hipertexto (HTTP) Internet Explorer. Lenguaje de Marcado de Hipertexto (HTML). Final del formulario **2.2.- Diseño de una interfaz Web. Objetivos.** **Reflexiona** ¿Sabes cuántas cosas hay que tener en cuenta a la hora de comenzar a elaborar una interfaz Web? ¿Tienes claro a que tipo de público irá dirigida tu página? ¿Quieres obtener un rendimiento económico con cada visita? ¿Quieres contentar a todo el mundo que te visite o prefieres especializarte en un tema y tener menos seguidores? Cuando comenzamos a diseñar una interfaz Web tenemos que tener en cuenta las respuestas a las preguntas anteriores, ya que dichas repuestas nos darán una idea clara de cuáles son los objetivos de nuestra Web y nos orientarán sobre el enfoque que debemos darle al diseño de nuestra interfaz. Si comienzas un proyecto Web sin pensar en los usuarios a los que va a ir dirigido, es probable que no tengas la acogida que esperabas en un principio. Elaboración propia ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) Una **interfaz Web **es un **sistema gráfico** que permite acceder a los usuarios a los contenidos de la Web mediante el uso de elementos gráficos, los cuales son conocidos por la mayor parte de los usuarios que acceden a nuestra página. El objetivo principal en el diseño de una interfaz Web es que sus potenciales usuarios pueden acceder a todos su contenidos de la forma más rápida y sencilla posible. Para que un diseño Web sea efectivo debemos diseñar una interfaz que cubra todos nuestros objetivos. Este diseño debe lograr que los usuarios de nuestro sitio puedan acceder con facilidad a sus contenidos, puedan interactuar con eficacia con todos sus componentes y, se sientan cómodos haciéndolo. Para conseguir dicho objetivo deberemos tener en cuenta varias cosas: - La paciencia de las personas no es ilimitada. Cuando una persona busca una información y, entra en una página después de haber realizado una búsqueda, no permanecerá mucho tiempo en ella si no encuentra rápidamente lo que busca. - El gusto, considerado como una cuestión de preferencias personales en materia de estética, varía mucho de unas personas a otras, pero no debemos olvidar que, un diseño cuidadoso, una interfaz agradable y, un empleo coherente de los elementos gráficos, nunca nos hará perder visitantes. - Los enlaces que no funcionan o que, sencillamente, no conducen a la información que prometían, provocan en el usuario una sensación de rechazo, con la consiguiente pérdida de confianza en nuestra página, pudiendo llegar, incluso, a la determinación de no visitarla de nuevo. **Autoevaluación** Principio del formulario **Cuando diseñamos la interfaz de un sitio Web es importante innovar e introducir elementos gráficos de generación propia que sorprendan a las personas que acceden al sitio.** Verdadero. Falso. Final del formulario **2.3.- Características: usable, visual, educativa y actualizada.** [[Susan Holt Simpson]](https://unsplash.com/photos/Rd01U0tPmQI) ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) ¿Qué es lo que más te satisface cuando visitas un sitio Web? ¿Qué es lo que logra mantener tu atención e impedir que abandones el sitio? Cuando diseñamos un sitio Web debemos tener en cuenta muchos detalles: - Tenemos que tener en cuenta cómo sienten y cómo perciben los seres humanos. Si nuestro sitio Web ofrece cursillos a personas de la tercera edad será imprescindible que tengamos en cuenta las limitaciones que pueden tener este grupo de personas: problemas de visión y/o de audición. Mientras que si nuestro sitio Web va dirigido al público infantil puede que tengamos que preocuparnos más por la decoración de nuestras páginas y abusar un poco de los colores llamativos. - Tenemos que tener en cuenta cómo son los procesos de nuestra mente: cómo aprendemos, cómo recordamos y cómo procesamos la información. Hay características que son deseables en un sitio Web y otras que son imprescindibles. El determinar cuáles son deseables y cuáles son imprescindibles para lograr nuestro objetivo dependerá en gran medida de los usuarios a los que vaya dirigido nuestro sitio Web. ¿Qué significa que una página sea usable? Usable es un término ampliamente utilizado en el ámbito informático. Es una traducción del término inglés "Useable" y su significado, por [analogía](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#te10f365e-13d2-ab1c-2cf3-ac7d97126362) con el término "utilizable" sería "que se puede usar". ¿Pero qué significa "que se puede usar"? Podríamos pensar que un sitio Web es usable sólo por el hecho de haber accedido a él y haber visitado alguno de sus enlaces. Nada más lejos de la verdad. Una página es usable si al usuario le resulta fácil el uso de su interfaz. **Reflexiona** ¿Por qué es importante que nuestra página sea usable? Principio del formulario Final del formulario ¿Qué significa que una página sea visual? La popularidad de un sitio Web depende en gran parte del aspecto visual del mismo. Podemos decir que un sitio Web es visual cuando las percepciones del usuario, sus opiniones acerca del sitio y, sus sentimientos y actitudes generados mientras lo usa, son positivos. Un sitio Web debe ser atractivo para mantener la atención del usuario, pero también debe ser coherente en el uso de los elementos gráficos. Por ejemplo, si diseñamos una Web relacionada con el tema de la madera y empleamos los colores tostados no sería muy coherente visualmente utilizar el color fucsia en un formulario de pedidos de árboles. Un sitio Web tiene la característica de ser visual cuando los elementos gráficos empleados están orientados a conseguir los objetivos del sitio y no se han empleado como elemento decorativo. Tenemos que tener en cuenta además, que las personas desarrollan modelos como resultado de sus experiencias y, emplean estos modelos para almacenar información y conocimiento. Una interfaz es educativa cuando es fácil de aprender por el usuario. La facilidad de aprendizaje es una medida de la cantidad de tiempo que necesita el usuario para conocer la interfaz a través de su uso y, también es una medida de la cantidad de tiempo que el usuario retiene ese conocimiento sin necesidad de usar la interfaz. Si no queremos perder popularidad entre nuestros visitantes habituales, es conveniente ofrecer periódicamente nuevos contenidos que le puedan interesar. Es importante actualizar periódicamente nuestro sitio Web. Podemos actualizarlo diariamente, semanalmente, mensualmente, etcétera. Depende del tipo de Web y de los servicios que ofrezca. Pero también es importante actualizar la interfaz modificando aquellos elementos que pueden lograr que sea aún más usable, visual y educativa. **2.4.- Componentes de una interfaz Web.** **Citas para pensar** *El todo es mayor que la suma de sus partes.* ***Aristóteles*** Ya llevas un tiempo manejando la interfaz del curso pero todavía no sabes cuáles son los elementos que la componen. Al finalizar este apartado, deberás identificar cuáles son los componentes de una interfaz y cuál es su funcionalidad.\ \ Como dijimos al principio de esta unidad de trabajo, diseñar requiere principalmente consideraciones funcionales y estéticas. Se necesitan numerosas fases de investigación, análisis, modelado, ajustes y adaptaciones previas a la producción definitiva de cualquier objeto. Además, comprende multitud de disciplinas y oficios dependiendo del objeto a diseñar y del número de participantes en el diseño. Elaboración propia ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) Dado que la interfaz Web es el medio de comunicación entre los usuarios que acceden a un sitio Web y todas las páginas que forman parte del sitio, deberemos tener en cuenta los elementos que compondrán nuestra interfaz. Todos estos elementos deberán permitir al usuario identificar la función que desempeñan de forma que pueda acceder a todos los contenidos sin necesidad de realizar complicados razonamientos. Son muchos los elementos de los que puede estar compuesta una interfaz Web. El número de elementos empleados dependerá del objetivo del sitio. Así, un portal de noticias, o un portal de un organismo público seguramente utilizará un mayor número de elementos que una página Web de un restaurante o una página personal. Los más destacados son: - Elementos de Identificación. - Elementos de Navegación. - Elementos de Contenidos. - Elementos de Interacción. En la imagen puedes ver la portada del sitio Web del Ministerio de Educación y Ciencia. Esta portada cumple con las características de ser usable, visual, educativa y actualizada. **Autoevaluación** **Relaciona los Elementos de la columna de la izquierda con la Categoría de componentes de Interfaz a la que pertenecen situados en la columna de la derecha, escribiendo el número asociado a la Categoría en el hueco correspondiente.** Principio del formulario ------------------------------------ -------------- ------------------------------------------ **Elemento** **Relación** **Categoría de componentes de Interfaz** Título de la Barra de Título. 1.- Contenidos. Párrafo de texto. 2.- Identificación. Formulario de visitas a la página. 3.- Navegación. Enlace a otra página. 4.- Interacción. ------------------------------------ -------------- ------------------------------------------ Final del formulario **2.4.1.- Zona de navegación.** **Citas para pensar** *El tiempo perdido nunca se vuelve a encontrar.* ***Benjamín Franklin*** [[Pixabay]](https://www.pexels.com/es-es/foto/conflicto-direcciones-guia-indicaciones-434446/) ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) Ya hemos dicho que los elementos de navegación son los que nos permiten acceder a todos los contenidos que se encuentran en las diferentes páginas de un sitio Web. Pero, lo que no hemos dicho, es que si queremos que nuestra página sea usable, el usuario debe conseguir navegar por la página sin perderse y sin tener la sensación de perderse. Para conseguirlo, el sistema de navegación debería constar de una serie de elementos: - Elemento de regreso a la portada. - Menú de secciones y/o áreas de interés. - Información sobre la ubicación del usuario dentro del sitio Web. Es importante para el usuario tener algún elemento que le permita volver al principio sin necesidad de utilizar la herramienta "ir hacia atrás o regresar" del navegador. Este problema suele resolverse empleando un enlace en el logotipo de la empresa que se sitúa normalmente en parte superior izquierda de cada una de las páginas que componen el sitio Web. El menú de secciones y/o áreas de interés es una zona de la interfaz en la que se detallan las secciones y/o áreas en las que está dividida la información contenida en el sitio Web. Debe ser fácilmente localizable. Se suele ubicar en la parte superior de cada página, debajo del logotipo. Es importante que estas secciones y áreas estén bien identificadas mediante un texto descriptivo y/o una imagen representativa. También es importante que mantenga la misma posición en todas las páginas del sitio. No debemos olvidar que, cuando el sitio Web es de gran tamaño, con muchas secciones y subsecciones, es de gran importancia que el usuario sepa en todo momento el lugar donde se encuentra dentro del sitio. Por ello debemos informar, en cada una de las páginas, el camino recorrido desde la página principal o portada hasta la página actual y, lo haremos empleando una línea de texto por debajo del menú de secciones y por encima de los contenidos. Incluso podemos aprovechar esta línea para permitir, mediante el empleo de enlaces, vueltas hacia atrás en el camino de navegación. En la imagen siguiente están señaladas cada uno de los elementos mencionados. Se ha empleado como ejemplo la página que habla del Consejo General del Estado en el antiguo sitio Web del Ministerio de Educación y Ciencia. Elaboración propia ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) **Recomendación** Es conveniente que visites el enlace a la página mencionada en el párrafo anterior. Así podrás volver primero a la portada y desde allí intentar llegar al mismo sitio utilizando el enlace a la sección "Ministerio" y, desde allí, seleccionando el área de interés "Órganos" y, dentro de ésta, "Consejo General del Estado". [[Consejo Escolar del Estado -- Ministerio de Educación y Formación Profesional]](http://www.educacionyfp.gob.es/educacion/mc/cee/portada.html) **2.4.2.- Zona de contenido e interación.** **Citas para pensar** *Con leña prometida no se calienta la casa.* ***Proverbio japonés*** Con este proverbio queremos hacer hincapié en que es muy importante para nosotros que el usuario no se sienta defraudado. De nada sirve que nuestro sitio Web tenga una portada espectacular, llena de enlaces que prometen ser interesantes, y, cuando el usuario llega a su destino, se encuentra con unos contenidos pobres que sólo le causan decepción.\ \ El contenido es la parte esencial de una página Web. Es importante que los contenidos estén expresados en un lenguaje claro y conciso y, presentados en un formato agradable y de fácil lectura. Además, si el sitio Web está formado por muchas páginas, el contenido debe situarse siempre en la misma ubicación. También es importante evitar que el usuario tenga que hacer grandes desplazamientos durante la lectura de los contenidos. Siempre es mejor dividir el contenido en más de una página y enlazar unas con otras. Un buen ejemplo es el curso que haces en esta plataforma. A estas alturas habrás podido comprobar que prácticamente no usas la barra de desplazamiento vertical. Cuando el usuario navega por un sitio Web eligiendo los enlaces que quiere visitar está interactuando con la interfaz del sitio. Pero cuando hablamos de zonas de interacción no nos referimos a estos enlaces que tanto abundan en un sitio Web, sino que nos referimos a otras zonas en las que el usuario participa de alguna manera. Cuando el usuario elige el idioma en el que desea ver el sitio, cuando realiza una búsqueda de información rellenando un formulario de búsqueda, cuando manda una opinión o cuando firma un libro de visitas introduciendo sus datos, todos los elementos del sitio necesarios para realizar este tipo de operaciones forman parte de la zona de interacción. En la imagen aparece dentro de un rectángulo rojo la zona de contenido que a su vez se divide en dos zonas enmarcadas con elipses: el **Título del contenido** y el **Contenido** propiamente dicho. También se han marcado con elipses las zonas de interacción presentes en esta página: la zona que permite cambiar el idioma del sitio y la que permite buscar contenido dentro del sitio. Elaboración propia ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) Los elementos que permiten la interacción son muy variados y cada uno de ellos cumple una función concreta: - **Botón.** Elemento que permite al usuario realizar una acción. Se suele utilizar para su representación un rectángulo con efecto de relieve y con un texto escrito que sirve para orientar al usuario sobre la acción que se realizará al presionarlo. Su diseño debe mantenerse en todo el sitio Web. - **Áreas de texto.** Son rectángulos en los que el usuario puede escribir. Deben ir acompañadas de una etiqueta que describa el tipo de información que se le pide al usuario. - **Botones de opción.** Son elementos excluyentes entre sí que están agrupados bajo una misma descripción. Constan de una circunferencia acompañada de un texto descriptivo. Se identifica el que está seleccionado porque contiene un círculo negro. - **Casillas de verificación.** Al contrario de lo que sucede con los botones de opción, las casillas de verificación no son excluyentes entre sí. El usuario puede no seleccionar ninguna, o bien, seleccionar una, algunas o todas las casillas. Suelen ir agrupadas bajo una misma descripción y acompañadas cada una de ellas por un texto descriptivo. Tienen forma de cuadrado que cuando se selecciona queda marcado con una uve "V" o con una doble aspa "X". **Autoevaluación** Principio del formulario **¿Qué elementos de interacción de los mencionados puedes ver en la imagen anterior?** Casilla de verificación. Botón. Área de texto. Botones de opción. Final del formulario **2.5.- Maquetación Web.** Cuando se comienza un nuevo proyecto de construcción de una vivienda unifamiliar y una vez se ha entrevistado a las personas solicitantes del proyecto y se ha averiguado cuáles son sus necesidades, se realiza un boceto de lo que será la vivienda. En este momento, la persona encargada de la realización del proyecto no se ha preocupado todavía de las condiciones del terreno, ni se ha preocupado de los materiales a emplear. Sólo realiza un dibujo donde representa el reparto de espacios: cocina, baño, salón, terraza, etcétera. Cuando comenzamos un proyecto Web debemos pensar en el sitio Web como una obra arquitectónica y por lo tanto, debemos realizar una maqueta del sitio Web. Según la RAE (Real Academia Española), una maqueta es un boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas. También define un boceto como esquema o proyecto en que se bosqueja cualquier obra. A la hora de realizar la maquetación Web, deberemos pensar previamente: - Cuáles son los elementos que va a contener cada una de nuestras páginas. - Cómo irán colocados cada uno de esos elementos dentro de las páginas teniendo en cuenta siempre el espacio disponible, es decir, la ventana del navegador. Si hemos hablado con el cliente, tendremos los datos suficientes para realizar una serie de bocetos preliminares de lo que será nuestro sitio Web. **Citas para pensar** *Los libros no se hacen como los niños, si no como las pirámides, con un diseño premeditado, y añadiendo grandes bloques, uno sobre otro, a fuerza de riñones, tiempo y sudor.* ***Gustave Flaubert, escritor francés*** Aún faltaban casi cien años para el surgimiento de Internet y la creación de páginas web, pero la frase de este escritor se adapta perfectamente a la forma en la que se realizan los sitios web: un diseño premeditado, y añadiendo grandes bloques. Aunque en el caso de los sitios web no son literalmente uno sobre otro como en las pirámides, ni tampoco son necesarios el sudor o la fuerza de riñones. Únicamente se necesita tiempo. Para diseñar un sitio web, debemos comenzar por hacer una distribución de los grandes bloques de elementos de información. Una muestra de como suelen estar distribuidos estos grandes bloques se muestra en la imagen, aunque no todos los sitios web colocan estos bloques de la misma manera. Todo dependerá de la complejidad del sitio. Lo que sí es importante tener en cuenta, es que se debe ser consistente en el diseño de todas las páginas del sitio. Todas ellas deben mantener una misma estructura. Este tema lo volveremos a tocar en el último apartado de la unidad que habla sobre las plantillas de diseño. **2.5.1.- Elementos de ordenación.** Cuando diseñamos un sitio Web debemos ser consistentes en la distribución de los grandes bloques en todas las páginas del sitio y debemos tener en cuenta el espacio disponible en la ventana del navegador. Ya hemos visto las funciones que cumplen algunos de estos grandes bloques en apartados anteriores cuando hablamos de los componentes de una interfaz web y las zonas de navegación, contenidos e interacción. El bloque de **Encabezado** está situado siempre en la parte superior de cualquier página. Suele contener además de los elementos identificativos del sitio Web: el logotipo, el nombre de la empresa, elementos de acción que permiten cambiar el idioma de lectura, realizar búsquedas, e incluso, si el sitio es muy grande, puede contener elementos de navegación que permanecen a la vista en todas las páginas del sitio. El bloque de Encabezado se repite en todas las páginas de un sitio Web y debe permanecer visible en todas ellas siempre que sea posible y la complejidad del sitio nos lo permita. El bloque de **Navegación** es donde se coloca el sistema de navegación del que ya hemos hablado en el apartado **Zonas de navegación, contenido, interacción**. El bloque de **Contenido** es aquel en el que se muestran los contenidos. Los contenidos representan la meta del usuario y la razón por la que visita nuestro sitio Web por lo que debemos prestar mucha atención al diseño de este bloque. Debemos reservar una zona lo suficientemente grande para que el usuario pueda leer los contenidos cómodamente, sin necesidad de realizar grandes desplazamientos. Es importantísimo evitar que el usuario tenga que realizar desplazamientos horizontales para leer el final de cada línea. El bloque de **Pie** de página está situado al final de la página y, al igual que el encabezado, se repite en todas las páginas del sitio. Normalmente se emplea el pie como zona de navegación complementaria a la zona superior situada en el encabezado. En ellas se repiten algunos enlaces que se suelen colocar en el encabezado como el enlace al Mapa del sitio (que veremos en el próximo apartado) o, el enlace a la información de contacto y, además, se colocan algunos enlaces nuevos como los enlaces a la información relativa a los derechos de autor, privacidad e información legal. El diseño del pie no suele estar tan elaborado como el del encabezado, ya que su importancia es menor. El usuario tiene que ser consciente de que lo que está viendo es el pie. Esto es de gran importancia en aquellos casos en los que, por ser el tamaño vertical de la página mayor que la ventana del navegador, el usuario se ve obligado a desplazarse verticalmente, pudiendo perder de vista el encabezado. Con un diseño más sencillo del pie respecto al resto de los bloques conseguimos esa percepción por parte del usuario. **Autoevaluación** Principio del formulario **¿Qué elementos suelen colocarse en un encabezado?** Título de contenido. Enlace a un Aviso legal. Logotipo. Elementos de interacción que permiten un cambio del idioma de lectura. Final del formulario **2.6.- Mapa de navegación.** **Reflexiona** Imagina que vas a ir de viaje por primera vez a los Pirineos. Es un lugar precioso, lleno de rutas de montaña para hacer. ¿Qué crees que deberías hacer al llegar? Principio del formulario Final del formulario Cuando un sitio Web es muy grande y complejo, como el antiguo sitio del Ministerio de Educación y Ciencia, es conveniente tener un mapa del sitio que ayude a los usuarios a encontrar lo que buscan. En nuestro ejemplo, la página de portada permite consultar el Mapa del sitio tanto en el encabezado como en el pie de la página. Una vez pulsado el enlace del Mapa del sitio verás la imagen mostrada. Las elipses sombreadas muestran la ubicación de los enlaces al Mapa del sitio tanto en la página de portada como en la propia página del mapa. También se ha sombreado el título Mapa Web que es lo que identifica el lugar en el que se encuentra el usuario. Ministerio de Educación y Ciencia (Todos los derechos reservados) El mapa del sitio proporciona a los visitantes un lugar donde buscar de forma sencilla los contenidos que le interesan si es que no los ha encontrado ya en la página principal. La obligación de crear un mapa del sitio es directamente proporcional a la complejidad y extensión de nuestro sitio. Así, si nuestro sitio consta de una única página donde sólo hay enlaces a páginas ajenas al sitio, no tendremos que poner un enlace al Mapa del sitio. Si por el contrario, nuestro sitio consta de una página principal de portada con enlaces a secciones, que a su vez están divididas en subsecciones, sí sería conveniente crear el Mapa del sitio y poner un enlace a él en la portada. En los siguientes enlaces, puedes ver los mapas de navegación de los sitios Web de algunas de las Comunidades Autónomas y del sitio Web del Ministerio de Educación y Ciencia mostrado en la imagen. [[Mapa de navegación del sitio Web de la Comunidad Autónoma de Madrid]](http://www.madrid.org/cs/Satellite?c=Page&cid=1267496299042&language=es&pagename=ComunidadMadrid%2FEstructura) [[Mapa de navegación del sitio Web de la Comunidad Autónoma de Galicia]](http://www.xunta.es/mapa-do-portal) [[Mapa de navegación del sitio Web de la Comunidad Autónoma de Euskadi]](http://www.euskadi.net/r33-2288/es/contenidos/informacion/mapa_web_euskadi/es_6313/sitio_web_euskadi.html) [[Mapa de navegación del sitio Web de la Comunidad Autónoma de Cataluña]](http://www.gencat.cat/web/cas/mapa.htm) [[Mapa de navegación del sitio Web del Ministerio de Educación y Formación Profesional]](https://www.educacionyfp.gob.es/comunes/mapa-web.html) Es interesante que busques por tu cuenta el mapa de navegación de otros sitios Web. Puedes empezar por el de alguna Comunidad Autónoma que no esté entre las anteriores o en tus sitios favoritos. **2.6.1.- Prototipos.** Ahora que ya conoces algunos mapas de navegación, vamos a ver cuáles son las estructuras más habituales. El mapa de un sitio Web va a tener una estructura que dependerá de la relación que tengan las páginas del sitio entre sí. Esta relación puede ser de diferentes tipos: - Lineal. - Reticular. - Jerárquica. - Lineal jerárquica. En la imagen puedes ver de forma esquemática la representación gráfica de las estructuras de mapas de sitios mencionadas en el párrafo anterior. La **estructura lineal** es adecuada en aquellos sitios compuestos por páginas donde la lectura de las mismas es secuencial. Su estructura es similar a la de un libro donde avanzas de página en página, pero puedes volver a la página anterior y desde ésta a la anterior para releer algún párrafo. La **estructura reticular** se emplea en aquellos sitios en los que todas sus páginas están relacionadas entre sí. No resulta adecuado cuando el sitio está compuesto por muchas páginas porque el usuario puede llegar a perderse. La **estructura jerárquica** es la más común. Se emplea en aquellos sitios donde existen varias secciones bien diferenciadas pero de poca complejidad de modo que el usuario no tiene porque navegar de una sección a otra. La **estructura lineal jerárquica** es también de las más empleadas cuando cada una de las secciones tiene un volumen de información más elevado y conlleva una lectura secuencial del contenido de la sección. También se emplea este método en aquellos sitios en los que sus secciones representan grados de dificultad de la información presentada y se permite la navegación entre secciones. **Autoevaluación** Principio del formulario **¿Cuál de las siguientes afirmaciones es correcta?** Si un sitio Web está formado por más de veinte páginas ya no puede tener una estructura lineal. La estructura reticular la podemos emplear en una sitio Web personal donde desde cualquiera de las páginas accedemos al resto de las páginas del sitio. La estructura jerárquica permite la lectura secuencial de las páginas de la misma sección. La estructura lineal jerárquica es la más empleada en los sitios Web de menor tamaño y con poco volumen de información. Final del formulario **2.7.- Detección de patrones.** **Reflexiona** Anteriormente hemos hablado de la percepción visual y enunciamos brevemente lo que se conoce como Psicología de la Gestalt. También te invitamos en ese momento a conocer cuáles eran sus principios fundamentales. ¿Recuerdas los que estudiaba la psicología de la Gestalt? Principio del formulario Final del formulario Estos principios se pueden aplicar al diseño de Interfaces para ayudar así al usuario a comprender de forma más rápida su funcionamiento. Un Patrón de Diseño es una solución a un problema concreto que se puede usar repetidamente en problemas similares haciendo pequeñas variaciones. Podemos distinguir dos tipos de patrones: - Patrones de Diseño de Software, orientados a la funcionalidad. - Patrones de Diseño de Interacción, orientados a la usabilidad. La finalidad de las personas que diseñan de interfaces Web debe ser la de desarrollar unos diseños centrados en la usabilidad, la eficiencia, la eficacia y la satisfacción del usuario. Para lograrlo, puede apoyarse en los principios de la Gestalt como principios de organización de elementos dentro de la interfaz y aplicarlos en la creación de los patrones de Diseño. En los subapartados siguientes veremos 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.**\ Nuestra mente tiende a agrupar los elementos en función de la distancia que hay entre ellos. En la imagen nuestra mente agrupa los elementos formando 3 columnas, 4 filas y 6 bloques. Un ejemplo de la aplicación de este principio lo puedes ver en la imagen de una de las páginas del antiguo sitio de la Comunidad de Madrid. En esta imagen se han agrupado, dentro de dos rectángulos azules, aquellos elementos que, siendo todos enlaces a otras páginas del sitio y, presentando el mismo formato, se perciben como bloques distintos por estar sus elementos más próximos entre sí. Comunidad de Madrid (Todos los derechos reservados) La cercanía de los elementos del mismo tipo es percibida por el usuario como si fueran una única unidad. Y, la distancia que hay entre los dos bloques, es suficiente para que el usuario los perciba como elementos que pertenecen a diferentes categorías de información. **Reflexiona** Agrupamos todo lo que nos rodea por sus características similares. A las personas las agrupamos por su raza, religión, sexo, altura, color del pelo, clase social. También realizamos agrupamientos en el resto de los seres vivos: arbustos, vegetales, mamíferos, anfibios, etcétera y, en nuestras alacenas, tendemos a agrupar objetos según su funcionalidad: artículos de droguería, alimentación, jardinería, utensilios de cocina. **Principio de semejanza.** Nuestra mente tiende a agrupar aquellos elementos que son similares en su aspecto visual: forma, color, tamaño, etcétera Nuestra mente no percibe los 36 elementos de la parte izquierda de la imagen. Percibe 3 filas de elementos amarillos y 3 filas de elementos marrones. En la parte central de la imagen vemos las líneas en diagonal formadas por elementos con la misma forma. En la parte de la derecha de la imagen distinguimos 3 bloques de rectángulos, el bloque superior horizontal y dos bloques paralelos dispuestos verticalmente. Un ejemplo de la aplicación de este principio lo puedes ver en la imagen de una de las páginas del antiguo sitio de la Xunta de Galicia. En esta imagen se han agrupado dentro de unos rectángulos azules aquellos elementos que, siendo todos enlaces a diferentes páginas del sitio, son similares entre sí tanto en forma como en tamaño. Xunta de Galicia (Todos los derechos reservados) **2.7.2.- Principios de simetría y de continuidad.** **Principio de simetría.** Nuestra mente tiende a percibir como un único elemento aquellos que están dispuestos simétricamente. En el dibujo no vemos el símbolo © del Copyright que está colocado cuatro veces pero girándolo de modo que la letra C de cada uno de los símbolos está mirando al centro. Lo que vemos son los pétalos de una flor. Un ejemplo de la aplicación de este principio lo puedes ver en la imagen de la página de la Tienda On-line de Bornay Desserts. En esta imagen se han separado mediante una línea vertical de color azul las dos zonas simétricas. En la zona de la izquierda el texto está alineado por su derecha, mientras que en la zona de la derecha, el texto está alineado por su izquierda. Desde lejos parece un único elemento centrado en la imagen. Bornay Desserts (Todos los derechos reservados) **Reflexiona** Seguimos viendo el camino que hicimos en la arena aunque la ola haya difuminado una parte. **Principio de continuidad.**\ Nuestra mente tiende a percibir los elementos continuos aunque estén interrumpidos entre sí. En la imagen vemos a la izquierda un grupo de ovejas que avanzan por un camino. Las ovejas que van delante no se ven claramente pero nosotros las percibimos igualmente por efecto del principio de continuidad. En la parte derecha de la imagen no vemos la forma de aleta de delfín de color azul que se ha repetido ocho veces. Por efecto del principio de continuidad lo que vemos es una forma con ondulaciones sobre las que está escrito el texto "abcd". Un ejemplo de la aplicación de este principio lo puedes ver en la imagen de la parte central de la página de la Tienda On-line de Bornay Desserts. En esta figura se han separado mediante una línea vertical de color azul la imagen central original con su hueco central, de la imagen de lo que el usuario percibe destacando con color azul la letra B completa y con color granate el hueco de la línea central. El usuario percibe estos elementos unidos aunque estén interrumpidos. Bornay Desserts (Todos los derechos reservados) **Autoevaluación** Principio del formulario **El principio de proximidad es el que se aplica para distinguir el encabezado y el pie de una página web?** Verdadero. Falso. Final del formulario **2.7.3.- Principios de cierre y de área o tamaño relativo.** **Principio de cierre.**\ Nuestra mente tiende a percibir figuras completas o cerradas a partir de contornos, incluso aunque éstos estén incompletos. Un ejemplo de la aplicación de este principio lo puedes ver en las tres zonas enmarcadas con un rectángulo grisáceo en la parte derecha de la imagen. La parte izquierda se corresponde con el aspecto original de la página web de la empresa Enesa Logística S.L. Enesa Logística (Todos los derechos reservados) **Principio de área o tamaño relativo.**\ Nuestra mente tiende a percibir como objeto el más pequeño de dos objetos que se superponen, percibiendo el objeto de mayor tamaño como fondo. La hexágono se percibe como el objeto principal de la imagen y el cuadrado azul se percibe como el fondo sobre el cual se encuentra el hexágono. Un ejemplo de la aplicación de este principio lo puedes ver en las zonas enmarcadas mediante círculos en la parte derecha de la imagen. La circunferencia roja representa el fondo y los círculos pequeños son los elementos de interés. La parte izquierda de la imagen se corresponde con el aspecto original de la página web de la empresa Golfitness style Donde se pueden ver las imágenes que están debajo de los círculo y que se corresponden con la zona de navegación de la página. Golfitness (Todos los derechos reservados) **2.7.4.- Principio de figura-fondo.** **Principio de figura-fondo.**\ 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 distinguimos el triángulo de color claro como una forma sobre un rectángulo de color azul que está de fondo, debido a que asimilamos mejor la forma triangular que la poligonal. Si esto no fuera así, estaríamos viendo un triangulo a la izquierda y una forma poligonal a la derecha. Un ejemplo de la aplicación de principios es la imagen de la página de ISAIAH FRAZIER ARTISTIC DESIGNS. En ella podemos ver el corazón como objeto principal situado sobre un fondo de rectángulos de colores. Isaiah Frazier Artistic Designs (Todos los derechos reservados) **Autoevaluación** Principio del formulario **¿Cuáles de estos principios crees que son aplicables en la zona de navegación?** Principio de proximidad. Principio de semejanza. Principio de área o tamaño relativo. Principio de figura-fondo. Final del formulario **2.7.5.- Ley de simplicidad, pregnancia o buena forma.** **Reflexiona** Vas a comprarte una casa. Te la enseñan. ¿La ves realmente como es o te la imaginas después de tus reformas? Todos los principios vistos con anterioridad quedan recogidos en la Ley de la buena forma. **Ley de simplicidad, [pregnancia](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/index.html#t1bf4ee07-515e-7f61-e502-c0a8a30d79e3) o buena forma.**\ Nuestra mente tiende a percibir las formas más simples, facilitando así su recuerdo. Es un principio de organización de los elementos que componen una experiencia perceptiva, por el cual se reducen las ambigüedades o efectos distorsionadores, permitiéndonos centrarnos en un objeto separándolo del entorno con facilidad. En la imagen de la izquierda nuestra mente percibe un círculo de color claro y otro círculo de color oscuro aunque estén colocados detrás de los rombos. No percibe las figuras que podemos observar en la imagen de la derecha, las cuales se han separado a propósito para evitar la percepción inevitable de la forma. La misma imagen que proponíamos como ejemplo del principio figura-fondo nos vale como aplicación práctica de otros principios. Distinguimos en la fila superior los elementos que forman parte del sistema de navegación por la tonalidad más oscura de los colores (principio de semejanza). También hay agrupación de elementos en distintos rectángulos con fondo blanco (principio de proximidad). Y, vemos rectángulos completos, aún cuando no lo están por estar recortados con la silueta del corazón blanco del centro (principio de cierre). Isaiah Frazier Artistic Designs (Todos los derechos reservados) En los sitios Web es fundamental conseguir el equilibrio de los elementos que conforman la interfaz, hasta tal punto, que ésta logre pasar desapercibida para el usuario. Esta paradoja de buscar lo imperceptible usando principios fundados en la percepción, nos lleva a comprender la importancia de hacer un diseño centrado en el usuario y no en nuestros gustos personales. Es necesario que el usuario se familiarice lo más rápido que sea posible con nuestra interfaz. Nos apoyamos en los principios de la Gestalt en un intento de lograr nuestro objetivo. Diseñar una interfaz usable y además visual. **Autoevaluación** Principio del formulario **¿Qué objetivos conseguimos aplicando la psicología de la Gestalt en el diseño de patrones?** Mejorar la eficiencia. Disminuir la usabilidad. Incrementar la eficacia. Aumentar la satisfacción del usuario. Final del formulario **2.8.- El color.** **Reflexiona** El color es un aspecto esencial en el diseño Web. Una elección inadecuada de los colores puede ser motivo de la pérdida de visitantes de un sitio Web. ¿Qué deberías tener en cuenta a la hora de elegir un color? Ten en cuenta que una misma página se puede ver de distinta forma según la plataforma, sistema operativo, navegador y monitor empleados. Los colores están relacionados entre sí. La rueda de color formada por 12 colores es una herramienta gráfica importante para crear combinaciones cromáticas y que nos permite hacer distintas clasificaciones de los colores: - **Colores primarios, secundarios y terciarios.** - Hay tres colores primarios: rojo, amarillo y azul, que están dispuestos en la rueda formando un triángulo equilátero. - En el lado de la rueda opuesto a cada uno de los colores primarios se sitúan los tres colores secundarios: verde, púrpura y naranja. Cada uno de los colores secundarios se consigue con la mezcla de sus dos colores primarios adyacentes. El verde viene de la mezcla del amarillo y el azul, el púrpura viene de la mezcla del azul y el rojo y, el naranja viene de la mezcla del rojo y el amarillo. Los tres colores secundarios forman también un triángulo equilátero. - Por último, están los seis colores terciarios que son los que se consiguen con la mezcla del color primario y del color secundario adyacentes al mismo. Así, tenemos el azul-verdoso, el amarillo-verdoso, el amarillo-anaranjado, el rojo-anaranjado, el rojo-púrpura y el azul-púrpura. - **Colores fríos y colores cálidos.** - Son colores fríos todos los colores situados en la rueda de color entre el amarillo-verdoso y el púrpura. - Son colores cálidos, todos los colores situados en la rueda de color entre el rojo-púrpura y el amarillo. - **Colores complementarios, análogos y monocromáticos.** - Los colores complementarios son los colores que están en lados opuestos de la rueda de color. Se utilizan para crear contraste. - Los colores análogos son los colores que se encuentran juntos en la rueda de color. Se suelen usar para crear la armonía del color. - Los colores monocrómáticos son todos los tonos y matices de un mismo color. **Recomendación** En los siguientes enlaces puedes ver una página Web donde podrás ir comprobando la información que te daremos sobre los colores. Además te serán de gran ayuda cuando diseñes los colores de tu sitio Web. [[Esquemas de colores de diseño en inglés]](http://colorschemedesigner.com/) [[Esquemas de colores de diseño en español]](http://colorschemedesigner.com/previous/colorscheme2/index-es.html) **2.8.1.- Sistema RGB.** Hemos visto hasta ahora un poco sobre la teoría del color, pero ¿sabías que el ojo humano percibe sólo los colores rojo, verde y azul? **Para saber más** En este enlace puedes ver más información sobre cómo percibe nuestro cerebro los colores. [[Percepción del color]](http://es.wikipedia.org/wiki/Percepci%C3%B3n_del_color) **Debes conocer** En este enlace podrás informarte sobre el daltonismo. El daltonismo es un problema que tienen algunas personas a la hora de percibir los colores y conocerlo te será de ayuda a la hora de tomar decisiones en cuanto a la elección de los mismos. [[Daltonismo]](http://es.wikipedia.org/wiki/Daltonismo) El ojo humano percibe los colores: rojo, verde y azul y, el resto de los colores se consiguen con la adición de estos tres colores en diferentes proporciones. El blanco se consigue con la mezcla de los tres colores puros y se considera el negro como la ausencia de color. A estos colores se les llama **colores aditivos** y el ordenador se basa en este sistema para la representación de los colores dando lugar a lo que conocemos como **Modo de color RGB. **RGB es el acrónimo de los nombres de los colores rojo, verde y azul en inglés: Red, Green, Blue. Los ordenadores emplean estos tres colores para representar cualquier color de la escala cromática. Pero ¿cómo lo hace? El ordenador utiliza 8 bits de información para representar cada color. La escala monocromática de un color viene dada por todas las posibles combinaciones de estos 8 bits, en total 256. Si tenemos en cuenta que tenemos una escala de 0 a 255 para representar cada color, es decir, 256 grados de cada color y, que el resto de los colores se consiguen mezclando estos tres ¿cuántos colores tenemos en total? Para saberlo tenemos que calcular todas las combinaciones que existen multiplicando tres veces el número de grados de cada color: 256 x 256 x 256, lo que nos da 16.777.216 colores. A la hora de representar cada color utilizamos este modelo RGB y lo podemos hacer empleando tanto el sistema de numeración decimal como el sistema de numeración hexadecimal. Color Scheme Designer (Todos los derechos reservados) En la imagen puedes ver las diferentes informaciones suministradas por la página web sobre esquemas de colores de diseño cuyo enlace tienes disponible en la página anterior de este mismo apartado. Se ha elegido en el sistema RGB una tríada compuesta por un color primario: el azul y los equidistantes a su color complementario. En la parte inferior de la imagen puedes ver los códigos hexadecimales correspondientes a cada combinación de color y, en la parte de la derecha de la imagen, sobre un fondo blanco, puedes ver la equivalencia en decimal de estos códigos hexadecimales. **Autoevaluación** Principio del formulario **El daltonismo se refiere a un fallo de la percepción de los colores, no distinguiendo el verde y el rojo.** Verdadero. Falso. Final del formulario **2.8.2.- Colores Seguros.** **Reflexiona** Recuerda que una misma página se puede ver de distinta forma según la plataforma, sistema operativo, navegador y monitor empleados. ¿Acaso los colores no son siempre los mismos? El color rojo siempre es y será rojo. Pero, ¿es posible que quede algún usuario con un monitor muy antiguo o con una versión del navegador muy anticuada? Sí, es posible y debemos tenerlo en cuenta. Hay monitores que sólo permiten visualizar 256 colores. Hay navegadores que poseen una paleta de sólo 216 colores conocidos en el ámbito del diseño web como **colores seguros**. Emplear estos colores seguros es una forma de garantizar que nuestro sitio Web se verá del mismo modo en todos los navegadores. Los colores seguros son los que se forman con las combinaciones de los tres colores rojo, verde y azul pero sólo con los valores hexadecimales: 00, 33, 66, 99, CC y FF. Son seis grados distintos de cada color y por eso hay 216 colores en total ya que 216 es el resultado de multiplicar 6 x 6 x 6. Color Scheme Designer (Todos los derechos reservados) La imagen se corresponde a la misma elección que vimos en la imagen de la página anterior de este mismo apartado, pero seleccionando esta vez los colores seguros de la Web en los enlaces de la barra superior izquierda. Puedes comprobar que todos los códigos hexadecimales se corresponden con los mencionados en el párrafo anterior. **Para saber más** En el siguiente enlaces, puedes ver una imagen relacionada con la psicología del color. En ella podrás observar la escala de colores desde el rojo al marrón y unos consejos sobre cuándo se debe emplear cada uno de los colores. Está en inglés pero son palabras sueltas de fácil traducción y frases muy cortas. Además están acompañas de imágenes bastantes descriptivas. [[Imagen sobre Psicología del color]](http://www.testking.com/techking/wp-content/uploads/2011/01/IG-PoC-1000px.jpg) **3.- Generación de documentos y sitios Web.** **Caso práctico** **María** tiene mucha experiencia manteniendo páginas web. Ha sufrido mantenido páginas que no habían sido convenientemente planificadas y sabe que una buena planificación apoyada en una correcta documentación va a facilitar enormemente su labor. [[pxfuel]](https://www.pxfuel.com/en/free-photo-xpail) ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) Cuando nos enfrentamos a nuevo proyecto Web debemos tener muy claro que es tan importante el resultado final, visible para el usuario, como todo el trabajo previo de diseño y toda la documentación que habrá que realizar durante el proceso Como en cualquier proyecto de software, el proceso de generación de un sitio Web pasa por unas fases. Estas fases, que pueden ser más o menos complejas dependiendo de la envergadura del sitio, son: - **Análisis.** En esta fase, después de recabar la información necesaria, establecemos los requisitos que deberá cumplir el sitio Web, su sistema de navegación y su funcionalidad, y se eligen las herramientas necesarias y los lenguajes con los que será implementado el sitio Web. También establecemos unas pautas que todo los miembros del equipo de diseño deberán tener en cuenta durante la generación del sitio y durante su mantenimiento. Estas pautas incluyen: tipografía, colores, iconografía, distribución de los elementos, etcétera. - **Desarrollo.** En esta fase, se emplean las herramientas y lenguajes seleccionados en la fase anterior y se implementa el sitio Web atendiendo a las pautas establecidas en la fase anterior. - **Pruebas y Depuración.** En esta fase, que se debe ir realizando de forma paralela a la fase de desarrollo, se comprueba que todos los enlaces funcionan y que los usuarios pueden interactuar correctamente con todas las páginas del sitio. Es importante, sobre todo en sitios de gran tamaño, ir probando que el diseño ya desarrollado es operativo. - **Documentación.** Esta fase se realiza de forma paralela a las demás. Hay que documentar los requisitos establecidos en la fase de análisis. También hay que documentar el código lo que sea necesario durante la fase de implementación para facilitar el mantenimiento posterior. Si además creamos un código correctamente tabulado, no sólo podremos realizar modificaciones sin depender de programas especiales de edición de sitios Web sino que, además, nuestros visitantes podrán aprender mirando el código. Pero lo más importante en el diseño de sitios Web es, quizás, la documentación de las pautas a seguir durante la generación del sitio Web. Estas pautas, recogidas en una guía de estilo, servirán al equipo de diseño durante la generación y el mantenimiento del sitio. **Autoevaluación** Principio del formulario **Las guías de estilo se elaboran durante la fase de Análisis.** Verdadero. Falso. Final del formulario **3.1.- Guías de estilo. Elementos.** **Reflexiona** ¿No crees que el mundo sería un poco caótico si las personas no nos rigiéramos por un conjunto de normas que determinan nuestra conducta? Cuando vamos a un restaurante de lujo, ¿no debemos respetar unas normas de etiqueta? ¿Por qué el diseño Web habría de ser diferente? Según la Wikipedia, un manual de estilo es un conjunto de normas para el diseño y la redacción de documentos, ya sea para el uso general, o para una publicación u organización específica. Los manuales de estilo son frecuentes en el uso general y especializado, en medios escritos, orales y gráficos. También dice que el manual de estilo se compone tanto de normas lingüísticas, como de estilo, para que el mensaje sea más coherente, eficaz y correcto. [[DAMS Library]](https://www.flickr.com/photos/dingridsystem/7758652098/sizes/l/) ([[CC BY]](https://creativecommons.org/licenses/by/4.0/deed.es_ES)) Algunos manuales de estilo se centran en el diseño gráfico, y abarcan tópicos tales como la tipografía, los colores y espacios en blanco. Los manuales de estilo de sitios Web se centran en los aspectos técnicos y visuales de la publicación, la prosa, uso correcto del lenguaje, la gramática, la puntuación, la ortografía pero, sobre todo, la estética. La estricta aplicación de los reglamentos del manual de estilo proporciona uniformidad al aspecto visual de un documento. La guía de estilo está dirigida las personas encargadas del diseño y programación de la interfaz Web. Esta guía debe recoger todos los aspectos relacionados con el diseño de la interfaz propia del sitio y, servir de ayuda eficaz en la toma de decisiones, tanto en el proceso de diseño como en la fase posterior de mantenimiento de un sitio Web. Una guía de estilo incluye aspectos relacionados en la inclusión en la interfaz de fotografías, logos, imágenes, iconos, los colores, los tipos de letra y, aquellos relacionados con la maquetación Web vista anteriormente. Una guía de estilo se hace imprescindible cuando el sitio Web es desarrollado por un grupo de personas. **Recomendación** En los siguientes enlaces, puedes ver la página web correspondiente a la guía de estilos de algunos sitios Web interesantes. Puedes visitar estos enlaces después de ver cada uno de los apartados para ver como lo han desarrollado en cada una de estas guías. [[Guía de estilo para construir páginas web de la Universidad de Alicante]](https://si.ua.es/es/guia-estilo/) [[Guía de estilo para construir páginas web del Gobierno de Navarra.]](https://gobiernoabierto.navarra.es/es/gobernanza/planes-y-programas-accion-gobierno/manual-estilo-tipografias-formatos) [[Guía de estilo para construir páginas web de la Universidad Politécnica de Valencia.]](http://www.upv.es/entidades/ASIC/manuales/guia_estilos_upv.pdf) (1,23 MB) **3.1.1.- Fotos y logos.** Los recursos gráficos se emplean mucho en la Web. Si se utilizan adecuadamente, pueden mejorar el aprendizaje del usuario y añadir valor a nuestro sitio. Ahora bien, si se utilizan inadecuadamente, producen el efecto contrario. A la hora de emplear imágenes en la Web, debemos tener en cuenta que las imágenes son archivos que tienen un tamaño y que para poder visualizarse correctamente deben descargarse previamente. Por esta razón, sólo usaremos aquellas imágenes que complementen nuestro sitio Web y trataremos de evitar aquellas cuya única finalidad sea adornar nuestro sitio. Sobre las imágenes hablaremos en la unidad de trabajo número 5 con más profundidad. En la imagen ilustrativa de este apartado puedes ver en su parte izquierda las fotos que ya has visto en los apartados anteriores y, en la parte derecha de la imagen puedes ver diferentes logotipos que se pueden ver en la página web del Instituto de Tecnologías Educativas. Lo que nos importa ahora es la información que se debe reflejar en una guía de estilo respecto a los recursos gráficos de este tipo. Una guía debe indicar al equipo de desarrollo de la interfaz los siguientes puntos: - **Formato.** El tipo de formato en el que deberán estar almacenadas la imágenes o logotipos empleados. - **Tamaño. **El tamaño de la imagen o logotipo que se establece dando las medidas de ancho y alto en píxeles. Hay que tener en cuenta además, que se deben incluir todos los tamaños posibles que pueden tener las imágenes o logotipos según su funcionalidad o el lugar de la página donde irán situados, ya que no es lo mismo una imagen que vaya en la zona de contenidos que una imagen que se utilice en la cabecera de las páginas del sitio como distintivo de la organización, ni tampoco es lo mismo si la imagen se emplea en el sistema de navegación o en el pie de la página. Todos los tamaños y formatos a emplear en las imágenes y logos del sitio deben quedar perfectamente descritos en el documento de la guía de estilo. **Autoevaluación** Principio del formulario **Una guía de estilos es un documento que recoge las combinaciones más adecuadas de colores y que están ampliamente aceptadas por toda la comunidad de diseñadores de interfaces web.** Verdadero. Falso. Final del formulario **3.1.2.- Tipografías.** **Reflexiona** ¿Te has parado a pensar en por qué los libros están impresos con letra negra sobre papel blanco? ¿Leerías un libro con letra de color rosa sobre un fondo rojo? El uso de una fuente familiar al usuario aumenta la facilidad de lectura. A la hora de elegir la tipografía más adecuada hay que tener en cuenta varias cosas: - La fuente. - El estilo o tipo de la fuente. - El tamaño de la fuente. - El color de la fuente respecto al fondo. **La fuente.** No todas las fuentes se leen con la misma facilidad y no todas las fuentes se ven igual en todas las plataformas. La fuente **ARIAL** es una fuente muy extendida que asegura una correcta visibilidad en todos los tamaños y, en todas las plataformas y navegadores. The Monotype Corporation (Todos los derechos reservados) **El estilo o tipo de la fuente.** En la guía de estilo hay que especificar en que casos debemos usar la negrita, el subrayado, la cursiva o alguna de las posibles combinaciones. Hay que tener en cuenta que: - El subrayado se emplea normalmente en los enlaces pudiendo dar una falsa impresión al usuario si se emplean con otra finalidad. - Se debe usar la negrita sólo para conseguir fijar la atención del usuario sobre un elemento, destacándolo sobre el resto. - No se deben utilizar diferentes características de la fuente para mostrar el énfasis de más de una o dos palabras o una frase corta. **Tamaño de la fuente.** La guía de estilo debe reflejar los tamaños a emplear según la ubicación del texto y su finalidad. No se emplea el mismo tamaño en un texto empleado como titular de un contenido que el del propio contenido. Así mismo, se pueden establecer diferentes tamaños según la importancia del titular. **El color de la fuente respecto al fondo.** La guía de estilo debe especificar el color de la fuente en función de la ubicación del texto y su finalidad. A la hora de elegir un color para el texto hay que tener en cuenta que: - Se lee mejor un texto en color oscuro sobre un fondo de color claro que al revés. - Se lee mejor un texto sobre un fondo liso que un texto sobre un fondo con una textura o con una imagen. Conocer los tipos de fuentes y sus comportamientos en los distintos navegadores y sistemas operativos es de gran importancia para garantizar una visualización consistente de nuestro sitio Web. **Autoevaluación** Principio del formulario **Un texto en color crema o blanco amarillento se lee correctamente sobre un fondo marrón oscuro.** Verdadero. Falso. Final del formulario **3.1.3.- Colores.** En una guía de estilo deben figurar los colores a emplear en el sitio Web en todos los textos, fondos, e imágenes según sea su ubicación y finalidad. La información debe suministrarse aportando los valores para el modelo RGB tanto en hexadecimal como en decimal. Ya vimos en el apartado Tipografía que la guía de estilos debe reflejar el color de la fuente y el color del fondo sobre el que va escrita según sea su funcionalidad. En muchos sitios Web, se utilizan colores distintos en los enlaces del sistema de navegación de su página principal. Estos mismos colores se emplean después para representar las diferentes secciones del sitio. Por ejemplo, el sitio de la Junta de Castilla y León, que puedes ver en la imagen tiene en su parte central una zona de navegación que enlaza con las secciones más visitadas: - Medio Ambiente: tiene la fuente de color verde oscuro sobre un fondo de color verde claro. - Empleo: tiene la fuente de color blanco sobre un fondo de color oscuro. - Administración Pública: tiene la fuente de color blanco sobre un fondo de color púrpura. - Vivienda y Urbanismo: tiene la fuente de color blanco sobre un fondo de color rojo. Cada una de las secciones mencionadas emplea los mismos colores o alguno de su misma escala en su zona de navegación y en el título del contenido propio de la sección. En este caso, la guía de estilos debería reflejar, entre otras, las combinaciones hexadecimales para el color de: - Las fuentes en el bloque central de la página principal (la que está en el centro de la imagen). - Los fondos de los títulos de las secciones de la página principal (mencionadas en el párrafo anterior). - Las fuentes del menú de navegación y del título del contenido en cada una de las páginas de las secciones (las cuatro que están alrededor de la principal). - Los fondos de las opciones del menú de navegación y de su título en cada una de las páginas de las secciones. Por último, una serie de consejos que te pueden ser útiles: - Si vas a emplear los colores como sistema de codificación, es decir, para que el usuario haga una distinción de la finalidad de los elementos según su color, asegúrate de que sea fácil de comprender. Un ejemplo de esto es la imagen de la rueda de color, donde se han empleado iniciales de color azul, verde y marrón según la clasificación a la que pertenecía cada color. Para asegurar la comprensión de estas iniciales se incluyó en la imagen la descripción de cada clasificación utilizando los mismos colores. - Ser consistentes en el uso de los colores. Usar un color siempre para lo mismo. - No excederse en el uso de colores distintos. - Utilizar combinaciones de colores que transmitan armonía. - Utilizar correctamente el contraste de colores para destacar las partes relevantes del sitio. - Ten en cuenta la psicología del color. **3.1.4.- Iconografía.** **Reflexiona** ¿Recuerdas cuáles eran los elementos prácticos del diseño de los que hablamos en el apartado 1.5? Principio del formulario Final del formulario La iconografía es la aplicación práctica de los elementos prácticos del diseño. Según la Real Academia Española, un icono es un signo que mantiene una relación de semejanza con el objeto representado. La Wikipedia dice que, desde el punto informático, un icono es un **pequeño gráfico** en pantalla que identifica y representa a algún objeto, usualmente con algún simbolismo gráfico, para establecer una asociación. Un icono es una aplicación del elemento **Representación** porque es una forma representativa de algo del mundo real; es una aplicación del elemento **Significado** porque el mensaje transmitido por el icono genera en nuestra mente una imagen conceptual y, es una aplicación del elemento **Función** porque logra atraer la atención del usuario que percibe de forma más rápida el mensaje que se intenta transmitir y, de esta forma no tiene necesidad de leer el texto al que acompañan. Los iconos se suelen emplear para complementar los textos de los enlaces en la página de portada. Un icono debe contener la **menor cantidad de detalle** posible sin perder significado. La elección de los iconos es muy importante, puesto que si un usuario no es capaz de determinar su significado a simple vista, entonces no habremos conseguido nuestro propósito de ahorrarle tiempo en la visualización de la página. WebIconSet (Todos los derechos reservados) Es importante hacer uso de iconos a los que el usuario está ya acostumbrado. En la imagen puedes ver iconos agrupados según su ámbito de aplicación. En el grupo más grande los iconos están relacionados con el comercio: tarjetas de crédito, monedas, billetes, carro de la compra. Estos iconos u otros con un diseño parecido son de uso común en todos los sitios de venta on-line. En la guía de estilos se especificarán los iconos a emplear en el sitio web, dónde se van a emplear y con que finalidad. Resulta muy arriesgado emplear iconos por el mero hecho de adornar nuestras páginas pero que no aportan ningún significado por sí solos. En el siguiente enlace encontrarás una página de donde podrás descargar iconos bastante elaborados algunos de los cuales son gratuitos. [[Página Web Icon Set]](http://www.webiconset.com/payment-icon-set/) **Autoevaluación** Principio del formulario **¿En cuál de los cuatro lugares crees que es más importante el uso de iconos?** Encabezado. Pie. Navegación. Contenido. Final del formulario **3.1.5.- Estructura.** Este apartado está relacionado con los apartados **Maquetación web** y **Mapas de navegación** que ya has visto. En el apartado **Maquetación web** hablábamos de la disposición de los bloques de elementos dentro del espacio de la ventana del navegador y veíamos un ejemplo de una distribución de dichos elementos muy empleada en los diseños de interfaces Web. En el apartado **Mapas de navegación** hablábamos de la relación existente entre las páginas a través de sus enlaces. En una guía de estilos debe quedar reflejada no sólo la disposición de estos bloques en cada una de las páginas del sitio, sino también el esquema de navegación que va a existir entre las diferentes páginas del sitio. Es muy común en los sitios Web de gran tamaño que la página de portada o principal tenga un diseño diferente al de las demás, pero, tanto si todas las páginas son iguales como si tenemos grupos diferentes de páginas iguales entre sí, nuestra guía de estilo deberá reflejar todos los diseños posibles indicando en todos los casos: - El tamaño en píxeles que ocupará el encabezado y dentro de él lo que ocupará y dónde se ubicará cada uno de sus elementos. - El tamaño en píxeles o en porcentaje de la zona de navegación y su ubicación, así como si estará dispuesta horizontal o verticalmente, o si estará dividida en secciones distintas y, en su caso, la ubicación de cada una de ellas. - Cómo se dispondrán los enlaces dentro de cada zona de navegación y su tamaño. - El tamaño, el lugar y el formato de la zona de posicionamiento dentro de la página. - El tamaño de la zona del contenido y su ubicación. Dónde se colocará el título y lo que ocupará dentro de la zona de contenido. - Si hay cuadros de contenidos secundarios, cuál va a ser su tamaño y posición y cuál será su funcionamiento. Si estarán siempre visibles o se mostrarán al pasar el ratón por alguna zona concreta. - El tamaño y la distribución de los elementos del pie. - También se deberán reflejar los huecos que se quieran dejar a propósito. - Cómo se van a mostrar los submenús de navegación, si los hubiera. **Citas para pensar** *Hay que saber no decir lo que no conviene.* ***Cicerón*** Esta cita se ha escogido por su relación con la tendencia de algunas personas profesionales del diseño de inflar las páginas de contenidos, tan juntos, que provoca tal confusión en el usuario que ya no sabe a donde mirar. Estas personas no se han dado cuenta todavía de la importancia de los espacios. **Reflexiona** ¿Por qué crees que es importante en el diseño de página web reflejar los huecos? Principio del formulario Final del formulario **3.2.- Aplicaciones para desarrollo Web.** **Recomendación** En el siguiente enlace, puedes ver el artículo de lawebera.com donde hablan de las herramientas básicas para hacer una página web. [[Herramientas básicas para hacer páginas web]](http://www.lawebera.es/de0/herramientas.php) [[kreatikar]](https://www.needpix.com/photo/1662006/editor-graphic-photoshop-design-app-application-program-window-graphics) ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) Dada la infinidad de herramientas disponibles haremos primero una agrupación de las mismas y daremos el nombre de algunas que no figuran en el artículo del enlace y que pueden ser interesantes. Si te vas a dedicar profesionalmente al diseño de aplicaciones Web y dentro de esta profesión te especializas en el diseño de interfaces Web necesitarás conocer al menos algunas de estas herramientas: +-----------------------+-----------------------+-----------------------+ | **Finalidad de la | **Herramientas** | | | herramienta** | | | +-----------------------+-----------------------+-----------------------+ | **Las herramientas a | | | | emplear para la | | | | edición de imágenes, | | | | sonido, vídeo, | | | | animaciones y | | | | contenido interactivo | | | | se verán en el | | | | momento de en que se | | | | estudie cada una de | | | | las unidades de | | | | trabajo | | | | correspondientes.** | | | +-----------------------+-----------------------+-----------------------+ | **Edición de páginas | Adobe Dreamweaver.\ | Nvu.\ | | Web.** | Microsoft Visual | Brackets.\ | | | Studio.\ | BlueGriffon.\ | | | NotePad++. | Jetbrains Webstrom. | | | | | | | Sublime Text | | +-----------------------+-----------------------+-----------------------+ | **Creación de | CSS Button Creator. | CSS Button Generator | | botones.** | | | +-----------------------+-----------------------+-----------------------+ | **Creación de barras | CSS Tricks | | | de desplazamiento.** | | | +-----------------------+-----------------------+-----------------------+ | **Creación de | CSS Navigation Bar | | | menús.** | | | +-----------------------+-----------------------+-----------------------+ | **Creación de foros y | Guestbook Generator. | Phorum Script | | libros de visitas.** | | | +-----------------------+-----------------------+-----------------------+ | **Generación de | Open Source Web | Template World. | | plantillas.** | Design.\ | | | | Template Monster. | | +-----------------------+-----------------------+-----------------------+ | **Navegadores.** | Internet Explorer.\ | Google Chrome,\ | | | Mozilla Firefox.\ | Opera\ | | | Apple Safari. | otros\.... | +-----------------------+-----------------------+-----------------------+ **Autoevaluación** Rellena los huecos con los conceptos adecuados. Principio del formulario La estructura reflejada en la guía de estilo debe reflejar el en píxeles que ocupará el encabezado. Final del formulario **3.3.- Lenguajes de marcas.** Los sitios Web están compuestos de páginas que están escritas en algún lenguaje. Aunque algunas de las herramientas vistas en el apartado anterior te permiten comenzar a realizar diseños sin necesidad de tener ningún conocimiento, a excepción del de la propia herramienta, si tu intención es dedicarte profesionalmente, deberás conocer, comprender y utilizar los lenguajes de marcas. [[Free-Photos]](https://www.needpix.com/photo/561467/computer-computer-code-screen-monitor-computer-screen-programming-html-css-links) ([[CC0]](http://creativecommons.org/publicdomain/zero/1.0/deed.es)) **HTML, **acrónimo de las palabras en inglés HyperText Markup Language o Lenguaje de Marcado de Hipertexto, es el lenguaje de marcado predominante para la elaboración de páginas web. Los documentos escritos en este lenguaje sirven para describir tanto la estructura como el contenido de una página web. El HTML emplea marcas o etiquetas dentro del documento para informar al navegador de lo que es presentación dentro de un documento y lo hace, normalmente, delimitando el texto entre dos etiquetas: una de apertura y una de cierre, y, digo normalmente, porque hay etiquetas que no tienen etiqueta de cierre. Una etiqueta se distingue del resto porque va encerrada entre corchetes angulares (los símbolos "menor que" y "mayor que") y tiene unas normas sintácticas que se deben respetar si queremos que el resultado mostrado en el navegador sea el que pretendemos. La mayoría de ellas constan de: nombre de la etiqueta y atributos de la etiqueta, aunque algunas no tienen atributos. **Debes conocer** En el siguiente enlace, puedes ver el Wikilibro "Curso de introducción al lenguaje HTML". Se trata de un curso En el podrás poner al día tus conocimientos sobre HTML. [[Curso de introducción al lenguaje HTML]](http://es.wikibooks.org/wiki/Lenguaje_HTML) **XML**, acrónimo de las palabras en inglés de eXtensible Markup Language o Lenguaje de Marcas eXtensible, se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas. XML no es realmente un lenguaje en particular, es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). A diferencia del HTML en el que los errores sintácticos no producen errores en el navegador y sólo pueden provocar variaciones en la presentación, el XML es muy estricto en cuanto a sus normas de sintaxis. **Recomendación** En el siguiente enlace, puedes ver el artículo de la Wikipedia sobre XML. En el podrás repasar como se estructuran los documentos XML y las condiciones que tienen que cumplir para que se consideren documentos bien formados. También puedes enlazar, desde este artículo, a las recomendaciones que la W3C hace del lenguaje. [[Artículo de la Wikipedia sobre XML]](http://es.wikipedia.org/wiki/XML) XHTML, acrónimo de las palabras en inglés de eXtensible Hypertext Markup Language o lenguaje extensible de marcado de hipertexto. Es un lenguaje que utiliza las mismas etiquetas y atributos que el HTML pero aplicando las reglas de sintaxis del XML. **Debes conocer** En el siguiente enlace, puedes acceder al artículo de la Wikipedia sobre XHTML. En el se muestran con ejemplos cuáles son las principales diferencias, desde el punto de vista de la sintaxis, entre el HTML y el XHTML. También podrás enlazar, desde este artículo, a las recomendaciones que la W3C hace del lenguaje. [[Artículo de la Wikipedia sobre XHTML]](http://es.wikipedia.org/wiki/XHTML) **3.4.- Tablas, capas, marcos.** En el apartado Maquetación web viste cómo distribuir los bloques dentro de una página web y cuál era la funcionalidad de cada bloque y, en el apartado anterior has estudiado los lenguajes a emplear en el diseño de páginas web. **Reflexiona** ¿Cómo escribes lo que forma parte de cada bloque y consigues que el navegador no te mezcle todo en la pantalla? Principio del formulario Final del formulario En los comienzos del HTML, la única forma de estructurar los contenidos de una página web era empleando tablas. Para poder agrupar estos contenidos en los bloques de encabezado, zona de navegación, contenidos y pie, había que anidar unas tablas dentro de otras y definir los tamaños de cada bloque dándole valores, absolutos o relativos, a la altura y anchura de cada celda. Era fácil, aunque laborioso, pero se conseguía situar exactamente cada cosa en su sitio. Había que tener el código HTML con las tabulaciones bien colocadas para no perderse en un maremágnum de etiquetas **tr** y **td**. Las nuevas versiones de los navegadores incorporaron los **Frames o marcos** que permitían estructurar la ventana del navegador en partes independientes entre sí, mostrando en cada una de estas partes una página HTML distinta. La ventaja del uso de los marcos con respecto a la tabla es que se pueden dejar zonas de la ventana visibles permanentemente y, al estar separadas las zonas según su funcionalidad resulta más fácil hacer el mantenimiento. **Recomendación** En el siguiente enlace, puedes ver el resultado que se obtiene del boceto presentado en la imagen utilizando únicamente tablas en el código HTML. [[Resultado en el navegador empleando tablas]](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/DIW01_CONT_R57_Indextablas.html) En el siguiente enlace, puedes ver el resultado que se obtiene del boceto presentado en la imagen utilizando únicamente marcos en el código HTML. [[Resultado en el navegador empleando marcos]](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/DIW01_CONT_R58_Indexmarcos.html) En el siguiente enlace, puedes ver el documento que contiene el código de los dos ejemplos anteriores. [[Código de los ejemplos anteriores]](https://fpadistancia.edu.xunta.gal/pluginfile.php/1245425/mod_resource/content/1/DIW01_v1/ArchivosUnidad/Moodle/DIW01_completa_offline/DIW01_Contenidos/DIW01_CONT_R59_Codigos.pdf) (59.9 KB) Con la aparición de la **hojas de estilo**, las cuales no hay que confundir con las Guías de estilo que vimos con anterioridad, se tiende a dejar de emplear tanto los marcos como las tablas sustituyendo ambos por el empleo de la etiqueta **DIV** para definir los bloques y las hojas de estilos para configurar la visualización de dichos bloques. Pero este tema tiene la suficiente entidad como para dedicarle más adelante una unidad de trabajo completa. **Autoevaluación** **Rellena los huecos con los conceptos adecuados:** Principio del formulario El XHTML es un lenguaje que utiliza las mismas y atributos que el HTML pero aplicando las reglas de sintaxis del . Final del formulario **3.5.- Plantilla de diseño.** En el apartado **Maquetación web**, vimos un ejemplo de distribución de los bloques en los que se estructura una página web. Nos solemos encontrar esta distribución en sitios Web que no son excesivamente complejos, donde sólo hay una zona de navegación que está siempre visible y, una zona de contenidos donde se presentan cada uno de los contenidos enlazados desde la zona de navegación. Hay muchas distribuciones diferentes de los elementos de una página web, pero al final, después de haber navegado horas y horas visitando muchos sitios distintos, nos damos cuenta de que estas estructuras se repiten una y otra vez. ¿Por qué? La reutilización de código es una técnica común que intenta ahorrar tiempo y energía, reduciendo el trabajo redundante. ¿Por qué vamos a malgastar nuestro tiempo diseñando algo que ya está hecho y que funciona? Las plantillas de diseño Web son sitios Web prediseñados que se pueden usar como base en un diseño Web y que permiten adaptarlo a las necesidades del diseñador de forma rápida y fácil, ahorrando una gran cantidad de tiempo y dinero. En la imagen podéis ver un ejemplo de un diseño de una página realizado en menos de 20 minutos a partir de una plantilla suministrada por webself.net. Hoy en día, hay gran cantidad de sitios comerciales que suministran plantillas de diseño Web por muy poco dinero si consideramos el tiempo ahorrado en el diseño. Además la mayoría te dan el alojamiento gratuito de tu sitio Web durante el primer año. **Recomendación** En los siguientes enlaces, puedes ver la página web de algunos sitios interesantes que suministran plantillas de diseño. [[webself.net]](http://www.webself.net/) [[webnode.es]](http://www.webnode.es/) Haz una búsqueda en Internet poniendo "**Plantillas de diseño web"** como texto de la búsqueda y tendrás acceso a muchos más proveedores.

Planificación de Interfaces Gráficas PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue