Tarea

1. Bajar la información de la plataforma sobre las opciones que ofrece la usabilidad para organizar información en un sitio web.
2. Seleccionar el tema sobre el cual debe recolectar información y diseñar el sitio web  para almacenarla.
3. Determinar por qué es más apropiado utilizar un sitio web para dar a conocer el producto de su trabajo.
4. Crear un sitio web que contenga tablas, y formularios para organizar la información sobre el tema seleccionado.
5. Establecer las relaciones existentes entre la usabilidad del sitio web y los sitios web que el visita Las herramientas de los estudiantes y las explicaciones dadas, elaborar una exposición de uno de los temas más relevantes de las lecturas y socializarlo en clase ante los compañeros

Procesos

DESARROLLO FASE COGNITIVA

• Estructura
  • Entender los diferentes tipos de estructuras de información que debe tener una página Web (orden, jerarquías y navegación)
• Diseño de página
  • Entender la importancia de los elementos presentes en una página (tamaño, esquemas, estilos, colores y menús)
• Tipografía
  • Entender la importancia de la legibilidad, el uso de los colores y el tamaño de fuentes que componen una página Web
• Gráficos
  • Tener en cuenta el tamaño en “bytes” de las imágenes que hacen parte de una página Web
  • Comprender la importancia de la composición de una página Web con imágenes, para evitar la saturación visual
  • Comprender la importancia de la configuración de los diferentes formatos gráficos que pueden tener  las imágenes en una página Web (imagen en formato jpg con 80% de resolución, imagen en formato gif con 64 colores en lugar de 256 colores)

ESTRUCTURA (Lectura)

Como empezar una web: ¿Cómo se pueden estructurar las páginas?

Si sólo se tiene una vaga idea de cómo se relacionan las distintas secciones de una Web, si no se tiene sentido claro de la organización y la narrativa, los usuarios lo percibirán inmediatamente.

Una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio. Planifique la estructura antes de empezar.

Incluso para los sitios más pequeños, es conveniente hacer algún esquema sencillo, para la mayoría de los casos una hoja de papel y un lapicero bastará, pero si el emplazamiento es grande, es recomendable usar algún tipo de programa que permita manejar estructuras de tipo grafo.

La estructura depende del contenido

No es lo mismo crear una estructura de navegación para un sitio que desea publicar información al estilo de un libro formado por capítulos que se adapta bastante bien tanto a una estructura lineal como a una jerárquica. Mientras que un sitio donde se expone un tutorial o un tour es más apropiada una estructura de tipo lineal. Depende del tipo de sitio web.

Tipos de estructuras

• Secuencial o lineal: Es la forma más simple de organizar la información, que presentando una narrativa lineal. La información que fluye de forma natural como cómo una narrativa lineal o con un orden lógico es perfecta para este tipo de tratamiento.

 

La estructura secuencial puede ser cronológica, una serie de temas ordenados lógicamente de lo más general a lo más específico o incluso ordenado alfabéticamente.

Sin embargo, este tipo de organización sólo suele funcionar para sitios pequeños; a medida que la narrativa se torna más compleja, necesita una mayor estructuración para seguir siendo comprensible.

• Parrilla: Muchos manuales de procedimientos, listados de cursos universitarios, descripciones médicas de casos… se adaptan perfectamente a este tipo de estructura.

 

Las parrillas son una buena forma de asociar variables, en una serie de categorías standard como "eventos", "tecnología", "cultura"…

Para tener éxito con este tipo de estructura es necesario que las unidades individuales de una parrilla, compartan una estructura de temas y subtemas absolutamente uniforme.

Sin embargo las parrillas pueden ser difíciles de comprender si el usuario no consigue establecer la relación entre las diferentes categorías de información, y quizá más apropiadas para audiencias experimentadas que ya poseen un conocimiento básico del tema y de su organización.

En estas estructuras, resultan muy útiles los mapas gráficos del "Site".

• Estructura jerárquica: es quizá la mejor manera de organizar información compleja. Este tipo de estructura está especialmente bien adaptada para los Web "Sites", que siempre parten de una única página de inicio.

 

La mayor parte de los usuarios están familiarizados con los diagramas jerárquicos, y les resulta fácil de comprender cómo esquema de navegación.

Además, la organización jerárquica impone disciplina a la hora de analizar el contenido, ya que las jerarquías sólo funcionan bien cuando el material está perfectamente actualizado.

Dado que las estructuras jerárquicas son tan habituales en las oficinas e instituciones resulta fácil para los usuarios construirse modelos mentales.

• Estructura en Web: Estas estructuras imponen pocas restricciones en el patrón de la información.

 

En este caso el objetivo es imitar el pensamiento asociativo y la libre circulación de ideas; los usuarios siguen sus intereses en una secuencia única para cada usuario del Sitio.

Este tipo de estructura se utiliza en sitios con una estructura de enlaces externos e internos muy densa. La meta es explotar al máximo el poder del hipertexto en la Web, pero este tipo de estructuras confunden al usuario fácilmente, por lo que, irónicamente, resultan muchas veces poco apropiadas para WebSites.

Funcionan mejor en Webs pequeñas, en los que predominan los listados de enlaces y que están dirigidas a usuarios muy instruidos o a usuarios experimentados buscando profundizar en su educación, pero no para lograr un entendimiento básico de un tema o producto.

• Estructura mixta: Los estudios de "funcionalidad" indican que los usuarios recuerdan mejor la información con este tipo de estructura (jerárquica con enlaces cruzados del tipo estructura Web), puesto que la estructura jerárquica resulta demasiado restrictiva y la no lineal ofrece demasiada información y lleva a la confusión.

 

Jacob Nielsen nos da las dos reglas más importantes sobre la estructura de un sitio web:

1. Puede parecer obvia pero no lo es tanto: tener una estructura y conseguir que refleje el contenido de sitio y sus relaciones.
2. La estructura no debe reflejar en ningún caso la organización de su compañía. Al usuario no le interesa su organización sino su Web. La estructura debe deperminarse por las tareas, incluso si eso significa que varios departamentos tienen que colaborar para realizar un sólo documento.

 

DISEÑO DE PAGINA

“Taller de Diseño Web” se lleva a cabo en cuatro fases:

1. Aprestamiento.

 La fase inicial de la segunda etapa consiste en localizar y comprometer empresas o microempresas de la región a las cuales se les elaborará el sitio Web promocional. El número de empresas (clientes) debe ser igual al número de equipos que participen en la Electiva. Para impulsar este proyecto entre los posibles clientes, resulta muy útil contar con una carpeta avalada por la institución educativa, que contenga como mínimo: cuál es el proyecto, su alcance y un cronograma detallado de actividades.

2. Planeación del sitio Web.

En esta fase, el cliente (empresa) suministra la información que considera pertinente y el equipo de estudiantes a los que el proyecto de esta se les asignó la evalúa y verifica. Utilizando esta información el equipo debe planear la estructura del sitio, elaborar una propuesta inicial y discutirla con el cliente. Para esto, se debe preparar un organigrama de la construcción del sitio y un cronograma de actividades que guíe la realización del proyecto. Luego, se hace un primer desarrollo basado en el esquema aprobado por el cliente. En esta etapa es necesario que el equipo recopile todo el material que va a utilizar (textos, gráficos, fotos, etc).

3. Diseño y prueba.

En esta tercera fase, el equipo se encarga de desarrollar una presentación visual más elaborada del esquema aceptado en la fase anterior, en la que se defina: los colores a utilizar, el esquema de las páginas, las secciones en las que se va a organizar o a publicar la información y las imágenes que van a acompañar cada sección. La definición del esquema de página incluye: la posición del cabezote, de los menús, de las barras de navegación y, la escogencia del logotipo y de los íconos que se van a utilizar. En caso de que exista, se debe respetar la imagen corporativa de la empresa.

4.Producción y despliegue.

Aprobada la anterior, se inicia la cuarta fase en la que se procede a codificar las páginas; a optimizar gráficos, fotos y logotipos y, a definir tamaño, colores, fondos, etc. Por último, se ensamblan todas las piezas para que el sitio Web quede listo para su lanzamiento.

Para terminar, se propone al cliente una solución para “alojar” el sitio que se adecue a los requisitos de este y a sus posibilidades económicas.

TIPOGRAFÍA

Empezaremos hablando básicamente sobre la tipografía en internet, la cual tiene sus propias reglas, aunque como en el diseño gráfico la regla principal es que todo sea legible, es algo así como la regla de oro de las tipografías (si no se puede leer no mola).

A la hora de trabajar con nuestros textos podemos separar en dos grupos, títulos y cuerpos de texto o mensajes.

Para los primeros necesitaremos letras generalmente gruesas y detalladas. Es muy recomendable que las tipografías escogidas para los títulos concuerden perfectamente con el diseño de la página y también tendremos que tratar su color con mucho cuidado, ya que el color en los títulos expresa mucho, pero esto lo veremos más adelante

 

Para los segundos deberemos usar tipografías "Lisas" (Arial, Verdana), nunca con "Serifa" (Times). Aquí tenéis una imagen de ejemplo:

 

Las tipografías Lisas son mucho más legibles en un monitor porque al ser más rectas, son más factibles de dibujar por el monitor, en cambio las tipografías con Serifa tienen muchos más detalles y a tamaños pequeños se hace poco legible en una pantalla, que no en papel.

También debido a la tecnología Flash principalmente (si es que somos raritos) surgieron las Pixel Fonts, unas tipografías especialmente diseñadas para que éstas se viesen bien a un determinado punto, ya que "caían" justo en el píxel del monitor. Estas fuentes han tenido mucho éxito y son muy recomendables usarlas en Flash, ya que hacen los textos muy legibles y no se ven borrosas las letras.

 

TEORÍA DEL COLOR

Aunque parezca mentira, los colores de los objetos nos transmiten emociones muy fuertes, pese a que, generalmente no nos demos cuenta de ello. Los hospitales carecen de color rojo, pues éste es asociado a la sangre, y en las oficinas suele predominar el blanco que denota orden y pulcritud (en las BOFH Room predomina el color verde placa base).

¿Acaso os imagináis trabajando en unas oficinas de color rojo? Sería demasiado estresante, pues es un color de un fuerte impacto visual y que tiene mucha fuerza y energía. Esto son claros ejemplos de cómo en la actualidad estamos usando los colores para nuestro beneficio, para trabajar mejor, para estar más tranquilos, etc.

Algunas de las cosas más importantes que debemos saber del color son:

• El color y su expansión
• Armonía y contraste
• Significado del color

El color y su expansión

Probablemente alguna vez os hayáis preguntado por qué la mayoría de las páginas web que hay en internet tienen un fondo claro y no negro. De hecho, las páginas que tienen un fondo negro suelen quedar peor. Esto se debe al carácter expansivo de los colores, no se verá igual un texto sobre fondo negro que blanco:

 

El texto sobre fondo blanco es más legible y por lo tanto el lector debe forzar menos la vista, sintiéndose agradecido. Esto también lo podemos ver en colores claros y oscuros, no es algo que suceda únicamente en blanco y negro.

 

En estos dos dibujos parece que el de la izquierda tienda a expandirse y a hacerse más grande, todo lo contrario que en el de la derecha. Eso es debido a que el color oscuro comprime la figura del medio. Estas técnicas las usaremos cuando queramos que una parte de nuestra web quede cerrada o abierta.

ARMONÍA Y CONTRASTE

Armonía: Crear una gama de colores para nuestra web que esté compuesta por colores de la misma gama o tono. Por ejemplo, CLab es una web con colores armónicos, ya que usa el mismo color y diferentes tonalidades del mismo.

Contraste: Combinar diferentes colores para crear una gama como, por ejemplo, claros y oscuros, cálidos y fríos, etc.

 

Es obvio que en esta imagen cada casilla nos está expresando una idea diferente.

Significado del color

Esta es una de las cosas que más me apasionan del color, su significado. ¿Pero cómo un color puede significar algo? Pues sí, aunque estos significados varían un poco según las culturas, ya que por tradición es posible que el amarillo signifique mala suerte en algunas partes y en otros no. Ésta es una recopilación de diferentes significados extraídos de algunas páginas web.

Blanco
Se halla en el extremo de la gama de los grises.. Es un color latente por su capacidad de potenciar los otros colores vecinos. El blanco puede expresar paz, soleado, feliz, activo, puro e inocente. El blanco es el fondo universal de la comunicación gráfica.

Negro  
Al igual que el blanco, también se encuentra en el extremo de la gama de grises. Es el símbolo del silencio, del misterio y, en ocasiones, puede significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando es brillante.
Gris
Simboliza la indecisión y la ausencia de energía, expresa duda y melancolía. Los colores metálicos tienen una imagen lustrosa, adoptando las cualidades de los metales que representan. Dan impresión de frialdad metálica, pero también dan sensación de brillantez, lujo, elegancia, por su asociación con los metales preciosos.
Amarillo
Es el color más luminoso, más cálido, ardiente y expansivo. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos. No es recomendable usarlo como color principal de nuestra página, pues tiene demasiada fuerza y tiende a cansar al visitante.
Naranja
Posee fuerza activa, radiante y expansiva. Tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética

Rojo  
Significa la vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Está ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y agresivo.  El rojo es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo.

Azul
Es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Expresa armonía, amistad, fidelidad, serenidad, sosiego... y posee la virtud de crear la ilusión óptica de retroceder. Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío. Cuanto más se oscurece más atrae hacia el infinito.

Violeta
Es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría representar también la introversión. En sus tonos más claros se vuelve un poco triste, en los más oscuros representa grandeza.

Verde
Es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Cuando algo reverdece suscita la esperanza de una vida renovada.

Marrón
Es un color masculino, severo, confortable. Es evocador del ambiente local otoñal y da la impresión de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos.

 ESPACIADO Y COMPOSICIÓN

Llegados a este punto yo suelo recomendar que visiten muchos websites de calidad, y se fijen cómo han montado la web, porqué han utilizado ese color ahí y no otro, cómo han espaciado sus textos, etc... pero aún así hay algunas cosas que suelen ser básicas y veremos aquí.

Deja que tu texto 'respire'

No se si es un término correcto decir que el texto 'respire', pero es la expresión que utilizo cuando quiero que mi web sea legible. En estas dos imágenes de aquí abajo podemos ver como una tiene el texto muy pegado a la imagen y su interlineado es muy bajo para el tamaño de letra escogido, haciéndolo confuso para la lectura. La otra imagen en cambio, se lee perfectamente.

   Este es un buen ejemplo de cómo hacer que nuestros textos no se vean compactados. También es importante saber que el espaciado entre líneas suele ser un 20% superior al tamaño de la letra, por ejemplo, para un tamaño de letra de 10 puntos pondremos 12 puntos de interlineado.

Colocando nuestros elementos

La posición de nuestros elementos en la pantalla es uno de los puntos más importantes a la hora de hacer nuestro diseño, pues no es lo mismo colocar una imagen arriba que abajo, con un texto al lado o sin el, que sea una imagen grande o pequeña y así infinidad de detalles que dotarán a nuestra página de personalidad.

Un buen ejemplo de cómo componer una web con imágenes y texto adecuadamente puede ser la página principal de Macromedia la cual usa eficientemente el espacio entre líneas, y posiciona las imágenes por tamaño y relevancia.

 

En esta captura podemos ver como Macromedia ha utilizado una gran imagen para mostrar un nuevo producto, y luego tiene pequeñas imágenes para embellecer y dotar de detalles las partes con más texto.

Es importante colocar pequeñas imágenes cerca del texto, las cuales tendrán dos funciones Primero que el usuario tenga una información visual sobre lo que va a leer, atrayendo la atención del visitante hacia donde queremos, y segundo, hacer más atractiva la página, pues, todo el mundo se echa para atrás (normalmente cerrando la página y maldiciendo varias veces) cuando ve una web que es sólo texto.

GRAFICOS

Presenta los formatos gráficos utilizados en las páginas web, el GIF, el JPG y PNG. Hace hincapié en los dos primeros, resumiendo sus características y enseñando a optimizar los ficheros.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

El componente gráfico de las páginas web tiene mucha importancia, es el que hace que estas sean vistosas y el que nos permite aplicar nuestra creatividad para hacer del diseño de sitios una tarea agradable. Es también una herramienta para acercar los sitios al mundo donde vivimos, si embargo, es también el causante de errores graves en las páginas y hacer de estas, en algunos casos, un martirio para el visitante.

Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas, aunque sea ligeramente, nos ayudará a crear sitios agradables y rápidos. No cometer errores en el uso de las imágenes es fundamental, aunque no seas un diseñador y las imágenes que utilices sean feas, utilízalas bien y así estarás haciendo más agradable la visita a tus páginas.

Tipos de archivos

En Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG, pensados especialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños se transmiten más rápidamente por la Red.

El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras que el formato JPG se usa para las fotografías. Los dos comprimen las imágenes para guardarlas. La forma de comprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otros propósitos.

Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG. Este formato no tiene tanta aceptación como el GIF o JPG por varias razones, entre las que destacan el desconocimiento del formato por parte de los desarrolladores, que las herramientas habituales para tratar gráficos (como por ejemplo Photoshop) generalmente no lo soportaban y que los navegadores antiguos también tienen problemas para visualizarlas. Sin embargo, el formato se comporta muy bien en cuanto a compresión y calidad del gráfico conseguido, por lo que resulta muy útil en infinidad de casos. Todos estos problemas han pasado y ya sólo Internet Explorer 6 tiene algunos fallos cuando trata con PNG, pero la aceptación actual es más que suficiente para incorporarlo a nuestras posibilidades reales de trabajo con formatos y optimización de archivos.

A continuación se puede ver una tabla comparativa de las principales características de los formatos gráficos para crear páginas web:

 

Formato GIF

Un logotipo es un ejemplo claro de imagen GIF

A parte de ser un archivo ideal para las imágenes que estén dibujadas tiene muchas otras características que son importantes y útiles.

Compresión: Es muy buena para dibujos, como ya hemos dicho. Incluso puede ser interesante si la imagen es muy pequeña, aunque sea una foto.

Parte de esta imagen es transparente

Transparencia: es una utilidad para definir ciertas partes del dibujo como transparentes. De este modo podemos colocar las imágenes sobre distintos fondos sin que se vea el cuadrado donde está inscrito el dibujo, viendose en cambio la silueta del dibujo en cuestión.
Para crear un gif transparente debemos utilizar un programa de diseño gráfico, con el podemos indicar qué colores del dibujo queremos que sean transparentes. Generalmente, definimos la transparencia cuando vamos a guardar el gráfico.
Colores: Con este formato gráfico podemos utilizar paletas, conjuntos, de 256 colores o menos. Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la imagen, por lo general, menos ocupará el archivo. En ocasiones, aunque utilicemos menos colores en un gráfico, este no pierde mucho en calidad, llegando a ser inapreciable a la vista.
En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros lo hacemos mientras creamos el gráfico.

Imagen tomada con distintas paletas de colores. Se puede apreciar como con pocos colores se ve bien el gráfico y como pierde un poco a medida que le restamos colores.

Formato JPG

Veamos ahora cuales son las características fundamentales del formato JPG:

Compresión: Tal como hemos dicho anteriormente, su algoritmo de compresión hace ideal este formato para guardar fotografías. Además, con JPG podemos definir la calidad de la imagen, con calidad baja el fichero ocupará menos, y viceversa.

Intento de transparencia en JPG. Pulsar para ampliar

Transparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamos colocar una imagen con un área que parezca transparente procederemos así: con nuestro programa de diseño gráfico haremos que el fondo de la imagen sea el mismo que el de la página donde queremos colocarla. En muchos casos los fondos de la imagen y la página parecerán el mismo.
Colores: JPG trabaja siempre con 16 millones de colores, ideal para fotografías.

Optimizar ficheros

Para que las imágenes ocupen lo menos posible y se transfieran rápidamente por la Red debemos aprender a optimizar los ficheros gráficos. Para ello debemos hacer lo siguiente:

Para los archivos GIF: Reduciremos el número de colores de nuestra paleta. Esto se hace con nuestro editor gráfico, en muchos casos podremos hacerlo al guardar el archivo.

 

hop es una herramienta excelente para optimizar ficheros. Viendo varias copias podemos elegir la más adecuada.

Es imprescindible disponer para optimizar la imagen de una herramienta buena que nos permita configurar estas características de la imagen con libertad y fácilmente. Photoshop 5.5 o 6 es un programa bastante recomendable, pues incorpora una opción que se llama "Guardar para el Web" con la que podemos definir los colores del gif, calidad del JPG y otras opciones en varias muestras a la vez. Así con todas las opciones configurables, viendo los resultados a la vez que el tamaño del archivo podemos optimizar la imagen de una manera precisa con los resultados que deseamos.

También existen en el mercado otros programas que nos permiten optimizar estas imágenes de manera sorprendente. Una vez hemos creado la imagen la pasamos por estos programas y nos comprimen aun más el archivo, haciéndolo rápido de transferir y, por tanto, más optimo para Internet. Al ser estas utilidades tan especializadas los resultados suelen ser mejores que con los programas de edición gráfica.

Ejemplos de optimizadores gráficos:
- WebGraphics Optimizer
- ProJPG, GIF Imantion
Y con versiones Online:
- GIF Wizard

Recursos

Evaluación

FASE AFECTIVA DEL ESTUDIANTE 

1. Bajar la información de la plataforma sobre las opciones que ofrece la usabilidad para organizar información en un sitio web.
2. Seleccionar el tema sobre el cual debe recolectar información y diseñar el sitio web  para almacenarla.
3. Determinar por qué es más apropiado utilizar un sitio web para dar a conocer el producto de su trabajo.

FASE COGNITIVA DEL ESTUDIANTE

1. Crear un sitio web que contenga tablas, y formularios para organizar la información sobre el tema seleccionado.
2. Establecer las relaciones existentes entre la usabilidad del sitio web y los sitios web que el visita

FASE EXPRESIVA DEL ESTUDIANTE

1. Las herramientas de los estudiantes y las explicaciones dadas, elaborar una exposición de uno de los temas más relevantes de las lecturas y socializarlo en clase ante los compañeros

Notas

.