Seguramente conocemos muchas soluciones creadas en AJAX (¡y haste en Flash, algún tiempo atrás!). Pero con la llegada de HTML5 y CSS3, comenzamos a tener nuevas posibilidades para resolver esta necesidad.

Alessio Atzeni, apasionado Web Designer y Javascript web development ha creado un interesante tutorial sobre como utilizar las propiedades de animación de CSS3 combinadas con jQuery para obtener un muy buen preloader para nuestras página.

El tutorial y el resultado lo podremos ver si ingresamos en el siguiente enlace: CSS3 Preloader Animation for only User Agent supports it.

Para conocer más info sobre Alessio Atzeni, podemos ingresar en: http://www.alessioatzeni.com/about/

En primer lugar, es cierto que crear un juego en HTML5 “a mano” puede resultar una tarea tediosa y eso está cambiando precisamente por la evolución que están teniendo los framworks y herramientas que están apuntalando a este tecnología.

Dentro de las aplicaciones que nos permiten desarrollar juegos, encontramos Construct 2 de Scirra.

Esta aplicación nos brinda la posibilidad de trabajar con Drag & Drop, construir personajes, agregar multimedia y obtener previews en red (algunas de las características no están disponibles en todas las ediciones). Entre los juegos que podremos crear se destacan los del tipo puzzle, juegos de acción, disparos y muchas otras alternativa. Podremos ver ejemplos en: http://www.scirra.com/arcade.

Entre las versiones de este software podremos encontrar una alternativa gratuita (Free Edition) que nos ofrece la posibilidad de desarrollar juegos HTML5, para Facebook o para el Chome Web Store. No tiene limitaciones de tiempo pero si cuenta con algunas características menos que las versiones Stardard Edition o Business Edition (ambas alternativas pagas de diferente valor).

Las opciones de descarga de Construct 2 las encontraremos en: http://www.scirra.com/construct2/releases. Para tener las últimas noticias podremos seguir el blog de Scirra: http://www.scirra.com/blog.

¿Te interesa aprender más sobre como integrar HTML5 y CSS3 en tus sitios Web? Puedes escribirnos.

Que bueno sería tener una guía que nos diga que característica usar y cuál merece un tiempo de espera hasta que termine de madurar. Un sitio que nos ayudará mucho en esta elección es HTML5 Please.

Característica por característica de HTML5, CSS3 y las APIs de JavaScript, este sitio nos brinda un diagnóstico y una recomendación de uso de estas tecnologías. Es así como podremos obtener recomendaciones del tipo: use, use with pollyfills, caution, caution with pollyfills o avoid.

Al desplegar cada una de las mencionadas recomendaciones encontraremos información adicional, enlaces relacionados y Polyfills recomendados (si existen para la característica dada).

En resumen, podemos decir que HTML5 Please es un sitio que conviene visitar antes de incorporar nuevas características de HTML5 en nuestro sitio Web. De esta manera podremos saber el estado de las cosas y como implementarla de una manera más segura.

¿Te interesaría saber más sobre como integrar HTML5 y CSS3 en tus sitios Web? Puedes escribirnos.

Una característica base es, antes de decidirnos a aplicar alguna característica, cuáles es su nivel de compatibilidad. Podemos consultar tablas, foros y otros lugares de Internet para conseguir esta info, pero también puede ser útil realizar diversos test en navegadores.

The CSS3 Test es una muy buena herramienta online que nos dará una puntuación general que reflejará la compatibilidad que tiene el navegador que enfrentemos a esta contienda. Pero más allá del puntaje, lo realmente interesante de este sitio es que nos ofrecerá un detalle característica por característica. De esta manera será más sencillo poder determinar si es recomendable utilizar alguna cualidad en particular de CSS3.

Cabe destacar que este test es recomendable aplicarlo a diversos navegadores y no solamente a nuestro “Browser Favorito”. Con esto podremos comparar y tomar decisiones eficientes para nuestros proyectos.

¿Te interesaría saber más sobre como integrar HTML5 y CSS3 en tus sitios Web? Puedes escribirnos.

Hasta hace poco tiempo, las aplicaciones de realidad aumentada para la Web sólo eran posible incluyendo algún desarrollo basado en Flash o mediante algún otro plugin o agregado (por ejemplo Silverlight).

Una de las características que dificultaba la creación de aplicaciones de realidad aumentada con herramientas Web estándar era el acceso a cámara. Esto está cambiando con las posibilidades que introduce HTML5 para emplear funcionalidades de audio y video nativas y, además, el acceso a hardware, en este caso la cámara del usuario.

Si bien aún estamos en un plano experimental, la expansión y adopción de estas nuevas tecnologías abren una puerta más que interesante para crear realidad aumentada que funcione en nuestro navegador sin necesidad de Flash.

JSARToolKit es una librería que nos facilita la entrada al mundo de Realidad Aumentada. Con la API getUserMedia podremos acceder a capturar contenido desde la cámara del usuario.

Para saber más sobre estas tecnologías, les recomendamos una nota publica por HTML5 Rocks, titulada: Writing Augmented Reality Applications using JSARToolKit. En la nota también se emplea 3D, apoyándose en las características de Canvas de HTML5 y en la librería three.js.

¿Te interesaría saber más sobre como integrar HTML5 en tus proyectos? Puedes escribirnos.

La propiedad perspective es la que nos abre el camino para crear perspectivas utilizando reglas introducidas por CSS3.

Desde un elemento “root” o “padre” podremos afectar a sus hijos para que tengan una perspectiva que simule un efecto 3D.

Por el momento esta característica es soportada por navegadores Chrome y Safari en sus versiones más modernas, por esta razón será recomendable utilizar el prefijo webkit, si empleamos esta funcionalidad en nuestros proyectos.

¿Un ejemplo? Veamos a continuación como construimos las reglas desde el elemento root:

perspective:250;
-webkit-perspective:250;


También podremos indicar el origen, como vemos a continuación:


perspective-origin: 25% 25%;
-webkit-perspective-origin: 25% 25%;


Trabajando con otras opciones de transformación y rotación, podremos lograr efectos muy interesantes en nuestros diseños.

¿Te ha resultado útil esta información? ¿Quieres saber más sobre HTML5 y CSS3? Escríbenos.

Por medio de File API tendremos una interfaz para interactuar con archivos y directorios del equipo local. Es decir, podremos leer y crear archivos/directorios en el equipo cliente. También tendremos la posibilidad de acceder a algunas características del File System, como saber cuánto espacio queda disponible.

Anteriormente solo podríamos trabajar del lado servidor (por ejemplo mediante PHP). Ahora esta API nos brinda una potencia enorme, al poder realizar desarrollos del lado cliente empleando JavaScript como lenguaje. El potencial de esta API promete ser muy potente, ya que tiene una gran variedad de métodos que nos facilitarán el trabajo con archivos y directorios locales. Claro que tendremos límites de seguridad, impuestos especialmente para no dañar o afectar archivos privados o del sistema del usuario. Algo lógico para una API de esta naturaleza.

Un aspecto para contemplar está dado por la compatibilidad con los navegadores que aún no es demasiado alta. Por lo cual es conveniente realizar una verificación si todas las características que necesitamos de File API están disponibles:

if (window.File && window.FileReader && window.FileList && window.Blob)

{//Código compatible}

else {//Código no compatible}

Para saber más: File API (en el W3C) y File API: Writer (en el W3C).

¿Te ha resultado útil esta nota? ¿Te gustaría aprender más sobre los nuevos elementos de HTML5? Puedes ponerte en contacto con nosotros desde cualquier lugar del mundo donde estés.

También hay que destacar que los navegadores modernos están ofreciendo una buena compatibilidad para las características básicas de CSS3, como el caso de sombras, bordes redondeados y fuentes, entre otras.

Aquí es importante estar atento a algunos aspectos. Debemos utilizar prefijos para algunas características. Muchas herramientas nos ayudan con esta tarea, entre ellas. CSSPrefixer. También encontramos soluciones online para hacernos más fácil la creación de estilos CSS3, un caso claro de esto es CSS3.0 Maker.

Entre las características que aún no tienen un alto soporte en algunos navegadores (especialmente en browsers antiguos) encontramos las que hacen referencias a efectos de giro, transiciones, animaciones y especialmente los que están vinculados al 3D con CSS.

Quizás las características mencionadas en el párrafo anterior son las más complejas para emular en navegadores antiguos. Más allá de esto, cada día existen más opciones para compatibilizar CSS3 con navegadores que no soportan sus características, como el ejemplo de IE8 (o versiones inferiores). Buenos ejemplos los encontramoss en selectivizr y en CSS3PIE, entre otros.

Todos estos datos hacen evidente que ya contamos con muy buenas opciones para comenzar a trabajar con CSS3 en nuestros diseños Web. ¡Adelante, entonces!

¿Te ha resultado útil este artículo? ¿Te gustaría aprender más sobre CSS3?

Esta característica está enfocada al almacenamiento de volúmenes importantes de datos estructurados. Al trabajar con índices, nos provee también de una manera más eficiente de trabajar con esta información.

Un punto interesante para destacar de IndexedDB es que no es trabaja con el paradigma de base de datos basada en el modelo relacional, sino que utiliza lo que se conoce como base de datos orientada a objetos. También vale la pena señalar que no emplea SQL para las consultas sino que trabaja con cursor.

Encontramos soporte para esta API desde Chrome 11 y Firefox 4 (o versiones superiores). En Internet Explorer esta funcionalidad será implementada a partir de la versión 10.

Indexed Database API se encuentra actualmente en Working Draft y encontraremos más información en la documentación oficial del W3C.

Así como Adobe está trabajando en el desarrollo de Edge y Sencha tiene su Sencha Animator, en el mundo Mac encontramos soluciones como Hype.

Siguiendo precisamente con el entorno Mac, ahora también podemos destacar las ventajas de Radi, una herramienta que al momento de escribir estas líneas se encuentra en estado Beta.

¿Qué nos permite hacer Radi?  Un gran números de cosas. Radi nos brinda la posibilidad de dibujar vectores y realizar animaciones para la Web sin necesidad de Flash. Nos posibilita trabajar con imágenes y video para la Web de una manera sencilla, agregando efectos a animaciones que trabajarán con el video en HTML5.

También hay que destacar que Radi cuenta con una interfaz fácil de aprender a usar para quiénes tienen alguna experiencia en soluciones relacionadas con animación para la Web.

Podemos acceder a las opciones de descarga y más información sobre este producto, ingresando en: http://radiapp.com/.

En resumen, Radi es una interesante aplicación muy útil que nos permite crear contenido HTML5 desde Mac sin grandes dificultades.

¿Te ha resultado útil esta nota? ¿Te gustaría aprender más sobre los nuevos elementos de HTML5? Puedes ponerte en contacto con nosotros desde cualquier lugar del mundo donde estés.