|

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

Similar Posts

|

WebSockets en HTML5

ByLuis

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); 
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data);  };
  ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
  // the browser doesn't support WebSocket.
  alert("Websocket is not supported in your browser");
}

HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Vía / DZone

|

phpWebSite: CMS para creación de webs

ByLuis

phpWebSite es un CMS que nos facilita la creación de webs. Que con la ayuda de una administración web podremos mantener y gestionar nuestra web de forma sencilla.

Además el diseño puede ser cambiado gracias a un layout flexible. La contenido está organizado mediante categorías y puede ser ampliado mediante comentarios de otros usuarios.

Existe muchas caracterís y el desarrollo crece rápidamente mediante la creación de nuevos módulos.

phpWebSite

Vía / International PHP Magazine

| |

Jakarta Tapestry paso a paso

ByLuis

Jakarta TapestryJakarta Tapestry es un framework de código abierto de Apache que está pensado para realizar aplicaciones web en Java que sean dinámicas, robustas y altamente escalables, que funciona en todo contenedor de servlets o servidor de aplicaciones. La filosofía de Tapestry se basa en lo siguiente:

  • Simplicidad en la creación de aplicaciones web.
  • Consistencia a la hora de que distintos desarrolladores pueden encontrar soluciones similares a problemas similares.
  • Eficiencia, las aplicaciones deben ser escalables.
  • Reacción ante los errores, aportando modos de diagnósticos.

Aquellos que estéis interesados podéis ver esta guía paso a paso que nos ofrece sitepoint.

Jakarta Tapestry

Guía

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

Permitir que IE aplique estilos a las etiquetas HTML5

ByLuis

El que los navegadores antiguos o IE no acepten etiquetas HTML5 no suele ser un problema a la hora de mostrarlas, el problema viene a la hora de aplicar estilos e IE que no le aplica los estilos, ya que IE ignora las etiquetas.

header { /* sus estilos */ }
section { /* sus estilos */ }
footer  { /* sus estilos */ }

Para ponerle solución, se puede crear un elemento dinamicamente antes de aplicar los estilos, y por arte de magia (o desesperación) tendrá los estilos al elemento.

html5shiv

|

Adding Stroke to Web Text

ByLuis

Fonts on the web are essentially vector based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that …

Post original

4 Comments

  1. He estado mirando tu blog y me encanta, tienes muchos trucos realmente interesantes. Sin embargo mi blog es de blogger. ¿Tienes algun consejo para él?

  3. Permisón, estoy de acuerdo contigo, yo aún soy reacio a usar HTML5, pero si creo interesante ir aprendiéndolo para cuando sea estándar no tener que darme el palizón

Comments are closed.