Alpha's Manifesto

A black and white figure's thought-hive

Comentarios sobre The State of Responsive Web Design

Opiniones propias sobre muchos problemas mencionados

Acabo de terminar de leer un artículo largo y genial de Smashing Magazine, llamado The State of Responsive Web Design. Como el título lo indica, habla sobre el estado actual del diseño de webs responsive y sus pros y contras. Mucho mejor aún, habla de los distintos problemas a superar y la forma en la que la tecnología de hoy nos permite hacerlo. Pero no es una introducción al tema, sino que abarca todos esos problemas que aún no tienen soluciones definitivas. Totalmente novedoso.

Sin embargo, como bien dicen al final, esto no es ni el comienzo, y sobre las cosas mencionadas tengo mucho que mencionar. Quería dejar mis comentarios por aquí.

(Read more →)

The Noun Project

Iconos minimalistas para todas las ocasiones

The Noun Project es una colección de iconos minimalistas, la gran mayoría libres para usar. Cada imagen tiene asociada un sustantivo que lo describe, y por lo general la imagen es una buena representación de esa palabra. Disponible tanto en inglés como en español para buscar, esta galería de imágenes nos permite inspirarnos como diseñadores y conseguir una buena cantidad de iconos para nuestros sistemas de necesitarlos.

También existe una visualización por categorías que nos permite interiorizarnos en alguna de ellas en particular, que puede estar asociada a nuestra necesidad.

Soy un zorrinito iconizado.

Pruebas con VS11: Día uno

Comenzando a explorar lo que la beta nos ofrece.

Comencé como un proceso de autocapacitación mi investigación personal de las características que Visual Studio 11, todavía en Beta, nos ofrece. Pretendo documentar mi experiencia personal porque si bien no va a ser una buena indicación de cómo es el producto, puede que detecte muchos pequeños problemitas o cosas que estarían buenos tener en cuenta, al menos prepararse para ellos. Conociendo mi suerte, estoy seguro de que algo voy a romper.

Instalación

VS11 Install screenLo primero que tengo que comentar es la instalación. La interfaz está mucho más refinada, pero más allá de eso, es un poco más oscura en el sentido en que no tenemos mucha información sobre qué está pasando. No he tenido problemas con la instalación, pero imagino que debe ser más complicado de hacer troubleshooting si ocurriera algún error. Por último, la instalación toma su buen par de horas, quizá extendiéndose hasta cuatro o cinco. Si tiene que bajar los updates de internet, es lo suficientemente inteligente como para hacerlo en paralelo mientras otra cosa se instala, así que tener una conexión pobre no debería ser un problema a menos que fuera muy acotada.

Mi instalación terminó sin problemas excepcionales. Una característica rara que me ocurrió en una de las dos máquinas que la instalé (solo en una) es sobre un paquete que debe continuar la instalación. Como varias de las instalaciones de VS, a veces es requerido un reinicio hasta que se pueda continuar la instalación. La forma en la que el instalador se asegura continuar luego es poniendo una entrada en el registro para volver a correr la próxima vez. Resulta que en mi caso, ese ejecutable se inició pero nunca se quitó del registro. Nunca supe si ejecutó correctamente o no porque ese ejecutable en particular parece no tener interfaz. Tras cada reinicio que yo hacía, el ejecutable volvía a pedirme permiso (ya que es un archivo bajado de internet).

Ese se encuentra aquí, algo que futuros visitantes pueden encontrar muy útil para diagonsticar problemas:

"C:\ProgramData\Package Cache\{a3c0442e-f8f7-4089-ac77-1e0c50901f63}\vs_ultimate.exe" /burn.log.append "C:\Users\<User>\AppData\Local\Temp\dd_vs_ultimate_<timestamp>.log" /uninstall /quiet -burn.related.upgrade

Por el comando que ejecuta y deja en el archivo de log, parecería ser un servicio de updates y de rollout de nuevas funcionalidades agregadas. Si estoy en lo correcto, no deberían preocuparse ya que VS tiene su propia plataforma de updates. Lo que yo hice es simplemente quitar eso de mi inicio. No he visto complicaciones hasta ahora.

Interfaz, UI y UX

Lo primero que voy a probar es hacer algo parecido a mis tareas diarias.

Mi primer sorpresa es la elección de colores que tuvieron con el entorno. En general, todo grisáceo y de colores muy uniformes. Es fácil ver el texto pero no lo es tanto como el contraste que proponía el blanco sobre azul de la versión anterior. Es difícil distinguir las ventanas sobre el fondo, especialmente si no tienen contenido. Cada tanto los mensajes de diálogo pierden ese estilo y vuelven al estilo normal que tienen las ventanas de Windows, dejando ese feo sabor del cual todos se quejan de la suite Adobe, en donde el programa realmente desentona con el entorno en el que está corriendo.

Recordemos nuevamente que está pensado también para Windows 8, con lo que mi apreciación podría ser equivocada, pero no lo he probado aún. Esa es otra historia y probablemente otra serie de posts.

VS 11 UIComo pueden ver en el screenshot que tomé, también optaron por eliminar los colores de los menúes contextuales, específicamente les muestro el de Intellisense, el cual me parece una pésima decisión. La habilidad de distinguir propiedades, métodos, clases, enumerados y campos por color a simple vista era una bendición. Las selecciones de arriba siguen siendo dropdowns anque parezcan desaparecidos, y los íconos más el gris claro/gris oscuro/negro de toda la sección derecha lo hace difícil de acostumbrarse. Creo entender la intención: esta pantalla nos concentra, sin duda, en el código, y eso definitivamente debería ocurrir.

El entorno completo parecer ser más rápido y responsivo, sospecho que estará utilizando la misma tecnología de async que el nuevo framework ofrece. ¿Recuerdan el cuadro de diálogo de Add Reference, que fácilmente detenía todo unos minutos hasta recuperar el listado de assemblies? Sigue tardando, pero ya no significa un problema, el entorno sigue respondiendo como si nada estuviera ocurriendo de fondo.

VS 11 Error listUna muy buena adición que encontré es la capacidad de filtrar errores desde el listado de errores de compilación. Esto nos permite dar un paso adelante, cuando ya estamos acostumbrados a determinados errores causando otros, pudiendo concentrar nuestro esfuerzo en solucionar esos primero. Como pueden ver además, el filtro funciona para cualquier campo, lo cual resulta totalmente natural.

VS11 Unit Test ExplorerDesafortunadamente, parece que esta característica no se comporta de forma consistente en todas la ventanas. Otra que me interesa que vean es la ventana Unit Test Explorer, otra que estaremos viendo muy seguido, más todavía si trabajamos con TDD. En este caso la búsqueda sólo funciona con el nombre de las pruebas y uno debe presionar enter para aceptar la búsqueda, cuando en la anterior ya con sólo filtrar podíamos ver nuestro filtro aplicarse.

Esta ventana, sin embargo, tuvo un rediseño visual algo importante y me agrada el cambio. En las versiones anteriores los detalles de una prueba se encontraban separados de la prueba en sí, esto hará mucho más fácil poder ver qué pasa con cada una de las pruebas, y asumo que su output también aparecerá aquí.

Parece que otra característica que tampoco nos dejará muy contentos es algo que estaba siendo muy aclamado. Cualquiera que reconozca la frase “Expression cannot contain lambda expressions” sabe de qué estoy hablando. Así es, esa frase sigue presente y nos sigue molestando aún en esta nueva versión. Por favor, espero que la versión final del IDE agregue esto porque es una funcionalidad que puede salvar horas y horas de desarrollo.

VS11 Quick Watch

Desafortunadamente alguien ha decidido que agregar coloreado al texto que tipeamos ahí fue más importante, y terminamos con una versión algo buggeada de texto formateado (como pueden ver en la imagen anterior, ambas decepciones juntas). No es realmente nada tan terrible como algo que no funcione, pero muchos queremos poder efectuar un .Where() para no tener que pasar por más de 200 elementos en un enumerable.

En otra de mis pruebas descubrí que existe algo llamado Parallel Watch, que básicamente es una ventana de watch que nos permite ver valores de una misma variable a lo largo de distintos threads. Supongo que esto puede volverse confuso ya que distintas intancias de una misma variable son en realidad distintas variables e instancias no-thread safe son en realidad la misma variable. Eso o yo me estoy perdiendo algo del concepto de trabajar en paralelo. (Si algún lector tiene algo que aportar, es bienvenido.)

Dispuse la siguiente prueba para verificar su funcionalidad, y como sorpresa extra, encontré que puedo editar el código mientras está ejecutando, algo que anteriormente sólo ocurría en determinados casos. Me trajo un poco de satisfacción (aunque no tanto como me habría dado poder usar lamdbas en el quick watch.)

Desafortunadamente mi prueba no resultó muy exitosa, ya que al elegir una ventana de watch para poder ver, el siguiente mensaje se hace presente (les dije que algo iba a romper):

VS11 Parallel Watch Error

Creo que de todos momentos puedo estar en el camino equivocado, ya que en la ventana de Parallel Tasks nada aparecía. Seguramente tenga algo que ver con la nueva característica de async tasks de .NET 4.5.

Es un muy buen punto de partida para retomar mi investigación, ya que mi tiempo se acabó por hoy.

QArt Codes

Imágenes en QR Codes

Russ Cox publicó hace no mucho un artículo sobre lo que él denomina QArt Codes, que son QR Codes con una imagen en ellos.

Él comienza contando sobre una anécdota de varias empresas que para marketing generaron QR codes que tenían logos o imágenes en ellos. Sin embargo, estos QR codes eran incorrectos y sólo funcionaban porque hacían uso de la capacidad de corrección de errores. Él se propuso entonces hacer un sistema que pudiera incluir una imagen en un QR code con un formato totalmente correcto. En dicho artículo, nos explica cómo es el funcionamiento y formato de los QR codes y cómo esto se puede utilizar para la inclusión de una imagen.

El sistema resultado de dicha investigación se llama QR y su código está disponible en Google Code.

Cabe destacar que el análisis no es extensivo de todo lo que un QR Code debe incluir. Por mencionar algo extra, en un post de Google Plus él nos cuenta que debe incluir ciertos píxeles de margen para que todos los lectores puedan identificarlo (cosa que Facebook no tuvo en cuenta a la hora de pintar un QR code en su techo, pero Phillips & Company sí).

Soy un zorrinito cuadrado.

Link del día: Adaptive Images (mobile)

Nuevamente de la gente de CSS Tricks me llega un dato de una librería muy útil. En este caso es Adaptive Images, es una librería en PHP que nos permite servir imágenes con el tamaño justo dependiendo del tipo de cliente. No sólo se hace la diferenciación del tipo de cliente, sino del tamaño de la pantalla real.

Cómo es que funciona? Básicamente al momento de cargar la página un javascript se ejecuta antes de que ejecute el cuerpo. Este javascript carga una cookie en nuestro navegador con esa información de tamaño de pantalla, y cuando nuestro navegador procede a buscar las imágenes, ese cookie viaja también y el servidor puede devolver una imagen del tamaño justo.

Por supuesto que posee varias opciones de configuración para servir imágenes de la mejor forma para nuestra necesidad, y por supuesto, podemos servir una imagen de baja resolución si la ventana del navegador tenía poco espacio y luego se amplió. Pero hay workarounds para todo, de forma que sigue siendo una herramienta útil.

Soy un zorrinito adaptativo.

Link del día: Img to CSS

Del cajón de las utilidades curiosas y técnicas que algún día puede que utilicemos, llega la aplicación web llamada Img to CSS, que, como su nombre lo indica, transforma imágenes en CSS.

En el fondo no es taaaaaaaan verdad, porque termina generando tablas con celdas de un píxel (o más, si se trata del mismo color) que con CSS inline genera los colores para la imagen. Esto puede ser interesante para enviar en mails, y que los destinatarios puedan ver imágenes sin necesidad de aceptar la bajada de imágenes. Sin embargo, no se puede utilizar en todas las formas que usamos las imágenes comunes.

Soy un zorrinito curioso.

Link of the day: Face detection code

Well, face recognitions systems are not actually the last thing in technology, but still may be something new for us who couldn’t have a grasp of it and try it out in our own code. Of course, maybe we’re not fancy enough to come up with an algorithm out of ourselves and may just have ideas to use it, not to develop it.

For us then, we can go ahead and try Face Detection in any language, a blog post from Tukiun referring to OpenCV, the Open Computer Vision library that will allow us to make image processing something simple. It has been ported to different languages so it is sure that some of them will be suitable for us.

I’m a recognized little skunk.

Link del día: Buscar imágenes desde imágenes

Alguna vez hablé sobre un sistema que nos permitía buscar imágenes que contuvieran ciertos colores. Pasaron los meses y ya se convirtió en algo común que todos podemos hacer a través de Google Image Search. El buscar imágenes similares también es algo que podemos hacer, también desde Google Image search.

Pero cuando tenemos una imagen, cómo la utilizamos sin palabras para buscar en donde se encuentra? O para buscar imágenes similares?

Entonces es cuando queremos hacer image reverse search, es decir, buscar desde imágenes, o buscar imágenes similares.

La web de GazoPa (gracias @baldosin) nos permite hacer esto, subiendo una imagen, linkeando una desde otra web, dibujando, usando la cámara web, o introduciendo palabras clave que creemos están relacionadas.

Eso de dibujar es muy similar al software imgSeek para Linux (también gracias a @baldosin), que nos permite utilizar esta funcionalidad de una forma más personal.

Finalmente, mi preferido es TinEye, que a mi parecer me ha dado mejores resultados y parece que está creciendo.

Soy un zorrinito rastreador.