La animación es un proceso utilizado para dar la sensación de movimiento a imágenes o dibujos o a otro tipo de objetos inanimados (figuras de plastilina, por ejemplo).
Fuente: wikiepedia (http://es.wikipedia.org/wiki/Animación).
A continuación voy a mostrar un ejemplo muy simple de una animación en dos dimensiones usando el objeto Canvas de Html5.
Si quieres puedes crear tu propia historia editando las cajas de texto:
Marian (texto1)
Billy (texto1)
Billy (texto2)
Marian (texto2)
Marian (texto3)
Podemos ver un ejemplo de animación en tres dimensiones en la dirección http://www.benjoffe.com/code/demos/canvascape.
Se trata de un juego de aventuras en 3D (disparos en primera persona).
Sin duda, html5 es una alternativa para juegos de navegador que presenta ventajas importantes:
se trata de una herramienta estándar abierta y gratuíta al alcance de cualquier persona interesada en desarrollo web.
no requiere de software adicional o instalación de complementos.
es sopotado por los navegadores más actuales con independencia del sistema operativo lo que lo convierte en multiplataforma.
En contra, se está trabajando para mejorar el rendimiento debido al elevado consumo de memoria y cpu.
También os dejo un enlace que os va a sonar: Angry Birds.
Uno de los juegos más populares para dispositivos móviles, también está disponible en HTML5 para disfrutar desde el navegador. http://chrome.angrybirds.com
HTML5 es el Lenguaje de Marcado de Hipertexto (HyperText Markup Language) en su quinta revisión, regulado y recomendado por el W3C (World Wide Web Consortium), consorcio encargado de la mayoría de las especifiaciones tecnológicas para la web.
Está en fase borrador pero cuenta con el apoyo de las grandes compañías como Google, Apple o Microsoft cuya apuesta supone el lanzamiento definitivo en la web.
Se estima que la versión final de esta recomendación se aprobará en el año 2014. No obstante, se puede usar html5 sin ningún temor ya que la mayoría de sus características se encuentran en una situación muy estable.
Html5 hace referencia al conjunto de nuevas tecnologías que proporcionan una navegación mucho más ágil y flexible y suponen una experiencia de usuario mejorada sin el uso de software adicional.
El objetivo fundamental de html5 es facilitar el desarrollo de aplicaciones web enriquecidas (ahorro de costes en el desarrollo de páginas webs) y mejorar el rendimiento ante las nuevas necesidades tecnológicas y de gestión de la información.
No olvidemos que cada vez más terminales móviles soportan html5 y para el presente año se espera la venta de mil millones de terminales compatibles con esta tecnología. Véase el artículo: http://jmacuna73.blogspot.com.es/2012/12/smartphone-utilidades-reales-y-evolucion.html
Algunas de las aportaciones del lenguaje son:
Etiquetas nuevas:
<canvas> para representación de elementos gráficos en 2D y 3D
elementos multimedia como <audio>, <video>, <source>, <embed>. Los formatos de audio soportados son AAC, mp3, ogg, PCM, WebM y los de vídeo ogg, H.264, WebM, H.264.
elemento <track> para alojamiento de una pista de texto asociada a un contenido multimedia, por ejemplo un vídeo.
tags para manejar la web semántica. Algunos elementos que definen secciones del documento son <article>, <aside>, <bdi>, <command>, <details>, <summary>, <figure>, <figcaption>, <footer>, <header>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <rp>, <section>, <time>, <wbr>.
elementos de forma: <datalist>, <keygen>, <output>.
Formularios enriquecidos:
se añaden nuevos tipos de datos cómo direcciones de e-mail <input type=email>, números de teléfono <input type=tel>, url absoluto <input type=url>, búsqueda <input type=search>, fecha y hora global <input type=datetime>, fecha y hora local <input type=datetimelocal>, fecha <input type=date>, mes <input type=month>, semana <input type=week>, hora <input type=time>, número <input type=number>, número en rango <input type=range>, color <input type=color>
nuevos tipo de controles de entrada: barras de progreso, generadores de claves, interfaces de salida, listas de datos, selectores de colores, calendarios, cuadros de búsqueda, etc.
comportamientos como autofocus, autocompletar, redirigir el valor.
y posibilidad de validación de los campos sin el uso complejo de scripting.
CSS3:
permite dibujar gráficos vectoriales
rotar y escalar imágenes: transform, -webkit-transform, -moz-transform, -o-transform
texto sombreado: text-shadow
cajas sombreadas: box-shadow
redondear bordes o esquinas de elementos o imágenes: border-radius.
bordes con imágenes: border-image y border-corner-image.
múltiples imágenes de fondo: background-image: url('fondo1.png'), url('fondo2.png')
tooltip usando pseudo-elementos :before (or :after) combinados con pseudo-clases :hover.
opacidad: opacity
múltiples columnas: -moz-column-count and -moz-column-width
soporta una gama más amplia de las definiciones del color: HSL (hue, saturation, lightness), CMYK (cyan, magenta, yellow, black), HSLA (hue, saturation, lightness, alpha) y RGBA (red, green, blue, alpha)
Modelo de procesamiento de errores:
el manejo de errores queda claramente definido y es mucho más sencillo para el programador.
Javascript:
los nuevos APIs para gestionar la interacción con el usuario permiten dibujar gráficos 3D con WebGL, trabajar off-line, geoposicionamiento, drag and drop, etc.
APIs para el acceso a sistema de ficheros, almacenamiento de sesión, base de datos local, etc.
Otros módulos:
MathML (Mathematical Markup Language): lenguaje extendido que nos permite expresar notaciones matemáticas .
SVG (Scalable Vector Graphics) hace posible dibujar gráficos vectoriales nativamente.
Para poder disfrutar de todo su potencial hay que contar con las últimas versiones de los navegadores más importantes del mercado (Mozilla, Chrome, Opera, Safari e IE).
Internet Explorer interpreta código html5 a partir de la versión 8. Para versiones anteriores y con el objetivo de no excluir a ningún usuario, recomiendo utilizar la detención de capacidades. La librería más completa para ello es Modernizr: the feature detection library for HTML5/CSS3.
Os dejo un buen vídeo sobre Qué es HTML5 y qué no es, mitos y leyendas de los estándares abiertos, pasado, presente y futuro de HTML5 de Sandra Guerrero Sanmarti que no os podéis perder.
Reflexiones que planteo:
¿es el momento de realizar un cambio tecnológico con tanto impacto en nuestra empresa y nuestros clientes? ¿es html5 una apuesta de futuro para aplicaciones web y videojuegos?
Me interesa tu opinión, ¿qué piensas al respecto?
