¡HTML5! ¿Para qué sirve?

Hoy queremos publicar la traducción al español de un fantástico artículo firmado por Bob Duffy (@bobduffy), Community Manager del área de Desarrollo de Intel AppUp. ¡No os lo perdáis!

 



"En lo que se refiere a opiniones sobre el HTML5, parece ser que se divide en las corrientes del ‘todo’ o del ‘nada’.  Mientras algunos creen que HTML5 es el ‘mesías del código fuente’, otros creen que es un gran despliegue publicitario alimentado desde dentro de la industria poseedora de los servicios de las API o las plataformas, tratando de superar los obstáculos en el desarrollo de las tecnologías propietarias.

Mi perspectiva se inclina en el ‘depende de lo que estés desarrollando’. Pero debes estar atento, se está acercando. Es una tecnología que está madurando rápidamente y está irrumpiendo con fuerza. Igual que el iPhone cambió nuestra visión sobre dispositivos móviles, el HTML5 está cambiando nuestra percepción de cómo desarrollar aplicaciones. En el desarrollo nativo se puede observar un cambio, y HTML5 puede ser lo suficientemente bueno para gran cantidad de aplicaciones, pudiendo haber métodos en el uso de HTML5 que permitan llegar a la experiencia que estás intentando crear.

En primer lugar, no soy ningún experto, pero estoy lleno de opiniones (el signo de cualquier blogger), dando la bienvenida a todos aquellos experto capaces de corregirme.


Lo que se puede hacer en HTML 5

Hay una serie de nuevas ‘tags’ en el lenguaje de marcas que se centran principalmente en el dibujo, la animación/multimedia para HTML5 asimilándolo ligeramente a Flash. Como mucha gente sabe, Flash es increíble. Es la mejor combinación de herramientas WSYWYG y herramientas de scripting para crear arte, y convertir este arte en interactivo. Esa es la idea de HTML5 (pero sin herramientas WYSIWYG).

Algo similar a Flash ActionScript, que puede crear un script con la forma de un dibujo en movimiento junto a los píxeles de colores de la pantalla. Aquí está un post de William Malone
que compara dos imágenes (las que aparecen a la derecha de estas líneas) en ActionScript y 
en ‘Canvas Element’ de HTML 5.

Ejemplo de algo de lo que se puede hacer en HTML 5: (Nota lanzar estas usando un navegador moderno como Firefox o Chrome)

 

El ‘Canvas Element’

Esto te proporciona un nuevo conjunto de comandos para dibujar y rellenar formas en la pantalla. Piensa en la zona de flash como un lienzo para integrar tu página HTML, pero guardando todo el código del trabajo en archivos HTML. Puede ser una parte de su aplicación o puede ser la aplicación al completo. Dentro de Canvas puedes ilustrar formas complejas y llenar esas formas con colores y degradados o se pueden colocar las imágenes en el lienzo. También es posible aplicar efectos increíbles que permiten transformar y ajustar las propiedades de las fotos e imágenes. Echa un vistazo a estos ejemplos de Canvas

Juego en Canvas - tu escritura mejorará : ) http://www.chromeexperiments.com/detail/z-type/

Blow up video usando Canvas http://www.craftymind.com/factory/html5video/CanvasVideo.html 

Bonita foto a color procesada con una aplicación http://www.script-tutorials.com/demos/118/index.html

 

 

 Animación CSS

CSS permite que la posición, los elementos de contorno y relleno de la página puedan ser utilizados para animar. Tenemos que saber sobre todo que CSS posee un estilo similar a un sitio web, pero con peculiaridades especificas en CSS  que le permiten transformar (mover) los estilos en la pantalla con la animación entre los dos estados de estilo. Esto se puede hacer tan simple como cambiar el estilo de algo en la pantalla, de un estado de cursor del mouse o al hacer clic. Añadiendo imágenes y modelando el estilo, se pueden crear animaciones muy interesantes, no muy diferente de cómo las herramientas de 3D animan objetos. Ejemplos debajo de estas líneas:

Animación caminado con CSS3 http://www.chromeexperiments.com/detail/walking-with-css3/ 

Tutorial de animación en CSS http://www.the-art-of-web.com/css/css-animation/ 

 

 

 WebGL, JS3D

Para hacer juegos más complejos y animaciones gráficas en 3D, WebGL es una biblioteca de software que extiende el uso de Javascript que permite crear gráficos y entornos 3G. WebGL está basado en OpenGL ES, que es un API común de software de gráficos para la creación de juegos para dispositivos móviles.

Simulación de agua  http://www.chromeexperiments.com/detail/webgl-water-simulation/?f= 

 

Ahora hay más de HTML5 que de gráficos. Hay otros elementos como el elemento de vídeo <video> que te permite insertar uno sin utilizar un reproductor de Flash incrustado. Este es un gran problema, como la mayoría de todos los videos en la web que requieren de un plug-in de Flash. Hace poco YouTube cambió a una etiqueta iframe para incrustar sus vídeos en blogs y páginas web. Este cambio permite servir, ya sea en Flash o en video HTML5, en función de las capacidades de su navegador. Es difícil saber lo que YouTube está haciendo tras esto con el iframe, pero es posible que hayas estado viendo vídeos de YouTube en HTML5 sin saberlo.

HTML5 también permite el almacenamiento de datos en línea,  pudiendo guardar y recuperar datos de forma local. A medida que se muevan más sitios a las aplicaciones, este aspecto tendrá mucho más sentido. Las aplicaciones, a diferencia de sitios web,  se ejecutan, normalmente, de forma local en el dispositivo. Y al final esto podría ser el gran cambio en el pensamiento en el HTML. Aplicaciones previamente en HTML cargadas en el navegador que se conectan a otras cosas en la web. Ahora puedes ejecutar aplicaciones de HTML5 fuera del navegador y conectarse y hablar desde tu dispositivo.

Como parte del programa de desarrolladores, en AppUp ofrecemos una herramienta de empaquetado llamado Encapsulator que permite esto que se ha comentado. Con esta herramienta puedes hacer que tu aplicación en HTML5 se convierta en una aplicación ejecutable de forma local. Con este paquete de desarrollo para HTML5, puedes gestionar el almacenamiento de forma local y aprovechar AppUp como gestor de servicios digitales y de derechos. Todo esto es posible estableciendo el código que podría ejecutarse en una amplia variedad de dispositivos y otras plataformas.


La necesidad de herramientas y el cumplimiento de las normas

Difundir la capacidad de creatividad que permite y las bondades que aporta es una realidad. Pero eso es como dar a un maestro carpintero un trozo de madera con la que también podrá crearte algo asombroso. Para la mayoría de los desarrolladores, estas capacidades suponen un gran paso adelante. Sin embargo, la herramienta Flash no se encuentra. Y para que HTML5 sea más accesible en un mundo cada vez mayor de desarrolladores de aplicaciones, la industria necesita desarrollar las herramientas que permitan la creación de aplicaciones en HTML5.

No me malinterpreten. HTML5 es fácil de aprender. Yo lo puedo hacer, pero mi propia experiencia personal en HTML5 requiere una gran cantidad de su funcionalidad y el argot del código. Es como tener que forjar personalmente cada tornillo con el fin de construir un coche. Se necesitan mejores herramientas.

Al mismo tiempo, hay que creer en esto como el camino a seguir. Desde Adobe aún ven el HTML5 como parte de su plan de trabajo para la liberación de Adobe Edge, una nueva herramienta para ayudar a los desarrolladores a crear animaciones basadas HTML5. Sin embargo, esto proporcionará una gran plataforma que impulsará un nivel más de propiedad. Cualquiera que haya tratado de conectar su cámara digital por un puerto USB habilitado a un iPad sabe lo que estoy hablando. Y mientras que Apple ha inventado WebKit (la contribución de código abierto que se basa en HTML5), te habrás dado cuenta que Safari no es el navegador más resolutivo en HTML5. Y no es sólo Apple, todos los navegadores tienen su propio grado de compatibilidad con HTML5 en base a su propia versión de WebKit. Así que hay ya una fragmentación dentro de la nueva norma.

Al final hay un gran potencial de crecimiento. HTML5 es posiblemente más poderoso y un cambio de juego más amplio de lo que muchos podrían pensar, pero necesitamos mejores herramientas y la estandarización. Si los gigantes de la tecnología, uno tras otro, están de acuerdo con los estándares, siempre y cuando use el suyo, es como citar a la letra de Edwin Starr en "War" "la guerra no es nada, salvo una rompedora de corazones" eh!"

 

URL del artículo completo: http://appdeveloper.intel.com/en-us/blog/2011/08/30/html5-huh-what-it-good-absolutely

 

Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.