Intelygenz Labs

Jugando con la etiqueta VIDEO de HTML5

noreply@blogger.com (Intelygenz Labs) — Tue, 05 Apr 2011 14:53:00 +0000

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

noreply@blogger.com (Manuel Martin-Vivaldi) — Wed, 19 Aug 2009 15:02:00 +0000

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

Obteniendo el icono cuadrado de usuario en Facebook

noreply@blogger.com (humphr3y) — Thu, 12 Mar 2009 11:57:00 +0000

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.

noreply@blogger.com (MaRiaN) — Thu, 19 Feb 2009 12:22:00 +0000

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

noreply@blogger.com (José Pérez López) — Thu, 29 Jan 2009 14:36:00 +0000

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

Hola Mundo en Silverlight

noreply@blogger.com (Jose Antonio Gil) — Mon, 10 Nov 2008 13:11:00 +0000

Vamos a ver como podemos crear una sencilla página utilizando Microsoft Silverlight.

Para ello, crearemos el típico "Hola Mundo", utilizando para ello la versión 1.0 de Silverlight. Más adelante publicaremos un ejemplo utilizando la versión 2.0

Para crear proyectos en Silverlight, normalmente usaremos Expression Blend, el cual va por su versión 2. Tambien podemos utilizar Visual Studio 2008, en conjunto con Blend, y Eclipse, junto con los plugins adecuados, aunque en realidad nos sirve cualquier editor de texto, ya que todo se basa en tags y propiedades similares al XML.

Sin embargo, necesitaremos cierto codigo de inicializacion que Blend nos genera automáticamente, de ahi que sea la herramienta mas recomendable para iniciarse en esta tecnología.

Para empezar, crearemos un archivo llamado, por ejemplo, 'HolaMundo.xaml'. Este será archivo donde añadiremos los elementos graficos de la aplicación.

Para empezar, crearemos un elemento del tipo 'Canvas', que es el contenedor principal de Silverlight 1.0, con el siguiente código:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Page" Background="White"
Width="640" Height="480">

</Canvas>

En el especificamos el tamaño con los atributos 'Width' y 'Height', el color de fondo 'Background' y el nombre del elemento 'x:Name'.
Si hemos utilizado Blend, nos creará automaticamente el código anterior, por lo que será mas sencillo la realización del ejemplo.

Posteriormente, añadiremos nuestro mensaje 'Hola Mundo'. Para ello, utilizaremos un elemento de tipo 'TextBlock', que es el que nos permite poner texto. Este elemento y todos los que queramos incluir en la aplicación, deberán ir dentro del canvas principal.

<TextBlock Name="miTexto" Canvas.Left="250" Canvas.Top="200" Foreground="#FFFF0000" Text="Hola Mundo"/>

Utilizamos los atributos 'Canvas.Top' y 'Canvas.Left' para especificar la posición del elemento dentro del canvas contenedor, asi como el color del texto, donde las primeras dos cifras hexadecimales indican la opacidad del elemento (00 = transparente, FF = opaco) y el resto de pares de cifras indican el color RGB. Por último, el elemento atributo 'Text' indica el texto que queremos mostrar.

Una vez hecho esto, este seria el aspecto que tendria nuestro fichero '.xaml'.

Con esto tendremos finalizado nuestro fichero principal, lo que veremos en pantalla.

Sin embargo, para que todo funcione correctamente, necesitaremos los siguientes ficheros:
- Default.html, es la página contenedora, donde ira incrustado el elemento Silverlight y que incluye las librerias Javascript que vienen a continuación.
- HolaMundo.xaml.js, donde se incluye el código Javascript para controlar nuestra aplicación
- Silverlight.js, que incluye código de inicialización del plugin y del elemento Silverlight.

Como indicaba anteriormente, estos últimos ficheros son generados automáticamente por Blend, de ahi que sea recomendable su uso cuando uno se esta iniciando en esta tecnologia.

Para probar nuestra aplicación, podremos hacerlo desde el propio Blend, pulsando F5 o a través del menú 'Project/Test site'. O tambien abriendo directamente en el navegador nuestra página 'Default.html'

IconApp.com

noreply@blogger.com (Jonas Da Cruz) — Thu, 06 Nov 2008 18:51:00 +0000

Utilizando tecnología Adobe AIR hemos creando un tipo de aplicación que basa su utilidad en proporcionar pequeñas soluciones, utilidades y comodidades integradas directamente en el escritorio de trabajo.

http://www.iconapp.com

Hello World en BlackBerry Storm

noreply@blogger.com (Rubén Lafuente) — Tue, 04 Nov 2008 12:53:00 +0000

En este post describiremos cómo crear un simple aplicación Hello World! para la BlackBerry 9530 Storm (con pantalla táctil).

Para el desarrollo de este ejemplo se ha usado el entorno de desarrollo BlackBerry JDE en su versión 4.7.0

Necesitaremos crear:
- Una clase HelloWorldDemo, que será la base de nuestra aplicación, y que extenderá de UiApplication
- Una clase HelloWorldScreen, que será la pantalla que se mostrará en la BlackBerry, y que extenderá de MainScreen. La pantalla contendrá un título, un texto y un mensaje tipo Alert al cerrar la aplicación.

De esta manera, el archivo HelloWorldDemo.java tendrá el siguiente código:


//paquete al que pertenece
package com.rim.samples.device.helloworlddemo;

//importaciones
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.RichTextField;

//clase de nuestra aplicación
class HelloWorldDemo extends UiApplication
{
/**
* Entry point for application.
*/
public static void main(String[] args)
{
// Create a new instance of the application.
HelloWorldDemo theApp = new HelloWorldDemo();

// To make the application enter the event thread and start processing messages,
// we invoke the enterEventDispatcher() method.
theApp.enterEventDispatcher();
}

/**
* The default constructor. Creates all of the RIM UI components and pushes the
* application's root screen onto the UI stack.
*/
private HelloWorldDemo()
{
// Push the main screen instance onto the UI stack for rendering.
pushScreen(new HelloWorldScreen());
} 
}


//clase de la pantalla
//al extender de MainScreen, nos ahorramos controlar los eventos habituales en estas aplicaciones,
//aunque como es natural se pueden sobreescribir (en este ejemplo sobreescribiremos el método close)
final class HelloWorldScreen extends MainScreen
{

//constructor
HelloWorldScreen()
{
// Add a field to the title region of the screen. We use a simple LabelField
// here. The ELLIPSIS option truncates the label text with "..." if the text
// is too long for the space available.
LabelField title = new LabelField("Hello World Demo (Título)" , LabelField.ELLIPSIS  LabelField.USE_ALL_WIDTH);
setTitle(title);

// Add a read only text field (RichTextField) to the screen. The RichTextField
// is focusable by default. In this case we provide a style to make the field
// non-focusable.
add(new RichTextField("Hello World! (Texto)" ,Field.NON_FOCUSABLE));
}

/**
* Display a dialog box to the user with "¡Aaaadiós!" when the application
* is closed.
*
* @see net.rim.device.api.ui.Screen#close()
*/
public void close()
{
// Display a farewell message before closing application.
Dialog.alert("¡Aaaadiós!");
System.exit(0);

super.close();
} 

} //fin clase

Para probar nuestro ejemplo:
- Dentro del JDE, haremos click en Debug -> Go, o pulsaremos F5
- Se abrirá el simulador
- En el teléfono, pulsaremos la tecla de menú (logotipo de BlackBerry)
- Pulsaremos Downloads
- Buscaremos nuestra aplicación Hello World

Imagen:

AS3 Embeber tipografías con negrita en tiempo de compilación

noreply@blogger.com (José Pérez López) — Tue, 07 Oct 2008 16:57:00 +0000

AS3 es el acrónimo de ActionScript 3 el nuevo lenguaje de programación Flash/Flex, con una redefinición completa del lenguaje, orientación a objeto y sobre todo con la separación de sdk del ide flash y mayor aproximación al estándar ECMAScript (ECMA 262)

Lo que vamos a hacer es decirle al compilador flex que incluya ("embed") las fuentes dentro de un compilado swf, podemos utilizar las fuentes desde ese mismo swf o hacer una carga dinámica de las mismas desde otro aplicativo, aunque como diría Conan el cimmerio esa es otra historia.

Este proceso lo realiza el compilador flex así que no lo intentes desde el IDE de flash.

Para poder utilizar negrita con fuentes embebidas tenemos que registrar tanto la fuente con los caracteres normales como la fuente con los caracteres en negrita.

En el caso de la negrita tenemos que indicar el fontWeight= "bold", si lo indicamos en cuanto cargamos un juego de caracteres que no tiene negrita, al compilar obtendremos un error:

"Error: exception during transcoding: Font for alias 'XXXX' with bold weight was not found at: file"

Las fuentes tienen que ser TrueType y la ruta al fichero .ttf absoluta o relativa al directorio donde esta el fuente (el .as).

En ambas etiquetas Embed pondremos el mismo FontName, si no embebemos la fuente en modo negrita no tendremos ningún error simplemente se ignorará nuestra etiqueta o nuestra indicación de formato negrita.

package Demos {

import flash.display.Sprite;
import flash.text.AntiAliasType;
import flash.text.*;

public class EmbedFontDemo extends Sprite {

[Embed( source = "./assets/FUTURA.TTF"
, fontWeight = "normal", fontName = "Futura"
, mimeType = "application/x-font-truetype"
)
]
public static const Futura:Class;

[Embed( source = "./assets/FUTURAB.TTF"
, fontWeight = "bold", fontName = "Futura"
, mimeType = "application/x-font-truetype"
)
]
public static const FuturaB:Class;

public function EmbedFontDemo():void {
var Lorem:String = "Lorem ipsum dolor sit <b>amet</b>, consectetur adipisci elit...";
var _Texto:TextField = new TextField();
_Texto.embedFonts = true;
_Texto.antiAliasType = AntiAliasType.ADVANCED;
_Texto.autoSize = TextFieldAutoSize.LEFT;

this.addChild(_Texto);
_Texto.htmlText = Lorem;
Font.registerFont(Futura);
Font.registerFont(FuturaB);

var FormatFutura:TextFormat = new TextFormat();
FormatFutura.font = "Futura";

_Texto.setTextFormat(FormatFutura);

}
}
}

Puedes ver como queda el ejemplo aquí

Probado en:

FlashDevelop 3.0.0 Beta9 for Microsoft .NET 2.0 Runtime con sdk flex_sdk_3.0.3.2490_mpl