Search

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

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    1 Favorite

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

    1. menttes corporate training No me hagas pensar Buenas practicas para desarrollar en la web Roberto Allende rallende@menttes.com
    2. ustedes
    3. Ich gehe in die Schule
    4. Beszél németül ?
    5. satse omoc aloh
    6. satse omoc aloh hola como estas
    7. no me hagas pensar
    8. etc
    9. buenas prácticas
    10. sentido común
    11. usabilidad accesibilidad implementación
    12. usabilidad accesibilidad implementación
    13. usabilidad accesibilidad implementación
    14. usabilidad accesibilidad implementación
    15. Qué es lo más importante que debo hacer
    16. para que un sitio sea fácil de usar ?
    17. No tengo que pensar - para poder usarlo -
    18. obvio
    19. autoevidente
    20. autoexplicativo
    21. pensar ?
    22. cursos
    23. entrenamiento
    24. tutoría
    25. consultoría
    26. Resultados
    27. > Resultados
    28. Como usamos la web ?
    29. No es posible que todo sea autoevidente
    30. Ok, auto explicativo ?
    31. si no funciona me voy a otro sitio
    32. Como usamos la web ?
    33. hechos de la vida #1
    34. no leemos, escaneamos
    35. hechos de la vida #2
    36. no hacemos búsquedas óptimas
    37. por qué ?
    38. estamos apurados
    39. no hay mucha penalidad por adivinar mal
    40. adivinar es mas divertido
    41. hechos de la vida #3
    42. no nos preocupamos como funciona todo
    43. resolvemos y seguimos
    44. por qué ?
    45. porque no es importante
    46. si encontramos algo que funciona, nos quedamos con ello
    47. si encontramos algo que funciona, nos quedamos con ello
    48. ... entonces, para qué ?
    49. si lo que quieren es un poster
    50. construyamos posters geniales
    51. 7 cosas importantes
    52. #1
    53. Crear una jerarquía visual
    54. Muy Importante un poco menos importante para nada importante
    55. Libros Musica Deportes Viajes Diversión Mascotas Perros Gatos Canarios Cocodrilos
    56. Mascotas Cocodrilos
    57. Libros Musica Deportes Viajes Diversión Mascotas
    58. #2
    59. las convenciones son tus amigas
    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. #3
    62. dividir las páginas en áreas bien definidas
    63. #4
    64. hacer obvio que es clickeable
    65. #5
    66. quitar el ruido visual (el del fondo tambien)
    67. #6
    68. Omitir palabras innecesarias
    69. reduce el nivel de ruido
    70. destaca el contenido mas importante
    71. páginas mas breves, permitiendo navegar sin necesidad del scroll
    72. como ?
    73. introducciones
    74. instrucciones
    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. Por favor, ayudenos respondiendo lo siguiente:
    77. #7
    78. La home page está totalmente fuera de tu control
    79. Qué debe decir tu home page ?
    80. Que es ? Que hay ? Que se puede hacer ? Porque aquí y no en otro ? Cómo comienzo ?
    81. .
    82. Debates sobre usabilidad
    83. un usuario promedio prefiere....
    84. un usuario promedio prefiere....
    85. solución al debate
    86. TEST DE USABILIDAD
    87. pruebas con 3 o 4 usuarios
    88. guiado por alguien con paciencia, que sepa escuchar, calma
    89. nunca es tarde para hacer testing
    90. 1 en etapas tempranas es mejor que 50 en proyecto avanzado
    91. .
    92. y no hable de...
    93. menú, botones, enlaces, cómo hacer tests, etc...
    94. Accesibilidad
    95. Web Content Accesibility Guidelines 1.0 W3C Recomendation 5-May 1999
    96. #14
    97. #01 proveer alternativas equivalentes
    98. #02 no confíes solo en los colores
    99. #03 usar markup y hojas de estilo apropiadamente
    100. #09 diseñar teniendo en cuenta la independencia de dispositivo
    101. #11 usar tecnologías y guías de la w3c
    102. #14 asegurar que los documentos sean claros y simples
    103. estándares ?
    104. W3C y Estándares
    105. W3C y Estándares
    106. W3C y Estándares Hyper Text Markup Language ● HTML 4 ● XHTML ● HTML 5 Cascade Stylesheet Language ● CSS v2 ● CSS v3 Accesibilidad ● WCAG
    107. html / xhtml
    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. css
    110. div { width:220px; padding:10px; border:5px solid gray; margin:0px; } div { width: padding:10px; border:5px solid gray; margin:0px; }
    111. W3C y Estándares Firefox 3.5
    112. Chrome
    113. IE 6
    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. 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. estándares
    117. por qué
    118. web universalmente accesible
    119. internet explorer firefox safari chrome
    120. pc notebooks netbooks pda smartphone iphone microhondas
    121. http://www.maggiorossetto.com/
    122. ok, muy lindo...
    123. ... y el Software Libre ?
    124. web universalmente accesible
    125. Estándares Marco Legal Comunidad
    126. El Software Libre es un poderoso aliado
    127. 2 ejemplos
    128. amaya
    129. plone
    130. menttes corporate training Muchas gracias Roberto Allende http://menttes.com http://robertoallende.com

    + menttesmenttes, 2 months ago

    custom

    370 views, 1 favs, 0 embeds more stats

    Orientada a diseñadores, artistas, programadores, more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 370
      • 370 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 13
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved