1. sitios exitosos de los estndares web a la experiencia de
usuario
2. gabriel porras Desarrollador Full-Stack, amigo del mundo del
Diseo de UX y de Interaccin octubre 2015
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. un buen contenido/servicio + una buena estructura sitio web
exitoso
5. el contenido/servicio es el rey
6. el contenido/servicio no es el rey si no hay una buena
estructura que lo soporte!
7. estructura?
8. el html un lenguaje muy simple que describe documentos para
que los navegadores los puedan entender.
9. el html
un lenguaje muy simple que describe documentos para que los
navegadores los puedan entender.
10. nuestro html ejemplo: http://www.avianca.com/ html + css +
script revueltos!
12. cmo? utilizando adecuadamente stos estndares web
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. 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. capas de una pgina comportamientopresentacincontenido
16. capa de contenido lenguaje structural html 5.0
17. html5 Ejemplo: http://www.avianca.com/
18. capa de presentacin lenguaje hojas de estilo nivel 3 /
css3
19. css3
20. css3 imagen por joel romeira https://www.ukhost4u.com
21. capa de comportamiento modelo de objetos: dom + javaScript
(ecma6)
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. 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. gracias a los estndares web, porque un sitio web es
exitoso
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. porque 07tiene un slo contenido para todo: impresin,
tablets, mvil, consolas de juegos imprimir? miremos el sitio del
grupo bancolombia
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. y tu trabajas con los estndares web? Validador de HTML de
la W3C eXaminator SEO Browser
29. pero el uso de los estndares web no garantiza que tu sitio
web sea exitoso
30. qu ms hay? adems de la estructura
31. lo que vemos
32. lo que no vemos
33. lo que no vemos adems de los estndares web cms o lenguaje
Java, LifeRay, PHP, Wordpress, .Net infraestructura + hospedaje
mantenimiento
34. en la vida real una biblioteca contenido = libros
plataforma = el edificio
35. qu le falta para ser exitosa? una buena experiencia de los
usuarios
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. 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. 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. rueda de la experiencia de usuario facilidad de localizacin
diseo grfico arquitectura de la informacin diseo de interaccin
usabilidad accesibilidad tosete
40. 1. facilidad de localizacin en nuestra biblioteca:
ubicacin
41. 1. por qu?
42. 1. facilidad de localizacin en la web si tenemos un sitio
queremos que sea encontrado y visitado seo
43. 2. diseo grfico en nuestra biblioteca: diseo exterior: la
fachada
44. 2. por qu?
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. 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. 3. arquitectura de la informacin en nuestra biblioteca:
catlogo
48. 3. por qu?
49. 3. arquitectura de la informacin en la web define y
organiza los contenidos, la navegacin, la sealizacin y la
bsqueda
50. 4. diseo de interaccin en nuestra biblioteca: procesos
51. 4. por qu?
52. 4. diseo de interaccin en la web disea la forma en que el
visitante interacta con el sitio
53. 4. diseo de interaccin ejemplo proceso de un abono
54. 4. diseo de interaccin ejemplo se cambi
55. 5. usabilidad en nuestra biblioteca: evaluacin de la
satisfaccin
56. 5. por qu?
57. 5. usabilidad en la web qu tan bien estn los procesos? le
sirven a los visitantes? cmo se pueden mejorar?
58. 5. usabilidad en la web cmo 1. heursticas (listas de
chequeo) 2. pruebas con usuarios 3
59. 6. accesibilidad en nuestra biblioteca: responsabilidad
social personas con necesidades especiales: rampas y/o
ascensores
60. 6. por qu?
61. 6. accesibilidad en nuestra vida
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. 6. accesibilidad en la web dispositivos especiales: screen
readers (ejemplo) navegadores slo texto
64. 6. accesibilidad en colombia 2.6 millones de personas
discapacitadas (el 6.4% de la poblacin)
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. 6. accesibilidad en colombia la accesibilidad en los sitios
del estado colombiano (ejemplo)
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. 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. una biblioteca excelente necesita ms que libros y un
edificio donde guardarlos
70. qu es lo ms importante? el contenido/servicio, la
estructura o la experiencia de usuario?
71. el cliente siempre tiene la razn les suena esto
72. experiencia de usuario el xito de un sitio web est en sus
usuarios.
73. diseo centrado en el usuario pensar en mi usuario qu
necesita?
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. si no se pensamos en el usuario una aplicacin que funcione
perfectamente es posible que no sirva!