Airmore Reflector

Airmore: mucho más que la gestión de tu móvil desde el PC

Hoy os invito a conocer a una herramienta que nos puede ayudar bastante en la realización de demos a clientes y que nos va a permitir ver lo que sucede en nuestro móvil desde la pantalla del ordenador en tiempo real.  De esta manera, será como manejar un smartphone pero desde una pantalla más grande, ya que todas las acciones que realicemos en nuestro ordenador se trasladarán a nuestro dispositivo.

Se trata de Airmore (http://airmore.com/es/), cuya su función principal es la gestión y organización de todos los archivos, contactos y aplicaciones de un terminal móvil pero desde la comodidad de nuestro ordenador y lo más importante, sin necesidad de cables.

En primer lugar vamos a ver cómo instalamos la aplicación.

  1. Descargar AirMore desde AppStore o Google Play en nuestro dispositivo móvil.Descarga desde Google Play
  2. Iniciamos Airmore versión Web desde el ordenador.Airmore desde la web
  3. Con nuestro móvil, escaneamos el código QR que se nos muestra en la web.Código QR
  4. Pulsamos “Aceptar” para comenzar la conexión.

Desde el ordenador observamos cómo se nos abre un panel de control con varias opciones: Fotos, Música, Vídeos, Apps,etc. Desde aquí podemos eliminar los ítems que queramos, transferir música desde nuestro PC al terminal y una infinidad de posibilidades para administrar nuestros contactos o llamadas.

Opciones Airmore

Aunque Airmore se puede utilizar tanto en dispositivos Android como IOS, sólo desde terminales Android y  a partir de la versión 5.0 es donde vamos a encontrar una de las funcionalidades más potentes de esta herramienta, la opción “Reflector” o función espejo, que es la que hemos comentado anteriormente y que nos mostrará lo que está ocurriendo en nuestro dispositivo.

Sólo tenemos que hacer clic en el icono “Reflector” desde la página web y comenzaremos a obtener una vista duplicada de nuestro terminal móvil en tiempo real.

 

Opción reflector

¿Cómo podemos sacar partido a esta opción?

  • Posibilidad de mostrar en un ordenador vistas de una aplicación piloto y cómo se vería en el dispositivo móvil.
  • Realizar pantallazos de manera ágil en una demo y guardarlos tanto en el Pc como en el móvil. Airmore_reflector
  • Ver el teléfono en modo de pantalla completa con el icono central en la vista del reflector. La curiosidad es que teniendo activa esta opción podríamos verificar temas de responsive como el comportamiento landscape y portratit de nuestro dispositivo ya que si giramos el terminal, la pantalla web hará lo mismo automáticamente.
  • Abrir tantas pestañas en nuestro navegador como vistas de la aplicación queramos obtener.

Por lo tanto, no sólo parece que Airmore nos puede ayudar a gestionar los archivos de nuestros dispositivos móviles, si no que además puede convertirse en una herramienta bastante útil que nos aporte comodidad y rapidez en las presentaciones.

Imágenes responsive: Picturefill.

Buenos días,
Para estrenarme con las aportaciones al blog voy a hablaros del polyfill Picturefill. Un polyfill es un javascript que permite implementar una funcionalidad que no es soportada en navegadores antiguos. De esta manera podremos utilizar la etiqueta <picture>  con seguridad de cumplir con nuestros navegadores. Picturefill permite servir al usuario la imagen adecuada según una variedad de condiciones tales como tamaño de pantalla, tamaño de la ventana, resolución, etc. Ahorramos un montón de transmisión de datos dándole al usuario móvil una imagen de resolución y tamaño adecuado sin sacrificar a los usuarios de sobremesa o de retina, y todo usando el mismo código.

pandas

Es por eso que necesitaremos generar tantas imágenes como breakpoints tengamos.

En el momento de escribir esta entrada la última versión estable es la v 3.0.2 y podemos encontrarla en: “@RECURSOS\JQUERY\Picturefill o en la web del proyecto: http://scottjehl.github.io/picturefill/ para comprobar cuál es la versión mas actualizada.

 

Generación de imágenes

Si tomamos como referencia los breakpoints necesarios para bootstrap tenemos que generar imágenes para las horquillas de dimensiones:

0 > 480px > 768px  > 992px  > 1200px  > ∞

Es decir, tendremos la misma imagen en 5 dimensiones diferentes.

¿Qué tamaño tiene que tener cada imagen?

Para generar las imágenes utilizaremos de referencia la más grande por cada breakpoint; Por ejemplo, si tenemos una imagen que va al 100% tendríamos las siguientes dimensiones:

pandabp

Además, tendremos que generar las imágenes para dispositivos fullHd o retina; La densidad de píxeles de estas pantallas es el doble de las habituales, por lo que también tendremos que generar las imágenes al doble de tamaño a lo que corresponde en cada breakpoint para servir a estos dispositivos. Siguiendo el anterior ejemplo:

pandabpx2

En total habremos generado 10 imágenes, dos por cada horquilla de breakpoint.

Implementación

Ejemplo funcional: @RECURSOS\JQUERY\Picturefill\examples\demo-pandas.html

Lo primero que debemos hacer es incluir el js en el <head>

<head>
    <script src="picturefill.js"></script>
</head>

Con esto sería suficiente, sin embargo, añadiendo un método javascript nos aseguramos que los navegadores antiguos detecten la etiqueta picture antes por si a nuestro js no le ha dado tiempo a cargarse:


<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.js"></script>
</head>

Ya tenemos la página lista para detectar nuestras etiquetas;

Explicando el MarkUp

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="image/img3000.jpg, image/img6000.jpg 2x" media="(min-width: 1200px)">
    <source srcset="image/img1200.jpg, image/img2400.jpg 2x" media="(min-width: 992px)">
    <source srcset="image/img992.jpg, image/img1984.jpg 2x" media="(min-width: 768px)">
    <source srcset="image/img768.jpg, image/img1536.jpg 2x" media="(min-width: 480px)">
  <!--[if IE 9]></video><![endif]--> 
  <img srcset="image/img480.jpg, image/img960.jpg 2x" alt="..."> 
</picture>

Tenemos un contenedor con la etiqueta <picture> que contiene una etiqueta <img> y una serie de etiquetas <source>. Además, para que funcione en IE9 necesitamos utilizar una etiqueta <video> para engañar al contenedor de los <picture>.

En <source> cargaremos cada una de las imágenes según su horquilla, que indicaremos con el media query. En el siguiente ejemplo, estamos cargando la imagen que aparece cuando tenemos como mínimo un ancho de 769px, es decir, que la imagen que carguemos será visible a partir de 769px y hasta 992px, que es el siguiente corte. Por lo que pondremos la imagen mas grande que admite esa horquilla, es decir la de 992px de ancho:

<source srcset="image/img992.jpg" media="(min-width: 769px)">

Si además queremos cargar una imagen para retina en ese breakpoint, añadiremos un nuevo source indicando que es para retina (2x) tal que así:

<source srcset="image/img992.jpg, ..image/img1984.jpg 2x" media="(min-width: 769px)">

En <img> cargaremos la imagen por defecto,  la más pequeña (si estamos montándolo usando el media query min-width) y añadiremos el alt=””.

<img srcset="image/img480.jpg" alt="Imagen de muestra">

Hay que tener en cuenta que el primer source que cumpla las condiciones dadas por el usuario será el que se descargue, por lo que primero pondremos las imágenes mas grandes cuando utilicemos el condicional min-width y las imágenes mas pequeñas primero cuando utilicemos  max-width.

Si queremos que una imagen no aparezca

Por diseño en uno de los breakpoints no queremos cargar ninguna imagen; Con un simple display:none podemos no verla, pero no evitar que se descargue. Así que podemos pedir una imagen de 1x1px y minimizamos la carga (aunque no evitamos la petición).

<source srcset="image/1x1.jpg" media="(min-width: 480px)">

En resumen; Es una herramienta muy sencilla para que el usuario reciba imágenes con su tamaño optimizado. Mejoramos velocidad de carga, uso de datos y visualización. 

 

Menú Responsive Accesible

Aunque existen muchas ofertas de menús responsive, os quería compartir este que me ha parecido muy completo, fácil de implementar y que, además, cumple con las pautas de accesibilidad AA, tanto para desktop como para móvil.

El recurso original lo podéis encontrar en http://www.smartmenus.org/ pero en la carpeta de recursos de Babel Creativa podéis encontrar una adaptación simplificada muy fácil de integrar.

Podéis acceder a él en esta ruta:  @RECURSOS\MENUS\Menú responsive accesible

Las características que cumple son:

  • Menú basado en listados anidados.
  • Toggle en el botón del menú en versión responsive.
  • Adaptativo, manteniendo el cumplimiento de las pautas de accesibilidad:
    • WAI-ARIA y roles dinámicos.
    • Foco visible.
    • Se proporciona acceso a toda la funcionalidad mediante el teclado en desktop y móvil.

Pasos para implementar en el HTML:

  • Enlace a menu.css 
  • Incluir las siguientes clases / id en el <ul> principal:
    <ul id=”main-menu” class=”sm menu collapsed” role=”menubar”>
  • Enlaces a los ficheros js<!–Código JS–>
    <script src=”../js/jquery-1.11.3.js” type=”text/javascript”></script>
    <!– SmartMenus jQuery plugin –>
    <script src=”../js/jquery.smartmenus.js” type=”text/javascript”></script>
    <script>
    $(function() {
      $(‘#main-menu’).smartmenus();
    });
    </script>

¡Espero que os sea útil!

Hamburger Menu. ¿De verdad es la mejor solución?

4cace66e9cf326e23b428770233e5918

En numerosas ocasiones nos encontramos con el debate sobre la efectividad y universalidad del menú hamburguesa. Este debate se amplía aún más cuando empezamos a verlo en resoluciones desktop, donde el espacio ya no es tan limitado y el recurso a este tipo de menú suele darse por un tema más estético que operativo.

Os dejo dos interesantes enlaces sobre este tema:

Disfruten de sus hamburguesas 😉

 

Tutorial – Tipografía de iconos

En este tutorial me gustaría explicar un poco por encima cómo crear una tipografía con iconos para usar en nuestros proyectos web.

En este caso te enseñaré a añadir nuevos iconos a la tipografía Glyphicons que incluye Bootstrap, también nos vale para FontAwesome o para hacer una propia desde 0 :).

Qué necesitamos

– Un programa de diseño de tipografías, existen muchos (FontLab, Glyphs…), pero BirdFont es gratis, y aunque no es muy intuitivo, nos puede servir.

– Conversor de tipos como FontSquirrel, necesitaremos convertir el archivo resultante .ttf en formatos de fuente web: .eot, .woff y .svg.

– Los iconos que quieras meter en la tipografía en formato SVG: sin agrupar, sin trazados compuestos, todas las formas expandidas y fusionadas.

– Mucha paciencia! No desesperes, BirdFont tiene una interfaz un poco rara y poco intuitiva, así que intentaré simplificar y guiar al máximo los pasos.

Continue reading

Cinemagraph – Fotografiando el movimiento

Las imágenes son potentes recursos gráficos que nos permiten marcar la distinción en nuestros diseños. Pero a veces no es suficiente. Un vídeo también ayuda pero pueden llegar a pesar mucho y ralentizar la carga.

¿Qué podemos hacer entonces? Pues un híbrido. Un vídeo que se al mismo tiempo sea una foto. Esta técnica se llama: Cinemagraph.

¿En qué consiste Cinemagraph?

Usaremos un vídeo, del que sacaremos una imagen fija y a la que luego dotaremos a uno de sus elementos de movimiento.
Por ejemplo, una foto de una modelo a la que solo se le mueve el pelo.

¿Qué necesitamos para hacerlo?

Básicamente: un vídeo. Pero no sirve cualquiera. Dependerá de qué es lo que queramos que conserve el movimiento.

Bueno, os explico el proceso y así entenderéis mejor las limitaciones.

Utilizando Photoshop:

– Abrimos el vídeo que hemos elegido (Abrir > Archivo)

– Se nos abre como si fuera una imagen normal. Pero si nos fijamos en la capa, vemos que aparece un icono de película.

pantallazo1

– Vamos al menú Ventana > Animación, para abrir la línea de tiempo y poner trabajar con el vídeo.

– Nos ponemos sobre el vídeo hasta que encontremos un frame que nos guste para ser nuestra imagen fija.

– Duplicamos capa y la rasterizamos.

pantallazo3

– Ahora ya podemos manejar esta capa cómo una capa de imagen normal.

– Hacemos una máscara de capa de lo que queremos que se mueva. Por ejemplo, en nuestro vídeo queremos que se vea movimiento sólo en el ojo del perro.

pantallazo4

– Y ya sólo queda guardarlo como GIF, con la opción de Animación > INFINITO (quitar la opción: SOLO UNA VEZ). Y ya tenemos nuestro Cinemagraph creado.
perro-ojo

Bancos / repositorios de imágenes gratuitos ¡y de calidad!

¿Quién no se ha encontrado alguna vez en la situación de tener un diseño espectacular utilizando imágenes de bancos de imágenes de pago como getty o istock, y cuando lo presentas al cliente, de repente te dice que no se gasta 100€ en una foto?

Aparte de la cara que se te queda, te entran los sudores fríos porque el cliente quiere un resultado similar pero sin dejarse la pasta en imágenes, y como no, aparte de decir que no estaban presupuestadas las imágenes, te tienes que  ponerte a saco con ello; entonces te viene la pregunta, ¿y dónde busco?

4-lifeofpixFoto: Chris Joel Campbell

Si tienes suerte en Flickr podrás encontrar galerías públicas que te dejen utilizar sus imágenes, pero es una labor muy ardua, si no, pues aquí te dejamos unos repositorios de imágenes y bancos gratuitos para intentar suplir estas problemáticas

¡Esperamos que os sirvan de utilidad!

WAI-Aria, cómo hacer accesibles los contenidos dinámicos (ajax, javascript…)

WAI-ARIA es una especificación del W3C, recomendación desde el 20 de marzo de 2014, pensada para hacer más accesible el contenido dinámico y los controles desarrollados con Ajax, HTML, Javascript y sus tecnologías relacionadas. Si todavía no estás al tanto de ello va siendo hora de ponerte las pilas

Para que empieces a indagar, aquí os dejamos: