Contenido

WebM, el códec de vídeo open source de Google

19 may

+ 17

La palabra de moda hoy es WebM, y si has estado toda la tarde pegado al Google Reader, Twitter o red social similar seguro que estás más que saturado de información al respecto. Si por el contrario, has hecho como yo y te has pegado una tarde offline 100%, estarás emocionado al ir leyendo poco a poco lo que estas 4 letras significan y pueden llegar a significar.

webm-devpreview
(Ver Imagen)

¿WebM?

Antes de empezar con una definición, hay que recordar que esta tarde ha tenido lugar la famosa y archiconocida Google I/O, una congregación de desarrolladores promovida por Google para presentar sus nuevos productos, osea una Keynote de Apple o un desfile de Cibeles de Versace. En ella nos muestra lo que estará de moda esta temporada :D

WebM, es el nombre que Google le ha dado al nuevo proyecto que pretende hacer frente al estandar de vídeo h264. Recordemos que Google adquirío hace unos meses la empresa On2, propietaria del codec VP8 con la intención de liberarlo a la comunidad. Y bueno, parece que así lo han hecho.

Antes

old
(Ver Imagen)

Ahora

new
(Ver Imagen)

WebM incluye:

¿Pero quien apoya esto?

Pues si aún no estás pegando botes en la silla, agarrate por que Mozilla, Opera y Adobe apoyan esta iniciativa y ponen en jaque a Microsoft y Apple que apoyaron fuertemente h264 anteriormente. Pese a que por el momento h264 está ganando la partida, WebM lleva detrás 4 grandes empresas (Google incluida) que hoy por hoy contribuyen a que Internet se mueva.

(Gracias Venkman): Además del importánte número de fabricantes de chips que apoyan la iniciativa:
AMD,ARM,Brightcove,Broadcom,Collabora,Digital Rapids,Encoding.com,Grab Networks,iLinc,INLET,Kaltura,Logitech,MIPS,Nvidia,Ooyala,Qualcomm,Skype,Sorenson,Telestream, Texas Instruments,Verisilicon,ViewCast,Wildform

¿Podemos probarlo ya?

Tranquilo, tranquilo, deja de pegar botes en la silla. No te muerdas las uñas. Mozilla ha puesto a nuestra disposición una “nightly version” para que podamos ir viendo como funciona el invento y por supuesto, Opera ha hecho exactamente lo propio con una versión que podemos descargar y usar.

Además Google ha comenzado a convertir sus videos al nuevo estandar y podemos activarlo muy fácilmente.

  1. Accede a http://www.youtube.com/html5
  2. Allí te dará la opción de activar la opción experimental de Youtube (este paso quizás ya lo tengas hecho)
  3. Desde esa misma URL buscamos cualquier video (por ejemplo trailers).
  4. Una vez con los resultados en pantalla, añadimos a la url (&webm=1)
  5. Debería quedar algo así (http://www.youtube.com/results?search_query=trailers&aq=f&webm=1.)
  6. Pulsamos Enter, y a ver videos en alta calidad :D

He de decir que me ha sorprendido lo fluido que van los videos.

Más información

Actualización [8:08]:

jhuesos nos informa que Microsoft se ha pronunciado sobre el tema y confirma que la próxima versión de Internet Explorer, la 9.0, dispondrá de soporte para VP8.

Microsoft contra Internet Explorer 6

14 may

+ 35

Una muestra de que Microsoft está intentando hacer las cosas bien y enmedar sus errores pasados es la campaña que ha comenzado contra Internet Explorer 6, más concretamente contra la ignorancia de los usuarios que la están usando y no saben que hay alternativas mejores para sus equipos.

ie8milk
(Ver Imagen)

Esto además de demostrar que tienen un camino por duro camino por delante, son conscientes de donde está el negocio y que su antiguo engendro está relentizando el boom en Internet. Con estas y otras medidas, pronto podremos disfrutar de una Internet más rica.

Via

Extensión para vincular extensiones a páginas web

14 may

+ 3

Mozilla Labs publica un interesante artículo en el que nos muestra una extensión basada en Jetpack con la que podemos asociar una extensión (para Firefox por el momento) a una página web. Al igual que hace unos años vimos como asociar tu web al buscador del navegador con OpenSearch ahora esta propuesta nos permite promocionar nuestras extensiones en nuestra página.

extension_throbber
(Ver Imagen)

Esto es ideal para sitios como Twitter, Facebook, Youtube,… que disponen de extensiones para mejorar la experiencia del usuario sobre la página y de esta forma se vincula con la página.

¿Como implementarlo?

Simplemente tenemos que añadir a nuestro <head /> una línea por extensión que deseemos vincular.

<link rel="extension" type="application/x-xpinstall" title="Power Twitter" href="https://addons.mozilla.org/downloads/latest/9591/addon.xpi">

Como vemos es una forma sencilla de conseguirlo. Podemos ver un par de ejemplos (Twitter y Facebook)

App Discover

Por otro lado, tenemos App Discover, otra extensión que además de detectar extensiones nos permite asociar scripts de GreaseMonkey, Titanium o Adobe AIR, extendiendo las posibilidades de nuestra web.

twitterappdiscover
(Ver Imagen)

Para ello también tendremos que asociar el fichero mediante el uso de <link /> en nuestro <head />.

<link rel="application" type="mime/type" title="Name" href="http://path/to/applicationorscript" />

Dependiendo del type que definamos,  la extensión actuará de una forma u otra.

Firefox Add-on
<link rel="application" type="application/x-xpinstall" title="URL Bar Navigator Firefox Add-on" href="http://almaer.com/firefox/urlbarnavigator/urlbarnavigator.xpi" />

Greasemonkey / user scripts
<link rel="application" type="text/javascript" title="Twitter translation user script" href="http://almaer.com/firefox/userscripts/twitter-translate.user.js" />

Adobe AIR app
<link rel="application" type="application/x-xpinstall" title="URL Bar Navigator Firefox Add-on" href="http://almaer.com/firefox/urlbarnavigator/urlbarnavigator.xpi" />

Appcelerator Titanium app
<link rel="application" type="application/vnd.appcelerator-titanium-app-package+zip" title="Tweetanium Appcelerator Titanium Twitter App" href="http://titaniumapp.com/tweetanium.dmg" />

Muy interesante propuesta que ojalá no se quede solo en eso.

Via

Internet Explorer 9, ¿el navegador definitivo?

8 may

+ 59

NetVicious me muestra un enlace directo al MSDN de Microsoft en el que nos muestra los resultados de una serie de tests realizados con los principales navegadores sobe elementos HTML5, DOM Level3, CSS3, SVG,…

IE9-HTML5-status
(Ver Imagen)

En los resultados vemos como Internet Explorer 9, consigue un 100% sobre todos los tests realizados frente a los demás navegadores actuales. Según comentan estos resultados están basados en 192 tests realizados en colaboración con la W3C para evaluar el estado de los navegadores actuales.Podemos acceder a cada uno de los tests accediendo directamente desde el enlace en la sección y módulo indicado.

Suelo pecar de ingenuo y esta vez quiero ser cauto, pero si estos resultados son verdad, estamos a punto de vivir una revolución en Internet. ¿Os imáginais un Internet Explorer completamente adaptado a los estándares web? ¿Se acabaron las limitaciones?

Colección de Mapas vectoriales para nuestras aplicaciones web

3 may

+ 4

Impresionante colección de mapas vectoriales para usar en nuestras aplicaciones web. Alternativas interesantes a Flash o Google Maps en formatos .ai (illustrator), .eps (PostScript Encapsulado) y SVG (Scalable Vector Graphics).

Un vistazo al futuro: IE9 Developer Tools, la pestaña de red

23 abr

+ 11

Internet Explorer 9 está a la vuelta de la esquina, y su llegada defraudará a muchos por la escasa adopción de estándares y animará a otros con nuevas funcionalidades y herramientas que nos permitirán desarrollar para él con más comodidad.

Una de estas herramientas es la ya conocida Developer Tools para Internet Explorer, que en esta nueva versión para Internet Explorer 9 dispondrá de una pestaña de red que nos mostrará información relacionada a las conexiones realizadas en nuestra aplicación web.

NetworkTab_3
(Ver Imagen)

La posibilidad de capturar las peticiones entrantes y salientes de nuestras aplicaciones web (imágenes, CSS, Ajax,…) pudiendo ver detalles interesantes sobre cada petición.

NetworkTab_5
(Ver Imagen)

Osea, básicamente lo mismo que hacemos con Firebug, Web Inspector, Dragonfly en su respectivo navegador.

Notificaciones de escritorio con WebKit

22 abr

+ 13

Las últimas versiones de WebKit integran una característica realmente interesante. La capacidad de enviar notificaciones al escritorio desde una aplicación web.

Picture 4
(Ver Imagen)

Estas notificaciones están disponibles mediante Javascript y nos permiten informar al usuario de que algún proceso en la página web ha terminado o se requiere cierta atención sobre ella.

function Notifier() {}

// Devuelve "true" si el navegador dispone del soporte
Notifier.prototype.HasSupport = function() {
  retun (window.webkitNotifications);
}

// Petición de permisos para enviar notificaciones desde esa URL.
Notifier.prototype.RequestPermission = function(cb) {
  window.webkitNotifications.requestPermission(function() {
    if (cb) { cb(window.webkitNotifications.checkPermission() == 0); }
  });
}

// Mostramos la notificación indicando icono, título y cuerpo
Notifier.prototype.Notify = function(icon, title, body) {
  if (window.webkitNotifications.checkPermission() == 0) {
    var popup = window.webkitNotifications.createNotification(
      icon, title, body);
    popup.show();
    return true;
  }
  return false;
}

Podemos ver un ejemplo funcionando (desde Chrome o versiones de Webkit más modernas)  (código fuente).

Me suena haber leído algo acerca de una propuesta de estándar para cambiar los odiosos alert() que te llevan a la página que lo provoca automáticamente. Algo realmente molesto. Pero no encuentro donde lo leí, así que si alguien sabe de lo que hablo agradecería me hicieran llegar el artículo.

Via

Drag&Drop desde el escritorio para Gmail

16 abr

+ 11

Hace ya unos meses vimos una implementación para Firefox 3.6 que permita subir ficheros a una página simplemente arrastrándolos desde el escritorio. Ahora gMail, añade esta funcionalidad para los usuarios de Google Chrome y Firefox 3.6+ y en breve en los demás navegadores.

attachments2
(Ver Imagen)

Realmente se trata de un sistema muy interesante y cómodo. Estoy deseando que sitios como Flickr o Youtube, se adapten a estas nuevas funcionalidades.

Google Chrome apunto de pasar HTML5 Test

15 abr

+ 26

HTML5Test es el nuevo test de referencia para los navegadores web. Similar a Acid 3 Test, pero enfocado a las nuevas funcionalidades HTML5, este test nos permite ubicar la estandarizacion de un navegador mediante un valor numérico y así comparar entre ellos.

HTML5testChrome
(Ver Imagen)

Actualmente, Google Chrome es el navegador que más funcionalidades HTML5 ha implementado, lo que hace que se coloque a la cabeza con un 86% de la implementación.

Continua —>

[Corregido] Ejecutando procesos en paralelo con Javascript

14 abr

+ 14

Actualizo (08:00):

El sistema usado en el ejemplo que croczilla.com publica, está desarrollado usando Stratified Javascript (SJS), una implemenetación de Javascript con Javascript O.o. Se trata de una librería multinavegador que nos permite añadir concurrencia a Javascript fácilmente.

La clave está en el uso de tags <script /> de un tipo diferente al que conocemos como text/javascript, usando uno propio se encarga de evaluar el código contenido en él añadiendo una serie de funcionalidades como hold(),resume()suspend() y la posibilidad de usar concurrencia en Javascript.

Ejemplo

<script type="text/javascript" src="sjs-loader.js"></script>
<script type="text/sjs">
….
function animate(elemname, duration_ms, step_ms) {
 var elem = document.getElementById(elemname);
 var start_time = new Date();
 var x = 0;
 do {
 elem.style.left = x;
 x = (x + 10) % 200;
 hold(step_ms); // Parando la ejecución
 } while (duration_ms > new Date() - start_time);
 }

 function par(a, b) {
 alert("all done");
 }
 // Procesos paralelos
 par(animate("animated_element_1", 10000, 100),
 animate("animated_element_2", 7000, 80));
…
</script>

Como podemos ver, en esta porción de código sacada de una demo de crockzilla.com, usamos hold() para detender la ejecución y usamos el paso de parámetros para comenzar la concurrencia de procesos.

Continua —>