Diseño Part 4

Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 5

Diseño web

Cuaderno 4: Claves sobre diseño web para nuestro sitio

Cómo organizar la estructura de un sitio web

Todo diseño web depende tanto de su formato estético como de la calidad de los
contenidos que ofrece. Un sitio cautivante desde la imagen pero obsoleto en su
propuesta conceptual, rápidamente será abandonado por los usuarios. Por ello,
insistimos en que la estructura de un sitio web debe ser cuidadosamente
planificada.

Así como un libro posee un índice que orienta a sus lectores sobre
los contenidos que incluye, un sitio web también debe garantizar a
sus visitantes la usabilidad.

Una forma práctica y sencilla de organizar la estructura de un sitio web es


mediante esquemas que dispongan los contenidos en función de su relevancia
conceptual. Veamos algunos ejemplos:

Fascículo 2 Cuaderno 4: Claves sobre diseño web para nuestro sitio http://competenciastic.educ.a
r 1
El formato en lista es estructurado y lineal. Para
llegar a la última página deben recorrerse todas
las anteriores.

Como ventaja , garantiza un recorrido obligado


por contenidos; la desventaja es que puede
resultar agotador para el usuario, quien se ve
obligado a un recorrido forzoso por determinados
temas que quizá no le interesen.

El formato mixto combina los principios de lista


y árbol. Aquí las páginas se organizan en niveles
(como en el formato de árbol), y permite que
estos se conecten entre sí (en forma de lista).

La ventajade este formato es que potencia la


navegabilidad del sitio.

La página de inicio

La primera visita del usuario a un sitio web es la oportunidad para generar una
excelente impresión. Una buena página de inicio garantiza que el usuario
permanezca interesado en la navegación y profundice su exploración del sitio.

Para el diseño de las páginas de inicio es recomendable:

Explicitar el público al que apunta el sitio.

Mostrar los contenidos generales más importantes que incluye.

Incorporar un banner1 donde el usuario pueda ver las últimas novedades y


actualizaciones del sitio.

Introducir un enlace en la cabecera de la página para que el usuario pueda


retornar a la página de inicio rápidamente.

Diseñar un menú de navegación que oriente al visitante en su recorrido por


el sitio web.

El menú de navegación

Toda página web debe poseer un menú de navegación que ofrezca una guía
para su recorrido. Este menú debe ser claro, de modo que el usuario sepa qué
buscar y dónde hacerlo.

1 Ver definición de banner en el Glosario.

Fascículo 2 Cuaderno 4: Claves sobre diseño web para nuestro sitio http://competenciastic.educ.a
r 1
Veamos un ejemplo:

En este caso vemos que existen cuatro grandes categorías que organizan los
contenidos: Recursos educativos, Noticias y agenda, Capacitación, y
Debates. Cuando el usuario elige alguna de esas opciones haciendo clic en el
botón correspondiente, tiene acceso a la información de esa sección.

Un usuario interesado en la temática o que sabe lo que necesita rápidamente


puede identificar el sector del sitio web que le brindará la información requerida.

Para avanzados…
Aplicando CSS2 o JavaScript3 se pueden crear menús más
sensibles e interactivos, de orientación horizontal o vertical.

Recomendaciones para redactar y organizar contenidos

A la hora de elaborar los componentes de la web, es recomendable seguir las


pistas que sugieren los programadores, diseñadores y desarrolladores de
contenidos:

Redactar páginas fáciles de leer y visitar

Las competencias cognitivas que utilizan los usuarios de internet son diferentes
de las de un lector de textos en formato papel. Habitualmente, el navegante
escanea con sus ojos la página que visita y lo hace de modo superficial,
realizando una lectura transversal del texto y buscando palabras clave. Es
conveniente incluir oraciones breves, titulares concisos y palabras resaltadas que
puedan facilitar este procedimiento de búsqueda al usuario.

Organizar la escritura en formato de pirámide invertida

2 Ver definición de CSS en el Glosario.


3 Ver definición de JavaScript el en Glosario.
Esta estrategia consiste en presentar primero las conclusiones generales del
tema trabajado, para luego avanzar en el desarrollo más específico del
contenido. Esto permite al usuario anticipar la estructura del material y decidir
rápidamente si es de su interés o no.

Destacar la simpleza

Aquí van una serie de recursos muy útiles para avanzar en la escritura de un sitio
web: utilizar oraciones cortas, evitar el exceso de adjetivos, controlar el uso de

Fascículo 2 Cuaderno 4: Claves sobre diseño web para nuestro sitio http://competenciastic.educ.a
r 1
metáforas engorrosas de explicar, aplicar un equilibro de contraste entre fondo y
letra que facilite la lectura.

Paginar los documentos extensos

Si un material es demasiado largo, puede distribuirse en distintas páginas y


permitir al usuario desplazarse a través de ellas. Este recurso es el que aplican
los sitios de buscadores (como Yahoo o Google), dada la gran cantidad de
información que albergan sobre un mismo tema. Se los visualiza de esta forma:
Página 1 < Atrás | 1 2 3 4 | Adelante >

Utilizar imágenes

Las imágenes pueden resultar muy útiles para ilustrar ideas, conceptos y
aspectos del tema que se trate.

Incluir gráficos y mapas

Los gráficos permiten visualizar procesos, concentrando mucha información en


un esquema pequeño. Los mapas, facilitan la referencia de los contenidos en
función del sentido territorial de éstos.

Nuestro sitio en los buscadores de la Web

Los buscadores son uno de los recursos más utilizados de internet. Existen
buscadores de empleo, de inmuebles, de personas, de imágenes, etc. Quienes
más saben sobre este tema recomiendan que en los encabezados, títulos y
descripciones de cada página de un sitio web se utilicen frases sencillas y
descriptivas; ni metafóricas, ni de fantasía. Esto permite que los motores de
búsqueda rápidamente referencien al usuario nuestra página web.

Los viejos buscadores consistían en directorios de páginas web, a los que


cada dueño o creador de un sitio debía suscribirse, señalando las palabras clave
por las que debía ser encontrado. En la actualidad, los buscadores son
índices automáticos de páginas web que se construyen de una forma
particular. A partir de la visita de arañas ó robots, se elabora un listado con la
información completa de cada página de un sitio. Ese listado se traduce en un
índice de las palabras que aplica el sitio, que se ordenan jerárquicamente por
orden de relevancia y generalidad.

El sistema también es capaz de relevar si una página es buena o no, de acuerdo


con las recomendaciones que sus propios usuarios realizan. En función de ello la
pondera dentro del listado del buscador. Finalmente, el buscador muestra al
usuario los resultados de su búsqueda siguiendo un algoritmo de ordenación que
considera dos componentes: la importancia de la página web y la relevancia
del término que se introdujo como criterio de búsqueda.

Fascículo 2 Cuaderno 4: Claves sobre diseño web para nuestro sitio http://competenciastic.educ.a
r 1
¿Qué son las arañas o robots?
La palabra web viene del inglés y se traduce como tela de
araña, por ello, ¡qué mejor que una araña para deambular por la
Web! Precisamente, los programas diseñados para recorrer la
Web rastreando los enlaces entre páginas se denominan en inglés
spider, que significa araña.

Glosario

Banner: es una estrategia de comunicación y publicidad que se utiliza en las


páginas web. Consiste en una pieza diseñada para llamar la atención del usuario
e invitarlo a hacer clic sobre ella. Generalmente se trata de imágenes (JPG o GIF)
o animaciones programadas con diversos recursos (Java, Flash, Adobe
Shockwave), que comunican mensajes sencillos y contundentes.

CSS: esta sigla responde al inglés Cascading Style Sheets, que significa hojas de
estilo en cascada. El CSS es un lenguaje que se utiliza para separar la estructura
de un documento, de su presentación.

JavaScript: es un lenguaje de programación del lado del cliente, dado que no se


ejecuta en el servidor, sino que es el propio navegador del usuario el que lo
procesa.

Fuentes

http://arigara.wikispaces.com/

http://www.desarrolloweb.com/

http://www.gnu.org/

http://www.lawebera.es/

http://www.maestrosdelweb.com/temas/

http://www.manualdedreamweaver.com

http://www.tejedoresdelweb.com/w/Portada

www.wikipedia.org

Autora: Julieta Elizabeth Santos


Coordinación editorial:Mara Mobilia

Fascículo 2 Cuaderno 4: Claves sobre diseño web para nuestro sitio http://competenciastic.educ.a
r 1

También podría gustarte