Archive for Mayo, 2010

Generador de botones CSS

Este link proviene de un tweet pero me pareció útil, simpre tengo problemas cuando quiero implementar botones simples en algún sitio. Utilizando éste generador se puede crear botones sólo utilizando CSS. el generador es visual, donde eliges los colores, la tipografias,etc y te devuelve el css listo para impletar.

El CSS es algo como lo siguiente:

.button { border-top: 1px solid #96d1f8; background: #d66565; background: -webkit-gradient(linear, left top, left bottom, from(#7d3e9c), to(#d66565)); background: -moz-linear-gradient(top, #7d3e9c, #d66565); padding: 8.5px 17px; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #cdf227; font-size: 13px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .button:hover { border-top-color: #28597a; background: #28597a; color: #c400c4; } .button:active { border-top-color: #030303; background: #030303; }

acá dejo el link: http://css-tricks.com/examples/ButtonMaker/#

Acerca del HTML5 Video debacle

La verdad que si estoy sorprendido con los reproductores de video para HTML5 y como va ganando terreno rápidamente. Pero también me parece que para que la etiqueta video de html5 reemplace a Flash tiene que terminar de especificarse. ¿A qué me refiero? Bueno por ejemplo en html5 no está especificado como hacer streaming, lo que significa que no podemos mostrar algo en vivo, grabar, etc.
Segundo: se necesita definir un codec, en éste momento se debate sobre si usar h264 o OGG. Ambos son excelente codecs pero Firefox y Opera se juegan por OGG cuando Safari y IE van por H264. Google es el abogado del diablo y utiliza ambos. Entiendo la razón por la cual FF y Opera, que viniendo del purismo del open source) utilicen OGG, pero ésta opción no es muy práctica hoy en día cuando la mayoría de los contenidos online están codificados utilizando h264. Y esto no quiere decir que la opción de IE y Safari es la acertada, en cualquier momento puede pasar que H264 haga lo mismo que hizo Unisys a principios de los 90 con el formato Gif y todo tengamos que empezar a pagar derechos por utilizar ese codec.
Lo último que veo que falla en la especificaciones de html5 es el fullscreen. Si bien hay formas de buscarle la vuelta no es algo que éste especificado en el estándar con acceso desde la API. Tener acceso al video fullscreen es algo vital en ésta era de miles de distintos tipos y tamaños de displays que van desde minúsculos a LCD de decenas de pulgadas.

Realmente espero que esto se vaya solucionando de a poco y que como usuarios no tengamos que preocuparnos que explorador o dispositivo tengamos que usar para entrar a determinado sitio. Como desarrolladores también estaría bueno saber que pase lo que pase decidamos lo que decidamos nuestros usuarios puedan acceder a nuestros contenidos y tengamos acceso a una tecnología, y sin necesidad de hacer ningún artilugio, podamos publicar fácilmente nuestro contenido.

Probando !

Uds. sabrán que están aparecionedo las primeras demos de reproductores de video para html5 lo cual es muy interesante, se me ocurrió chequear el uso de recursos de CPU de dos ejemplos, y compararlo con el uso de recursos utilizados en una pagina de nuestro desarrollo en donde tenemos reproductores Flash.

Descripción del equipo de prueba:
AMD Athlon 64 x2 Dual Core Processor 3600+ 2.01 Ghz
Ram 2.00 GB
Sistema OP Win 7 64bit
Uso CPU estado de reposo: de 0% a 12%

Ejemplo 1 – Video reproducido con HTML5
URL:  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
Duración video: 10 seg
Uso CPU: 53 % constantes.

Ejemplo 2 – Video reproducido con HTML 5
URL: http://videojs.com/
Duración: 47 seg
Uso CPU: entre 35 – 40 % constantes y si se hace rollover para ver el reproductos salta a 60 %

Ejemplo 3 – Video reproducido con Flash
URL: http://www.budokansports.com.ar/
Esta página tiene un banner animado swf loopeado y un video de reproductor
Duración video reproductor: 50 seg
Uso CPU: sin dar play al reproductor solo banner swf:  cuando se realizan las transiciones tiene picos de no menos de un seg de 25 %, cuando le damos play el uso del cpu no es constante y tiene picos 25% a 60%. Hay que tener en cuanta que hay dos videos por asi decirlo.

Ejemplo 4 – Video reproducido con Flash
URL: http://www.starbene.com/home.php?seccion=novedades
Video inmerso en una interfaz completamente hecha en Flash sistema de carga streaming !
Duración video: mas de 50 seg
Uso CPU: Constante 25%

Creo que estas pruebas son bastante positivas ya que el hecho de que se quiera descartar a Flash como plataforma no es del todo un problema de recursos, para lo que es reproducción de video.
Creo que el problema va a radicar en la frma en que los desarrolladores programen, ya que en javascript que va a ser la base de la interactividad que se le va a otorgar a HTML5 se pueden cometer errores muy grabes que van a lleva a un exceso del uso del CPU a igual que flash.

Seguiremos probando.
La próxima mediremos alguna aplicación mas compleja con mayor niver de interactividad.

InAppSettingsKit panel de seteos para iPhone

Encontré un framework para crea una pagina de settings dentro de nuestra aplicación para iPhone muy fácil de usar la app  debe incluir Settings.bundle por lo menos con un Root.plist para especificar la conexión de seteos y los elementos interfaz de usuario con los NSUserDefaults.

Más info en: http://www.inappsettingskit.com/

Una cosa que venimos ofreciendo a nuestros clientes de Grupo Quantum es la posibilidad de portar sus actuales website a webapps para distintos dispositivos móviles como ser el iPhone, Android, RIM, Window Mobile o Symbian. Dentro de estas tecnologías y al haber tantos dispositivos surge el problema que tecnología utilizar, por ejemplo si hacer una aplicación para iphone o para Android. Con ésto en mente hemos encontrado un framework llamado Rhodes que es open source y sirve para crear aplicaciones nativas en Ruby para la mayoria de los smartphones. Lo mejor de todo es que tiene acesso a la capacidades nativas del dispositivo como ser el GPS, los contactos o la cámara.

Más información en el sitio de Rhodes: http://rhomobile.com/products/rhodes/

Javascript & HTML5 Video Player

Realmente pensé que iba a pasar más tiempo hasta que empiecen a aparecer éste tipo de soluciones. Pero parece que la batalla está mucho más cerca de lo que me imaginaba. Hoy encontre un reproductor de video que solo usa HTML5 y Javascript para mostrar un reproductor de video qu enada tiene que envidiarle a Youtube y qque ademñas es liviano ya que no usa imagenes. Es 100% customizable mediante CSS. Es soportado por Firefox, Chrome y Safari por ahora. Y utiliza los formatos de videos que veníamso nombrando anteriormente en distintos post: H264, OGG y el nuevo de Google WebM. Si bien estoy sorprendido, hay que darle tiempo y ver como funciona esto con carga en el servidor, como hacer streaming, como embeber para poder publicar el video en un sitio diferente, etc.
Para mas información y ver una demo sigan el link: http://videojs.com/

Chrome sale de beta para Mac

El navegador Chrome es uno de is favoritos, principalmente por la velocidad. Apenas salió me sorprendió cuanto más rápido renderizaba una pagina en comparación con sus competidores. La principal causa por la cual no podía migrar totalmente a Chrome era por la cantidad de plugins que existen para Firefox. Eso empezó cambiar este año con la incorporación de add-ons para Chrome, con ésto Chrome estaba muy cerca de Firefox ( el menos en posibilidades). De nuevo, mi problema era que el mayor tiempo en el que estoy en una computadora es una Mac, hasta ayer Chrome para Mac era sóilo una beta. Afortunadamente los chicos de google han podidos planchar las últimas arrugas que tenía Chrome en Mac y ya está disponible desde el siguiente enlace: http://www.google.com/chrome/

¿Cuanto más rápido es Chrome? Según Google es tan rápido como un disparo o un rayo, vean el siguiente video:

Google font API

Una de las cosas que se mostraron en el primer dia de Google I/O 2010 fue la nueva API de google para usar web fonts en sitios. El método consiste en incluir tipografías desde el directorio de fuentes de Google. La verdad que es muy muy fácil de utilizar, sólo hay que insertar una línea de código que inserta un hoja de estilos CSS alojada por Google. Es importante aclarar que funciona en la mayoria de los navegadores y que se renderiza como texto seleccionable.

Por ejemplo con el siguiente codigo:

 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<h1 style="font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
">Ahora puedo utilizar cualquier tipografía!</h1>
</link>

Obtengo el siguiente resultado:

Ahora puedo utilizar cualquier tipografía!


Observar que el texto es selecionable y que incluso se puede agregar sombrar u otros efectos.

Más información en la página oficial de google: http://code.google.com/intl/es/apis/webfonts/docs/getting_started.html

Google I/O día dos (Froyo)

Todos esperabamos el días dos con muchas ansias, si bien en el primer día se había develado varías cosas interesantes en el horizonte de la compañía que virtualmente rige nuestras vidas, había un par de rumores que todavía no habían sido confirmados y nos carcomía por dentro.
El primer rumor y el que más me intersaba a mi en particular era la nueva versión de Android. Bueno afortunadamente lanzaron la versión 2.2 Froyo (frozen yoghurt, – yoghurt helado) de su estrella más brillante que está opacando al Iphone.
Lo primero que recalcaron de esta versión fue: Read the rest of this entry

Google I/O día uno.

Google I/O es la conferencia anual en la que google presenta sus productos, sus ideas y tendencias.
La estrella del día uno fue wl app store de google y HTML5. Varias compañías fueron pasando y mostrandos sus soluciones en html5 y como ven el futuro de la web. Read the rest of this entry