Blog sobre tecnología, diseño y comunicación

Activo desde 2005 hasta 2019.

ZeroBundle, completo paquete de recursos gratis para el diseño web

Sebastián Thüer · 14.02.2012 ·

Iconos, texturas, elementos de interfaz, menús de navegación, botones, tablas, pinceles y más en Zero Bundle. Este paquete tiene varios elementos interesantes para los diseñadores web que seguramente te ayudarán la labor diaria.

Generalmente estos paquete gratuitos no suelen ofrecer recrusos de calidad. Sin embargo, esta es la exepción. Va la pena dejar el mail para descargar varios megas de recursos que podemos necesitar en algún momento. El sitio es de los creadores de Mighty Deals.

Atención: El paquete es gratis por las próximas 36 horas… ¡apurate!

Comprendiendo la semántica del HTML5 a través de un diagrama de flujo

Sebastián Thüer · 13.02.2012 ·

Una de las principales características de HTML5 son sus posibilidades semánticas. Si antes usábamos DIV para dividir las diferentes unidades de información sin importarnos muchos sobre el tipo de contenido que había dentro, HTML5 nos ofrece un abanicio bastante más amplio: NAV, ARTICLE, ASIDE, SECTION, FIGURE y más.

La semántica es importantes porque ayuda a definir la naturaleza del contenido que se está mostrando. Si bien visualmente no hay grandes diferencias -podemos usar DIVs y modelarlo con CSS- desde el punto de vista lógico es mucho mejor que un intérprete como el el navegador pueda detrminar si lo que estamos mostrando es un menú para acceder a diferentes secciones, el artículo principal de una nota, una información complementaria o la sección de una monografía. En el futuro, seguramente los diferentes dispositivos harán uso intensivo de la semántica.

El problema para los diseñadores web es que a veces no está demasiado claro qué etiqueta utilizar en función del contenido que irá dentro. ¿Si es una noticia tengo que utilizar ARTICLE? ¿Si es la segunda parte de una nota en serie tengo que utilizar SECTION? ¿FIGURE se utiliza para tablas, ilustraciones, fotos o para todo?

Para ayudar a comprender mejor el funcionamiento de cada etiqueta el sitio HTML5 Doctor ha elaborado un diagrama de flujo bastante clarificador. Para quienes no sepa cómo funciona esto es bastante simple: Se comienza en Start y hay que ir respondiendo las preguntas para deterinar qué etiqueta conviene utilizar. Ojo, si el contenido no tiene ningun valor semántico seguimos utilizando el viejo y conocido DIV.

Internet & TV: Las búsquedas durante el Super Bowl [infografía]

Sebastián Thüer · 10.02.2012 ·

El Fútbol Americano es un de los pocos deportes que nunca me han atrapado como espectador pero no por ello dejo de reconocer que, junto con la final del Mundial de Fútbol, el Super Bowl es uno de los mayores eventos televisados del planeta con 111 millones de espectadores un una media de 3,5 millones de dólares para un anuncio de 30 segundos.

Por esta razón, ofrece una interesante oportunidad para analizar de qué forma los espectadores de TV utilizan las nuevas tecnologías, antes, durante y después de la transmisión televisiva. En este caso, Google ha producido una excelente infografía donde muestra algunos detalles de lo que consitituyen las búsquedas a través de su página.

Algunos datos interesantes: las búsquedas previas están enfocadas a los ritos que se ejecutan durante la visualización de grandes eventos como preparar comida (super bowl recipe y super bowl layer dip, hot wings), realizar apuestas (super bowl bet) y festejar (super bowl party). Como es de esperarse, durante el entretiempo se buscaron datos sobre los jugadores que protagonizaron los momentos más importantes y la comentada actuación de Madonna pero hay algo mas: el 41% de las consultas realizadas en el entretiempo se hizo desde dispositivos móviles, algo cada vez más habitual cuando se mira TV. Para el pospartido un interesante dato: las publicidades emitidas en YouTube fueron vistas 30 millones de veces.

Argentinería, diseño de Argentina para el mundo

Sebastián Thüer · 09.02.2012 ·

Argentinería es un nuevo sitio -no tiene más de 6 meses- que tiene por objetivo ofrecer a los diseñadores y artistas argentinos un lugar para mostrar y comercializar sus productos. Por el momento, la web solo trabaja con productos de diseño tangibles: ropa, objetos decorativos y artículos de librería, básicamente.

«La metodología es muy simple, desde el sitio se proveen herramientas para que diseñadores, artesanos y artistas creen su espacio de venta, publiquen sus producciones y las vendan tanto en Argentina como en el exterior. El sitio muestra los productos con imágenes, descripciones, precios y contempla un usuario comprador y uno vendedor para participar en la comunidad y las actividades», dice Vanina Artus quien es parte del proyecto del sitio web.

Luego de la crisis económica argentina del 2001, comenzó a desarrollarse el diseñador independiente que generaba series limitadas y pequeñas de objetos para vender en locales comerciales. Poco a poco se generó una comunidad que atrajo la atención de muchos consumidores y desde el 2002 la oferta es extendió y hoy las carreras de diseño suman unos 20 mil inscriptos anuales, agrega Artus.

El sitio surge mediante un proyecto de diseñadores, ilustradores e ingenieros en sistemas que participaron de una convocatoria de Capital Semilla realizada por Sepyme -Secretaría de la Pequeña y Mediana Empresa y Desarrollo Regional, del Ministerio de Industria de la Nación- y recibieron un préstamos para impulsar su proyecto y lanzar el sitio web.

Una plataforma para diseñadores

Desde el punto de vista de los diseñadores, Argentinería funciona como una plataforma para la venta de productos. Cada diseñador o equipo de diseño se da de alta para crear un perfil, abrir la tienda y subir los productos. Un punto interesante es que se solicitan datos de contacto para verificar la autenticidad de los diseñadores y los productos que venden.

El sitio web funciona como un carrito de compras tradicional pero con algunas particularidades. Al ser un intermediario entre diseñadores y compradores, cada producto es procesado de forma diferente: se puede comprar un par de zapatillas por un lado y cortinas para living por otro; cada uno con sus método de pago, gastos de envío, etc.

Otro punto interesante es que tiene un sistema de calificaciones al estilo de Mercado Libre donde se puede ver el historial de transacciones de cada vendendor y lo que comentaron los compradores.

En el pie de página figuran los logos de Mercado Pago y PayPal, pero en realidad los métodos de pago lo estasblece cada vendendor. Lamentablemente, la mayoría solo acepta transferencia bancaria lo cual limita las posibilidades de ventas internacionales.

Si sos diseñador y no sabés donde vender tus creaciones, Argentinería es una opción que te permite tener rápidamente una web en línea para ofrecer tus productos. Todo está explicado con mucha claridad y con una imagen muy profesional.

Color Thief, obtener paletas de color a partir de una imagen

Sebastián Thüer · 06.02.2012 ·

La elección y construcción de una paleta de color para el diseño web probablemente sea una de las tareas más delicadas e importantes para determinar el look & fell de una aplicación. Definir el color dominante, sus variaciones tonales y uso de complementarios es una tarea que suele llevar bastante tiempo y donde tenemos el auxilio de varias herramientas como Adobe Kuler y aplicaciones como Website Color Schemer que a pesar del tiempo sigue siendo un de mis favoritas.

Pero la popularización de los móviles con cámara y los smart phones ha hecho que muchos diseñadores comencemos a tomar fotos solamente cuando vemos un paisaje, detalle o ambiente que nos resulte «inspirador». De estas imágenes casuales suelen derivar composiciones y, como no, paletas de colores que luego utilizamos en nuestras creaciones.

Por eso me ha sorprendido gratamente saber que existe una bibioteca de JavaScript que permite analizar los colores predominantes de una imagen como Color Thief. Esta aplicación, analizar las imágenes y puede obtener con bastante buen criterio una paleta de colores. Pensemos que con esto podemos crear una galería de fotos para buscar por colores. Podemos hacerlo para nuestra propia bibioteca de imágenes o incluso con imágenes de stock que hayamos adquirido.

Otra posibilidad de este librería: hacer que la tonalidad de una interfaz se adapte a una determinada imagen de forma automática. En definitiva, un excelente ejemplo de intersección entre diseño y programación.