Los otros: standares y accesibilidad

@perezgomez

@phixarmedia

Juan carlos Pérez Gómez

accesibilidad estándares

otros&

los

@perezgom @phixarmed

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

HTMLcontenido

CSSpresentación

scriptcomportamiento

Java

HTMLCSSjavascript

HTMLcontenido

H2

H1

H2 PP

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

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”

“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

define acciones en las teclas<a href=’/’ accesskey=’1’> Inicio </a>

coloca textos alternos a las imágenes

coloca textos alternos a las imágenes

coloca textos alternos a las imágenes

coloca textos alternos a las imágenes

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

www.google.com

http://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

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.

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.

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.

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.

clic clic

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.

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

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/

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

http://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/