Lazy Load de imágenes con JavaScript (funciona con Responsive Design)

Pablo

La carga de imágenes bajo demanda (Lazy Load) es una de las mejores técnicas para acelerar y reducir los tiempos de carga de un sitio web.

Esta tecnica es relativamente sencilla de implementar, sin embargo y con la llegada y casi obsesión que existe por hacer sitios que se adapten a cualquier dispositivo, comenzaron a surgir las diferentes complicaciones.

Para evitar cualquier tipo de complicación existe el proyecto Lazy Sizes, una biblioteca escrita en JavaScript para realizar la carga de imágenes bajo demanda que funciona perfectamente con sitios del tipo adaptables.

lazysizes responsive design

Este proyecto a diferencia de otras alternativas similares cuenta con la gran ventaja de no tener dependencias, algo que agradecerán aquellos que buscan soluciones sin tener la obligación de recargar sus sitios con bibliotecas innecesarias.

Otros aspectos interesantes de Lazy Sizes es que no requiere una configuración para funcionar, la mayoría de las funciones operan directamente con el uso de etiquetas básicas del tipo HTML Data.

Ejemplo de uso:

1. Una vez que descargamos la biblioteca debemos incluirla en nuestro proyecto:

<script src="lazysizes.min.js" async=""></script>

2. Lazysizes no necesita ningún tipo de configuración, podemos emplearla directamente utilizando la etiqueta HTML data (data-srcdata-srcset)

<!-- non-responsive: -->
<img src="low-quality-src.jpg" data-src="normal-quality-src.jpg" class="lazyload" />

O bien:

<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    src="lqip-src.jpg"
    data-srcset="lqip-src.jpg 100w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload" />

Muy simple y rápido. Implementar esta biblioteca JavaScript no tiene ninguna ciencia :)

El autor de Lazy Sizes diseño este proyecto con la vista puesta en el rendimiento, en el sitio oficial de la biblioteca van a encontrar una serie de ejemplos para entender y probar como se comporta este recurso en los distintos escenarios.

Web: Lazy Sizes

Gráficas gratis de barra y circular para Android

Pablo

HelloCharts es una bonita biblioteca creada por y para desarrolladores de la plataforma Android para la creación de gráficas de barra y circulares de manera sencilla.

HelloCharts es compatible desde la versión API 8 (Android 2.2), sin embargo el autor de esta biblioteca recomienda la versión 14 (Android 4.0) por contar con aceleración de hardware. El proyecto se encuentra liberado bajo licencia Apache 2.0, garantizando su libre utilización en aplicaciones personales y comerciales.

grafica combinada para android

Este recurso brinda la posibilidad de crear gráficas de: linea, columna, torta, burbuja, y además de permitir combinar distintos tipos.

Otro aspecto interesante es que las gráficas creadas con HelloCharts permiten la posibilidad de zoom, además de contar con unas bonitas animaciones.

grafica pie para android

El proyecto se emplea como un componente personalizado, se inserta en el archivo XML de nuestra aplicación de la siguiente manera:

 

<lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Luego se captura así:

LineChartView chart = new LineChartView(context);
    layout.addView(chart);

Los datos se ingresan a la grafica empleando un simple ArrayList.

 List<PointValue> values = new ArrayList<PointValue>();
    values.add(new PointValue(0, 2));
    values.add(new PointValue(1, 4));
    values.add(new PointValue(2, 3));
    values.add(new PointValue(3, 4));

    //In most cased you can call data model methods in builder-pattern-like manner.
    Line line = new Line(values).setColor(Color.Blue).setCubic(true);
    List<Line> lines = new ArrayList<Line>();
    lines.add(line);

    LineChartData data = new LineChartData();
    data.setLines(lines);

    LineChartView chart = new LineChartView(context);
    chart.setLineChartData(data);

Es muy sencillo. Si buscan personalizar las gráficas les recomiendo visitar la web del proyecto para encontrar más información sobre su uso.

Web: HelloCharts

Si no les gusta por algún motivo este proyecto, no olviden probar esta otra biblioteca para mostrar gráficas en Android.

Plantillas para libros en InDesign

Tamara

A medida que nos acostumbramos a utilizar los programas correctos, podemos maximizar los resultados no solo en cuestiones de tiempo sino en la forma en la que se muestra el resultado. Me toca de cerca estar en contacto cada vez más con personas que tienen que elaborar sus propios libros ya sea para publicarlos o bien para tener un formato básico al cual recurrir como inspiración.

De cualquier manera, el hecho de poder contar con algunas opciones básicas que desplieguen lineamientos adecuados para la correcta visualización de las páginas, resulta en un buen recurso y finalmente son herramientas que pueden no solo sacarlos del apuro sino permitirles un producto terminado ideal para desplegar todo su material.

Hoy en día encontramos una gran variedad de motivos válidos para desear publicar un libro sin importar la longitud que tenga, de hecho el surgimiento de las redes sociales y el intercambio escrito, ha devenido en una variedad increíble de razones para que muchas personas y empresas deseen plasmar ideas en este formato. Quizás porque ya no es necesario que tengan un formato físico que requiera la impresión a gran escala y eso los hace sumamente accesibles.

Claro está que la gráfica, sea cual fuere la temática que abordará nuestro libro, no puede ser dejada al azar, un rejunte de interacciones en los social media, nuestro perfil de Facebook, un libro sobre diseño, una novela o una tesis, las posibilidades son infinitas y no siempre contamos con el tiempo o las ideas para lograr que estéticamente se transmitan bien las palabras.

Este es un compilado para todos aquellos que buscan específicamente material gráfico para organizar libros diseñados en InDesign, las posibilidades son variadas y está claro que siempre podrán consultar a un profesional, en especial para las tapas, aunque si no cuentan con el dinero suficiente puede que este listado los saque del apuro de la mejor manera.

También está destinado a los diseñadores que necesitan inspiración o quieren utilizar estas plantillas como base para realizar cosas más personalizadas. No importa el destino, este será un buen origen para tener guardado en algún lugar.

Libros en InDesign

A continuación encontrarán una variedad de opciones internas para desplegar textos para lectura, ya sea que necesiten publicar un libro propio o incluso mostrar un resumen de alguna materia, cada una de estas opciones los puede ayudar en la tarea acortando mucho los tiempos de producción y finalmente, permitiendo que se centren en lo más importante, las palabras.

En algunos casos en particular podrán encontrar también, versiones en .doc o .docx que les permitirá realizar el planteo gráfico a partir de la utilización de Microsoft Word. Claro que no es lo más indicado, sobretodo si desean calidad gráfica y un buen resultado final. Pero también puede salvarlos cuando no cuenten con el programa adecuado.

Libros en InDesign

Descargar Book Formats | DIY Book Formats

Un archivo que posee una gran cantidad de opciones en diferentes formatos, y cuenta con archivos .doc, .docx, .idml e .indd. Su distribución es un tanto confusa ya que utiliza letras para designar las plantillas pero no tendrán problemas en descargarlo, abrirlo y utilizarlo.

Libros en InDesign

Descargar Free Book Templates | 48hrbooks 

Una colección de diferentes plantillas con opciones de números de páginas y tamaños de libros, aunque en este caso no tendrán variaciones tipográficas ni planteos gráficos para situar los textos. Es una opción menos completa que la anterior pero pueden combinarse perfectamente.

Libros en InDesign

Descargar Book Template Aldora | StockInDesign

Un diseño impecable y mínimo, con un acabado perfecto y que contempla opciones tipográficas para aquellos espacios en los que se necesita destaque de texto o cuestiones similares que hacen al entendimiento del lector o a la fijación de ideas por parte del escritor. También tiene su correspondiente portada que resulta lo suficientemente versátil para ser utilizada en cualquier temática. Se paga con un Tuit!

Libros en InDesign

Descargar Free InDesign Book Template | DesignFreebies

Un acabado más clásico que incluye su correspondiente portada y resulta muy simple de personalizar. Contiene detalles decorativos en su interior que pueden intercambiarse o modificarse como deseen, siempre que incluyan el archivo de origen. Personalmente, cambiaría la tipografía de destaque ya que resulta un tanto infantil y poco armónica, pero en general estoy segura que les servirán las opciones internas que incluye.

Libros en InDesign

Descargar Free 5×9 Book Template | Jurnsearch

Una alternativa básica pero muy práctica que podrán tener lista con algunas pocas ediciones. Posee todo lo necesario para la elaboración interna del libro con los componentes específicos para que todo quede en su lugar. En este caso no cuenta con su portada correspondiente pero pueden utilizarse cualquiera de las que vienen en los otros ejemplos para completarlo.

Libros en InDesign

Descargar Book Templates for InDesign | Selfpub

Otra de las opciones divididas por tamaños que pueden resultar útiles en formatos específicos. Incluso para aquellas publicaciones de bolsillo o con características particulares que no estén contempladas en otras opciones. Verán que son plantillas muy simples con poco diseño pero que en general servirán como base para sus propias creaciones y, también pueden combinarse con otras alternativas más completas, adaptando el tamaño.

Tapas para libros en InDesign

Entiendo que el diseño de portadas puede ser algo específico según el tema que se encuentre tratado en el libro, pero con una base gráfica y algunos pocos cambios, el resultado puede ser muy interesante, además de servir como inspiración para esos momentos en los que no encontramos material adecuado.

Mi recomendación es que estos archivos solo sean utilizados como punto de partida para plasmar sus propias ideas y siempre se podrán servir de vectores y diferentes tipografías que también hemos publicado aquí.

Tapas para libros

Descargar 5 Book Cover Templates | StockInDesign

Con un simple tuit o compartiendo la información en Facebook pueden acceder a estas cinco fantásticas tapas y sobretodo con un acabado profesional que no encontrarán en otro lado de forma gratuita. Son sin dudas de lo mejor que hay en Internet. Un excelente uso del espacio, el color e incluso, se contemplan varias opciones gráficas dentro de las temáticas que pueden ser abordadas.

Tapas para libros

Descargar InDesign Books | InDesignSecrets

Esta opción cuenta con cinco variaciones de tapas que los ayudarán a plantear un libro estéticamente correcto para que los elementos no queden fuera de lugar. Deberán considerar la temática y el mensaje de aquello que planean comunicar para que todo concuerde, pero es una buena base.

Claro está que las opciones no son infinitas ya que la mayor parte de las plantillas de buena calidad suelen ser de pago, pero por otro lado, este conjunto de recomendaciones pueden resultar en un buen punto de partida para cualquier proyecto de publicación que estén comenzando.

Teniendo en cuenta como comentaba antes el mensaje que desean transmitir y la temática que debe ser desplegada correctamente para el lector, no tendrán problemas al utilizar todo este material. Recuerden que combinar imágenes, vectores, formas y tipografías, en estos casos es lo mejor. Y no tengan miedo de probar diversas opciones de colores que serán a fin de cuentas los que atraigan la mirada del quien decida leer lo que escribimos.

Modo mantenimiento en WordPress

Isabel

Al realizar cambios en nuestro sitio, si no tenemos en cuenta la medida que tendrán y de que manera afectarán al usuario estaremos creando un problema. Generalmente si solo se trata de algo menor puede hasta ni notarse, mucho menos en el ojo de quien no trabaja de esto. Sin embargo, cuando se trata de cambiar una plantilla completa, mover elementos, agregar funciones o procesos que puedan generar algún tipo de error es importante que consideremos a quienes nos leen y visitan a diario o periódicamente.

Hemos hablado anteriormente del modo mantenimiento o construcción que quizás vieron al visitar un sitio alguna vez. El mismo permite justamente que podamos realizar cambios sin problemas y dejando el sitio inactivo para navegar temporalmente pero sin errores sino mostrando un mensaje que lo indicará. También se aplica a cuando armemos un nuevo proyecto y deseemos informar de su fecha de lanzamiento.

Modo mantenimiento en WordPress

WP Maintenance Mode es un pequeño plugin para WordPress en modo mantenimiento que en segundos nos permitirá activar estas funciones que comentaba sin problemas. Dentro de sus funciones veremos que se puede personalizar a gusto visualmente ya sea modificando tipografías, colores y fondos con opción a color liso o una fotografía y así lograremos poder dar una idea de lo que se viene que impacte al visitante.

Funciona perfecto en cualquier medida de dispositivo y como suele ocurrir ya que una de las ideas es contar con esto, permite suscripción vía correo electrónico por parte de quienes deseen estar al tanto de los cambios o ser notificados del lanzamiento. Por otro lado se suma el formulario de contacto para consultas puntuales que llegarán a nuestra casilla configurada previamente.

Modo mantenimiento en WordPress

Imposible olvidar la parte social para lograr interacción y se hará mediante una sección con diferentes iconos que invitan a conocernos en variados perfiles si es que los poseemos.

Como vemos en los ejemplos, la página muestra el mensaje principal de reformas o próximo lanzamiento y un texto mas detallado en la parte inferior. Mediante un contador se verá el tiempo que falta hasta el espero momento y recién luego llegarán las vías de contacto que comentaba antes. Claro, todo es editable pero siempre es buena idea saber como se verán todas las herramientas juntas como en la imagen de ejemplo.

Para manejar, editar y configurar este plugin aparecerá dentro del panel de WordPress una nueva opción desde donde serán dirigidos sin problemas. Al ser realmente sencillo prácticamente cualquier tipo de usuario será capaz de comprenderlo sin problemas, detalle que siempre es agradecido cuando se trata de un plugin.

WP Maintenance ModeDescargar [WordPress3.5+]

Cinco nuevas opciones de tarjetas personales en PSD

Tamara

A medida que pasa el tiempo las opciones de recursos se van actualizando y siempre es importante tener de dónde sacar nuevas ideas o herramientas. En cuestiones de tarjetas personales o de negocios no hay una tendencia específica ya que se recomienda implementar conceptos que tengan que ver con la actividad representada, pero si existen alternativas nuevas que bien pueden disparar nuevas ideas o ser utilizadas como vienen dadas.

En este caso, la gente de Theme.co ha liberado cinco opciones de tarjetas personales o de negocios ideales para cualquier tipo de actividad. También contemplan la inclusión de perfiles en redes sociales que suele ser un aspecto que se deja de lado cuando pueden ser la puerta para posibles actividades comerciales.

Cada uno de los diseños es completamente diferente el uno del otro, desde las variaciones de estilo hasta la orientación y los colores, todo es diferente y puede intercambiarse entre uno y otro diseño, teniendo en cuenta que se debe mantener la armonía básica en cada uno de ellos.

Free Business Card Templates

Descargar 5 Free Business Card Templates | Theme.co

Estas opciones se suman a todas las que hemos enviado con anterioridad y al estar diseñadas en Photoshop, su edición es sumamente simple, solo hay que tener en cuenta que puede haber algunas tipografías que se necesiten descargar antes de cambiar cualquier elemento de base para procurar que todo se vea correctamente.

Diseños planos, buena utilización del espacio y variación de los elementos y combinaciones entre frente y reverso. Se pueden utilizar las ideas para reemplazarlas por otros motivos, en el caso de las texturas, o los espacios destinados a los logos para utilizar otro tipo de emblemas o su propia creación particular.

Creo que en algunos casos, los elementos decorativos podrían también, ser reemplazados por otros, ya que pueden encontrarse una gran cantidad de opciones caligráficas que irían muy bien en aquellas plantillas que despliegan cierta estética vintage. Siempre hago hincapié que este tipo de recursos puede ser muy útil desde el punto de vista práctico para salir de un apuro, obteniendo un excelente resultado, pero también pueden resultar como un buen disparador de nuevas ideas.

Las mejores aplicaciones Android para editar fotos

Isabel

Varias veces he remarcado que mi aplicación preferida para editar imágenes en Android era Pixlr. Con el tiempo salieron algunas mas pero por suerte supo no quedarse atrás de ellas. Mas allá del uso que le den al móvil, con el tiempo se transformó en una herramienta para varios fines, siendo de los mas activos el de la fotografía. No existe persona que conozca que no saque a diario fotos con su celular, algo curioso cuando recordamos que no tanto tiempo atrás solo eran vía de comunicación. Mi primer celular fue un Startac Digital y en aquella época (si, hace bastante :P ) era una locura pensar simplemente que lo podíamos usar para… ¡hablar!.

Dentro de este grupo gigante de usuarios que sacan fotos estoy yo. Si bien tengo como aplicación casi permanente en mi celular la que les recordaba antes, muchas veces buscando algo diferente pruebo alternativas para Android, muchas de ellas realmente geniales. Ya hablando en general, la moda de las selfies también generó una nueva ola de lanzamientos con diferentes fines: mejorar la imagen, agregar stickers, efectos, armar collages, etc.

De tanto probar, qué mejor que mostrarles una selección de ellas y que ustedes puedan conocerlas buscando cambios en sus creaciones y elementos que puedan hacer que sus imágenes se destaquen.

Las mejores aplicaciones Android para editar fotos

Las mejores aplicaciones Android para editar fotos

No Crop: Inicio la lista con No Crop porque si bien las posibilidades de edición son menores que en otro casos, sé que muchos buscan una forma de no recortar las fotos para Instagram. La red social es buenísima pero sabemos que una de sus características son las fotos cuadradas. Sin embargo, de a poco se ve que muchos usuarios evitan esto mostrando las imágenes completas en diferentes formatos.

Hay aplicaciones numerosas para esto pero si bien lo intenté con varias No Crop es bastante simple de usar en las manos de cualquiera. Se puede cargar una imagen desde la galería, capturar en el momento o ingresar en la opción de collages. Además de actuar evitando recortes se permite aplicar un pequeño grupo de filtros, textos y stickers. Consideren igualmente que el fuerte de No Crop no es este sino la forma gráfica que tendrá el resultado.

Descargar No Crop – Tamaño: 7.6M [Android v4.0+]

Las mejores aplicaciones Android para editar fotos

Phonto: Seguramente han visto imágenes con textos en más de un lugar. Muchos se preguntan cómo lograrlas sin tener que recurrir a un editor avanzado ya que claramente no es la idea si estamos en un dispositivo portátil. Phonto puede ser la solución incluso cuando no tiene la enorme cantidad de opciones que solía tener en iOS. Sin embargo cuenta con mas de 200 tipografías y la posibilidad de sumar mas descargando a gusto. Por supuesto se puede editar tanto el tamaño del texto como sus colores, rotarlo, aplicar sombras, bordes o diferentes espacios.

A diferencia de otras aplicaciones similares se enfoca en brindar la mayor cantidad de personalización en el texto y no simplemente aplicarlo de manera automática.

Descargar Phonto – Tamaño: 15M [Android 4.0+]

Las mejores aplicaciones Android para editar fotos

Photo Effects Pro: Todo aquello que busquen para armar fotos con algo de humor lo tendrán aquí, organizado de manera funcional y armoniosa. Mas de 40 efectos, tipografías, stickers, marcos, collages y hasta la opción de pintar sobre la imagen manualmente.

Obviamente no faltan las mejoras visuales clásicas para modificar brillo, contraste, ruido y todo aquello que pueda afectar al resultado negativamente.

Además de esto es completamente gratuita, algo que cada vez se ve menos en Google Play y que sin dudas se volvió una ventaja sobre la competencia que puedan tener. Lo mas comentado sobre este caso es que con el tiempo se está transformando en una opción para crear montajes divertidos y compartirlos con quien deseemos por simple entretenimiento.

Descargar Photo Effects Pro – Tamaño: 11M [Android 2.3+]

Las mejores aplicaciones Android para editar fotos

BlendPic: Volvemos a una aplicación que brinda puntualmente un efecto popular. La doble exposición en imágenes dependiendo la temática puede transformarse en el marco perfecto para lo que queremos transmitir y BlendPic hace que logremos esto en instantes.

Básicamente, se unirán dos imágenes a elección pero además podemos modificar transparencias para lograr la composición adecuada, degradados para unificar aun mas el acabado y por supuesto vías para compartir todo en redes sociales. Si buscan el famoso efecto, esta es sin dudas la aplicación mas efectiva y sencilla para encontrarlo.

Descargar BlendPic – Tamaño: 8.2M [Android 2.3+]

Las mejores aplicaciones Android para editar fotos

PicsArt: Son pocos quienes todavía no conocen PicsArt, ya que desde hace tiempo junto con Pixlr está entre las mas descargadas y reconocidas si hablamos de edición de fotografía en Android.

Esto no es una locura si tenemos en cuenta que incluye absolutamente todo: collages, filtros, manipulación fotográfica, herramienta para dibujar, máscaras, stickers y mas. Seguramente no sea la mejor para quienes no buscan tanta complejidad pero si es el caso contrario es la número uno, al menos actualmente. Cuestión solo de probarla para comprobarlo ustedes mismos.

Uno de los puntos destacados de PicsArt es que permite aplicar dibujos y filtros en tiempo real al sacar una fotografía. Puede sonar algo sin sentido pero resulta útil para asegurarnos de que el ángulo y la iluminación son adecuados. Además cuenta con una sección similar a una comunidad donde podemos descubrir imágenes realmente vistosas de otros usuarios.

Descargar PicsArt – Tamaño: varía según dispositivo [Android 2.3+]

Las mejores aplicaciones Android para editar fotos

Photo Editor Pro: Una vez más hablamos de una aplicación que se encuentra entre las mas conocidas. Poderosa alternativa que ayudará a crear diferentes diseños y que además de la edición tradicional incluye funciones que mejoran retratos, clásicas en software de escritorio y que se aplican por lo general para eliminar manchas en la piel, ojos rojos u otros puntos estéticos.

Photo Editor Pro también sorprende con su bien desarrollado color splash. Ese efecto lo que hace es mostrar un solo color de la imagen, enfocado en un objeto o área seleccionada. Seguramente han visto ejemplos que se muestran en blanco y negro pero destacan algo a puro color ya que junto al tilt shift son estéticas muy conocidas. Si bien muchas herramientas tienen esta función no todas hacen el trabajo correctamente.

Descargar Photo Editor Pro – Tamaño: 7.2M [Android v2.3+]

Las mejores aplicaciones Android para editar fotos

Candy Camera: En muchos países es la número uno, principalmente en Asia. Seguramente esto se aplique en un futuro a esta parte del mundo y conocerla es algo al menos tentador. Los filtros se aplican en tiempo real como en PicsArt, si bien son diferentes. También cuenta con opciones para embellecer los retratos y efectos de color, iluminación, acabados retro, contrastes y lomo, entre otros.

Mas de cien marcos completan su capacidad, esa que la llevó a estar entre las mas descargadas y que de a poco la ubica en un aún mejor lugar. Visualmente sin dudas es de las mas atractivas. Es curioso pero muchas aplicaciones enfocadas en lo visual olvidan enmarcar sus funciones en algo que cumpla a primera vista y Candy Camera lo hizo. Con UI flat y minimalista, la foto será protagonista absoluta.

Descargar Candy Camera – Tamaño: 21M [Android v2.3+]

Las mejores aplicaciones Android para editar fotos

Photo Editor by Aviary: Tiempo atrás Tamara les contaba sobre Aviary, una suite de aplicaciones de diseño online que resulta ser muy útil y permite una enorme cantidad de funciones si consideramos que es libre de uso. Sus mismos creadores armaron un editor de fotos para Android que si bien tiene la opción de comprar diferentes agregados cumple perfectamente con los que ya incluye.

Con un solo tap se aplicará una mejora automática en la imagen sobre la que estemos trabajando y generalmente los resultados son apropiados, realmente la hacen destacar mas. A diferencia de otras hay que pensar que se enfoca en la edición mas pura de la imagen y no tanto en los filtros y marcos. No es que no los tenga, de hecho cuenta con una generosa cantidad de ellos pero es simplemente una aclaración que nunca está de mas hacer.

Descargar Photo Editor by Aviary – Tamaño: varía según dispositivo [Android 2.3+]

Las mejores aplicaciones Android para editar fotos

Camera ZOOM FX: Como indica su nombre esta aplicación nace para brindar efectos. Cuenta con 15 opciones diferentes mas 3 marcos y vale considerar que además actúa como cámara alternativa. Si la utilizamos accedemos además a filmar, por ejemplo, un video time lapse como esos que tanto se buscan hoy con el nacimiento de Hyperlapse.

Tap para enfocar, niveles ISO, modo ráfaga, activación por voz, timer, modos de captura y cámara en silencio son solo algunas de las funciones que ofrece. Interesante mezcla entre los filtros y la acción que seguramente agrade a mas de uno. Además de extras que se pueden abonar está abierta la descarga a paquetes gratuitos que sumarán animaciones, bordes y otros elementos.

Descargar Camera ZOOM FX – Tamaño: 3.2M [Android v1.6+]

Las mejores aplicaciones Android para editar fotos

LINE Camera: LINE Corporation nace en Japón años atrás con otro nombre que desde el año pasado cambió al actual. Son los mismos encargados de NAVER, uno de los portales mas importantes de Asia que además desarrolla infinidad de aplicaciones y herramientas extremadamente exitosas en el mundo entero. Seguramente escucharon hablar del servicio de mensajería ya que cada vez son mas las personas que lo utilizan pero además se puede encontrar software de varios tipos.

LINE Camera es sinónimo de fotografía divertida pero también de mejoras notables en la imagen. Nuevamente estamos hablando de una cámara alternativa y no solo de un espacio para edición. Además de efectos se pueden utilizar stickers, estampas, dibujos, armar collages, mejorar la calidad de la foto y personalizar cada uno de estos elementos o sus niveles fácilmente.

Si lo que trae por defecto en algún momento no es suficiente, existe un área para descargar mas contenido que suele ser actualizado semana tras semana. Quienes busquen apliques y resultados originales seguramente encuentren en esta última opción lo que mas disfrutarán.

Descargar LINE Camera – Tamaño: 22M [Android 2.3+]

Al armar la selección intenté incluir aplicaciones de todo tipo. Si bien la base es la edición fotográfica como habrán visto este termino abarca mas de lo primero que nos viene a la cabeza. La idea es que mas allá de lo que busquen algo pueda resultarles, tal cual me ocurrió a mi al probar cada una de ellas, dejando varias descartadas pero maravillándome con otras y su excelente desarrollo.

Osmo, corto de animación

Tamara

¿Alguna vez pensaron en las consecuencias de sus acciones sobre los demás y sobre ustedes mismos? Osmo es un viaje al centro de nuestra mente y esa inquietante imposibilidad del ser humano a renunciar a aquello que considera sus pequeños placeres por entender que nada de ello lo afecta y si lo hace, pues, no es tan importante, hasta que finalmente cuando ya es demasiado tarde caemos en la realidad de lo que estamos haciendo y cuánto nos ha perjudicado.

Todo lo que hacemos tiene consecuencias y todo es producto de cada una de las decisiones que tomamos. En este caso, Osmo, despliega algunos momentos de lucidez entre aquello que encarcela a nuestro personaje, pero si nos fijamos bien es solo la adicción lo que se muestra, porque sin quererlo, irá ganando espacio en su vida hasta transformarlo en un ser inútil y sin ningún tipo de motivación.

Corto animado: Osmo

Tiene una escena subida de tono, aunque no creo que sea tan grave como para que no lo puedan ver. La calidad de la animación es impecable, como también el acabado sobre las texturas que se ha logrado. El cabello, una de las cosas más difíciles de hacer que se vea natural en este tipo de técnica, aquí es espléndido. El ambiente, el ritmo y el personaje, conforman un todo muy interesante a pesar de ser una historia simple, en apariencia.

Todo lo que envuelve al ser humano se basa en sus decisiones y en su posibilidad de decir que no o que si a aquello que le puede resultar nocivo. Una forma un tanto rebuscada de dar el mensaje pero considero que cumple su función. Pensarán qué cosas no pueden dejar de hacer y cómo cambiaría su vida si el día de mañana decidieran hacerlo.

Realizado por Vadim Draempaehl.

Theme gratis para WordPress estilo Pinterest

Isabel

Ya hace tiempo llegó Pinterest ofreciendo una plataforma para compartir contenido visual en formato de grilla que se transformó en su característica principal. Si bien catalogar todo sitio con ese formato como una “herencia” de esta red es relativo, es real que comenzaron a verse muchísimos mas diseños con ese estilo.

Esto por supuesto incluye WordPress y las plantillas que se van ofreciendo tanto gratuitas como pagas. Como ya hemos repasado, las grillas brindan una posibilidad de mostrar mas contenido en primer plano, algo muy útil en determinadas temáticas que puede ser excelente camino para un futuro proyecto que sea adaptable a esto.

Theme gratis para WordPress estilo Pinterest

Garfunkel es un theme gratuito para WordPress estilo Pinterest que se presenta con una cabecera de gran tamaño situada sobre una fotografía generando atracción al instante. Sobre la misma se ve el menú de navegación que puede o no ser desplegable como en general se ve en la mayoría de los sitios actualmente. Los iconos sociales no faltan pero mantienen una línea bastante neutra sin distraer de lo importante sino funcionando como lo que son, una via de contacto mas y hoy en día obligada.

Los artículos se mostrarán en grid con posibilidad de sumar posts “marcados” que quedarán al inicio del sitio en un lugar destacado y señalados con una pequeña cinta de color rojo. Infaltable es en este tipo de themes que se permitan formatos diferentes y es así como veremos marcos según se trate de un texto, un video, archivos de audio, etc.

Theme gratis para WordPress estilo Pinterest

En la demostración la plantilla carece de pie de página pero si pasamos a una entrada individual veremos que se puede activar el mismo con tres columnas y allí incluir el contenido que deseemos en un entorno realmente limpio y ordenado que puede servir como fuente de información, galería o muestra de las últimas publicaciones. A diferencia del home, también se verá que el post pasa a ser protagonista absoluto casi a pantalla completa, perfecto para quienes estén buscando un espacio donde se pueda leer tranquilamente sin distracciones.

Creado en base a Masonry para lograr la atractiva grilla principal, el theme suma un propio panel de opciones que hará que cada modificación sea realmente sencilla y aplicable en cuestión de segundos. Salvo que vayan por cambios puntuales mas avanzados, personalizar el proyecto será una tarea fácil para cualquiera que sepa ingresar al panel directamente y tenga ganas de sumar sus toques personales a la idea.

Garfunkel – Descargar en Anders Norén

Descripciones emergentes con transformaciones CSS

Tamara

Para quienes no reconozcan a qué me refiero con descripciones emergentes, se trata de las populares tooltips que se despliegan cuando nos paramos con el mouse sobre un botón, una imagen o cualquier tipo de contenido interactivo. Estas pequeñas ayudas son ideales para agregar información accesoria para el usuario y suelen servir usualmente como una guía indicativa, aunque como verán en los casos que se presentan en el tutorial, pueden contener grandes cantidades de datos si están bien implementados.

En este caso quiero compartir con ustedes otro gran trabajo de Codrops, que nos ayuda a implementar estos tooltips de formas originales, ya sea que estén buscando experimentar con ellos o necesiten agregarlos a su próximo proyecto. Tiene varias opciones estéticas y funcionales que responden muy bien al uso del espacio y sobretodo, se relacionan correctamente con su entorno en cada uno de los casos.

Los creadores de este tutorial, utilizan solo transiciones CSS aplicadas sobre elementos SVG para crear las formas que verán desplegarse. Encontrarán allí toda la información de descarga aunque pueden utilizar cualquier origen de recursos que conozcan o le hayamos recomendado en algún momento.

Descripciones emergentes

Descargar Tooltip Styles | Ver Demo | Codrops

También hay algunas salvedades como cuestiones prácticas que no se visualizan bien en ciertos exploradores populares como por ejemplo, la utilización de una transformación basada en porcentaje en líneas svg en Firefox. La recomendación aquí es que utilicen Chrome, mi recomendación sería que eviten tales artilugios para evitar problemas ya que si consideran incluir alguno de los ejemplos en cualquier sitio, la realidad es que debe verse bien en todos los exploradores.

Por otra parte, la animación sobre stroke-dasharray no funciona en las versiones anteriores a IE 11. Como siempre les menciono, este es un sitio que si bien explica paso a paso cómo implementar el código detrás de los ejemplos, la realidad es que muchas de estas prácticas se encuentran aún en su fase de prueba, por lo que deberán considerar realizar pruebas para optimizar visual y funcionalmente cualquier inclusión que deseen realizar.

Descripciones emergentes

Dicho esto, entiendo que es un material valioso para aquellos que buscan experimentar con las posibilidades que ofrecen las transiciones CSS y las diferentes formas de desplegar llamadas de atención que resulten visualmente atractivas para el usuario y al mismo tiempo, cumplan su función informativa de manera original.

10 alternativas gratuitas para crear alertas con JavaScript

Pablo

Cuando diseñamos o desarrollamos ya sea un sitio o una aplicación, muchas veces pasamos detalles por alto, ya sea por costumbre, pereza o por simple desconocimiento.

Por ejemplo, funciones básicas que empleamos todo el tiempo, necesarias e imprescindibles, una de estas funciones que existen desde hace ya varios años es Alert(), función de JavaScript que permite lanzar una alerta en primer plano para alertar al visitante determinado acontecimiento.

Alert() es una función sencilla para desplegar mensajes, pero que lamentablemente y de forma nativa evoluciono muy poco, al menos desde el punto de vista estético.

Emplear dicha función no esta mal, pero siendo honesto, deja un saber amargo cuando el diseño total del proyecto es cuidado.

Uno de los principales problemas de hacer uso de esta función JavaScript para lanzar alertas es su diseño poco homogéneo, esto se debe a que cada navegador de forma nativa, diseña estas alertas de un modo distinto. Si bien es cierto que a nivel funcionalidad todos los navegadores hacen una correcta interpretación, desde el punto de vista estético estas diferencias se encuentran bien marcadas.

Otro aspecto que me molesta de la alerta por defecto es su aspecto rudo, no lo digo por solo por una cuestión estética, sino más bien por la referencia directa que hacemos las personas cuando vemos este tipo de carteles en nuestra computadora y como los relacionamos con un producto mal diseñado, probablemente esto se deba a muchos años recibiendo estas alertas cuando un programa se colgaba, aunque este ultimo punto quizás sea por mi edad y tantas luchas con equipos y sistemas operativos hoy obsoletos.

La buena noticia es que una alerta lanzada con JavaScript se puede modificar, cambiando no solo su aspecto visual sino también su comportamiento. Adecuando el diseño al de nuestro proyecto para que el mismo guarde una relación, haciendo más amena la experiencia del usuario.

Para personalizar una alerta les presentó 10 alternativas, todas guardan relación, sin embargo algunas presentan características interesantes.

1. Sweet Alert. Una biblioteca Javascript que nos permite reemplazar fácilmente el Alert() de toda la vida, el diseño se encuentra modernizado además de presentar pequeñas animaciones. El resultado es muy bueno.

Para emplear esta biblioteca necesitamos incluir la hoja de estilo y archivo JavaScript a nuestro proyecto, luego unas pocas lineas de código hacen la magia. Es muy simple y el resultado es muy bueno.

alerta animada con javascript

2. Meteor. Una bonita interpretación sobre como debería funcionar una alerta. A diferencia de la convencional la propuesta consiste en mostrar pequeños avisos, en algún rincón del navegador.

Esta biblioteca propone un sistema de notificación más que uno de alertas, sin embargo y llegado el caso puede ser un recurso interesante si lo que queremos mostrar es un pequeño aviso a nuestros visitantes sin llegar al punto de invadirlos con una alerta que se ubica en el centro de la pantalla.

Además el proyecto brinda una serie de alternativas a la hora de animar los mensajes, un bonito resultado muy fácil de emplear.

notificaciones animadas

3. WOW-alert. Un plugin jQuery para reemplazar directamente las alertas por defecto creadas con JavaScript, su implementación se realiza en pocos minutos y el resultado es muy agradable, eso si, es muy fácil personalizar las alertas para que guarden una relación con el diseño de nuestro sitio.

reemplazar alert con wow

4. Freeow. Otro sistema de alertas pensado para funcionar a modo de notificaciones, tiene como principal característica la de mostrar un bonito efecto fade para aparecer y desaparecer. Es ideal para comunicar acontecimientos secundarios, por ejemplo que el servidor finalizo una acción, o que se guardo un documento de manera automática.

En el sitio del proyecto van a encontrar un formulario que permite modificar las opciones de configuración, ideal para probar la biblioteca antes de emplearla.

alertas estilo Growl

5. Twitter Bootstrap Extensions: Notifications. Un sistema de alertas/notificaciones pero pensado para funcionar de manera conjunta a Bootstrap.

El punto más favorable de esto es que si nuestro proyecto emplea Bootstrap nos vamos ahorrar unos cuantos bytes de transferencia al tener la mayoría de las dependencias necesarias instaladas.

Además su estructura se basa también en el framework de Twitter lo que permite una sencilla modificación.

sistema de alertas compatible con bootstrap 3

6. Alertify.js. La biblioteca ya no se actualiza, sin embargo siempre me gustó el resultado que deviene de su utilización. Este proyecto lo utilice varias veces y nunca tuve problemas.

Es liviano, no tiene dependencias, es fácil de usar y lo mejor es que funciona en la mayoría de los navegadores modernos, además de correr muy bien en navegadores de dispositivos móviles.

dialogo sencillo con alertify

7. jQuery-popup-box. Una biblioteca para emplear con jQuery y jQuery UI. Muy fácil de usar.

Las alertas se lanzan con apenas unas linea de código y sin realizar complejas configuraciones, eso si, las posibilidades son muy limitadas. Ideal para aquellos que buscan una alerta un poco mejor que la que se utiliza por defecto.

ejemplo basico de dialogo ui

8. Zebra Dialog. Un plugin jQuery para lanzar alertas pero que a diferencia de las soluciones anteriores cuenta con un abanico muy importante de posibilidades de configuración.

Esta biblioteca tiene la posibilidad de configurar el tipo de alerta, si es de error, una advertencia, etc. Esto puede ser muy útil cuando vamos necesitamos confirmar una acción que puede devolver distintas respuestas, por ejemplo, completar un formulario con determinado tipo de datos, validaciones, etc.

notificacion sencilla

9. Dalert. Otro plugin para jQuery y jQuery UI. Tiene varias opciones de configuración y cuenta con un diseño que permite realizar cambios de una manera rápida y sin demasiadas complicaciones.

ejemplo de dalert

10. MooDialog. Una alternativa para lanzar alertas personalizadas pero empleando el framework Mootools, que muchos dan por muerto, pero que aún conserva muchísimos fanáticos en todo el mundo.

alerta con mootools

Espero que les resulte de utilidad esta pequeña colección.

Como siempre todas las sugerencias son bienvenidas :D