Resumen 
Unidad 2

Generalidades para el diseño de sitios web

Diseño Web

•Es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web.

•No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo.

La navegabilidad

Es la facilidad con la que un usuario puede desplazarse por todas las páginas que componen un sitio web. Para lograr este objetivo, un sitio web debe proporcionar un conjunto de recursos y estrategias de navegación diseñados para conseguir un resultado óptimo en la localización de la información y en la orientación para el usuario.

•Las interfaces de navegación tienen que ayudar a los usuarios a responder a tres preguntas fundamentales relacionadas con la navegación:

•¿Dónde estoy?

•¿Dónde he estado?

•¿Dónde puedo ir?

La interactividad

•Interactivo Dicho de un programa que permite una interacción a modo de diálogo entre ordenador y usuario.

"La interactividad supone un esfuerzo de diseño para planificar una navegación entre pantallas en las que el usuario sienta que realmente controla y maneja una aplicación” .

•En este sentido el usuario debe navegar por la aplicación y sentirse libre.

La Usabilidad

Se refiere a la claridad y la elegancia con que se diseña la interacción con un programa de ordenador o un sitio web.

"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso".

Un correcto diseño web implica conocer cómo se deben utilizar cada una de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc.

Sitio Web o Web Site

Es un sitio (localización) en la WorldWideWeb que contiene documentos (páginas web) organizados jerárquicamente. 

Cada documento (página web) contiene texto y o gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos.

Pagina Web

Es un documento de la WorldWideWeb normalmente en formato HTML que proviene del estandar SGML o XHTML que proviene del estandarXML.

A veces se utiliza erróneamente el término página web, para referirse a sitio web. Una página web es parte de un sitio web y es un único archivo con un nombre de archivo asignado, mientras que un sitio web es un conjunto de archivos llamados páginas web.

2.1 Principios Básicos de Diseño

• Unidad: El Sitio web debe concebirse como unidad, y la totalidad de sus partes (texto, arte, encabezado, logotipo, etc) se deben relacionar entre sí con el fin de producir un efecto general y unificado. Toda publicidad creativa tiene un diseño unificado.

• Armonía: La idea de que todos los elementos del Sitio Web deben de ser compatibles, está muy relacionada con la unidad. El diseñador logra la armonía mediante la selección de elementos que combinen.

• Secuencia: El Sitio Web debe arreglarse de modo ordenado para que pueda leerse de izquierda a derecha y de arriba hacia abajo. La secuencia de elementos puede ayudar a dirigir los ojos hacia un movimiento estructural. Los elementos deben colocarse de manera que el ojo comience donde se desea que empiece.

• Énfasis: el énfasis consiste en el realce de un elemento con el fin de estacar. Se debe decidir si se desea poner énfasis en la ilustración, el encabezado, el logotipo o el texto.

• Contraste: Se requiere de diferentes tamaños, formas y tonos para hacer que el Sitio Web sea más vistoso de modo que no resulte aburrido a la vista. El contraste hace que el trabajo sea más interesante.

• Equilibrio: Por equilibrio se quiere indicar el control del tamaño, tono, peso y posición de los elementos que constituyen el Sitio. Puede ser de dos clases:

• Equilibrio Formal: Un Sitio de equilibrio formal posee elementos de igual peso, tamaño y forma a los dos lados izquierdo y derecho de una línea vertical imaginaria trazada en el centro de la página.

• Equilibrio informal: Los objeto parecen estar colocados al azar en la página pero guardan tal relación entre sí que la página en su totalidad está equilibrada, requiere más trabajo pero los efectos pueden ser imaginativos y distintivos.

2.2 Metodologías para la creación de Sitios Web

HTML: a standardo sistema de edición de textos con "tags" que dan formato a la página. Se puede enseñar como el lenguaje de programación de Internet.

Editor HTML: ofrecen herramientas y "shortcuts" para editar y formatear páginas web usando el formato HTML.

Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es un programa que permite crear una estructura de soporte para la creación y administración de contenidos, principalmente en páginas web, por parte de los participantes (Wikipedia).

WYSIWYG (What you see is what you get):

Editor que usa la tecnología "Lo que usted ve es lo que obtiene" como Expression Web o Pagemill que crean páginas/sitios web sin conocer el lenguaje HTML--ventaja de trabajar directamente sobre el servidor (no necesita transferir los archivos una vez acabados).

2.3 Colores, Tipografía, imagen y animación en la Web

El color es una parte del espectro lumínico, y, al fin, es energía vibratoria.

Esta energía afecta de diferente forma al ser humano, dependiendo de su longitud de onda (del color en concreto) produciendo diferentes sensaciones de las que normalmente no somos conscientes.

Número de colores en página

Es arriesgado establecer una norma estricta, ya que 6 colores simultáneos en una página pueden ser demasiados si existe un gran contraste entre ellos, pero pueden conformar una combinación agradable si la relación entre los mismos es adecuada..

Como norma inicial puede asegurarse que siempre es mejor pocos colores mejor que muchos. Como mínimo, el riesgo de estridencias es menor.

Como siguiente norma se puede afirmar que 3 colores en una misma página sería lo mínimo a utilizar y, en la mayoría de casos, debiera ser suficiente.

Con menos de 3 colores, las posibilidades de que la página sea anodina y aburrida son muy grandes.

• Color Primario: es el tono básico de la página, el que la define, y el que ocupa la gran mayoría de la misma. Sería el color del atributo "background" de la página.
• Color Secundario: es el segundo tono predominante en la página, aunque en mucha menor medida que el primario. Normalmente debe acotar o resaltar áreas y debe ser bastante próximo en tono al primario.
• Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la página. Por definición debe contrastar mucho con los colores primario y secundario y, por tanto, debe utilizarse con moderación. Puede utilizarse el Complementario o el Complementario Escindido del color primario de la página.

Caracteristicas

• TONO: nos permite distinguir un color de otro. Basándose en la longitud de onda proyectada en la luz. Por el tono distinguimos un color de otro.

• SATURACIÓN: es el nivel de pureza de un color y tiene que ver con la cantidad de blanco que contenga el tono. A mayor cantidad de blanco menor pureza tendrá el color.

• LUMINOSIDAD: o brillo es la cantidad de luz que el color refleja.

• COLORES LUZ: Son aquellos que superpuestos dan como resultado luz

          * Blanca

          * Rojo

          * Verde

          * Azul

Colores Pigmento: son resultado de la mezcla de los colores luz primarios.

          

          * Cyan

          * Magenta

          * Amarillo

Impacto emocional

La psicología cree que el color hace más que solamente impactar nuestro sistema visual. Por ejemplo, los mismos mecanismos que reciben el color, son los que a través del hipotálamo, permiten a los pulsos llegar a la pituitaria y la glándula pineal.

Buscar la reacción del usuario espontáneamente puede ser algo muy útil.

Efectos de las combinaciones

Si pensamos en las versiones impresas, sus costos siempre implican que utilicemos menos colores. En el caso web, hay completa libertad para usar la cantidad de tonos que necesitemos, por lo que se pueden explorar combinaciones que favorezcan nuestro diseño y de esa manera agregar valor.

Sugestión subliminal

Quizás no existan pruebas fehacientes, pero los mensajes subliminales y sus efectos continúan siendo estudiados por la psicología, y son denominados estímulos y estímulos negativos.

En los estímulos generalmente se prepara al usuario a recibir determinado objeto para obtener una ventaja de la comunicación entre uno y otro. En el caso de los estímulos negativos, se puede provocar en la persona, un retraso en identificar lo que se quiere transmitir, aún cuando es obvio.

LA TIPOGRAFÍA

El medio de transmisión de ideas por excelencia es la palabra escrita. La esencia del buen diseño gráfico consiste en comunicar ideas por medio de la palabra escrita, combinada a menudo con dibujos o con fotografías.

El termino tipográfica se emplea para designar al estudio, diseño y clasificación de los tipos (letras) y las fuentes (familias de letras con características comunes), así como al diseño de caracteres unificados por propiedades visuales uniformes.

La tipografía es el arte del uso de la letras, números y símbolos en un texto. Nace con la imprenta, en el periodo gótico y se desarrolla en el Renacimiento europeo o en el siglo XIII en Oriente, con los primeros tipos de madera, según lo miremos. En la actualidad vivimos en la “era de la información” y todo lo que leemos está escrito utilizando tipos.

Tipos o fuentes

A veces podemos usar estos términos sin tener claro a qué nos estamos refiriendo, en realidad se trata de lo mismo.

Vale decir que los tipos son los conjuntos de caracteres que componen una familia tipográfica de fuentes.

Por ejemplo: Helvética Regular, Helvética Itálica, Helvética Negrita, que son diferentes formas o estilos de una familia tipográfica, como Helvética Regular.

Clasificaciónde los tipos

Hay muchas maneras de clasificar las fuentes, pero la clasificación más básica que debemos conocer son:

Serify Sans-Serif

En Castellano se denomina Gracia o Remate. Las fuentes Serifse distinguen por una línea que hace de terminación, la gracia, se llaman de palo seco cuando no tiene esta terminación decorativa.

Tienen origen en el pasado, cuando las letras se cincelaban en bloques de piedra, pero resultaba difícil asegurar que los bordes de las letras fueran rectos, por lo que el tallador desarrolló una técnica que consistía en destacar las líneas cruzadas para el acabado de casi todas las letras, por lo que las letras presentaban en sus extremos unos remates muy característicos, conocidos con el nombre de serif.

Como ejemplosde fuentesserif podemoscitarBook Antiqua, Bookman Old Style, Courier, Courier New, Century Schoolbook, Garamond, Georgia, MS Serif, New York, Times, Times New Roman y Palatino.

Las fuentes sans-serifo etruscas

Hacen su aparición en Inglaterra durante los años 1820 a 1830. No tienen remates en sus extremos (sin serif), entre sus trazos gruesos y delgados no existe apenas contraste, sus vértices son rectos y sus trazos uniformes, opticamente ajustados en sus empalmes. Representan la forma natural de una letra que ha sido realizada por alguien que escribe con otra herramienta que no sea un lápiz o un pincel.

Asociados desde su inicio a la tipografía comercial, su legibilidad y durabilidad los hacían perfectos para impresiones de etiquetas, embalajes, envolturas y demás propósitos comerciales. Aunque este uso motivó que fueran despreciados por aquellos que se preocupaban por los tipos bellos y la impresión de calidad.

Las fuentes sans-serif incluyen todas las Palo Seco, resultando especialmente indicadas para su visualización en la pantalla de un ordenador, resultando muy legibles a pequeños tamaños y bellas y limpias a tamaños grandes.

Entre las fuentes Sans-Serifse encuentran Arial, ArialNarrow, ArialRoundedMT Bold, CenturyGothic, Chicago, Helvetica, Geneva, Impact, Monaco, MS SansSerif, Tahoma, TrebuchetMS y Verdana.

IMAGEN

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, png, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados son el GIFy el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

BMP

Mapade bits (bitmap)

Los archivos con extensión .BMP, representan la sigla BitMaP(o también Bit Mapped Picture), o sea mapa de bits.

Es el formato más usado en aplicaciones Windows y DOS. En la codificación de la imagen no hay compresión y por lo general resultan archivos grandes.

Su ventaja es que lo lee cualquier programa que maneje imagen.

JPG o JPEG

Es el formato más común para comprimir imágenes con relativamente poca pérdida de calidad y bajo peso, generalmente usado en imágenes fotográficas. El formato JPEG admite millones de colores (24 bits).

JPEG es el formato óptimo para fotografías digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de color en degradado o cualquier imagen que requiera más de 256 colores.

Las imágenes son de mayor calidad que las GIF, al contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotografías.

Ventajas:

–Soporta millones de colores a un peso relativamente bajo

–Ampliamente soportado en todos los navegadores y plataformas

Desventajas:

–No soporta transparencias

–El formato no es libre

GIF (Graphic Interchange Format).

Creado por CompuServe hace casi 20 años. Utiliza compresión de un máximo de 8 bits (256 colores), por lo tanto se reduce considerablemente la calidad si se trata de imágenes de color verdadero (24 bits o mas) como fotografías o degradados complejos.

GIF es muy indicado para guardar imágenes no fotográficas tales como: logotipos, imágenes de colores planos, dibujos, etc. Este formato permite crear animaciones a través de fotogramas secuenciales.

•Ventajas:

–Amplia compatibilidad en los navegadores

–La transparencia.

–La compresión logra imágenes de muy bajo peso.

•Desventajas:

–Límite de 256 colores (degradados y fotografías se ven muy mal)

PNG

(Portable Networks Graphic). 

Es un formato gráfico que esta basado en un algoritmo de compresión sin pérdidas, y fue desarrollado para resolver las deficiencias del GIF, principalmente en cuanto a profundidad de color.

Ventajas:

–En la mayoría de los casos prácticos, se obtiene la mejor relación peso/calidad.

–Recomendado por W3C.

–Acepta transparencias.

Desventajas:

–Imágenes con mucho color y texturas suelen ser muy pesadas

–El soporte de PNG no es tan amplio como otros formatos.

Animación

Conjunto de gráficos o imágenes que, a una determinada velocidad, crean la ilusión de movimiento.Entre los formatos de animación (o que soportan animación) se encuentran el GIF, el SWF(animación flash), etc.

Animación Web

Cualquier animación que está pensada para ser utilizada en una página web, pues emplea un formato ampliamente extendido y que generalmente puede visualizarse directamente desde un navegador web.

Las animaciones web suele utilizarse para publicidad, banners, detalles de diseño, efectos, botones animados, etc.

Las animaciones en la web suelen implementarse a través de:

Formatos gráficos:

-Flash 

-Shockwave.

-GIFanimados, u otros formatos gráficos animados.

Programación y diseño web:

–HTML 5

–HTML dinámico (con JavaScript u otros).

–Java (empleando Java Applets).

Las animaciones en la web suelen implementarse a través de:

Formatos de video:

–AVI,

–MPG,

–WMV,

–etc.

Si bien no se consideran animaciones, pueden cumplir una función similar.