Diseño Web

Chequea como funciona tu web en diferentes pantallas

Sebastián Thüer · 28.11.2012 ·

Pensar en diseñar una web hoy en día implica saber que la página será reproducida en infinidad de dispostivos: una computadora de escritorio con gran monitor, una pequeña netbook, una tablet o un móvil. Justamente, el diseño web adaptativo o responsive web design consiste en el empleo de una serie de técnicas para lograr que el diseño se adapta a la superficie que ofrece cada pantalla.

Si no tenés a mano este arsenal de hardware se puede echar mano a Responsivator, una herramienta que permite testear el diseño en una variedad de formatos: desde la pequeña pantalla de 320 x 480 píxeles que ofrece un teléfono hasta una resolución de escritorio convenicional hoy en día como 1280 x 800.

Responsivator es un proyecto de código abierto de la agencia Draftfcb.

Black Friday & Cyber Monday: Ofertas para diseñadores web [actualizado]

Sebastián Thüer · 22.11.2012 ·

«Black Friday» es el día en que los comercios de Estados Unidos lanzan su temporada de descuentos antes de las ventas de navidad. Pero los reyes del marketing han corrido la fecha y lanzan también el «Cyber Monday», es decir, el lunes siguiente donde el fuerte es la venta por Internet. Actualizado el 23, al final del post están las novedades.

Sea como sea, es un buen momento para hacer compras porque hay muy buenos precios. Veamos algunos ofertas que pueden interesarle a los diseñadores y desarrolladores web:

Adobe Cloud: 40% Off

La suite de diseño por excelencia llega con un buen descuento que trepa al 40% para sus licencias Cloud. Aunque no son muy atractivas para realizar una inversión a largo plazo, no esta nada mal tener la suite Creative Cloud por USD$30 al mes (si se hace un contrato anual). Atención, la oferta está disponible solo en ciertas regiones.

Pack de recursos de diseño: USD $47

En pocas horas termina esta impresionante oferta de Mighty Deals con colecciones de vectores, iconos, fondos, fotos de stock, logos y más por solo USD $47. Como siempre, una buena opción para tener en cuenta cuando el tiempo apremia.

#Bonus track: 250 elementos para crear tarjetas y mensajes de navidad y fin de año por USD $9,99

Dominios por USD $3,99

¿Necesitás registrar un dominio? Namecheap está ofreciendo por tiempo limitado el registro de nuevos dominios por USD $3,99 y transferencia por USD $4,99. Si te apurás, una buena oportunidad para ahorrar en un insumo básico de la web.

75% OFF en gráficos para diseño

DesignModo es un blog de diseño web que también vende algunos recursos premium a los usuarios. Ahora está ofreciendo un descuento del 75% para cualquiera de sus productos. La mayoría son elementos para interfaces gráficas pero también hay un muy buen paquete con elementos para crear infografías.

¡Remeras con envío gratis!

Esto no es estrictamente necesario pero si un buen autoregalo para las fiestas: dos remeras / camisetas con diseño 100% original en La Fraise. Simplemente elegís dos diseños que te gusten, los compras y al momento de pagar ingresás este código: TAKE2LF. Con eso el envío te sale gratis. Válido hasta el 25 de noviembre.

Actualización 23/11

Nuevas ofertas y descuentos de último momento para gente del diseño o desarrollo web… o simplemente geeks:

El comercio electrónico por país [infografía]

Sebastián Thüer · 16.11.2012 ·

Todo el mundo habla de la creciente importancia de los dispositivos móviles para la web y, en especial, para el comercio electrónico. Pero, ¿qué cifras realmente se manejan? ¿Vale la pena apostar por el comercio electrónico?

Mobify, una empres que ayuda a diseñadores y desarrolladores a crear versiones móviles de sitios web, hizo una interesante infografía con datos de su propia plataforma: son 20.000 sitios con unos 200 millones compradores online.

Algunos datos llamativos: Australia (47%) y Brazil (40%) encabezan el ranking de acceso web desde dispositivos móviles. Por el contrario, Rusia (7%) y Francia (8%) tiene la menor tasa de navegación con móviles.

Un apartado especial en el mundo de los smart phones y tablets lo ocupa Apple ¿Vale la pena gastar dinero optimizando los sitios para estos dispositivos? Para quienes quieran vender en Rusia, Australia o México sí: son los países con mayor porcentaje de tráfico desde iPads y iPhones. India, por el contrario, aparece como el país con menos interés por el hardware de la manzana.

Vía Mobify

Liffect, generador de animaciones en CSS3 para galería de fotos

Sebastián Thüer · 13.11.2012 ·

Una de las grandes incorporaciones del CSS3 es la introducción de algunos elementos básicos para realizar animaciones. Mientras que antes había que recurrir a Flash o trucos de javascript, la versión 3 del CSS incorpora de forma nativa algunos etiquetas que permiten mover los elementos presentes en la pantalla.

Lieffect es un generador de animaciones pensando para elementos que se muestran en listas, cómo sería una galería de fotos. Desde su página nos deja elegir el tipo de animación, su duración y nos ofrece que el código que debemos ingresar en nuestra página. Aunque las animaciones están basadas en CSS, igualmente se usa algo de javascript.

En lo personal, prefiero un sitio web calmo donde ningún elemento se escape de mi control y pueda navegar tranquilo. Sin embargo, a veces un pequeño toque de animación ayuda a realizar el diseño y dotarlo de personalidad. Eso sí: ¡No abusar!

Liffect: effect for lists

Flowplayer, un reproductor de video en HTML5 listo para usar

Sebastián Thüer · 08.11.2012 ·

Se acabaron los viejos tiempo de usar Flash para reproducir video. Con la llegada del HTML5 el uso de multimedia en la web no require de plugins adicionales sino que el propio lenguaje permite manipular elemetnos com video, imágenes vectoriales (con CSS3) y audio.

FlowPlayer es un reproductor de video que funciona sobre HTML5, CSS3 y JavaScript y tiene varias cosas interesantes. Se puede elegir entre tres interfases (skins) que se pueden personalizar, se adapta automáticamente al tamaño del dispositivo que reproduce el video -pantalla gandre, tablet o smart phone- y tiene bastantes funciones incorporadas: pantalla completa, uso de atajos de teclado, listas de reproducción, integración con Google Analytics para contabilizar las reproducciones de cada video y la posibilidad de crear enlaces hacia un punto específico (cuepoints).

El reproductor se incluye con un código bastante simple sin necesidad de las viejas etiquetas como IFRAME. Además, al estar basado en HTML5 es apto para la reproducción en iPad, iPhone y toda la gama de dispositos de Apple que no soporta la tecnología Flash. Aquí se puede ver a FlowPlayer en acción.

Además, el reproductor tiene una API para pasarle parámetros a través de JavaScript y se permite ser embebido al estilo YouTube. Se pueden descargar dos versiones: una gratuita con licencia GPL que incluye el logo de FlowPlayer y otra comercial para insertar la propia imagen corporativa.

El único problema: embeber un video con Flowplayer en WordPress da algunos problemas. Si bien existe un plugin, la verdad no es muy cómodo para alguien que enlace videos de terceros de forma ocasional.