Archive

Archive for the ‘HTML5’ Category

Técnicas y estrategias para el diseño de sitios multi-dispositivo. (moviles)

noviembre 8, 2010 2 comentarios

Hoy en día cuando se desarrolla una aplicación web, se debe tener en cuenta que puede ser visitada desde diferentes medios.

Al diseñar un sitio multi-dispositivo, se debe considerar cuales funciones y características se van a mostrar en cada tipo de dispositivo, suponiendo que estos varían, se va a requerir alterar el formato emitido por el servidor.

Debido a que existen numerosos dispositivos y dentro de estos existen numerosas versiones (versión del OS, navegador, html, css, js), se generan numerosas combinaciones que son un dolor de cabeza para los desarrolladores Web. Hoy en día, de las principales tareas en el desarrollo de un sitio web son la detección de las capacidades del medio y la detección del medio.

La detección de medio permite la identificación  de las propiedades y características de un dispositivo, con el propósito de determinar el mejor contenido, diseño, markup o aplicación a servir hacia el dispositivo, permite a los desarrolladores identificar funciones y características como tamaño de pantalla, tipo de navegador (o versión), si soporta video y audio, nivel de soporte de CSS, HTML y JS.

Identificación de medio por Bases de datos de dispositivos.

Cuando se desarrolla sitios, tarde o temprano se necesita saber que dispositivo está usando el usuario, es inevitable, todos los dispositivos son diferentes y para ofrecer una gran experiencia móvil se necesitan conocer las capacidades específicas de cada dispositivo. Entre más refinada se necesite la segmentación de un sitio web, se necesitará hacer algo más que checar las palabras clave en las cabeceras HTTP.

Actualmente, la mejor forma para detección de dispositivos es por medio de bases de datos de dispositivos,  como DeviceAtlas o Wurfl.

Estas bases de datos pueden ayudar a conocer todas las propiedades generales del dispositivo (así como proveer ajustes más finos dentro de los grupos que se definan con capacidades específicas). Estas base de datos tienen grandes conjuntos de datos con los tamaños de pantalla.

WURFL

WURFL está basado en el concepto de familias de dispositivos. Todos los dispositivos son descendientes de un dispositivo genérico, pero pueden también descender de familias más especializadas, este mecanismo llamado ‘fall_back’, permite a los desarrolladores derivar las capacidades de un teléfono buscando las capacidades de su familia, a menos que una cierta característica sea específicamente diferente para ese teléfono. Ver post anterior sobre WURFL.

Device atlas.

Device atlas es una solución para detección de dispositivos y contiene datos de más de 6,000 dispositivos. Se utiliza por medio de un API que provee device atlas y soporta PHP, Java, .NET, Ruby y Python. Para más información visitar: http://deviceatlas.com/get-started

Identificación de propiedades de dispositivo con  media queries.

CSS-3 mejora el soporte para los CSS que son dependientes al medio, y permite seleccionar las hojas de estilo de manera más precisa utilizando los media queries.

Los media queries  se usan del lado del cliente, y son muy útiles porque  permiten que el contenido se adapte a un rango específico de dispositivos de salida sin necesidad de tener que cambiar el contenido en sí. Se pueden usar para ajustar el diseño y el estilo de una página una vez que se carga en el dispositivo.

Un media query consiste de un tipo de medio y cero o más expresiones que comprueban  las condiciones de las características particulares del medio como ancho, alto o color. Las expresiones lógicas resuelven verdaderas o falsas. Por ejemplo

<link rel=”stylesheet” media=”screen and (max-device-width: 360px)” href=”ejemplo.css” />

Esto será verdadero para tipos de medio que sean screen y que tengan como ancho máximo 360px

El resultado de la expresión es verdadero si el tipo de medio especificado en el media query cumple con el tipo de dispositivo en donde el documento está siendo visto y todas las expresiones del media query son verdaderas.

Cuando el media query es verdadero, el CSS correspondiente es aplicado siguiendo las reglas de la hoja de estilo.

Se pueden crear consultas complejas usando operadores lógicos (not, and, only), así como combinar varios media queries en una lista separada por comas, si una consulta de la lista es verdadera entonces la hoja de estilos asociada es aplicada, es el equivalente al operador “or”.

El operador not, niega el resultado de la consulta “all and (not color)” es verdadera para dispositivos monocromáticos sin importar el tipo de medio.

El operador only, esconderá las hojas de estilo para navegadores antiguos que no soporten media queries.

<link rel=”stylesheet” media=”only screen and (color)” href=”ejemplo.css” />
Esto será verdadero para tipos de medio screen y que sean de color.

Los media queries no son sensibles a las mayúsculas y los paréntesis son requeridos para las expresiones.

Un problema que tienen es que su uso es vago en dispositivos de nivel medio / bajo, por lo que se debe de utilizar Progressive enhancement (seguir leyendo) de una manera que se degrade elegantemente el sitio.

Otro problema es que los media queries solo permiten manipular el estilo y tienen poca influencia sobre lo que se descargue al dispositivo, no pueden manipular el html por lo que se debe confiar en las reglas de CSS para por ejemplo cambiar el tamaño de las imágenes para que se adapten  al dispositivo.

Estrategias para servir contenido a diferentes dispositivos.

Existen diferentes técnicas para servir contenido en pantalla, además dependiendo del medio, existen API’s que facilitan estas acciones.

Progressive enhancement (mejora progresiva).

Una técnica muy común es desarrollar primero para navegadores antiguos y móviles (con menos capacidades que los modernos o de escritorio) y usar Progressive enhancement (mejora progresiva) para servir el contenido que soporte el dispositivo. Se pueden usar media queries y javascript para lograrlo. Una buena explicación de  Progressive enhancement se puede leer en la siguiente liga. http://www.alistapart.com/articles/understandingprogressiveenhancement/

Redirección de sitio.

Otra técnica es la redirección a otro dominio (o subdominio), dependiendo del medio que se detecte se reenvía a otro URL especifico para el dispositivo. Generalmente se usa por medio de la detección del agente de usuario o alguna librería de dispositivos del lado del servidor.

Plantillas.

Otra técnica es el uso de plantillas para familias de dispositivos, se agrupan capacidades de dispositivos en familias, dependiendo de las capacidades del medio que se detecten, se identifica la familia a la que corresponde y se muestra la plantilla. Se puede utilizar media queries, javascript o alguna librería de dispositivos del lado del servidor.

Algoritmos.

Es una técnica que usa algoritmos para cambiar el contenido van adaptando el contenido de manera apropiada para cada dispositivo. Generalmente se usa javascript.

Técnicas para cuidar el  rendimiento en la detección de dispositivos.

Es importante considerar el rendimiento en las aplicaciones Web. Detectar el dispositivo o las capacidades del medio en cada página que se visite de un sitio web no se considera como buena práctica porque afecta el rendimiento de la aplicación al estar realizando la misma tarea repetitivamente, para ayudar a mejorar el rendimiento, se realiza la detección en la primer visita y en las demás accesos solo se consulta la información que se guardó.  Algunas técnicas son:

Cookies de propiedades.

Para los dispositivos que aceptan cookies, una buena técnica es crear una cookie por medio de javascript, en esta cookie se almacenan las propiedades del medio de donde se está viendo la aplicación web, como por ejemplo ancho y alto de pantalla, y además se puede almacenar sus capacidades como por ejemplo si acepta xhr, canvas, flash ó localización.
La cookie se consulta por medio de la aplicación para proveer contenido adecuado al dispositivo,  y adaptarlo. Adicionalmente se puede combinar esta información con alguna base de datos para conocer características adicionales del dispositivo en caso de que sea necesario y formatear el contenido antes de enviarlo al dispositivo.

Los pasos generales son:

  1. Crear un objeto JS donde se guarda las propiedades y características que se necesitan en la aplicación.
  2. Cifrar el objeto en una cadena JSON y guardarlo en una cookie.
  3. Para cargar los datos de la cookie se descifra la cadena JSON de nuevo en un objeto JS.

Esta técnica funciona muy bien cuando se guarda poca información.
Un problema puede ser que si el navegador de donde se consulta no acepta cookies o las tiene desactivadas no funcionará así como tampoco si tienen javascript desactivado. Esto debido a que esta técnica se basa completamente en cookies y en javascript. Una solución a este problema es combinarlo con media queries o detección del lado del servidor, para conocer si acepta javascript y cookies.

Frames / iFrames.

Esta técnica se utiliza creando dos Frames, un Frame informativo, y otro Frame que se utiliza como navegación, este frame es el que se actualiza y en donde se generan todas las peticiones. Las propiedades y características del medio se guardan en un objeto javascript en el frame informativo. Esta técnica funciona también con iframes.
Un problema de este acercamiento es que el uso de frames no es una buena práctica en algunos dispositivos, además que no son soportados (o están desactivados) por algunos navegadores.

Web Storage (Almacenamiento Web).

Para navegadores que acepten HTML5 existe una característica que se llama Web Storage que es una especificación que define una API para el almacenamiento de datos (clave-valor) en los clientes Web. Este acercamiento es muy similar al de Cookies de propiedades pero usando un objeto nativo del navegador llamado localStorage.
Una ventaja es que acepta más tamaño de almacenamiento que las cookies. La desventaja es que solo se puede usar en navegadores modernos.

Recomendaciones para el desarrollo de sitios multi-dispositivos.

La meta de una aplicación multi-dispositivos o multi-pantalla no es necesariamente que se vea idéntica en cada dispositivo, más bien que se adapte a cualquier dispositivo.

Pensando en términos de  multi-dispositivo, se debe tomar en cuenta la experiencia de usuario del dispositivo (touch, track ball, track pad, teclado, etc) y asegurarse de que los elementos clickeables sean adecuados a la forma de navegación (los botones en ambientes touch sean suficientemente grandes para pulsarse).

Pensando en términos de multi-pantalla, se debe ajustar dinámicamente a la resolución y PPI del dispositivo en el cual se está viendo, desplegando más información en pantallas grandes, y removiendo o encogiendo elementos en pantallas pequeñas.

Para que las aplicaciones funcionen en diferentes pantallas, se deben diseñar de tal manera que se dibujen a sí mismas en el momento adecuado y con las restricciones adecuadas.

Siempre se debe de programar con código bien estructurado.

Para que se cargue rápido la aplicación se debe comprimir el contenido cuando y donde sea posible.

Se debe evitar el envío de datos innecesarios.

Al agrupar dispositivos por tamaño de pantalla, se debe considerar el markup que soporta, capacidades, método de interacción y más, todo depende del tipo de sitio.

Mantener un balance entre la accesibilidad, las capacidades, experiencia de usuario, usabilidad, funcionalidad, rendimiento y ancho de banda.

Aplicaciones Web Offline con el archivo manifest de HTML5 (Offline Application Cache)

octubre 6, 2010 7 comentarios

Existe una característica en HTML5  llamada Offline Application Cache que permite a los usuarios correr aplicaciones Web aun y cuando no estén conectados a Internet. Funciona de la siguiente manera:

Cuando un usuario visita una aplicación Web, el navegador descarga y guarda todos los archivos necesarios para desplegar la página (HTML, CSS, javascript, imágenes, etc).

La siguiente vez que el usuario visita la aplicación, el navegador reconoce la dirección y sirve los archivos del cache de la aplicación local, en lugar de obtenerlos por la red.

El principal componente de esta característica se llama archivo de manifiesto (manifest file), que es un archivo de texto que se guarda en el servidor Web. Este archivo se envía al dispositivo del usuario y su tipo mime es cache-manifest.

Este archivo contiene una lista de archivos que el dispositivo del usuario debe descargar y guardar para que funcione la aplicación.

Ejemplo.

Por ejemplo supongamos una página HTML que se usa de splash para correr una aplicación la estructura de archivos sería la siguiente:

index.html

_img/splash.png

_js/index.js

_css/index.css

app.manifest

Los pasos para utilizar esta característica (Offline Application Cache)

1. Crear un cache manifest.

El archivo app.manifest tendrá las referencias a todos los recursos que queremos guardar en el cache de la aplicación:

Contenido de app.manifest:

CACHE MANIFEST
#Cache para la aplicación que no tenga conexión de red
#V1
#Archivos HTML
index.html
#Archivos javascript
_js/index.js
#Archivos CSS
_css/index.css
#Imagenes
_img/splash.png

Las rutas son relativas al archivo (también se pueden usar rutas absolutas), las líneas que comienzan con # son comentarios.

2.  Referenciar el archivo cache.

Para que se tenga acceso offline y funcione la aplicación con los archivos específicos en el archivo se necesita ligarlo, agregando un atributo manifest a la etiqueta de html dentro del index.html.

<html manifest=”app.manifest”>

Se debe configurar el tipo mime correcto (text/cache-manifest) en el servidor Web, porque si no, el navegador no lo va a reconocer.

En apache, el archivo mime.types se encuentra en el fólder /conf/ al final del archivo se escribe:

#HTML5 applicacion cache_offline access

text/cache-manifest manifest

Si no se tiene acceso a esa carpeta entonces se crea un archivo .htaccess en el directorio Web con la siguiente línea:

AddType text/cache-manifest .manifest

Con esto la aplicación debe funcionar correctamente, la segunda  vez que un usuario visite la aplicación, los recursos listados en el archivo se descargaran localmente de su dispositivo. (Móvil o desktop).

Actualizando el archivo.

Cuando el usuario visita el sitio, el navegador compara los archivo manifest (local y remoto) y checa si son iguales, si el archivo remoto cambió, el navegador descarga todos los archivos listados en el.

La comparación del contenido de los archivos se realiza byte por byte (incluyendo comentarios y líneas vacías), el cambio de alguno de los archivos listados en el manifest es irrelevante para determinar si se hizo algún cambio o no.

Hay que tomar en cuenta que cuando se actualiza un archivo, la descarga de los nuevos archivos se hace en el fondo, después de que se cargó la web app. Esto significa que incluso después de descargar los nuevos archivos, el usuario seguirá trabajando con los archivos viejos. Los archivos nuevos que fueron descargados en el fondo, no serán visibles hasta que el usuario vuelva a lanzar la aplicación. (leer mas adelante la solución a esto).

También es posible forzar al navegador a cargar ciertos recursos de la red siempre, por medio de la instrucción NETWORK,  por ejemplo si quisiéramos que una imagen siempre sea solicitada del servidor web, dentro del archivo manifest se declara de la siguiente manera

NETWORK:
imagen.jpg

El problema de esto es que si la aplicación se corre cuando no hay conexión, la imagen se tratara de cargar desde el servidor, para solucionar esto se puede utilizar otra instrucción para especificar que si no existe conexión se cargue un archivo local, y si hay se cargue el archivo desde el servidor.

En lugar de la instrucción NETWORK se utilizaría FALLBACK de la siguiente manera:

FALLBACK
imagen.jpg imagenLocal.jpg

Cuando el usuario tenga conexión la aplicación solicitará al servidor imagen.jpg y cuando no tenga usará la imagen del cache (imagenLocal.jpg).
También se puede especificar una sola imagen para mostrar cuando la aplicación este sin conexión, en lugar de todas las imágenes que se muestran en la aplicación.

FALLBACK
_img/ _img/imagenLocal.jpg

Objeto applicationCache.

Como ya expliqué, cuando un usuario visita una página que tiene un archivo manifest, el navegador trata de comparar o actualizar el cache, lo hace comparando los archivos (local y del servidor). Si los archivos son diferentes, se descargan los recursos y se almacenan de nuevo.

Mientras esto pasa, varios eventos se disparan en un objeto llamado ApplicationCache, con este objeto por ejemplo podemos actualizar al usuario con los nuevos archivos descargados,  sin necesidad de volver a lanzar  la aplicación.

API.

cache = window.applicationCache

Regresa un objeto ApplicationCache del documento activo de la ventana.

cache.status

Regresa el código de estatus actual del objeto con las siguientes constantes:

0 : uncached

1 : idle

2 : checking

3 : downloading

4 : updateready

5 : obsolete

cache.update()

Invoca el proceso de descarga de cache, arroja una excepción  de tipo INVALID_STATE_ERR en caso de que no exista cache para actualizar.

cache.swapCache()

Cambia el cache mas reciente en caso de que exista uno, si no, arroja una excepción de tipo  INVALID_STATE_ERR

Ejemplo.

Para actualizar la aplicación con los archivos nuevos sin recargar la aplicación:

Window.applicationCache.addEventListener(‘updateready’, function(){
Window.applicationCache.swapCache();}, false);

Esta característica es muy importante para el futuro de las aplicaciones Web móviles, el limite en iphone al parecer es de 5mb, en los demás dispositivos (Android, blackBerry, Palm) aun no lo he encontrado.

Rápida Introducción a threeJS

septiembre 28, 2010 Deja un comentario

threeJS es una libreria javascript creada por mrdoob con la que se puede  crear contenido 3D directo en el navegador, sin necesidad de un plugin adicional.

Descarga.

threeJS está en  github, para descargarlo hay que visitar esta dirección http://github.com/mrdoob/three.js

Antes de comenzar.

Para ver los ejemplos de este post, es necesario tener un navegador compatible con canvas, y tomar en cuenta que algunos de estos pueden tardar  tiempo en cargar.

Conceptos básicos de 3d.

Para comenzar vamos a definir algunos conceptos básicos para la programación 3d:

Escena.-Es la composición entera de objetos 3d en un espacio 3d, es como el stage en flash con 3 ejes, cualquier objeto que se necesite ver en la escena debe ser agregado, si no son agregados, no se ven.

Sistema de coordenadas.

Código para crear y agregar elementos a una escena 3d.
escena = new THREE.Scene();
escena.addObject( objeto3D);

Camara.- La camara define el punto de visión del cual se esta viendo la escena, la camara no es un objeto visible por lo tanto no se necesita agregar a la escena.

Código para  crear una cámara
camara = new THREE.Camera( fov, aspect, near, far );

Viewport.- Es como el lente de la camara, muestra la salida de lo que la camara ve, es la ventana de una escena 3d. Funciona como una ventana del mundo real, haciendola grande no afecta como se ve el mundo de fuera, pero si afecta que tanto podemos ver.

Objeto 3D.- Es una forma en un espacio 3d, tiene 3 ejes y lo podemos colocar en cualquier parte del escenario 3d.

Con threeJS vienen algunos objetos como el plano, el cubo, el cilindro, la esphera

Material.- El material es la textura que es impresa en un objeto, si un objeto no tiene un material aplicado entonces será invisible.

Con threeJS podemos aplicar colores, imagenes  ó videos como materiales.

Motor de render.- Es como la película de la camara, cuando se ejecuta el render, mostrará información de la escena grabada por la camara al viewport, cuando se para el render el viewport solo muestra la última imagen captada.

Con threeJS podemos renderizar usando <canvas>, <svg> y WebGL, el código para crear un render y renderizar una escena es:
renderer = new THREE.CanvasRenderer(); // se crea el render de tipo canvas
renderer.setSize( 500, 500); // se especifica su tamaño
document.body.appendChild( renderer.domElement );// se agrega al documento
renderer.render( escena, camara );//Se renderea la escena con la camara asignada.

Composición de objetos 3d.- Los objetos 3d están compuestos de  Vertices y triangulos.

Vertices (Vertex, verts).- Un vertice es un punto 3d en el espacio y tiene 3 puntos cardinales (X,Y,Z) el orden siempre es ese.

Triángulos.- Los triangulos son formados por vertices, los triangulos también son conocidos como caras (faces) o caras de triangulo (triangle faces). Cada triangulo es compuesto de 3 vertices, los vértices definen la forma del triangulo y como tienen coordenadas XYZ es posible hacer la cara del triangulo en cualquier dirección.

Triangulos y Vertices

El objeto geometry es el que tiene el arreglo de todos los vertices de un objeto 3d.
geometry.vertices

Proceso general para creación de escenarios 3d.

La secuencia de procesos que suceden al mostrar algo en 3d es la siguiente:

Inizialización.- Es el proceso donde se crea la escena, la camara, los objetos 3d con sus materiales y  el tipo de render.

Proyección.- Convierte las coordenadas 3d en 2d para la pantalla. La proyección solo es en los vertices no con los triangulos o los materiales.

Renderizado.- Es el proceso de dibujar una imagen que se verá en la pantalla combinando los datos de la proyección 2d con la información acerca del material que esta siendo utilizado. Es la tarea mas intensiva del procesador.

Primer ejemplo creación de tres planos.

Este ejemplo muestra como crear planos en una escena 3d. Una vez cargado el ejemplo, se puede mover la cámara con los botones,  para ver la escena  de diferentes ángulos.
Para ver la explicación de la programación,  ver el código fuente del ejemplo.

Ejercicio 1, Creación de planos en 3 ejes

http://www.juan-anzaldo.com/2010/threeJS/1_ejercicio_Planos.html

Segundo Ejemplo creación de un Objeto 3d (cubo)

Este ejemplo muestra como crear un objeto 3d (cubo), además muestra  como asignar colores a cada una de las caras del cubo, una vez cargado el ejemplo, se puede rotar el cubo con los botones, para verlo de diferentes ángulos.
Para ver la explicación,  ver el código fuente del ejemplo.

Ejercicio 2 creación de un cubohttp://www.juan-anzaldo.com/2010/threeJS/2_ejercicio_Cubos.html

Tercer ejemplo esfera de esferas.

Este ejemplo muestra como crear una esfera de esferas, utilizando el arreglo de vertices de la esfera para posicionar esferas mas pequeñas en cada uno de los vertices, una vez cargado el ejemplo, se puede mover la camara con los botones, para ver la escena de diferentes ángulos

Para ver la explicación,  ver el código fuente del ejemplo.

Creación de esfera de esferas

http://www.juan-anzaldo.com/2010/threeJS/3_ejercicio_Esfera_de_esferas.html

Materiales.

Un material es como la textura de un objeto, sin material los objetos son invisibles. La diferencia entre material y textura es que la textura es la fuente (la imagen) que se va a usar por el material, el material es usado para definir propiedades que afectan como es usada la textura en el objeto.

Los archivos de los materiales se encuentran en la carpeta “materials” y constan de LineColorMaterial, MeshBitmapUVMappingMaterial, MeshColorFillMaterial, MeshColorStrokeMaterial, MeshFaceColorFillMaterial, MeshFaceColorStrokeMaterial, ParticleBirmapMaterial, ParticleCircleMaterial, ParticleDomMaterial.

Hay de varios tipos como de malla, de partícula, de imagen, de elementos dom.

Cuarto Ejemplo Aplicación de una imagen como material a una esfera.

Este ejemplo muestra como crear una esfera y aplicar una imagen como material, utilizando MeshBitmapUVMappingMaterial y usando canvas. Una vez cargado el ejemplo, se puede rotar la esfera con los botones.

Para ver la explicación,  ver el código fuente del ejemplo.

Aplicar materiales a una esfera

http://www.juan-anzaldo.com/2010/threeJS/4_ejercicioMateriales.html

Camara.

Una camara representa un punto virtual del cual nosotros vemos una escena y los objetos presentes en esta. En la carpeta cameras se encuentra el archivo camara.js. Una camara se puede rotar y mover en X,Y y Z. Aunque no tiene una representasión visual en la pantalla.

Parámetros para instancear una cámara..

Field of View (FoV), aspect, near, far.

Field of view.- Campo vertical de visión. Se expresa en ángulos.

Aspect.- La proporción entre el ancho y el alto.

Near.- Es la distancia del ojo al  plano cercano, qué es un plano imaginario perpendicular a la camara, cuando los objetos se acercan mas que el plano cercano, desaparecen.

Far.- Es la distancia del ojo al plano lejano, cuando un objeto pasa más lejos que el plano lejano, el objeto desaparece.

CamarasAnimación.

La animación es la ilusión de movimiento, threeJS permite al usuario interactuar libremente con objetos en la escena. Básicamente existen 3 tipos de objetos que podemos mover, Objetos 3d que tienen representación visual en la escena, Camaras  y Luces.

Para animar objetos tenemos estas tres propiedades del objeto Object3D

  • Posición ( position.x, position.y, position.z )
  • Rotación ( rotation.x, rotation.y, rotation.z )
  • Tamaño (scale.x, scale.y, scale.z )

La velocidad de animación con javascript depende  del tiempo, se anima usando un temporizador como el setInterval(), la animación corre a una velocidad constante y es relativamente independiente a la capacidad de cómputo del usuario.

Quinto ejemplo animación de camara.

Este ejemplo muestra como crear un temporizador  y aplicar una animación en los ejes Y y Z de la camara, una vez cargado el ejemplo, se puede tocar la animación presionando el botón. Para ver la explicación del ejemplo,  ver el código fuente del ejemplo.Animación de camara

http://www.juan-anzaldo.com/2010/threeJS/5_ejercicio_Camara.html

Estos son solo los primeros pasos para trabajar con esta librería, en la dirección de github o en el sitio de mrdoob se pueden ver ejemplos mas avanzados de lo que se puede lograr con esta librería.

Todos los ejercicios se pueden descargar de http://www.juan-anzaldo.com/2010/threeJS/ejemplosThreeJS.zip

Que es HTML5 Canvas, tutorial de animación básica.

septiembre 22, 2010 9 comentarios

Hasta hace poco, dibujar con javascript en el navegador no era nada fácil y la interactividad era muy limitada, para hacer estas funciones usábamos extensiones como flash o silverlight, que si bien son herramientas fantásticas para solventar las muchas limitantes de los navegadores, están atrapadas en una caja y no se integran muy bien con el resto de las tecnologías web (HTML, DOM, CSS).  Pero ahora con canvas de html5, al menos en la parte de dibujo, la extensión ya no es necesaria.

“Flash es una extensión de la Web, si la Web tiene las características que la extensión ofrece, la extensión ya no es necesaria”,  mrdoob.

El elemento <canvas> de HTML5 es la solución de la web para dibujar o trabajar con imágenes pixel por pixel y se integra perfectamente en el documento, se le puede dar estilo por medio de CSS y se puede programar por medio de javascript. No es una extensión es parte de la web.

Se puede pensar en el <canvas> como una etiqueta <image> programable, en lugar de dar la ruta de donde se encuentra el archivo fuente de la imagen, se puede dibujar la imagen directamente por medio del API de javascript. Es un elemento de mapa de bits que se puede usar para renderizar gráficos, juegos u otras imágenes visuales sobre la marcha.

El elemento canvas tiene dos atributos que controlan el tamaño, al igual que algunos elementos html, estos atributos son el ancho (width) y el alto (height). Cuando son especificados, deben tener valores enteros positivos. Si un atributo falta, se usan los valores por defecto, para el ancho es de 300 y para el alto es de 150, los valores son especificados en pixeles, sin embargo se puede dimensionar arbitrariamente usando una hoja de estilo CSS.

El proceso general para trabajar con canvas, es poner la etiqueta <canvas> dentro del <body> del documento, especificar un id, el ancho y el alto como atributos de la etiqueta, después, por medio de javascript se crea un manejador para el canvas y se obtiene lo que se llama un contexto (context). El contexto es el objeto que tiene el API para dibujar sobre el canvas.

El primer argumento al obtener el contexto especifica el tipo de API con el que se desea programar, los demás argumentos son manejados por esa API.

Hasta el momento la especificación de canvas soporta 2 contextos “2d” y “webgl”  (que es soportada por webkit y firefox), lo que abre la posibilidad de dibujo 3d en el futuro, para mas información sobre webgl:

http://es.wikipedia.org/wiki/WebGL, https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html

La lista de contextos soportados están en la página de contextos de canvas en http://wiki.whatwg.org/wiki/CanvasContexts

El contexto 2d representa una superficie de dibujo que es un plano cartesiano. El origen (0,0) esta en la esquina superior izquierda, los valores en X se incrementan a la derecha, y los valores en Y se incrementan hacia abajo en el espacio de coordenadas.

Creamos la superficie de dibujo con el método getContext(“2d”).

Sistema de coordenadas

Lo que haremos en este tutorial es al dar clic sobre un elemento, mover tres círculos de la orilla izquierda al centro uno por uno, con un efecto de desaceleración cada una.

El ejemplo esta en: http://www.juan-anzaldo.com/2010/HTML5canvasG/tutorialCanvas.html

HTML

Código HTML

La parte del código html anterior:

<canvas id=”Stage” width=”800″ height=”460″>

</canvas>

crea un elemento tipo canvas y se especifican los atributos id, ancho y alto, así como se le asigna una clase para darle estilo. Se debe de tener cuidado de siempre establecer el ancho y el alto para evitar errores.

CSS

Código CSS

stage, es la clase que se aplica al elemento canvas, especificando el ancho, alto, color de fondo y color de borde.

JAVASCRIPT

Javascript parte 1

De inicio creamos una variable que hace referencia al elemento canvas :
var stage = document.getElementById(“Stage”);

Despues verificamos si existe soporte para canvas en el navegador

if (stage.getContext)

Si existe el soporte entonces empezamos creando una función para crear los círculos, los parámetros de la función son: la posición x, la posición y, el radio y el color.

En la imágen se resalta el método dibuja que es el que sirve para dibujar el círculo en el canvas por medio de instrucciones del contexto 2d. El contexto 2d funciona por medio de “trazados” (paths). Un trazado es una lista de cero o mas subtrazados. Un subtrazado consiste de una lista de uno o mas puntos conectados directamente por medio de líneas o curvas, y una bandera que indica si el subtrazado es cerrado o no. Un subtrazado cerrado es uno en donde el último punto del subtrazado está conectado al primer punto del subtrazado por una línea (o curva) directa. Los subtrazados con menos de 2 puntos son ignorados cuando se pinta el trazado.

Para dibujar el circulo se usan los siguientes métodos del contexto 2d:

beginPath.- Método que Restablece el trazado actual, este método vacía la lista de subtrazados, por lo tanto el contexto se restablece a cero subtrazados.
fillStyle.- Atributo que representa el color o el estilo que se usa para el rellenado de las formas, se usa para cambiar el estilo de relleno. contexto.fillStyle [ = valor ] el valor puede ser un color CSS, un gradiente (CanvasGradient) o un patrón (CanvasPattern), los valores inválidos son ignorados.
strokeStyle.- Representa el color o el estilo que se usa para las lineas alrededor de las formas. contexto.strokeStyle [ = valor ]
arc(x, y, radio, ángulo inicial, ángulo final, contrario de las manecillas del reloj).- Este método dibuja un arco. Los puntos de inicio y de final del arco se definen cconsiderando que un circulo tiene su origen (x,y) y que tiene un radio (radio). Ángulo inicial y  ángulo final se encuentran a lo largo de la circunferencia del círculo, medidos en radianes, en dirección a las manecillas del reloj, son los puntos de inicio y fin respectivamente. Sí el parámetro “contrario de las manecillas del reloj” es falso y el ángulo final menos el ángulo inicial es igual o mayor a 2π, o, si el argumento “contrario de las manecillas del reloj” es verdadero y el ángulo inicial menos el ángulo final es igual o mayor a 2π, entonces el arco es toda la circunferencia de el circulo. De otra manera, el arco es una trayectoria a lo largo de la circunferencia del circulo, desde el punto de inicio hasta el punto final. Valores negativos para el radio causan una excepción INDEX_SIZE_ERR.
closePath.- Este método marca al último subtrazado del trazado como cerrado,crea un nuevo subtrazado especificando como primer punto,  el primer punto del subtrazado anterior, y finalmente agrega a este nuevo subtrazado al trazado, si el contexto no tiene subtrazados no hace nada.
fill.- Método que se usa para llenar todos los subtrazados del trazado actual, usando fillStyle, los subtrazados abiertos, son implícitamente cerrados cuando se llenan (sin afectar a los actuales subtrazados).

Seguimos:

Javascript Parte 2

Cada vez que dibujamos sobre el canvas debemos “limpiarlo” o borrar todo lo que este dibujado, una manera de borrar es dibujando un rectangulo con las mismas dimensiones que el canvas y especificar el color de relleno el mismo que el color de fondo del canvas, la función limpiarStage es lo que hace.

La función dibuja sirve para que cuando esté corriendo la animación, se mande llamar y vaya dibujando cada circulo esto quedara claro mas adelante.

Javascript Parte 3

En el código anterior definimos las variables para la animación y en la siguiente imagen la función para ejecutar la animación.

Javascript Parte 4

La función animaC sirve para mover los círculos de la orilla izquierda hacia el centro por el eje de las X, cuando el primer circulo llega al centro, entonces empieza el segundo y cuando llega el segundo al centro entonces empieza el tercero.

Para la desaceleración o easing se usa una formula que lo que hace es pasar de un valor a otro, disminuyendo la velocidad al acercarse al valor final.

p += ( pf – pa ) / v
donde:
p = posición
pf = posición final
pa = posoción actual
v = velocidad

Si el simbolo actual llega a 400 (ó se pasa) entonces se termina el temporizador que hace la animación, se incrementa en 1 la variable que guarda el indice del arreglo de animaciónes y se comprueba si hay un simbolo en el arreglo con el indice nuevo, si lo hay entonces se actualiza el simbolo actual y se vuelve a generar otro temporizador.

Por último:

Javascript Parte 5

Para finalizar,  la función comenzar, es la  que empieza la animación y es ejecutada del elemento <a> que esta en el html.

Canvas es muy bueno para aplicaciones donde se tenga mucha animación, o para juegos basados especialmente si no se necesita mantener el rastro de todos los objetos que se encuentran en el. Al no mantener el rastro de donde se encuentran todos los objetos, no se sobre carga la memoria.

http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element

Interface 2d  : http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvasrenderingcontext2d

A %d blogueros les gusta esto: