No me hagas pensar. Buenas Prácticas para desarrollar en la web

3,150 views

Published on

Orientada a diseñadores, artistas, programadores, y público en general, esta charla es un compendio de buenas prácticas para el desarrollo y diseño web. Basada en el trabajo de Steve Krug y estandares publicados por W3C,se presentarán criterios prácticos para fomentar el sentido comun, usabildiad, accesibilidad y universilidad en la web, sin dejar de justificar el porqué de cada una.

Published in: Technology, Travel, Business
  • Be the first to comment

No me hagas pensar. Buenas Prácticas para desarrollar en la web

  1. 1. menttes corporate training No me hagas pensar Buenas practicas para desarrollar en la web Roberto Allende rallende@menttes.com
  2. 2. ustedes
  3. 3. Ich gehe in die Schule
  4. 4. Beszél németül ?
  5. 5. satse omoc aloh
  6. 6. satse omoc aloh hola como estas
  7. 7. no me hagas pensar
  8. 8. etc
  9. 9. buenas prácticas
  10. 10. sentido común
  11. 11. usabilidad accesibilidad implementación
  12. 12. usabilidad accesibilidad implementación
  13. 13. usabilidad accesibilidad implementación
  14. 14. usabilidad accesibilidad implementación
  15. 15. Qué es lo más importante que debo hacer
  16. 16. para que un sitio sea fácil de usar ?
  17. 17. No tengo que pensar - para poder usarlo -
  18. 18. obvio
  19. 19. autoevidente
  20. 20. autoexplicativo
  21. 21. pensar ?
  22. 22. cursos
  23. 23. entrenamiento
  24. 24. tutoría
  25. 25. consultoría
  26. 26. Resultados
  27. 27. > Resultados
  28. 28. Como usamos la web ?
  29. 29. No es posible que todo sea autoevidente
  30. 30. Ok, auto explicativo ?
  31. 31. si no funciona me voy a otro sitio
  32. 32. Como usamos la web ?
  33. 33. hechos de la vida #1
  34. 34. no leemos, escaneamos
  35. 35. hechos de la vida #2
  36. 36. no hacemos búsquedas óptimas
  37. 37. por qué ?
  38. 38. estamos apurados
  39. 39. no hay mucha penalidad por adivinar mal
  40. 40. adivinar es mas divertido
  41. 41. hechos de la vida #3
  42. 42. no nos preocupamos como funciona todo
  43. 43. resolvemos y seguimos
  44. 44. por qué ?
  45. 45. porque no es importante
  46. 46. si encontramos algo que funciona, nos quedamos con ello
  47. 47. si encontramos algo que funciona, nos quedamos con ello
  48. 48. ... entonces, para qué ?
  49. 49. si lo que quieren es un poster
  50. 50. construyamos posters geniales
  51. 51. 7 cosas importantes
  52. 52. #1
  53. 53. Crear una jerarquía visual
  54. 54. Muy Importante un poco menos importante para nada importante
  55. 55. Libros Musica Deportes Viajes Diversión Mascotas Perros Gatos Canarios Cocodrilos
  56. 56. Mascotas Cocodrilos
  57. 57. Libros Musica Deportes Viajes Diversión Mascotas
  58. 58. #2
  59. 59. las convenciones son tus amigas
  60. 60. Rueda Patente pendiente desde: 48.022AC, 46.632AC, 30.000AC, 26.201AC, 20.022AC, 18.121AC, 10.012AC, 5.182AC, 4.001AC, ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ 2009DC
  61. 61. #3
  62. 62. dividir las páginas en áreas bien definidas
  63. 63. #4
  64. 64. hacer obvio que es clickeable
  65. 65. #5
  66. 66. quitar el ruido visual (el del fondo tambien)
  67. 67. #6
  68. 68. Omitir palabras innecesarias
  69. 69. reduce el nivel de ruido
  70. 70. destaca el contenido mas importante
  71. 71. páginas mas breves, permitiendo navegar sin necesidad del scroll
  72. 72. como ?
  73. 73. introducciones
  74. 74. instrucciones
  75. 75. El siguiente cuestionario está diseñado para proveernos información que nos ayudará a mejorar el sitio y hacerlo mas relevante a sus necesidades.
  76. 76. Por favor, ayudenos respondiendo lo siguiente:
  77. 77. #7
  78. 78. La home page está totalmente fuera de tu control
  79. 79. Qué debe decir tu home page ?
  80. 80. Que es ? Que hay ? Que se puede hacer ? Porque aquí y no en otro ? Cómo comienzo ?
  81. 81. .
  82. 82. Debates sobre usabilidad
  83. 83. un usuario promedio prefiere....
  84. 84. un usuario promedio prefiere....
  85. 85. solución al debate
  86. 86. TEST DE USABILIDAD
  87. 87. pruebas con 3 o 4 usuarios
  88. 88. guiado por alguien con paciencia, que sepa escuchar, calma
  89. 89. nunca es tarde para hacer testing
  90. 90. 1 en etapas tempranas es mejor que 50 en proyecto avanzado
  91. 91. .
  92. 92. y no hable de...
  93. 93. menú, botones, enlaces, cómo hacer tests, etc...
  94. 94. Accesibilidad
  95. 95. Web Content Accesibility Guidelines 1.0 W3C Recomendation 5-May 1999
  96. 96. #14
  97. 97. #01 proveer alternativas equivalentes
  98. 98. #02 no confíes solo en los colores
  99. 99. #03 usar markup y hojas de estilo apropiadamente
  100. 100. #09 diseñar teniendo en cuenta la independencia de dispositivo
  101. 101. #11 usar tecnologías y guías de la w3c
  102. 102. #14 asegurar que los documentos sean claros y simples
  103. 103. estándares ?
  104. 104. W3C y Estándares
  105. 105. W3C y Estándares
  106. 106. W3C y Estándares Hyper Text Markup Language ● HTML 4 ● XHTML ● HTML 5 Cascade Stylesheet Language ● CSS v2 ● CSS v3 Accesibilidad ● WCAG
  107. 107. html / xhtml
  108. 108. W3C y Estándares HTML 4 XHTML Encabezado <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Encabezado <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html> "DTD/xhtml1-strict.dtd"> ... <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" </html> lang="en"> ... </html> Tags <p>This is the first paragraph ... <p>And this is the second paragraph... Tags <p>This is the first paragraph ... </html> <p>And this is the second paragraph... </html> Mayúsculas Mayúsculas <p>This is the first paragraph ... and here's a break.<br /> <ADDRESS ID="company">This is an And this is the second line</p> address.</ADDRESS> Nombre de atributos Nombre de atributos <address id="company">This is an address.</address> <option name=usa selected>USA</option> <option name=germany>Germany</option>
  109. 109. css
  110. 110. div { width:220px; padding:10px; border:5px solid gray; margin:0px; } div { width: padding:10px; border:5px solid gray; margin:0px; }
  111. 111. W3C y Estándares Firefox 3.5
  112. 112. Chrome
  113. 113. IE 6
  114. 114. Fix Internet Explorer <!--[if IE]><style type="text/css" media="all">@import url(/ie.css);</style><![endif]--> <!--[if lte IE 6]><script src="/ie6warn.js" type="text/javascript"></script><![endif]--> Práctica Desarrollo en Navegador compliance, fix para navegador no compliance
  115. 115. Estándares: Buenas Prácticas 1. Validar 2. Dividir y conquistar (html, css, js, otros) 3. Testing: Safari/Mac, IE, Firefox, Chrome 4. No usar código específico de una plataforma 5. Crossbrowsing (Fuentes, Resoluciones, etc)
  116. 116. estándares
  117. 117. por qué
  118. 118. web universalmente accesible
  119. 119. internet explorer firefox safari chrome
  120. 120. pc notebooks netbooks pda smartphone iphone microhondas
  121. 121. http://www.maggiorossetto.com/
  122. 122. ok, muy lindo...
  123. 123. ... y el Software Libre ?
  124. 124. web universalmente accesible
  125. 125. Estándares Marco Legal Comunidad
  126. 126. El Software Libre es un poderoso aliado
  127. 127. 2 ejemplos
  128. 128. amaya
  129. 129. plone
  130. 130. menttes corporate training Muchas gracias Roberto Allende http://menttes.com http://robertoallende.com

×