Un mundo manejado por robots, pareciera que la humanidad ha desaparecido, solo quedan algunos animales. Cualquiera podría pensar que en este lugar controlado por máquinas no hay lugar para la emoción, pero un pequeño amigo nos mostrará lo contrario.

Una triste historia de melancolía y anhelos de libertad. Un corto dirigido por Lewis Gray and Esra Guldal, a cargo de Smoking Robot.

Que tengan un excelente fin de semana!

Cada vez somos mas quienes no nos resistimos a tener una lista de tareas en nuestro móvil. Como comentamos ya varias veces, un listado de tareas (en el dispositivo que sea) es una herramienta por demás útil para organizarnos, por mas que en un principio no le veamos sentido porque al fin y al cabo, uno sabe lo que debe hacer. Sin embargo, tener ésto cerca y poder chequearlo cuando es necesario nos ayuda a ser mas productivos y enfocarnos en lo que realmente debemos hacer.

Al menos si el listado de tareas que utilizamos es efectivo, como en el caso de Got-It!. Primero porque cuenta con algo que muchos buscan y aun así varias herramientas similares dejan de lado: la sincronización con Google Tasks.

Segundo por el resto de sus funciones y su atractivo visual, inspirado como solemos ver actualmente en la estética limpia, clara y minimalista.

Para quienes suelan utilizar widgets (el cual no es mi caso), tendremos la opción pudiendo ver no solo el listado con las tareas que debemos realizar con mayor urgencia sino también la actual en forma mas pequeña. Completamente personalizable y en varios tamaños para que podamos ubicarlo con comodidad sin eliminar nada de lo que ya ocupe éste sector.

Cabe aclarar, ya no todos tienen celulares de alta gama, que la herramienta requiere Android 4.0.

Got-IT! – Tamaño: 882k – Descargar

Si bien no podemos negar que YouTube es una red social de videos por demás completa y que sus cambios visuales mejoró notablemente, no a todos les interesa la enorme cantidad de elementos que fue sumando. Por suerte para ellos hoy en día existen infinidad de agregados que se ocupan de ir personalizando las redes en general, quizás esperando que eventualmente se sumen a las versiones oficiales.

YouTweak for YouTube se encarga de quitar ciertos elementos si estamos navegando con Chrome, dejándonos personalizar YouTube de una forma bastante interesante.

Veamos sus características:

Remover videos de suscripciones: Quitaremos aquéllos que no deseemos ver de los usuarios a quienes estamos suscriptos, mediante un nuevo botón que aparecerá ofreciendo dicha acción. De hacer ésto, al estar basado en YouTube no veremos éste video aún si ingresamos a nuestra cuenta desde otro lugar en donde la aplicación no esté instalada.

Eliminar la reproducción automática: Algo que muchos queremos ya que en varios casos es molesto. Con un solo click lograremos que solo nosotros podamos comenzar la reproducción de un video.

Eliminar videos vistos: Sin la herramienta, al ver un video el mismo quedará ahi, solo que con un aviso de que ya lo hemos visto. Habilitando la opción desde el menú, directamente desaparecerán, haciéndolo mucho mas limpio a la vista. ¿Cómo? Veremos una nueva opción en el menú izquierdo del sitio.

Videos en HD: Automáticamente todos los enlaces del inicio nos llevarán a los videos en 720p.

Éstas son solo algunas de las herramientas que YouTeak for YouTube nos ofrece, prometiendo además según cuenta su creador, sumar mas en un futuro.

YouTweak for YouTube – Descargar para Chrome

Seguimos hablando de Flat UI kit, en esta ocasión para comentar que ya esta disponible una versión para aquellos desarrolladores de iOS que busquen incorporar esta interface a sus aplicaciones (FlatUIKit).

Esta versión puede ser instalada mediante Cocoapods mediante una simple linea de código.

pod 'FlatUIKit'

Su uso solo requiere tener CoreText instalado en su versión para iOS 5.0 o superior.

Todos los elementos de Flat UI fueron incorporados en este proyecto en forma de componentes, esto garantiza en cierta medida que su utilización sea de lo más sencilla.

Por ejemplo podemos crear el clásico botón plano de Flat UI de la siguiente manera:

myButton.buttonColor = [UIColor turquoiseColor];
myButton.shadowColor = [UIColor greenSeaColor];
myButton.shadowHeight = 3.0f;
myButton.cornerRadius = 6.0f;
myButton.titleLabel.font = [UIFont boldFlatFontOfSize:16];
[myButton setTitleColor:[UIColor cloudsColor] 
 forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor cloudsColor] 
forState:UIControlStateHighlighted];

Personalizar los colores de Flat UI es muy sencillo, primero debemos buscar el código de color que deseamos implementar, para ello podemos utilizar la paleta de colores disponible en Flat UI colors, y finalmente agregar a nuestro proyecto unas pocas lineas de código:

#import <FlatUIKit/UIColor+FlatUI.h>
UIColor *myColor = [UIColor turquoiseColor];

Flat UI sigue cobrando fuerza, claramente se esta convirtiendo en una UI clásica, quizas llegue el punto en que termine cansando a más de uno. Por el momento me sigue encantando

Web: FlatUIKit

Ya estamos acostumbrados a los menús deslizantes en aplicaciones móviles, una de las aplicaciones más conocidas que utilizan este tipo de elementos es la de Facebook. Ahora y gracias a Mmenu podemos llevar a la web esta clase de implementaciones de una manera muy sencilla.

Mmenu es un plugin para jQuery para generar un menú deslizante de forma eficiente y en unos pocos minutos.

La forma de generar un menú deslizante con este plugin se logra mediante una sola linea de código, otra ventaja es que podemos utilizar la etiqueta NAV para generar la estructura HTML que contiene el menú.

$("#nav").mmenu();

El plugin como se darán cuenta es muy fácil de utilizar, en el código anterior pudieron ver como inicializarlo mediante las opciones por defecto, también podemos personalizar la forma de correr este proyecto por medio de unos pocos parámetros:

$("#nav").mmenu({
   slidingSubmenus  : true,
   closeOnClick     : true,
   position         : "left",
   configuration    : {
      selectedClass    : "Selected",
      pageNodetype     : "div",
      menuNodetype     : "nav",
      slideDuration    : 500
   }
});

También mmenu nos provee de una serie de métodos simples para ejecutar acciones según determinados eventos. Esto lo pueden consultar directamente en la documentación oficial.

De todos los menús deslizantes que probé hasta el momento este es uno de los más completos y que mejor funcionan. Una alternativa simple y excelente.

Web: Mmenu

Generalmente publico cintas que poseen el mismo estilo o que poseen variaciones de color y elementos que contienen. En este caso, se trata de un paquete más original que despliega cintas (ribbons) de diferentes formas y tamaños ideales para colocar como marcadores o utilizar directamente como botones.

La colección ofrece dos opciones de formatos, tanto en .psd para editar con Photoshop y en .ai para hacerlo con Illustrator y aplicar en diseños de impresión, este último es perfecto para los casos de ampliación de los elementos o bien, para elaborar nuevas formas sobre las bases creadas.

Descargar Elegant Ribbons | BluGraphic

El set contiene diecisiete cintas diferentes, que poseen usos múltiples y que pueden componerse de elementos tales como íconos para marcación o textos de call-to-action. Es una buena opción, original y que bien viene tenerla a mano.

Desde el lanzamiento de la renovada última versión de Windows, el estilo Metro inundó casi todo lo que podamos ver en sitios, herramientas y aplicaciones. Sin entrar en el tema de si realmente Windows 8 funciona correctamente o no, hay que reconocer que su estilo visual es atractivo al menos para quienes gustamos del diseño minimalista y limpio, mostrando solo colores planos, de bordes cuadrados y con tipografías nítidas.

Fue asi como hoy en día las aplicaciones mas nuevas lo adoptaron, a un punto que seguramente a muchos canse por la repetición. Sin embargo hay ocasiones en las cuales es aplicado de forma adecuada y es ahí donde se logra el éxito, haciendo que algo tan habitual hoy en día, resalte del resto.

Si bien una aplicación no será efectiva solo por su estilo visual, el mismo atrae y es necesario. Se ven muchas aplicaciones que descuidan ésto y si vamos al caso, ni bien salga otra que cumpla pero sume también una estética atractiva nos pasaremos a ella sin dudarlo.

Hace días Tamara nos mostraba un set de elementos UI estilo Metro. Hoy traigo otra opción, con elementos diferentes y de colores fuertes y variados. El set incluye varios cuadros con información de numerosas clases: calendarios, gráficos de estadísticas, iconos, menú y búsquedas entre otros de formato PSD.

Metro UI Kit – Descargar en Tempees

Dwibbles se planteó con la idea de unir las redes sociales que mas tiempo nos quitan intentando crear una herramienta que nos ayude a ahorrar tiempo y acceder a lo que realmente queremos ver. En su primera etapa ya online, comienza a verse ésta idea tomando forma lentamente.

Luego de registrarnos (solo mediante Twitter o Facebook, lamentablemente) llega el momento de agregar las cuentas que queremos utilizar. Facebook, Twitter e Instagram son las opciones actualmente.

Cuando tengamos todo listo, veremos un timeline muy parecido al que vemos en cualquier red, mostrando todo en un solo lugar. Lo que “suma” a la idea de sus creadores es que con el tiempo, Dwibbles irá aprendiendo qué es lo que mas leemos o a quienes y comenzará a ofrecer solo ese contenido, ahorrándonos el tiempo innecesario que pasaríamos leyendo todo y sin perder la posibilidad de comentar o enviar un “me gusta”.

Prometiendo su versión móvil en corto tiempo, pusieron su sitio a la vista de todos hace semanas esperando comenzar a obtener feedback y poder mejorar sumando las opciones que los mismos usuarios busquen o prefieran.

Veremos si su camino los lleva al éxito, pero de momento no deja de ser una buena opción probarlo y darnos un poco cuenta de cómo es acceder a lo que realmente nos importa y unificar redes en un mismo lugar, algo que se viene marcando mucho últimamente y que es posible que en un futuro todos busquemos.

Web: Dwibbles
Vía: FeedMyApp

Bespoke.js es un micro-framework para la creación de presentaciones de diapositivas utilizando CSS3 para generar la animación de diapositivas.

Su característica más importante es su sencillez, la misma queda evidenciada en su peso, apenas 1kb en su versión simplificada y comprimida mediante gzip. Además no cuenta con ninguna dependencia, para funcionar su único requerimiento es que el navegador soporte correctamente CSS3.

Utilizar las transiciones de CSS3 le permiten un tamaño reducido y mediante el uso de Javascript la perfecta detección de eventos del teclado, algo que le brinda la posibilidad de utilizar las flechas del teclado para avanzar y retroceder diapositivas de forma simple e intuitiva.

Su estructura tan simple permite que se los diseñadores puedan incorporar nuevas funcionalidades muy fácilmente.

La estructura básica HTML es la siguiente:

<link rel="stylesheet" href="path/to/my/theme.css">

<article>
  <section>Slide 1</section>
  <section>Slide 2</section>
  <section>Slide 3</section>
</article>

<script src="http://www.kabytes.com/bespoke.min.js"></script>
<script src="http://www.kabytes.com/path/to/my/script.js"></script>

Luego podemos decidir como inicializar el plugin, según como lo hagamos podremos decidir si el slider funciona de forma horizontal o vertical.

Inicialización de la representación en modo horizontal:

bespoke.horizontal.from('article');

Más claro imposible

En la documentación oficial pueden encontrar más opciones de configuración. También podemos decidir lanzar determinado evento en x diapositiva, esta opción es de lo más interesante para aquellos que busquen realizar una presentación más interactiva.

Web: Bespoke.js

Fries es un framework para crear prototipos de aplicaciones móviles basadas en Google Android. Este proyecto completo se encuentra inspirado en Ratchet que es algo muy similar pero destinado a dispositivos basados en iOS.

Al igual que Ratchet, Fries utiliza la biblioteca Javascript Push.js para realizar todas las animaciones y crear todos los objetos interactivos. En definitiva si alguna vez trabajaron con Ratchet utilizar Fries es algo de lo más sencillo.

Todos los componentes se encuentran estructurados como si se tratasen de bloques, logrando así una muy simple implementación que no requiere más que unas pocas lineas de código HTML estándar.

En la imagen pueden ver un menú de opciones, para crearlo mediante el uso de este framework el código se vería así:

<nav class="tab-fixed">
  <ul class="tab-inner">
    <li class="active"><a href="#item1">Tab 1</a></li>
    <li><a href="#item2">Tab 2</a></li>
    <li><a href="#item3">Tab 3</a></li>
  </ul>
</nav>

El proyecto tiene menos de un mes, pero a juzgar por la actividad recibida en Github lo más probable es que en un tiempo más tengamos más objetos y mejoras, al menos el autor comenta que esta planeando ampliar las opciones disponibles a la fecha.

Fries es un proyecto liberado bajo licencia MIT, así que no hay excusas a la hora de realizar un prototipo para nuestra próxima aplicación para Android

Web: Fries

Es cierto que no hay nada mejor que un diseño personal y realizado exclusivamente para nuestras necesidades, pero también es una realidad que cada día que pasa vamos encontrando mejores recursos que nos brindan excelentes opciones para plantear proyectos de la mejor forma y con calidad profesional.

En este caso les presento una plantilla en HTML para una web responsive con grandes textos y secciones desplegadas a una sola página. El sitio cuenta con espacios de destaque importantes y todo se despliega a partir del menú superior.

Descargar Legend | Dzyngiri

Para agregar secciones solo deberán incluir un id al que el botón del menú haga enlace y listo, la página sola los llevará a esa ubicación. La aplicación de sitios elaboradas de esta forma pueden ser ideales para webs con poca información y con imágenes interesantes que destaquen el contenido.

El desarrollo de aplicaciones móviles ha originado un boom de recursos gráficos en formato paquete que surgen con la única función de hacer nuestro trabajo más fácil y, al mismo tiempo, que estéticamente tenga un resultado atractivo.

Es el caso de los paquetes de elementos para interfases de usuario que bien pueden servir para elaborar aplicaciones móviles o bien, cualquier plataforma que requiera un diseño interactivo y en la que el visitante necesite accionar y moverse para cualquier actividad.

Descargar Vertical Infinity | FreebiesBug

Aquí hemos publicado varias opciones, ya que siempre surgen nuevas y mejores, en esta oportunidad se trata de una versión de elementos plana con detalles de un solo color. Estéticamente es bastante sobrio, pero al mismo tiempo moderno. Está planteado sobre un fondo oscuro pero la paleta de colores pueden definirla ustedes mismos según sus gustos y necesidades.

Posee principalmente componentes de registro e interacción, con algunas ideas de menúes de íconos y desplegables en texto. Hay varias opciones de los mismos menúes utilizando la misma base tonal, tiene mucho potencial en su conjunto, pero también hay elementos que pueden funcionar de forma individual.

Windows es un interesante plugin jQuery para utilizar en sitios del tipo full screen o  “todo en una pagina”, este tipo de proyectos tienen la particular de dividir las distintas secciones que lo conformen mediante el uso de un diseño que cambia radicalmente de una sección a otra, ya sea modificando el color de fondo o bien utilizando esquemas básicos que corten claramente cuando termina una sección y comienza otra.

El problema de este tipo de sitios es que las secciones se descubren mediante el uso del scroll del navegador esto puede ser un problema ya que el visitante puede decidir detener el barrido del sitio en una posición intermedia entre una sección y otra, logrando un resultado bastante feo estéticamente hablando, para solucionar este inconveniente es que existe Windows.

Windows acomoda automáticamente el contenido en la pantalla, evitando que una sección se muestre de forma parcial. Siempre el plugin va a mostrar la categoría que se muestre en mayor proporción, esto en sitios full screen es una ventaja enorme, no solo en lo que se refiere a lo estético sino también a lo funcional.

Ejemplo de uso:

$('.window').windows({
   snapping: true,
   snapSpeed: 500,
   snapInterval: 1100,
   onScroll: function(scrollPos){
      // scrollPos:Number
   },
   onSnapComplete: function($el){
      // after window ($el) snaps into place
   },
   onWindowEnter: function($el){
      // when new window ($el) enters viewport
   }
});

En el sitio de Windows tienen una demostración de funcionamiento.

Web: Windows

Si bien es un sitio ya conocido por muchos amantes de la música y los recitales, seguramente otros todavía desconozcan de la existencia de Setlist.fm.

Un “setlist” es la lista de canciones que un artista o grupo presenta en un concierto. Muchas veces uno quiere poder acceder a ellas, ya sea por anticiparse a lo que cantarán cuando podamos acudir a uno o simplemente para recordar el buen momento que pasamos escuchándolas. En muchos casos la información se necesita por motivos profesionales o simplemente nos gustan éstas cosas y deseamos poder agregar las que conocemos.

Setlist.fm nace con esa idea. La de brindar los setlist gratuitamente y poder editarlos si vemos un error o directamente subir la que veamos que falte si es que la conocemos.

Separando un poco su función básica, ofrece información estadística de los recitales a los cuales fuimos, asi como también las más populares o los festivales que se están llevando a cabo en el mundo.

El registro es sencillo y puede hacerse al estilo clásico o mediante otras vias como Google, Facebook o Twitter. Una vez ingresemos nos darán la opción de acceder a la información de nuestro perfil de Last.fm, ya que en el caso de que lo solamos usar allí tendremos listados los eventos a los cuales acudimos.

El resto es simplemente recorrer las listas o buscar una puntual ya sea alfabéticamente, por fecha o directamente tipeando términos de búsqueda.

Indispensable para quienes van seguido a conciertos y quieren llevar un registro de ello.

Web: Setlist.fm

Existen decenas de opciones para crear atractivos gráficos estadísticos, en Kabytes reseñamos muchas de ellas, solo necesitan visitar la etiqueta de gráficas para encontrar todas las posibilidades. En esta oportunidad vamos a comentar una forma más para crear gráficas y es utilizando Ruby como plataforma.

El proyecto del que les quiero hablar se llama Chartkick, un pequeño complemento para utilizar de forma conjunta a nuestra aplicación escrita en Ruby para la creación de gráficas con apenas una linea de código.

Las gráficas son creadas mediante Javascript, podemos utilizar diversas bibliotecas o APIs, el autor de esta herramienta recomienda Google Charts o Highcharts (de esta última tengo bastante experiencia y puedo decir que es excelente).

Para utilizar Google Charts, usamos:

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

Si preferimos utilizar Highcharts, escribimos:

<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>

Luego, y mediante la instalación de la gema de Chartkick, estamos listos para mostrar gráficas en nuestro proyecto y de una forma muy limpia. Por ejemplo podemos realizar una gráfica tipo torta de la siguiente manera:

<%= pie_chart Goal.group("name").count %>

Utilizar esta gema da como resultado un código mucho más limpio y ordenado, no hace falta hablar de la gran ventaja que es leer un código simple para realizar un mantenimiento en un proyecto que ya tiene varios meses.

Esta simple gema es una solución excelente a la hora de mostrar gráficas, también puede utilizarse sin Ruby, en el sitio del proyecto pueden encontrar un ejemplo de esa implementación que solo requiere Javascript.

Web: Chartkick

Sassaparilla es una plantilla para utilizar en una primera instancia de un diseño agilizando considerablemente el tiempo de desarrollo ya que al utilizarla contamos con una estructura inicial ya lista para funcionar en distintos dispositivos, siguiendo la tendencia del diseño adaptable.

Esta plantilla utiliza dos de los sistemas más potentes relacionados a las hojas de estilo, estoy hablando de SASS y Compass.

Este proyecto cuenta con un muy buen modulo para la utilización de tipografías, el mismo recalcula en tiempo real el tamaño adecuado de nuestras tipografías según el tamaño del navegador. Además cuenta con un interesante modulo que nos permite trabajar los tamaños en pixeles para luego convertirlos de manera automática a ems.

Sassaparilla es un proyecto liberado bajo licencia Creative Commons 3.0, lo que garantiza su libre utilización tanto en proyectos personales como profesionales.

Web: Sassaparilla

En el artículo anterior les comentaba sobre los recursos puntuales, la realidad es que el trabajo del diseñador no tiene límites y hasta la más pequeña aplicación o sistema puede requerir ser personalizado, ya sea para beneficio propio, gusto o bien por solicitud de un cliente.

En este caso comparto con ustedes una plantilla de estética moderna y una paleta de colores muy atractiva, lineas simples y varias pantallas para cubrir las posibles necesidades que tienen que ver con los reproductores de audio.

Descargar Music App for Mobiles PSD | FreebiesBug

Ciertamente puede que necesiten realizar sus propias ediciones dentro de lo que requiera el sistema, pero con una buena base, esta actividad les resultará bastante más simple que si no tuvieran nada con qué empezar. La template tiene tres pantallas, login, reproductor y listado de detalles, todas muy armónicas y con detalles de calidad.

Audio Player es un pequeño plugin escrito en JavaScript y que utiliza el framework jQuery, para la creación de reproductores de audio de manera sencilla y eficiente.

El detalle interesante de este plugin es que utiliza la etiqueta HTML <audio>, sin embargo y al momento de correr el plugin, la misma es reemplazada por otra estructura HTML más compleja y que provee a nuestro sitio de un reproductor mucho más avanzado al que viene por defecto en los distintos navegadores.

El reproductor responde a la corriente de diseños adaptables, con el detalle de venir preparado para funcionar perfectamente en dispositivos táctiles, es esta misma otra de las razones por la cual cambiar el diseño del reproductor estándar es tan importante.

Ejemplo de uso:

Estructura HTML para reproducir una lista de archivos:

<audio preload="auto" controls>
    <source src="http://www.kabytes.com/audio.wav" />
    <source src="http://www.kabytes.com/audio.mp3" />
    <source src="http://www.kabytes.com/audio.ogg" />
</audio>

Inicializamos el plugin:

<script src="http://www.kabytes.com/jquery.js"></script>
<script src="http://www.kabytes.com/audioplayer.js"></script>
<script>
$( function()
{
    $( 'audio' ).audioPlayer();
});
</script>

En la documentación oficial van a encontrar más información sobre las posibilidades a la hora de configurar este plugin.

Un detalle que merece la pena comentar, su peso es de apenas 4kb en su versión comprimida y simplificada, muy por debajo de otras opciones similares.

Web: Audio Player

Si nos ponemos a pensar en la cantidad de opciones que hay para conseguir recursos, podríamos pasar días enteros. Cada uno de los elementos que componen una plataforma gráfica en función a un sistema permiten aplicar estilos determinados y métodos de articulación que no solo lo destaquen visualmente sino que ofrezcan al usuario comodidad y rapidez.

Es por ello que aunque parezcan plantillas pequeñas en un primer momento, puede que con algunas pocas modificaciones puedan incluir algo original en el sistema que se encuentren diseñando.

Descargar Photo Upload UI | PixelsDaily

En este caso es una plantilla para realizar la carga de imágenes con la forma “Drag & Drop”, también incluye la instancia posterior para titulado y un espacio de descripción.

Como está diseñada en Photoshop, también pueden agregar algunos elementos más como por ejemplo un espacio para etiquetas. Estéticamente es muy delicado y armónico, aunque cambiar los colores para hacerlo combinar con otra paleta no debería ser problema. Una buena opción, algo puntual, pero que nunca está de más tener a mano.

El grunge es un estilo que nunca debe faltar dentro de los recursos que tenemos siempre cerca. En este caso puntualmente se trata de un set que no solo brinda uno sino varios recursos y formatos de este tipo de elementos, por lo cual dejarlo pasar sería algo sin sentido, sobretodo si tenemos en cuenta la suerte de que sea gratuito.

El paquete incluye doce marcos estilo grunge ideales para pequeños badges o efectos de estampas como las que se suelen utilizar hoy en día. Lejos de quedarse allí, se acompaña de ocho texturas de papel por supuesto acordes y perfectas para implementar como fondos de dichos badges o directamente en el proyecto que estemos llevando adelante.

Como les comentaba, el set se destaca por las posibilidades que brinda. Descargando obtendremos los elementos en formato .AI y .ESP además de formas vectorizadas listas para utilizar, las texturas y brushes para Photoshop. Kit perfecto para lograr el badge que buscamos si estamos trabajando dentro de éste estilo, así que aconsejo no seguir de largo y tenerlo presente ya que es probable que pronto lo necesitemos.

Grunge Stamp Borders Multi Pack – Descargar en Wegraphics