Diseño

El nuevo logo de Google es simple, y el mayor cambio se dio en la tipografía elegida. La razón principal para dejar atrás el viejo estilo fue la de facilitar el reconocimiento del usuario al usar una tecnología provista por la empresa, por ejemplo, el micrófono para las búsquedas por voz ahora tiene los colores característicos del buscador.

El nuevo logo de Google

La fuente del nuevo logo de Google es Product Sans

Se trata de una tipografía creada para la ocasión, y que tiene varias similitudes con otras fuentes existentes, por ejemplo, con Futura, Gateway, y sobre todo, con Sharp Sans. Pueden ver en la siguiente imagen una comparación que hizo un usuario del agregador de noticias Reddit.

Comparacion de Product Sans con otras fuentes

Las proporciones no son exactas, pero Sharp Sans sin dudas es muy similar a Product Sans, la fuente de Google.

Personalmente, la nueva tipografía me da la impresión de que le quita personalidad al logo, parece demasiado genérica, pero bueno, es una opinión basada en preferencias personales y no en conocimientos técnicos de la temática.

Lo que si me gustó, es el agregado de los colores que identifican a la empresa a los iconos genéricos de algunas funciones.

Si quiere leer más pueden ver este PDF que habla sobre Product Sans.

A partir del 23 de junio el plugin “Like Box” de Facebook dejará de funcionar, por si no lo saben, este plugin es el utilizado para que se pueda dar “Me gusta” o “Compartir” una pagina de Facebook desde un sitio web. Pero tampoco es un desastre, ya que en realidad solo está siendo reemplazado por otro widget llamado “Page Plugin”, el cual tiene prácticamente las mismas funcionalidades.

El aviso de Facebok

Configurar el Page Plugin

Crear un “Page Plugin” no es muy diferente a lo que nos tenía acostumbrados el “Like Box”, de hecho se utiliza la misma información para configurar el widget para incrustar en un sitio web.

• URL de la pagina de Facebook
• Ancho del widget (entre 230 y 500)
• Alto del widget (mínimo 130)
• Mostrar o no la portada de la página
• Mostrar o no los últimos posts de la página
• Mostrar o no la imagen de perfil de los amigos de la página

No se dejen estar, actualicen sus Like Box ya por la nueva Page Plugin. Por el momento el sitio está solo en inglés, pero no es necesario tener mucho conocimiento de inglés para crear el widget, de yapa les dejo traducidas las opciones por las dudas.

Opciones del Page Plugin de Facebook

Al ir modificando los campos y checkboxes van a ver como se modifica la vista previa que hay debajo, por lo que pueden experimentar con diferentes combinaciones hasta llegar a una con la que se encuentren conformes.

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. Leer mas »

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

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