El SEO y la accesibilidad

Éste post tiene como objetivo dar el puntapié inicial a una serie de post relacionados con el tema de la web y la accesibilidad, o como le dice el resto del mundo, accesibilidad web.

cuadrado negro, metafora para representar la falta de vision

La web para no videntes

Shall we?

Bueno, para empezar a estudiar el tema elegí hacerlo desde un punto de vista de algo que conozco un poco más y con lo que me siento cómodo, que es el SEO, específicamente on-page, y la razón por la cual me apoyo en él se debe a la gran similitud que hay entre las técnicas para hacer un sitio accesible para personas con discapacidades y hacer lo mismo pensando en los robots de los buscadores.

Accesibilidad y SEO

Las similitudes son muchas, empezando por las imágenes, el atributo alt es algo que no dudamos que es importante, no solo para mejorar nuestro ranking, sobre todo en la búsqueda de imágenes, sino que también no es raro acceder a un sitio y que no carguen las imágenes. De hecho, puede ser un buen truco para “acelerar” la conexión a Internet. Sin dudas, casi todos lo consideramos algo necesario.

foto del robot r2d2

R2D2 tiene mas onda que Asimo

Éste es un primer ejemplo de las similitudes, y de como el SEO on-page puede ser beneficioso por varios motivos.

Contenido estructurado

Uno de los puntos que resaltan en cualquier guía sobre SEO, y que también está íntimamente relacionada con la accesibilidad. Empezamos por la etiqueta title, tener un titulo descriptivo es muy importante, para todos, no es nada nuevo, así que no se dejen llevar por la moda del clickbaiting que hizo tan popular a BuzzFeed.

Es importante respetar las estructuras, tablas con títulos (th), listados en vez de párrafos con saltos de linea, y algo especial son los formularios, las etiquetas son importantes.

Los links, evitar cuando se pueda los click aquí, clic allá, etc. Los lectores de pantalla no leen el atributo title, así que ténganlo en cuenta. Además, es bueno para el SEO =) (los emoticones deben ser algo complicado también, queda para la próxima). También eviten llenar el comienzo de su sitio con links y contenido no relacionado, y si lo hacen, al menos pongan primero un link con el texto “Pasar al contenido”, o algo similar.

No todos son no-videntes, hay otros temas a considerar, como las personas que tienen algún tipo de daltonismo, y enfermedades similares, en las cuales los contrastes son importantes.

HTML5 por suerte hace las cosas un poco mejor, y además, si usan Bootstrap, éste framework se ve que fue hecho con la accesibilidad en mente, ya que constantemente fomenta las buenas practicas.

Internet Explorer, es uno de los browsers mas usados, y si bien el tamaño de la muestra es chico, ésto es lo que dicen en ésta encuesta realizada por WebAIM.

Si quieren ir leyendo más, pueden acceder a la sección dedicada a la accesibilidad web de la W3C.

Acceder a WordPress en una red local

Con la llegada del responsive design, y todos los nombres cool que tienen las paginas que se adaptan a diferentes tamaños de pantallas, es recurrente la necesidad de probar éstas paginas en diferentes dispositivos, para lo cual, entre varias técnicas, una de mis favoritas (?) es acceder al servidor en la PC en que estamos desarrollando mediante otros dispositivos, todos conectados a una red local. Ojo, ésto no funciona si están usando el 3G de su teléfono, tienen que estar en al misma red por cuestiones de simplicidad, o sea usar el WiFi, si se quieren poner a jugar con las configuraciones avanzadas de su router, bueno, pueden hacerlo.

wordpress logo

WordPress

Acceder a una instalación de WordPress en la red local

Antes de hacerlo deben configurar el servidor (para Apache), de modo que les quede así la directiva Listen.

Listen *:80

Ésto puede llegar a variar, pero él anterior es el caso mas común.

También deben fijarse de que el Firewall no les esté filtrando el acceso.

Y aquí, la magia, deben agregar lo siguiente al archivo wp-config.php.

define( ‘WP_SITEURL’, ‘http://’ . $_SERVER[‘HTTP_HOST’] . ‘/directorio_donde_esta_wordpress’ );
define(‘WP_HOME’, WP_SITEURL);

Es pura magia, traída a ustedes gracias a las constantes WP_SITEURL y WP_HOME. Antes de hacer ésto, si podían acceder a su blog/sitio de WordPress, varias cosas no iban a funcionar, como por ejemplo la hoja de estilos y demás, tengan en cuenta que es fundamental utilizar las funciones de WordPress para definir rutas, si están hardcodeadas o escritas a mano, ésto no va a funcionar.

Ésta modificación al archivo wp-config.php lo que hace es modificar el valor sin interferir con el valor que está guardado en la base de datos, así que después es solo cuestión de borrar éstas lineas de código y listo.

D3.js, diseño de indumentaria basado en patrones y números aleatorios

D3.js es una de las librerías mas populares de Javascript al momento de trabajar con gráficos, si bien no es la única, de las que probé, es sin dudas la más poderosa, lo cual no siempre es bueno, si quieren algo simple usen Chart.js.

¿Diseño de indumentaria? Discúlpame el atrevimiento pero ¿estás drogado?

No, bah, no sé, no, pero creo que no. Ok, arreglado el asunto los interiorizo un poco en mis delirios. Resulta que el otro día me llamó la atención el diseño de un short de Nike el cual es bastante peculiar, AD Pixelamo és el nombre de ésta belleza. Y lo primero que se me paso por la mente es que éste tipo de diseño puede ser “creado al azar”, lo cual me llevo a mas delirios místicos.

nike ad pixelamo

Ok, ésto parece una propaganda.

AD Pixelamo, con D3.js

Por suerte D3 hace todo tan fácil que en unos minutos ya tenía un prototipo funcionando, y obtuve resultados bastante buenos.

patron pixelamo rojo

Pixelamo con D3.js

La función básicamente genera un numero al “azar” entre 50 y 200, y se lo asigna a la primera componente de un vector RGB, que se corresponde con el color rojo. Si le asignamos el numero a la componente correspondiente al color verde, obtenemos lo siguiente.

pixelamo verde

Así se ve Hulk cuando le hacen zoom

El código del prototipo.

Bueno, hacer un montón de cuadrados de colores puede no parecerles muy interesante, así que para hacer mas divertidos éstos patrones estoy haciendo un plugin para WordPress para facilitar el agregado de código Javascript a los posts, ya que necesito un plugin que me permita añadir varios scripts, elegir el orden y que me de la opción de elegir la ubicación. Además, no quiero que los scripts se agreguen a todos los posts como hacen algunos plugins que andan dando vueltas por ahí.

De a poco vuelve el acceso a The Pirate Bay en Argentina

A tan solo 4 días de que la justicia argentina haya ordenado a los principales proveedores de Internet del país el bloqueo a The Pirate Bay en varios de sus dominios, el acceso ha vuelto, al menos en dos de los mayores ISPs del país, Arnet y Speedy, de Telecom y Telefónica, respectivamente.

the pirate bay argentina

TPB está devuelta

Aún no sé sabe si se debe a un retroceso en la medida original o será algo temporal debido a los efectos que tuvo el bloqueo en otros lugares, como el caso de Paraguay, que por depender de Argentina y Brasil para tener acceso a Internet, se vió afectado por la medida tomada por la justicia Argentina.

El pedido de la justicia a la Comisión Nacional de Comunicaciones había llegado debido a un juicio entre la CAPIF y el portal de supuestas descargas ilegales, igualmente, el bloqueó no dió buenos resultados, ya que no solo llamó mas la atención y termino haciendo propaganda a The Pirate Bay, en lo que fue un claro Streissand Effect, sino que también demostró que bloquear un sitio web es algo muy complicado debido a la gran cantidad de tecnologías disponibles, desde simples traductores de sitios web, pasando por proxies y llegando hasta TOR, aunque éste ultimo era un total despropósito en éste caso.

Recuerden, The Pirate Bay también almacena archivos totalmente legales.

Cuidado con el SPAM de Pro.Cre.Auto

Pro.Cre.Auto es un programa del gobierno argentino que tiene como objetivo fomentar el consumo de vehículos o facilitar el acceso a los mismos, como quieran. Lo importante en éste caso es el hecho de que se ésta enviando una gran cantidad de SPAM que, cuando menos, tiene como objetivo recolectar datos personales, incluyendo números de teléfono. Hay que aclarar que no es el gobierno argentino el que está enviando el SPAM, sino que se trata de alguien que se avivo para sacar obtener información y ganar algunos pesos con referidos o vendiendo bases de datos de emails y teléfonos.

El siguiente es el email en cuestión, esperemos nunca lo vean y su filtro anti-SPAM sea capaz de reconocerlo.

spam pro.cre.auto

Los spammers tienen mucho tiempo entre manos

El sitio al que llevan (plan-nacional.org) tiene 2 formularios, uno para completar con datos para el pseudo-plan Pro.Cre.Auto, y el otro para “conectarse” a DirecTV, si en ése punto no tuvieron dudas de que ésto no es algo oficial, el whois capaz los termine de convencer, y el hecho de que el sitio está hosteado en un servidor compartido en DonWeb.

whois plan-nacional.org

¿Quién es?

Lo que termina de confirmar de que no se trata de un sitio oficial, pero ésto, aunque simple, no es algo que las personas que menos conocen puedan advertir. Así que bueno, vayan advirtiéndole a su tío que hace clic en cuanto link encuentra.

Los mails

Recibí 2 mail en 2 cuentas diferentes con el mismo contenido, el asunto era “Actualice sus datos para poder ser contactado” y el contenido era el siguiente:

Estimado,

Recuerde actualizar sus datos, para poder ser contactado cuando se lancen las proximas entregas de descuentos y beneficios en Plan Nacional Autos para Todos

Para ingresar haga click aqui: plan-nacional.org

No dejes pasar la oportunidad!

Plan Nacional

Obviamente la intención es captar la atención de aquellos que quieren entrar al plan Pro.Cre.Auto. Esperemos no lo logren, por lo pronto voy a informar a DonWeb.