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

...
 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

<script type="text/javascript" src="http://www.jquery.com/...."></script>

Artículos relacionados

• Hotlinking Protection Plugin para WordPress
• jQuery 1.1, nueva versión y nuevo sitio web
• jQuery 1.1.2, ha visto la luz
• Hotlinking
• jQuery 1.2.1

required

<input name="nombre" required >;

<input type="telefono" pattern="(+[0-9]{2}) [0-9]{3} [0-9]{6}" >

maxlength

<textarea name="tweet" maxlength="150"></textarea>

min, max, step

<input name="slider" min="1" max="10" step="2" >

element.validity

• boolean valueMissing; -- Devuelve true si el elemento está vacío y requerido.
• boolean typeMismatch; -- Devuelve true si el elemento no contiene la sintaxis correcta.
• boolean patternMismatch; -- Devuelve true si el elemento no cumple el patrón definido.
• boolean tooLong; -- Devuelve true si el elemento es más grande que el tamaño definido.
• boolean rangeUnderflow; -- Devuelve true si el elemento es menor al mínimo definido.
• boolean rangeOverflow; -- Devuelve true si el elemento es mayor al máximo definido.
• boolean stepMismatch; -- Devuelve true si el elemento no concuerda con uno de los pasos definidos.
• boolean customError; -- Devuelve true si el elemento tiene un error personalizado.
• boolean valid; -- Devuelve true si el elemento es válido.

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling.');
   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
</script>

CSS

:invalid{
border: 1px red solid;
}

Artículos relacionados

• Todo lo que necesitas saber sobre los formularios HTML5
• VanadiumJS, validación de formularios en el cliente
• Valida formularios con Prototype
• LiveValidation, sistema de validación javascript en vivo
• Buenas prácticas en la implementación de formularios

Popcorn

XML

<video width="530px" height="299px" controls="" data-timeline-sources="xml/webMadeMovies.xml">
 <source type="video/ogg; codecs="theora, vorbis" src="wmmjuly6.ogv"></source>
 <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2" src="wmmjuly6.mp4"></source>
</video>

<popcorn>
 <manifest>
 <people>
 <person id="celine" name="Celine" salutation="Miss." >
 <resource id="celinehomepage" src="http://www.celinecelines.com/" description="Celine's Homepage" />
 </person>
 <person id="brian" name="brian" >
 </person>
 <person id="SteveSong" name="Steve Song" >
 </person>
 [...]
 </people>
 <places>
 <place id="saopaulo" type="city" name="Sao Paulo">
 <resource id="saopaulowiki" src="http://en.wikipedia.org/wiki/S%C3%A3o_Paulo" description="Sao Paulo city, Brazil"/>
 </place>
 <place id="CapeTown" type="city" name="Cape Town">
 <resource id="capetownwiki" src="http://en.wikipedia.org/wiki/Cape_Town" description="Cape Town, South Africa"/>
 </place>
 [...]
 </places>
 <attributions>
 <attribution id="yacht1attrib" nameofwork="Don't Fight The Darkness" copyrightholder="Yacht" copyrightholderurl="http://www.teamyacht.com/" nameofworkurl="http://freemusicarchive.org/curator/WFMU/blog/Join_YACHT_See_Mystery_Lights_instrumentals" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
 <attribution id="yacht2attrib" nameofwork="Psychic City Voodoo City" copyrightholder="Yacht" copyrightholderurl="http://www.teamyacht.com/" nameofworkurl="http://freemusicarchive.org/curator/WFMU/blog/Join_YACHT_See_Mystery_Lights_instrumentals" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
 <attribution id="attrib" nameofwork="A Shared Culture" copyrightholder="Jesse Dylan" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
 [...]
 </attributions>
 <articles>
 <resource id="theinternet" src="http://en.wikipedia.org/wiki/internet" description="The Internet"/>
 <resource id="villagetelco" src="http://en.wikipedia.org/wiki/Village_telco" description="The Village Telco"/>
 <resource id="oilspill" src="http://en.wikipedia.org/wiki/Deepwater_Horizon_oil_spill" description="Deepwater Horizon Oil Spill"/>
 [...]
 </articles>
 </manifest>

 <timeline>
 <footnotes>
 <footnote in="00:00:00" out="00:14:00" target="footnotediv">Look around the page as info is updated!</footnote>
 </footnotes>
 <resources>
 <attribution in="00:00:05:02" out="00:00:34:00" target="container5" resourceid="yacht1attrib"></attribution>
 <attribution in="00:00:34:01" target="container5" resourceid="yacht1attrib"></attribution>
 <footnote in="00:00:00" out="00:15:00" target="footnotediv">Look around the page!</footnote>
 <videotag in="00:00:05:02" out="00:00:10:07">Steve Song</videotag>
 <attribution in="00:00:05:02" out="00:00:10:07" target="container5" resourceid="villagetelcoattrib"></attribution>
 <twitter in="00:00:05:02" out="00:00:10:07" title="Steve Song" source="from:stevesong" target="personaltwitter" width="238" height="120" overlay="images/overlay/twitter.png" />
 <wiki in="00:00:05:02" out="00:00:10:07" resourceid="villagetelco" numberOfWords="200" target="wikidiv" overlay="images/overlay/wiki.png"/>
 <flickr in="00:00:05:02" out="00:00:10:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px" overlay="images/overlay/flickr.png"/>
 <googlenews in="00:00:05:02" out="00:00:10:07" target="googlenewsdiv" topic="Village Telco"/>
 [...]
 </resources>

 <map>
 <location resourceid="capetownwiki" in="00:00:03:00" out="00:00:11:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/>
 <location resourceid="grandislewiki" in="00:00:11:07" out="00:00:19:07" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/>
 <location resourceid="mitmedialabhome" in="00:00:19:08" out="00:00:27:00" lat="42.3613" long="-71.0863" target="container2" zoom="12"/>
 [...]
 </map>
 <subtitles>

 <subtitles language="en" align="center">
 <subtitle in="00:00:00:03" out="00:00:01:06">All right let's take a look and show me some</subtitle>
 <subtitle in="00:00:01:06" out="00:00:03:00">of the neat things you can do on the internet</subtitle>
 [...]
 </subtitles>

 <subtitles language="fa" align="center">

 <subtitle in="00:04:00:08" out="00:04:01:09">My name is Mona Kasra</subtitle>

 <subtitle in="00:04:01:10" out="00:04:03:11">and I'm building a better Internet</subtitle>
 [...]
 </subtitles>

 </subtitles>
 <credits></credits>
 </timeline>
</popcorn>

Artículos relacionados

• 557 herramientas para la Web semántica
• Tabulator: un navegador para la web semántica
• HTML5 video con problemas en todos los navegadores
• Más sobre el contenido multimedia, HTML5 y WebKit
• Ambilight para HTML5 Video