Ciber Geek

Hace unas semanas había hecho un pequeño experimento con patrones utilizando D3.js y números pseudo-random generados por la función Math.random() de Javascript. El resultado fue el que pueden ver aquí abajo. Sin dudas, arte abstracto del mejor nivel.

Pixelamo con D3.js

Algo que había descubierto era la imposibilidad de incorporar Javascript fácilmente en los posts de WordPress, y para lo cual escribí el siguiente plugin que se llama Script Embeder, por ahora solo está disponible en GitHub, pero cuando termine de pulirlo voy a ver si lo subo a los repos oficiales de plugins de WordPress. Actualmente se encuentra totalmente funcional, así que pueden usarlo si quieren, y si tienen algún problema me avisan y los ayudo. Seguir leyendo »

Hace unos días, al menos en las redes de Personal Argentina, los Moto G recibieron la actualización a KitKat 4.4.4, no hay muchos cambios, uno de los principales es OpenSSL. Pero sí hay algo interesante y que les puede servir a algunos de ustedes.

Resulta que a varias de las personas que conozco que tienen un Moto G, les comenzó a suceder que la pantalla se les ponía negra o se le activaba la cámara mientras usaban el teclado. No estoy seguro de sí el problema era la app del teclado de Google, o que exactamente, porque desafortunadamente no pude reproducir el problema. Pero lo que sé es que luego de la actualización a KitKat 4.4.4, el problema desapareció.

El aviso de disponibilidad de KitKat 4.4.4

Algunas de las funcionalidades, además de las ya mencionadas, son:

• Posibilidad de pausar y reanudar la grabación de vídeos.
• Se actualizó la interfaz de marcación del teléfono. Es mas “linda”, pero el paso extra para acceder a todos los contactos la hace un poco engorrosa, algo que ya pasaba anteriormente.

¿Cómo saber si está disponible para mi Moto G?

Deben ir a “Configuración”, “Acerca del teléfono”, “Actualización del sistema”.

En fin, nada de otro mundo. Es de suponer que la actualización también llegue al Moto X y la linea Droid, aunque aún no se sabe cuando las operadoras locales harán posible la actualización.

É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.

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.

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.

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

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 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.

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.

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.

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í.