Desde principios de este año el servicio está disponible en 16 países (incluido España) y fue uno de las novedades más interesantes del CES 2009, ganando varios premios, y ha vuelto a ser bastante comentado en el CES 2010.

Web-enabled TV

Unir el televisor e Internet es el santo grial de la era digital, y anteriormente otras empresas lo han intentado: Apple con Apple TV, Microsoft con Xbox Live, Tivo, etc. A mi parecer, lo más interesante en este caso es que no es necesario un dispositivo añadido como en los anteriores, ya que el televisor integra los accesorios necesarios para conectar la televisión con Internet. En concreto, según el modelo, integran Wifi y un procesador Intel Media Processor CE y una versión modificada de Yahoo! Widget Engine sobre un sistema operativo Linux.

El potencial de los televisores web-enabled es muy alto, según un estudio de la consultora iSuppli actualmente hay alrededor de 90 modelos de televisores web-enabled y en el año 2013 habrá alrededor de 88 y 90 millones en los hogares, es decir alrededor del 40% del mercado mundial.

Yahoo!^® TV Widgets

En el caso de la solución de Yahoo!, el contenido web se visualiza al mismo tiempo que el programa de televisión – por lo que es posible visualizar los mensajes del twitter sin perder de vista la cara de la presentadora.

Desde un punto de vista de desarrollo e interacción el sistema permite tres vistas: Snippet, Sidebar y Fullscreen.

• Snippet: esta vista o botón permite ver información estática (por ejemplo una imagen) o dinámica (el valor actual de una acción en bolsa) en el menú (Widget Dock).
• Sidebar: esta segunda vista es la típica de un widget y permite acceder a diferentes contenidos como por ejemplo la previsión del tiempo durante varios días.
• Fullscreen, esta vista permite visualizar contenido web a pantalla completa. Existen dos tipos, la primera se sobrepone a la imagen de la televisión (por ejemplo ver los resultados deportivos en tiempo real) y la segunda sustituye completamente a la emisión televisiva. Esta última es la que permite jugar juegos y ver películas ondemand a pantalla completa.

Como hemos visto el potencial para los proveedores de contenido es muy alto, ya que es posible integrar el contenido web sobre la imagen de la televisión (p.ej. periódicos o redes sociales) o a pantalla completa (video on demand).

Además, hay rumores que Yahoo! quiere crear una tienda de widgets, siguiendo el concepto de Apple para las aplicaciones iphone, con lo que los proveedores de contenido tendrían una forma adicional de ingresos.

Desarrollo de Widgets

Al basarse en tecnología web (JavaScript, XML, etc) es relativamente sencillo crear Widgets para la plataforma de Yahoo! Connected TV. Para facilitar el desarrollo, Yahoo! ha creado un Kit de desarrollo (WDK) que puede descargarse de manera gratuita. Este kit incluye, entre otros, un extenso manual de desarrollo y un paquete .deb para instalar el Yahoo! Widget Engine Widget Development Kit (por lo tanto será necesario un sistema Debian o Ubuntu  – en caso de no tener un sistema Linux,  es posible instalarlo en una imagen virtual en VMware o VirtualBox).

Vídeo promocional

Yahoo!’s Design Pattern Library

Yahoo!’s Design Pattern Library, es una librería de patrones de diseño. Actualmente dispone de 56 diseños que pueden ayudar mucho a los desarrolladores y diseñadores al diseñar el interfaz y aumentar la usabilidad.

Excepcional Performance

Excepcional Performance, es una sección dedicada a la optimización del rendimiento de webs. Además de consejos, dispone de vídeos e información sobre la extensión Yslow! para Firebug, la cual permite analizar el rendimiento de una web desde el navegador Firefox.

YUI Library

YUI Library, es una librería de utilidades escritas en javascript y css para construir aplicaciones interactivas (RIA). Personalmente prefiero jquery como javascript framework, pero como en las diferentes distribuciones de Linux, cada una tiene sus pros y contras, y YUI es una biblioteca estable y potente – algo que queda demostrado gracias a que Yahoo! la usa en todas sus webs.

Astra

Astra, es una librería de componentes para Adobe Flash y Flex pensado para los desarrolladores Flash & Actionscript que permite construir aplicaciones interactivas (RIA).

Lenguajes de programación

En los centros de lenguajes de programación encontrarás tutoriales, articulos, foros y ejemplos de código de los siguientes lenguajes de programación: Flash, Java, JavaScript, .NET, PHP, Python, Ruby y Silverlight.

API y servicios web

Por último recordar que en este portal encontraremos toda la información y ejemplos relacionados con las más de 35 APIs y servicios web de Yahoo!, como por ejemplo Flickr, Yahoo! Maps. De todos ellos me gustaría destacar dos:

1. Pipes, una aplicación web que permite crear mashups de datos a través de un interfaz gráfico y diversas fuentes y formatos (rss, json, …)
2. Yahoo! Connected TV Platform, una plataforma para poder crear widgets para televisores Sony®, VIZIO®, Samsung®, LG®. Inicialmente solo estaba disponible para EE.UU, pero desde principios de este año el servicio está disponible para 16 paises, entre los que está España.

Análisis

Para analizar fácilmente la velocidad de carga de nuestro sitio disponemos básicamente de dos extensiones para Firefox/Firebug:

1. Yslow, creada por Yahoo!
2. Pagespeed, creada por Google

Estos complementos analizan múltiples factores y nos dan sugerencias para optimizar la página analizada. Las dos extensiones son muy parecidas tanto en las pruebas que ejecutan y las sugerencias que indican, pero en Yslow destaca la integración de Smush.it™, un optimizador de imágenes. En cambio en Pagespeed, es muy destacable la opción de disponer, en caso de sugerencia, de las alternativas minified u optimizadas de las css y los js, como también analizar e indicar los selectores css poco eficientes.

Optimización

Dependiendo de cada servidor y aplicaciones instaladas tendremos que optimizar diferentes factores, pero a modo de ejemplo, en el servidor de este blog era necesario optimizar los Cache-Control Header y la compresión gzip. Tras buscar en Google y leer varios post realice los siguientes pasos para optimizar el servidor:

1. Compresión gzip con mod_deflate

Primero hay que activar mod_deflate desde la linea de comando

a2enmod deflate

Luego editar el archivo deflate.conf que se encuentra en /etc/apache2/mods-available/deflate.conf

        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE text/javascript
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE image/x-icon
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/x-javascript
 
        AddOutputFilterByType DEFLATE application/x-httpd-php
        AddOutputFilterByType DEFLATE application/x-httpd-fastphp
        AddOutputFilterByType DEFLATE application/x-httpd-eruby
 
        DeflateCompressionLevel 9
 
# Netscape 4.X tiene ciertas limitaciones
        BrowserMatch ^Mozilla/4 gzip-only-text/html
 
# Netscape 4.06-4.08 tiene limitaciones
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
 
# MSIE enmascarado como Netscape
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
# Las siguientes lineas sirven para probar que la configuración funciona, en producción hay que comentarlas
 DeflateFilterNote Input instream
 DeflateFilterNote Output outstream
 DeflateFilterNote Ratio ratio
 LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
 CustomLog /var/log/apache2/deflate_log deflate

2. Expires headers mediante mod_expires

Primero activamos el modulo

a2enmod expires

Luego editamos o creamos el archivo expires.conf en el directorio /etc/apache2/mods-available/expires.conf

#        ExpiresDefault "access plus 2 months"
 
        ExpiresByType image/x-icon "access plus 1 month"
        ExpiresByType image/png "access plus 1 month"
        ExpiresByType image/jpg "access plus 1 month"
        ExpiresByType image/gif "access plus 1 month"
        ExpiresByType image/jpeg "access plus 1 month"
        ExpiresByType application/pdf "access plus 1 month"
        ExpiresByType audio/x-wav "access plus 1 month"
        ExpiresByType audio/mpeg "access plus 1 month"
        ExpiresByType video/mpeg "access plus 1 month"
        ExpiresByType video/mp4 "access plus 1 month"
        ExpiresByType video/quicktime "access plus 1 month"
        ExpiresByType video/x-ms-wmv "access plus 1 month"
        ExpiresByType application/x-shockwave-flash "access 1 month"
 
        ExpiresByType text/css "access plus 1 hour"
        ExpiresByType text/javascript "access plus 1 hour"

3. Desactivar ETags

Añadir las siguientes lienas al archivo /etc/apache2/apache2.conf

Header unset ETag
FileETag None

4. Reiniciar Apache para activar los cambios

/etc/init.d/apache2 restart

Ya solo queda volver a comprobar la página con las extensiones de Firebug y comparar los resultados.

Enlaces de interes

• Recomendaciones sobre rendimiento web de Google
• Recomendaciones de Yahoo!
• Tutorial sobre Apache2, mod_deflate, mod_expires y ETag
• Tutorial sobre ETag (Esta web tiene otros posts relacionados con optimización de Apache)