Dos premios el mismo día

¡Gracias Gustavo! ¡Gracias Marina!

Tic’s en un Clic me otorga el premio Limonada, que ya había recibido antes 🙂

Premio limonada

“Para que sepan” me otorgó el premio Compromiso Educativo.

Premio compromiso educativo

El premio pretende reconocer y dar valor a:

1.- El Compromiso por una Educación de Calidad.
2.- La apuesta por la inclusión de las TIC en el aula.
3.- El esfuerzo de padres, profesionales y centros educativos por incorporar las TIC al proceso educativo.
4.- La lucha por defender a través de la enseñanza valores como: Solidaridad, Amor, Cariño, Respeto, Esfuerzo, Ayuda, Apoyo, Compartir y Compromiso con el futuro de nuestros hijos y alumnos.
5.- Reconocer y valorar el esfuerzo de las familias, profesionales y centros educativos por integrar de forma efectiva en los coles y en la sociedad a los niños y alumnos especiales, procurándoles toneladas de amor y posibilitándoles todos los recursos a nuestro alcance.

Paso este premio a:

Marcelo Duschkin

María Jesús Rodríguez Arena

Fernando Pelillo

Gustavo Cucuzza

¡Gracias por su labor cotidiana!

La Red de Educadores Latinoamericanos cumple un año!

¡¡Hoy cumplimos un año!!

El 6 de mayo de 2008, buceando por la red, andaba en búsqueda de alguna comunidad de docentes latinoamericanos que no necesariamente fueran bloggers, y no la encontré. Así que decidí crear la Red de Educadores Latinoamericanos en Ning.

La Red de Educadores Latinoamericanos fue creciendo permanentemente. Hoy somos 124 miembros de (por orden de aparición en la lista de miembros): Perú, Chile, Argentina, México, Bolivia, Colombia, Venezuela, Uruguay, España, Ecuador, Costa Rica, Honduras, Brasil, USA.

¡Y esperamos ser muchos más! Están todos invitados a formar parte de este espacio de intercambio de experiencias y opiniones sobre educación:

Red de Educadores Latinoamericanos

¿Cómo se ve mi sitio en otros sistemas?

El principio básico del concepto de accesibilidad web es que todos los usuarios puedan acceder a toda la información de un sitio.

Normalmente diseñamos haciendo pruebas y más pruebas en la computadora propia, pero cuando subimos la página a un hosting empezamos teniendo problemas con los caracteres especiales (¡no se ven los acentos!), que se resuelven definiendo correctamente la codificación, indicando al usuario cómo configurar su navegador (¡Gracias, Claudio Segovia!), o directamente usando los códigos para los caracteres especiales (solución menos correcta pero infalible).

Pronto algunos amigos que entran a nuestra página con sus diferentes monitores, en diversas resoluciones, con variados navegadores y sistemas operativos, empiezan a avisarnos que la página No se ve bien. ¿Cómo saberlo de antemano?

Una posibilidad es utilizar  un servicio como browsershot.org, que muestra nuestra página en diversos navegadores de diversos sistemas operativos y configuraciones de pantalla. Podemos ver nuestro sitio en pantallas de 800 x 600 o en una de 1680 px de ancho; en Internet Explorer, en Opera, o en Safari; en un sistema sin JavaScript o sin Flash, etc. etc.:

Browsershot

¿Y cómo resuelvo las diferencias?

En muchos casos veremos que el sitio se ve muy bien, tan bien como en nuestro querido Mozilla Firefox, pero que el malvado Internet Explorer muestra algunas cosas un poco diferentes. Esto se debe a que Internet Explorer no cumple con los estándares para la web, así que tendremos que tomarnos un trabajito extra para este navegador: emezetablog propone utilizar una hoja de estilos agregada, con diferentes definiciones de formato, que sólo se lea cuando el usuario tiene Internet Explorer.

Un ejemplo:

<!–[if gte IE 5.500 ]>
<link rel=’stylesheet’ type=’text/css’ href=’estilosIE.css’>
<![endif]–>

Otros posts de BETA Weblog sobre accesibilidad y CSS:

Más sobre CSS: Float y Clear

Imágenes en CSS

Sombras nada más… o ¿sombras en el texto de una web accesible?

Ayuda para crear hojas de estilo

Cómo saber el código de un color

Cómo saber si tu sitio es accesible

 

Reducir el peso de las imágenes para web

Estoy armando un sitio web y necesito reducir el peso de mis imágenes sin alterar la calidad visible ni el tamaño.

Conozco Photoshop y sé que tiene una opción en el menú que lo hace, así que pensé que probablemente existiera algo parecido en Gimp.

Busqué y encontré (¿cómo vivíamos antes de Google?):

Para usuarios de Gimp 2.6 en Windows, hay que

  • bajar el plugin,
  • descomprimir el archivo,
  • copiar webexport.exe en el archivo de plugins del usuario (por ejemplo, si el usuario se llama “Administrador”: C:UsersAdministrador.gimp-2.6plug-ins)

¡Listo! Ya podemos usar la opción Save for web, en el menú Archivo.

Save for web, plugin de Gimp

Imágenes en CSS

Cuando uno empieza a hacer páginas web accesibles, empiezan a surgir algunas preguntas cuya respuesta no es tan sencilla.

¿Cómo centrar una imagen usando CSS?

Existen muchas formas de hacerlo, pero la que me parece la más sencilla  es la que proponen en este post del blog lamateporunyogur.

En la hoja de estilo, debemos crear una clase para cada alineación de imagen.
Por ejemplo, para imágenes centradas, en el CSS podemos escribir esto:

img.centrado {

display: block;

margin: auto;

}

Y en el archivo HTML tendremos que escribir, cada vez que ponemos una imagen:

<img class=’centrado’ src=’archivo de imagen’ alt=’texto alternativo’>

¿Cómo usar imágenes de fondo para escribir sobre ellas?

Muchas veces queremos incluir una imagen en nuestra página, pero no porque tenga una foto o un dibujo interesante sino porque queremos escribir dentro de ella, como en estos ejemplos:

Texto en globos Texto en nubesTexto en un papel

Lo que se hizo en los tres casos es exactamente lo mismo:

-En la hoja de estilo se creó una clase cuyo fondo tiene la imagen, y al texto se le alteraron los tamaños (altura/height, ancho/width) y la alineación para que coincidan con el centro de la imagen:

p.comentario {

height: 5.5em;

width: 7.3em;

text-align: center;

vertical-align: middle;

line-height: 5.5em;

color: #ffffff;

background-image: URL(‘nube.jpg’);

}

-En el archivo HTML simplemente se usó la clase “comentario” para escribir un pequeño texto:

<p class=”comentario”>¡Hola!</p>

No debemos olvidar nunca que las imágenes que están en el archivo HTML tienen que tener un texto alternativo que la reemplace en su función (por ejemplo, si la imagen tiene un enlace, el texto alternativo debe decir “ir a tal dirección”), y una descripción larga (longdesc=”archivo.html”) en caso de tratarse de una imagen que contenga información. En cambio, cuando una imagen no transmite información, podemos ponerla como fondo de un DIV.

Otros posts de BETA Weblog sobre accesibilidad y CSS:

Más sobre CSS: Float y Clear

¿Cómo se ve mi sitio en otros sistemas?

Sombras nada más… o ¿sombras en el texto de una web accesible?

Ayuda para crear hojas de estilo

Cómo saber el código de un color

Cómo saber si tu sitio es accesible

 

Buscando imágenes en la web

busqueda en Tineye

Cuando uno necesita imágenes para cualquier fin, seguramente el primer lugar en el que piensa en buscar es en Google Imágenes o en Wikimedia Commons. También puede buscar en un banco de imágenes. Por supuesto, si la imagen va a ser publicada hay que cuidar el tema de la licencia y los derechos de autor.

Navegando por ahí, esta semana me enteré de otras dos formas de buscar imágenes. Buscás una imagen de “El pensador”, de Rodin, pero una que esté dibujada o decorada y tal vez no te acordás el nombre de la escultura. Tenés dos opciones:

  • Buscar en Google Imágenes, restringiendo la búsqueda por color (¡Gracias Educared!). Para eso, basta con hacer una búsqueda en Google imágenes y agregar al final de la URL:

&imgcolor=blue

La dirección quedaría así:

http://images.google.com/images?q=pensador&imgcolor=blue

El Pensador, en color azul

http://images.google.com/images?q=pensador&imgcolor=green

El pensador, en color verde

  • Encontrar una foto de “El pensador” y buscarla en TinEye, subiéndola o indicando su URL (¡Gracias Eliax!). TinEye es un buscador reverso de imágenes: en lugar de pedirnos una frase o una palabra, nos pide una imagen. Por ahora tiene un conjunto muy restringido de imágenes en las que busca, pero de a poco irá aumentando esa cantidad. En la imagen lateral podemos ver los tres primeros resultados de esta búsqueda.

Cargando #16: Pecados 2.0

Tira Cargando

Cargando… es una tira de IrisFernandez.com.ar y AgenciaBlog.
Publicada bajo una licencia Creative Commons Atribución.
Si bien su lenguaje es mayormente visual, quisiéramos que todos la puedan disfrutar y para ello la publicamos con un código que permite a los lectores de pantalla, usado por invidentes, leerles un texto equivalente a la imagen.
Si desea reproducirla, le pedimos que lo haga con estas mismas características.
Puede copiar y pegar este código para publicar la tira:

 <img src=”http://agenciablog.net/media/cargando16.png” title=”Cargando” alt=”Tira Cargando” longdesc=”http://www.irisfernandez.com.ar/cargando/cargando16.html” />

¡Hola a todas las personas que se den por saludadas!

Hace algunos años se empezaron a notar en mensajes de listas de correo, páginas web y publicaciones en general, algunos intentos un poco extraños de evitar el lenguaje sexista.

Desde empezar los mensajes con un “Hola a todos/as”, pasando por “Hola a todos y todas“, hasta con el inaccesibilísimo “Hola a tod@s” (atragantando a los lectores en un intento por encontrar un caracter que represente tanto la “a” como la “o”… para el que conoce el código… y de una manera irreconocible para los buscadores y lectores de pantallas).

Hace un tiempo leí un texto sobre lenguaje no sexista y pensé que era un poco exagerado. Sin embargo, un mínimo hecho que me ocurrió hace unos días me hizo sentir una mujer discriminada (no fue la primera ni será la última vez que me discriminan por ser mujer) y pensé en releer las normas para evitar que mis propios mensajes y textos colaborasen con esta desigualdad social.

Lo que me ocurrió fue que mi hija estuvo enferma y vino a mi casa un médico. Cuando me preguntó si necesitaba un certificado para mi trabajo le respondí “no, gracias, trabajo en mi casa“. Y él quedó un poco desorientado y para disimular el choque entre mi frase (“trabajo en mi casa“) y lo que él se imaginaba (“limpio y lavo la ropa todo el día“), me dijo: “¡Y trabajás! ¡Claro que trabajás!“, como poniéndose de mi lado, afirmando que lo que hace una mujer todo el día en su casa es un trabajo,  por supuesto.

Evidentemente no pensó –tal vez por cómo estaba yo vestida o peinada (poco arreglada y mal dormida, por cierto)–  que estaba frente a una profesional que trabaja en su casa pero realizando una tarea diferente de la limpieza del hogar.

A partir de ese pequeño acontecimiento que me resultó hasta divertido, volví a buscar textos sobre el tema para acostumbrarme a evitar el uso de un lenguaje que colabore todavía más con las desigualdades en nuestra sociedad.

El texto que más me gustó fue este: El español, una lengua no sexista.

En él se explica que nuestro idioma no es sexista en sí mismo pero sí lo son algunos usos del español. Tenemos palabras y giros idiomáticos para no hacer diferencia, aunque debido a que el hablante elige las palabras de acuerdo a su cultura, los usos más frecuentes de algunos elementos generan textos con lenguaje sexistas.

Álvaro García Meseguer nos explica que “Hay dos esencialmente, el sexismo léxico y el sexismo sintáctico. Se incurre en el primero por razón de utilizar ciertas palabras que pueden identificarse aisladamente. Se incurre en el segundo cuando la discriminación se debe a la forma de construir la frase y no al empleo de una cierta palabra aislada.”

Algunos ejemplos de sexismo sintáctico que el mismo texto menciona:

Gente que sólo busca su pan, su hembra, su fiesta en paz” (uso de la palabra “gente” para “hombres”)

“Los ingleses prefieren el té al café. También prefieren las mujeres rubias a las morenas” (el uso de la palabra “ingleses” únicamente para “hombres ingleses”, aclarándose sólo en la segunda oración)

El sexismo del oyente

Este punto explica la pequeña incomodidad sufrida en mi caso con el médico.

Otro ejemplo maravilloso es cómo nos cuesta a todos (me incluyo: cuando me lo leyeron tuve que pedir la solución!), resolver este acertijo que se hizo muy famoso de la mano de Paenza.

Conclusión: De la lectura de García Mesenguer deduzco que en mi saludo habitual en listas y mensajes en foros que dice “Hola a todos!” no estoy incurriendo en lenguaje sexista, aunque sí estoy teniendo poca sensibilidad feminista. De ahora en adelante intentaré saludar de alguna de estas formas: “Hola a todos los participantes!”, “Hola colegas!”, “Hola estudiantes!”, etc.

Y para reirse un rato de lo exageradas que son algunas personas con este tema, un texto en tono de humor sobre lenguaje no sexista.

Sombras nada más… (o ¿sombras en el texto de una web accesible?)

Estuve investigando sobre el tema de crear un efecto de sombra en un texto con CSS.

Al parecer, existe un filtro dropshadow (filter: DropShadow…) para usar en textos, cuyo uso descarto absolutamente por ser interpretado únicamente por Internet Explorer.

También hay muchos posts prometiendo que cuando los navegadores interpreten CS3, habrá un atributo text-shadow muy sencillo de usar.

El primero que me entusiasmó, probé y funcionó fue un mensaje en un foro donde se usaban dos divs  idénticos superpuestos, con unos píxeles de diferencia. El div de abajo tiene un texto de color negro que se desplaza un poco y el div de arriba un color claro. Tardé un poco en darme cuenta de cuál es el primer problema de este método: ¡los invidentes escucharían dos veces el mismo texto! Definitivamente descartado (investigué un poco cómo ocultar un texto a los lectores de pantalla pero no lo encontré…)

Un método que funciona en Mozilla Firefox y en Google Chrome pero no en Internet Explorer, es el de text.after y text.before (sobre el final de este post: Efecto de sombra con CSS)

Finalmente, encontré una solución para todos los navegadores usando Javascript: Texto con sombra compatible con todos los navegadores. ¡Y funciona! Para comprobarlo, basta con ver este ejemplo:

Texto con sombra

Otros posts de BETA Weblog sobre accesibilidad y CSS:

Más sobre CSS: Float y Clear
¿Cómo se ve mi sitio en otros sistemas?

Imágenes en CSS

Ayuda para crear hojas de estilo

Cómo saber el código de un color

Cómo saber si tu sitio es accesible