Taller de Gestión de Proyectos Web

1. Taller de Gestión de Proyectos Web

2. Día 1, Mañana

3. <ul><li>8 de noviembre de 2007 </li></ul><ul><li>Mas de 130 eventos </li></ul><ul><li>40 países </li></ul><ul><li>40.000 personas involucradas </li></ul><ul><li>3 eventos en México, 1 en MTY </li></ul>

4. Módulo 1: Gestión, contenido y diseño de proyectos Web <ul><li>Gestión del proyecto </li></ul><ul><ul><li>Preguntas básicas </li></ul></ul><ul><ul><li>Equipos de trabajo </li></ul></ul><ul><ul><li>Definiciones para el diseño </li></ul></ul><ul><li>Producción y manejo de contenidos </li></ul><ul><ul><li>Conceptos básicos </li></ul></ul><ul><ul><li>Diseño de contenidos </li></ul></ul><ul><ul><li>Arquitectura de información </li></ul></ul><ul><li>Diseño visual </li></ul><ul><ul><li>Principios de diseño y diagramación </li></ul></ul><ul><ul><li>Buenas prácticas y estándares </li></ul></ul>

5. Módulo 1 Gestión del Proyecto <ul><li>Conceptos básicos </li></ul><ul><li>Preguntas básicas </li></ul><ul><li>Equipo de trabajo </li></ul><ul><li>Definiciones para el diseño </li></ul>

6. ¿Qué es un proyecto? <ul><li>Es la suma de esfuerzos que en forma temporal se utilizan para generar un PRODUCTO O SERVICIO en particular o UNICO. </li></ul><ul><li>Tiene comienzo y final </li></ul><ul><li>Genera entregables UNICOS </li></ul><ul><li>Se desarrolla en etapas </li></ul>

7. Componentes de la Administración de Proyectos <ul><li>Habilidades clave </li></ul><ul><ul><li>Liderazgo, Comunicación, Negociación, Solución de problemas, Lograr objetivos </li></ul></ul><ul><li>Conocimientos </li></ul><ul><ul><li>Técnicos y Administrativos </li></ul></ul><ul><li>Herramientas </li></ul><ul><li>Técnicas </li></ul>

8. Elementos relacionados <ul><li>Tiempo </li></ul><ul><li>Calidad </li></ul><ul><li>Alcance </li></ul><ul><li>Entorno </li></ul><ul><li>Recursos </li></ul><ul><li>Costo </li></ul>BUSCAR LA SATISFACCIÓN DE TODOS LOS INTERESADOS

9. Ciclo de vida de un proyecto 1. Inicio* 2. Planeación* 3. Ejecución* 4. Control* 5. Cierre* NIVEL DE ACTIVIDAD INICIO TIEMPO *Etapas del proyecto TERMINO

10. Preguntas básicas <ul><li>¿Para qué necesita el sitio Web la institución? </li></ul><ul><li>¿Para qué necesita el sitio Web la comunidad? </li></ul><ul><li>¿Qué es lo que buscan las personas en mi institución? </li></ul><ul><li>¿Qué información de la institución es útil para la comunidad? </li></ul><ul><li>¿Qué imagen de la institución quiero proyectar en mis usuarios? </li></ul><ul><li>¿Qué servicios interactivos entregaré a través del Sitio Web? </li></ul><ul><li>¿Quiénes pueden ayudarme a realizar el proyecto? </li></ul>

11. Preguntas Básicas OBJETIVOS AUDIENCIA TECNOLOGIA

12. <ul><li>Información </li></ul><ul><li>Servicios </li></ul><ul><li>documentos </li></ul><ul><li>Autoridades </li></ul><ul><li>Gerencias </li></ul><ul><li>Divisiones </li></ul><ul><li>Stakeholder </li></ul><ul><li>Internos </li></ul><ul><li>Externos </li></ul><ul><li>Clientes </li></ul><ul><li>Ciudadanos </li></ul><ul><li>Publico </li></ul>

13. Para encontrar el camino <ul><li>Saber lo que quiero lograr </li></ul><ul><ul><li>Cuales son los objetivos del proyecto </li></ul></ul><ul><ul><li>Cómo se integra con la visión y misión institucional </li></ul></ul><ul><li>Saber a quién me dirijo </li></ul><ul><ul><li>Quiénes son, tipos de usuarios y perfiles. </li></ul></ul><ul><li>Saber qué puedo ofrecer </li></ul><ul><ul><li>Información, productos y servicios </li></ul></ul>

14. Definir objetivos <ul><li>Estudiar la misión y visión de la institución </li></ul><ul><ul><li>Comprender metas objetivas y priorizar </li></ul></ul><ul><li>Estudias planes y programas en ejecución </li></ul><ul><ul><li>Identificar prioridades y enfocar el proyecto </li></ul></ul><ul><li>Identificar productores de información </li></ul><ul><ul><li>Relacionar canales de comunicación interna y sus flujos </li></ul></ul>

15. Identificar necesidades y servicios <ul><li>Una institución de Gobierno no debe intentar resolver en un único proyecto todos las necesidades. </li></ul><ul><li>Servicios y trámites </li></ul><ul><li>Gestores de información </li></ul><ul><li>Procesos, analizar y crear diagramas </li></ul><ul><li>contenidos y proyectos “publicables” </li></ul>

16. Equipo de Trabajo <ul><li>Creación del Comité Web </li></ul><ul><ul><li>Integrar áreas gestión, informática y comunicaciones </li></ul></ul><ul><ul><li>Jefe operacional </li></ul></ul><ul><ul><li>Reuniones semanales </li></ul></ul><ul><ul><li>Política editorial </li></ul></ul><ul><ul><li>Documentación de compromisos </li></ul></ul>

17. Equipo de Trabajo <ul><li>Rol de la autoridad </li></ul><ul><ul><li>Vincularse con el proyecto </li></ul></ul><ul><ul><li>Avalar el proyecto y las decisiones </li></ul></ul><ul><ul><li>Apoyar al Comité Web </li></ul></ul><ul><li>¿Cómo seducir a la autoridad? </li></ul><ul><ul><li>Datos cuantitativos (ahorro) </li></ul></ul><ul><ul><li>Hitos mediáticos </li></ul></ul><ul><ul><li>Beneficios a mediano plazo </li></ul></ul>

18. Equipo de Trabajo <ul><li>Competencias internas </li></ul><ul><ul><li>Web Master </li></ul></ul><ul><ul><li>Encargados de implementar el sitio </li></ul></ul><ul><ul><li>Gestores de contenido </li></ul></ul>Capacitación

19. Definiciones para el diseño <ul><li>Definiciones de Audiencia </li></ul><ul><ul><li>Capacidad física </li></ul></ul><ul><ul><li>Capacidad técnica </li></ul></ul><ul><ul><li>Necesidades de información </li></ul></ul><ul><ul><li>Ubicación geográfica </li></ul></ul>

20. Casos de uso <ul><li>Extraído del diseño de software </li></ul><ul><li>Consiste en actores y casos de uso </li></ul><ul><li>Representan usuarios y sistemas </li></ul><ul><li>Comportamiento del sistema </li></ul>Caso de uso Actor/Usuario

21. Descripción del Caso de Uso - Pasajero solicita una reservación de un ticket a un vendedor - Vendedor consulta disponibilidad en la Aerolínea - Aerolínea informa que hay ticket disponibles y entrega detalles del vuelo - Vendedor entrega al pasajero la información de los detalles del vuelo - Pasajero solicita el asiento de su preferencia - Vendedor reserva el asiento - Vendedor confirma la reserva con el pasajero - Vendedor solicita el pago al pasajero y ofrece un método de pago - Pasajero paga al vendedor - Vendedor envía el pago a la Aerolínea - Aerolínea entrega la confirmación final del ticket al vendedor - Vendedor emite el ticket al pasajero <ul><li>Nombres: Clases o atributos </li></ul><ul><li>Verbos: operaciones posibles </li></ul>Pasajero Reservar Vuelo Cancelar reserva Aerolínea

22. ¿Para qué un diagrama? <ul><li>Formularios de contacto </li></ul><ul><li>Búsquedas y resultados de búsquedas </li></ul><ul><li>Sistemas de navegación </li></ul><ul><li>Modelos para trámites en línea </li></ul>

23. Primera Pausa 10:45 horas

24. Módulo 1 Producción y manejo de contenidos <ul><li>Diseño de contenidos </li></ul><ul><li>Arquitectura de información </li></ul><ul><li>CARD SORTING </li></ul>

25. Diseño de contenidos <ul><li>Considerar a todos los tipos de usuario </li></ul><ul><li>Priorizar y jerarquizar el contenido </li></ul><ul><li>Estudiar todos los bloques de información </li></ul><ul><li>Lenguaje ciudadano </li></ul>

26. Claves del Diseño de Información <ul><li>El tema central de la página debe ser CLARO </li></ul><ul><li>Decir siempre de quién es la página es básico </li></ul><ul><li>Nunca olvidar la naturaleza del medio (WEB) </li></ul><ul><li>Siempre indicar la fecha de publicación </li></ul>

28. http://www.lenguajeciudadano.gob.mx

29. ¿Qué es Arquitectura de Información? <ul><li>El arte y la ciencia de estructurar y clasificar sitios Web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información. </li></ul>Fotografía: Javier Velasco

30. Arquitectura de Información, paso 1 <ul><li>Recopilar todo el contenido existente </li></ul><ul><li>Detallar el contenido nuevo necesario </li></ul><ul><li>Determinar la estructura del sitio </li></ul>

31. Arquitectura de Información, paso 2 <ul><li>Analizar el contenido </li></ul><ul><li>Crear wireframes </li></ul><ul><li>Jerarquizar contenido </li></ul><ul><li>Determinar servicios </li></ul>http://alquimistas.evilnolo.com/

32. http://www.w3.org/WAI/EO/2005/10/perspective

34. Listar elementos <ul><li>Logotipo </li></ul><ul><li>Slogan </li></ul><ul><li>Buscador </li></ul><ul><li>Agenda / Programa </li></ul><ul><li>Expositores </li></ul><ul><li>Alumnos </li></ul><ul><li>Inscripciones </li></ul><ul><li>Contacto </li></ul><ul><li>… </li></ul>

35. Logo Barra de navegación Novedades UAWEB Buscar RSS Materiales Destacados Programa de actividades Registro Expositores Información Corporativa y de contacto

36. Definición del Contenido <ul><li>Utilice como primer insumo la información obtenida de la definición de objetivos y audiencia. </li></ul><ul><li>Considere por ejemplo: </li></ul><ul><ul><li>Información institucional jerarquizada (horarios, teléfonos, direcciones, directores, organigrama, etc.) </li></ul></ul><ul><ul><li>Productos / Servicios , todo lo que se pueda hacer en el sitio, trámites, etc. </li></ul></ul><ul><ul><li>Novedades , noticias, información relevante, fechas destacadas, etc. </li></ul></ul>

37. Organización del Contenido <ul><li>Se trata de establecer niveles jerárquicos del contenido con el objeto de centrarse en el usuario y no en la organización </li></ul><ul><li>Considerar </li></ul><ul><ul><li>Información institucional jerarquizada (horarios, teléfonos, direcciones, directores, organigrama, etc.) </li></ul></ul><ul><ul><li>Productos / Servicios , todo lo que se pueda hacer en el sitio, trámites, etc. </li></ul></ul><ul><ul><li>Novedades , noticias, información relevante, fechas destacadas, etc. </li></ul></ul>

38. Organización del Contenido por Temática <ul><li>Con los elementos agrupados en un solo lugar, el usuario puede encontrar rápidamente lo que está buscando </li></ul><ul><li>País </li></ul><ul><li>Región </li></ul><ul><li>Ciudad </li></ul><ul><li>Comuna </li></ul><ul><li>Día </li></ul><ul><li>Semana </li></ul><ul><li>Mes </li></ul><ul><li>Año </li></ul><ul><li>A </li></ul><ul><li>B </li></ul><ul><li>C </li></ul><ul><li>D </li></ul>Orden Geográfico Orden Cronológico Orden Alfabético

39. Organización del Contenido por Categorías <ul><li>Facilita la navegación y permite el aprendizaje por asociación. Los elementos pueden estar clasificados en más categorías </li></ul><ul><li>Chile </li></ul><ul><li>Gobierno </li></ul><ul><li>Institución </li></ul><ul><li>Tecnología </li></ul><ul><li>Beneficios </li></ul><ul><li>Lista de servicios </li></ul><ul><li>Hacer un trámite </li></ul><ul><li>Pagar un servicio </li></ul><ul><li>Corporativo </li></ul><ul><li>Clientes </li></ul><ul><li>Gobierno </li></ul><ul><li>Privados </li></ul><ul><li>Libros </li></ul><ul><li>Archivos </li></ul><ul><li>Música </li></ul><ul><li>Salud </li></ul>Tópico Tarea Público Producto

40. ¿Qué es “Card Sorting”? <ul><li>Consiste en observar cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio Web. </li></ul><ul><li>De esta forma, es posible organizar y clasificar la información de un sitio Web conforme a las preferencias de sus usuarios </li></ul>

41. Tipos de “Card Sorting” <ul><li>Card Sorting Abierto: El usuario puede agrupar las categorías libremente en el número de conjuntos que crea necesario </li></ul><ul><li>Card Sorting Cerrado: Los grupos o conjuntos están predefinidos y etiquetados y el usuario únicamente deberá colocar cada categoría en el grupo que crea corresponda. </li></ul>

42. Consejos Prácticos <ul><li>Seleccione al menos 5 personas: deben tener características y perfiles acordes con el público objetivo del sitio Web </li></ul><ul><li>Explique el objetivo de la prueba, y que este no es la evaluación de los propios participantes. </li></ul><ul><li>Indique a los participantes cuál debe ser el criterio de agrupación de las categorías: por similaridad. </li></ul><ul><li>Entregue a los usuarios las tarjetas con las diferentes categorías, asegúrese que cada conjunto entregado esté desordenado (barajado). </li></ul><ul><li>En el caso de “card sorting” de tipo abierto, una vez terminada la prueba, puede pedir a los participantes que den nombre a cada uno de los grupos creados. </li></ul>

43. Card Sorting: Conclusiones <ul><li>Facilita la categorización de contenidos y sirve como ayuda para : </li></ul><ul><ul><li>decisiones etapa de diseño conceptual (abierto); y </li></ul></ul><ul><ul><li>organización de categorías en etapas de evaluación de usabilidad (card sorting cerrado). </li></ul></ul><ul><li>http://www.websort.net/ </li></ul>

44. <ul><li>Diseña para una Web única </li></ul><ul><ul><li>Si diseñas el contenido teniendo en cuenta los diferentes dispositivos, reducirás costos, tu página será más flexible y podrá satisfacer las necesidades de más personas. </li></ul></ul>Buenas prácticas… <ul><li>http://www.w3c.es/Divulgacion/Tarjetas/MWBP/ </li></ul>

45. Segunda Pausa 13:00 horas

46. Día 1, TARDE

47. Módulo 1 Diseño Visual <ul><li>Estructuras de sitio </li></ul><ul><li>Principios de diseño y diagramación </li></ul><ul><li>Buenas prácticas y estándares </li></ul>

48. Estructura del Sitio http://www.webstyleguide.com COMPLEJO Audiencias Capacitadas SIMPLE Contenido Básico, Capacitación LINEAL, NARRATIVO Estructura predecible No-LINEAL, HIPERLINK Flexible, puede ser confuso

49. Diagramas de Sitio http://www.webstyleguide.com Diagrama Conceptual Diagrama de archivos

50. Estructura de páginas 600 píxeles 350 píxeles 535 píxeles 670 píxeles Monitores de 15” (640x480) SAFE AREA: 600x350 Hoja Carta SAFE AREA: 535x670

51. 800x600 1024x768 4 MB!!!!

52. Diseño y Diagramación <ul><li>Regla de oro: La Web tiene baja resolución </li></ul>

53. Jerarquía Visual

54. Diagramación Sin puntos focales Sin Estructura grafica Estructura visual, Contraste puntos focales Básico Mejor

55. Layout base de un sitio

58. Experiencia de Usuario

59. Diseño de la Experiencia de Usuario <ul><li>Industria Automotriz </li></ul><ul><ul><li>Estudios de mercado </li></ul></ul><ul><ul><li>Entrevistas a Usuarios </li></ul></ul><ul><ul><li>Ingeniería </li></ul></ul><ul><ul><li>Ergonomía </li></ul></ul><ul><ul><li>Interfaz </li></ul></ul><ul><ul><li>Diseño Visual </li></ul></ul><ul><ul><li>Pruebas </li></ul></ul><ul><ul><li>Gran Lanzamiento </li></ul></ul>

60. Elementos de la Experiencia de Usuario (en el Web) Web como aplicación Web como hipertexto Jesse James Garrett, 2000

61. Diseño de sitios http://www.webstyleguide.com

62. Buenas prácticas <ul><li>Diseña para una Web única </li></ul><ul><ul><li>Coherencia temática </li></ul></ul><ul><ul><li>Aprovechar capacidades </li></ul></ul><ul><ul><li>Evitar problemas en la implementación </li></ul></ul><ul><ul><li>Pruebas </li></ul></ul><ul><ul><li>Minimiza el ruido </li></ul></ul><ul><ul><li>Haz obvio lo clickeable </li></ul></ul><ul><li>Evitar los riesgos conocidos </li></ul><ul><ul><li>Ventanas emergentes </li></ul></ul><ul><ul><li>Tablas anidadas </li></ul></ul><ul><ul><li>Diseño con tablas </li></ul></ul><ul><ul><li>Espaciar con gráficos </li></ul></ul><ul><ul><li>Marcos </li></ul></ul><ul><ul><li>Mapas de imagen </li></ul></ul>

63. Servicios del Sector Público Comunidad Europea <ul><li>eAccesibility of public sector services in the European Union, Noviembre 2005 </li></ul><ul><ul><li>436 Sitios evaluados (25 estados) </li></ul></ul><ul><ul><li>64% no provee etiqueta ALT en imágenes </li></ul></ul><ul><ul><li>34% usa frames y no provee adecuadamente contenido para NOFRAMES </li></ul></ul><ul><ul><li>99% contiene HTML no valido </li></ul></ul><ul><ul><li>30% contienen características y opciones de navegación que no pueden ser usadas vía teclado.(atajos) </li></ul></ul><ul><li>¿Suena conocido? </li></ul>http://www.cabinetoffice.gov.uk/

64. Diseño Web y Estándares <ul><li>Diseño para el acceso rápido </li></ul><ul><ul><li>Buenas prácticas (peso, layout, frames, audio, imagenes, etiquetas, plug-ins) </li></ul></ul><ul><ul><li>Estándares Internacionales (html, CSS, separar contenido y presentación) </li></ul></ul><ul><li>Diseño accesible </li></ul><ul><ul><li>Sitios accesibles para todos, no canales “especiales” </li></ul></ul><ul><ul><li>Funcionamiento en diferentes plataformas, degradar el sitio “amigablemente” </li></ul></ul><ul><li>Diseño de experiencia de usuarios </li></ul><ul><ul><li>Diagramas de interacción, diseño de interfaces </li></ul></ul><ul><ul><li>Pruebas heurísticas ( Artículo DNX ) y test de usabilidad ( SIDAR ) </li></ul></ul><ul><li>Atención de Usuarios </li></ul><ul><ul><li>Generar estrategias de atención y feedback con usuarios </li></ul></ul><ul><ul><li>Considerar siempre al usuario como centro del negocio </li></ul></ul><ul><li>Puesta en Marcha </li></ul><ul><ul><li>Plan de pruebas, presencia en buscadores, derechos del usuario </li></ul></ul>

66. Tercera Pausa 16:30 horas

67. Módulo 2: Usabilidad para sitios usables <ul><li>Básicos del diseño centrado en el usuario </li></ul><ul><ul><li>Diseño centrado en el usuario </li></ul></ul><ul><ul><li>Introducción a la usabilidad </li></ul></ul><ul><ul><li>Métodos de evaluación </li></ul></ul><ul><ul><li>Herramientas de apoyo </li></ul></ul>

68. Diseño Centrado en el Usuario <ul><li>Adivinar lo que quieren las personas y construir un sitio para ellos es caro ; si adivinas mal, hay que volver a hacerlo todo . </li></ul>Christina Wodtke, 2002

69. DCU, pasos básicos <ul><li>Averigua para quién es el sitio. </li></ul><ul><li>Habla con esas personas. </li></ul><ul><li>Diseña el sitio para ellos. </li></ul><ul><li>Prueba un prototipo del sitio con ellos. </li></ul><ul><li>Cambia el diseño de acuerdo a lo aprendido. </li></ul><ul><li>Prueba el sitio final con ellos. </li></ul>Christina Wodtke, 2002

70. “ Ignorar la usabilidad es invitar al error” Requerimiento del Usuario Producto Final

71. ¿Qué es USABILIDAD…? <ul><li>Es la utilidad , facilidad de uso , facilidad de aprendizaje y satisfacción de un sistema o producto para conseguir objetivos específicos. </li></ul><ul><li>Sirve para “medir” si un “algo” (o su interface) es... </li></ul><ul><ul><li>Fácil de aprender </li></ul></ul><ul><ul><li>Fácil de entender y recordar </li></ul></ul><ul><ul><li>Eficiente </li></ul></ul><ul><ul><li>Placentero, no traumático </li></ul></ul>

73. Métodos de Usabilidad <ul><li>Seleccionar el método apropiado depende de tres condiciones: </li></ul><ul><ul><li>Relación Tiempo – Recursos </li></ul></ul><ul><ul><li>Si no cuenta con acceso directo a usuarios </li></ul></ul><ul><ul><li>Si hay Capacidades limitadas </li></ul></ul>http://www.usabilitynet.org/tools/methods.htm

74. Métodos de Usabilidad http://www.usabilitynet.org/tools/methods.htm

75. Problemas frecuentes... <ul><li>Dependencia de JavaScript </li></ul><ul><li>Pantallas o ventanas sin un título o encabezado </li></ul><ul><li>Mensajes de error y de operación mal redactados </li></ul><ul><li>Estado de vínculos poco claro </li></ul><ul><li>URL o Dominio difícil de memorizar </li></ul><ul><li>Diversidad de formatos de ingreso de datos (RUT) </li></ul><ul><li>Falta declaración de pasos y número de pantallas </li></ul><ul><li>Manejo diverso de identidad corporativa </li></ul><ul><li>Faltan espacios (ventanas) de confirmación de datos para ejecutar alguna solicitud. (pagar, revisar, modificar, etc.) </li></ul><ul><li>Diferenciación de campos requeridos en un formulario </li></ul>

76. Etiquetas de campos no son descriptivas de la información que el usuario debe ingresar. Sugerencia: Usar etiquetas simples y claras. Funcionamiento estresante de los elementos interactivos. Al seleccionar un checkbox se borran las opciones ingresadas en los combos. Sugerencia: Las acciones ejercidas sobre campos posteriores no deben alterar el funcionamiento de campos anteriores.

77. Es imposible volver a páginas anteriores con las herramientas del navegador. Cada vez que el usuario lo intenta la página expira. Esto es sumamente molesto, dado que el usuario puede perder todo lo avanzado en muchos pasos anteriores. Además le impide corregir información capturada antes en un proceso que contiene muchas páginas. Sugerencia: Corregir el funcionamiento de “volver” para que no expire la sesión ni pierda datos.

78. Se utilizan abreviaciones que no son explicadas al usuario. Sugerencia: Al ser un trámite que admite intervención de usuarios extranjeros, las abreviaciones deben ser explicadas -al menos en la columna derecha- como una forma de evitar posibles dudas o errores.

79. No se admiten caracteres especiales en un campo importante, que no depende de si el usuario desea o no incluir el caracter, sino que dependen de datos reales, emanados del "mundo físico". Sugerencia: En este campo debieran admitirse caracteres especiales, sobre todo considerando el tipo de dato (ej: una empresa llamada "Ñandú"). De no ser posible, advertir al usuario sobre este inconveniente y las razones de porqué no se pudo solucionar el problema.

80. www.guiaweb.gob.cl

81. Herramientas de Apoyo <ul><li>La red permite tener siempre un link a mano </li></ul><ul><li>Web Developer Tool Bar (Firefox) </li></ul><ul><ul><li>http :// chrispederick.com / work / web - developer / </li></ul></ul><ul><li>Web Accessibility Tools (Internet Explorer) </li></ul><ul><ul><li>http :// www.wat - c.org / </li></ul></ul>

82. Tercera Pausa 19:00 horas

83. Día 2, Mañana

84. Módulo 3: Estándares de diseño <ul><li>Separar el contenido de la presentación, CSS </li></ul><ul><li>5 beneficios del “código estándar” </li></ul><ul><li>Diseño sin tablas </li></ul><ul><li>XHTML </li></ul><ul><li>Usabilidad = accesibilidad </li></ul>

85. Contenido / Presentación Contenido CSS/XHTML Dispositivos

87. 5 beneficios de código estándar <ul><li>Mismo contenido en diferentes dispositivos </li></ul><ul><li>Mejor desempeño y despliegue </li></ul><ul><li>Compatible con todos los browsers </li></ul><ul><li>Manejo flexible </li></ul><ul><li>Facilita la distribución de contenido </li></ul>

88. Diseño de CSS <ul><li>DISEÑAR PARA FIREFOX… ES ESTANDAR </li></ul><ul><li>Después, Explorer </li></ul><ul><li>Cómo? Con HACKS para IE </li></ul><ul><ul><li>http://www.google.com.mx/search?client=firefox-a&rls=org.mozilla%3Aes-AR%3Aofficial&channel=s&hl=es&q=css+hacks+for+IE&meta=&btnG=Buscar+con+Google </li></ul></ul><ul><ul><li>2.430.000 resultados…. </li></ul></ul>

89. ¿Porqué no diseñar con tablas? <ul><li>Porque las tablas son para presentar datos </li></ul><ul><li>Porque son una tentación fácil pero equivocada </li></ul><ul><li>Porque usarlas implica menos accesibilidad </li></ul><ul><li>Porque hacen que los sitios no sean flexibles </li></ul><ul><li>Porque impide un sitio más funcional </li></ul>

90. Primera Pausa 10:45 horas

91. Aplicación de CSS <ul><li>http://somerandomdude.net/srd-projects/sanscons/ </li></ul><ul><li>Selección de Skins en blogger </li></ul><ul><li>Templates Joomla </li></ul>

92. http://www.simmons.edu/gradstudies/

93. ¿Qué es xhtml? <ul><li>Versión más estricta y limpia de HTML </li></ul><ul><li>Su objetivo es remplazar a HTML ante su limitación de uso con herramientas basadas en XML </li></ul><ul><li>Combina la sintaxis de HTML , diseñado para mostrar datos, con la de XML, diseñado para describir los datos. </li></ul>

94. ¿Cómo funciona? <ul><li>Documentos deben estar bien formados </li></ul><ul><ul><li><p>Ejemplo de elementos mal <em>anidados</p>.</em> </li></ul></ul><ul><li>Atributos y elementos deben ir en minúsculas </li></ul><ul><ul><li><BODY>Ejemplo incorrecto</BODY> </li></ul></ul><ul><li>Valores de las etiquetas siempre entre comillas </li></ul><ul><ul><li>< table rows=3> ejemplo incorrecto </li></ul></ul>

95. IMPORTANTE <ul><li>Existen varias versiones de XHTML (1.0, 1.1, Básico) </li></ul><ul><li>Para utilizar una versión concreta, se debe incluir: </li></ul><ul><ul><li>Definición del Tipo de Documento (DTD) que se pretende utilizar. </li></ul></ul><?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título</title> </head> <body> . . . </body> </html>

96. A mayor USABILIDAD mayor ACCESIBILIDAD ? !

97. Preguntas… <ul><li>¿Estándar implica ahorro? </li></ul><ul><li>¿qué ahorro? </li></ul><ul><li>¿Evangelizar o taparse los ojos? </li></ul>

98. Miremos sitios…

99. Links Recomendados <ul><li>Web Developer Toolbar (Firefox) </li></ul><ul><ul><li>http://chrispederick.com/work/web-developer/ </li></ul></ul><ul><li>Web Accessibility Toolbar (Internet Explorer) </li></ul><ul><ul><li>http://www.visionaustralia.org.au/info.aspx?page=614#Download </li></ul></ul><ul><li>¿Porqué Jacob Nielsen no usa imágenes en su sitio? </li></ul><ul><ul><li>http://www.useit.com/about/nographics.html </li></ul></ul>www.useit.com

100. <ul><li>Usabilidad y Accesibilidad </li></ul><ul><ul><li>http://www.cadius.org/ </li></ul></ul><ul><ul><li>http://www.sidar.org/ </li></ul></ul><ul><ul><li>http://www.usabilitynet.org/ </li></ul></ul><ul><ul><li>http://usableweb.com/ </li></ul></ul><ul><ul><li>http://www.usability.gov/ </li></ul></ul><ul><ul><li>http://universalusability.com/resources.html </li></ul></ul><ul><li>Guías y Buenas prácticas </li></ul><ul><ul><li>http :// www.w3c . org </li></ul></ul><ul><ul><li>http://www.guiaweb.gob.cl </li></ul></ul><ul><li>Hojas de Estilo </li></ul><ul><ul><li>http ://www.alistapart.com/ </li></ul></ul><ul><ul><li>http://www.csszengarden.com/tr/espanol/ </li></ul></ul><ul><ul><li>http://www.sitepoint.com/article/style-web-forms-css </li></ul></ul><ul><ul><li>http://www.howtocreate.co.uk/tutorials/css/introduction </li></ul></ul><ul><ul><li>http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html </li></ul></ul><ul><ul><li>http:// somerandomdude.net / srd - projects / sanscons / </li></ul></ul>

101. <ul><li>Arquitectura de Información </li></ul><ul><ul><li>http://www.adaptivepath.com/ </li></ul></ul><ul><ul><li>http://iainstitute.org/ </li></ul></ul><ul><ul><li>http://blog.jjg.net/ </li></ul></ul><ul><ul><li>http://jjg.net/ia/visvocab/spanish.html </li></ul></ul><ul><ul><li>http://louisrosenfeld.com/home/ </li></ul></ul><ul><li>Herramientas </li></ul><ul><ul><li>http://www.opensourcecms.com/ </li></ul></ul><ul><ul><li>http://www.webaim.org/simulations/screenreader </li></ul></ul><ul><ul><li>http://www.fonttester.com/ </li></ul></ul><ul><ul><li>http://web.archive.org/collections/web.html </li></ul></ul><ul><ul><li>http://juicystudio.com/services/colourcontrast-es.php#contrast </li></ul></ul><ul><ul><li>http :// www.wat - c.org / </li></ul></ul><ul><ul><li>http :// www.howtocreate.co.uk / </li></ul></ul><ul><ul><li>http://www.bradsoft.com/topstyle/tslite/index.asp </li></ul></ul><ul><li>XHTML </li></ul><ul><ul><li>http://www.w3c.es/Divulgacion/Guiasbreves/XHTML </li></ul></ul>

102. No olvidar <ul><li>Pensar en grande </li></ul><ul><li>Comenzar pequeño </li></ul><ul><li>Escalar rápido </li></ul><ul><li>Generar valor </li></ul><ul><li>Escuchar ….a los usuarios </li></ul>

103. Muchas gracias! ¿see you soon? ;-) [email_address] www.paulosaavedra.cl

Taller de Gestión de Proyectos Web

Paulo Saavedra

Taller de Gestión de Proyectos Web