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="bespoke.min.js"></script>
<script src="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