CSS3 & HTML5

19/05/2012
por Damián De Luca
Deja tu comentario

Crear un preloader con jQuery y CSS3

La posibilidad de introducir un preloader para nuestras páginas es una ventaja visual que resultará útil para darle mayor elegancia a nuestro sitio, mientras el usuario espera que termine de cargar.

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/

13/05/2012
por Damián De Luca
Deja tu comentario

Juegos en HTML5 con Construct 2

La creación de juegos utilizando HTML5 y tecnologías relacionadas es una tendencia que ha comenzado a tomar impulso en el último tiempo y cada vez son más las herramientas que surgen para ayudarnos a resolver estas necesidades.

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.

12/05/2012
por Damián De Luca
Deja tu comentario

¡HTML5 Por Favor! – HTML5 Please!

Usar o no usar algunas de las características de HTML5 … esa es la cuestión que seguramente más de una vez nos ha torturado la cabeza.

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.

10/05/2012
por Damián De Luca
1 Comentario

The CSS3 Test

El desarrollo y diseño de sitios Web hoy en día nos pone a prueba constantemente con la complicada tarea de lograr compatibilidad con diferentes dispositivos y navegadores.

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.

13/04/2012
por Damián De Luca
Deja tu comentario

Realidad aumentada con HTML5 y JSARToolKit

Las posibilidades que introduce HTML5 para multimedia son realmente importantes para renovar las posibilidades que existían hasta ahora en la Web.

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.