Contenido

Speech Javascript API, habla con las páginas web

8 ene

+ 5

La llegada de Internet a los móvil h a producido una gran serie de cambios en los lenguajes de programación que usamos para crear páginas web, hace unos días vimos como la W3C publicaba el primer borrador para controlar el estado de la batería mediante Javascript. Y ahora os traigo el primer borrador no oficial de la especificación javascript para dotar de voz y hacer que nuestras páginas nos entiendan.

Se trata de una propuesta por parte del equipo de desarrollo de Google para dotar a los navegadores de herramientas de síntesis y de reconocimiento de voz. Haciendo posible que podamos hablar con páginas web y que estas nos respondan.

Speech Javascript API

descarga
(Ver Imagen)

La API se compone de 2 interfaces:

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

Ver código

Que mejor que un poco de código para hacernos una idea de lo que podría ser adaptar nuestra página a esta nueva tecnología:

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>

No parece muy complicado, ¿no? :D
Esto haría que publicar en tu WordPress pudiera ser una tarea que haces mientras vas al trabajo en coche, por ejemplo :D

Battery Status API, controla la carga de la batería de tus usuarios con Javascript

5 ene

+ 4

El pasado día 29 de Noviembre la W3C publicó el primer borrador sobre el que se está trabajando para permitir conocer el estado de la batería directamente desde el navegador, algo que actualmente no hay forma de hacer. Esta opción, que puede parecer una tontería puede ayudarnos muchos en casos de operativas delicadas, ya que podríamos advertir al usuario antes de que la batería se termine.

Por el momento, solo Mozilla Aurora 11, una futura versión de Firefox, lo incluye entre muchas otras nuevas funcionalidades.

La API dispone de una serie de atributos que cuelgan directamente del elemento window.navigator.

window.navigator.battery

Por el momento, ya que solo está disponible en Mozilla Aurora 11 y la API no está del todo definida tendremos que usarlo con el prefijo moz como ya nos tienen acostumbrados. Por lo tanto pasaría a ser window.navigator.mozBattery.

El nuevo objeto dispone de una serie de atributos que nos permitirá conocer ciertos datos sobre el estado de la batería:

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

Además, disponemos de una serie de eventos que podremos controlar para condicionar acciones a ellos:

  • onchargingchange
  • onchargingtimechange
  • ondischargingtimechange
  • onlevelchange

Una interesante propuesta para mejorar, sobretodo las aplicaciones móviles web con posibilidades nuevas y realmente útiles.

Propiedades CSS que afectan a la tipografía que usamos

16 feb

+ 5

A finales de Enero, la gente de Typekit publicó una serie de artículos muy interesantes sobre un estudio que habían realizado sobre lo que afecta a una tipografía hasta que llega al usuario en forma de página web. Como ya sabemos, intervienen muchos factores, el sistema operativo, los navegadores, los diseños de la fuente, los ficheros de las fuentes y en algunos casos las propiedades CSS.

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

Afectan directamente a la apariencia de la fuente al salir por pantalla, debido a que dicha fuente se ha rasterizar y convertir a un piñado de píxeles que el navegador despues ha de saber dibujar.

Como siempre, lo importante es conocer las limitaciones para poder lidiar con ellas.

Internet Explorer 9 vs Firefox 4.0

16 feb

+ 28

@paulrouget publica una interesante comparativa entre Internet Explorer 9 y Firefox 4.0. La versión más reciente y prometedora de Microsoft contra la nueva y mejorada creación de Mozilla.

IE9vsFF4
(Ver Imagen)

El resultado es más que obvio, pero bueno, el que se pueda intentar de comparar ya es una buena señal :D

Internet Explorer 9 RC disponible via actualización automática

15 feb

+ 9

La versión más esperada de Internet Explorer ya está disponible via actualización automática para aquellos usuarios que dispongan de la versión beta de IE9, una buena forma de extender la última versión disponible entre los usuarios que ya estén usando dicho navegador.

iercavau-image2
(Ver Imagen)

Si quieres evitar esta actualización en IEBlog nos ponen información de como desactivar la actualización con “Internet Explorer 9 Automatic Update Blocker Toolkit”, algo que a nivel corporativo va a ser muy útil.

Modularizar aplicaciones escalables javascript con POA

13 feb

+ 11

Hace ya tiempo vimos como construir una aplicación javascript fácilmente escalable basado en una presentación de Nicholas C.Zackas. Una forma de modularizar nuestro código Javascript con la intención de separar competencias haciendo que nuestro código no sea dependiente de otro.

En el código que vimos, además encapsulábamos todos los métodos de los módulos en un gestor de errores básico que se encargaba de evitar que un error en uno de los módulos provocara que la aplicación dejara de funcionar.

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

Por otro lado, hace todavía más tiempo, vimos una implementación de los filtros de WordPress en Javascript. Una forma de acercar la programación orientada a aspectos al lado del cliente.

La programación orientada a aspectos, no es más que un paradigma de programación que nos ayuda modularizar nuestra aplicación de una forma controlada, permitiendo extenderla desde fuera sin alterar el funcionamiento principal de la misma. O lo que es lo mismo, poder desarrollar plugins que modifiquen el funcionamiento principal.

Uniendo conceptos

Uniendo conceptos podríamos disponer de la capacidad de crear aplicaciones escalables gestionadas por un objeto encargado de arrancar y/o parar módulos, con una batería de herramientas disponibles en estos módulos capaces de hacernos disfrutar de las ventajas de la programación orientada a aspectos.

Veamos el código completo:


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?

He modificado el script para añadir 2 puntos de enlace predeterminados a todos los métodos de los módulos, “pre-XXX” y “post-XXX”. Lo que nos permite definir funcionalidades que se ejecutarán antes y después de la ejecución del módulo.  Veamos un ejemplo:

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

Al igual que los eventos por defecto de los que disponemos, podemos especificar eventos propios en nuestro módulos mediante el uso de Sandbox.fire(), que se encargará de ejecutar el contenido asociado al evento especificado.


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);
		}
	}
});

Como podemos ver, nos permitirá crear aplicaciones escalables y fácilmente extensibles mediante módulos que a su vez serán interoperables entre ellos mediante la programación orientada a aspectos.

jQuery Blog informa que deshabilitará el hotlinking

31 dic

+ 5

Desde el blog oficial de jQuery informan que apartir del próximo día 31 de enero de 2011 dejarán de servir ficheros hacia servidores externos, osea que van a deshabilitar el hotlinking que hasta ahora se estaba haciendo.

Esto afectará a muchos sitios que estén usando la dirección directa a los servidores de jQuery.com para llamar a los ficheros Javascript desde nuestras webs.

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

Para evitar problemas te recomiendo que cambies la ubicación de tus ficheros Javascript que hasta ahora estaban alojados en jQuery.com. Lo ideal sería alojar el fichero en tu servidor, pero si por algún motivo no es posible tienes el CDN de Google Ajax Libraries que cumple perfectamente esta función.

Validación de formularios con HTML5

18 nov

+ 14

HTML5 no solo ofrecerá una serie de elementos para hacer la web más visual, también ayudará a los desarrolladores web a realizar tareas cotidianas de forma más rápida y segura. Una de ellas es la validación de formularios.

Atributos

Gracias a una serie de atributos que podremos usar en elementos de nuestros formularios podremos condicionar desde el diseño las validaciones de cualquier formulario de nuestra página.

required

Como su nombre indica, el formulario no se enviará mientras el elemento que contenga este atributo no esté informado. Algo que hasta ahora estábamos haciendo en nuestra capa de funcionalidad con javascript, recorriendo elementos o comprobando los elementos con una class específica.

<input name="nombre" required >;

pattern

También podremos difinir el patrón que el texto deba tener dentro de nuestros elementos <input />. Este atributo realiza dos funciones, una especificar el formato del dato que recibiremos y otra la de ayudar a comprender al usuario el formato que deba usar (por ejemplo, campo para insertar un teléfono (+34) 971 123456).

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

maxlength

Podremos especificar la longitud máxima de nuestros datos directamente desde un atributo sin necesidad de controlarla desde javascript.

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

min, max, step

Los actuales sliders pasarán a mejor vida cuando nuestros elementos se puedan definir desde nuestros elementos indicando los valores mínimos, máximos y los pasos entre ellos directamente.

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

Javascript

Esto no significa que desde Javacript no vayamos a hacer nada ya con nuestros formularios, todo lo contrario, se añaden métodos nuevos a los elementos que nos permitirán trabajar con estas validaciones de una forma más cómoda.

Aún es una propuesta, pero apunta a ser una herramienta muy útil.

element.validity

Objeto que nos muestra información referente a la validación del elemento.

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

element.setCustomValidity()

Método definido para especificar un mensaje de error personalizado a un elemento:

<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

La capa de diseño además nos permitirá informar al usuario que un elemento no ha sido validado a la hora de enviar nuestro formulario, para ello nos acercan el pseudoselector :invalid para que podamos definir el aspecto de nuestros elementos no válidos.

:invalid{
border: 1px red solid;
}

Hay muchas más y más interesantes nuevas funcionalidades que nos harán la vida más fácil, las iremos viendo más adelante.

Popcorn, dándole semántica a los videos con HTML5

8 nov

+ 3

Mozilla quiere romper la idea actual del video en Internet. El actual modelo, basado en un elemento pasivo que muestra información al usuario mediante el navegador simula perfectamente la televisión actual, pero gracias a Drumbeat ha surgido Popcorn.

Popcorn

Popcorn, es una iniciativa que añade una funcionalidad extra a los elementos <video /> y <audio /> del HTML5 permitiendo que muestren al usuario información extra sobre el video, subtítulos, geolocalización, información sobre personas que aparezcan,…

La idea es añadir una semántica extra a lo que hasta ahora solo era un canal de visualización.

XML

Mediante un fichero XML externo que definiríamos en nuestro elemento multimedia especificaremos toda la información que consideremos relevante de nuestro video.

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

Aquí vemos un ejemplo (recortado) del fichero XML que podríamos encontrar.

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

Uno de los ejemplos de uso de este tipo de información es la de enviar en tiempo real los subtítulos en Inglés a una herramienta de traducción para mostrarlos en un idioma diferente al definido en el XML.

Sin duda se trata de un interesante proyecto que Mozilla está apoyando con el que los videos/audios de Internet dejarán de ser lo que son hoy en día.

IE9 el más estándar con HTML5

2 nov

+ 13

Lo he visto en Alt1040 y no me lo creía, así que he indagado un poco y no he podido encontrar pruebas de que esta noticia sea falsa, es más, al parecer la W3C se ha encargado de avalar la preview 6 de Internet Explorer 9 como la más estándar con respecto a HTML5 de todos los navegadores actuales.

HTML5browsers
(Ver Imagen)

Ya lo dije en su momento, esta nueva versión me está dando muy buenas vibraciones, eso no significa que deje de mirar de estar espectante para ver por donde va la cosa.