M2 DiseñO Web

  • 1,332 views
Uploaded on

Segundo Módulo del curso latinoamericano a distancia "Gestión de Sitios Web para Organizaciones Sociales". Organizado por Sinergianet: sinergianet.com.uy/inicio/

Segundo Módulo del curso latinoamericano a distancia "Gestión de Sitios Web para Organizaciones Sociales". Organizado por Sinergianet: sinergianet.com.uy/inicio/

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,332
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
43
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Curso-Taller Latinoamericano a Distancia MÓDLO 2 Diseño Web Docentes: Daniel Espíndola – Mariana Fossatti
  • 2. Planificación
    • Todo empieza con lápiz y papel
    • Lo primero es escribir el proyecto y hacer un esquma previo de nuestra futura web
  • 3. Como en toda tarea es importante la conformación de un equipo de trabajo, el mínimo estaría conformado por: Coordinador general y de contenidos Diseñador gráfico Programador El equipo de trabajo
  • 4. ¿Por dónde empezar? Definamos...
    • Objetivos del sitio
      • En relación a los objetivos, misión y visión de la organización: ¿para qué la web?
    • Público destinatario
      • Perfil de los usuarios que visitarán la página: ¿qué tipo de contenidos buscan, cómo podemos satisfacer sus necesidades?
  • 5. Diseño centrado en el usuario: un concepto fundamental
    • Es común el error de realizar el sitio centrado en lo tecnológico o desde lo estético
    • Sin embargo, el mejor sitio no es el mas lindo, sino el mas usado
    • La consigna es que el usuario se sienta cómodo en la navegación, en la búsqueda de la información, en la interacción con un entorno agradable y una programación dinámica
    • Nuestro usuario objetivo, debe quedar satisfecho con lo que ofrece nuestra web, ya sea información, compra/venta, comunicación, interacción, etc.
  • 6. Tener en cuenta...
    • Los distintos tipos de usuarios:
      • Público objetivo y visitantes ocasionales
      • Nivel de manejo de Internet
      • Idiomas
      • Discapacidades
    • Las variadas condiciones de acceso a la Web:
      • Conexiones
      • Equipos
      • Navegadores
  • 7. Un buen diseño es:
    • Comprensible, intuitivo y amigable
    • Eficaz para destacar los contenidos
    • Útil para las necesidades del usuario
    • Pensemos en el éxito de un sitio como Google frente a la sencillez y el minimalismo de su diseño.
  • 8. Usabilidad
    • Determina una experiencia satisfactoria en la interacción del usuario con el sitio
    • Un sitio usable es fácil de aprender a usar, el usuario “no se pierde”, encuentra aquello que está buscando rápidamente y accede sin dificultad al contenido
    • Un sitio poco usable es difícil de acceder y navegar, presenta errores y puede llegar a frustrar al usuario
  • 9. Aspectos de la usabilidad en el diseño de una web
    • La usabilidad es un concepto integral. Depende de muchos elementos que componen el “todo” que es el sitio web
      • Arquitectura de información
      • Diseño estético
      • Estándares
      • Accesibilidad
      • Encontrabilidad
  • 10. Arquitectura de información
    • Analizar y definir cómo va a estar estructurada la información en el sitio
    • Hacer un mapa de contenidos (en papel o digital) para definir las secciones del sitio , su organización en jerarquías y sus interacciones a través de hipervículos, botones y menúes
      • Es recomendable analizar sitios similares como fuente de comparación e inspiración
    • Fundamental para la USABILIDAD: es el momento de pensar en la futura experiencia del usuario: ¿a cuántos clicks está lo que busca?
  • 11. A modo de ejemplo: algunas secciones habituales
    • Inicio o Home
    • Información institucional
    • Novedades
    • Eventos
    • Áreas para usuarios registrados
    • Buscador interno
  • 12. Diseño estético
    • Define el aspecto visual de la web: colores, imagen corporativa, estilo de fuente, títulos, encabezados, botones, menús, disposición de las imágenes, logotipo, elementos multimedia, etc.‏
    • Debe facilitar la transmisión de información
    • Priorizar los contenidos y la usabilidad , antes que la presentación estética
  • 13. En diseño web “menos es más”
    • No recargar la página con animaciones innecesarias
    • Adecuado manejo de imágenes (pequeñas pero nítidas y de bajo “peso”)‏
    • Claridad en los vínculos (subrayados, cambio de color al pasar con el ratón sobre ellos)‏
    • Menú de navegación intuitivo
    • Adecuado ordenamiento de la información (de los mas importante a lo menos)‏
    • Evitar espacios en blanco
    • Datos de contacto visibles
    • Cabezales y pie de páginas similares en todas las secciones, boletines y comunicaciones (genera identidad) ‏
  • 14. Separación entre presentación y contenido
    • Actualmente lo habitual es crear sitios con Hojas de Estilo en Cascada (CSS por su sigla en inglés) que permiten manejar la presentación de manera independiente al contenido
    • Se define una plantilla o “template” que será la misma para cada una de las páginas que componen el sitio
    • Todas las páginas del sitio tendrán un mismo aspecto, aún cuando varíe su contenido
    • Esto separa la tarea de gestión de contenidos de la de diseño: ya no es necesario diagramar la página cada vez que se quiere modificar el contenido
  • 15. Cumplimiento de estándares
    • Los estándares para el diseño web ayudan a resolver problemas habituales de usabilidad:
      • Usuarios con diferentes navegadores ven la información de forma diversa o no pueden acceder a ella
      • La información queda obsoleta e inaccesible a causa del avance de los formatos de presentación
    • La W3C es un organismo que creó normas para que la información no presente errores en el lenguaje (código) en que está escrita una web, y que cualquier navegador pueda leer ese lenguaje de la misma manera
    • Una web que respeta estándares será más útil, accesible y visitada
  • 16. Accesibilidad
    • Implica acceso universal a la Web , independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios
    • Consiste en conseguir que la información se presente independientemente de los equipos y aplicaciones que se empleen para navegar
    • La W3C desarrolló Pautas de Accesibilidad al Contenido en la Web (WCAG) que proponen soluciones de diseño y una serie de puntos de verificación que ayudan a detectar posibles errores
  • 17.  
  • 18. Pocisionamiento: visibilidad y encontrabilidad
    • Un sitio corre el riesgo de "no existir" si sus contenidos no han sido indexados por los principales buscadores
    • Es importante que nuestro sitio esté bien posicionado dentro de su área temática en relación a otros
    • Una web bien posicionada figurará entre los primeros resultados de búsqueda para las palabras claves relevantes que la describen y será así más “encontrable” y por lo tanto, visible
  • 19. Posicionamiento técnico
    • Consiste en tomar medidas para que el sitio sea indexado por los buscadores
    • Los buscadores “visitan” los sitios con programas llamados “arañas” que recorren la web buscando información
    • A esta información le aplican un algoritmo que calcula la posición relativa de la página en las búsquedas
  • 20. Consejos de posicionamiento técnico
    • Buenos contenidos , relevantes y con palabras clave descriptivas de la información que queremos difundir
    • Más texto que imágenes, animaciones y código de programación (el texto es más fácil de indexar)‏
    • “ Dar de alta” el sitio manualmente en algunos de los más importantes buscadores de Internet (Google, Yahoo!, Windows Live y Ask)‏
    • Procurar que la web sea enlazada en otros sitios para aumentar su relevancia en los buscadores
    • Incluir el sitio en directorios temáticos, nacionales y regionales
    • Hacer seguimiento de las estadísticas del sitio (por ejemplo, con Google Analytics)‏
  • 21. Posicionamiento social
    • Consiste en un conjunto integral de acciones orientadas a desarrollar una red social relevante alrededor de nuestros contenidos
    • Para organizaciones pequeñas con objetivos y público específicos es más efectivo y relevante
  • 22. Consejos de posicionamiento social
    • Crear contenido original y de calidad
    • Publicar con frecuencia
    • Tener presencia en las principales redes sociales generalistas, como Facebook y Twitter
    • Integrar redes sociales específicas
    • Facilitar la suscripción y distribución de contenidos (e-boletines, RSS)‏
    • Enviar invitaciones personales y/o masivas a nuestra base de datos contactos para suscribirse al sitio
  • 23. Para profundizar...
    • Video: Consejos para lanzar hoy un buen sitio web, 4:41 minutos http://www.youtube.com/watch?v=uAjXZEkI3jA
    • Guía para el Desarrollo de Sitios Web – Gobierno de Chile http://guiaweb.gob.cl
    • Guías breves sobre estándares de la W3C http://www.w3c.es/divulgacion/guiasbreves/
    • Consejos para principiantes de SEO (sobre posicionamiento técnico ( http://www.maestrosdelweb.com/editorial/seointro/ )
    • Secrets of the top Marketing and Social Media blogs (sobre posicionamiento social) http://moblogsmoproblems.blogspot.com/2009/04/secrets-of-top-marketing-and-social.html