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

 

La web en los tiempos del dengue

Me levanto, tomo un delicioso café, leche y cereales mientras preparo el desayuno para mi familia y la meriendita que llevan los chicos al colegio. Todo transcurre con normalidad hasta que a las 7:25 los rocío con repelente para mosquitos, y salgo a pasear el perro -bolsita en mano- mientras me despido de ellos cuando se van.

Me siento a trabajar en mi computadora portátil donde leo en El caparazón el título “4 videos imprescindibles para entender la web 3.0“, y recibo un mensaje subliminal: si no sabés qué es la web 3.0 en unos días te quedarás sin empleo!! (y tal vez sin amigas y sin marido!!) 

Mientras enciendo el segundo sahumerio (para espantar mosquitos del tipo Aedes aegypti con algo más hippie que un espiral o una tableta que además ocupa un enchufe…), veo el primero de los videos. Muy interesante.

Me voy a hacer más café, pero tiro la borra del café anterior en algunas macetas.

Mientras sigo con el segundo video sobre la web 3.0 pienso algunas cosas: ¿viviré para verla o moriré por dengue hemorrágico antes de tener una heladera que avise a Disco Virtual cuándo se acabaron las milanesas de soja? ¿Será más accesible la web 3.0? ¿Reinará el software libre tal como se vaticina y como muchos deseamos que ocurra? ¿Debo comprar repelentes, espirales, sahumerios y tabletas ahora para tener para el próximo año o la africanización de mi país terminará antes de septiembre? ¿Y si compro de todo ahora y resulta que el año que viene los mosquitos son 2.0 y ya no sirve lo que compré este año?

De pronto noto que mis palpitaciones se aceleraron; es muy tarde y ya no puedo seguir mirando los dos últimos videos, así que vuelvo a embadurnarme con repelente (ya pasaron dos horas de la aplicación anterior!!) y empiezo a cumplir con mis compromisos laborales. ¡Cómo me gusta trabajar!

Dengue: informar es fundamental

Marisa Conde comparte con nosotros una miniquest sobre el dengue.

Por otra parte, lo mejor que leí sobre el tema es este documento del Pami al que accedí gracias a @nelbaquintana vía Twitter: Prevención del Dengue

Estoy con miedo y con bronca por el tema: se trata de una enfermedad tropical, y ahora la padecemos como consecuencia del calentamiento global. Esto hace evidente que con conocer los problemas que traen nuestras acciones no basta para que la humanidad logre resolverlos. Por el momento, somos esclavos de errores que ya conocemos pero no logramos dejar de cometer.

Fernando Pelillo en su blog también recomienda este material del canal Encuentro sobre el Dengue

Cambiar el idioma de una plataforma Moodle en FreeHostia

Algunos lectores que siguieron los pasos que yo recomendé para tener una plataforma Moodle en FreeHostia me comentan que no logran cambiar el idioma.

Voy a explicar cómo poner en español la plataforma:

1) Entrar a la plataforma con el usuario administrador.

2) Entrar en la opción Languaje, Languaje Packs.

3) No estará disponible el idioma español. Hay que bajar el paquete (download)

Bajar paquete de idioma de Freehostia

4) Entrar al panel de control (es una dirección diferente a la de la plataforma Moodle: http://cp.freehostia.com/members/) con los datos recibidos al registrarse en FreeHostia. Hacer clic en File Manager.

File Manager

5) Hacer clic en la carpeta con el nombre de la plataforma, y dentro, en la carpeta Lang.

Carpeta Lang

6) Subir (Upload) y descomprimir (Unpack) el archivo de lenguaje obtenido previamente:

Subir y descomprimir

El lenguaje ya estará disponible en la plataforma. Para configurarlo, ir a la opción Languaje Settings y elegirlo en el desplegable Default Languaje.

Establecer lenguaje por defecto