Link del día: Live.js
Para diseñar y trabajar sobre HTML, mientras más atajos tomemos, mejor. Mucho del trabajo es repetitivo, y cuando queremos aplicar estilos, la cantidad de idas y vueltas de una ventana a otra es innumerable, por lo menos, hasta que logramos la perfección del diseño original.
Ya alguien tuvo la idea de circunvalar ese problema y surgió Live.js, un script más cerca a diseñar en el navegador, que automáticamente detecta cambios en el HTML, el JavaScript, o el CSS y los aplica a la página actual.
El proyecto surgió como una desviación desde BackFire, un sistema un poco más complejo (cliente-servidor) que nos permitía guardar los cambios en CSS que hacíamos con cualquier navegador inline (como FireBug, WebKit developer toolbar, etc.).
El punto es que Live.js automatiza todo eso y nos permite trabajar en los archivos de forma directa y ver los resultados en el navegador de forma transparente. Imaginen utilizarlo en conjunto con dos monitores. La productividad se eleva una muy buena cantidad.
Soy un zorrinito en vivo.
Link del día: El juego del test-driven-design
Recuerdo haber hablado más de una vez sobre distracciones y productividad. Varias de esas veces he mencionado que si podemos darle un toque interesante a lo que estamos haciendo, casi a modo de juego o de desafío, la actividad se vuelve mucho más divertida, y por supuesto, nosotros nos volvemos más concentrados hacia ella.
Un muy buen ejemplo de este caso es TDGotchi, autodefinido como una mascota virtual que nos permite mejorar nuestra práctica de Test Driven Design (TDD).
Se trata de una mascotita, una especie de ninja pixelado que tendremos en nuestro entorno de Eclipse, y que mientras vamos avanzando con ciertas reglas en el proceso de TDD (rojo a verde, verde a verde con refactor, verde a rojo con cambios?) este gana puntos y va evolucionando.
¡Velemos por la seguridad de nuestra mascotita y mejoremos nuestros procesos!
…y más allá de eso, tengamos en cuenta una buena forma en la que se da ese _toque especial _a los procesos tediosos.
Soy un zorrinito tedioso.
Link del día: Blueprint visual
Estaba leyendo un artículo sobre herramientas gratuitas para desarrolladores (27 Free Online & Offline Applications for Designers & Developers) cuando una de ellas realmente llamó mi atención. Se llama Boks, y es una aplicación de Adobe Air (eso significa, funciona en Mac, Windows y Linux) que nos permite trabajar sobre Blueprint.
Para quién no recuerda de qué se trata Blueprint, es un framework CSS basado en grillas, ampliamente utilizado para la rápida construcción de diseños, que nos permite crearlos armoniosos y esquematizados.
Boks nos da la posibilidad de hacer esto de una forma visual, una gran ayuda para aquellos que no hemos aprendido a utilizar el framework CSS más famoso de una forma totalmente profunda, y que queremos comenzar a utilizarlo.
Soy un zorrinito CSS.
Link del día: Galería de pre-loaders
Para aquellos que preferimos el mundo HTML+JS seguramente pensemos que Flash es un mundo en el que no conviene meternos, aunque Google fácilmente lo desmintió comenzando a indexar sitios en Flash, de forma que las primerísimas razones para no usar Flash se vieron derribadas.
Fuera de eso, y de la enorme discusión sobre la forma en las que se puede encarar un diseño gráfico o una experiencia del usuario, sabemos que Flash y/o SilverLight (o tecnologías similares) nos abren todo un nuevo mundo.
Y para muchos lugares, todavía se trata de un problema al momento de pre-cargar esa aplicación, ya que hay que presentar algo para que el usuario sepa que todavía estamos trabajando para su experiencia.
Por supuesto, no faltan quiénes quisieron hacer una galería para la inspiración de aquellos que no sepan cómo aproximarse, o aquellos que simplemente quiera ver cuáles son los mejores pre-loaders que hay por la web. Allí surgió Pretty Loaded, una galería de pre-cargadores en donde podemos ver muchos de estos interesantes ejemplos.
Soy un zorrinito precargado.
Link del día: Encapsulación psicológica
Este es otro de los links que me fue compartido via Twitter por la gente de BreakingDev, y el concepto es bastante simple, dejenmé presentarlo:
Se dice que una pieza de software está encapsulada cuando no conocemos su funcionamiento interno y sus aspectos externos nos proporcionan todo lo que necesitamos para hacerla funcionar. No nos importa cómo, nos importa el qué hace. El cómo es responsabilidad de ese software, no nuestra.
Este concepto es muy utilizado en el paradigma de programación orientado a objetos, en donde cada objeto encierra la responsabilidad de su propio comportamiento.
Sin embargo, en el artículo llamado Psychological Encapsulation se ve este tema de una mirada distinta: ¿Qué ocurre cuando no confiamos en la forma en la que una pieza de software realiza sus tareas? ¿Qué ocurre cuando tenemos un problema y el no conocer ese comportamiento interno nos impide solucionarlo?
Esto es lo que ellos denominan encapsulación psicológica, y supongo que otros simplemente lo pueden llamar fiabilidad de un determinado software, o, siendo más específicos aún, el gusto y confianza que cada persona en particular le tiene a un software en particular.
Creo que es un concepto a tener en cuenta al momento de diseñar (y usar!) software, trabajar con herramientas en las que no confiamos (o peor aún: no podemos confiar) es realmente una experiencia desagradable, y puede conducir a grandes bloqueos en nuestra productividad.
(Aquí podríamos hablar sobre distintos tipos de software, cuáles son de mayor confianza, si el open source comunitario o el software propietario que tiene a una empresa respaldando el buen funcionamiento del mismo, si los sistemas hechos de piezas simples integradas o si los sistemas que lo hacen todo, etc. Son libres de dejar sus opiniones.)
Soy un zorrinito de confianza.
Link del día: La ciencia de la actualización
Gracias a @nanojaus, si no me equivoco, me llegó un video interesante sobre la experiencia de instalar Windows 1.0 en una máquina virtual, e ir actualizando hacia las versiones posteriores (versiones mayores). No sólo eso, sino que se van probando distintas características a lo largo de las versiones del sistema operativo y se intenta mostrar cuánta compatibilidad hay con las versiones anteriores (en detalles, por supuesto que una investigación profunda tomaría muchísimo más tiempo).
El artítulo está aquí, pero posiblemente prefieran ver el video.
Este experimento me hizo pensar en cómo es que deberían ser las experiencias de actualización o instalación de software. Estas son las características que vienen a mi mente, las cuales también aplicarían para cualquier proceso que pueda tomar un tiempo:
- Mientras más simple, mejor, y sin perder el poder de cambiar el comportamiento del instalador.
- No mostrar información de más, solo confunde a los usuarios
- Siempre mostrar que estamos en proceso de hacer algo, no mostrar pantallas estáticas
- Permitir acceso (por alguna otra vía) a información detallada de qué ocurrió y qué se hizo
- Mientras antes puedan verse las características del producto, mejor (miren como Windows 98 & XP ya utiliza su modo gráfico para terminar la instalación)
¿Alguna otra idea para mejorar las experiencias?
Soy un zorrinito instalador.
Link del día: Cómo hacer un buen tutorial
Como ya había contado en unos links anteriores que ando siguiendo una serie de videos llamados Extra Credits, de parte de The Escapist ([1], [2]), unos videos sobre diseño y análisis de video juegos extremadamente interesante. Más interesante que los videojuegos (desde mi punto de vista), es todo lo que se puede aprender sobre diseño, psicología, sociología y marketing. Pero todo eso es otra historia.
Un punto clave de muchos juegos es el tutorial, aquella parte que nos enseña las reglas por las cuales el juego se desarrolla. Ahí es en donde estos muchachos hicieron el video llamado Tutorials 101. En este video nos enseñan muchas características que un buen tutorial debería tener, pero no puedo dejar de pensar que este mismo concepto aplicaría a tutoriales de casi cualquier otro tipo. Aparatos electrónicos, software de escritorio, aplicaciones web… todo debería seguir los mismos conceptos porque la razón que tienen es mucho más profunda.
Resumiendo el video, los puntos claves expuestos son:
- Menos texto, más interacción
- No mostrar todo junto, sólo lo que el usuario necesita por el momento
- Debe ser interesante y divertido
(se puede discutir mucho sobre esto, pero mi punto de vista personal es que rápidamente permita llegar a lo que el usuario desea lograr) - Debe mostrar la forma real en que se hacen las cosas, haciéndolas
- Debe estar basado en el feedback de usuarios reales, aquellos que usaron el sistema y encontraron dificultad en aprender determinadas cosas
- Debe poder saltarse cuando la gente no lo necesite
- Debe tener su información disponible en algún lado (sistema de ayuda)
¿Pueden pensar en algún otro punto importante para los tutoriales?
Soy un zorrinito de aprendizaje.
Link del día: Firefox 4 + Mozilla demos
Ayer salió a la luz la versión definitiva de Firefox 4, y en unas 24 horas ya logró tener más de 6 millones y medio de descargas. Un navegador popular, sin dudas. Podemos bajarlo y al mismo tiempo ver el movimiento en tiempo real de descargas a través de Firefox 4 Download Stats.
Cabe aclarar que Firefox 4 viene totalmente renovado, al menos en su interfaz gráfica y mucho de su funcionamiento interno. Las características que Firefox siempre ofreció permanecen ahí, y hay varias otras más. Por otro lado, su interfaz es mucho más limpia y minimalista (parece que todos los navegadores están siguiendo una tendencia que Chrome marcó) y por supuesto, soporta muchos de los nuevos estándares que se están desarrollando para la nueva web.
Fue de casualidad, gracias a un post en Twitter, en donde encontré un dashboard de ejemplos y características de HTML5 y tecnologías relacionadas, llamado HTML5 & Friends, en donde podemos ver muchas de las nuevas características en funcionamiento, y tener una explicación pequeña que podemos extender. Por otro lado, la web de Mozilla Demos (llamada Web O’pen Wonder) contiene muchos ejemplos e implementaciones de las cuales podemos aprender.
Soy un zorrinito actualizado.
Link del día: Herramientas para Chrome
Aquellos que tenemos que ver con el desarrollo web muy seguramente nos hemos apegado mucho a nuestro querido Firefox, gracias a la enorme cantidad de herramientas que la comunidad tiene para poder desarrollar. Muchos de nosotros también han encontrado en Chrome una alternativa muy interesante y hasta preferible, pero siempre tuvimos el problema de que la cantidad de extensiones para desarrollo era muy limitada.
Por suerte, Chrome mismo ha evolucionado al punto de poseer unas herramientas de desarrollo integradas muy profundas e interesantes, sin necesidad de ninguna extensión. Pero aún así, el mercado de extensiones para Chrome ya ha crecido bastante, y es hora de ver alguna de las opciones que tenemos para personalizar el uso que le damos en nuestra tarea de desarrollo.
Rosa Gutiérrez fue quien me compartió a través de Google Reader esta enorme colección de extensiones para desarrollo en Chrome llamada 40 Useful Google Chrome Extensions for Web Designers. La verdad no las he contado, pero creo que son más de 40. Aunque no lo fueran, realmente valen la pena, les recomiendo a los usuarios de Chrome que le echen un vistazo, muy seguramente encontrarán algo de su agrado.
Soy un zorrinito cromado.
Link del día: IE6 Countdown
Alguna vez mostré un link sobre un script para sitios web llamado IE6 Upgrade Warning, la idea del mismo es forzar a que los usuarios tengan que actualizar su navegador web para continuar en la navegación del sitio, y que si este script se hacía lo suficientemente conocido, podríamos contar con una internet un poco más actualizada.
Resulta que no dio tanto resultado como quisieron (a pesar de que el proyecto sigue activo hasta estos días), pero Microsoft ha puesto cartas en el asunto. Sí, Microsoft mismo ha determinado que debe existir una cuenta regresiva para la existencia de Internet Explorer 6, y dicha cuenta regresiva forma parte de la campaña de publicidad de Internet Explorer 9. Su sitio central se llama Internet Explorer 6 Countdown.
Me llegó la noticia a través de MicroSiervos, y como bien ellos dicen: si los propios creadores de la herramienta piden que se deje de utilizar, por algo será necesaria la muerte de este software. Yo no lo dudo: más allá de los chistes que se pueden hacer sobre los problemas que da, el tenerlo que tener en cuenta al momento de crear aplicaciones web significa un gran lastre que arrastrar, y un impedimento para el avance de las tecnologías web.
Dicho sea de paso, Internet Explorer 9 está ya disponible en su versión final para ser descargado, en el sitio de Beauty Of The Web. Tiene una interfaz renovada (agradable a mi gusto), buena velocidad, un buen manejo de JavaScript y soporte de HTML5. Esa fue una primera mirada rápida y me agradó.
Soy un zorrinito actualizado.