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.

Plantillas de indumentaria para mockups

Tamara

Quiero comentarles sobre un excelente trabajo que realizaron nuestros amigos de Designshock en sus sitio, un conjunto de plantillas de indumentaria para mockups elaboradas en formatos perfectos para editar. Quienes busquen promocionar su marca o bien, sus diseños colocados sobre diferentes tipos de ropa, encontrarán en este paquete posibilidades que se salen de lo común y llaman la atención de una forma muy interesante.

El paquete ofrece dos opciones para acceder a él, según las características de lo que ustedes necesitan, tienen una licencia comercial de U$19 por la que pueden acceder a todo el contenido del paquete o bien, pueden descargar la licencia personal de forma gratuita. El contenido corresponde aproximadamente al 20% del total del paquete y si lo descargan verán que el material es excelente.

Plantillas de indumentaria para mockups

Camisetas sin y con cuello (redondo y en V), hoodies, camisas de mangas largas y algunas combinaciones de posturas y posiciones, les ofrecerán el marco perfecto para mostrar ideas y cómo se verán las marcas que se encuentran proyectando.

Encontrarán archivos en formatos .PSD para Photoshop y un .AI para Illustrator, todos escalables a cualquier resolución y sin inconvenientes de pixelados en los casos que necesiten imprimir.

Plantillas de indumentaria para mockups

Descargar T-Shirt Template | DesignShock

También verán que tienen alternativas de indumentaria femenina y masculina para identificar mejor sus productos y su marca.

Ya sea que se decidan a descargar la opción gratuita o comprar el paquete para uso comercial, sepan que también pueden acceder a todos los bundles que se ofrecen entre varias alternativas que pueden seleccionar, encontrarán una increíble cantidad de recursos de todo tipo y estilo, siempre con una opción gratuita a la que pueden acceder.

Los dejo con el material que puede sumarse a sus opciones de branding, destacando sus diseños de forma que cualquiera pueda entender el concepto de marca que desarrollan y cómo podría utilizarse para un mejor posicionamiento.

Material Design en iOS

Pablo

Al momento de desarrollar una aplicación móvil es importante que la experiencia del usuario sea similar independientemente de la plataforma que el usuario utilice.

Material Design es, probablemente, una de las mejores innovaciones de Google para Android, a la mayoría de los usuarios les gusta y sobretodo entienden perfectamente como funciona esta nueva forma de interactuar.

Emular Material Design en iOS no es tarea sencilla, son muchos controles, efectos, transiciones, animaciones y detalles a tener en cuenta, en pocas palabras un trabajo muy completo, por suerte existe una buena solución llamada Material, una colección de elementos desarrollados como un framework para iOS para emplear Material Design en nuestras aplicaciones para iOS.

material Design en iOS

Los requerimientos básicos son:

  • iOS 8.0 o superior.
  • xCode 7.2 o superior.

Material se instala de forma sencilla, utiliza CocoaPods y Carthage.

Por ejemplo si queremos instalar este framework empleando Carthage:

$ brew update
$ brew install carthage

Y luego en el archivo Carthage:

github "CosmicMind/Material"

Recursos disponibles de Material Design en iOS

Obviamente no están disponibles todos los controles, si embargo la lista no es despreciable, todo lo contrario. Actualmente hay soporte para:

  • MaterialColor
  • SideNavigationViewController
  • NavigationBarView
  • TextField
  • TextView
  • MaterialLayer
  • MaterialView
  • MaterialPulseView
  • FlatButton
  • RaisedButton
  • FabButton
  • CardView
  • ImageCardView
  • CaptureView

El autor de este fantástico proyecto también deja una lista de los controles que serán liberados en las próximas versiones del proyecto:

  • SearchBarView
  • SearchBarViewController
  • TabView
  • TabViewController
  • Scrolling Techniques
  • Dialogs
  • Snackbar
  • ProgressBar (circular y horizontal)
  • DatePicker
  • TimePicker

En el apartado de Github de este genial proyecto pueden ver varias demostraciones de uso.

textfield material design ios

Material se encuentra liberado con copyright, sin embargo el autor permite la libre utilización siempre y cuando se respeten una serie de enunciados descritos en el sitio oficial del proyecto.

Les recomiendo (como siempre) visitar la documentación oficial de este proyecto para descubrir al máximo el potencial de este framework.

Web: Material