1. 1. sitios exitosos de los estndares web a la experiencia de usuario
2. 2. gabriel porras Desarrollador Full-Stack, amigo del mundo del Diseo de UX y de Interaccin octubre 2015
3. 3. google tiene la funcionalidad de una navaja suiza muy complicada, pero la pgina principal es nuestra forma de acercarnos cuando est cerrada es simple, elegante, puedes guardarla en tu bolsillo, pero tiene esos grandiosos trucos cuando los necesitas. marissa mayer foto por jd lasica https://www.flickr.com/photos/jdlasica/9732053325/
4. 4. un buen contenido/servicio + una buena estructura sitio web exitoso
5. 5. el contenido/servicio es el rey
6. 6. el contenido/servicio no es el rey si no hay una buena estructura que lo soporte!
7. 7. estructura?
8. 8. el html un lenguaje muy simple que describe documentos para que los navegadores los puedan entender.
9. 9. el html

   un lenguaje muy simple que describe documentos para que los navegadores los puedan entender.

10. 10. nuestro html ejemplo: http://www.avianca.com/ html + css + script revueltos!
11. 11. cmo deberan ser nuestras pginas html5(de verdad) + css + scripts separados!
12. 12. cmo? utilizando adecuadamente stos estndares web
13. 13. estndares web? son tecnologas, establecidas por la w3c, usadas para crear documentos que estn siempre disponibles y sean accesibles para tantos como sea posible.
14. 14. w3c el world wide web consortium (w3c) es una comunidad internacional, liderada por el inventor de la web tim berners-lee. pertenecen a ella centenaries de empresas como apple, at&t, cisco, google, ibm, netflix, microsoft, oracle, paypal, samsung
15. 15. capas de una pgina comportamientopresentacincontenido
16. 16. capa de contenido lenguaje structural html 5.0
17. 17. html5 Ejemplo: http://www.avianca.com/
18. 18. capa de presentacin lenguaje hojas de estilo nivel 3 / css3
19. 19. css3
20. 20. css3 imagen por joel romeira https://www.ukhost4u.com
21. 21. capa de comportamiento modelo de objetos: dom + javaScript (ecma6)
22. 22. javascript, mejor acompaado HTML enhanced for web apps A JavaScript. visualization library for HTML and SVG. JavaScript Library top 5 en github proyectos javascript
23. 23. javascript, mejor acompaado A professional front-end template for building fast, robust, and adaptable web apps or sites. A declarative, efficient, and flexible JavaScript library for building user interfaces. top 5 en github proyectos javascript
24. 24. gracias a los estndares web, porque un sitio web es exitoso
25. 25. porque 01 tiene un montaje ms rpido 04 se descarga y presenta ms rpidamente 02 su mantenimiento es menor y ms fcil 05 ofrece una mayor accesibilidad y una mejor experiencia de usuario 03 tiene un diseo centralizado 06 est mejor posicionado en los buscadores
26. 26. porque 07tiene un slo contenido para todo: impresin, tablets, mvil, consolas de juegos imprimir? miremos el sitio del grupo bancolombia
27. 27. porque 08 maximiza su audiencia potencial (usuarios y dispositivos) 09 da soporte a la web semntica el futuro! 10 es un paso hacia el cumplimiento de los requerimientos legales actuales y futuros
28. 28. y tu trabajas con los estndares web? Validador de HTML de la W3C eXaminator SEO Browser
29. 29. pero el uso de los estndares web no garantiza que tu sitio web sea exitoso
30. 30. qu ms hay? adems de la estructura
31. 31. lo que vemos
32. 32. lo que no vemos
33. 33. lo que no vemos adems de los estndares web cms o lenguaje Java, LifeRay, PHP, Wordpress, .Net infraestructura + hospedaje mantenimiento
34. 34. en la vida real una biblioteca contenido = libros plataforma = el edificio
35. 35. qu le falta para ser exitosa? una buena experiencia de los usuarios
36. 36. experiencia de usuario tiene su origen en el campo del mercadeo, estando muy vinculado con el concepto de experiencia de marca hassan y martn
37. 37. experiencia de usuario es la respuesta emocional y satisfaccin del usuario respecto a un producto, resultado del fenmeno de interaccin con el producto y su proveedor hassan y martn
38. 38. disciplinas psicologa cognitiva y perceptual, teora del lenguaje, ciencia cognitiva, arquitectura, diseo de entornos, diseo de productos, diseo de informacin, arquitectura de informacin, etnografa, diseo de interaccin, diseo de servicios, heursticos, teora de diseo gorriti
39. 39. rueda de la experiencia de usuario facilidad de localizacin diseo grfico arquitectura de la informacin diseo de interaccin usabilidad accesibilidad tosete
40. 40. 1. facilidad de localizacin en nuestra biblioteca: ubicacin
41. 41. 1. por qu?
42. 42. 1. facilidad de localizacin en la web si tenemos un sitio queremos que sea encontrado y visitado seo
43. 43. 2. diseo grfico en nuestra biblioteca: diseo exterior: la fachada
44. 44. 2. por qu?
45. 45. 2. diseo grfico en la web la imagen ayuda a hacer nuestro sitio ms amigable pero no es primordial google era feo y se volvi lder
46. 46. una de las principales reglas de la usabilidad es los diseadores no son usuarios. este punto es tan importante como los jefes tampoco. jakob nielsen foto por baia https://www.flickr.com/photos/baia/307164353/
47. 47. 3. arquitectura de la informacin en nuestra biblioteca: catlogo
48. 48. 3. por qu?
49. 49. 3. arquitectura de la informacin en la web define y organiza los contenidos, la navegacin, la sealizacin y la bsqueda
50. 50. 4. diseo de interaccin en nuestra biblioteca: procesos
51. 51. 4. por qu?
52. 52. 4. diseo de interaccin en la web disea la forma en que el visitante interacta con el sitio
53. 53. 4. diseo de interaccin ejemplo proceso de un abono
54. 54. 4. diseo de interaccin ejemplo se cambi
55. 55. 5. usabilidad en nuestra biblioteca: evaluacin de la satisfaccin
56. 56. 5. por qu?
57. 57. 5. usabilidad en la web qu tan bien estn los procesos? le sirven a los visitantes? cmo se pueden mejorar?
58. 58. 5. usabilidad en la web cmo 1. heursticas (listas de chequeo) 2. pruebas con usuarios 3
59. 59. 6. accesibilidad en nuestra biblioteca: responsabilidad social personas con necesidades especiales: rampas y/o ascensores
60. 60. 6. por qu?
61. 61. 6. accesibilidad en nuestra vida
62. 62. 6. accesibilidad en la web acceso universal, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localizacin geogrfica y capacidades de los usuarios.
63. 63. 6. accesibilidad en la web dispositivos especiales: screen readers (ejemplo) navegadores slo texto
64. 64. 6. accesibilidad en colombia 2.6 millones de personas discapacitadas (el 6.4% de la poblacin)
65. 65. 6. accesibilidad en colombia 1.1 millones con problemas de visin (y no significa que sean ciegos) (el 2.7% de la poblacin)
66. 66. 6. accesibilidad en colombia la accesibilidad en los sitios del estado colombiano (ejemplo)
67. 67. 6. accesibilidad en el mundo target.com demandada: por violar las leyes federales y estatales que prohben la discriminacin contra los discapacitados leyes en e.u. y l.a.
68. 68. 6. tu usuario ms importante es ciego la mitad de las visitas a tu sitio vienen de google, y google slo ve lo que un ciego puede ver. si tu sitio no es accesible, tendrs menos visitas. fin de la historia pemberton
69. 69. una biblioteca excelente necesita ms que libros y un edificio donde guardarlos
70. 70. qu es lo ms importante? el contenido/servicio, la estructura o la experiencia de usuario?
71. 71. el cliente siempre tiene la razn les suena esto
72. 72. experiencia de usuario el xito de un sitio web est en sus usuarios.
73. 73. diseo centrado en el usuario pensar en mi usuario qu necesita?
74. 74. diseo centrado en el usuario el secreto est en poner en armona: los objetivos de la organizacin con las necesidades de sus usuarios...
75. 75. si no se pensamos en el usuario una aplicacin que funcione perfectamente es posible que no sirva!
76. 76. preguntas?
77. 77. gracias gabriel porras ghporras@gmail.com www.gabrielizalo.com