Contenido

X-Tags, crea tus propios elementos HTML con funcionalidad javascript

30 jul

+ 38

<x> o X-Tags, es una librería javascript que nos permitirá definir elementos HTML propios cargados con la funcionalidad que deseemos de una forma fácil y rápida.

La idea detrás de esta librería es que el diseño simplemente tenga que conocer el elemento HTML a crear y su estructura. Además, se basa en el estandar de Web Components y los Custom Elements, que nos permite definir elementos propios contemplados en los estandares modernos. Hasta el momento, la mejor opción es usar algún elemento HTML disponible e intentar que tenga algún sentido semántico en nuestro código.

Por lo tanto, si nuestros maquetadores conocen el código HTML que hemos definido previamente, por ejemplo este acordeón:


// HTML
<x-accordion>
    <x-toggler selected="true">Toggler 1</x-toggler>
    <div>Panel 1</div>
    
    <x-toggler>Toggler 2</x-toggler>
    <div>Panel 2</div>
    
    <x-toggler>Toggler 3</x-toggler>
    <div>Panel 3</div>
</x-accordion>

Nosotros solo tendremos que registrar el elemento con las características que nosotros deseemos.


// Javascript
xtag.register('accordion', {
    onCreate: function(){
        // Se ejecutará cuando un elemento es creado o parseado
    },
    onInsert: function(){
        // Se ejecutará cuando un elemento es insertado en el DOM
    },
    events: {
        'click:delegate(x-toggler)': function(){
            // Se ejecuta cuando un toggler es ejecutado.
        }
    },
    getters: {
        'togglers': function(){
            // Devuelve todos los elementos togglers.
        }
    },
    setters: {
        // Añade Objetos DOM
    },
    methods: {
        nextToggler: function(){
            // Activa nuevo toggle
        },
        previousToggler: function(){
            // Activa el toggle previo
        }
    }
});

Y todo ello, siendo disponible para la mayoría de navegadores de escritorio y todos los móviles. Ver más ejemplos

jQuery se desmiembra para la versión 1.8

26 jun

+ 8

jQuery da un paso en su personal evolución hacia la modularización de su código, y en esta nueva versión podremos generar versiones personalizadas de la librería excluyendo módulos que no necesitemos.

Entre los módulos que podremos excluir para esta nueva versión tenemos (ajax, css, dimensions, effects y offset). Si no necesitas ninguno de estos módulos puedes tener una versión de jQuery de solo 21KB (gzip). De esta forma podremos convertir un cañon en el arma que realmente necesitamos para atacar el problema.

Otra mejora que nos encontraremos en esta nueva versión es la inclusión de prefijos CSS automáticamente para evitarnos tener que añadir más líneas de las necesarias, haciendo nuestro código más estandar y adaptado a las especificaciones del futuro.

Y muchas cosas más…

[Descargar]

StackJS, framework JS para que la orientación a objetos sea más fácil

26 jun

+ 3

StackJS es un framework más que nos ofrece las herramientas necesarias para facilitarnos la tarea implementar mediante orientación a objetos en javascript.

Además de una serie de funcionalidades que le aportan robustez a nuestras creaciones.

setters y getters automáticos

Automáticamente tendremos disponible métodos de insercción y consulta de todos los atributos de la clase, lo que nos facilitará la tarea de trabajar con ellas.


Class('Car', {
	engineSize: null,
	model: null,
	manufacturer: null,
	maxSpeed: null,
	Car: function(manufacturer) {
		this.manufacturer = manufacturer;
	}
});

var car = new Car('Toyota');
car.setModel(2007); // Setter Automático
console.log(car.getManufacturer()); // Getter Automático

Gestión de errores

La posibilidad de definir nuestras propias excepciones, condicionar funcionamientos y lanzarlas cuando detectemos un problema nos permite una mayor control de nuestro código.


Class('MyException::Exception',{
	test: null,
	MyException: function(test) {
		this.message = "Excepción lanzada";
		this.human = test;
	}	
});

Class('MiClass', {
	falla: function(){
		Throw(new MyException(this)); // Excepción
	}
});


var miKlass = new MiClass();

// Evento MyException
Catch('MyException', function(ex){
	console.log("Se ha producido una excepción controlada");
});

miKlass.falla();

Delegación de objetos

Portado de ObjectiveC podemos vincular objetos delegando eventos entre ellos.


Class("Engine",{
	size: null,
	Engine: function(size) {
		this.size = size;
	},
	start: function() {
		this.callDelegate("didBrokenPart",[this]);	
	}
});

Class("Car",{
	engine: null,
	Car: function() {
		this.engine = new Engine(1600); // Creamos un nuevo Engine
		this.engine.setDelegate(this); // Delegamos el nuevo objeto creado
	},
	drive: function() {
		console.log("start drive");
		this.engine.start();
	},
	stop: function() {
		console.log("car is stopped");
	},
	didBrokenPart: function(object) {
		this.stop();
	}
});

Y todo en solo 3kb comprimdido.
[Descargar]

Sigma.js, dibuja gráficas usando canvas desde javascript

14 jun

+ 3

El uso de canvas de HTML5 está dando lugar a herramientas tan interesantes y sorprendente como Sigma.js, una librería que permite generar gráficas dinámicas directamente desde javascript.

sigma
(Ver Imagen)

Entre las características que hacen de Sigma.js una librería interesante están:

  • La capacidad de encadenar métodos
  • Gestión de eventos personalizados
  • Posibilidad de añadir plugins, usar ficheros GEXF, algoritmos ForceAtlas2,…
  • Api sencilla y accesible
  • Pintado personalizado del mantenimiento del gráfico
  • Insercción mediante frames

Como usarlo

Primero deberemos inicializar el objeto sigma con el contenedor DOM donde incluiremos nuestro gráfico.


var sigInst = sigma.init(domElement);

El objeto resultante, nos permitirá comenzar a trabajar con el gráfico:


sigInst.addNode('hello',{
  'label': 'Hello'
}).addNode('world',{
  'label': 'World!'
}).addEdge('hello','world');

Los ejemplos pueden ayudar a ofrecer una idea más clara de las capacidades de la librería. Descargar.

on{X} , extiende las capacidades de tu Android con Javascript

7 jun

+ 3

Microsoft, si Microsoft, ha desarrollado una interesante idea con la que nos permite extender las capacidades de nuestro Android mediante una API Javascript.

Como se de una gestión de eventos básica se tratara on{X} nos permite definir funcionalidades interesante cuando estos eventos se cumplan.

Hola Mundo

// Cuando desbloquee el móvil 
device. screen.on("unlock", function(){
     // Muestra el mensaje "Hello world!"
     var notification = device.notifications.createNotification('Hello world!');
     notification.show();
     console.log('Hello World notification was sent to the phone');
 });

On{X} está compuesto de una aplicación para Android que debes instalar en tu dispositivo móvil y una aplicación web en la que al entrar con login de Facebook podrás ver un listado de recipientes con tus controles definidos, estos controles están continuamente sincronizados entre el móvil y la aplicación así que es posible realizar cambios y verlos en vivo directamente en tu móvil.

Para desarrollar tus propios recipientes dispones de un editor online que automáticamente almacenará el código y lo compartirá con tu dispositivo móvil.

De esta forma, planificarte tareas como “Enviar un mail a tu mujer diciéndole que estás en el supermecado y si tienes que comprar algo concreto es el momento, automáticamente cuando entras al supermercado” es posible, sencillo y lo que a mi me gusta más, te lo puedes programar tu mismo!

Ejemplos

Avisame si he de coger un paraguas en el primer desbloqueo del móvil de cada mañana si el tiempo dice que va a llover.


// Inicializamos variables

var reminder = "take an umbrella";
var weatherCondition = "rainy";

console.log('Started script: Remind me to ' + reminder + ' every day the first time I unlock my phone, if it is going to be ' + weatherCondition);

device.screen.on('unlock', function () {
	console.info('device unlocked');
	var lastDateScreenUnlocked = device.localStorage.getItem('lastDateScreenUnlocked');
	var today = new Date().toLocaleDateString();

	// Si es el primer desbloqueo
	if (!lastDateScreenUnlocked || lastDateScreenUnlocked !== today) {
		// Coger posición actual
		var locationListener = device.location.createListener('CELL', 2);
		locationListener.on('changed', function(locSignal) {
			locationListener.stop();

			// Carga el tiempo en función de la posición
			feeds.weather.get(
				{
					location: locSignal.location.latitude + ',' + locSignal.location.longitude,
					time: 0     
				},
				function onSuccess(weather, textStatus, response) {
					console.info('Got the weather forecast for today:', JSON.stringify(weather.forecasts[0]));

					// Compruemas las condiciones atmosféricas
					var forecast = weather.forecasts[0];

					if ((weatherCondition === 'rainy' && (forecast.rain > 50 || forecast.sky.toLowerCase() === 'rain')) ||      // Llueve
						(weatherCondition === 'sunny' && forecast.sky.toLowerCase() === 'clear') ||                                               // Soleada
						(weatherCondition === 'windy' && forecast.wind.speed  >= 20 && forecast.wind.speed < = 30)) {  // Viento
						// Creamos la notificación
						 var notification = device.notifications.createNotification(reminder);
						notification.on('click', function () {
							device.browser.launch(weather.forecastUrl);
						});
						// Mostramos el mensaje
						notification.show();
					} else {
						console.info('weather is not ' + weatherCondition );
					}
				},
				function onError(response, textStatus) {
					console.error('Failed to get weather: ', textStatus);
				});
		});

		locationListener.start();

		// Actualizamos el tiempo desde la última notificación
		device.localStorage.setItem('lastDateScreenUnlocked', today);
		console.info('Stored the last time the screen was unlocked: ', today);
	}
});
console.log('Completed script: Remind me to ' + reminder + ' every day the first time I unlock my phone, if it is going to be ' + weatherCondition);

Más ejemplos

jQuery++, personaliza tu librería jQuery

7 jun

+ 0

jQuery++ nace para solventar la problemática de cargar más javascript del estrictamente necesario en nuestras aplicaciones web. Mediante esta aplicación será posible añadir a tu jQuery una serie de herramientas con el tamaño mínimo posible.[Via]

Can.js, framework JS para enriquecer tus aplicaciones Web

6 jun

+ 8

Can.js, es un framework creado para facilitar la creación de aplicaciones ricas en javascript gracias a la integración de herramientas que nos permiten gestionar el código que desarrollamos.

var Todo = can.Construct({
  init: function( text ) {
    this.text = text
  },
  read: function() {
    console.log( this.text );
  }
})
  
var todo = new Todo( 'Hello World' );
todo.read()

Facilitando las herramientas por separado nos permite definir nuestro propio patrón de desarrollo o usar el típico y efectivo MVC para gestionar una gran aplicación web.

  • can.Construct – Constructor de objetos javascript
  • can.Observegestión de eventos clave – valor
  • can.Model – Modelo de datos conectado via REST JSON
  • can.view – Motor de plantillas
  • can.EJS – Lenguaje propio de plantillas con helpers
  • can.Control – Directiva de control de eventos
  • can.route – Soporte de routing

Lo mejor de Can.js, es:

  • Tamaño, en solo 8.5kb dispones de las mismas herramientas que ofrecen otros frameworks.
  • Facilidad de uso, es una de las premisas por las que crearon este framework.
  • Seguridad, no acerca herramientas muy completas para gestionar nuestros objetos y evitar que la cosa se desmadre.
  • Velocidad, comparado con otros frameworks de similares capacidades promete mejores resultados en ejecuciones cruciales de desarrollo.
  • Flexibilidad, facil de implementar tus propios plugins para añadirles funcionalidades nuevas

Además, está disponible para las principales librerías javascript:

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