|

Revisión sobre HTML5

ByLuis

Aunque ya en su momento hablamos de las etiquetas que traerá HTML5, no hemos llegado a hablar del resto de novedades que quieren introducir en HTML5.

Aunque en otros sitios ya se ha hablado de ello, al no haber encontrado un artículo que me pareciera sencillo y completo, sobre todo porque no solo comenta aspectos técnicos, sino un poco de base y explicación de por qué es necesaria esta nueva versión. En este caso se trata de un artículo que nos indica los cambios/novedades principales:

  • Nuevos elementos, los cuales ya hemos mencionado y que están divididos en las siguientes categorías: elementos metadata (title, base, link), elementos de sección para dividir las páginas en secciones (body, section, nav y article), elementos de bloque (blockquote, section, p y div), elementos inline (a, meter e img), elementos estructurados ol, blockquote y table), elementos interactivos entre el usuario y la página vía teclado o ratón (a, button y radio), control de formularios y otros.
  • Cambios de programación en el DOM, introduciendo la nueva versión del DOM.
  • Formularios web actualizados.
  • Eventos server-sent.
  • Capacidades para gráficos dinámicos.

An Overview of HTML 5

Vía / dzone

Similar Posts

|

Microsoft patrocina una aplicación para convertir documentos Office a OpenDocument

ByLuis

MicrosoftMicrosoft va a patrocinar un proyecto open source para convertir los nuevos formatos de documentos de Office a OpenDocument. Aunque el formato de Office está mucho más extendido, OpenDocument está emergiendo poco a poco, sobre todo debido a gobiernos o instituciones.
Eso sí, avisan, la traducción de un formato a otro no va a ser prefecta, ya que los formatos de Office ofrecen más posibilidades que no cubre OpenDocument al ser más limitado (o sencillo). La aplicación funcionará en ambos sentidos: de Office a OpenDocument y viceversa.
Lo que yo no llego a entender es por qué patrocinar una aplicación, realizada por empresas socias de Microsoft, y realizarla en open source. Si es por tu propio interés y beneficio, pues realizalá y listo, no es necesario pintarlo de open source.
Vía / CNET News.com

Tutorial básico de HTML storage

ByLuis

Una de las características más interesantes de HTML5 es el browser storage, el cual nos permite almacenar datos en el navegador del cliente.

A parte de su uso básico:

localStorage.setItem('name', 'arman');  
var value = localStorage.getItem('name');  
localStorage.removeItem('name');

Me gustaría destacar dos puntos importantes: detectar si el navegador lo soporta y añadir eventos:

var webStorageSupported = ('localStorage' in window) && window['localStorage'] !== null; 
if (window.addEventListener) {  
  window.addEventListener("storage", handleStorageChange, false);  
} else {  
  window.attachEvent("onstorage", handleStorageChange);  
}  

function handleStorageChange(event) {  
  alert("Algo esta cambiando en el almacenamiento");  
}

El resto del tutorial explica todo paso a paso

Browser Storage for HTML5 Apps

|

¿Qué son los Microformatos?

ByLuis

microformats.pngÚltimamente se habla bastante de microformatos, pero la verdad es que está un poco confuso, por ello vamos a intentar explicar qué son, para qué lo podemos usar y ejemplos de algunos de ellos, aunque ya explicamos anteriormente un poco sobre ello.

¿Qué son?

La verdad es que la definición oficial nos puede dejar tal cual, sin entender palabra, por eso creo que son mejores las explicaciones que nos ofrecen otras personas. Traducimos:

Microformatos son códigos simples que tu puedes usar para identificar tipos de datos específicos, como personas o eventos, en tus páginas web.

Microformatos son un modo de publicar y compartir información en tu web de un modo bastante fiel.
Por ejemplo, si quieres que la información de contacto de tu empresa sea fácilmente identificable, puedes publicarlo mediante hCard. […]
La clave de los microformatos es que son suficientemente simples para que los diseñadores/desarrolladores web lo incluyan en sus páginas ellos mismos. Los microformatos son más sencillos que publicar feeds. No necesitas ser programador para poder usarlos. Alguien que sepa un mínimo de XHTML/CSS puede usarlos.

Pero lo más importante es que primero debe ser entendible para el ser humano y luego por las máquinas.

¿Para qué sirven? ¿Qué se puede hacer con los microformatos?

Con los microformatos puedes publicar información sobre eventos, tarjetas de visita de empresas, libretas de direcciones, … de forma que sea fácil de leer por una persona en una página web y que a la vez sea entendible para un ordenador, que luego la almacenará, indexará o tratará. Se trata de mostrar información y que queramos que ésta sea facilmente compartida (mediante la localización e indexación, por ejemplo). Tenemos una información y queremos que otros (hombres o máquinas) no se vuelvan locos intentando localizarla. En definitiva, ordenar información para que sea fáci y rápidamente catalogada y accesible.

Ejemplos

  • hCalendar: para mostrar calendarios y eventos
  • hCard: información sobre personas, compañías y organizaciones
  • rel-license: para indicar la licencia de uso
  • rel-nofollow: el enlace no debe ser analizado por motores de búsqueda
  • rel-tag: para indicar que el enlace es un tag
  • VoteLinks: para indicar el tipo de voto que se hace sobre una pregunta

Más información

|

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

|

Referencia HTML con ejemplos

ByLuis

Muchas de las veces, cuando estamos realizando páginas web y no usamos un editor HTML completo, nos puede ocurrir que no nos acordamos de una etiqueta HTML, de su utilización o de sus atributos.
Si te encuentras en esa situación, HTML Playground puede serte de mucha utilidad, ya que te muestra todas las etiquetas HTML, con su descripción y un código de ejemplo, el cual se puede visualizar y modificar.
htmlplayground.png
HTML Playground
Vía / Ajaxian