Desde la versión CS 5.5 permite crear documentos HTML5 desde cero de manera intuitiva (para versiones anteriores hay que instalar un Pack adicional). Esta capacidad también está disponible en Dreamweaver CS6 y es muy fácil de implementar.

Al ingresar a Dreamweaver, en la pantalla de inicio, debemos elegir Más. En la ventana que vemos a continuación señalamos HTML en la columna Tipo de página. En Tipo de documento, opción ubicada en el panel de la derecha, debemos señalar HTML5 en el menú desplegable.

Rápidamente se creará el “esqueleto” de un nuevo archivo HTML5 con el Doctype correspondiente, la cabecera y el cuerpo para que iniciemos nuestro trabajo.

Para ver la explicación interactiva (en HTML5): ingresar a: http://css3html5.com.ar/ejemplos/dwhtml5/.

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

La primera versión fue publicada inicialmente en el año 2008. La versión 2 vio la luz en el año 2011 en release Alpha. El lanzamiento definitivo de Sublime Text 2 fue anunciada en el 2012 y con ella, este software logró mayor solidez y robustez, mejoras en la interfaz y también el soporte a las pantallas Retina de MacBook Pro.

¿Algunas ventajas para elegir este editor de código? Minimapa de navegación para desplazarnos con comodidad por toda la extensión del código, selección múltiple (multi-selección), diferentes configuraciones de layout, Plugin API, autocompletado y coloreado inteligente de código.

Encontraremos más información sobre este producto en: http://www.sublimetext.com/. El programa pude ser descargado para evaluarlo y las opciones de compra las encontramos en: http://www.sublimetext.com/buy.

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

La llegada de HTML5 nos provee la posibilidad de olvidarnos de la necesidad de plugins para reproducir audio y video. Con las etiquetas <audio> y <video> y la Media API, tenemos abierto un nuevo camino en este mundo multimedia. y la Media API, tenemos abierto un nuevo camino en este mundo multimedia.

Web Audio API es una API de alto nivel de JavaScript API que nos permite procesar y sintetizar sonido en aplicaciones Web. Esta característica puede ser aprovechada en el desarrollo de aplicaciones y especialmente en la nueva generación de juegos HTML5 que comienza a ganar terreno en Internet.

Chris Rogers es el editor del documento del W3C que aún se encuentra en Working Draft (Borrador de Trabajo) y que define las características de esta API. El documento cuenta con explicaciones, códigos JavaScript, gráficos e ilustraciones que nos ayudarán a comprender mejor hasta donde puede llegar esta especificación en el futuro. La dirección para acceder al documento del W3C es http://www.w3.org/TR/webaudio/.

Para quienes deseen tener mayor información sobre esta API, también recomendamos leer el artículo titulado GETTING STARTED WITH THE AUDIOCONTEXT, que ha sido publicado en HTML5 Rocks.

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

Este es uno de los temas que mayor expectativa despierta cuando doy clases sobre HTML5 y CSS3. Una de las razones es porque esta es una de las características que permiten dejar atrás Flash y comenzar a tener nuevas opciones a la hora de crear animaciones para móviles.

En cuanto a su funcionamiento no es demasiado complejo. Podremos definir un nombre para la animación (animation-name), un tiempo de espera (animation-delay), un tiempo de duración (animation-duration), la cantidad de veces que se realizará (animation-iteration-count) y también el conjunto de reglas que se aplicarán para crear el efecto animado.

La compatibilidad aún es un tema complejo para esta característica. Internet Explorer no ofrece compatibilidad con esta regla y en el caso de otros navegadores deberemos utilizar un prefijo: Chrome y Safari (-webkit), Opera (-o) y Firefox (-moz).

A continuación veremos un ejemplo donde cambiaremos el ancho a un elemento:


@keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

@-moz-keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

@-webkit-keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

@-o-keyframes animar

{
from {width: 100px;}
to {width: 200px;}
}


El nombre de la animación (en este caso animar) se puede cambiar por el que deseemos. También es posible modificar o agregar otras propiedades para animar. Cabe mencionar que también deberemos crear una regla para el elemento que deseemos animar (por ejemplo un div), asignando el nombre de la animación y el tiempo que tardará en realizarla (entre otros parámetros posible). Veamos a continuación:


div
{
animation: animar 5s;
-moz-animation: animar 5s;
-webkit-animation: animar 5s;
-o-animation: animar 5s;
}

Para saber más sobre el tema podemos leer la información que nos ofrece el W3C en el documento CSS Animations.

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

Para solucionar el primero de los aspectos contamos con soluciones como ExplorerCanvas, que puede ofrecernos una alternativa de compatibilidad a algunos desarrollos. Aunque no para todos, ya que en algunos casos no puede emular todas las características o bien encontraremos un rendimiento pobre en versiones antiguas de Internet Explorer.

Raphaël es otra alternativa interesante, tanto para hacernos más liviano el proceso de trabajar con Canvas, como también brindarnos otras soluciones de compatibilidad.

Si vamos por el lado de realizar pruebas de performance, les recomiendo leer el artículo Improving HTML5 Canvas Performance, publicado en  HTML5 Rocks. En esa nota podremos conocer temas como test de performance, pre-render, comparaciones de rendimiento entre diferentes navegadores, trucos y secretos para mejorar la manera en que pueden operar nuestros proyectos con Canvas.

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

Crear un sitio con dimensiones fijas ya no será suficiente en la mayoría de los casos y la capacidad de detectar características de pantalla se ha vuelto una necesidad fundamental para diseñadores y desarrolladores Web. De la mano de CSS3 encontramos un excelente camino para resolver esta necesidad.

¿Qué podemos hacer con Media Queries? Muchas cosas. Entre ellas aplicar reglas de estilos según el ancho o el alto de la pantalla o modificar estilos cuando el dispositivo cambia su orientación (entre vertical y horizontal).

¿Un ejemplo de uso? Supongamos que tenemos dos divs (cuyas id son div1 y div2, respetivamente) y que los tenemos flotando a la izquierda. El primer div ocupa el 30% y el segundo 70% en el esquema. El CSS sería algo como lo que sigue:

div1{width:30%;float:left;}
div2{width:70%;float:left;}

Ahora vayamos al caso que al estar en una resolución de un dispositivo móvil, por ejemplo 480px de ancho, deseamos que los divs ocupen, cada uno, el total del ancho y queden uno debajo del otro (en lugar de estar uno al lado del otro). Podremos aplicar una regla de Media Queries como la que sigue:
@media screen and (max-width: 480px) {
div1{width:100%;}
div2{width:100%;}
}

¿Sencillo, verdad? Si bien cuando suelo explicar esto a mis alumnos parece ser “pan comido”, la realidad indica que en estructuras más complejas puede ser más laborioso llegar al modelo ideal, sin embargo, Media Queries nos abre las puertas para un mundo fascinante que nos permitirá resolver una multitud de situaciones de diseño. De la mano de esta característica, aparece también una nueva tendencia denominada Responsive Web Design o el Diseño Web Adaptado al Dispositivo.

Es importante destacar que Media Queries es W3C Recommendation desde Junio de 2012 y cuenta con muy buena compatibilidad en navegadores de escritorio y también en móviles (http://caniuse.com/css-mediaqueries).

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

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.