Crear presentaciones online con Slidebean

Isabel

Las presentaciones nacen por gran cantidad de motivos. Trabajo, el momento en el cual queremos presentar una creación propia, desarrollos personales, celebraciones familiares, eventos o algún trabajo para la facultad. La cuestión es que están presentes y en mas de una ocasión debemos recurrir a ellas y a su creación. Por suerte, hoy en día con tantas opciones es fácil hacerlo.

Una de ellas es Slidebean. La aplicación es completamente gratuita salvo que deseemos privacidad y acceso sin conexión. En ese caso nos saldrá $4.99 dólares al mes. Sin embargo en la mayoría de los casos se busca lo primero asi que no va a generar problemas y es bueno que exista la opción para eventos mas avanzados.

Crear presentaciones online con Slidebean

Slidebean no se centra en un tipo de “diapositiva” sino que ofrece una gran cantidad de formatos.

  • Texto: Para las secciones que debemos explicar, alguna función o punto que deseamos resaltar.
  • Listas: ¿Buscando resaltar punto a punto algunas funciones?, es el formato ideal.
  • Gráficos: En formato pastel o de barras para mostrar estadísticas que los ayuden en su próxima presentación.
  • Imágenes: Para mostrar las ilustraciones adecuadas.
  • Collage: Alternativa de imagen en la cual podemos combinar varias de ellas en diferentes estilos.
  • Línea de tiempo: Con el fin de dejar claro un progreso o evolución.
  • Videos: ¿Lo estático no alcanza?, se puede mostrar un pequeño video para explicarlo mas claramente.

Como ven, las opciones son mas que completas. Todo se muestra en espacios limpios, libres de elementos que no hemos sumado por elección y eso genera resultados atractivos visualmente, que es claramente lo que uno busca con una presentación.

Crear presentaciones online con Slidebean

Crearlas no es nada complicado. Solo deben ir sumando los datos y elementos mientras el mismo sitio los va guiando, al menos la primera vez. Es cuestión de explorar sus posibilidades y llegar a la mejor opción dependiendo de qué estemos buscando.

Van a necesitar un registro, simple y con los datos que tradicionalmente se solicitan. Luego iremos automáticamente a nuestro panel y notaremos un gran botón invitándonos a crear una nueva presentación, mas el título.

Siguen preguntas relativas a la misma. El lugar donde será realizada, qué representaremos y datos adicionales. Finalmente se accede a cada una de las etapas que tendrá, dándonos para seleccionar entre los formatos que comenté anteriormente, colores, tipografías, etc. Cuando estén contentos con el resultado, se obtiene un enlace para compartirlo con quien debamos sin problemas.

Web: Slidebean

Plantillas para crear emails adaptables (Responsive)

Pablo

La mayoría de los recursos de los que hablo en Kabytes están relacionados al diseño de sitios web, sin embargo no olvido la importancia de diseñar un correo electrónico que sea de fácil lectura independientemente del dispositivo utilizado para su lectura.

Para lograr que un correo electrónico sea adaptable, tarea que no es tan sencilla como parece, podemos utilizar el sitio Responsive email patterns, una magnifica colección de plantillas gratuitas para descargar y utilizar de la forma más sencilla.

En este sitio van a encontrar todo tipo de estructuras, una columna, dos columnas, listas de imágenes y muchísimo más. Ideal para aquellos que están diseñando el newsletter de su sitio y buscan que el mismo se visualice de la mejor forma posible.

email responsive design template

Una de las grandes ventajas que encuentro en este sitio es su comunidad, ella es la encargada de contribuir a diario con nuevos templates así como probar los disponibles detectando posibles errores o fallas.

Para una correcta organización este muy buen sitio cuenta con categorías, lo que garantiza en cierta medida una rápida y veloz búsqueda, encontrando la plantilla adecuada para nuestras necesidades.

Si se deciden a utilizar alguna de estas estructuras simplemente deben seleccionarla y copiar y pegar el código que el sitio ofrece. Como podrán ver el mismo se basa en HTML básico y CSS3, empleando media-queries para modificar el comportamiento de la estructura según la resolución de la persona que la visualiza.

Si les gusta la idea y tienen algún esquema para compartir pueden hacerlo directamente desde el sitio oficial del proyecto.

Web: Responsive email pattern

Helium Harvey [Corto de Animación]

Tamara

Un pequeño niño juega con un globo de helio como cualquier otro, cuando se percata que al aspirarlo se le afina la voz quiere repetir el mecanismo y termina tragándose el globo. Así es como levanta vuelo e inicia un recorrido a través de todo el mundo, acompañado por un pequeño pájaro y conociendo todo tipo de personajes en el camino.

Helium Harvey

La historia es un poco corta y sin sentido, pero visualmente es muy bonita y el ritmo que posee el video lo hace muy llevadero. Aclaren a los niños que esto no puede hacerse en realidad, no queremos que nadie se trague globos (cuando uno lo piensa así, es bastante peligroso el mensaje).

Daniel Savage es el creador de esta pequeña pieza que resulta ideal para salir y escaparnos habiendo cumplido con nuestras tareas durante toda la semana. Que tengan un excelente viernes!

Compilado de widgets y reproductores en PSD

Tamara

Existe una inmensa cantidad de opciones para personalizar las barras laterales y los artículos que publicamos según los elementos que contengan. Por ejemplo, si deseamos compartir un archivo de audio, podemos utilizar los objetos embebidos que nos ofrecen las diferentes plataformas online o podemos personalizar la visual y el funcionamiento para adaptarlo al estilo de nuestro sitio. Esto es particularmente interesante cuando somos creadores de contenidos sea cual fuere el formato en el que lo hacemos y no deseamos que los reproductores sean los que vienen por defecto en sitios como vimeo o youtube.

Son cuestiones personales que tienen más que ver con la estética que con la funcionalidad en si, si solemos crear videos puede que la transferencia de nuestro sitio se dispare por las nubes si tenemos muchos usuarios visualizándolos pero al mismo tiempo nos aseguramos que el contenido esté relativamente protegido.

Para aquellos que buscan formas originales para aplicaciones poco usuales y que su sitio muestre opciones diferentes a las que tradicionalmente se ven en las plantillas prediseñadas, esta serie de recursos les puede llegar a ahorrar algunos pasos esenciales y finalmente tiempo.

Widgets en formato .PSD

En esta lista encontrarán una variedad de usos bastante interesante que pueden ir desde una ventana de información de autor hasta aquellas que pueden servir para modificar las propiedades de navegación de una plataforma. Todos, creo yo, pueden ser adaptados para encajar en cualquier tipo de plataforma interactiva, ya sea que estén diseñando un sitio web o una aplicación móvil, con algunas pocas modificaciones la herramienta podrá cumplir su función.

Las estéticas tienden a lo plano porque es lo que se utiliza ahora, personalmente considero que sirven más como inspiración ya que casi todos los componentes que se incluyen hoy en día pueden ser emulados a través de CSS sin la necesidad de utilizar imágenes.

Vector Settings Interface

Descargar Vector Settings Interface | PixelsDaily

Simple Alarm Clock

Descargar Simple Alarm Clock | PixelsDaily

Profile Widget

Descargar Profile Widget | 365psd

Twitter Account Widget

Descargar Twitter Account Widget | PixelsDaily

Vector Calendar Widget

Descargar Vector Calendar Widget | PixelsDaily

Free Disk Space Widget

Descargar Free Disk Space Widget | PixelDaily

Event Widget

Descargar Event Widget | PixelsDaily

CSS Download Widget

Descargar CSS Download Widget | PixelsDaily

Reproductores de medios en .PSD

Debajo se encuentran algunas opciones originales para crear widgets contenedores de elementos de medios, con esto me refiero a audio y video que generalmente se reproducen por default con las herramientas que ofrecen sitios como Soundcloud, Vimeo o Youtube. Para aquellos que pretendan alojar el contenido en su propio sitio y necesiten ideas de cómo disponer de la información de forma atractiva, esta lista puede ayudarlos.

Mini Music Player

Descargar Mini Music Player | 365psd

Video Player UI

Descargar Video Player UI | UICloud

Light Video Player

Descargar Light Video Player | UICloud

Viro Madie Players UI

Descargar Viro Media Players UI | GraphicBurger

Flat Music Player Interface

Descargar Flat Music Player | PixelsDaily

CSS only audio player UI

Descargar CSS only audio player | FreebiesBug

Mini Audio Player CSS Simulation

Descargar Mini Audio Player CSS Simulation | Freebiesbug

Mini Video Player PSD

Descargar Mini Video Player PSD | FreebiesBug

Una serie de reproductores de video, audio y widgets para agregar en lugares estratégicos, todos elaborados en Photoshop y fáciles de editar, también hay algunas opciones que incluyen la versión CSS pero aclaro desde ahora que no son todas.

Simple Metro: Galería de imágenes gratuita con PHP

Pablo

Simple Metro es un pequeño proyecto escrito en PHP para generar galerías de imágenes de forma casi automática. La mecánica de este proyecto es simple, solo necesitamos subir las imágenes a una determinada estructura lógica de carpetas y el sistema automáticamente generará las galerías.

La principal ventaja de emplear este proyecto radica es su prácticamente nula configuración, los requerimientos son básicos: PHP 5 con la biblioteca gráfica instalada y nada más, un desarrollo que funciona en cualquier servidor web del mercado.

galeria gratuita php

Además utiliza CSS3 y HTML5 para mostrar las distintas imágenes, un aspecto interesante de esta herramienta es que las miniaturas se generan automáticamente utilizando para ello una versión ligeramente modificada de LightBox 2.

Un detalle que honestamente me llamo la atención y que creo que no esta del todo bien, es que se sugiere en la web oficial del proyecto utilizar permisos 777 para la carpeta principal contenedora de las galerías, esto puede devenir en un futuro problema de seguridad, en lo personal prefiero siempre utilizar permisos más restrictivos y seguros. Obviamente este aspecto puede ser modificado por nosotros mismos.

Al tratarse de un proyecto de código abierto su utilización es libre, además esto ultimo permite mejorar el código para adecuarlo a nuestras necesidades.

Obviamente esta galería no esta pensada para correr de manera profesional, no al menos en servidores que tienen una demanda muy alta, además tiene grandes limitaciones si consideramos la imposibilidad de cambiar los nombres de las imágenes, este ultimo se obtiene directamente desde el nombre de archivo. Sin embargo me parece un buen recurso que podemos emplear en algunas situaciones como por ejemplo mostrarle a un cliente una serie de opciones, etc.

Simple Metro es un proyecto simple y que puede resultar útil en ciertos momentos, si necesitamos algo con más opciones podemos recurrir a otras opciones, incluso crear nuestra propia versión utilizando como base la propuesta por esta solución.

Aplicación para pintar en Android

Isabel

Existen muchas aplicaciones para dibujar en Android y otras plataformas. Desde las primeras versiones de diferentes SO’s se tuvo en cuenta el agregar herramientas de dibujo porque generalmente son necesarias y aparte, vamos, a todos nos gusta dibujar sepamos o no. En tablets suelen existir opciones bastante avanzadas tanto pagas como gratuitas pero cuesta encontrar alternativas para móviles que podamos disfrutar o brindar a los mas pequeños para que ilustren un rato.

Paint Joy es simple. No esperen herramientas complejas, capas o efectos. Simplemente es como tomar una hoja y un lápiz para garabatear algo que esté en nuestra mente. Lo bueno es que podemos controlar el ancho del trazo, además del estilo y algunos acabados diferentes al clásico. Por ejemplo sumar detalles en crayón, tiza, neón, brillos, etc.

Aplicación para pintar en Android

En total son mas de veinte pinceles para seleccionar el adecuado e ilustrar sin problemas. Se puede modificar el color de fondo o bien optar por realizar un doodle sobre alguna imagen de nuestra galería. Hablando de galerías, Paint Joy incluye la propia donde alojará todoas las creaciones que deseemos guardar.

Punto a favor comparando a otras herramientas similares es el zoom mediante gestos. “Pinchando” la pantalla podemos ampliar o reducir una zona para así poder mejorar hasta el último detalle. Es un factor que puede sonar sin importancia pero creanme cuando les digo que al momento de ilustrar en un medio digital se agradece y mucho.

¿Quieren compartir los resultados? podemos hacerlo de dos maneras. Por supuesto con la imagen en formato clásico pero lo genial es que al guardarla se suma una animación de los pasos que realizamos para poder ver nosotros como lo desarrollamos o compartirlo en alguna galería cuando no estamos cerca de la PC y de los programas de ilustración que solemos utilizar.

Ahora si, los dejo con un video donde se ve un ejemplo para que se tienten y se regalen un rato para dibujar :D.

Paint Joy – Tamaño: 11M – Descargar

Fuentes tipo display gratis para descargar

Tamara

Nuevamente pasa otro mes y con él encuentro una gran cantidad de recursos para compartir. En este caso son una variedad de tipografías que a diferencia de los meses anteriores he decidido agruparlas por estilos en lugar de por novedad.

La serie que encontrarán a continuación será para aquellos espacios que requieran grandes tamaños, especiales para títulos, banners o sliders. Este estilo de tipografía se denomina Display simplemente por que utilizarlas en tamaños pequeños no facilita la lectura y los detalles que contienen se visualizan mejor si se las emplea en grandes espacios.

Con el boom del diseño adaptable toman cada vez más fuerza ya que es usual ver en los sitios espacios ocupados por imágenes al 100% y esto en pantallas grandes requieren que las fuentes en muchos casos también sean de gran tamaño.

Si nos salimos del diseño web y considero que este tipo de recursos son más acordes a los diseños de impresión gráfica, banners y posters impresos que necesiten captar la atención de alguien al pasar. Es por ello que mi recomendación sería que sean utilizadas para espacios que realmente necesiten destaque como llamadas de atención en folletos o afiches gráficos.

Disclaimer

Descargar Disclaimer | FontFabric

Portica

Descargar Portica | Behance

Blanka Font

Descargar Blanka Font | Behance

Gist Rough Light Tree

Descargar Gist Rough Light Tree | MyFonts

Knarrstaver

Descargar Knarrstaver | Behance

Asfalto

Descargar Asfalto | Behance

GENT

Descargar GENT | Behance

Niobium

Descargar Niobium | QFonts

UGO

Descargar UGO | Behance

PouchDB: Base de datos de bolsillo para crear aplicaciones offline

Pablo

PouchDB es una muy interesante propuesta, se trata de una base de datos para almacenar pequeñas cantidades de información especialmente pensada para el desarrollo de aplicaciones web que se ejecuten offline.

Esta base de datos se encuentra desarrollada utilizando JavaScript y esta inspirada en otro proyecto (Apache CouchDB). Su principal característica radica en permitir sincronizar de manera automática los datos cuando la aplicación se encuentra offline y vuelve a conectarse a Internet.

Otro aspecto a destacar es su muy buena compatibilidad con los distintos navegadores, soporta perfectamente navegadores como el Internet Explorer en versiones no tan nuevas, ademas de obviamente Chrome, Firefox y Safari.

base de datos para aplicaciones offline

Su peso es excelente, apenas 25kb en su versión simplificada y comprimida mediante gzip.

Al tratarse de un proyecto JavaScript funciona perfectamente con Node.js, incluso el autor anuncia en el sitio oficial que la mayoría de sus desarrollos fueron realizados bajo esta plataforma.

PouchDB es un proyecto de caracter open source, garantizando su libre utilización tanto en proyectos comerciales como personales.

Ejemplo de uso:

var db = new PouchDB('dbname');

db.put({
    _id: 'dave@gmail.com',
    name: 'David',
    age: 67
});

db.changes({
    onChange: function() {
        console.log('Ch-Ch-Changes');
    }
});

db.replicate.to('http://example.com/mydb');

Un detalle que siempre me gusta consultar y que me parece fundamental en cualquier proyecto es su documentación, en este caso excelente, muy completa y fácil de comprender.

En caso de necesitar utilizar una base de datos de manera conjunta a jQuery esta biblioteca brinda un buen soporte para este framework, permitiendo vincular muchas de sus funciones con las del popular proyecto. Inclusive podemos emplear PouchDB como si fuese un plugin común y corriente.

Elementos vectorizados para infografías con estilo biselado

Tamara

Las infografías son un recurso sumamente útil para todos aquellos que necesitan desplegar información de forma gráfica y práctica. Generando asociaciones lógicas este recurso puede ayudarlos a armar una imagen informativa o una plataforma interactiva para los que se animen también.

La característica particular de esta herramienta es que posee una buena cantidad de elementos con un estilo actual y moderno que a pesar de la gran cantidad de colores que siempre viene bien tenerlos a mano en este tipo de diseños. Y si bien la paleta es plana se juega con un biselado que hace que los elementos posean cierta estética 3D pero que resulta más similar a la sombra larga que se utiliza en los íconos nuevos.

3D Infographic Elements

Descargar 3D Infographic Vector Elements | PSDVault

El paquete incluye íconos, elementos para gráficos que deberán ser editados por proporciones para que todo quede acorde a la información que se despliega, llamadas de atención gráficas con íconos agregados y salvando los engranajes que están al final creo que todo tiene visualmente una calidad excelente. Se encuentra en formato vectorizado para que pueda editarse sin problemas y adaptar los componentes a lo que necesiten armar. También puede cambiarse la paleta de colores y siempre tengan en cuenta de mantener el valor de las sombras con respecto al tono que elijan.

Screencasts desde Chrome en segundos

Isabel

Existe una gran cantidad de herramientas que nos permiten grabar lo que hacemos en pantalla con fines laborales, de ocio o por presentaciones que hagamos relativas a un nuevo desarrollo propio, aplicación o diseño. Muchas de ellas son pagas o bien suman una marca de agua en el caso de las que se ofrecen libremente. Sin embargo, algunas pocas brindan todo lo necesario para un screencast básico sin frenos de ningún tipo.

En el caso de la que conoceremos hoy, trabaja sobre Chrome y lo que hace es que podamos grabar lo ocurrido en una pestaña activa. Útil incluso para mostrar tutoriales o aplicaciones puntuales.

Screencasts desde Chrome en segundos

Si bien la aplicación se encuentra en etapa beta funciona realmente bien y de forma estable. Además de grabar cada acción que realizamos se sumará el audio, punto mas que a favor en comparación a otras herramientas similares.

Los videos serán alojados en nuestro disco en formato  Webm/vp8 con audio OGG. En el caso de no desear una copia para nosotros y en lugar de eso busquemos subirlo a YouTube, en un solo click comenzaremos el proceso sin problemas.

Para aquellos que deseen grabar no solo lo que ocurre en una pestaña sino en cualquier instancia de la pantalla, la opción está inluida pero de manera experimental. Seguramente con algunas aplicaciones encuentren problemas al menos por este momento, hasta nuevas actualizaciones. Recordemos que hasta el día de hoy se pensó como una herramienta que trabaje en Chrome unicamente y todo el resto se suma de a poco por el buen recibimiento que generó.

Screencasts desde Chrome en segundos

Screencastify no funciona con elementos externos como Flash o Java justamente con la idea de que pueda trabajar sobre cualquier ámbito tranquilamente en un futuro.

En la pestaña de opciones que se despliega si accedemos al icono que aparecerá luego de la instalación podemos configurar algunos puntos importantes respecto a la grabación que realizaremos. Por ejemplo, seleccionar entre cinco resoluciones:

  • 1080p (1.900 x 1.200).
  • 720p (1.280 x 720).
  • 480p (854 x 480).
  • 360p (640 x 360).
  • 240p (426 x 240).

Tengan en cuenta que a mejor resolución, mayor será el peso del video cuando esté finalizado. Otro elemento seleccionable es si deseamos agregar audio u optamos por una grabación silenciosa para que quede asi o bien para editar luego con un programa mas avanzado sumando la música que deseemos.

En esa misma solapa aparecerán luego resúmenes listando los screencasts anteriores que hemos creado, junto a la información de la configuración actual y el botón para dar inicio a un trabajo nuevo.

Una buena alternativa para screencast fáciles y en segundos, que no nos hagan pasar un largo rato metidos en configuraciones o funciones avanzadas que quizás no requerimos.

Web: Screencastify para Chrome