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

Airmore Reflector

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.

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!

Uso de iconos como tipografía en tus desarrollos webs. ¡También accesibles!

Por qué seguimos utilizando sprites para nuestros iconos, pngs, hablando de iconos para retina…  pudiendo vincular una css que tira de una tipografía y que podemos personalizar nosotros mismos y que nos permite entre muchas otras cosas redimensionarlas, cambiarlas de color…

Es hora de cambiar el chip, aquí os dejo el link ¿Cómo convertir iconos en fuentes?,  un interesante artículo que habla de ello y como implementarlo de forma muy sencilla. Ya no tienes escusa.

Si además necesitas que sean accesible, os dejo otro link de cómo hacer iconsfonts accesibles.

 

como-covertir-tus-iconos-en-fuentes

 

También os dejo otra herramienta, fontastic, que permite hacer los mismo de una forma sencilla intuitiva y fácil.

 

fontastic_me

La ‘curiosidad’ del viernes – Tipografías audibles, imágenes libres y frameworks

Una semana más empezamos el fin de la jornada laboral con un poco de inspiración:

TYPATONE

Últimamente estamos muy musicales, ya os enseñé qué divertido podía ser jugar con unas formas y unos cuantos sonidos en YUME en la entrada del viernes anterior.

Y ahora con TypaTone puedes convertir las letras en sonidos. Es muy creativo y siempre salen sonidos armónicos, por mucho que te empeñes en hacer cosas extrañas con las letras. Os animo a que lo probéis.

TYPASOUND

CODEPLY

¿Alguna vez has sentido deseos de poder acceder a diferentes Frameworks para elegir el mejor código para tu página sin tener que ir uno a uno? Pues bien, esto es exactamente lo que puedes conseguir con Codeply. Accedes a diferentes Frameworks a través de la página, y coges la parte que más te convenga: menús, acordeones, botones…

Lo bueno, es que el editor te deja copiar HTML, CSS, JS y es muy visual. Así que es bastante intuitivo.

codeply

En un principio tus búsquedas pueden ser algo erráticas. Pero, dadle una oportunidad, es una herramienta con potencial.

LIBRE STOCK

Como ya he visto que nadie se ha animado a tener unos cuantos “freebies” de ‘Halloween’ (cuanta animosidad contra esta fiesta) he tenido que cambiar el recurso gratuito que os quería aportar por este otro: ‘Libre Stock’.

Libre Stock‘ es una herramienta para buscar imágenes de stock gratuitas por la web. Te devuelve resultados en diferentes páginas de recursos de fotografía. Ahorraréis algo de tiempo. Me parece completa, aunque no vais a encontrar todas las que queráis. Algunas búsquedas tendrán que ser un poco más exhaustivas.

freestock

 

TIPOGRAFÍA Y MÁS TIPOGRAFÍA

Este viernes os estoy dejando recursos a mansalva ¿no?.

Si la tipografía es lo tuyo, te sonará la página Type Detail. Si no recuerdas haberla oído nombrar, tampoco te preocupes, ahora sí la conoces. Si utilizas su apartado de Recursos, tendrás acceso a cientos de recursos online, blogs y foros, que discuten, respiran y viven sólo para la tipografía. Qué ¿te das un vuelta?

type

PORTADAS ANIMADAS

Y por último y con esto os dejo ya, una curiosidad desde Vimeo. Portadas de libros clásicos, ilustradas y animadas. Muy trabajadas y muy ‘resultonas’ ¿cuál os gusta más?

vimeo

La ‘curiosidad’ del viernes – Infografías del pasado y otras novedades

El viernes nos ha dejado un puente muy codiciado a nuestros pies. Pero no podemos irnos a disfrutar de nuestro festivo sin un breve repaso a algunos recursos que hemos encontrado navegando por Internet.

INFOGRAFÍAS

Hoy es un gran día para la nostalgia. ¿Cómo eran las infografías antes de los ordenadores? Esta es la pregunta que ha decidido contestar ‘The wired’. Después de leer el artículo, nuestra conclusión: eran un poco más difíciles de llevar a cabo y dignas de admiración.

infografias

RECURSOS DESDE FACEBOOK

El equipo de diseñadores de Facebook ha decidido compartir con nosotros algunas páginas de recursos muy útiles: mock-ups, herramientas de diseño y prototipado y alguna sorpresa más. Os dejo el enlace para que le echéis un ojo. Pueden ser muy útiles. Si eres usuario de Mac, con más motivo. recursos-fb

CODEPEN

Y cómo no podía faltar en este pequeño espacio a la curiosidad del viernes, un gracioso efecto desde Codepen. Un cable que se enrolla, así de sencillo, sin más. Y qué espectacular.

codepen

Hasta el próximo viernes.