Transcript Estructura y Diseño de Páginas Web Formador: Verónica Rincón Una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil.

Estructura y Diseño de Páginas Web
Formador: Verónica Rincón
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.
PLANIFICACION
• Tener una idea clara de cómo va a ser la estructura
de dichas páginas
• Hacer algún esquema sencillo
• Descripción de contenidos
• Finalidad de la página
• Que puede ofrecer la página que no tengan otras
• Hardware, software, documentación
• Público objetivo, nivel informático, intereses
ACCESIBILIDAD
• Acceso a la web y contenidos sin importar las
limitaciones (discapacidades, idioma,
conocimientos, experiencia etc…)
• Páginas legibles y comprensibles para todas las
personas en cualquier condición.
COMPONENTES DE ACCESSIBILIDAD
• Contenido: texto, imágenes y sonidos,
estructura.
• Navegadores web: reproductores multimedia
• Lectores de Pantalla: teclados alternativos,
conocimiento de los usuarios y experiencia en la
utilización web
• Desarrolladores: diseñadores, codificadores,
autores.
• Software
CONSEJOS DE USABILIDAD
•
•
•
•
Color de los textos debe contrastar con el fondo
Tamaño de fuente suficientemente grande
Contenido Legible
Evitar elementos invisibles como menús
desplegables, indicaciones ocultas etc…
• Evitar la sobrecarga de información
• Ofrecer al usuario contactos (formularios)
• Evitar imágenes grandes y pesadas
• Registro de usuario después de realizar la
navegación
• Formularios con información innecesaria
• Verificación de los enlaces
• Buena velocidad de carga de la página,
calculando el tiempo
TIPOS DE ESTRUCTURAS
JERARQUICA
Es la típica estructura de árbol, en el que la raíz
es la hoja de bienvenida, esta hoja se puede
también sustituir por la hoja de contenido, en la
que se exponen las diferentes secciones que
contendrá nuestro sitio.
LINEAL
• Estando en una página, podemos ir a la siguiente
página o a la anterior.
• Esta estructura es muy útil cuando queremos
que el lector siga un camino fijo y guiado,
además impedimos que se distraiga con enlaces
a otras páginas.
• Este tipo de estructura sería válido para
tutoriales de aprendizaje o tours de visita
guiada.
LINEAL CON JERARQUÍA
• Es una mezcla de la dos anteriores, los temas y
subtemas están organizados de una forma
jerárquica, pero uno puede leer todo el
contenido de una forma lineal si se desea.
• Esto permite tener el contenido organizado
jerárquicamente y simultáneamente poder
acceder a toda la información de una manera
lineal como si estuviésemos leyendo un libro.
RED
• es una organización en la que aparentemente no
hay ningún orden establecido, las páginas
pueden apuntarse unas a otras sin ningún orden
aparente.
• Este tipo de organización es la más libre, pero
también es la más peligrosa ya que si no se
informa al lector de en dónde se encuentra,
puede perderse o puede no encontrar lo que
anda buscando o no llegar a ver lo que le
queremos mostrar.
PAGINA DE INICIO
•
•
•
•
•
Principal puerta de entrada.
Especifica que se va a encontrar
Debe atrapar al mayor número de visitantes
Hacer contenidos visibles
Evita que los usuarios pierdan el tiempo
RECURSOS
•
•
•
•
Cantidad de personas
Ancho de banda: proyecto pequeño 1GB
Espacio de almacenamiento: 100 o 200 MB
Dinero?
TECNOLOGÍA
• Lenguaje a desarrollar: Páginas estáticas
(HTML), Páginas dinámicas (PHP o ASP)
• Soporte: formulario de contacto
• Registro de usuarios: bases de datos
• Analizar el sitio web: sistema de estadísticas
(statcounter)
NAVEGACION
• No cree páginas que sean un callejón sin salida
• Asegúrese de que proporciona un camino cómodo para
visitar todas las páginas Web de su sitio. Si no tiene en
cuenta esto perderá la mayoría de los lectores tras las
primeras páginas.
• Que el usuario sea capaz de moverse con soltura y
facilidad por las distintas páginas
• No hacer páginas de tamaño mayor a
una pantalla y media. De esta manera
evitará muchos problemas y facilitará la
lectura de las páginas. Las páginas de
tamaño una pantalla y media son
cómodas de leer y no saturan al lector
• Todos los documentos deberían
firmarse. De esta manera se identifica al
autor del documento
• Es muy importante fechar los documentos
• No cometa faltas ortográficas
• Una vez que ha seleccionado la tipografía para el
cuerpo del texto, considere la opción de usar
alguna otra fuente diferente.
• Muchas tipografías distintas en una misma
página provocaría una especie de confusión de
voces que no deseamos.
• Tipos de imágenes (gif, jpg, png)
MENÚ DE NAVEGACION
Listas de enlaces a las diferentes páginas o
secciones de la web
• Sitios web pequeños: enlazar a todas ellas desde
cada página.
• Web con mucha información: enlazar desde la
página principal a las secciones importantes y
desde cada una de ellas a sus contenidos
concretos.
PASOS PARA CREAR SITIOS
WEB
1. Levantamiento de información
•
•
•
•
•
•
Entrevista con el cliente
Necesidad del cliente
Que desea mostrar en la página
Expectativas
Uso
Público Objetivo
2. Definir el objetivo
• Determinar exactamente porque se quiere crear
la página y cual será su uso.
3. Determinar la estructura del sitio
Decidir que es lo que se incluirá en la página.
Hacer una lista de todas las cosas que se quieren
incluir.
Determinar como se integrarán en la página.
Preparar un mapa estructural del sitio web.
4. Decidir la apariencia de la página
• Logotipos
• Colores
• Realizar el diseño y diagrama de la ubicación de
los objetos de la página hasta que tenga algo que
le guste
Consejos para crear un sitio web
1-HAGALO TODO MAS SIMPLE.
El poder de un buen diseño esta en su simplicidad. Defina la esencia
2-HAGALO TODO MAS SIMPLE: PARTE 2!
Cuando su diseño final parece ser demasiado simple para la cantidad de tiempo
que le dedicó, Su trabajo ya esta listo.
2-SALGA DE SU MUNDO INTERIOR: COMUNIQUESE
Aprenda a comunicarse y colaborar con todos los miembros de las profesiones
web claves: programación, marketing, comerciales.
3-MENOS GLAMOUR Y MAS ORDEN
No se vea seducido por la forma en detrimento del contenido.
Un diseño web comprometido con el contenido contribuye en mayor medida
que u
4-DISEÑE PARA CONEXIONES VIA MODEM!!!!!!
La consideración estética mas importante a tener en cuenta es LA VELOCIDAD
DE TRANSMISION. Si su trabajo tarda demasiado en bajar, deje todo de lado y
vuelva al papel y al lápizno que hace prevalecer las formas.
Consejos:
5-TEXTOS. ABURRIDOS?
Cuando le toque diagramar textos, PRIMERO LEALOS.
Piense en como alguien, con menos interés que el suyo,
podría echarles un vistazo.
Otra cosa que es de gran ayuda es el ancho de los textos.
A menudo se ven por ahí webs con sus textos corriendo de punta a punta de la
pagina. Cómo se puede leer eso???
Mejor trate de que sus textos se mantengan en un ancho de 400 pixeles, o, al
menos, un tercio de su pantalla.
6-MAS COLOR Y GRAFICOS, MENOS IMAGENES Y
EFECTOS
El arte lineal, las formas vectoriales y el color plano se lleva de maravillas con
la web.
7-GRAFICOS Y TEXTOS: NO!
Nunca, jamás, inserte texto en un grafico. El texto es texto.
Los gráficos son gráficos. No los confunda.
Consejos
8-ATRAIGA
Con las fluctuaciones en las conexiones a la web, su carácter de "lenta" y
demás afectaciones, usted tiene 3 SEGUNDOS para convencer a un usuario de
no usar el botón ATRAS del navegador. TRES SEGUNDOS. Entonces, ponga
todos sus esfuerzos para que aquello que desea mostrar en una página web
aparezca inmediatamente, y de forma interesante.
9-ATRAIGA-SIMPLIFIQUE-VAYA A LO QUE IMPORTA
Tiene 30 segundos para cargar TODA una página en el navegador
del usuario. Quizás menos, 15 segs. SEA RAPIDO
10-ENFOQUESE EN LO QUE INTERESA
A los usuarios no les interesa en absoluto como funciona y se navega dentro
de su sitio web, solo llegaron allí por el contenido. DESELOS en forma rápida
y simple.
Consejos
11-INFORMESE-APRENDA
Manténgase al tanto de las nuevas tecnologías. La web jamás se queda quieta,
así que dedique su tiempo libre a aquello que es nuevo. Ya ha pasado el tiempo
en que el pez más grande se comía al más pequeño, ahora es el mas RAPIDO
el que se come al MAS LENTO.
12-DEFINA SU PROBLEMA
El diseño trata sobre la resolución de problemas, sobre enfrentar una cuestión
de comunicación con un objetivo. Defina cual es el suyo y ya tendrá la mitad
del problema resuelto.
13-APRENDASE LOS PRINCIPIOS DE NAVEGACION
a-La gente odia esperar
b-La gente odia hacer scroll
c-La gente odia leer
d-La gente prefiere hacer scroll antes que esperar
e-La gente prefiere esperar a leer.
c-La gente no es necesariamente racional o coherente, pero a veces si.
Consejos
14-BUSQUE INSPIRACION
Hable con gente que esta fuera de su campo de acción. Los arquitectos, por
ejemplo, pueden darle una perspectiva completamente nueva del diseño web,
quizá pueden cambiar su forma de imaginar como se conceptualiza un sitio,
transformando las paginas web en "espacios web"
15-ESCUCHE MUSICA
Si, cuando la música acompaña a su trabajo este se hace más placentero y
llevadero. Incluso llega a generar mas inspiración.