JS – Detectar Capacidades de un Dispositivo

Publicado por Iván Gajate el 9 de abril de 2014 en JavaScript | Los comentarios están cerrados.

Estas son las detecciones que uso yo para saber si un dispositivo es un móvil, si es táctil y si tiene detección del giro. No son perfectas, pero en la mayoría de los casos me funcionan bien.

 

// Detecto si es un iPad o dispositivo con deteccion de movimiento
var isTouchable = ('ontouchstart' in window) || ('onmsgesturechange' in window);
var isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile/i.test(navigator.userAgent.toLowerCase());
var isOrientationDevice = (window.DeviceOrientationEvent != null) && (typeof(window.DeviceOrientationEvent) === 'object');

Weinre – Depurar en remoto

Publicado por Iván Gajate el 27 de febrero de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Una de las cosas mas complicadas del desarrollo para dispositivos móviles es depurar nuestras aplicaciones. En escritorio es fácil porque tenemos muchas herramientas para ver el código y ver qué está pasando por detrás, pero en móvil solía ser muy complicado.

Una forma fantástica de hacerlo es con Weinre. Funciona sobre NodeJS y nos permite ver en nuestro ordenador, con un inspector igualito que el de Chrome lo que estamos visualizando en nuestro móvil.
Para usarlo tenemos que hacer 3 cosas:

  1. Instalar Weinre y ponerlo a funcionar.
  2. Incluir un archivo js en nuestra página.
  3. Abrir el panel de Weinre para inspeccionar nuestro dispositivo móvil.

 

Para instalarlo, una vez instalado NodeJS, solo tenemos que escribir esto en el terminal:

sudo npm -g install weinre

y se instalará sin más:

A continuación, para arrancarlo simplemente escribimos esto en el terminal, indicándole nuestra ip y el puerto por el que queremos acceder:

weinre --httpPort 8080 --boundHost 192.168.1.39

 

Esto hará que podamos acceder a él a través de http://192.168.1.39:8080, aunque si queremos podemos especificar la ip y otro puerto:

 

A continuación tenemos que incluir este archivo js en nuestro HTML (hay que acordarse luego de quitarlo, cuando terminemos nuestro proyecto)

<script type="text/javascript" src="http://192.168.1.39:8080/target/target-script-min.js"></script>

Ahora tendremos que abrir esta página desde nuestro móvil a través de nuestro localhost, con Mamp o el que utilicemos.

http://192.168.1.39/miproyecto/mipagina.html

 

Ya tenemos todo listo. Ahora para acceder al inspector entramos por ese puerto en un navegador

http://192.168.1.39:8080/

y veremos la página de acceso:

 

Si todo ha ido bien, veremos al menos un enlace en verde. Para depurar nuestro dispositivo hacemos click en el primer enlace. Ojo que hay que tener el móvil con el navegador activo y la página que queremos depurar visible.

La pestaña Elements me parece la mas interesante, pues nos permite ver y modificar el html y las css de nuestra página viendo el resultado directamente en nuestro móvil 🙂
Y la Consola, por supuesto, donde podemos hacer de todo!

 

NodeJS

Publicado por Iván Gajate el 26 de febrero de 2014 en Desarrollo Web, JavaScript | 1 comentario »

NodeJS nos sirve para programar en JavaScript del lado del servidor. Es muy fácil de instalar y nos permitirá trabajar con muchos de los proyectos actuales mas interesantes, como por ejemplo Sockets, Less o RequireJS.

Para instalarlo simplemente vamos a la página de NodeJS y descargamos y ejecutamos el instaldor.

Ya podemos ejecutar archivos de javascript. Para ejecutar nuestros programas, abrimos el terminal (Macintosh HD/Applications/Utilities/Terminal.app) y llamamos a Node pasándole la ruta de nuestro js. Podemos arrastrar el archivo directamente sobre el terminal para que nos escriba la ruta del archivo. Utilizamos la palabra sudo para ejecutarlo como super usuario y evitar problemas de permisos. Nos pedirá nuestra contraseña de usuario, y aunque no se vea mientras la escribimos, pulsamos Enter y la reconocerá.

sudo node /Users/ivan/node/nums.js

Ya podemos escribir nuestro programa y veremos los logs en la ventana del terminal. Un ejemplo simple y veremos “7” en el terminal:

// nums.js
var num1 = 5;
var num2 = 2;

console.log(num1 + num2);

Si queremos instalar algún paquete como socket.io por ejemplo para trabajar con sockets, podremos instalarlos con el package manager (npm):

sudo npm install socket.io

Veremos el progreso de descarga y lo instalará automáticamente.
En esa misma página encontraremos un ejemplo sencillo de cómo crear un servidor de sockets y hacer un chat con unas pocas líneas 🙂

Cada vez que hagamos un cambio en el servidor tendremos que cerrarlo y volver a arrancarlo. Para cerrar nuestro servidor teclear Ctrl+C dos veces.

Descargar ejemplo de chat.

Aumentar decimales en el Inspector de Chrome

Publicado por Iván Gajate el 22 de febrero de 2014 en css, Desarrollo Web | 1 comentario »

Una de las cosas que mas hago es modificar las css desde el inspector de Chrome. Con las flechas del teclado se puede aumentar o disminuir el valor de uno en uno, pero cuando trabajas con ems, hay que usar decimales.
Pulsando la tecla Alt se aumenta de 0.1 en0.1. Gracias Javi!!
PD: También se puede aumentar de 10 en 10 pulsando mayúsculas.

JS – Explosión de Letras

Publicado por Iván Gajate el 5 de febrero de 2014 en Desarrollo Web, JavaScript | 2 comentarios »

Hoy me ha dado por experimentar un poco con el TweenMax, y me ha salido este efecto interesante sobre las letras de un párrafo.
Lo que hago es separar cada letra y envolverla en un span. Luego con jQuery los selecciono todos y hago un bucle animando alguna de sus propiedades.

CSS – Como Arreglar las Fuentes no Suavizadas en Chrome

Publicado por Iván Gajate el 29 de enero de 2014 en css, Desarrollo Web | Los comentarios están cerrados.

Esto soluciona el problema con las fuentes en Google Chrome, que a veces se ven mal, sin suavizar.

http://lee.greens.io/blog/2014/01/13/windows-chrome/

JS – Zoom Magnifier

Publicado por Iván Gajate el 16 de enero de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

He encontrado esta librería de JavaScript que tiene muy buena pinta para hacer zoom sobre una imagen. Es simple y muy modificable.

http://mark-rolich.github.io/Magnifier.js/

Resoluciones móviles

Publicado por Iván Gajate el 15 de enero de 2014 en css, Desarrollo Web, JavaScript | 2 comentarios »

A la hora de maquetar nuestro sitio responsive, necesitamos saber las dimensiones de los dispositivos que hay en el mercado, para saber donde situar los puntos de corte.

Hay infinidad de dispositivos, resoluciones y densidades de pixel, y puede parecer un infierno a primera vista 🙁

Lo primero que tenemos que hacer es colocar esta etiqueta en nuestro html:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Con ella le indicamos a nuestro html que tome como anchura de la pantalla la anchura de nuestro dispositivo.

Cada dispositivo tiene unas dimensiones, pero también tiene una densidad de pixeles, sin embargo a la hora de maquetar debemos tratarlos como si de densidad simple se tratase.

Por ejemplo un iPad 1 tiene como dimensiones de pantalla 1024 x 768 (132 ppp),.
Un iPad 3 retina, tiene el doble de densidad de pixels (264 ppp) y tiene unas dimensiones de pantalla de 2048 x 1536.
Sin embargo, ambos se tratan de igual manera en nuestras media queries, tomando ambos como 1024 x 768

Tengo una página para obtener fácilmente las dimensiones de pantalla:

http://yporqueno.es/lab/mobile/

Voy actualizando los valores en una tabla, para tener una referencia de los modelos que hay en el mercado.
 

 

CSS – Mis Media Queries

Publicado por Iván Gajate el 15 de enero de 2014 en css, Desarrollo Web | Los comentarios están cerrados.

Estas son MIS media queries para hacer un site responsive y distinguir entre la versión por defecto de escritorio, la versión de tablet y la versión de móvil.

Ver ejemplo (redimensionar la ventana y probarlo en diferentes dispositivos)

<style>
 
	/* Desktop */
	/*---------------------------------------------------------------------------*/
	body:after {
		content: 'Desktop';
		font-size: 28px;
	}
 
 
 
	/* Tablet */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 1023px),
	only screen and (max-device-width : 1100px) {
 
		body:after {
			content: 'Tablet';
		}
 
	}
 
 
 
	/* Tablet Landscape */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 1023px),
	only screen and (max-device-width : 1100px) and (orientation: landscape) {
 
		body:after {
			content: 'Tablet Landscape';
		}
 
	}
 
	/* Tablet Portrait */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 800px) and (orientation: portrait) {
 
		body:after {
			content: 'Tablet Portrait';
		}
 
	}
 
 
 
 
 
	/* Mobile */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 600px) {
 
		body:after {
			content: 'Mobile';
		}
 
	}
 
	/* Mobile Landscape */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 600px),
	only screen and (max-device-width : 600px) and (orientation: landscape) {
 
		body:after {
			content: 'Mobile Landscape';
		}
 
	}
 
 
	/* Mobile Portrait */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 400px),
	only screen and (max-device-width : 400px) and (orientation: portrait) {
 
		body:after {
			content: 'Mobile Portrait';
		}
 
	}
 
 
</style>
En el ejemplo voy cambiando el contenido de la etiqueta after para que vaya indicando en qué dispositivo se encuentra pero solo es con fines didácticos.
  • Desktop: La idea es que todo lo que esté por encima de los media queries sea la versión de escritorio.
  • Tablet: por debajo de 1024 muestra la versión de tablet en un ordenador de sobremesa. Así mismo, si es una tablet también entraría en esta query.
    max-device-width en iPad es 768 siempre, independientemente de si está en vertical u horizontal, sin embargo Android si que diferencia la anchura si está en horizontal o vertical. Un Nexus 7 por ejemplo da unas medidas de 966×603. Para unificar estos comportamientos, compruebo también la orientación. Y le doy un poco de margen para tabletas algo mas grandes, hasta 1100px.
    La versión vertical la he puesto a 800px, un poco mas delos 768px del iPad.
  • Móvil: Tomo como medida máxima en horizontal 600px y en vertical 400px.

He querido distinguir entre tablet y tablet horizontal y vertical porque la mayoría de las veces no necesitaremos especificar tanto, pero por si acaso necesitamos concretar mas pues ahí las tenemos.

A veces utilizo max-width en lugar de max-device-with porque este último no se comprueba si la ventana del navegador se redimensiona así como al girar el dispositivo, y en determinadas ocasiones no informa bien del cambio de orientación.

No se debe maquetar para dispositivos concretos, sino para que se adapte a diferentes resoluciones. A veces maquetamos o programamos especificamente para iPad o iPhone. ¿y si mañana aparece un dispositivo nuevo con unas dimensiones ligeramente diferentes?
Estas medidas que he puesto son para tener una referencia de cuando pasamos de un tamaño a otro, pero dentro de estas referencias los diseños deberían fluir.

CSS – Quitar Scroll en InfoWindow de Google Maps

Publicado por Iván Gajate el 9 de enero de 2014 en css, Desarrollo Web | Los comentarios están cerrados.

Si insertamos un mapa de Google Maps en nuestro html, al darle a una burbuja de localización, la ventana aparece con un scroll muy poco estético. Para quitarlo podemos usar estas css.

http://www.canbike.ca/information-technology/2013/11/01/firefox-infowindow-scrollbar-fix-google-maps-api-v3.html

Básicamente es meter el contenido en un div con estos estilos:

 

.infowindow-wrapper {
	line-height: 1.35;
	overflow: hidden;
	white-space: nowrap;
}