Etiquetas

How some of you know google launch its own site (HTML5ROCKS) explaining how to use html 5, its features and other interesting things about html 5.  The next is a list of what google recommend to us to make faster applications and delivery a better experience to our user.

-Use web storage in place of cookies.

HTML5 included two storage objects : sessionStorage and localStorage this objects allow us to use client side storage and avoid send our cookies on the HTTP Request Header like actually happen, which can impact our response time

– Use CSS Transitions instead of JavaScript animation

Using CSS Transitions we can do attractive visual effects between two states and we can do that using much less code that we would use with javascript, sending less bytes to the browser.

Use client-side databases instead of server roundtrips

Two new object Web SQL Database and IndexedDB introduce databases to the clientside, this let us avoid server round trips decreasing our needs o make XMLHttpRequest and postback to the server.

– JavaScript improvements lend considerable performance advantages

The inclusion of new functions on javascript allow us to use native function in place of include our on js files to handle certain situations,  somo sample are the inclusion of  String.trim and JSON parsing (via JSON.parse()).

– Use cache manifest for live sites, not just offline apps

A new objet cache.manifest, cache the markup via the cache.manifest, and then deliver JSON over the wire to update the content.

Enable hardware acceleration to enhance visual experience

With hardware acceleration supported and enabled, animated translation, rotation, scaling and opacity will definitely be smoother with GPU compositing.

For CPU-heavy operations, Web Workers deliver

Web Workers defines an API for running scripts in the background independently of any user interface scripts.

This allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.

Some possible situations where you could use Web Workers:

  • Text formatting of a long document
  • Syntax highlighting
  • Image processing
  • Image synthesis
  • Processing large arrays

HTML5 Form attributes and input types

New input types searchtel,urlemaildatetimedatemonthweektimedatetime-localnumberrange and color, and new attributes like required attribute  that won’t let the form submit until that file is filled or the pattern attribute that  lets us specify a custom regular expression for the input to be tested against; with invalid values blocking form submission.

– Use CSS3 effects instead of requesting heavy image sprites

We could use CSS3 to supplant our use of images to represent the visual design, CSS3 delivers many new styling possibilities, that for example allow us replace a a 2k image with 100 bytes of CSS.

WebSockets for faster delivery with less bandwidth than XHR

WebSockets has very light framing, and so the bandwidth it consumes is often lighter than that of XHR

Cómo algunos de ustedes saben Google lanzo su propio sitio (HTML5ROCKS) para explicar cómo utilizar HTML 5, sus características y otras cosas interesantes sobre HTML 5. La siguiente es una lista de lo que Google nos recomiendan para hacer más rápido nuestras aplicaciones y prestar una mejor experiencia a nuestros usuarios.

-Uso de almacenamiento web en lugar de cookies.

HTML5 incluyó dos objetos de almacenamiento: sessionStorage y localStorage estos objetos nos permiten usar el almacenamiento del lado del cliente y evitar enviar  nuestros “cookies” en el encabezado de solicitud HTTP, como actualmente sucede, lo que puede afectar nuestro tiempo de respuesta.

– Usar transiciones CSS en lugar de animaciones JavaScript

Con el uso de transiciones  CSS podemos hacer atractivos efectos visuales entre estados y podemos hacer esto con mucho menos código que el que usaríamos con Javascript, y de esta manera enviar menos bytes al navegador.
– Utilización de bases de datos de cliente en lugar de viajes al servidor
Dos nuevos objetos Web SQL Database y  IndexedDB introducen  las bases de datos al lado del cliente, con esto vamos a evitar viajes servidor y disminuir nuestras necesidades de  hacer peticiones XMLHttpRequest y postbacks.
– Mejoras en Javascript introducen considerables ventajas de rendimiento

La inclusión de nuevas funciones en Javascript nos permite utilizar funcionalidades de manera nativa en lugar de incluir a archivos js para manejar ciertas situaciones, ejemplos como lo  son la inclusión de String.trim y JSON parsing (a través de JSON.parse ()).
– Usar cache manifest para sitios online, no sólo aplicaciones offline

Un nuevo objeto cache.manifest, cachéa el html  través del cache.manifest, y luego devuelve JSON para actualizar el contenido.

– Habilitar aceleración de hardware para mejorar la experiencia visual
Con el soporte a la aceleración de harward, las transiciones animadas, rotación, escalado y opacidad será definitivamente más suavisadas con la composición por GPU.
– Para las operaciones de CPU pesadas, usar Web Workers

Los Web Workers definen una API para ejecutar scripts  en segundo plano con independencia de los scripts  de interfaz de usuario.

Esto permite que los scripts  de larga duración que no se vean interrumpidos scripts  que responden a los clics u otras interacciones del usuario, y permite que las tareas largas puedan ser ejecutadas afectar el tiempo de respuesta.

Algunas posibles situaciones en las que podrían utilizar los Web Workers:

• Formato de texto de un documento largo

• Resaltado de sintaxis

• Procesamiento de imágenes

• Síntesis de imágenes

• Procesamiento de grandes matrices
– HTML5 atributos Forma y tipos de entrada

Inclusión de nuevos tipos de input field :searchtel,urlemaildatetimedatemonthweektimedatetime-localnumberrange y color y nuevos atributos como el atributo required que no permitirá un form submit hasta que el campo este lleno, o el atributo pattern que nos permite especificar una expresión al contenido de un campo de manera que si no coincide la entrada se envite el form submit.

– Utilizar efectos de CSS3 en lugar de hacer petición de imágenes pesadas

Podríamos usar CSS3 para suplantar el uso de imágenes para representar el diseño visual, CSS3  ofrece muchas nuevas posibilidades de estilo, lo que por ejemplo nos permite sustituir una imagen de 2k por un CSS de 100 bytes .

– WebSockets para una entrega más rápida con menos ancho de banda que XHR

WebSockets posee un  framing muy ligero, por lo que el ancho de banda que consume es a menudo más ligero que el de XHR