Jugando con la etiqueta VIDEO de HTML5

Desde hace un tiempo atrás, se ha hablado mucho sobre el tema de poder incluir vídeos en nuestros sitios web sin necesidad de usar plugins externos, es decir, evitar tener que usar flash a la hora de poder tener vídeos en nuestro sitio web.

Hace poco se abrió una nueva posibilidad con la etiqueta VIDEO de HTML5. Ésto nos abre una posibilidad enorme de poder usar nuestros vídeos sin necesidad de usar programas de terceros.... o no?

Tras varias pruebas realizadas con los diferentes codecs de video y los diferentes navegadores existentes, podemos representar con estos datos la compatibilidad entre ambos:

- Google Chrome: Acepta formatos mp4, ogv y webM

- Safari para windows: Acepta formato mp4

- Firefox 3.6 y Firefox 4: Acepta formato ogv

- Ópera 11: Acepta formatos ogv y webM

- Internet Explorer 9: Acepta formatos mp4 y webM

Con esta comparativa se puede llegar a la conclusión de que a día de hoy, no se puede usar un único formato para el vídeo, dado que no todos los navegadores concuerdan en uno, si no más bien lo contrario.

Se añade como agravante que para que Internet Explorer 9 pueda reproducir vídeo en formato webM se necesita de un plugin adicional que no viene instalado por defecto.

Podemos ver que para usar la etiqueta VIDEO de HTML5 en nuestros sitios web, debemos usar el vídeo por duplicado para que dependiendo del navegador cargue uno u otro, con el inconveniente que incluye eso para el tema de almacenamiento en el servidor..

Como conclusión, recomendamos el uso de flash para usar vídeos en web, por lo menos hasta que todos los navegadores acepten al menos un formato común de vídeo.

No obstante, se recomienda usar este tipo de métodos para webs exclusivas para dispositivos móviles, como sistemas iOS (iPhone, iPad, iPod) o sistemas Android, donde la experiencia es plena para el formato mp4 en ambos casos

Menús desplegables CSS en Internet Explorer 6

Las posibilidades de las hojas de estilo CSS son sorprendentes, y en especial la posibilidad de hacer menús desplegables sin una sola línea de JavaScript.

La mejor solución es usar el creador de menús de: purecssmenu.com

El editor te permite crear tu propio menú con las distintas secciones e ilimitados niveles de navegación, diferentes plantillas disponibles con estilos que puedes personalizar y una vez terminado te permite descargar un ZIP con un único fichero CSS y los pocos gráficos necesarios. Y lo mejor que todo es que funciona en prácticamente todos los navegadores modernos, incluso IE6.

Pero tanta maravilla se acaba cuando tienes que viajar al pasado porque a alguien se le ha ocurrido que el menú CSS tiene que tener un diseño "particular" aparte de funcionar también en Internet Explorer 6 (sí, en IE6 en el año 2009)

Pero los caminos de Internet son infinitos y con unas líneas de código JavaScript exclusivas para Internet Explorer 6 se soluciona el problema. Añadimos eventos con attachEvent a los elementos conflictivos que seleccionamos mediante getElementsByTagName y sus correspondientes childNodes

Este código es exclusivo para los menús desplegables gratuitos de cssmenumaker.com (aunque no está probado en toda la colección), pero debe ser fácil de adaptar y aprovechar para otros menús o para parchear otro tipo de problemas que puedan darse en IE6.

Puedes descargar el código con instrucciones en esta librería ie6_menufix.js [v1.00]

En caso de problemas con la descarga, la tienes también en formato ZIP

PR: wait... I: wait... L: wait... LD: wait... I: wait... wait... Rank: wait... Traffic: wait... Price: wait... C: wait...

Obteniendo el icono cuadrado de usuario en Facebook

A la hora de crear nuestras aplicaciones, cuando queramos meter el icono del usuario en facebook, normalmente nos devuelve una imagen que no es proporcional a la vista. Esto es porque cuando añades la imagen de usuario en la ficha, hace una reducción proporcional de la misma. Es decir, si tu imagen no es cuadrada, la miniatura de la misma tampoco lo será.

Asi cuando intentamos devolver una serie de imágenes de usuarios, cada uno saldrá con un alto diferente (el ancho afortunadamente es igual siempre). ¿Como podemos solucionar esto?... es bien sencillo.

Normalmente para obtener la imagen del usuario usamos un trozo de código como el siguiente:

<fb:profile-pic uid="'.$fkIdUser.'" linked="true" />

Y vemos que nos sale una cosa así:



Bien, esto nos devuelve el tipico IMG src con la imagen guardada en servidor. Pero como ya hemos comentado antes, no todas tienen la misma altura. Si queremos que todas sean iguales, la API de Facebook ya se ha ocupado de nosotros y no hace falta que andemos liados con estilos para poder obtener dicha imagen, solo tendremos que añadir un parámetro más (al igual que el linked="true" del ejemplo anterior).

El parámetro a añadir se llama size y tendrá que tener el valor square. Quedaría nuestro código por tanto de esta manera:

<fb:profile-pic uid="'.$fkIdUser.'" linked="true" size="square" />




Luego si queremos añadirle un marco para que quede más chulo, podemos aprovechar las css por defecto que vienen en todas las aplicaciones, enmarcando la imagen en una capa DIV con el siguiente estilo:

<DIV class="wallimage photo_borders"><fb:profile-pic uid="'.$fkIdUser_4.'" linked="true" size="square" /></DIV>





Otros tamaños para tus imágenes

Al igual que hemos visto que size="square" te realiza las fotos en tamaño cuadrado de 50x50, tenemos otros valores para el parámetro size que nos darían otro tipo de tamaño para las imágenes. Son estos:

• thumb (t): nos devuelve una imagen de 50 pixels de ancho y su altura amoldada (wide size)
• small (s): nos devuelve una imagen de 100 pixels de ancho y su altura amoldada (wide size)
• normal (n): nos devuelve una imagen de 200 pixels de ancho y su altura amoldada (wide size)
• square (q): nos devuelve una imagen de 50x50 pixels

Salu2!

Intelygenz trabaja para el Centro de Innovacion de BBVA.

Intelygenz ha desarrollado para BBVA Centro de Innovación, un prototipo de widget para la plataforma Yahoo!Go 3.0 (actualmente disponible para más de 330 móviles en el mundo http://es.mobile.yahoo.com/go/phones
El prototipo permite, a cualquier usuario que tenga el widget instalado, encontrar los cajeros más cercanos a su posición, con una descripción detallada de los servicios disponibles. El sistema de geolocalización, sea por GPS o por celdas, está resuelto por la plataforma que elige el tipo de geolocalización para devolvernos directamente las coordenadas evitando al programador este laborioso trabajo. Una vez tengamos las coordenadas en nuestra posesión, basta cargar los mapas de Yahoo! y plasmar en ella la posición de los cajeros.

El desarrollo de este prototipo ha sido increíblemente rápido (unos dos días) para llegar a una versión de producción en funcionamiento. Aunque la parte de desarrollo para encontrar la información y la localización de los cajeros ya existía, el tiempo que ahorramos gracias a la utilización de la geolocalización del dispositivo y el uso de los mapas de Yahoo! es muy considerable.

La única pega que le podríamos reprochar es la limitación y la falta de personalización de la interfaz, pero seguro que es algo que con el tiempo se mejorará.

En conclusión, es una línea de trabajo con muchas posibilidades sobre la que seguiremos investigando ;-).

Problemas al posicionar DisplayObject (ej. Sprite) en una posición NaN

Uno de los cambios más sutiles con los que nos hemos encontrado entre las versiones 9 y 10 del player de flash es como se posiciona un DisplayObject cuando se le indica un valor NaN (Not a Number) como x ó y .

Hasta ahora el player posicionaba el objeto en la posición cero sin embargo con el nuevo player -que ya está presente en aproximadamente el 60 % de los navegadores- lo posiciona en un número negativo muy muy grande.

Realmente casi sería de agradecer que el player lanzara una excepción ya que parece raro que nadie quiera posicionar algo en la posición NaN sino que se dan cuando multiplica cero infinito (división por cero) o en caso de errores de casting etc.

Así este código muestra un cuadrado rojo en flash player 9 y nada en el 10 (salvo que hagas un scroll hasta la posición -107374182.4)


package {
import flash.display.Sprite;
public class Pruebas extends Sprite
{
public function Pruebas(){
var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xFF0000);
sprite.graphics.drawRect(0,0,10,10);
sprite.graphics.endFill();
sprite.x = NaN;
addChild(sprite);
}
}
}


Así que si de pronto tu aplicación se ha quedado sin contenidos es una de las cosas que tendrás que verificar








Este hecho en adobe está reportado como bug, así que puede que nos encontremos con más cambios de comportamiento en el futuro

http://bugs.adobe.com/jira/browse/FP-612