Diseño Grafico en la Web

Diseño de un sitio Web

El HTML es el idioma de las páginas Web. Esta constituido por etiquetas y recuerda mucho a los antiguos procesadores de texto en los que, para poner una frase en negrita, había que ponerla entre dos mareas (una de abrir negrita y otra de cerrar). Los navegadores interpretan estas etiquetas o marcas y las muestran en la pantalla.. So1o hay un pequeño problema: no todas las etiquetas se muestran igual en todos lo navegadores. Por ejemplo, el salto de línea no es igual de grande en un navegador que en otro. A esto hay que añadir que la interpretaci6n que haga el navegador de este documento HTML depende también de la resolución de pantalla a la que estemos navegando. No es lo mismo navegar a 640x480 (casi es imposible navegar a esta resolución), que a 800x600 (la resolución a la que navega la mayoria). Navegar a resoluciones mayores no suele entrañar ningún desajuste en la maquetación de la página.
Nosotros maquetaremos nuestras páginas basándonos casi siempre en una resolución de 800x6OO, que es la resolución media además de la más usada por los internautas. Nos fijaremos en que no haya demasiados cambios a 640x480 y comprobaremos que a 1024x768 no hay problemas, só1o más espacio.
URL son las siglas de Uniform Resource Locator, un localizador de páginas web. Por poner un ejemplo, la guía de teléfonos. Usted quiere hablar conmigo, va a la guía de teléfonos y busca por Juan Antonio Jiménez Torres. Esto le llevara tiempo. Pues imaginese si me hubiese llamado Pérez. Esto es lo que ocurre con las páginas Web. Hay tantas que hay que darles un nombre estructurado. Eso es la URL. Veamos a continuaci6n como se estructura la URL con los siguientes elementos:

* http es el protocolo de comunicaciones entre los dos ordenadores. Hay otros protocolos, como el ftp (File Transfer Protocol), que se utiliza para la transferencia de archivos. * www se utiliza normalmente para indicar que el documento esta en la World Wide Web. Es lo mas frecuente, pero no tiene porque ser así.
servidor (en nuestro ejemplo) es el nombre de la maquina que alberga el documento que querernos visitar.
dominio. En este punto, se indica el país d6nde está el servidor o el tipo de servidor que es. Para países se usa comúnmente es para España, fr para Francia, uk para el Reino Unido, hu para Hungria y así indefinidamente. Saberse todos los dominios es complicado. Hay que tener en cuenta que hay otros dominios que no denotan países como com. y org, el primero referente a empresas comerciales en EEUU y el segundo a organizaciones de todo tipo.
Si luego apareciese una barra y un nombre de la forrna que aparece en el cuadro anterior es que se está haciendo referencia a un directorio dentro de ese servidor. Hay que tener mucho cuidado a la hora de escribir las direcciones en Internet, ya que estamos acostumbrados a sistemas operativos que no diferencian entre mayúsculas y minúsculas. Sin embargo, la mayoría de las maquinas que dan este tipo de servicios son servidores UNIX (cada vez hay mas que funcionan bajo Linux) y son sensibles a las mayúsculas y minúsculas. También hay algún servidor NT, pero es conveniente que nos acostumbremos a usar debidamente las mayúsculas y minúsculas.
http://www.ole.es es un buscador que hay en España. Para conectamos a el, tendríamos que teclear la anterior URL, donde http nos indica el protocolo con el que nos conectamos (HypcrText Transfcr Protocol), es decir, el protocolo de transferencia de hipertexto. Las siglas www nos indican que ese documento está en la World Wide Web, ole es el nombre del servidor o la máquina y, por último, es significa que está albergado en España.

Fenómeno físico de la luz o de la visi6n, asociado con las diferentes longitudes de onda en la zona visible del espectro electromagnético. Como sensación experimentada por los seres humanos y determinados animales, la percepción del color es un proceso neurofisiogico muy complejo. Los métodos utilizados actualmente para la especificación del color se encuadran en la especialidad llamada colorimetría, y consisten en medidas científicas precisas basadas en las longitudes de onda de tres colores primarios.
La luz visible está formada por vibraciones electromagnéticas cuyas longitudes de onda van de unos 350 a unos 750 nanómetros (mil millonésimas de metro). La luz blanca es la suma de todas estas vibraciones cuando sus intensidades son aproximadamente iguales. En toda radiación luminosa se pueden distinguir dos aspectos: uno cuantitativo, su intensidad, y otro cualitativo, su cromaticidad. Esta última viene determinada por dos sensaciones que aprecia el ojo: la tonalidad y la saturación.
Una luz compuesta por vibraciones de una única longitud de onda del espectro visible es cualitativamente distinta de una luz de otra longitud de onda. Esta diferencia cualitativa se percibe subjetivamente como tonalidad. La luz con longitud de onda de 750 nanómetros se percibe como roja, y la luz con longitud de onda de 350 nanómetros se percibe como violeta.
Las luces de longitudes de onda intermedias se perciben como azul, verde, amarilla o anaranjada, desplazándonos desde la longitud de onda del violeta a la del rojo.
El color de la luz con una única longitud de onda o una banda estrecha de longitudes de onda se conoce como color puro. De estos colores puros se dice que están saturados, y no suelen existir fuera del laboratorio. Una excepción es la luz de las lámparas de vapor de sodio empleadas en ocasiones para la iluminación de calles y carreteras, que es de un amarillo espectral casi completamente saturado. La amplia variedad de colores que se ven todos los días son colores de menor saturación, es decir, mezclas de luces de distintas longitudes de onda.

El ojo humano no funciona como una maquina de análisis espectral, y puede producirse la rnisma sensación de color con estímulos físicos diferentes. Así, una mezcla de luces roja y verde de intensidades apropiadas parece exactamente igual a una luz amarilla espectral, aunque no contiene luz de las longitudes de onda asociadas al amarillo. Puede reproducirse cualquier sensación de color mezclando aditivamente diversas cantidades de luces roja, azul y verde. Por eso se conocen estos colores como colores aditivos primarios. Si se mezclan luces de estos colores primarios con intensidades aproximadamente iguales se produce la sensación de luz blanca. También existen parejas de colores espectrales puros, que si se mezclan aditivamente, producen la misma sensación que la luz blanca, por lo que se denominan colores complementarios. Entre esos pares figuran determinados amarillos y azules, o rojos y verdes azulados.
Todos los objetos tienen la propiedad de absorber y reflejar ciertas radiaciones electromagnéticas. La mayoría de los colores que experimentamos normalmente son mezclas de longitudes de onda que provienen de la absorción parcial de la luz blanca. Casi todos los objetos deben su color a los filtros, pigmentos o pinturas, que absorben determinadas longitudes de onda de la luz blanca y reflejan o transmiten las demás; estas longitudes de onda reflejadas o transmitidas son las que producen la sensación de color, que se conoce como color pigmento.
Los colores pigmento que absorben la luz de los colores aditivos primarios se llaman colores sustractivos primarios. Son el magenta que absorbe el verde, el amarillo que absorbe el azul y el cyan (azul verdoso), que absorbe el rojo. Por ejemplo, si se proyecta una luz verde sobre un pigmento magenta, apenas se refleja luz, y el ojo percibe una zona negra. Los colores sustractivos primarios pueden mezclarse en proporciones diferentes para crear casi cualquier tonalidad; los tonos así obtenidos se llaman sustractivos. Si se mezclan los tres en cantidades aproximadamente iguales, producen una tonalidad muy oscura, aunque nunca completamente negra. Los primarios sustractivos se utilizan en la fotografía en color: para las diapositivas y negativas en color se emplean tintes de color magenta, cyan y amarillo; en las fotografías en color sobre papel se emplean tintas de estos mismos colores, también se usa tinta negra para reforzar el tono casi negro producido al mezclar los tres colores primarios.
En el área de la informática las computadoras almacenan y manipulan colores representándolos como una combinación de tres números. Por ejemplo, en el sistema de colores RGB (siglas en inglés de red-green-blue, 'rojo-verde-azul'), el computador utiliza sendos números para representar los componentes primarios del rojo, verde y azul. Otros

¿Qué colores has elegido para tu pagina Web? ¿Cuales fueron tus razones para elegir ese diseño en particular? ¿Fue porque te gustaron los colores o tenias un mensaje especifico que querías trasmitir? Como la apariencia visual es un elemento poderoso, la elección de los colores debe comunicar un mensaje especifico a la gente que los ve. ¿Estás seguro de que conoces qué mensaje estás enviando?
Debemos tener en cuenta la psicología del color cuando diseñamos los objetos de marketing. Sea una página Web, una tarjeta comercial, un folleto, unos postes o cualquier otro material, estaremos eligiendo colores. Los colores no solo destacan ]a apariencia de la información. también influyen en el comportamiento humano. Haremos pues bien en considerar el impacto de los colores que vamos a usar con respecto al público al que apuntamos.
Por ejemplo, ¿notaste que la mayoría de los comedores de comida rápida ("Mc Donald", etc) comparten en sus decoraciones los mismos colores llamativos: rojos y amarillos? Estos colores no están ahí por casualidad. Detallados estudios psicológicos demostraron que los rojos y los amarillos dan al que los ve el deseo de decidirse a corner rápidamente y abandonar el comedor. Y eso es exactamente lo que estos comedores de last food quieren que usted haga.
Tampoco es casualidad que veas un montón de rojos y negros (pobre Stendhal) en las páginas Web pornos. Estos colores están elegido por tener connotaciones sexuales. El negro se relaciona con lo nocturno y el rojo con la sangre y el calor.
¿Alguna vez notaste que las páginas Web, los juguetes y los libros de chicos, contienen muchos colores primarios y colores brillantes? Los chicos prefieren estos colores y responden a estos más positivamente de lo que lo hacen frente a colores pasteles o mezclas más avanzadas.
Trabajos de investigación de psicología y marketing han identificado como es que los colores tienden a afectamos. Aunque esto es más relativo teniendo en cuenta las diferencias de símbolos entre culturas, por lo que las respuestas y preferencias del público al que apuntamos debe ser una consideración primaria cuando planeamos el diseño de artículos promociónales como una página Web.
Por ejemplo, blanco es el color de la muerte en la cultura china, pero el púrpura representa la muerte en Brasil. El amarillo es sagrado para los chinos, pero significa tristeza en Grecia y celos en Francia. Mientras que en los Estados Unidos, los celos se asocian desde siempre con el verde. La gente de países tropicales responde mas lavorablemente a los colores calidos, y la gente de los países nórdicos prefieren los colores mas fríos.
Los estudios de mercado han mostrado que los colores también afectan los hábitos de compras. Los compradores impulsivos responden mejor a los rojos-anaranjados, negros y azul noche. Los compradores de presupuestos ajustados reaccionan mejor a los tonos rozados, celestes y verdes agua.
Si queremos probar estas estadísticas nos basta con visitar algunos sitios Web importantes de compañías que dedican parte de su presupuesto de marketing a investigar que es lo que vende mejor.
Los colores son capaces de transmitir emociones. Si bien hay una psicología del color y algunos colores tienen efectos emocionales universales, en la mayoría de los casos, sus significados son dependientes de la cultura.
Las emociones asociadas a algunos colores tienen una fuerte componentes cultural. Por ejemplo en China la muerte se asocia con el verde mientras que en occidente se asocia al color negro. En otros contextos se asocia el verde con la envidia. El rojo en China significa buena fortuna mientras que en Occidente se asocia al espíritu deportivo. (Véase por ejemplo la página de Pantone sobre el color, o la página de Ergogero).
Sin embargo hay que notar la diferencia entre las emociones y los significados. Mientras que las emociones son inconscientes los significados tienen un contexto cultural y convencional más fuerte. Los colores más primarios emocionalmente parecen ser rojo y azul. La visión del color rojo es capaz de aumentar la presión sanguínea y el ritmo cardiaco, mientras que el azul parece tener el efecto contrario.
Los colores se distinguen típicamente en calidos (amarillos, rojos, naranjas) y colores frios (azules, verdes y violetas) por primitivas y probablemente universales asociaciones al sol y el fuego, para unos, al agua y la vegetación los otros.

Rojo: Peligro, excitación, fuego, pasión, sangre, luchar o huir, llama la atención, cierta connotación sexual.
El Púrpura: Riqueza, realeza, sofisticación, inteligencia.
Azul : Serenidad, Tranquilidad, verdad, dignidad, constancia, fiabilidad, poder.
Negro: Sofisticación, elegancia, poder, rebelión.
Blanco: Pureza, limpieza, lurninosidad, vacío.
Amarillo: Calidez, el sol para muchas culturas, brillo, alegria si está poco saturado.
El Verde: Naturaleza, frescor, vegetación, salud, los verdes azules son los favoritos de los consumidores.

En HTML, los colores se expresan en forma de valores hexadecimales (por ejemplo, # FOOOO) o con nombres (red). Los colores comunes a Netscape Navigator y Microsoft Intemet Explorer en los sistemas Windows y Macintosh en modo 256 colores se denominan seguros para la Web. Suele decirse que existen 256 colores comunes y que cualquier valor hexadecimal que combine los pares 00, 33, 66, 99, CC oFF (valores RGV 0, 51, 102, 153, 204 y 255, respectivamente) representa un color seguro para la Web.
La Tipografía
En términos generales, la tipografía consiste simplemente en elegir un tipo de letra para un trabajo determinado, de modo que un bloque de texto o un encabezamiento se puedan leer sin dificultad.
En un examen más detallado, sin embargo, es evidente que encierra algo mas que la simple cuestión de facilidad de lectura. Literalmente, tipografía significa el diseño de las letras.

Hay algunas características que describes las diferencias entre las tipografías. Dichas características son importantes de tomarlas en cuenta cuando se mezclan letras en una composición de texto.
Una tipografía puede ser descrita por su peso (ligero, normal o negrita); por su modulación (vertical u oblicua); color (oscura o clara>; forma (redonda, ovalada, rectangular>; altura de x; inclinación (itálica, oblicua); y por la presencia o ausencia de gracias. Las fuentes se agrupan en familias de variación tipográfica. El nombre de una fuente puede indicar su peso o inclinación pero no su tamaño.

Una buena diagramación se debe principalmente a la combinación del sentido común y la simpleza. Un documento bien organizado se destaca por las siguientes características:

El tipo escogido contribuye fundamentalmente a la impresión visual general de un texto. Un tipo puede fortalecer el efecto que se quiere proyectar. Se recomienda estudiar la escogencia del tipo según el contenido literario del texto.

Las tipografias Palo Seco (ejemplo, Arial) son adecuados para los textos técnicos y modernos.

Para obtener el equilibrio visual entre la tipografía y el contenido del texto, se debe experimentar con varios tipos.

b. Legibilidad

La facilidad de lectura de los caracteres es importante por lo que se debe tomar en cuenta los efectos que producen el diseño de los tipos en la lectura del texto:
* Las tipografía Romanas (ejemplo, Times) son fáciles de leer en impresos, por lo que se recomiendan para bloques de textos amplios. No son recomendables en composiciones para textos a ser leídos en pantallas (ejemplos, multimedia y páginas Web).

* Las Palo Seco son adecuadas para leer títulos pues son más legibles en puntajes grandes.
Sin embargo, se recomienda su uso en pequeños bloques de textos impresos o cuando el texto será leído directamente en pantallas (ejemplos, multimedia y páginas Web).

* Las tipografías decorativas, cursivas y góticas no deben utilizarse para grandes bloques de texto pues muchas son dificultosas de leer.

* Para obtener una legibilidad óptima se recomienda el uso de tipografías clásicas y reconocidas por su alto valor funcional (Garamond, Baskerville, Univers, Helvdtica, Bembo. Bodoni, Centauro, etc.)