Presentación de diseño web basado en estándares y accesibilidad

2. Juan carlos Pérez Gómez
@perezgom @phixarmed
ez ia

3. otro
los
s& accesibilidad
estándares
@perezgom @phixarmed

4. diseñamos para
humanos

24. diseñamos para
humanos

25. accesibilid
ad

36. los
otros

39. “El Internet es una herramienta
esencial...muchas personas con
discapacidades pasan muchas
horas solas. Computadoras con
voces evita ese estado
aislamiento.”
Christopher
Reeve

41. incapacidades
visuales

42. incapacidades
auditivas

43. incapacidades
motoras

47. incapacidades
cognoscitivas

48. otro
lo
s

49. Nail
a

53. Alejandr
o

56. Bill

58. Lee
Tomoko

61. estándare
s

65. “web standards”
estándares de la web

66. “web standards”
estándares de la web

67. “web standards”
estándares de la web

68. “web standards”
estándares de la web

69. HTML
contenido

70. CSS
presentación

71. Java
comportamiento
script

72. HTML
CSS
javascript

73. HTML
contenido

76. H1
P
H2
H2 P

78. CSS
presentación

104. CSS
presentación

105. CSS
presentación
3

109. Java
comportamiento
script

114. “web standards”
estándares de la web

115. “Accesibilidad: es el alma
de los estándares web”
jeffrey zeldman

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

119. El iPad ha permitido a una anciana de 99 años
leer y escribir

120. El iPad ha permitido a una anciana de 99 años
leer y escribir

121. La pantalla y el tamaño de las letras son de gran
ayuda, nunca había usado una computadora

122. “...es estupendo, antes
era difícil leer”

123. “fue un regalo de sus hijos y
también lo usa para escribir
poesía”

125. usa una estructura
lógica
H1, H2, H3, H4

126. usa una estructura
lógica
H1, H2, H3, H4

127. usa una estructura
lógica
H1, H2, H3, H4

128. usa una estructura
lógica
H1, H2, H3, H4

129. usa una estructura
lógica
H1, H2, H3, H4

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

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

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

133. coloca textos alternos
a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />

134. coloca textos alternos
a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />

135. coloca textos alternos
a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />

136. coloca textos alternos
a las imágenes
<img src=”nombre_imagen .jpg” alt=”Ir al home” />

138. bue
n
uso
tecnología

139. “graceful degradation”
degradación agraciada
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
http://es.wikipedia.org/wiki/Mejora_progresiva

143. “progressive
enhancement” mejora progresiva
busca el común denonimador
de los peores navegadores
y añade efectos especiales a
aquellos que lo acepten
http://es.wikipedia.org/wiki/Mejora_progresiva

144. “progressive
enhancement” mejora progresiva
realmente significa cosas chulas
que no funcionan en IE
@simplebits

145. contenid
contenid
contenid
o
contenid
o
o
o

148. madebyelephant.co

149. madebyelephant.co

150. www.google.com

151. www.google.com

152. www.google.com

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

154. coloca textos alternos
a las imágenes y plug-in

155. el contenido principal
va de primero

160. el contenido principal
va de primero

161. el contenido principal
va de primero

162. el contenido principal
va de primero

163. buen uso del color:
contraste y enlaces

164. buen uso del color:
contraste
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipisicing elit, consectetur adipisicing elit,
sed do eiusmod tempor sed do eiusmod tempor
incididunt ut labore et incididunt ut labore et dolore
dolore magna aliqua. Ut magna aliqua. Ut enim ad
enim ad minim veniam, quis minim veniam, quis nostrud
nostrud exercitation ullamco exercitation ullamco laboris
laboris nisi ut aliquip ex ea nisi ut aliquip ex ea commodo
commodo consequat. consequat.

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

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

167. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipisicing elit, consectetur adipisicing elit,
sed do eiusmod tempor sed do eiusmod tempor
incididunt ut labore et incididunt ut labore et dolore
dolore magna aliqua. Ut magna aliqua. Ut enim ad
enim ad minim veniam, quis minim veniam, quis nostrud
nostrud exercitation ullamco exercitation ullamco laboris
laboris nisi ut aliquip ex ea nisi ut aliquip ex ea commodo
commodo consequat. consequat.

168. veniamcommodo consequat. Lorem ipsum dolor sit
amet, consectetur
jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
adipisicing elit, sed do eiusmod tempor eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut incididunt ut labore et
dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud enim ad minim veniam,
exercitation ullamco laboris nisi ut aliquip ex quis nostrud
ea commodo consequat. exercitation ullamco
laboris nisi ut aliquip ex
ea commodo consequat.
minim veniamcommodo
jorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit
adipisicing elit, sed do eiusmod tempor amet, consectetur
incididunt ut labore et dolore magna aliqua. Ut adipisicing elit, sed do
eiusmod tempor
enim ad minim veniam, quis nostrud incididunt ut labore et
exercitation ullamco laboris nisi ut aliquip ex dolore magna aliqua. Ut
ea commodo consequat. enim ad minim veniam,

169. veniamcommodo consequat. Lorem ipsum dolor sit
amet, consectetur
jorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
adipisicing elit, sed do eiusmod tempor eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut incididunt ut labore et
dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud enim ad minim veniam,
exercitation ullamco laboris nisi ut aliquip ex quis nostrud
ea commodo consequat. exercitation ullamco
laboris nisi ut aliquip ex
ea commodo consequat.
clic clic
minim veniamcommodo
Lorem ipsum dolor sit
jorem ipsum dolor sit amet, consectetur amet, consectetur
adipisicing elit, sed do eiusmod tempor adipisicing elit, sed do
eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut incididunt ut labore et
enim ad minim veniam, quis nostrud dolore magna aliqua. Ut
exercitation ullamco laboris nisi ut aliquip ex enim ad minim veniam,
ea commodo consequat.

170. buen uso del color:
contraste y enlaces

171. buen uso del color:
contraste y enlaces

172. usa medidas
relativas en los
textos

174. “usar una buena tipografía
no es seleccionar
una tipografía “chula””

175. “usar una buena tipografía
significa hacer algo imperceptible
y ayudar a la lectura”

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

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

178. Títulos Títulos
Subtítulos Subtítulos
encabezados encabezados
Cuerpo del texto Cuerpo del texto
jerarquizar

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

194. Buscar
Contáctenos Mapa del sitio Imprimir página
Tamañno del texto A A A
CERVECERIA NACIONAL DOMINICANA
Inicio Sobre la empresa Nuestras marcas Exportaciones Responsabilidad social Sala de prensa
The One Movement
The One Movement
obtiene tres pre-
mios en festival
internacional
Ver más
Tu ta en lo tuyo!
Cerveza Bohemia
devela su nueva
campaña T.TT.
El dominicano es dulce y salado
Ver más
QUINES SOMOS ULTIMAS NOTICIAS
Cervecería Nacional Dominicana y Cervecería Bohemia, son las empresas pro- Marcas
ductoras de cervezas y maltas del Grupo León Jimenes. Sus plantas de produc- 24 ABR The One Movement obtiene tres
premios en festival internacional
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-
Marcas
ente. Ver más El Torneo de Voleibol Norceca,
24 MAR
Copa Presidente Light, arranca
este viernes
CONSUMO RESPONSABLE MERCADO DE EXPORTACION
Marcas
24 MAR Un total de 16 países
competirán en el Torneo de
Voleibol Norceca, en busca de la
Copa Presidente Ligh
Cervecería Nacional Dominicana (CND) Cervecería Nacional Dominicana
Marcas
está ejecutando una campaña de comu- (CND) está ejecutando una campaña
24 MAR Cervecería Nacional
nicación con la finalidad de promover la de comunicación con la finalidad de Dominicana presenta tres nuevos
sabores de Smirnoff Ice
responsabilidad en el consumo de cer- promover la responsabilidad en el
veza y de otras bebidas alcohólicas. consumo de cerveza y de otras bebi-

203. phi 1.618
la sección dorada

215. 960 / 1.618
593 367

216. 960 / 1.618
593 367

217. 960 / 1.618
593 367

224. otro
los
s& accesibilidad
estándares
@perezgom @phixarmed

225. http://webaim.org/
http://diveintoaccessibility.org/
http://simplyaccessible.org/

227. fotos
http://www.flickr.com/photos/stoppinglight/126602298/
http://www.flickr.com/photos/96dpi/2119924191/
los
http://www.flickr.com/photos/disneymike/221791867/sizes/o/
http://www.flickr.com/photos/jmvnoos/2614981455/
otros
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/
accesibilidad
http://www.flickr.com/photos/courtneymay/2424038090/
http://www.flickr.com/photos/rufo_83/390404874/
http://www.flickr.com/photos/olvwu/189192358/sizes/o/
&estándares
páginas html y css phixarmedia
www.corporateriskwatch.com http://html5demos.com/canvas-grad
www.subtractions.com www.phixarmedia.com
www.ilovetypography.com www.atlantisrd.com
www.vondutch.com www.cnd.com.do
www.duoh.com www.costablanca.com.do
www.jasonsantamaria.com www.hotelhispaniola.com
www.veerle.duoh.com www.gobarahona.com
www.31three.com www.metrotours.com.do
www.meaganfisher.com/ www.prodacom.com
www.mattdempsey.com/ www.arspalicsalud.com.do
www.wallswaps.com/ www.sinfonia.org.do
justinworrall.com/blog/ www.e-diesco.com
student.opendoorsuk.org/
www.generationchurch.org/
otras referencias
particletree.com/
www.ocean70.com/
www.ndesign-studio.com/ www.twitter.com
www.silverbackapp.com/ www.paginasamarillas.com.do
www.robweychert.com/ www.google.com
www.mica.edu www.apple.com/iphoto
www.multiways.com/ www.apple.com/ipod
brendandawes.com/ http://picassa.google.com
www.madebyelephant.com www.islandree"ob.com/
www.wdl.org boagworld.com/
adaptd.com/ http://en.wikipedia.org/wiki/Social_media
24ways.org/ http://es.wikipedia.org/wiki/Mejora_progresiva
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.html
http://www.hope140.org/endmalaria