• Like
  • Save
No me hagas pensar. Buenas Prácticas para desarrollar en la web
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 5,084 views

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 ...

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.

Statistics

Views

Total Views
5,084
Views on SlideShare
5,030
Embed Views
54

Actions

Likes
4
Downloads
153
Comments
0

4 Embeds 54

http://www.slideshare.net 46
http://cmslan.com 6
http://www.guadalinfo.es 1
http://uabcprueba.blackboard.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • menttes corporate training No me hagas pensar Buenas practicas para desarrollar en la web Roberto Allende rallende@menttes.com
    • ustedes
    • Ich gehe in die Schule
    • Beszél németül ?
    • satse omoc aloh
    • satse omoc aloh hola como estas
    • no me hagas pensar
    • etc
    • buenas prácticas
    • sentido común
    • usabilidad accesibilidad implementación
    • usabilidad accesibilidad implementación
    • usabilidad accesibilidad implementación
    • usabilidad accesibilidad implementación
    • Qué es lo más importante que debo hacer
    • para que un sitio sea fácil de usar ?
    • No tengo que pensar - para poder usarlo -
    • obvio
    • autoevidente
    • autoexplicativo
    • pensar ?
    • cursos
    • entrenamiento
    • tutoría
    • consultoría
    • Resultados
    • > Resultados
    • Como usamos la web ?
    • No es posible que todo sea autoevidente
    • Ok, auto explicativo ?
    • si no funciona me voy a otro sitio
    • Como usamos la web ?
    • hechos de la vida #1
    • no leemos, escaneamos
    • hechos de la vida #2
    • no hacemos búsquedas óptimas
    • por qué ?
    • estamos apurados
    • no hay mucha penalidad por adivinar mal
    • adivinar es mas divertido
    • hechos de la vida #3
    • no nos preocupamos como funciona todo
    • resolvemos y seguimos
    • por qué ?
    • porque no es importante
    • si encontramos algo que funciona, nos quedamos con ello
    • si encontramos algo que funciona, nos quedamos con ello
    • ... entonces, para qué ?
    • si lo que quieren es un poster
    • construyamos posters geniales
    • 7 cosas importantes
    • #1
    • Crear una jerarquía visual
    • Muy Importante un poco menos importante para nada importante
    • Libros Musica Deportes Viajes Diversión Mascotas Perros Gatos Canarios Cocodrilos
    • Mascotas Cocodrilos
    • Libros Musica Deportes Viajes Diversión Mascotas
    • #2
    • las convenciones son tus amigas
    • Rueda Patente pendiente desde: 48.022AC, 46.632AC, 30.000AC, 26.201AC, 20.022AC, 18.121AC, 10.012AC, 5.182AC, 4.001AC, ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ 2009DC
    • #3
    • dividir las páginas en áreas bien definidas
    • #4
    • hacer obvio que es clickeable
    • #5
    • quitar el ruido visual (el del fondo tambien)
    • #6
    • Omitir palabras innecesarias
    • reduce el nivel de ruido
    • destaca el contenido mas importante
    • páginas mas breves, permitiendo navegar sin necesidad del scroll
    • como ?
    • introducciones
    • instrucciones
    • El siguiente cuestionario está diseñado para proveernos información que nos ayudará a mejorar el sitio y hacerlo mas relevante a sus necesidades.
    • Por favor, ayudenos respondiendo lo siguiente:
    • #7
    • La home page está totalmente fuera de tu control
    • Qué debe decir tu home page ?
    • Que es ? Que hay ? Que se puede hacer ? Porque aquí y no en otro ? Cómo comienzo ?
    • .
    • Debates sobre usabilidad
    • un usuario promedio prefiere....
    • un usuario promedio prefiere....
    • solución al debate
    • TEST DE USABILIDAD
    • pruebas con 3 o 4 usuarios
    • guiado por alguien con paciencia, que sepa escuchar, calma
    • nunca es tarde para hacer testing
    • 1 en etapas tempranas es mejor que 50 en proyecto avanzado
    • .
    • y no hable de...
    • menú, botones, enlaces, cómo hacer tests, etc...
    • Accesibilidad
    • Web Content Accesibility Guidelines 1.0 W3C Recomendation 5-May 1999
    • #14
    • #01 proveer alternativas equivalentes
    • #02 no confíes solo en los colores
    • #03 usar markup y hojas de estilo apropiadamente
    • #09 diseñar teniendo en cuenta la independencia de dispositivo
    • #11 usar tecnologías y guías de la w3c
    • #14 asegurar que los documentos sean claros y simples
    • estándares ?
    • W3C y Estándares
    • W3C y Estándares
    • W3C y Estándares Hyper Text Markup Language ● HTML 4 ● XHTML ● HTML 5 Cascade Stylesheet Language ● CSS v2 ● CSS v3 Accesibilidad ● WCAG
    • html / xhtml
    • 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>
    • css
    • div { width:220px; padding:10px; border:5px solid gray; margin:0px; } div { width: padding:10px; border:5px solid gray; margin:0px; }
    • W3C y Estándares Firefox 3.5
    • Chrome
    • IE 6
    • 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
    • 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)
    • estándares
    • por qué
    • web universalmente accesible
    • internet explorer firefox safari chrome
    • pc notebooks netbooks pda smartphone iphone microhondas
    • http://www.maggiorossetto.com/
    • ok, muy lindo...
    • ... y el Software Libre ?
    • web universalmente accesible
    • Estándares Marco Legal Comunidad
    • El Software Libre es un poderoso aliado
    • 2 ejemplos
    • amaya
    • plone
    • menttes corporate training Muchas gracias Roberto Allende http://menttes.com http://robertoallende.com