los otros: standares y accesibilidad
Post on 26-Jul-2015
185 Views
Preview:
TRANSCRIPT
@perezgomez
@phixarmedia
Juan carlos Pérez Gómez
accesibilidad estándares
otros&
los
@perezgom @phixarmed
diseñamos para humanos
diseñamos para humanos
accesibilidad
los otros
“El Internet es una herramienta esencial...muchas personas con
discapacidades pasan muchas horas solas. Computadoras con
voces evita ese estado aislamiento.”
Christopher Reeve
incapacidades visuales
incapacidades auditivas
incapacidades motoras
incapacidades cognoscitivas
otros
los
Naila
Alejandro
Bill
Lee Tomoko
estándares
“web standards”estándares de la web
“web standards”estándares de la web
“web standards”estándares de la web
“web standards”estándares de la web
HTMLcontenido
CSSpresentación
scriptcomportamiento
Java
HTMLCSSjavascript
HTMLcontenido
H2
H1
H2 PP
CSSpresentación
CSSpresentación
CSSpresentación
3
scriptcomportamiento
Java
“web standards”estándares de la web
“Accesibilidad: es el alma de los estándares web”
jeffrey zeldman
“La meta de un diseño accesible o universal es asegurarse de que
tu contenido pueda ser leído y tu sitio pueda ser usado por todos-sin importar ni el dispositivo ni la condición física de usuario.”
jeffrey zeldman
El iPad ha permitido a una anciana de 99 años leer y escribir
El iPad ha permitido a una anciana de 99 años leer y escribir
El iPad ha permitido a una anciana de 99 años leer y escribir
El iPad ha permitido a una anciana de 99 años leer y escribir
La pantalla y el tamaño de las letras son de gran ayuda, nunca había usado una computadora
La pantalla y el tamaño de las letras son de gran ayuda, nunca había usado una computadora
“...es estupendo, antes era difícil leer”
“...es estupendo, antes era difícil leer”
“fue un regalo de sus hijos y también lo usa para escribir
poesía”
“fue un regalo de sus hijos y también lo usa para escribir
poesía”
usa una estructura lógicaH1, H2, H3, H4
usa una estructura lógicaH1, H2, H3, H4
usa una estructura lógicaH1, H2, H3, H4
usa una estructura lógicaH1, H2, H3, H4
usa una estructura lógicaH1, H2, H3, H4
define acciones en las teclas<a href=’/’ accesskey=’1’> Inicio </a>
define acciones en las teclas<a href=’/’ accesskey=’1’> Inicio </a>
define acciones en las teclas<a href=’/’ accesskey=’1’> Inicio </a>
coloca textos alternos a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />
coloca textos alternos a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />
coloca textos alternos a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />
coloca textos alternos a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />
buen usotecnología
los diseñadores crean las páginas para los navegadores más
recientes del momento y procuran que trabaje también
en viejas versiones del navegador
“graceful degradation”degradación agraciada
http://es.wikipedia.org/wiki/Mejora_progresiva
busca el común denonimador de los peores navegadores
y añade efectos especiales a aquellos que lo acepten
“progressive enhancement”mejora progresiva
http://es.wikipedia.org/wiki/Mejora_progresiva
realmente significa cosas chulas que no funcionan en IE
“progressive enhancement”mejora progresiva
@simplebits
contenidocontenidocontenidocontenido
madebyelephant.com
madebyelephant.com
www.google.com
www.google.com
“la clave del éxito es saber cuándo y cómo usar
la tecnología. Esto es lo que hace el diseño web una obra de arte”
andy clark
coloca textos alternos a las imágenes y plug-in
el contenido principal va de primero
el contenido principal va de primero
el contenido principal va de primero
el contenido principal va de primero
buen uso del color: contraste y enlaces
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
buen uso del color: contraste
1. Enlace con subrayado, viene por defecto.2. Este segundo enlace es grueso y tiene color.3. Sin embargo este enlace se distingue por el color.
buen uso del color: enlaces
1. Enlace con subrayado, viene por defecto.2. Este segundo enlace es grueso y tiene color.3. Sin embargo este enlace se distingue por el color.
buen uso del color: enlaces
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
minim veniamcommodo
veniamcommodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
minim veniamcommodo
veniamcommodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
clic clic
buen uso del color: contraste y enlaces
buen uso del color: contraste y enlaces
usa medidas relativas en los
textos
“usar una buena tipografía no es seleccionar
una tipografía “chula””
“usar una buena tipografía significa hacer algo imperceptible
y ayudar a la lectura”
espacio entre líneas
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
espacio entre líneas
jerarquizar
TítulosSubtítulos
Cuerpo del texto
encabezados
TítulosSubtítulos
Cuerpo del texto
encabezados
“El diseño con “grids” o rejillas es una habilidad fundamental de cualquier
diseñador. Entender la relación proporcional, espacios en blancos,
espacios y composición son vitales en construir rejillas para cualquier
plataforma - web, impresos y 3D”mark boulton
ULTIMAS NOTICIASQUINES SOMOS
24 ABR The One Movement obtiene tres premios en festival internacional
Cervecería Nacional Dominicana y Cervecería Bohemia, son las empresas pro-ductoras de cervezas y maltas del Grupo León Jimenes. Sus plantas de produc-ción tienen una capacidad anual de 5,000,000 hectolitros. Ambas plantas están certificadas bajo las normas ISO 9001 de calidad e ISO 14001 de medioambi-ente. Ver más
CONSUMO RESPONSABLE
Cervecería Nacional Dominicana (CND) está ejecutando una campaña de comu-nicación con la finalidad de promover la responsabilidad en el consumo de cer-veza y de otras bebidas alcohólicas.
MERCADO DE EXPORTACION
Cervecería Nacional Dominicana (CND) está ejecutando una campaña de comunicación con la finalidad de promover la responsabilidad en el consumo de cerveza y de otras bebi-
Marcas
24 MAR El Torneo de Voleibol Norceca, Copa Presidente Light, arranca este viernes
Marcas
El dominicano es dulce y salado
24 MAR Un total de 16 países competirán en el Torneo de Voleibol Norceca, en busca de la Copa Presidente Ligh
Marcas
24 MAR Cervecería Nacional Dominicana presenta tres nuevos sabores de Smirnoff Ice
Marcas
CERVECERIA NACIONAL DOMINICANA
Sobre la empresa Nuestras marcas Exportaciones Responsabilidad social Sala de prensaInicio
Tu ta en lo tuyo!Cerveza Bohemia devela su nueva campaña T.TT.
BuscarContáctenos Mapa del sitio Imprimir página
A A ATamañno del texto
The One MovementThe One Movement obtiene tres pre-mios en festival internacional
Ver más
Ver más
phi 1.618la sección dorada
960 / 1.618
593 367
960 / 1.618
593 367
960 / 1.618
593 367
accesibilidad estándares
otros&
los
@perezgom @phixarmed
http://webaim.org/http://diveintoaccessibility.org/http://simplyaccessible.org/
fotoshttp://www.flickr.com/photos/stoppinglight/126602298/http://www.flickr.com/photos/96dpi/2119924191/http://www.flickr.com/photos/disneymike/221791867/sizes/o/http://www.flickr.com/photos/jmvnoos/2614981455/http://www.flickr.com/photos/jpeepz/8487174/http://www.flickr.com/photos/41427422@N00/2171174895/in/photostream/http://www.flickr.com/photos/mark_boucher/1417497654/http://www.flickr.com/photos/dschwabe/3198535171/http://www.flickr.com/photos/christmaswithak/1074766379/http://www.flickr.com/photos/helloinsane/http://www.flickr.com/photos/courtneymay/2424038090/http://www.flickr.com/photos/rufo_83/390404874/http://www.flickr.com/photos/olvwu/189192358/sizes/o/
páginas html y csswww.corporateriskwatch.comwww.subtractions.comwww.ilovetypography.comwww.vondutch.comwww.duoh.comwww.jasonsantamaria.comwww.veerle.duoh.comwww.31three.comwww.meaganfisher.com/www.mattdempsey.com/www.wallswaps.com/justinworrall.com/blog/student.opendoorsuk.org/www.generationchurch.org/particletree.com/www.ocean70.com/www.ndesign-studio.com/www.silverbackapp.com/www.robweychert.com/www.mica.eduwww.multiways.com/brendandawes.com/www.madebyelephant.comwww.wdl.orgadaptd.com/24ways.org/new.typographica.org/balhar.com/squaredeye.com/kuler.adobe.com/tweet1.com/http://experiments.instrum3nt.com/markmahoney/ball/#http://www.kelvinluck.com/assets/jquery/boingPic/index.htmlhttp://www.hope140.org/endmalaria
phixarmediawww.phixarmedia.comwww.atlantisrd.comwww.cnd.com.dowww.costablanca.com.dowww.hotelhispaniola.comwww.gobarahona.comwww.metrotours.com.dowww.prodacom.comwww.arspalicsalud.com.dowww.sinfonia.org.dowww.e-diesco.com
otras referenciaswww.twitter.comwww.paginasamarillas.com.dowww.google.comwww.apple.com/iphotowww.apple.com/ipodhttp://picassa.google.comwww.islandree"ob.com/boagworld.com/http://en.wikipedia.org/wiki/Social_mediahttp://es.wikipedia.org/wiki/Mejora_progresiva
http://html5demos.com/canvas-grad
accesibilidad estándares
otros&
los
top related