Posts Tagged ‘html5’

Initializr, plantilla HTML5 en 15 segundos!

Escrito por Oriol Navascuez en 17/02/2011

Poco a poco ya se va haciendo eco y se va usando en más y más webs el HTML5. Pero aun le queda un largo camino que recorrer hasta que no veamos versiones completas de este. Tan largo, que la W3C anunció hace a penas 4 días que el proceso de desarrollo del HTML5 durará hasta 2014. Podéis ver la noticia en este enlace.

Pero lo que os traemos con esta nueva entrada es una pequeña, pero útil, herramienta que tener en cuenta a la hora de empezar un nuevo proyecto que queramos desarrollar con HTML5. Se llama Initializr, que con 5 sencillos clics tenemos a nuestra disposición una plantilla en HTML5 incluso con las librerías JavaScript que queramos usar, o incluso con el fichero de configuración para nuestro servidor.

Así que os invito a poner este recurso en vuestras barras de favoritos. Os ahorrará mucho tiempo en evitar escribir de cero la estructura básica HTML a la hora de hacer una plantilla.

DHTMLX Touch – Framework para dispositivos touch

Escrito por Oriol Navascuez en 14/01/2011

Si alguna vez has pensado en desarrollar alguna aplicación móvil la cual tiene que tener una interfaz “touch” y no has sabido como empezar sin una interficie base, aquí ha llegado la solución.

DHTMLX Touch es una librería en Javascript y HTML5 que nos da todas las herramientas para generar una aplicación web para móvil. Aseguran que el framework es compatible con la mayoría de las plataformas móviles, además de funcionar sin problemas en dispositivos iPhone, iPad, telefonos basados en Android y otros dispositivos populares.

Cabe decir que el framework aun está en Alfa, pero no paran de lanzar mejoras y nuevas funcionalidades al framework. Y la documentación no está nada mal. Por lo que promete ser una buena herramienta para todos aquellos que queráis comenzar con este tipo de aplicaciones.

Podéis ver ejemplos en funcionamiento y probarlo en vuestros móviles desde la web oficial [en].

Aviary se embeda en nuestras webs

Escrito por Oriol Navascuez en 25/11/2010

Hace un par de días los chicos de Aviary anunciaban en su blog, el lanzamiento del HTML5 Photo Editor.

Lo interesante de Feather, así es como han bautizado al editor, es que además de estar realizado en HTML5 y no en flash como muchos editores online, es embedable, lo que significa que lo podremos incluir en nuestras web sin necesidad de cambiar de pagina o de pestaña, etc.

Con esta nueva herramienta podemos hacer posible que en nuestros desarrollos, se puedan editar al vuelo las fotografias. Claro que no pensemos que tenemos todas las herramientas a nuestra disposición, solamente hay algunas herramientas básicas, brillo, rotación de las imegenes, redimensionarlas, cortarlas, quitar ojos rojos, y alguna cosita más.

En resumen, Aviary nos ofrece un pequeño, pero potente editor online, que tanto podemos usar desde su web, como desde la nuestra sin necesidad de hacer nada más que no sea copiar el código para hacer el embed. Lo cierto es que tiene muy buena pinta.

Google I/O 2010

Escrito por Oriol Navascuez en 17/05/2010

Google I/O 2010Pasado mañana, Miercoles 19 de Mayo, dará comienzo uno de los mayores eventos para desarrolladores, la Google I/O 2010 en el Moscone Center, San Francisco.

Este evento contará con unas 80 conferencias, más de 3000 desarrolladores y más de 100 demostraciones de nuevos productos de los promotores del evento.

Además de oficializar el lanzamiento de nuevos productos y/o servicios de Google, los de Mountain View aprovecharán la ocasión para desvelar actualizaciones y desarrollos importantes. Algunas de estas actualizaciones o nuevos desarrollos son:

  • Android 2.2
  • El primer televisor con Android
  • Verizon’s Android tablet
  • Google Buzz API
  • Google Latitude API
  • Open-source version of VP8

Este último punto es muy interesante, ya que si Google decidiera hacer libre la versión VP8 de vídeo podríamos ver una rectificación por parte de Apple, o W3C para la inclusión de este nuevo formato en el HTML5.

Pinta una conferencia muy interesante la que tendremos el próximo miercoles. Así que aquellos que decidáis seguirla, os dejamos toda la información posible a continuación.

Blog de Google
Página oficial del evento

También podrás seguir el evento en Twitter siguiendo a @googleio. (hashtag oficial: #io2010)

Reproductores de vídeo en HTML5

Escrito por Oriol Navascuez en 26/04/2010

Vídeo HTML5Últimamente se está hablando mucho sobre HTML5, de los avances que está teniendo, de lo que mejorará la navegación, de lo accesible que será,…

Claro que es cierto, y ya es bueno que llegue este cambio a mejor. Y con este cambio, os traemos alguno de los últimos avances que está teniendo esta nueva versión de HTML, los reproductores de vídeo. Para insertar vídeo con esta nueva versión de HTML, solamente tenemos que incluir el siguiente código:

<video src="RutaDelVideo.ogg" controls="controls">
 Tu navegador no soporta la etiqueta vídeo de HTML5.
 </video>

Con esto, ya tenemos incluido un vídeo en nuestra página web, sin necesidad de plugins de flash, ni otras herramientas. Aun que una cosa tenemos que tener clara si queremos poner nuestro reproductor HTML5 en nuestra web, y es que solo permite vídeos en Ogg/Theora y/o H.264/Mp4. Y aun que la mayoría de navegadores ya soportan este nuevo tag, hay navegadores que permiten un codec y otros que solo permiten el otro. Os hacemos una lista de que codec soporta cada explorador:

  • Presto/Opera: HTML5 mediante GStreamer (incluye sólo Ogg/Theora).
  • WebKit/Chrome: HTML5 mediante ffmpeg (Ogg/Theora y H.264/MP4).
  • Gecko/Firefox: HTML5 con Ogg/Theora.
  • WebKit/Epiphany: HTML5 mediante GStreamer (Ogg/Theora garantizado).
  • WebKit/Safari: HTML5 mediante QuickTime (H.264/MOV/M4V, puede reproducir Ogg/Theora con XiphQT components)

Así que por ahora, el más recomendado para este fin podemos decir que es Chrome, ya que es el único que ofrece soporte a ambos codecs.

Podéis ver aquí una DEMO que hemos hecho para que veáis ambos codecs, y lo probéis en vuestros exploradores.

Claro que esto no es todo, y ya han ido saliendo a la luz otros reproductores en HTML5 más trabajados, y con más posibilidades. Uno de ellos es SublimeVideo un reproductor de vídeo en HTML5 desarrollado por el grupo Jilion_[en]. Si tenéis un navegador que soporte HTML5, podéis ver un ejemplo haciendo clic aquí.
Lo malo de este reproductor es que aun está en desarrollo y no lo han hecho público, por lo que tendremos que esperar a poder usarlo.

Otro de estos reproductores, es el OSM (Open Source Media) de la mano de MediaFront. Este reproductor nos permite reproducir vídeos y sonidos en los formatos más extendidos, además de la posibilidad de integrar en el mismo, vídeos de youtube y vimeo. Y no solo eso, sino que nos permite crear listas de reproducción, y tener varios vídeos como si de una pequeña biblioteca multimedia se tratara. Ya ofrecen compatibilidad de integración don Drupal, y próximamente lo harán para WordPress, Joomla y moodle.

Así que por ahora este último reproductor parece ser el más completo, por no decir el único, del que se dispone por el momento.

Haz funcionar HTML5 en todos los navegadores

Escrito por Víctor Mundet en 23/04/2010

HTML5

Últimamente se está hablando mucho de HTML5, y los navegadores se preparan para el futuro, de hecho muchos de ellos ya soportan HTML5 en sus últimas versiones. Pero… ¿que ocurre con los navegadores que en sus versiones antiguas no soportan HTML5?

Todos sabemos que mucha gente sigue trabajando con navegadores antiguos durante mucho tiempo, y ahí está el problema. ¿Pasamos nuestra página web a HTML5 o esperamos?
Vamos a investigar para que puedas lanzarte y implementar HTML5 dentro de lo posible y que funcione en todos los navegadores, incluido en los antiguos que actualmente no soportan HTML5.

Xiph.Org Ogg Codecs
Es un ejecutable que solo funciona para Internet Explorer y le permite ver al cliente vídeos de HTML5 (tag video)

Realmente no es lo que buscamos… buscamos no depender del cliente, que nuestra propia página web en HTML5 sea visible en todos o la mayoría de los navegadores.

HTML5-Now
Es un simple archivo JS incluido en tu proyecto web, que permitirá a los navegadores antiguos visualizar tags HTML5, la mayoría de ellos.

¿Queréis probarlo? Abrid un navegador que sepáis que no soporta HTML5 y entrad aquí.
Visualizaréis un video con un tag HTML5. Tenéis más ejemplos aquí.

Como vosotros mismos podéis ver, le queda mucho camino por recorrer, por ahora solo está una muestra de lo que será el proyecto. Pero creemos que dará mucho que hablar.
Contad que el cambio a HTML5 no será cosa de 2 días, herramientas de este tipo nos pueden ayudar mucho.

Xiph.Org Ogg Codecs
HTML5-Now [en]