Contenido

Blocky, lenguaje de programación visual

4 jun

+ 5

Blocky es un nuevo lenguaje de programación visual que nos permite generar código apartir de la unión de piezas de un puzzle.

blocky_header_maze
(Ver Imagen)

Mediante el uso de drag & drop, podemos desarrollar colocando piezas encajadas entre si, este tipo de lenguajes permiten que personas sin conocimientos técnicos avanzados puedan aplicar lógicas de negocio a las aplicaciones de forma sencilla y visual.

Hola mundo

blockyholamundo
(Ver Imagen)

Aún se encuentra en una fase muy temprana, pero es interesante ver como con unas cajitas montamos un “Hola Mundo” que automáticamente podemos obtener en otro lenguaje como Javascript, Python, Dart,… y usar en nuestras aplicaciones.

Además tienen unas metas bastante interesantes para dortar a Blocky de capacidades realmente interesantes, como por ejemplo la posibilidad de definir nuestros propios bloques, lanzar eventos y asociar funcionalidades a dichos eventos y alguna idea más que merece pena ver.

Pruébalo tu mismo.

gMaps, incrusta mapas en tu web de la forma más fácil

4 jun

+ 0

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.

jmpress.js, dale vida a tus presentaciones web

1 jun

+ 0

jmpress.js, es un plugin de jQuery que te permite realizar presentaciones dinámicas en HTML5 con un toque realmente atractivo.  Gracias a una completa api, es posible crear verdaderas maravillas visuales. [Descargar]

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]