|

HTML5 Mini Template

ByLuis

HTML5 Mini Template is a HTML5 structured file who includes only minimum necessary CSS files to get you started with HTML5 development …

Post original

Similar Posts

links for 2006-09-27

ByLuis

links for 2007-05-03

ByLuis

links for 2006-07-27

ByLuis
|

Tres grandes tutoriales sobre HTML5

ByLuis

HTML5 Rocks ha publicado 3 tutoriales muy interesantes sobre desarrollo de HTML5.

El primero de ellos trata sobre cómo mejorar el rendimiento de las aplicaciones en HTML5, a parte de alguna que es puramente Javascript y no HTML5 (como guardar en una variable un elemento DOM y no buscarlo cada vez que vayamos usarlo), la mayoría de ellas trata sobre el uso de transiciones CSS3 por parte del navegador y no mediante el uso de Javascript, ya que así sería el navegador el que se encargue de ello y pueda optimizar su ejecución, por ejemplo:

  var elem = evt.target;
  // Modernizr es una librería que nos indica que elementos CSS3 y HTML5 dispone el navegador
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    // Mediante CSS3
    elem.style.transition = 'all 3s ease-out';
    elem.style.transform = 'translateX(600px)';
  } else {
    // Mediante jQuery
    jQuery(elem).animate({ 'left': '600px'}, 3000);
  }

El siguiente tutorial nos indica cómo meterle efectos CSS3 a nuestros textos, y la verdad es que alguno está muy currado. Claro que yo no soy muy partidario de usarlos según que tipo de publicación (se puede abusar mucho de ello), pero la verdad es que nos puede venir muy bien.

Y por último consejos HTML5 y CSS para convertir nuestra web a formato adaptado para móviles. Algunos trucos de rencimiento como el uso del almacenamiento local y algo bastante interesante cómo indicar la orientación o el viewport de la página:

Improving the Performance of your HTML5 App

Typographic effects in canvas

“Mobifying” Your HTML5 Site

Crear aplicaciones offline con HTML5

ByLuis

Cuando cada día la gente está más online, no está de mal del todo permitir que nuestras aplicaciones web se vean de modo offline, o crear una versión offline de nuestra web. Podemos preguntarnos para qué pensar en lo offline cuando todo el mundo está conectado a todas horas, pues por ejemplo para versiones para móviles, que no siempre se está 100% conectado.

HTML5 permite indicar qué elementos de nuestra web se pueden ver offline o mostrar una página offline en caso de que se acceda a ella. Su uso es bastante sencillo y no nos llevará mucho tiempo.

Lo primero es indicar el manifiesto:

El manifiesto será un fichero que contendrá la información sobre los ficheros cacheables, la página a mostrar offline o contenidos no cacheables. Para que el navegador lo entienda habrá que indicar su MIME type:

AddType text/cache-manifest manifest

Luego habrá que indicar en el fichero que es un manifiesto añadiendo CACHE MANIFEST a la primera línea y luego indicando los ficheros cacheables, la página offline o los contenidos no cacheables:

CACHE MANIFEST
# v1
# Contenido cacheable
pagina.html
pagina.css
pagina.js
pagina.png
# Pagina offline
FALLBACK: / /estoy-desconectado.html
# Paginas dinamicas no cacheables
NETWORK: /path/*

Si la aplicación ha cambiado y necesitamos que el navegador lo refresque, deberemos modificar el fichero, por ejemplo cambiando el número de versión. El fichero .manifiest también puede ser cacheable (mediante htaccess, por ejemplo), ya que el navegador intentará acceder a él siempre que se acceda a la página.

No hay que olvidarse de la API del cache, el cual nos puede aportar mucho en nuestro desarrollo, sobre todo para detectar si el navegador está online u offline:

window.navigator.onLine

Offline Apps with Application Cache: Quickstart, Tips, and Deep Dive