SlideShare a Scribd company logo
1 of 43
Creación de
                                        contenidos accesibles
Software Freedom day – Cartagena 2012




                                              y usables




                                                                               Edison Monsalve - @morpheusco
                                                   Bajo licencia:
                                               Creative Commons –
                                         Reconocer el autor: Edison Monsalve
Sobre la conferencia.

                                        ¿Para quién? Para todos.
Software Freedom day – Cartagena 2012




                                        ¿Conocimientos previos? No, solo ganas




                                                                                                       Edison Monsalve - @morpheusco
                                        ¿Esto es un tutorial? Nop, conferencia.

                                        ¿Me regala la presentación?
                                        Claro! Bájela de Slideshare
                                        http://www.slideshare.net/morpheus_co/creacin-de-contenidos-
                                        accesibles-y-usables-sfd-cgena2012
Sobre el tema y el conferencista

                                        ¿Donde bajo mas información? Pronto en la lupa digital
                                        (Blog de Colombia Digital)
Software Freedom day – Cartagena 2012




                                        En esta presentación y durante hay links interesantes




                                                                                                 Edison Monsalve - @morpheusco
                                        ¿Puedo grabar? Por supuesto!


                                        Mi nombre: Edison Monsalve - @morpheusco
                                        Mi blog: http://morpheus-co.blogspot.com
                                        El otro blog: Lupa digital
Accesibilidad
Software Freedom day – Cartagena 2012




                                        El objetivo es simple, acceso universal al




                                                                                         Edison Monsalve - @morpheusco
                                        contenido, independiente del hardware,
                                        software, idioma, cultura, capacidades de los
                                        usuarios, etc. Ej; Si tu página está realizada
                                        100% en Adobe Flash, no eres accesible.
La U y el mundo se puede
                                                   equivocar.
                                        ¿Que ellos miren a ver como hacen?
Software Freedom day – Cartagena 2012




                                                                               Edison Monsalve - @morpheusco
                                        O ¿le enseñamos a todos los docentes
                                        lenguaje de señas?


                                        Mejor iniciemos con consciencia.
Usabilidad


                                        ¿Qué tan fácil de usar es tu contenido?
Software Freedom day – Cartagena 2012




                                                                                      Edison Monsalve - @morpheusco
                                        ¿Es claro o requiere conocimientos previos?

                                        ¿Se puede compartir o tiene restricciones?
¿A quién estamos dirigidos?

                                        Pero es más que eso: ¿Quién usa gafas? ¿Quién
                                        es zurdo?¿Quién sabiendo que necesita gafas no
Software Freedom day – Cartagena 2012




                                                                                                                        Edison Monsalve - @morpheusco
                                        las usa?




                                        Fuente: Accesibilidad-web.net http://www.accesibilidad-web.net/documentacion-
                                        oficial/preguntas-frecuentes-sobre-pautas-accesibilidad-contenido-web.html
Tiempos de carga y precarga
                                        Simple, ¿se demora? Que valga la pena.
Software Freedom day – Cartagena 2012




                                        Y mientras tanto….




                                                                                           Edison Monsalve - @morpheusco
                                        Si el contenido no carga de inmediato, coloca un
                                        estado de avance.

                                        Ej; Neostream
Los enlaces – no reinventes.
Software Freedom day – Cartagena 2012




                                        Existe la posibilidad de subrayar los textos en




                                                                                          Edison Monsalve - @morpheusco
                                        HTML, no lo hagas, pensarán que es un
                                        hipervínculo.
                                        Simple: No subrayes, si es hipervínculo que
                                        funcione, sino, entonces que no parezca.
Interfaces – reinventa con cuidado
Software Freedom day – Cartagena 2012




                                        Las barras de menús o herramientas van arriba,




                                                                                         Edison Monsalve - @morpheusco
                                        ¿las quieres al centro y redondas? Ok -> pero
                                        ten cuidado, a veces se acierta, otras no.
                                        Ej; Prezi
                                        Iokio Camera Finder
Si quieren ver mi contenido que tengan X y
                                               Y y Z y las versiones adecuadas
Software Freedom day – Cartagena 2012




                                        Muerto Flash, la liga de la justicia decidió




                                                                                       Edison Monsalve - @morpheusco
                                        adoptar HTML 5 -> el nuevo super héroe.
Aprovecha el contenido digital


                                        Leer en pantalla cuesta mucho (No se te ocurran
Software Freedom day – Cartagena 2012




                                                                                          Edison Monsalve - @morpheusco
                                        los fondos negros y letras blancas) y recuerda
                                        que nadie quiere leer el libro directamente en
                                        una página, ¿recuerdas los hipervínculos?
                                        Ej; si desea ver mas información sobre
                                        accesibilidad, revisa el link de …
Los daltónicos y otras
                                               “modificaciones visuales”

                                        Algunos expertos registran que
Software Freedom day – Cartagena 2012




                                                                                             Edison Monsalve - @morpheusco
                                        aproximadamente el 15% de usuarios podría
                                        registrar alguna variación de captación de color.

                                        ¿Quieres ver como ven ellos?
                                        http://www.vischeck.com/daltonize/runDaltonize.php
Que se lea, ¡para eso publicamos!

                                        Texto grande, fondos contrastados – ¡Vamos! No
                                        es tan difícil.
Software Freedom day – Cartagena 2012




                                                                                         Edison Monsalve - @morpheusco
                                        ¡La letra mas cool! ¿Y la forma de escritura?
                                        …..:::: Software Freedom Day::!!

                                        En cerio, skrIViR HacI No T ase + Kool
Software Freedom day – Cartagena 2012




   Edison Monsalve - @morpheusco
El logo no solo adorna

                                        Existen convenciones no declaradas, si
Software Freedom day – Cartagena 2012




                                        colocamos un objeto, que sea funcional, si es




                                                                                            Edison Monsalve - @morpheusco
                                        solo visual entonces piensa: ¿El usuario pierde
                                        algo si se desactiva? – Más allá del efecto
                                        decorativo.
                                        Ej; El logo es index.html – las imágenes de fondo
                                        sin color de fondo.
Recorre el camino

                                        Las “migas de pan” te dicen donde estás, o si
                                        llegaste desde un enlace externo entonces a
Software Freedom day – Cartagena 2012




                                                                                        Edison Monsalve - @morpheusco
                                        donde caíste.

                                        Home –> Boletines -> Prensa -> Política

                                        Pdta: En serio ¿home?
Recuerda tus pasos

                                        ¿Ya estuviste aquí? -> Que chévere que existiera un
                                        selector Css para mostrarle a la gente que ya estuvo por
Software Freedom day – Cartagena 2012




                                        aquí… ¡Espera! Si existe, úsalo.




                                                                                                   Edison Monsalve - @morpheusco
                                        Pongámosle lógica también a los menús, a los pasos.

                                        Ej; Inicio – Accesorios – Tal
                                        ¿Inicio – Apagar? -> No importa que lleve años, puede no
                                        estar bien.
¿En donde estoy? ¡En serio!
                                        ¿Vas a colocar un formulario? – Que el foco esté
                                        claro, ¿es una aplicación tipo Windows form o
Software Freedom day – Cartagena 2012




                                        similar? Que el usuario “VEA” donde está




                                                                                           Edison Monsalve - @morpheusco
                                        ubicado y respeta la tabulación –ah! Pregunta lo
                                        que realmente necesites.
                                           Nombre:
                                           Dirección:
                                           Celular:
                                           Email:
Valida la información, pero
                                               entrega información

                                        Un mensaje como “Ha ocurrido un error de
Software Freedom day – Cartagena 2012




                                                                                        Edison Monsalve - @morpheusco
                                        conexión de las manchas solares” en verdad no
                                        dejará tranquilo a ningún usuario, mejor si
                                        validas localmente o por lo menos ponte en el
                                        lugar del usuario.
                                        Ej; Pantalla azul de la muerte XD.
Software Freedom day – Cartagena 2012




   Edison Monsalve - @morpheusco
¿Accesible y usable es más difícil?

                                        ¡Es más completo! Tendrá un mayor impacto, requiere
                                        mas esfuerzo en algunos puntos pero vale la pena.
Software Freedom day – Cartagena 2012




                                        Ahora, debes estudiar el tema, hacer pruebas y




                                                                                                  Edison Monsalve - @morpheusco
                                        aprender a prestar atención a los detalles, esto puede
                                        que no te vuelva sabio, pero si mejor
                                        profesional.

                                        Te recomiendo: 10 mitos sobre la usabilidad – Teleclase
                                        con Mario Carvajal en el blog Cacharreando.
Imágenes sin descripción o código alt
Software Freedom day – Cartagena 2012




                                        ¿Tu ves la imagen?, ¿a ti te carga? ¿Al resto del




                                                                                             Edison Monsalve - @morpheusco
                                        mundo también? Por lo menos pon descripción,
                                        también existen navegadores que “le dicen” al
                                        usuario de que se trata y utiliza estas etiquetas.
                                        Ej; Navegar en Jaws.
Haga click aquí.
                                        No es un error en la
                                        presentación, ver
                                        más…
Software Freedom day – Cartagena 2012




                                                                           Edison Monsalve - @morpheusco
                                        Nota: Esta diapositiva
                                        no tiene error, solo
                                        necesita más
                                        información para ser
                                        consumida. XD
Todos los textos justificados

                                        ¡Dios! Permite que el procesador de texto antes
Software Freedom day – Cartagena 2012




                                        de hacer caso pregunte: ¿En verdad quieres




                                                                                             Edison Monsalve - @morpheusco
                                        justificar todo el texto y convertirlo en un
                                        ladrillo?
                                        El texto justificado no ayuda a los disléxicos, la
                                        separación “arbitraria” del texto no aporta nada
                                        al contenido.
No seas dependiente de la versión
                                                  o el software
                                        Esta presentación NO está optimizada para un
Software Freedom day – Cartagena 2012




                                        navegador especial, no está optimizada para un




                                                                                         Edison Monsalve - @morpheusco
                                        dispositivo especial, esto la convierte en un
                                        contenido MUY ESPECIAL.
                                        Un contenido web debería ser puesto a prueba
                                        en diversos navegadores y escenarios (incluye
                                        dispositivos).
El gusto en color


                                        Para gustos, los colores, pero
Software Freedom day – Cartagena 2012




                                                                                       Edison Monsalve - @morpheusco
                                        AUNQUE SEA, mide el
                                        contraste.

                                        http://www.joedolson.com/color-contrast-
                                        tester.php?granularity=80&pass=on&partial=on
                                        &color=%23CECECE&type=wcag2
¡No soy diseñador pero tengo un
                                                        gustazo!
                                        No sobra estudiar lo básico sobre “Teoría de color”,
                                        por lo menos déjate ayudar por herramientas y no
Software Freedom day – Cartagena 2012




                                                                                                               Edison Monsalve - @morpheusco
                                        le cuentes a nadie sino quieres.

                                        •   Collor: http://colllor.com/ (contraste)
                                        •   Color Scheme Designer: http://colorschemedesigner.com/
                                        •   Color scheme chooser: http://websitetips.com/colortools/sitepro/
                                        •   Check my colours : http://www.checkmycolours.com/
Y el lenguaje de señas ¿para quién es?


                                        Mucha gente es consciente de la necesidad de la
                                        segunda lengua, para una persona con
Software Freedom day – Cartagena 2012




                                                                                                         Edison Monsalve - @morpheusco
                                        disminución auditiva el “Español” puede ser una
                                        segunda lengua y para ti también, pero ten en
                                        cuenta los detalles.

                                        Curso de señas en video:
                                        http://mail.colombiaaprende.edu.co:8080/recursos/lengua_senas/
¿El sistema operativo es accesible?


                                        Inicio – Programas – Accesorios - accesibilidad
Software Freedom day – Cartagena 2012




                                                                                             Edison Monsalve - @morpheusco
                                        Recursos para invidentes o con discapacidad
                                        visual
                                        • Tenemos lectores de pantalla -> Jaws por ejemplo
                                        • Lupas para pantalla
                                        • Browsers adaptados
Sistemas operativos preparados –
                                                  usuarios no.
Software Freedom day – Cartagena 2012




                                                                                       Edison Monsalve - @morpheusco
                                        Ver más recursos en el portal uruguayo para
                                        discapacidad visual:
                                        http://www.discapacidaduruguay.org/index.php
                                        /accesibilidadciegos
¿Yo no soy sordo entonces no me
                                                     importa?
Software Freedom day – Cartagena 2012




                                                                                       Edison Monsalve - @morpheusco
                                        No diseñamos, no producimos, no escribimos
                                        para nosotros -> re piensa.
                                        No siempre debo tener disminución en alguno
                                        de los sentidos, a veces hay otros factores.
Los dispositivos nuevos – nuevas
                                            interfaces, nuevas formas

                                        ¿Tienes dedos gordos? ¿Intentaste alguna vez dar clic
Software Freedom day – Cartagena 2012




                                                                                                Edison Monsalve - @morpheusco
                                        en una tablet pequeña? ¿oprimir una tecla del
                                        miniteclado del celular?
                                        Señores – A diseñar contenidos enfocados, aunque el
                                        dispositivo sea mas pequeño, los botones no
                                        pueden ser mas pequeños.
Software Freedom day – Cartagena 2012




                                    http://soundgecko.com
                                                            Desde la web a mp3




   Edison Monsalve - @morpheusco
Software Freedom day – Cartagena 2012




                                 http://ctrlq.org/dictation/
                                                               Díctale online




   Edison Monsalve - @morpheusco
Captura tu pantalla

                                        http://www.screenr.com/
Software Freedom day – Cartagena 2012




                                        http://www.screencast-o-matic.com/




                                                                             Edison Monsalve - @morpheusco
Revisa la accesibilidad web de tu
                                                       sitio
Software Freedom day – Cartagena 2012




                                                                                         Edison Monsalve - @morpheusco
                                        http://www.intergraphicdesigns.com/tools/test-
                                        usabilidad-web/
A leer: Te recomiendo
Software Freedom day – Cartagena 2012




                                                                                               Edison Monsalve - @morpheusco
                                        Tienes 5 segundos – http://tienes5segundos.cl/libro/
                                        No me hagas pensar –
                                        Nosolousabilidad - www.nosolousabilidad.com
Software Freedom day – Cartagena 2012




                   Dot sub
                   Captiontube
                                        Subtitulando




   Edison Monsalve - @morpheusco
¿Lenguaje de señas en vivo?

                                        ¿Cómo instalar Ubuntu en Virtual Box?
Software Freedom day – Cartagena 2012




                                        En lenguaje de señas




                                                                                        Edison Monsalve - @morpheusco
                                        http://morpheus-co.blogspot.com/2012/08/como-
                                        instalar-ubuntu-en-virtualbox-en.html

                                        Prueba Present.me – Puede ser solución.
Software Freedom day – Cartagena 2012

                                        Preguntas?




   Edison Monsalve - @morpheusco
Contacto
Software Freedom day – Cartagena 2012




                                        Edison Monsalve




                                                                                     Edison Monsalve - @morpheusco
                                        Docente Universidad Tecnológica de Bolívar
                                        @morpheusco
                                        http://morpheus-co.blogspot.com
Software Freedom day – Cartagena 2012

                                                      Créditos




                   Imágenes logos de Iconfinder.com




   Edison Monsalve - @morpheusco

More Related Content

More from Edison Monsalve

Presentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3DPresentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3D
Edison Monsalve
 

More from Edison Monsalve (20)

Proyecto Accesibilidad SENA - mayo 2020
Proyecto Accesibilidad SENA - mayo 2020Proyecto Accesibilidad SENA - mayo 2020
Proyecto Accesibilidad SENA - mayo 2020
 
Plantillas para procesos BI - INS
Plantillas para procesos BI - INSPlantillas para procesos BI - INS
Plantillas para procesos BI - INS
 
Explorando html5 - Inicio
Explorando html5 - InicioExplorando html5 - Inicio
Explorando html5 - Inicio
 
Herramientas y tips para el profesor tic
Herramientas y tips para el profesor ticHerramientas y tips para el profesor tic
Herramientas y tips para el profesor tic
 
Presentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3DPresentacion oficial Cartagenaen3D
Presentacion oficial Cartagenaen3D
 
Identidad redes sociales y oportunidades de negocio en Internet
Identidad redes sociales y oportunidades de negocio en InternetIdentidad redes sociales y oportunidades de negocio en Internet
Identidad redes sociales y oportunidades de negocio en Internet
 
Industria y oportunidades de los videojuegos en Colombia
Industria y oportunidades de los videojuegos en ColombiaIndustria y oportunidades de los videojuegos en Colombia
Industria y oportunidades de los videojuegos en Colombia
 
Presentacion GITPRO
Presentacion GITPROPresentacion GITPRO
Presentacion GITPRO
 
Presentación didacTIC une
Presentación didacTIC   unePresentación didacTIC   une
Presentación didacTIC une
 
Identidad digital TEDX Yoouth Cartagena
Identidad digital  TEDX Yoouth CartagenaIdentidad digital  TEDX Yoouth Cartagena
Identidad digital TEDX Yoouth Cartagena
 
Redesigning engineering education for the 21 century richard miller
Redesigning engineering education for the 21 century   richard millerRedesigning engineering education for the 21 century   richard miller
Redesigning engineering education for the 21 century richard miller
 
Technological universities as source of innovation seeram ramakrishna
Technological universities as source of innovation seeram ramakrishnaTechnological universities as source of innovation seeram ramakrishna
Technological universities as source of innovation seeram ramakrishna
 
The university for the changing world felix tan
The university for the changing world felix tanThe university for the changing world felix tan
The university for the changing world felix tan
 
Nuevos desafios para las universidades tecnologicas jamil salmi
Nuevos desafios para las universidades tecnologicas   jamil salmiNuevos desafios para las universidades tecnologicas   jamil salmi
Nuevos desafios para las universidades tecnologicas jamil salmi
 
Desconferencia contenidos web y cubrimiento en tiempo real de eventos
Desconferencia   contenidos web y cubrimiento en tiempo real de eventosDesconferencia   contenidos web y cubrimiento en tiempo real de eventos
Desconferencia contenidos web y cubrimiento en tiempo real de eventos
 
Call for Participations - Encuentro Universidades - 2011
Call for Participations - Encuentro Universidades - 2011Call for Participations - Encuentro Universidades - 2011
Call for Participations - Encuentro Universidades - 2011
 
Presentacion lleva tu negocio a la web
Presentacion lleva tu negocio a la web Presentacion lleva tu negocio a la web
Presentacion lleva tu negocio a la web
 
Diseño de blogs y paginas de difusión con
Diseño de blogs y paginas de difusión conDiseño de blogs y paginas de difusión con
Diseño de blogs y paginas de difusión con
 
Modelo de produccion de contenidos digitales
Modelo de produccion de contenidos digitalesModelo de produccion de contenidos digitales
Modelo de produccion de contenidos digitales
 
Porque Licenciar
Porque LicenciarPorque Licenciar
Porque Licenciar
 

Recently uploaded

Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdfPasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
NELLYKATTY
 

Recently uploaded (20)

Libros del Ministerio de Educación (2023-2024).pdf
Libros del Ministerio de Educación (2023-2024).pdfLibros del Ministerio de Educación (2023-2024).pdf
Libros del Ministerio de Educación (2023-2024).pdf
 
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdfPasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
 
POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...
POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...
POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...
 
Sesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdfSesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdf
 
GOBIERNO DE MANUEL ODRIA EL OCHENIO.pptx
GOBIERNO DE MANUEL ODRIA   EL OCHENIO.pptxGOBIERNO DE MANUEL ODRIA   EL OCHENIO.pptx
GOBIERNO DE MANUEL ODRIA EL OCHENIO.pptx
 
El Futuro de la Educacion Digital JS1 Ccesa007.pdf
El Futuro de la Educacion Digital  JS1  Ccesa007.pdfEl Futuro de la Educacion Digital  JS1  Ccesa007.pdf
El Futuro de la Educacion Digital JS1 Ccesa007.pdf
 
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
 
ciclos biogeoquimicas y flujo de materia ecosistemas
ciclos biogeoquimicas y flujo de materia ecosistemasciclos biogeoquimicas y flujo de materia ecosistemas
ciclos biogeoquimicas y flujo de materia ecosistemas
 
Tema 9. Roma. 1º ESO 2014. Ciencias SOciales
Tema 9. Roma. 1º ESO 2014. Ciencias SOcialesTema 9. Roma. 1º ESO 2014. Ciencias SOciales
Tema 9. Roma. 1º ESO 2014. Ciencias SOciales
 
Estudios Sociales libro 8vo grado Básico
Estudios Sociales libro 8vo grado BásicoEstudios Sociales libro 8vo grado Básico
Estudios Sociales libro 8vo grado Básico
 
Síndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuaniSíndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuani
 
Programa dia de las madres para la convi
Programa dia de las madres para la conviPrograma dia de las madres para la convi
Programa dia de las madres para la convi
 
Plantilla de Bitácora Participación Estudiantil Ecuador
Plantilla de Bitácora Participación Estudiantil EcuadorPlantilla de Bitácora Participación Estudiantil Ecuador
Plantilla de Bitácora Participación Estudiantil Ecuador
 
Santa Criz de Eslava, la más monumental de las ciudades romanas de Navarra
Santa Criz de Eslava, la más monumental de las ciudades romanas de NavarraSanta Criz de Eslava, la más monumental de las ciudades romanas de Navarra
Santa Criz de Eslava, la más monumental de las ciudades romanas de Navarra
 
sesion de aprendizaje 1 SEC. 13- 17 MAYO 2024 comunicación.pdf
sesion de aprendizaje 1 SEC. 13- 17  MAYO  2024 comunicación.pdfsesion de aprendizaje 1 SEC. 13- 17  MAYO  2024 comunicación.pdf
sesion de aprendizaje 1 SEC. 13- 17 MAYO 2024 comunicación.pdf
 
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdfREGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
 
Motivados por la esperanza. Esperanza en Jesús
Motivados por la esperanza. Esperanza en JesúsMotivados por la esperanza. Esperanza en Jesús
Motivados por la esperanza. Esperanza en Jesús
 
Diapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanente
Diapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanenteDiapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanente
Diapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanente
 
Botiquin del amor - Plantillas digitales.pdf
Botiquin del amor - Plantillas digitales.pdfBotiquin del amor - Plantillas digitales.pdf
Botiquin del amor - Plantillas digitales.pdf
 
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLAACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
 

Creación de contenidos accesibles y usables - SFD cgena2012

  • 1. Creación de contenidos accesibles Software Freedom day – Cartagena 2012 y usables Edison Monsalve - @morpheusco Bajo licencia: Creative Commons – Reconocer el autor: Edison Monsalve
  • 2. Sobre la conferencia. ¿Para quién? Para todos. Software Freedom day – Cartagena 2012 ¿Conocimientos previos? No, solo ganas Edison Monsalve - @morpheusco ¿Esto es un tutorial? Nop, conferencia. ¿Me regala la presentación? Claro! Bájela de Slideshare http://www.slideshare.net/morpheus_co/creacin-de-contenidos- accesibles-y-usables-sfd-cgena2012
  • 3. Sobre el tema y el conferencista ¿Donde bajo mas información? Pronto en la lupa digital (Blog de Colombia Digital) Software Freedom day – Cartagena 2012 En esta presentación y durante hay links interesantes Edison Monsalve - @morpheusco ¿Puedo grabar? Por supuesto! Mi nombre: Edison Monsalve - @morpheusco Mi blog: http://morpheus-co.blogspot.com El otro blog: Lupa digital
  • 4. Accesibilidad Software Freedom day – Cartagena 2012 El objetivo es simple, acceso universal al Edison Monsalve - @morpheusco contenido, independiente del hardware, software, idioma, cultura, capacidades de los usuarios, etc. Ej; Si tu página está realizada 100% en Adobe Flash, no eres accesible.
  • 5. La U y el mundo se puede equivocar. ¿Que ellos miren a ver como hacen? Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco O ¿le enseñamos a todos los docentes lenguaje de señas? Mejor iniciemos con consciencia.
  • 6. Usabilidad ¿Qué tan fácil de usar es tu contenido? Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco ¿Es claro o requiere conocimientos previos? ¿Se puede compartir o tiene restricciones?
  • 7. ¿A quién estamos dirigidos? Pero es más que eso: ¿Quién usa gafas? ¿Quién es zurdo?¿Quién sabiendo que necesita gafas no Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco las usa? Fuente: Accesibilidad-web.net http://www.accesibilidad-web.net/documentacion- oficial/preguntas-frecuentes-sobre-pautas-accesibilidad-contenido-web.html
  • 8. Tiempos de carga y precarga Simple, ¿se demora? Que valga la pena. Software Freedom day – Cartagena 2012 Y mientras tanto…. Edison Monsalve - @morpheusco Si el contenido no carga de inmediato, coloca un estado de avance. Ej; Neostream
  • 9. Los enlaces – no reinventes. Software Freedom day – Cartagena 2012 Existe la posibilidad de subrayar los textos en Edison Monsalve - @morpheusco HTML, no lo hagas, pensarán que es un hipervínculo. Simple: No subrayes, si es hipervínculo que funcione, sino, entonces que no parezca.
  • 10. Interfaces – reinventa con cuidado Software Freedom day – Cartagena 2012 Las barras de menús o herramientas van arriba, Edison Monsalve - @morpheusco ¿las quieres al centro y redondas? Ok -> pero ten cuidado, a veces se acierta, otras no. Ej; Prezi Iokio Camera Finder
  • 11. Si quieren ver mi contenido que tengan X y Y y Z y las versiones adecuadas Software Freedom day – Cartagena 2012 Muerto Flash, la liga de la justicia decidió Edison Monsalve - @morpheusco adoptar HTML 5 -> el nuevo super héroe.
  • 12. Aprovecha el contenido digital Leer en pantalla cuesta mucho (No se te ocurran Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco los fondos negros y letras blancas) y recuerda que nadie quiere leer el libro directamente en una página, ¿recuerdas los hipervínculos? Ej; si desea ver mas información sobre accesibilidad, revisa el link de …
  • 13. Los daltónicos y otras “modificaciones visuales” Algunos expertos registran que Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco aproximadamente el 15% de usuarios podría registrar alguna variación de captación de color. ¿Quieres ver como ven ellos? http://www.vischeck.com/daltonize/runDaltonize.php
  • 14. Que se lea, ¡para eso publicamos! Texto grande, fondos contrastados – ¡Vamos! No es tan difícil. Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco ¡La letra mas cool! ¿Y la forma de escritura? …..:::: Software Freedom Day::!! En cerio, skrIViR HacI No T ase + Kool
  • 15. Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco
  • 16. El logo no solo adorna Existen convenciones no declaradas, si Software Freedom day – Cartagena 2012 colocamos un objeto, que sea funcional, si es Edison Monsalve - @morpheusco solo visual entonces piensa: ¿El usuario pierde algo si se desactiva? – Más allá del efecto decorativo. Ej; El logo es index.html – las imágenes de fondo sin color de fondo.
  • 17. Recorre el camino Las “migas de pan” te dicen donde estás, o si llegaste desde un enlace externo entonces a Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco donde caíste. Home –> Boletines -> Prensa -> Política Pdta: En serio ¿home?
  • 18. Recuerda tus pasos ¿Ya estuviste aquí? -> Que chévere que existiera un selector Css para mostrarle a la gente que ya estuvo por Software Freedom day – Cartagena 2012 aquí… ¡Espera! Si existe, úsalo. Edison Monsalve - @morpheusco Pongámosle lógica también a los menús, a los pasos. Ej; Inicio – Accesorios – Tal ¿Inicio – Apagar? -> No importa que lleve años, puede no estar bien.
  • 19. ¿En donde estoy? ¡En serio! ¿Vas a colocar un formulario? – Que el foco esté claro, ¿es una aplicación tipo Windows form o Software Freedom day – Cartagena 2012 similar? Que el usuario “VEA” donde está Edison Monsalve - @morpheusco ubicado y respeta la tabulación –ah! Pregunta lo que realmente necesites. Nombre: Dirección: Celular: Email:
  • 20. Valida la información, pero entrega información Un mensaje como “Ha ocurrido un error de Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco conexión de las manchas solares” en verdad no dejará tranquilo a ningún usuario, mejor si validas localmente o por lo menos ponte en el lugar del usuario. Ej; Pantalla azul de la muerte XD.
  • 21. Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco
  • 22. ¿Accesible y usable es más difícil? ¡Es más completo! Tendrá un mayor impacto, requiere mas esfuerzo en algunos puntos pero vale la pena. Software Freedom day – Cartagena 2012 Ahora, debes estudiar el tema, hacer pruebas y Edison Monsalve - @morpheusco aprender a prestar atención a los detalles, esto puede que no te vuelva sabio, pero si mejor profesional. Te recomiendo: 10 mitos sobre la usabilidad – Teleclase con Mario Carvajal en el blog Cacharreando.
  • 23. Imágenes sin descripción o código alt Software Freedom day – Cartagena 2012 ¿Tu ves la imagen?, ¿a ti te carga? ¿Al resto del Edison Monsalve - @morpheusco mundo también? Por lo menos pon descripción, también existen navegadores que “le dicen” al usuario de que se trata y utiliza estas etiquetas. Ej; Navegar en Jaws.
  • 24. Haga click aquí. No es un error en la presentación, ver más… Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco Nota: Esta diapositiva no tiene error, solo necesita más información para ser consumida. XD
  • 25. Todos los textos justificados ¡Dios! Permite que el procesador de texto antes Software Freedom day – Cartagena 2012 de hacer caso pregunte: ¿En verdad quieres Edison Monsalve - @morpheusco justificar todo el texto y convertirlo en un ladrillo? El texto justificado no ayuda a los disléxicos, la separación “arbitraria” del texto no aporta nada al contenido.
  • 26. No seas dependiente de la versión o el software Esta presentación NO está optimizada para un Software Freedom day – Cartagena 2012 navegador especial, no está optimizada para un Edison Monsalve - @morpheusco dispositivo especial, esto la convierte en un contenido MUY ESPECIAL. Un contenido web debería ser puesto a prueba en diversos navegadores y escenarios (incluye dispositivos).
  • 27. El gusto en color Para gustos, los colores, pero Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco AUNQUE SEA, mide el contraste. http://www.joedolson.com/color-contrast- tester.php?granularity=80&pass=on&partial=on &color=%23CECECE&type=wcag2
  • 28. ¡No soy diseñador pero tengo un gustazo! No sobra estudiar lo básico sobre “Teoría de color”, por lo menos déjate ayudar por herramientas y no Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco le cuentes a nadie sino quieres. • Collor: http://colllor.com/ (contraste) • Color Scheme Designer: http://colorschemedesigner.com/ • Color scheme chooser: http://websitetips.com/colortools/sitepro/ • Check my colours : http://www.checkmycolours.com/
  • 29. Y el lenguaje de señas ¿para quién es? Mucha gente es consciente de la necesidad de la segunda lengua, para una persona con Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco disminución auditiva el “Español” puede ser una segunda lengua y para ti también, pero ten en cuenta los detalles. Curso de señas en video: http://mail.colombiaaprende.edu.co:8080/recursos/lengua_senas/
  • 30. ¿El sistema operativo es accesible? Inicio – Programas – Accesorios - accesibilidad Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco Recursos para invidentes o con discapacidad visual • Tenemos lectores de pantalla -> Jaws por ejemplo • Lupas para pantalla • Browsers adaptados
  • 31. Sistemas operativos preparados – usuarios no. Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco Ver más recursos en el portal uruguayo para discapacidad visual: http://www.discapacidaduruguay.org/index.php /accesibilidadciegos
  • 32. ¿Yo no soy sordo entonces no me importa? Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco No diseñamos, no producimos, no escribimos para nosotros -> re piensa. No siempre debo tener disminución en alguno de los sentidos, a veces hay otros factores.
  • 33. Los dispositivos nuevos – nuevas interfaces, nuevas formas ¿Tienes dedos gordos? ¿Intentaste alguna vez dar clic Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco en una tablet pequeña? ¿oprimir una tecla del miniteclado del celular? Señores – A diseñar contenidos enfocados, aunque el dispositivo sea mas pequeño, los botones no pueden ser mas pequeños.
  • 34. Software Freedom day – Cartagena 2012 http://soundgecko.com Desde la web a mp3 Edison Monsalve - @morpheusco
  • 35. Software Freedom day – Cartagena 2012 http://ctrlq.org/dictation/ Díctale online Edison Monsalve - @morpheusco
  • 36. Captura tu pantalla http://www.screenr.com/ Software Freedom day – Cartagena 2012 http://www.screencast-o-matic.com/ Edison Monsalve - @morpheusco
  • 37. Revisa la accesibilidad web de tu sitio Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco http://www.intergraphicdesigns.com/tools/test- usabilidad-web/
  • 38. A leer: Te recomiendo Software Freedom day – Cartagena 2012 Edison Monsalve - @morpheusco Tienes 5 segundos – http://tienes5segundos.cl/libro/ No me hagas pensar – Nosolousabilidad - www.nosolousabilidad.com
  • 39. Software Freedom day – Cartagena 2012 Dot sub Captiontube Subtitulando Edison Monsalve - @morpheusco
  • 40. ¿Lenguaje de señas en vivo? ¿Cómo instalar Ubuntu en Virtual Box? Software Freedom day – Cartagena 2012 En lenguaje de señas Edison Monsalve - @morpheusco http://morpheus-co.blogspot.com/2012/08/como- instalar-ubuntu-en-virtualbox-en.html Prueba Present.me – Puede ser solución.
  • 41. Software Freedom day – Cartagena 2012 Preguntas? Edison Monsalve - @morpheusco
  • 42. Contacto Software Freedom day – Cartagena 2012 Edison Monsalve Edison Monsalve - @morpheusco Docente Universidad Tecnológica de Bolívar @morpheusco http://morpheus-co.blogspot.com
  • 43. Software Freedom day – Cartagena 2012 Créditos Imágenes logos de Iconfinder.com Edison Monsalve - @morpheusco