Crea una pantalla de presentación de tu aplicación Android con Material Intro Screen

Pablo

Crear una pantalla de presentación para Android ahora es más fácil que nunca con material-intro-screen, una biblioteca gratuita y con una muy sencilla instalación para generar presentaciones basada en slides.

Por empezar este proyecto me resulta atractivo por varias razones:

  • Ayuda a nuestros usuarios a conocer las principales características de nuestra aplicación.
  • Produce una interface muy conocida para la mayoría de los usuarios de aplicaciones móviles, fácil de entender y de interactuar.
  • Es excelente para comunicar algo de forma rápida y concisa.

Desde el punto de vista técnico también es muy eficiente. Su estructura está basada en fragmentos, soportados y contenidos en una activity completamente independiente a la principal de nuestro proyecto. Aspecto que nos permite implementar esta biblioteca a cualquier aplicación más allá de su estructura original.

Además emplea los efectos de Material Design, algo que le da un aspecto moderno y amigable a nuestra aplicación.

Ejemplo de pantalla de presentación para Android

Screenshot Presentación para Android
La instalación es sencilla, de verdad.

Instalando una bienvenida a nuestra aplicación:

1. Si empleamos Gradle basta con agregar una linea, recuerden que la versión minima y compatible de SDK de esta biblioteca es la 15. Una versión más que aceptable si vemos el gráfico de actualización de usuarios que presenta Google.

defaultConfig {
 minSdkVersion 15
}

dependencies {
 compile 'agency.tango.android:material-intro-screen:{latest_release}'
}

2. Creamos nuestra activity, una extensión de MaterialIntroActivity.

public class IntroActivity extends MaterialIntroActivity

3. Declaramos en el manifiesto nuestra actividad con su respectivo Theme. Algo que es muy destacable porque no interfiere al ser independiente del theme que empleemos en nuestro proyecto.

<activity
  android:name=".IntroActivity"
  android:theme="@style/Theme.Intro" />

4. Agregamos los slides. Cada uno con sus respectivos permisos y funcionalidades perfectamente detallados en la documentación de este magnifico proyecto.

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        addSlide(new SlideFragmentBuilder()
                .backgroundColor(R.color.colorPrimary)
                .buttonsColor(R.color.colorAccent)
                .possiblePermissions(new String[]{Manifest.permission.CALL_PHONE, Manifest.permission.READ_SMS})
                .neededPermissions(new String[]{Manifest.permission.CAMERA, Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION})
                .image(agency.tango.materialintroscreen.R.drawable.ic_next)
                .title("title 3")
                .description("Description 3")
                .build(),
                new MessageButtonBehaviour(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(IntroActivity.this, "We provide solutions to make you love your work", Toast.LENGTH_SHORT).show();
                    }
                }, "Work with love"));
}

5. Personalizamos la activity correspondiente a la intro, en este paso podemos definir si nuestra aplicación puede tener botón para saltar, si oculta todos los botones o si queremos un comportamiento en particular para el ultimo slide.

@Override
    public void onFinish() {
        super.onFinish();
        Toast.makeText(this, "Try this library in your project! :)", Toast.LENGTH_SHORT).show();
    }

Eso es todo.

Si buscamos crear una presentación al inicio de nuestra aplicación este proyecto es un candidato firme para hacerlo.

Les recomiendo leer la documentación, en resumen podrán conocer cada una de las funcionalidades disponibles.

Por último, las animaciones son del tipo Parallax, existe todo un apartado dentro de la documentación que detalla cómo configurarlas. No se lo pierdan, es una forma excelente de animar y hacer más amigable nuestra presentación para Android.

Web: Material intro screen

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.