Contenido

HTML5Rubik, programando un cubo de Rubic

30 may

+ 3

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.

rubick
(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

Horrible.js, ofusca tu código javascript a modo Uruk-hai

30 may

+ 4

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 :D

CoverScroll, disfruta de CoverFlow con este plugin para jQuery

30 may

+ 0

CoverScroll es un plugin jQuery que nos permite emular el sistema Cover Flow de Apple para elementos de nuestras páginas. [Descargar][Demo]

CustomEvent(), gestión DOM para eventos personalizados

30 may

+ 0

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:

onMediaQuery, ejecuta javascript al cambiar las media query

29 may

+ 2

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, WebKit en tu servidor

29 may

+ 1

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 = "http://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

Harvey, domina las CSS media queries con javascript

28 may

+ 2

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]

jQuery i18n, traduce tu página desde javascript

28 may

+ 0

jQuery i18n(), es una implementación de la idiomatización i18n de javascript portada a jQuery para facilitarnos la tarea de incluir dichas traducciones en nuestros elementos DOM. Dispone de una serie de funciones que nos ayudarán a disponer de etiquetas dinámicas que podrán ser parametrizadas desde nuestros scripts. [Descargar]

Opera Mobile Emulator, depura tus webs para dispotivos móviles

28 may

+ 5

Opera presenta Opera Mobile Emulator, una aplicación que descargas en tu PC para emular navegadores móviles y poder así depurar más cómodamente nuestras aplicaciones web.

emu-devices
(Ver Imagen)

Entre las opciones interesante que nos ofrece hay que destacar la conexión con Opera Dragonfly para depurar nuestras aplicaciones web.

emu-debugging
(Ver Imagen)

Simplemente, una genial herramienta para hacernos el trabajo más fácil! :D

Detecta si estás online con HTML5

26 may

+ 2

Una de las nueva capacidades de la programación web es la capacidad de hacer que nuestras aplicaciones web puedan trabajar en modo offline, pero esto, nos obliga a controlar en todo momento si disponemos de conexión para volcar los cambios producidos, actualizar ciertos datos,…

navigator.onLine

El objeto navigator se modifica y añade esta nueva variable con el estado en formato boolean para conocer el estado de la conexión del usuario.

if(navigator.onLine){
alert('Online');
} else {
alert('Offline')
}

Así, podemos condicionar ciertas tareas que tendrán que realizarse exclusivamente en el navegador del usuario y otras que se encargarán de trabajar directamente con el servidor de aplicaciones.

Compatibilidad

Actualmente está disponible en la mayoría de navegadores modernos, al parecer, incluso IE7 dispone de esta capacidad.