Post on 04-Jul-2015
description
corporate training menttes
Roberto Allenderallende@menttes.com
No me hagas pensarBuenas practicas para desarrollar en la web
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
usabilidadaccesibilidadimplementación
usabilidadaccesibilidadimplementación
usabilidadaccesibilidadimplementación
usabilidadaccesibilidadimplementación
Qué es lomás importanteque debo hacer
para que un sitiosea 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 todosea 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 comofunciona todo
resolvemos y seguimos
por qué ?
porque no es importante
si encontramos algo quefunciona, nos quedamos
con ello
si encontramos algo quefunciona, nos quedamos
con ello
... entonces, para qué ?
si lo que quieren es un poster
construyamos postersgeniales
7cosas importantes
#1
Crear una jerarquía visual
Muy Importanteun poco menos importante
para nada importante
LibrosMusicaDeportesViajesDiversiónMascotas
PerrosGatosCanariosCocodrilos
Mascotas
Cocodrilos
LibrosMusicaDeportesViajesDiversiónMascotas
#2
las convenciones son tus amigas
RuedaPatente 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 cuestionarioestá 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 AccesibilityGuidelines 1.0
W3C Recomendation 5-May 1999
#14
#01proveer alternativas
equivalentes
#02no confíes solo en los
colores
#03usar markup y hojas de estilo apropiadamente
#09diseñar teniendo en cuenta
la independencia de dispositivo
#11usar tecnologías y guías
de la w3c
#14asegurar que los
documentos sean claros ysimples
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
Encabezado<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>...</html>
Tags<p>This is the first paragraph ...
<p>And this is the second paragraph...</html>
Mayúsculas<ADDRESS ID="company">This is an address.</ADDRESS>
Nombre de atributos<option name=usa selected>USA</option><option name=germany>Germany</option>
XHTML
Encabezado<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">...</html>
Tags<p>This is the first paragraph ...<p>And this is the second paragraph...</html>
Mayúsculas<p>This is the first paragraph ... and here's a break.<br />And this is the second line</p>
Nombre de atributos<address id="company">This is an address.</address>
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ácticaDesarrollo 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 universalmenteaccesible
internet explorerfirefoxsafari
chrome
pcnotebooksnetbooks
pdasmartphone
iphonemicrohondas
http://www.maggiorossetto.com/
ok, muylindo...
... y el SoftwareLibre ?
web universalmenteaccesible
EstándaresMarco LegalComunidad
El Software Librees un poderoso
aliado
2 ejemplos
amaya
plone
corporate training menttes
Muchas gracias
Roberto Allende
http://menttes.comhttp://robertoallende.com