Colecciones de marcos en diferentes estilos y colores

Tamara

Cuando estamos elaborando un sitio que requiere llamadas de atención y no queremos que sean del todo acartonadas y solemnes, podemos recurrir a burbujas y bordes que contengan el texto o las imágenes con las que queremos que el usuario sea puesto en alerta cualquiera sea el motivo.

Hay diversas formas de realizar esto y una de ellas es la utilización de marcos, carteles o burbujas de diálogo. Esta colección que quiero mostrarles contiene diversos formatos y combinaciones de estilos que pueden ser de gran ayuda en sitios coloquiales y que puedan salirse de las estructuras rígidas.

Vector frames

Descargar Vector Frames in 6 Styles | Snap2Object

Marcos estilo vintage, globos de texto con bordes gruesos, espacios que pueden utilizarse para incluir imágenes a través de CSS, algunos colores atractivos como así también la combinación entre ellos. Tendrán opciones planas y otras que si bien no lo son, resultan originales para la función prevista.

Ideales para folletos, posters y elementos gráficos, incluso pueden llegar a encontrarles un espacio en cualquier sitio o slider que necesite una gran llamada a los usuarios.

Themes gratis para WordPress: Graphy

Isabel

A veces se extrañan las épocas en las cuales los blogs nacían como un lugar donde dejar volar los pensamientos y escritos propios. Solo por momentos ya que actualmente se mantiene eso pero se suman un montón de beneficios y sitios de toda clase. Es genial la versatilidad que los sitios tienen hoy en día.

Volviendo a aquella época, son muchos quienes todavía la mantienen armando sus espacios personales para animarse a mostrar cuentos cortos, poemas, historias o simplemente relatar situaciones de la vida cotidiana.

Themes gratis para WordPress: Graphy

Cuando se trata de un blog de este tipo se busca resaltar siempre y ante todo el contenido, el texto. El otro día me asombraba cuando buscaba un theme para otro proyecto de la escasa cantidad de themes simples que hay en comparación con los magazine o los diseños elaborados al extremo. Los invito a que prueben y hagan una búsqueda rápida en Google de themes de WordPress. Si observan los resultados son en su mayoría plantillas elaboradas, estilo revista, para noticias, enfocados en elementos multimedia o directamente para sitios corporativos. Con suerte se toparán con un par de resultados que muestren diseños mas simples.

Themes gratis para WordPress: Graphy

Por todo esto me pareció una buena idea mostrarles Graphy. Theme para blogs tradicionales si los hay, no encontraremos sliders ni elementos adicionales sino el texto en primer plano junto a la presentación, todo sobre fondo blanco por completo.

Igualmente se incluye la opción a zonas con widgets. Las mismas son la columna lateral y el pie de página que se divide a su vez en cuatro para agregar allí los elementos que deseemos a gusto. Al fin y al cabo, en la mayoría de los casos es necesario mostrar las categorías y los vínculos sociales del sitio no solo porque sea útil para nosotros sino porque ayudan al lector a experimentar mejor la web.

Themes gratis para WordPress: Graphy

También cuenta con menú de opciones, panel de personalización en nuestro dashboard y menú listo para ser editado. No deberán preocuparse por su visualización ya que es de diseño adaptable y se verá perfecto en la mayoría de los dispositivos mediante los cuales sus lectores puedan llegar a ingresar.

El buscador se ubica junto al menú (aunque si lo desean pueden cambiarlo de lugar mediante retoques en el código) y los artículos saldrán en una columna mostrando extractos y no el contenido completo para no arruinar la simpleza visual que se aprecia al ingresar.

Detalles adicionales son los atractivos comentarios anidados que no quiebran esta calma que el color genera, así como también las tipografías que si bien se encargan de darle vida a la plantilla acompañan perfectamente el estilo.

Graphy – Descargar en Themegraphy

Shine.js: Animación de sombras con JavaScript

Pablo

Shine.js es una propuesta nueva e interesante para aquellas personas que buscan una manera rápida y sencilla de animar sombras, algo a lo que no estamos muy acostumbrados.

La idea de este proyecto es simple, brindar un mecanismo que permita manipular muy fácilmente las distintas sombras utilizadas en nuestro proyecto, permitiendo cambiar su inclinación, expansión y hasta su densidad, todo esto de forma dinámica y con apenas unas lineas de código.

sombras con javascript

Un aspecto que me parece interesante de esta biblioteca es que permite vincular las sombras dispuestas en nuestro proyecto con la interacción generada por el usuario, es así que por ejemplo, podemos variar las sombras según la posición del puntero del raton, o bien según la barra de desplazamiento del navegador.

Ejemplo de uso:

// all parameters are optional and can be changed later
var config = new shinejs.Config({
  numSteps: 4,
  opacity: 0.2,
  shadowRGB: new shinejs.Color(255, 0, 0)
});

// pass the config in the constructor
var shineA = new Shine(document.getElementById('my-shine-object-a'), config);
var shineB = new Shine(document.getElementById('my-shine-object-b'), config);

// or assign it to an instance later
var shineC = new Shine(document.getElementById('my-shine-object-c'));
shineC.config = config;
shineC.draw();

Si todavía no logran entender bien el funcionamiento de esta biblioteca los invito a visitar la demostración en linea.

El proyecto no tiene demasiada ciencia, sin embargo como siempre recomiendo leer la documentación oficial para aprovechar al máximo las posibilidades de esta herramienta.

ShineJS es un proyecto liberado bajo licencia MIT garantizando su libre uso tanto en proyectos personales como comerciales.

Fuentes decorativas en mayúscula para descargar

Tamara

Su uso no es del todo frecuente, tampoco se recomienda el abuso ya que pueden provocar cansancio para quien deba leerlas durante mucho tiempo. Lo ideal es mantener su utilización al mínimo posible y en general para textos cortos como encabezados que requieran destaques o leyendas de botones.

Su aplicación es bastante moderna ya que va en contra de las reglas de uso de las letras, pero a raíz de la publicidad y la necesidad de llamar la atención de quienes la observan, se han instaurado como un clásico. Primeramente se utilizaron en posters publicitarios y más hacia nuestra época es usual verlas en títulos y subtítulos de blogs y sitios web o folletos impresos.

Estos tipos de letra también pueden utilizarse como capitales únicamente, colocando solo la primera letra de cada página o párrafo aunque para ello deberán tener en cuenta el espacio que abarcan en relación a otras fuentes. A continuación incluyo una colección de tipografías que solo tienen caracteres en mayúscula. En algunos casos encontrarán que pueden utilizarse a través de webfonts y en otras pues solo servirán para aplicar en proyectos gráficos.

La característica principal de estos ejemplos es que no poseen su versión en minúscula, obligando a cambiar y combinarla con otras herramientas. En general son decorativas ya que si no quisiéramos que así lo fueran utilizaríamos la propiedad uppercase en una tipografía tradicional y con eso ya tendríamos lo que necesitamos.

Un inconveniente que pueden llegar a encontrar en este tipo de fuentes tipográficas es el uso de los tildes ya que generalmente corresponden a diseños que no son elaborados en nuestro idioma. Deberán tener esto en cuenta a la hora de utilizarlas, pero en general aquellos diseñadores que ponen un poquito más de empeño, incluirán la versión mayúscula acentuada en sus creaciones ya que de esa forma se aseguran más alcance y la correcta visualización, aunque en los casos de extrema decoración realmente no son necesarios.

Paulistana Deco

Descargar Paulistana Deco | QFonts

Diehl Deco

Descargar Diehl Deco | QFonts

Tangled Up In You

Descargar Tangled Up In You | FontSpace

Cinzel Decorative

Descargar Cinzel Decorative | FontSpace

The Main Event

Descargar The Main Event | FontSpace

Arfmoochikncheez

Descargar Arfmoochikncheez | 1001fonts

Novecento Sans

Descargar Novecento Sans | MyFonts

Lime Blossom

Descargar Lime Blossom | 1001fonts

Omar

Descargar Omar | MyFonts

Camelot Caps

Descargar Camelot Caps | 1001fonts

Blnc Round

Descargar Blnc Round | FreebiesBug

Samba!

Descargar Samba! | 1001fonts

Ticket Scraps

Descargar Ticket Scraps | 1001fonts

Fleur Corner Caps

Descargar Fleur Corner Caps | 1001fonts

Editar imágenes en Chrome

Isabel

Muchos optan por Chrome al momento de navegar por varios motivos que dependen (obviamente) de cada uno, sus gustos y costumbres en el uso de Internet. Uno de los puntos mas valorados con este navegador es el uso de aplicaciones o extensiones que se descargan en el Web Store y esto se debe a que nos permiten tener “programas dentro del navegador”, ahorrando pasos, tiempo y sumando funcionalidad al máximo.

Los hay de cualquier tipo que se les ocurra. Enfocados en la motivación, la música, las herramientas sociales, la productividad, salidas, cine, series, diseño y por supuesto arte.

Editar imágenes en Chrome

Psykopaint nos permite enfocarnos en esto último. Se trata de una extensión para editar imágenes en Chrome fácilmente, invitando según explican a crear obras de arte en base a fotos. No se si será a ese punto pero las creaciones son realmente geniales y cuenta con bastantes herramientas que otras aplicaciones similares no poseen.

Vamos a utilizar en lugar de un canvas en blanco, una imagen nuestra como fondo sobre el cual trabajar. Lo que haremos en realidad es luego jugar sobre ella con una variedad de brochas y pinceles realmente genial que se ocupa de tomar los colores de la foto para pintar sobre la misma.

Soporta capas, por lo que trabajar con ella es realmente sencillo y organizado, permitiendo editar pasos sin necesidad de borrar otros, sino eliminando o cambiando la capa en cuestión. Los efectos no son dejados de lado en épocas en los que parecen ser primordiales y si bien no son tantos como desearíamos cumplen perfectamente con sumar acabados diferentes y que se destaquen.

Editar imágenes en Chrome

Los trabajos terminados pueden ser compartidos en un sitio de la herramienta si lo deseamos o simplemente vía redes sociales. Para sumar a este punto se puede acceder a los que fueron publicados y marcarlos como favoritos si alguno nos maravilla o nos inspira de alguna manera.

Claramente no es una herramienta que uno vaya a utilizar para algo avanzado. Se enfoca, de hecho, en pasar el tiempo y liberar un poco de creatividad. Jugar con colores está demostrado hace años que mejora nuestro humor y siempre hablamos de lo necesario que es brindarnos un rato en medio de nuestra jornada para liberar la mente y retomar nuestras obligaciones renovados.

Teniendo en cuenta esto, la herramienta cumple. Funciona establemente y los resultados son muy diferentes dependiendo la imagen que usemos como base, algo que genera diversión.

Psykopaint – Descargar para Google Chrome

Crear, abrir y editar archivos ZIP con JavaScript

Pablo

JSZip es una pequeña pero potente biblioteca JavaScript para la creación, edición y lectura de archivos comprimidos mediante GZIP, todo desde JavaScript y sin la necesidad de utilizar ningún lenguaje adicional desde el lado del servidor.

La compatibilidad de esta biblioteca es excelente, funciona en la mayoría de los navegadores modernos, específicamente comprobado en: Opera 7.5+, Firefox 3.0+, Safari, Chrome e Internet Explorer desde su versión 6.

comprimir zip con javascript

Utilizar JSZip es de lo más sencillo, vamos con un ejemplo de uso:

var zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");

var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});

var content = zip.generate();

location.href = "data:application/zip;base64," + content;

A diferencia de procesar el archivo comprimido desde el lado del servidor la única limitación que podemos encontrar se encuentran en el limite impuesto por el navegador del cliente, en general y según la documentación oficial, procesar un archivo de menos de 10mb no encuentra demasiados problemas y se puede hacer fácilmente, procesar dicho archivo consumo aproximadamente unos 20mb de memoria (en caso de que el archivo a comprimir sea un texto ASCII).

Otra salvedad que se encuentra documentada es que no se recomienda el uso de la biblioteca en versiones inferiores a Internet Explorer 10, esto se debe a su falta de soporte de WebGL.

Sacando estos pequeños detalles la biblioteca funciona perfectamente y cumple su trabajo. JSZip se encuentra liberado bajo licencia MIT lo que permite su libre utilización tanto en proyectos personales como comerciales.

Web: JSZip

Kit de recursos para elaborar logos estilo vintage

Tamara

En varias oportunidades hemos compartido opciones gratuitas que incluían badges y logos estilo vintage, la realidad es que si bien vienen elaborados por defecto uno puede intercambiar los elementos para lograr algo más personalizado aunque no siempre queda bien. En este caso lo que quiero mostrarles es un paquete de recursos que están diseñados para ser combinados, sea cual fuere el objetivo del elemento que desean desplegar, todos y cada uno de estos componentes los ayudará en la tarea para lograr el mejor resultado.

La idea es que a partir de cuatro logos básicos, cada uno de los elementos que contienen pueda ser aplicado en el otro y viceversa, de esa forma si uno de ellos no es completamente lo que buscan pueden encontrar la forma de adaptarlos para formar un nuevo esquema. Me hubiese gustado que tuvieran más opciones, pero entre todos los recursos que compartimos aquí podrán, a partir de esta base, complementar con íconos o tipografías diferentes manteniendo la estética.

Vintage Logo Elements

Descargar Vintage Logo Kit | PixelBuddha

Dentro del archivo de descarga encontrarán información sobre las fuentes y el uso que pueden darle a la herramienta, también un pdf y su correspondiente PSD que contiene el editable, por decirlo de alguna manera. Una vez allí con algunos pocos cambios podrán tener un escudo atractivo, moderno (a pesar de la estética) y que combine bien con su nuevo proyecto. Los invito a recorrer la gran cantidad de íconos que contiene nuestro sitio para abarcar más opciones ya que los espacios están predestinados y resulta muy simple cambiar uno por otro.

Glyphr: editor para tipografías HTML5

Isabel

La creación de tipografías es un tema complicado para quienes recién se inician. No es sencillo, a pesar de que puede parecerlo, y requiere de técnica, paciencia y costumbre haciéndolo para manejar las aplicaciones con mayor fluidez. Como con todo, tiene un progreso de aprendizaje que debemos respetar para ser buenos en ellos.

Otra cuestión es que los programas de diseño de fuentes suelen ser, en su mayoría, avanzados y pagos. No solo pagos sino que bastante caros y quienes no tienen la posibilidad se ven complicados por esto.

Glyphr Studio llega para solucionar estos problemas. Se trata de un editor de tipografías online creado en HTML5 y que ofrece herramientas realmente dignas de comparación con un software tradicional. ¿Pago? no, completamente gratis :D .

Glyphr: Editor para tipografías HTML5

Listar las herramientas sería algo realmente extenso. Podemos crear formas, copiar y pegar, editar manualmente secciones de la tipografía en cuestión, realizar nuevas curvas, seleccionar cada letra por separado y, lo mejor de todo, trabajar por capas. Las capas siempre facilitan el diseño y su organización.

Desde el menú de la izquierda se accede a las opciones. En ellas configuraremos la fuente en cuestión editando una garn cantidad de detalles. Además se puede cambiar el proyecto, exportar los resultados o modificar algo ya creado.

Al seleccionar cualquier sector de la tipografía se verán sobre el lateral sus datos. Aquí podemos cambiar los valores a gusto si preferimos este método al manual, sin olvidar que simplemente podemos combinar ambos. Quizás se puede diseñar a mano pero perfeccionar las ubicaciones con diferentes niveles en los campos que ofrece.

Ni bien ingresamos directamente a la aplicación nos brinda dos opciones. La primera es subir un proyecto ya creado para trabajar sobre él y la segunda es la creación de algo nuevo. Tipeamos un nombre y comenzamos.

Nos vamos a encontrar con un canvas en blanco listo para ser trabajado. Al costado aparece la lista de caracteres para que vayamos seleccionando de a uno y creando nuestra nueva tipografía. Desde allí, solo resta hacernos amigos de las herramientas y animarnos a innovar.

Crear tipografías no es sencillo en parte porque la cantidad que existe en innumerable. Si vamos a hacerlo debemos tener en cuenta que hay que aplicar la creatividad y buscar los puntos ingeniosos u originales que podamos sumar, mantiendo un aspecto limpio y claro.

Aclaración al momento de descargar para quienes sean nuevos en el tema. El archivo resultante que crearemos estará en formato TTX. Lo que se hace con este documento es convertirlo luego a tipografía de extensión OTF. Para esto existen varias herramientas aunque lejos deberían estar de preocuparse ya que desde la misma aplicación si van a “Export font” serán guiados paso a paso incluyendo el enlace de descarga al programa que se ocupará del paso final.

Web: Glyphr Studio

Episodify: lleva un registro de los episodios que miras

Tamara

Aquí en Kabytes, todos somos fanáticos de las series, miramos muchas muy diferentes y a veces sobrepasa nuestra memoria llevar el conteo de lo que vimos y lo que no. En el caso particular de Isa y mío, solemos mirar dramas asiáticos por lo que como tienen un formato diferente a los americanos (no suelen tener temporadas sino que duran x cantidad de episodios y terminan), por momentos es difícil llevar la cuenta de cuál capítulo fue el último que vimos.

He probado todo tipo de aplicaciones para llevar este monitoreo sin éxito, en algunos casos tienen las producciones incompletas, desactualizadas, o ni siquiera están. Es por ello que luego de haber llenado de aplicaciones similares mi móvil pude dar finalmente con un software liviano, simple de utilizar, muy completo y actualizado. Claro que los que solo miren series británicas o americanas no tendrán problemas en hallar sustitutos ya que usualmente son las primeras que se actualizan en las bases de datos, pero para los que miramos aún más cosas, se complica.

Episodify

La aplicación es liviana por el sencillo hecho de que sirve para lo que dice y nada más, buscas la serie o el drama, la encuentras, la marcas como favorita (o se agrega sola cuando tildas un episodio), agregas los episodios que has visto y listo, tienes una lista que te indica por qué capítulo vas desde la primer pantalla. Algo que puede ser algo molesto pero a fin de cuentas es útil, es que cuando uno inicia la aplicación salta una ventana que nos pregunta si hemos visto alguno de los episodios pendientes, es incómodo, puede ser pero cumple su función ya que prácticamente podemos marcar los pendientes directamente sin buscar nada.

Episodify

La gráfica es bastante básica, si buscan algo lindo visualmente pues entonces puede que no sea la aplicación para ustedes (bueno, tampoco tanto pero tengo que decirlo), por mi parte, me ha resultado tan útil y práctica que a fin de cuentas no molesta.

Puede que para algunos sea insuficiente ya que solo sirve para llevar un monitoreo de episodios así que quizás les convenga revisar algunos de los programas que ya hemos publicado o ver una versión online, pero para quienes miran varios animes, series y dramas puede ser de gran ayuda si cuentan con un dispositivo con Android.

Descargar: Episodify | Google Play

Mirakel: gestor de tareas para Android

Isabel

Los gestores de tareas se vuelven necesarios en épocas en las que no logramos organizar nuestro trabajo. Puede ocurrir en cualquier ámbito pero especialmente dentro del mundo del diseño y el desarrollo son muy buscados. El motivo es que las fechas de entrega siempre nos corren de cerca y las modificaciones son constantes. Es lo que le pone movimiento a nuestro trabajo pero al mismo tiempo lo que lo hace muy desorganizado por naturaleza.

Siempre conocemos las mejores opciones en gestores de tareas dentro del formato web pero no debemos olvidar que muchos también lo requieren en sus dispositivos. Es cómodo que si nos llega un feedback o pedido vía mail y no estamos en casa podamos cerrar el proyecto acordando plazos de entrega y anotándolos ahi mismo en una aplicación. Una manera mas de estar siempre conectados (o al menos en horarios laborales).

Mirakel: Gestor de tareas para Android

Mirakel es una de las mejores alternativas dentro de Android con organización de tareas. Sus desarrolladores se presentan dejando en claro que buscan lo mismo que nosotros: “manejar tareas fácilmente, en una plataforma gratuita, con control y en un marco atractivo“. ¿No es lo que necesitamos? ;).

La aplicación permite la creacion de tareas organizándolas de diferentes formas. Se las puede caracterizar con varios colores o incluso crear un proyecto y luego dentro tareas secundarias. Todo sin complicaciones ni pasos avanzados. Algo así como un to-do list pero mas organizado.

Por supuesto no faltan los recordatorios. Selecionamos el día, la hora, el modo de notificación y si gustamos podemos agregar una descripción o nota.

Se pueden sumar archivos o detalles a cada item para no olvidar absolutamente nada si estamos a las corridas en el momento en el cual la llevemos a cabo. Se tuvo también en cuenta la integración con un sistema de backup, riesgo que no deseamos correr claramente si estamos ingresando datos de trabajo.

Visualmente, la UI es versátil y se puede utilizar en tablets sin problemas. Tengamos en cuenta que hoy en día las tablets son cada vez mas numerosas y las aplicaciones comienzan a darse cuenta de esto considerándolas al momento de diseñar su proyecto.

Mirakel funciona realmente bien, de manera fluida y brinda todo lo que se necesita para tener el trabajo y nuestros proyectos mas ordenados. No se expande sumando funciones que la mayoría no buscan y se enfoca, en cambio, en los usuarios promedio que sin dudas la encontrarán como una buena aliada.

Mirakel – Tamaño: 2.1 M – Descargar