Speech Javascript API

(Ver Imagen)

• SpeechReco(), que nos permite grabar al usuario directamente desde el navegador.
• TTS(), que nos permitirá convertir texto en voz directamente.

Ver código

SpeechReco

<script type="text/javascript">
    var sr = new SpeechReco(); // Nuevo interface
    sr.onresult = function(event) {
      var q = document.getElementById("q");
      q.value = event.result[0].transcript; // Devolvemos la transcripción del mensaje
      q.form.submit();
    }
  </script>

  <form action="http://www.example.com/search">
  <input type="search" id="q" name="q"/>
  <input type="button" value="Speak" onclick="sr.start()"/> // Iniciamos la grabación
  </form>

TTS

  <script type="text/javascript">
     var tts = new TTS(); //Nuevo interface
     function speak(text, lang) {
        tts.text = text; // Indicamos el texto
        tts.lang = lang; // Indicamos el idioma
        tts.play(); // Hacemos hablar a nuestro navegador
     }
     speak("Hello world.", "en-US"); // Hola mundo :D
  </script>

Artículos relacionados

• Text to speech, o de texto a voz
• Los mejores sitios sobre WordPress
• Acelera la velocidad de carga de tus páginas
• Creando páginas 404 amigables para los usuarios
• Google Page Creator

Instalación

<script src="//rezitech.github.com/syze/syze.min.js"></script>

syze.sizes(320, 480, 768, 1024, 1920);

body { background: no-repeat center center; }
.is320  body { background-image: url(mobile-tall-128x128.png); }
.is480  body { background-image: url(mobile-wide-128x128.png); }
.is768  body { background-image: url(tablet-tall-256x256.png); }
.is1024 body { background-image: url(tablet-wide-256x256.png); }
.is1920 body { background-image: url(hdsize-wide-512x512.png); }

Artículos relacionados

• TwitterWeek – 2012-01-08
• Colección de utilidades Javascript
• El estado de Acid3 en la actualidad
• Browser Shooter, dispara navegadores con Javascript
• Flash VS Ajax

window.navigator.battery

• charging (boolean): true si la batería está cargando y false si no lo está.
• chargingTime(int): Número de segundos en los que se estima que la batería esté cargada.
• dischargingTime(int): Número de segundos en los que se estima que la batería se descargará y entraremos en modo suspensión (o apagado).
• level(int): Escala de 0-10 que indica el estado de carga de la batería, siendo 0 completamente descargada y 10 completamente cargada.

• onchargingchange
• onchargingtimechange
• ondischargingtimechange
• onlevelchange

Artículos relacionados

• Speech Javascript API, habla con las páginas web
• Perdemos 2.5 dias al año por la carga de las páginas
• WordPress 2.7.1 beta 1, primera actualización de mantenimiento de la 2.7
• WordPress 2.7 RC2, la final tendrá que esperar
• Crea listas rapidamente con javascript y solo con tu teclado

Proceso de creación

POM: Programación Orientada a Maquetadores

Atributos data-*

<input type="text" class="autocomplete estilobonito" data-max-items="15" data-type="clientes" data-min-length="3" />

// jQuery
$("input.autocomplete").bind(function(){

	// Recogemos valores
	var $this = $(this),
	 	$value = $this.val(),
		$maxitems = $this.data("max-items") || 5,
		$type = $this.data("type") || "compras", 
		$minlength = $this.data("min-length") || 5;
	
	
	/* Funcionalidad */
	
	// Salimos si ha pulsado menos de $minlength carácteres
	if ($value.length < $minlength) return;
	
	jQuery.getJSON("http://miservicio.com/", {
		type: $type,
		items: $maxitems,
		value: $value
	},function(){
		/* LO QUE QUIERAS HACER*/
	});
});

¿Donde está la gracia?

Artículos relacionados

• Programación Orientada a Objetos (POO) en Javascript
• Browser Book, Libro para maquetadores
• Joose-js, mejorando la programación orientada a objetos
• Top 20 lenguajes de programacion
• De Photoshop a XHTML/CSS paso a paso

Artículos relacionados

• Zebra tables con CSS3
• Sly, el selector CSS3 bueno, bonito y barato
• Extendiendo los selectores de MooToos y jQuery
• CSS3 Generando contenidos
• El selector :not() de CSS3

$script('analytics.js');
$script('library.js', function() {
  // do stuff with library.
});

$script('yui-base.js', function() {
 // do stuff with base...
 $script(['yui-anim.js', 'yui-connect.js'], function() {
 // do stuff with anim and connect...
 });
 $script('yui-drag.js', function() {
 // do stuff with drag...
 });
});

Artículos relacionados

• Using.js, el javascript onDemand llevado al máximo
• Glow, otra librería javascript
• Otra librería para trabajar con Ajax
• 40 librerías para trabajar con Ajax y creciendo
• Doodle.js, librería para trabajar con canvas

• font-size
• color
• -webkit-font-smoothing
• rotation

Artículos relacionados

• Usamos.es, informes de usabilidad y accesibilidad gratis
• JSSS, las CSS hechas JSON
• DOM Inspector para Internet Explorer y Firefox
• JSONPath, usando XPath con nuestro JSON
• Aún no sabes que es Hijax

(Ver Imagen)

Artículos relacionados

• El motivo por el que Internet Explorer es el mejor navegador
• Internet Explorer 7 beta 2
• El problema de desarrollar para un solo navegador (sea el que sea)
• Confirmado: Internet Explorer 8 hoy, apartir de las 18:00
• Internet Explorer 8 en 20 idiomas más

(Ver Imagen)

Artículos relacionados

• Internet Explorer 7 como actualización de crítica
• Internet Explorer 8, ahora disponible en 43 idiomas
• Internet Explorer 8 como actualización automática para finales de Abril
• Internet Explorer 8 beta 2 disponible para descargar
• Internet Explorer 8 beta 2, ahora en 25 idiomas más

...
 for (name in instance){
    method = instance[name];
    if (typeof method == "function") {
      instance[name] = function(name, method) {
      return function(){
          try { return method.apply(this, arguments);}
          catch(ex) { console.log("[Error]" + name + "(): " + ex.message); }
        }
      }(name, method);
    }
  }
...

Programación orientada a aspecto

Uniendo conceptos

var debug = false;
var Sandbox = function() {
	var listeners = {};
	return {
		add: function(name, func){
		  if (typeof listeners == 'undefined') return;
		  if (typeof listeners[name] == 'undefined') listeners[name] = new Array();
			listeners[name].push(func);
		},
		remove: function(name, func){
			if (typeof listeners[name] == 'undefined') return;
			var j = 0;
			while (j < listeners[name].length) {
				if (listeners[name][j] == func) { listeners[name].splice(j, 1);}
				else { j++; }
				}
		},
		fire: function(name, args){
			if (typeof listeners == 'undefined' || (!listeners[name]  || typeof listeners[name] == 'undefined')) return;
		    for (var x=0; x<listeners[name].length; x++)
		        listeners[name][x].call(this, args);
		}
	};
};

var Core = function(){
   	var modules = {}, sandbox = new Sandbox(this);
   	function createInstance(moduleID){
   		var instance = modules[moduleID].creator(sandbox),name, method;
    	if (!debug) {
      		for (name in instance){
        		method = instance[name];
        		if (typeof method == "function") {
          			instance[name] = function(name, method) {
						var evname = moduleID + ":" + name;
            			return function(){
              				try {
								sandbox.fire("pre-" + evname, arguments);
								salida = method.apply(this, arguments);
								sandbox.fire("post-" + evname, salida);
								return salida;
							}
              				catch(ex) {
								if (typeof instance["onerror"] == 'function') instance["onerror"].apply(this, [ex]);
								console.log("[Error]" + name + "(): " + ex.message);
							}
            			}
          			}(name, method);
        		}
      		}
    	}
  	return instance;
 	}

 	// Método públicos
 	return {
   		register: function(moduleID, creator) {
     		modules[moduleID] = {
       			creator: creator,
       			instance: null
     		};
   		},
   		start: function(moduleID) {
     		modules[moduleID].instance = createInstance(moduleID);
     		modules[moduleID].instance.init();
   		},
   		stop: function(moduleID){
     		var data = modules[moduleID];
     		if (data.instance) {
       			data.instance.destroy();
       			data.instance = null;
     		}
   		},
   		startAll: function(){
     		for (var moduleID in modules) {
       			if (modules.hasOwnProperty(moduleID)) {
         			this.start(moduleID);
       			}
     		}
   		},
   		stopAll: function() {
     		for (var moduleID in modules) {
       			if (modules.hasOwnProperty(moduleID)) {
         			this.stop(moduleID);
       			}
     		}
   		}
 	};
}();

¿Que nos ofrece?

Core.register("test", function($s){
	return {
		init: function(){
			console.log("Constructor");
		},
		destroy: function(){
			console.log("Destroy");
		},
		onerror: function(ex){
			alert("Error: " + ex);
		}
	}
});

Core.register("test2", function($s){
	return {
		init: function(){
                        // Añadimos el evento al contructor del módulo "test"
			$s.add("pre-test:init", function(){
				console.log("Bla bla");
			});
			console.log("Constructor 2");
		},
		destroy: function(){
			console.log("Destroy 2");
		},
		onerror: function(ex){
			alert("Error: " + ex);
		}
	}
});

// Cargamos los módulos
Core.start("test2");
Core.start("test");

// Resultado
// --> Constructor 2

// --> Bla bla
// --> Constructo

Eventos personalizados

Core.register("test3", function($s){
	return {
		init: function(){
			console.log("Constructor 2");
			// Ejecutamos el evento "mievento"
			$s.fire("mievento", this);
		},
		destroy: function(){
			console.log("Destroy 2");
		},
		onerror: function(ex){
			alert("Error: " + ex);
		}
	}
});

Artículos relacionados

• TwitterWeek – 2011-09-04
• 10 acordeones en Javascript
• TwitterWeek – 2011-01-09
• Las Damas en Javascript
• Javascript para Hackers