aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Utilizar la API de Google Maps no es dificil, es más dispone de mucha información oficial y de muchísima información no oficial. Así y todo, siempre podemos hacernos la vida más fácil.

var map;
    $(document).ready(function(){
      map = new GMaps({
        div: '#map',
        lat: -12.043333,
        lng: -77.028333,
        height: '100px'
      });
    });

gMaps.js, es un plugin de jQuery que nos permite realizar la conexión con Google Maps de una forma sencilla e intuitiva, simplemente debemos informar del nombre del elemento contenedor y añadir las opciones que creamos convenientes. Esto nos devolverá un objeto gMaps con una serie de métodos que nos facilitarán tareas como trazar rutas, añadir polígnos, cambiar los controles,… de nuestros mapas.

Una de esas herramientas que nunca está de mas tener cerca.

Utilizando las nuevas tecnologías, CSS3 y Javascript (YUI), nos muestran un tutorial muy didáctico sobre como implementar un cubo de Rubic, con el que puedes jugar, con HTML5.

(Ver Imagen)

El resultado es muy interesante, y puedes verlo funcionar correctamente en Google Chrome, y si quieres verle las tripas, tienes el código en GitHub para destriparlo.

Me encantan estos ejemplos que nos muestran la cantidad de cosas que se pueden hacer con imaginación y los nuevos estándares.

Via

Si estás buscando una herramienta para ofuscar tu código Javascript, Horrible.js es tu herramienta. Activando el modo 100% convierte ese código en algo imposible de descifrar a simple vista, como si el mismo capitán Uruk-hai hubiera escrito esas líneas, si no te lo crees… pruebalo tu mismo.

Vamos un ejemplo:

alert("Hola mundo");

Pasado por Horrible.js (usando Horror Factor 1):

$=String.fromCharCode(40,34,72,109,41,59);(![]+[])[+[]][([![]]+{})[+!+[]+[+[]]]+([]+[]+{})[+!+[]]+([]+[]+[][[]])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+(!![]+[])[!+[]+!+[]]+([![]]+{})[+!+[]+[+[]]]+(!![]+[])[+[]]+([]+[]+{})[+!+[]]+(!![]+[])[+!+[]]][([![]]+{})[+!+[]+[+[]]]+([]+[]+{})[+!+[]]+([]+[]+[][[]])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+(!![]+[])[!+[]+!+[]]+([![]]+{})[+!+[]+[+[]]]+(!![]+[])[+[]]+([]+[]+{})[+!+[]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+$[0]+$[1]+$[2]+([]+[]+{})[+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[+!+[]]+(+{}+[]+[]+[]+[]+{})[+!+[]+[+[]]]+$[3]+(!![]+[])[!+[]+!+[]]+([]+[]+[][[]])[+!+[]]+([]+[]+[][[]])[!+[]+!+[]]+([]+[]+{})[+!+[]]+$[1]+$[4]+$[5])();

Copia y pega en Firebug para verlo funcionando.

No soy muy partidario de este tipo de prácticas, pero es que esta ofuscación se merecía un post 😀

David Walsh publica un artículo sobre CustomEvent(), un constructor DOM para gestionar más comodamente los eventos personalizados. Esta funcionalidad, añadida en el borrador DOM Level 3 ya está disponible en la mayoría de navegador (excepto IE ¬¬) y es interesante conocer.

// Definimos el nuevo Evento
document.body.addEventListener("userLogin", function(e) {
	// Obtenemos como parámetro el Evento (e)
	console.info("Event is: ", e);
	
	// Además, disponemos de información extra.
	console.info("Custom data is: ", e.detail);
});

// Definimos el nuevo Evento con la información "extra"
var myEvent = new CustomEvent("userLogin", {
  detail: {
    username: "davidwalsh"
  }
});

// Ejecutamos el evento
document.body.dispatchEvent(myEvent);

Más información:

• CustomEvent MDC
• Especificación DOM Level 3
• Especificación DOM Level 4

Ayer vimos Harvey, un plugin jQuery que nos permitía controlar cuando se ejecutaban en nuestros CSS’s los cambios sobre las Media Queries dependiendo de los cambios sobre el navegador que accede a nuestras páginas web.

Ahora os traigo onMediaQuery, una implementación en javascript para que no dependas de jQuery para poder disfrutar de esta funcionalidad.

En solo 1kb de Javascript dispones de la capacidad de ejecutar eventos al accionarse una query previamente definida en nuestros CSS’s.
Veamos un ejemplo de su uso:

CSS

<style>
	body:after {
		content: 'mobile';
		display: none;
	}
	@media screen and (min-width: 35em) {
		body:after {
			content: 'skinny'
		}
	}

	@media screen and (min-width: 56em) {
		body:after {
			content: 'wide-screen'
		}
	}

</style>

En nuestro CSS deberemos indicar que cada una de las queries va a tener un nombre único que usaremos desde nuestro javascript para controlarlos por separado.

JS

<script type="text/javascript" src="js/onmediaquery.min.js"></script>
<script>
var queries = [
    {
        context: 'mobile',
        callback: function() {
            console.log('Mobile callback.');
            // Lógica que se ejecutará cuando se detecte un móvil
        }
    },
    {
        context: 'skinny',
        callback: function() {
            console.log('skinny callback! ');
            //Lógica específica para tablets
        }
    },
    {
        context: 'wide-screen',
        callback: function() {
            console.log('wide-screen callback .');
            // Pantallas panorámicas
        }
    }
];
// Go!
MQ.init(queries);


// Añadimos una query
var my_query = MQ.addQuery({
    context: 'skinny', 
    callback: function() { 
        console.log( 'second skinny callback!' )
    }
});

// Borrar queries
MQ.removeQuery( my_query );
</script>

Y ya en Javascript, informamos la funcionalidad correspondiente para cada una de las media queries que disponemos.

PhantomJS es una implementación del motor de javascript de WebKit, desarrollado por Aria Hidayat, que podemos utilizar en nuestro servidor para trabajar sobre páginas web.

Gracias a las virtudes de WebKit, que ya conocemos,PhantomJS nos permite cargar páginas desde nuestro servidor y tratarlas como si de un arbol DOM se tratara. Aunque a primera vista se le ven utilidades de testing, ya que nos permite realizar pruebas unitarias de una forma similar a las implementadas por Selenium, tambien es igual de apto para hacer scraping de páginas web, sacar capturas de pantalla o monitorizar redes.

Ejemplo

console.log('Cargando la página');
var page = new WebPage();
var url = "https://www.anieto2k.com/";
page.open(url, function (status) {
	// Creamos el screenshot
	page.render("anieto2k.png");
	
    // Página cargada
    phantom.exit();
});

Muy, pero que muy interesante y más que puede llegar a ser…

Condicionar el CSS de tu aplicación dependiendo del dispositivo o del tamaño de la pantalla del mismo, es mucho más fácil desde que existen las CSS’s media queries. Estas condiciones del CSS nos permiten especificar condiciones necesarias para ejecutar cierto CSS directamente en nuestro código.

Harvey nos intenta hacer más fácil aún la tarea de gestionar estas condiciones y permitirnos trabajar con ellas permitiéndonos añadir funcionalidades cuando estas cambian en función de las redimensiones o cambios de posición de nuestros dispositivos.

Harvey.attach('screen and (min-width:600px) and (max-width:900px)', {
  setup: setup_function, // se llama cuando inicialmente se cumple la condición.
  on: on_function, // Se llama cuando la condición se activa.
  off: off_function // Se ejecuta cuando se desactiva.
}); 

Añadime una capa más de control para condicionar al milímetro el estilo de nuestras páginas.
[Descargar]