Plantillas de calendarios 2017 para imprimir

Tamara

Ustedes pensarán que es un poco apresurado empezar a publicar calendarios 2017 desde ahora, tal vez. Sin embargo, me ha pasado en pleno Julio que he tenido que marcar cosas para el año que viene y contar con uno nunca está de mas.

En lo personal, siempre tengo calendarios impresos, es cómodo, práctico y puedo verlo en mi escritorio rápidamente. Esto resulta muy útil sobretodo si necesitamos programar eventos a futuro constantemente como es mi caso.

Plantillas de calendarios 2017 para imprimir

Ahora bien, puede que utilicen sus calendarios solo para consultarlos. Por otra parte, puede que necesiten una base para agregar sus propios diseños o logos de clientes. Cualquiera sea su caso, estas plantillas les vendrán más que bien.

Plantillas de Calendarios 2017 para imprimir

Entre las opciones que les quiero recomendar hoy, seguramente habrá más en el futuro, encontrarán archivos para descargar calendarios 2017 en varios formatos. Calendarios de mesa, de bolsillo y de pared entre muchas otras. Todas están listas para imprimir con solo registrarse como usuario.

Plantillas de calendarios 2017 para imprimir

Descargar Calendario 2017 de mesa

Generalmente se disponen en bases hechas en formato tríptico y son perfectos para tener en el escritorio aunque suelen ocupar un espacio que a veces no tenemos.

Plantillas de calendarios 2017 para imprimir

Descargar Calendario 2017 de bolsillo

Un formato reducido que cabe en pequeñas agendas. Es el que permite menos diseño pero al mismo tiempo el más práctico.

Plantillas de calendarios 2017 para imprimir

Descargar Calendario 2017 de pared

Un clásico de las paredes de las oficinas que si bien tiene un diseño conocido, se utiliza mucho para incluir marcas o imágenes relacionadas a las mismas.

El sitio que nos brinda estos recursos es Cevagraf, una Imprenta Cooperativa Online que se dedica a ofrecer servicios impresión desde hace años. La Cooperativa, ofrece a sus usuarios la posibilidad de utilizar sus plantillas de forma gratuita.

Si recorren el sitio encontrarán muchísimas más opciones para descargar y editar con su propio material. Y, por último, si viven en España, también pueden solicitar sus archivos para imprimir directamente desde su panel de creación.

Material Design para Bootstrap 3

Pablo

Existe una clara tendencia en el mundo del desarrollo de intentar replicar una misma experiencia de usuario tanto en móviles como en navegadores de escritorio. Lograrlo no es sencillo, sin embargo existen recursos para facilitarnos esta tarea como es el caso de Material Design para Bootstrap 3.

material design para bootstrap 3

MD para Bootstrap 3 es un desarrollo de un programador independiente que está intentando, con gran éxito, replicar la experiencia de Material Design para Android en cualquier navegador web, algo que ya muchos intentaron, sin embargo este proyecto utiliza bootstrap como framework de desarrollo, detalle que es sumamente interesante.

Este recurso se instala fácilmente como cualquier theme para Bootstrap con la gran ventaja que esto representa. Una solución sencilla al problema de lograr una experiencia similar entre aplicaciones móviles nativas y soluciones basadas en navegadores.

Instalación de Material Design para Bootstrap 3

  • NPM : npm install bootstrap-material-design
  • Bower : bower install bootstrap-material-design

Una buena noticia para aquellos que están buscando economizar recursos, este proyecto está disponible para su utilización desde dos CDN oficiales.

Este es un ejemplo de los scripts necesarios para su funcionamiento

  <!-- Material Design fonts -->
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- Bootstrap Material Design -->
  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">

Este proyecto cuenta con los principales componentes de bootstrap en su versando para Material Design.

Como siempre les recomiendo visitar la web del proyecto para recibir más información además de ver sus funciones en acción.

Web: MD para Bootstrap 3

Botones con efectos de distorsión utilizando filtros SVG

Pablo

Emplear archivos SVG en nuestros proyectos es una buena idea, no solo por sus magníficas propiedades que lo convierten en una alternativa perfecta para la realización de sitios adaptables, sino también por las opciones que brinda a la hora de aplicar efectos mediante la utilización de filtros desde CSS mezclados con los filtros nativos de SVG.

Una aclaración, la tecnica empleada por el autor de este proyecto funciona perfectamente en Firefox como Chrome, sin embargo podríamos experimentar algunas imperfecciones en otros navegadores no tan modernos, convirtiendo al recurso en una tecnica altamente experimental.

Botón animado utilizando filtros SVG

La biblioteca completa con sus respectivos botones y efectos la pueden descargar directamente Distorted Button Effects.

Botón animado utilizando filtros SVG

Primero necesitamos un botón común y corriente

<button class="button">Click me</button>

Estilizado mediante CSS, el botón quedaría de la siguiente forma:

captura boton css svg

Luego definimos el filtro nativo sobre SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>

Y por ultimo empleamos CSS para activar el filtro SVG

.button {
  /* other styles */
  -webkit-filter: url("#filter");
  filter: url("/#filter");
}

Obviamente este ejemplo es sumamente básico, si se dirigen al apartado Github del proyecto (Distorted Button Effects) van a encontrar autenticas maravillas de uso, mostrando lo potente que resulta esta combinación.

No olviden tampoco, visitar Codrops para leer una completa reseña sobre el funcionamiento de los filtros SVG, algo que a mi entender tiene muchísimo potencial.

Crear una ventana popup en Android

Pablo

Luego de unas cuantas semanas de inactividad en este blog, vamos a intentar retomar el ritmo de publicación (o al menos esa es la intención). En esta oportunidad vamos a recomendar una pequeña, pero no por eso menos importante, herramienta gratuita para mejorar nuestras aplicaciones Android, estoy hablando de MaryPopup, una forma simple de crear una ventana popup en Android.

MaryPopup es un recurso impresionante para aquellos programadores que están buscando lanzar diálogos del tipo popup con un toque original. Podemos lanzar un diálogo centrado, alineado hacia la izquierda o bien cerrarlo desde el mecanismo provisto por su autor, todo de forma simple y sin tener que agregarle complejidad a nuestro desarrollo, un aspecto fundamental hoy en día.

draggable ventana popup en Android

Un detalle, MaryPopup es un complemento 100% compatible a Material Design, esto es una ventaja si estamos intentando tener una experiencia homogénea en nuestra aplicación, en donde hacemos un uso intensivo de esta interface con sus respectivas animaciones y flujo de uso.

Utilizar esta herramienta para ventanas modales es muy simple.

Como crear una ventana popup en Android

Abrir una nueva ventana:

MaryPopup marypopup = MaryPopup.with(context)
                        .cancellable(true)
                        .blackOverlayColor(Color.parseColor("#DD444444"))
                        .backgroundColor(Color.parseColor("#EFF4F5"))
                        .content(R.layout.popup_content)
                        .from(clickedView)
                        .show();

Centrar la ventana:

MaryPopup marypopup = MaryPopup.with(context)
                        ...
                        .center(true)
                        ...
                        .show();

Crear un popup que se pueda arrastrar:

MaryPopup.with(context)
      ...
      .draggable(true)
      ...
      .show();

Como recomienda el autor del proyecto, no olviden sobreescribir el boton de volver atrás:

@Override
public void onBackPressed() {
if(!marypopup.close(true)){
super.onBackPressed();
}
}

Instalar el proyecto no requiere más que unos pocos segundos, basta con insertar en nuestro gradle las siguientes líneas:

repositories {
  maven { url "http://dl.bintray.com/meetic-android/maven" }
}

compile 'com.meetic.marypopup:marypopup:(last version)'
compile 'com.meetic.dragueur:dragueur:1.0.0'

Patrones de color dorado en alta resolución

Tamara

Navegando en uno de los blogs que más recursos originales ofrecen en nuestro medio, Best Design Options, me encuentro con unos paquetes patrones de color dorado en alta resolución que combinan colores brillantes, texturas sumamente variadas.

Si hay recursos gráficos que sin importar la cantidad que tenemos parecen nunca ser suficientes, creo que las texturas son uno de ellos. Cada vez que nos topamos con estos fantásticos elementos que no solo son útiles per se en nuestros proyectos sino que en algunos casos hasta disparan nuevas ideas desde la combinación de patrones y los colores.

Patrones de color dorado en alta resolución

Los paquetes que quiero mostrarles hoy, combinan color verde menta y magenta de base con patrones dorados. Ambos tonos son bien diferentes en cuestiones de luminosidad por lo que los patrones se captan muy distinto en uno y otro contraste.

Está claro que estas imágenes pueden resultar útiles para el universo online, pero también pueden ser utilizadas en innumerables proyectos gráficos desde aplicación en papelería hasta en diseño textil.

La primer opción, incluye diferentes patrones en combinación de dorado y magenta. Posee un acabado rústico que realza la textura y agrega un elemento grunge a cada uno de los papeles.

Patrones de color dorado en alta resolución

Descargar Digital Scrapbook Papers in Vintage Pink and Gold Patterns | Best Design Options

En el segundo caso, la textura se aplica sólo sobre el dorado y está mucho más marcada que en el caso anterior. El tono verde menta en la combinación es muy atractivo pero quizás sea conveniente achicar los tamaños para que no gane la pesada textura contra la ausencia de peso del color de fondo.

Patrones de color dorado en alta resolución

Descargar Free Mint Green and Gold Background Patterns | Best Design Options

Al tratarse de imágenes, pueden utilizarse como fondo de cualquier entorno, y también realizar superposiciones de colores y efectos de capa que pueden ofrecer nuevos niveles creativos.

Cómo detectar el uso de AdBlock

Pablo

No es ninguna novedad que la gran mayoría de los sitios web generan ingresos mediante la publicidad, sin ella muchos no existirían. Adblock puede ser una bendición para muchas personas que son constantemente bombardeadas por molesta publicidad, sin embargo puede afectar negativamente a muchos sitios que generan ingresos mediante publicidad y la emplean de forma no intrusiva.

Una mecánica que cada vez se utiliza más es la de mostrar una alerta a aquellos visitantes que emplean Adblock, explicando lo importante que resulta la publicidad para los que mantenemos sitios web de acceso gratuito, en algunos casos mostrando un simple mensaje, en otros directamente impidiendo que se continue navegando por el sitio sin antes pausar Adblock, cosa que a mi tampoco me termina de convencer, pero bueno cada uno hace de sus sitios su mundo, no hace falta ni decirlo.

detectar el uso de AdBlock

Detectar Adblock no es del todo sencillo, con el tiempo este complemento fue haciendo que sea más difícil su detección, no obstante existe una biblioteca llamada BlockAdBlock, la misma permite detectar si nuestros visitantes tienen bloqueada la publicidad o no, además podemos realizar distintas acciones según decidamos, por ejemplo, mostrando un mensaje de alerta.

Cómo detectar el uso de AdBlock

1.Instalación

Tenemos a nuestra disposición tres formas distintas: manualmente, descargando el archivo js y agregando la ruta en nuestro sitio web, o utilizando Bower o NPM.

Instalación empleando Bower:

bower install blockadblock

Instalación empleando NPM:

npm install blockadblock

2. Código de ejemplo:

// Comprobamos si no esta activo Adblock
function adBlockNotDetected() {
    alert('AdBlock is not enabled');
}
// Comprobamos si esta activo Adblock
function adBlockDetected() {
    alert('AdBlock is enabled');
}

// Este condicional prevé que Adblock decide anular
// la biblioteca de detección
if(typeof blockAdBlock === 'undefined') {
    adBlockDetected();
} else {
    blockAdBlock.onDetected(adBlockDetected);
    blockAdBlock.onNotDetected(adBlockNotDetected);
    // and|or
    blockAdBlock.on(true, adBlockDetected);
    blockAdBlock.on(false, adBlockNotDetected);
    // and|or
    blockAdBlock.on(true, adBlockDetected).onNotDetected(adBlockNotDetected);
}

// Opciones disponibles de configuración
blockAdBlock.setOption('checkOnLoad', false);
// configuración alternativa
blockAdBlock.setOption({
    debug: true,
    checkOnLoad: false,
    resetOnEnd: false
});

Este proyecto cuenta con varias opciones de configuración permitiendo que su funcionamiento pueda ser adaptado perfectamente a prácticamente cualquier escenario posible.

En el apartado de Github pueden encontrar más información, incluso pueden encontrar el proyecto original (que tiene un nombre poco conveniente :P)

Web: BlockAdBlock

Comentarios 1

Plantillas adaptables para E-mails con MJML

Tamara

Cuando necesitamos que elaborar plantillas adaptables para E-mails, nos encontramos ante una cantidad enorme de problemas de compatibilidad o visualización. Primero, porque hay una gran diversidad de programas en los que cada uno lee sus correos, en segundo lugar porque no todos son compatibles con algunas prácticas usuales dejando de lado información que necesitamos transmitir.

Cada vez son más los clientes que utilizan el newsletter como medio de comunicación y es por ello que tenemos que estar al tanto de cuáles herramientas nos pueden resultar útiles y ahorrarnos grandes dolores de cabeza, además de una buena cantidad de tiempo.

Plantillas adaptables para E-mails con MJML

Plantillas adaptables para E-mails

MJML es un sistema de base Open Source que ofrece la posibilidad de implementar plantillas adaptables, algo de suma importancia si consideramos que la mayoría de los usuarios chequean sus correos desde el teléfono móvil, a través de un framework que contiene componentes extensibles y reutilizables.

Esta información puede descargarse de forma gratuita, o bien, utilizarse directamente desde el sitio web, en el que encontrarán una plataforma interactiva de edición. También cuentan con algunas plantillas prediseñadas para iniciarse en su utilización y verán que editarlas resulta muy fácil, aunque considero que podría haber más opciones.

Plantillas adaptables para E-mails con MJML

Verán que los ejemplos disponibles pueden ser muy básicos, pero a grandes rasgos contienen todos los elementos que podrían llegar a necesitar mostrar en un newsletter. Claro que el resto está a criterio del desarrollador y, obviamente, de las necesidades de lo que se quiere transmitir. Son un buen punto de partida para desplegar toda la información requerida, asegurando una correcta visualización y óptima compatibilidad con cualquier dispositivo de acceso.

Y para quienes no son muy intuitivos con los frameworks, podrán acceder a un tutorial paso a paso que les mostrará cómo proceder en cada caso y sacar el mejor provecho.

Sitio: MJML

Cómo agregar los botones de redes sociales a tu sitio web

Pablo

Parece una tarea sencilla pero no lo es, agregar los botones de redes sociales a un sitio web puede transformarse en un trabajo frustrante si lo que buscas es personalizar el estilo visual.

En mi caso casi siempre utilice los plugins y widgets oficiales, esto es claramente lo más sencillo, pero también lo menos eficiente, al menos desde el punto de vista del rendimiento, muchos widgets tardan en cargar y aumentan los tiempos de carga de nuestro sitio web, sobretodo los que se cargan de forma asincrónica. También desde el punto de vista de lo estético las distintas redes sociales todavía no logran unificar un criterio de diseño, por lo tanto todos los botones juntos quedan bastante dispares entre sí.

Como agregar los botones de redes sociales

Para solucionar estos problemas, tanto de rendimiento como de estética, existe Sharer.js, una pequeña pero no por eso menos útil biblioteca JavaScript para que podamos agregar a nuestra web los distintos botones de compartir en las redes sociales de forma simple y rápida.

Cómo agregar los botones de redes sociales a tu sitio web

1. Instalación

Para incorporar esta biblioteca a nuestro sitio podemos emplear NPM, Meteor o Bower, o simplemente instalar Sharer.js desde su CDN:

<script src="https://cdn.jsdelivr.net/sharer.js/latest/sharer.min.js"></script>

2. Colocar los botones

Sharer.js cuenta con la capacidad de emplear más de 20 redes sociales distintas, entre las que destacamos las más populares y que probablemente interesan a la hora de compartir los artículos de nuestro sitio web.

  • Twitter
  • Facebook
  • Linkedin
  • Google Plus
  • Email
  • Whatsapp
  • Telegram
  • Pinterest
  • Tumblr
  • +20 opciones disponibles

Cada opción cuenta con distintas posibilidades de configuración, por ejemplo:

Facebook:

<button class="sharer button" data-sharer="facebook" data-url="http://www.kabytes.com">Share on Facebook</button>

El atributo data-url contiene la URL a compartir.

Email:

<button class="sharer button" data-sharer="email" data-title="Awesome Url" data-url="http://kabytes.com/" data-subject="Hey! Check out that URL" data-to="some@email.com">Share via Email</button>
  • data-title: título.
  • data-url: URL a compartir.
  • data-to: destinatario.
  • data-subject: asunto.

Como se puede observar emplear Sharer.js es muy sencillo, como siempre les recomiendo visitar el sitio oficial del proyector para conocer al máximo las opciones disponibles.

Web: Sharer.js

Tarjetas de San Valentín para imprimir

Tamara

Llega otro Febrero y con él todos los planes y salidas para quienes gustan de hacer algo especial, es por ello que pienso que estas tarjetas de San Valentín para imprimir les vendrán de maravilla si tienen que hacer un regalo o simplemente salir del apuro.

Claro está que hay muchos que deciden no festejar este día, pero por otro lado a quienes trabajamos en el mundo gráfico estas fechas nos chocan de frente ya que no nos queda otra opción que hacer lo que se nos pide.

Personalmente me encanta que la gente festeje, el día de San Valentín no es solo un día para los enamorados, es también para hacer un tributo al cariño de la familia y amigos. Por lo que estas tarjetas, pueden ampliar su espectro y llegar a más gente de su círculo social, con muy poco dinero.

Tarjetas de San Valentín para imprimir

Este material que quiero compartir con ustedes, está conformado por dos paquetes de tarjetas que están disponibles en formato .pdf. Este tipo de archivos, si bien no permite edición, posee calidad de impresión, hay algunos que permiten importarse con Illustrator, pero no es el caso.

Las tarjetas tienen un tamaño standard y están dispuestas para imprimir directamente en una hoja de 8,5″ x 11″ (A4 como la conocemos en nuestro país). Pueden seleccionar un papel especial blanco para que el resultado sea mejor al recortarlas y no les recomiendo utilizar colores ya que la superposición puede hacerle perder los tonos originales.

El primer paquete incluye opciones clásicas con estilo vintage y elementos que hacen alusión directa al romance tales como los tonos rojos, flores y corazones. También, además de las tarjetas, se muestran una serie de etiquetas con los mismos motivos.

Tarjetas de San Valentín para imprimir

Descargar Free simple Valentine Cards | BestDesignOptions

La segunda opción, es menos clásica desde el punto de vista del color ya que utiliza tonos oscuros y fuertes, aunque con una definición muy interesante en su paleta. La base de impresión es la misma que en el paquete anterior, aunque sus elementos son bien diferentes.

Tarjetas de San Valentín para imprimir

Descargar Free Retro Printable Valentine Cards | BestDesignOptions

Ambas alternativas están destinadas a ahorrarles tiempo de búsqueda en un recurso específico. Pero si van a hacer un regalo y quieren agregar un toque de color personal, estas pueden ser muy buenas opciones.

Figuras geométricas vectorizadas en varios formatos

Tamara

Cuando surge una nueva moda, en ningún momento lo hace de forma automática. Este paquete de figuras geométricas vectorizadas forma parte de una nueva estética que combina elementos vintage, con componentes geométricos extremos y texturas orgánicas.

En la era del retorno de la acuarela, las estrellas y las imágenes superpuestas, las figuras geométricas son una gran herramienta que otorga delicadeza, fluidez y equilibrio como su base fundamental. Son excelentes para combinar con texturas, y particularmente en este caso, sacando el mejor provecho a los propios patrones visuales que las mismas formas generan.

Figuras geométricas vectorizadas en varios formatos

Para utilizar en positivo o negativo, como máscaras o elementos destacados dentro de un entorno. Mismo, para aquellos que quieran animarlas, este paquete incluye su versión vectorizada que les permitirá exportarlas en formato .svg para animarlas en sitios web o plataformas internas.

Figuras geométricas vectorizadas

Se incluyen 15 figuras geométricas que conjugan diferentes bases para formar un elemento final que los contiene, esto combinado con otros componentes tales como texturas, imágenes y tipografías, los hace ideales para implementar en posters y folletos para imprimir, utilizar como isotipo si están creando una identidad corporativa, allí será siempre recomendable modificarlas para que si bien la base estética y conceptual sea la que desean, el resultado sea más original que un recurso preestablecido.

Figuras geometricas vectorizadas

Descargar Fluid Geometric Shapes | Pixel Buddha

Están incluídas en varios formatos que les harán más simple el trabajo de editarlas y combinarlas con otros componentes, encontrarán archivos .PSD, .AI, .EPS, y hasta las imágenes .PNG para ser utilizadas directamente con pocos cambios simples dentro de una edición más acotada.

La totalidad de este recurso es gratuita y están disponibles para descargar directamente sin ningún límite. Verán que en la aplicación y la experimentación con otras herramientas surgirán cosas muy interesantes que, por supuesto, no tienen límite en el alcance. Todo depende de la creatividad con la que se aplique.