• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
M2   DiseñO Web
 

M2 DiseñO Web

on

  • 2,195 views

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/

Statistics

Views

Total Views
2,195
Views on SlideShare
2,183
Embed Views
12

Actions

Likes
1
Downloads
41
Comments
0

2 Embeds 12

http://www.slideshare.net 9
http://mfossatti.blogspot.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    M2   DiseñO Web M2 DiseñO Web Presentation Transcript

    • Curso-Taller Latinoamericano a Distancia MÓDLO 2 Diseño Web Docentes: Daniel Espíndola – Mariana Fossatti
    • Planificación
      • Todo empieza con lápiz y papel
      • Lo primero es escribir el proyecto y hacer un esquma previo de nuestra futura web
    • 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
    • ¿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?
    • 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.
    • 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
    • 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.
    • 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
    • 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
    • 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?
    • A modo de ejemplo: algunas secciones habituales
      • Inicio o Home
      • Información institucional
      • Novedades
      • Eventos
      • Áreas para usuarios registrados
      • Buscador interno
    • 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
    • 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) ‏
    • 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
    • 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
    • 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
    •  
    • 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
    • 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
    • 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)‏
    • 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
    • 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
    • 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