Contenido

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.

Google Buzz API, disponible para desarrolladores

10 Feb

+ 14

La velocidad con la que Google Buzz ha pasado a estar disponible (en alguna cuentas) y la aparición de la API me hace pensar que ya llevaban tiempo detrás de esto. Probablemente desde las primeras versiones para desarrolladores de Google Wave.

Google Buzz API

Los desarrolladores, tenemos ya disponibles unas pequeñas especificaciones para desarrollar aplicaciones usando esta herramienta.

Por un lado disponemos de la posibilidad de obtener un feed completo con toda nuestra actividad pública mediante una URL única por usuario.

http://buzz.googleapis.com/feeds/{userID}/public/posted

Conseguir el identificador de un usuario es tán secillo como obtenerlo del link que va a sociado a su nombre en Google Buzz. En mi caso es el siguiente:

http://buzz.googleapis.com/feeds/103886688219972755999/public/posted

Esto nos permite acceder a mi feed público y ver en él todo el contenido que he ido añadiendo, al igual que lo disponíamos con FriendFeed. Todo ello usando el formato Atom (RFC4287).

Añadir sitios y a sitios

Por defecto Google Buzz detecta sitios que están asociados en tu perfíl y los usa para ofrecertelos para completar tus «Gweets» con información de ellos. Para ello bastará con editar tu perfíl y añadir las URL’s que quieras asociar a tu perfíl.

Vínculos a tu perfíl desde sitios externos

Si quieres relacionar un sitio web contigo, podrás hacer añadiendo un tag HTML que dará información en formato XFN sobre tu perfíl en Google.

<head>
 <!-- ... -->
 <link rel="me" type="text/html" href="http://www.google.com/profiles/your.username"/>
 <!-- ... -->
</head>

Esto hará que herramientas destinadas a ello, puedan ofrecer más información al visitante sobre el autor de la página que está visitando.

Opinión

Google está jugando fuerte, si lo miramos con perspectiva veremos que está montando su propio Facebook usando Internet como tablero. No hay limitaciones, no hay que estar en un mismo dominio para disfrutar de todo lo que la red te ofrece… me hallo entre el miedo, la admiración y la expectación de lo que esto puede significar.

Microformatos en tu navegador

10 Mar

+ 6

El uso de microformatos lleva ya años por internet y poco a poco parece que va cuajando en la red haciendo más fácil interactuar con ella. Para ir aprovechandonos de ellos, podemos ir usando extensiones para nuestros navegadores que explotan esta posibilidad de extender las páginas web.

Opera parece que ya lo tiene integrado, pero no lo he podido probar. ¿Alguien me lo confirma?

Introducción al hCard, preséntate semánticamente en la web

6 Mar

+ 2

Con llegada de la web semántica, llegaron los Microformatos, y entre ellos tenemos el hCard. El hCard es la versión semántica de las tarjetas de presentación de toda la vida. Con la diferencia que estas además de ofrecer información sobre alguien puede adornar y permitir la interacción con navegadores y herramientas que detectan este tipo de estándar.

<div class="vcard">
  <span class="fn n">Jack Tripper</span>
  <div class="org">Jack's Bistro</div>
  <div class="adr">
    <div class="street-address">834 Ocean Vista Ave.</div>
    <span class="locality">Santa Monica</span>,
    <span class="region">CA</span>,
    <span class="postal-code">90405</span>
  </div>
</div>

El código que vemos arriba nos muestra un ejemplo que la gente de Opera ha creado para explicar una breve introducción a lo que es este estándar y lo que se pretende conseguir con él. En Microformats.com encontramos un listado con todas las líneas que podemos usar para dar más datos sobre la persona o sobre ti mismo. Como podemos observar, no es más que usar atributos como class, rel, id,… que informados con unos nombres definidos nos ayudan a estandarizar este código.

Tambien podemos usar alguna de estas herramientas:

  • hCard Creator: Herramienta que nos permite crear dinámicamente un hCard con los datos que nos van solicitando.
  • hCard Validator: Herramienta que nos permitirá validar nuestra creación, ya sea mediante una porción de código o mediante una URL.

Web Forms 2.0, el futuro de nuestros formularios(I)

17 Sep

+ 10

Con la llegada de HTML5, que parece estar planificada … ¿para 2022?. Traerá muchísimas novedades, como para no traerlas con el tiempo que queda.

Una de las que más me ha llamado la atención ha sido este borrador de Web Forms 2.0, que pretende ser una muestra de lo que serán los formularios del futuro, ya que los actuales comienzan a quedarse cortos y se ha de abusar de javascript para paliar ciertas carencias que podrían estar incluidas en el navegador.

Hay muchas modificaciones, pero especialmente me ha gustado las extensiones que van a sufrir los elementos <input />, los más importantes de nuestros formularios.

Nuevos tipos

Para ampliar las capacidades de estos elementos se han planteado una serie de tipos que describimos a continuación:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

Con estos nuevos tipos de elementos, sumados a los actuales (submit, file, button, radio,…) podemos hacer cosas como estas con únicamente 2 líneas.

<p>
  <label for="time1"> Preferred delivery time: </label>
  <input id="time1" name="time1" type="time" min="08:00" max="17:00" value="08:00" /> —
  <input id="time2" name="time2" type="time" min="08:00" max="17:00" value="17:00" />
 </p>

De esta forma, estamos indicando que se trata de 2 elementos de tipo tiempo y que los rangos entre los que nos permiten definir sus valores van desde las 8:00 a las 17:00… se acabó el Javascript necesario para controlar los valores que introducimos.

Al ser el navegador el que se encarga de dicho control, podemos dedicar nuestros esfuerzos a otros menesteres más interesantes.

Nuevos atributos

Mediante la incorporación de una serie de atributos nuevos podremos realizar interesantes combinaciones, enriqueciendo nuestras aplicaciones sin necesidad de hacer que nuestro código crezca.

  • min
  • max
  • step
  • pattern
  • required
  • form
  • autocomplete
  • autofocus
<input type="date" min="1900-01-07" step="7" name="sunday" >

Sin duda el atributo más interesante, o por lo menos uno de los que más van a dar de sí es pattern, ya que nos permitirá definir una expresión regular y el <input /> validará que el valor que introduzcamos no se salga de dicho patrón.

<label> Credit Card Number:
 <input type="text" pattern="[0-9]{13,16}" name="cc" />
</label>

Con required haremos que un elemento sea imprescindible para que nuestro formulario pueda ser procesado. Algo que hasta ahora hacíamos con Javascript.

<li><label> Name: <input type="text" name="name" required="required" /></label></li>

Con la inclusión del atributo form, podremos indicar a que formulario (o formularios) obedece un elemento <input />, quizás este punto es un poco delicado ya que creo que podría romper la semántica del código informando un elemento <input /> en un lugar distante del formulario, haciendo perder la idea de la estructura actual.

<form id="edit1">
<input form="edit2" type="text" name="value"/>
<input form="edit1" type="submit" name="Edit"/>
</form>
...
<form id="edit2">
...
</form>

En definitiva, una gran cantidad de cambios que de aquí al 2022 podremos ir viendo 😀

Espectaculares gráficas con CSS puro y duro

4 Mar

+ 2

Pure CSS data Chart, son unas gráficas creadas únicamente con CSS que no le tienen nada que envidiar a las sobrecargadas con Javascript.[Demo][Descargarc]

60 Directrices para realizar formularios usables

28 Feb

+ 0

Olga, como es de costumbre, nos deleíta con un artículo que recoge las 60 directrices para realizar formularios usables. Algo que todo desarrollador web debería tener presente.

Nuevos tipos de enlaces para el HTML5

8 Ene

+ 11

El gran pegamento que une esta red llamada Internet son los enlaces, con ellos podemos pasar horas frente al ordenador simplemente siguiendolos. Los robots encargados de obtener datos para los buscadores hacen exactamente lo mismo y se recorren las webs y todos sus enlaces para catalogar estratégicamente todo el contenido que se vaya encontrado por el camino y siguiendo los enlaces que haya dentro de él.

Por ese motivo, el nuevo HTML tendrá que ser un poco más descriptivo a la hora de definir el tipo de enlace que estamos enlazando. Para ello usaremos el atributo rel="" de nuestros enlaces que como hasta ahora veníamos haciendo para definir tags, alternate,…

La nueva especificación, aporta una serie de tipos definidos que nos ayudarán a marcar con un tipo definido al enlace que estamos marcando. De esta forma los robots encargados de catalogar la información tendrán algo más de información sobre los enlaces, perfeccionando las futuras busquedas y mejorando los futuros resultados.

Tipos de enlaces HTML5

alternate
Informamos de una forma alternativa de ver el contenido
archives
Enlace a una colección de articulos, documentos o otro tipo de material histórico
author
Enlace al autor del documento
bookmark
Enlace que se relaciona con la sección anterior más cercana.
contact
Enlace hacia una forma de contacto sobre el documento actual.
external
Indica que el enlace referencia una documento externo a nuestro servidor.
feed
Enlace del feed de sindicación del documento
first
Indica el primer documento de una serie de ellos.
help
Enlace hacia un sistema de ayuda sobre el documento.
icon
Importa un icono para representar el documento actual
index
Enlace que nos lleva a la tabla de contenidos o un listado de páginas de nuestro documento
last
Indica el último documento de una serie de ellos.
license
Enlace hacia la descripción de la licencia usada en nuestro documento.
next
Indica el siguiente document de una serie de ellos.
nofollow
Indica que el documento enlazado no es relevante referente al documento actual.
noreferrer
Requiere que el agente de usuario no envie una petición HTTP Referer si el usuario sigue el enlace.
pingback
Enlace de un pingback
prefetch
Indica que el destino debería ser cacheado previamente.(Gracias Martin por la traducción)
prev
Indica el documento anterior de una serie de ellos.
search
Indica que el enlace permite realizar una busqueda.
stylesheet
Importa una hoja de estilos
sidebar
Especifica que el documento enlace está previsto ser mostrado en sidebar del navegador (si este lo tiene)
tag
Indica que se trata de una palabra clave del documento
up
Indica el padre del documento actual.

Internet Explorer 8 y la interacción con el Sistema Operativo

28 Dic

+ 10

Este artículo ha sido la inocentada del 28 de Diciembre de 2007. Siento las molestias que haya podido originar. Si eres un desarrollador de Microsoft, por favor evita olvidar todo lo que hay en este post, no nos hagas sufrir 😀

Via Ajaxian, descubrimos lo que el equipo de desarrollo está haciendo con Internet Explorer 8. Visto que la carrera hacia los estandares es algo que no van a conseguir a corto plazo, han decidido apostar por el usuario y plagar a su navegador de una serie de funcionalidades que harán mucho más interesantes la interacción entre el usuario y el sistema operativo.

ieribbon1xv4.jpgieribbon3ph3.jpg

No hace falta decir que estas nuevas funcionalidades son exclusivas para Windows XP (SP3), Vista y superiores, sobre Internet Explorer 8. Que aunque el estado de dichas funcionalidades es de beta están recibiendo un alto grado de aceptación por parte de los desarrolladores nipones.

La magia de navigator.parent

La apuesta de Microsoft por las redes sociales lo han llevado a crear la propiedad parent para el objeto navigator, que nos permite acceder directamente al sistema operativo y en el cual podremos encontrar funcionalidades realmente interesantes como las que veremos a continuación.

var SO = navitator.parent;  

Interacción con los dispositivos de audio

Como era de esperar, la última vuelta de tuerca de M$ ha sido reforzar el Javascript de Internet Explorer 8, a los estandares HTML5 favoraciendo la interacción con los dispositivos del que el usuario tenga instalado. Con el método onChangeSong(), nuestro navegador nos avisará cuando Windows Media Player cambie de canción, algo realmente útil para aplicaciones sociales, tipo Twitter que nos informarán de la canción que están escuchando nuestros usuarios.

Ejemplo 

var SO = navigator.parent;
SO.onChangeSong = function(song) {
	alert("Título: " + song.title + "\nAutor: " + song.title + "\n Duración: " + song.duration);
}

Interacción con dispositivos de video

Los dispositivos de video tambien se verán afectados por estas mejoras, y ahora será posible conocer las películas que nuestro usuario tiene agregadas a las listas de reproducción de su Windows Media Player mediante una simple función, getMovieList(). De esta forma crear aplicaciones p2p que nos permitan conocer las películas que tiene cada usuario será coser y cantar.  Por desgracia no detecta películas .ogg, ni .mp4 optimizadas para iPhone/iPod Touch

var SO = navigator.parent;
SO.getMovieList = function(movie) {
	alert("Título: " + movie.title + "\nDirector: " + movie.director + "\n Formato: " + movie.format);
}

Interacción con MSN Messenger

La aplicación estrella de Microsoft, MSN Messenger, no iba a ser menos, dotada con varios método y propiedades es sin dida la funcionalidad más esperada y que más revuelo está causando entre la comunidad de desarrolladores ya que la interacción con este protocolo hasta ahora había sido algo realmente complicado y casi imposible de integrar con aplicaciones web. Ahora con este ser de funcionalidades, será realmente interesante y fácil desarrollar aplicaciones web basadas en MSN.

API

var SO = navigator.parent; // Sistema Operativo
var MSN = SO.messenger; // Messenger

MSN.status; // Estado del usuario (0=inactivo, 1=conectado, 2=ausente, 3=salí a comer)
MSN.statusText; //Texto del estado
MSN.nickname; //Nombre del usuario
MSN.email; //Email del usuari
MSN.image; //Imagen del usuario
MSN.lastConnect; // Timestamp de la última conexion
MSN.contactlist; // Array de contactos

var list = MSN.contactlist;
for each(var contact in list) {
	contact.nickname; //Nombre del contacto
	contact.email; //Email del contacto
	contact.image; //Imagen del contacto
	contact.lastConnect; //Ultima conexión del contacto
	contact.status; //Estado del contacto
	contact.statusText; //Estado del contacto
}

Por desgracia, estas mejoras únicamente estarán disponibles para usuarios Windows y sobre Windows XP (SP3)/Vista, por ese motivo tendremos que comprobar si tenemos estas funcionalidades disponibles antes de usarlas.

Ejemplo 

if (navigator.parent) {
// Código IE8
} else {
//código alternativo
}

[Via] / [Imagenes via Baluart]

Internet Explorer 8 pasa el Acid 2 test

20 Dic

+ 30

Nada más levantarme, la primera en la frente!! Al abrir el Google Reader veo esta noticia en Ajaxian, en la que informan que Internet Explorer 8, la versión interna de Microsoft, ha pasado el Acid2 Test. La prueba estrella de WebStandars

Acid2 Test

Navegadores como Opera, Firefox 3.0 ya forman parte de la poco extensa lista de privilegiados capaces de pasar el famoso test con un aprobado. Ahora Internet Explorer, el más alejado a estos en cuanto a validación de estandares, se está abriendo camino en esa dirección. Y esto beneficiará a todo el mundo haciendonos entrar, poco a poco, en un mundo más «estandar».