Categoría: tutorial

CSS clip property

Textos accesibles para lectores de pantalla con CSS

CSS clip property

¿Quién dice que no se puede tener sitios accesibles con sitios dinámicos? Bueno, en realidad, cuando se abusa del JavaScript y no hay una versión en texto plano que cualquier navegador puede entender (sí, hasta Internet Explorer), sí sufren usuarios con lectores de pantalla u otras problemáticas motrices o visuales. Muchas aplicaciones hoy en día no están pensadas en absoluto para todas las personas sino para pequeños nichos. Tal vez su modelo de negocio lo justifique, no voy a entrar en ese debate en este momento.

No obstante, si tu idea es compartir inspiración y conocimientos lo más ampliamente posible, evitando que tus artefactos discriminen a alguien con alguna desventaja (que no son la minoría), entonces sí que hay que esforzarse porque nuestras aplicaciones web incluyan pequeños artefactos especiales para que el contenido esté disponible para toda persona. En particular una de las áreas en que hay mayor investigación en la industria, es en los lectores de pantalla, aplicaciones que pueden sintetizar en voz, los textos de tus escritos y hasta pequeñas descripciones de tus imágenes (que tienes que escribir también).

Pero como son máquinas los lectores de pantalla no son muy buenos con los énfasis y otras inflexiones de la voz, y termina siendo un poco confuso a veces, especialmente en sitios cuyos diseñadores no tienen en absoluto en la cabeza, el que pueda haber gente que no tenga una visión de más de 10 dioptrías, por poner un caso. Así, se ha ido progresando hacia ciertos estándares en los que por ejemplo, la página web devuelve al navegador textos que hacen más explícita la información que se encuentra en una página, pero que terminaría siendo insufriblemente redundante para una persona que pudiese leerlos todos por sí misma. Estos textos, llamados de asistencia, se piensan para que el lector de pantalla facilite al escucha la comprensión de los diferentes menús, o secciones de un sitio o de un texto, pero deben ocultarse al usuario “promedio” porque tendrían el efecto contrario: saturar la cantidad de texto, haciendo más difícil la interacción con el sitio.

En los últimos años se han probado una serie de técnicas basadas en CSS , (es decir, 100% basado en estándares abiertos y no una tecnología exclusiva de algún monopolio), para lograr estos efectos, tanto textos legibles y que faciliten la comprensión de un texto leído por un sintetizador, como ocultos para usuarios que no requieren dichas facilidades.

Como nos cuentan en este blog, de temas para Drupal, algunas de las técnicas que datan de más tiempo funcionan en la mayoría de casos, pero algunas aplicaciones por ejemplo para Mac y iOS, no los entienden, o bien funcionan para los sintetizadores de voz, pero resultan en problemas para lectores de lenguas que se escriben de derecha a izquierda (como el árabe). Así, en fechas más recientes ha ido cobrando popularidad el uso de una propiedad que curiosamente es de las que mejor soporte tienen entre los navegadores (¡hasta Internet Explorer 4.0! eso es decir ¡mucho tiempo!), pero al ser pensada primordialmente para un uso visual, no se había contemplado originalmente como una alternativa para mejorar la accesibilidad de los sitios.

La propiedad en cuestión es la llamada clip, y permite lograr efectos visuales muy interesantes, como descubrir una imagen o hacer un “paneo”, entre otras. Pero funciona precisamente porque podemos ocultar el elemento que no queremos que aparezca en el sitio, sin que los sintetizadores lo pasen por alto (como cuando usamos la propiedad display:none) ni causando problemas de “saltos” en la lectura que confunden a las personas que leen visualmente.

Para una mayor referencia recomiendo visitar el enlace que les dejo más arriba de “Adaptive Themes”, aunque encuentro un tanto complicado su uso de hacks para diferentes navegadores (o sea, todos los problemas que siempre ocasionan los dinosaurios de Internet Explorer), cuando simplemente podemos atenernos al estándar.

Digamos que tenemos el siguiente encabezado:


<h2><span class="assistive-text">Sección:</span> Creatividad no es seguir siempre la misma senda</h2>

Para ocultarlo al lector que verá claramente destacado el título de apartado, pero al mismo tiempo mantenerlo disponible para que lo lea el sintetizador a la persona que así lo requiera, usaremos la siguiente regla de CSS:


.assistive-text { position: absolute;
clip: rect(1px 1px 1px 1px); //esto es para IE<8
clip: rect(1px, 1px, 1px, 1px); //para IE8+ y todos los demás navegadores
}

La razón de tener dos declaraciones de clip es la siguiente: la primera, sin comas entre los valores, la entienden los más viejos navegadores que Internet Explorer, la segunda los que respetan el estándar desde hace tiempo. Cuando un navegador no entiende una propiedad de CSS, simplemente la ignora y en este caso funciona perfecto para no hacer nuestro código ilegible lleno de hacks. Finalmente, notar que la propiedad clip no funciona salvo con el uso de position: absolute o position: fixed, tema para otra ocasión.

¿Tanto ruido por un texto que casi nadie va a ver?

Claro que no, también podemos sacar otra lección, del uso de una propiedad estándar para un uso visual, en otro ámbito muy distinto: usuarias con alguna discapacidad visual.

La lección que nos deja esto es que entender los estándares no se trata de seguir una y otra vez los mismos caminos, no se trata de imitar tan solo lo bueno o malo, o pensar que las herramientas solo pueden usarse de las formas preconcebidas, sino que por el contrario, aplicar el conocimiento de forma creativa, no se trata exclusivamente de inventar algo que nadie haya visto, sino también combinar de formas nuevas lo ya sabido, adelantando nuevas soluciones a problemas reales.

Crédito de imagen de portada: http://demosthenes.info/blog/384/CSS-clip (también recomendada su visita para otras interesantes técnicas con esta propiedad estándar de diseño).

Anuncios

20 Tutoriales libres de !Gimp …y contando

Dentro de mi evolución de Ubuntu hacia Fedora en busca de una mayor libertad, y también comunidades más comprometidas con el desarrollo del software libre en lugar de conformarse con lo que Canonical decida hacer con Debian, ha sido para mí un valioso hallazgo encontrarme unos tutoriales de GIMP (Gnu Image Manipulator Program) elaborados por una Ambassador de Fedora, “Tatica”, de Venezuela. Los banners en esta página de “Yo SI uso software libre” son de su diseño, en efecto.

Los tutoriales están publicados en http://tatica.blip.tv/ en castellano y en inglés, si usan el asqueroso Flash que los priva de libertad, visiten la página y listo, pero no le veo mucho sentido a verlos y luego bajárselos, porque es prácticamente descargar el archivo dos veces, así que aprovechando que Tatica subió los videos originales en formato libre Theora, voy a dejarles los enlaces a los videos .ogv listos para que se los descarguen con WGet. Si no sabes como, tienes mi tutorial de WGet o al final del post doy un tip rápido.

Les dejó junto a cada enlace del vídeo, el enlace al post original en el blog de Tatica, para que puedan leer la descripción de cada uno (en castellano e inglés), se los recomiendo muchísimo para que vean las posibilidades del GIMP y aprendan a usarlo.

Conste, las felicitaciones a Tatica.
Por mi parte, ¡que los disfruten!
¡Apoyemos la documentación libre!
Sigue leyendo

Wget 2. Descargas Recursivas

Para variar, en esta ocasión intentaré ser breve, mientras seguimos explorando los usos de mi gestor de descargas favorito: Gnu Wget.
Hagamos un breve repaso de la primera parte, si no entiendes estos comandos, te recomiendo que estudies la 1a. lección completa.

1. Descargar un sólo archivo.

wget http://devel.trisquel.info/trisquel_3.5RC_i686.iso

1.1. Por si se nos corta la descarga, continuar y ver progreso

wget -c -v http://devel.trisquel.info/trisquel_3.5RC_i686.iso

1.2. Limitar la velocidad de descarga.

wget -cv --limit-rate=10k http://devel.trisquel.info/trisquel_3.5RC_i686.iso

1.3. Descarga en Background (segundo plano).

wget -b -cv http://devel.trisquel.info/trisquel_3.5RC_i686.iso

1.4. En Background, Continuando, Volcando información y Limitando Rate (tasa).

wget -b -cv --limit-rate=5k http://devel.trisquel.info/trisquel_3.5RC_i686.iso

1.5. Descargar página con todos los archivos de los que depende para mostrarse correctamente.

wget -pE -cv http://mexico.indymedia.org/?article1288

Hasta aquí hemos descargado un sólo elemento, o una página con todos los archivos asociados, ahora veremos unos cuantos ejemplos solamente de como usar wget para descargar colecciones de páginas.

Sigue leyendo

Tutorial para usar identi.ca con curl

Mientras existen magníficos clientes de microblog para GNU/Linux tanto gráficos (como choqok, gwibber), de línea de comandos (bashic, twidge) y alguno más incluso integrado a mi entorno favorito, Emacs! todos adolecen de una característica básica para poder utilizar identi.ca como una herramienta más de administración: ser programables de modo que disparen dents ante determinados eventos o momentos (que son eventos de reloj).

Para ir desarrollando estos hacks mi inspiración inicial provino de curl y un poco (hay algunos ejemplos malos) de twitter. Sigue leyendo

WebQuest de Bash 1

Retomando la idea de los webquests, se nos ha ocurrido proponer a las compañeras y compañeros del Taller de Bash (aunque no estén participando en las sesiones sincrónicas), que investiguen una serie de tópicos básicos, de hecho no exclusivos de bash, sino aplicables a cualquier sistema *nix (¡ni siquiera sólo GNU/Linux!).

Estos tópicos serán de utilidad para cualquier persona interesada en dominar sus sistemas operativos libres. Aunque no nos sigan en el blog, el grupo en crabgrass, el chat, o lo que se nos ocurra después implementar (un curso de Moodle, screencasts, etc.), el sólo éxito de concluir la investigación de este cuestionario de 8 preguntas, le permitirá a cualquiera seguir un curso de autoformación en sistemas operativos, a su propio ritmo, recursos, necesidades e intereses.

Sin más preámbulo, van las 8 preguntas:

1. Preguntaste a un(a) compañera(o) como podrías encontrar un archivo en su sistema GNU/Linux y te responde que leas las páginas man de comandos find y locate . ¿Qué quiso decir con las páginas de man?
Sigue leyendo

¿Qué vamos a compartir hoy?

Posts en marcha para esta semana, gracias al “feedback” que los mecanismos de búsqueda pueden darle a un escritor de blogs principiante like /me. Pero serían mejor los comentarios 😉

Trisquel GNU/Linux. ¿Códigos del GCompris? Progreso de un comando en Bash. WGet en directorios. ¿GPG para Vista?

Y es que aunque escribo, primero que nada por mí y para mí (tratando de explicarme logro entender mejor ciertas ideas, a las que puedo regresar después), este esfuerzo busca compartir del mismo modo que yo aprendo de otras personas (últimamente mucho de Sacha Chua y Alejandro {ln -s p00k4}), dejando un rasgo tal vez chiquito en el mar de internet, pero para mí, sí que hace una gran diferencia.

Revisando la lista de búsquedas con las que la gente ha llegado a este espacio, me doy cuenta que no ando tan perdido, espero que hayan encontrado aquí por lo menos una referencia útil a lo que intentan aprender, pero trataré de ser más específico y atender a estos temas que proponen con sus búsquedas:
Sigue leyendo

Cómo activar el soporte GPG en riseup.net

No suelo escribir tutoriales para interfaces gŕaficas porque pueden variar mucho de una máquina a otra, según configuraciones especiales, etc. Y suelen algunos usuarios que su pantalla no se ve exactamente igual y que no han aprendido los conceptos generales, atorarse. Y por eso prefiero como much_s, resolver algo con línea de comandos si es posible (o al menos si yo puedo y lo puedo recomendar).
Hecho este disclaimer, en esta ocasión será la excepción porque voy a referirme a una interfaz que much_s utilizamos hoy día, aunque no es tan popular y ‘trendy’ como google wave o skype. Pero que ofrece mucha más libertad y nos garantiza que nuestras comunicaciones no caen en malas manos.

Me refiero al correo web de riseup.

Es posible acceder desde cualquier cliente con soporte IMAP y POP, incluso mi adorado Mutt, y por ejemplo, Emacs (pero aún no sé como, si sabes ¡enséñame!). Pero vamos a ver cómo cualquiera puede tener la poderosa seguridad de GPG en su correo sin necesidad de aprender varias aplicaciones de línea de comandos
En realidad es muy sencillo activar el soporte GPG y usarlo, basta que entremos, no por el Squirrel Mail sino por Horde IMP. Una vez que entremos, podemos irnos a las opciones:

De ahí nos vamos a las opciones de PGP y nos aparecerá algo así (pero yo ya activé mi GPG antes así que si no lo has hecho, tu vista podría ser distinta

Como puedes ver, ya que lo has activado, puedes generar desde allí mismo, tu par de llaves (pública pa los cuates y privada pa ti solito); importar un anillo que tengas desde un archivo local (en GNU/Linux normalmente en un subdirectorio .gpg de tu home); y varias otras opciones, que si no sabes para que son, el íconito de salvavidas te muestra la ayuda para ese elemento.

Redactando correo

Como puedes ver en las siguientes capturas, Posteriormente IMP te permite enviar correo firmados/encriptados, etc. (esto no es un tutorial de GPG) y adjuntar tu clave pública a los correos que envíes, no sólo a la banda de riseup.

Cuando envíes un correo que le hayas solcitado firmar, encriptar, o ambos, te pide ingresar una sola vez por sesión, tu passphrase en una ventana emergente como esta:

Tranquil@, cuando cierres sesión el sistema (remoto, la clave no se guarda en local a menos que haya un keylogger funcionando en la compu en que trabajas, una razón para aprender ssh y mutt) vacía la passphrase de la caché y aunque alguien tuviese acceso a tu correo en riseup pero no conoce tu passphrase, no podrá enviar correo firmados con tu clave, algo a considerar en cualquier organización como disciplina básica, firmar nuestros correos importantes y verificar los que recibamos.

Sale.tzk@jabberes.org