Nuevos elementos y atributos para HTML 5

ByLuis

En WHATWG están trabajando en el borrador de la especificación de HTML 5. Entre los elementos y atributos nuevos que nos encontramos esta:

  • article: una sección de la página que es una parte independiente de un documento, página o sitio.
  • aside: contenido que está relacionado tangencialmente al contenido, suele representarse con los sidebars.
  • dialog: una conversación.
  • footer: pie de página de una sección.
  • header: cabecera de una sección.
  • nav: representa la navegación de la página.
  • section: documento genérico o parte de una aplicación.

A parte de los que se mencionan en el artículo, yo he encontrado otros que también me han llamado la atención:

  • ping: atributo de los enlaces que contiene una lista de URIs que son interesantes de ser notificadas si el usuario sigue por ese enlace.
  • datagrid: corresponde a una represntación interactiva de una lista, árbol o datos tabulados.
  • progress: barra de progreso para representar el desarrollo de una tarea.

HTML5 Elements and Attributes

Vía / 456 Berea Street

Similar Posts

Detectar características HTML5 mediante Javascript

ByLuis

Aunque el HTML5 no está disponible en todos los navegadores, no es mala idea ir incluyendo en nuestras webs aplicaciones que hagan uso de HTML5, e ir dándole un poco de vidilla al asunto y no estar pendientes de Internet Explorer. Por ello, este script nos puede venir muy bien:

function detectBrowserCapabilities(){
  var res = new Array();
  res["userAgent"] = navigator.userAgent;    
  var hasWebWorkers = !!window.Worker;
  res["workersFlag"] = "" + hasWebWorkers;
  var hasGeolocation = !!navigator.geolocation;
  res["geoFlag"] = "" + hasGeolocation;
  if (hasGeolocation) {
    document.styleSheets[0].cssRules[1].style.display = "block";
    navigator.geolocation.getCurrentPosition(function(location) {
      res["geoLat"] = location.coords.latitude;
      res["geoLong"] = location.coords.longitude;
    });
  }
  var hasDb = !!window.openDatabase;
  res["dbFlag"] = "" + hasDb;
  var videoElement = document.createElement("video");
  var hasVideo = !!videoElement["canPlayType"];
  var ogg = false;
  var h264 = false;
  if (hasVideo) {
    ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
    h264 = videoElement.canPlayType('video/mp4; 
    codecs="avc1.42E01E, mp4a.40.2"') || "no";
  }
  res["videoFlag"] = "" + hasVideo;
  if (hasVideo){
    var vStyle = document.styleSheets[0].cssRules[0].style;
    vStyle.display = "block";
  }
  res["h264Flag"] = "" + h264;
  res["oggFlag"] = "" + ogg;
  return res;
}

Build Web applications with HTML 5

| |

Cómo crear márgenes según un contorno

ByLuis

Margen asimétricoHace unos días comentábamos sobre cómo realizar márgenes redondeados, prometimos al final de la entrada que íbamos a explicar paso a paso el proceso, por si hubiera alguien que le pudiera parecer insuficiente lo que se contaba en el artículo.

Se trata de colocar una imagen como fondo de un párrafo, si es necesario, se retocará para que tenga el fondo transparente o del mismo color que el fondo de la página, luego se crearán elementos html que se colocarán encima de la imagen del fondo, para evitar que se escriba el texto encima.

Read More “Cómo crear márgenes según un contorno”

|

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

37 pasos para un perfecto etiquetado HTML

ByLuis

Para aquellos que empiecen o para quienes aún sean un poco de la vieja escuela, el artículo al que hacemos referencia puede ser de gran ayuda ya que te explica desde lo más elemental a lo más semántico.
Hay un total de 37 puntos que nos explican qué es lo que debemos hacer o qué es cada cosa dentro de una página web. Empieza explicando lo que es un HTML, luego un XHTML, los diferentes tipos de XHTML, el DOCTYPE, la validación del documento, la codificación (recomendando UTF-8), el BOM dentro de un archivo UTF-8, las entidades, la semántica (el uso de cabeceras y de em o strong), los párrafos o los saltos de línea y muchas otras cosas más que recomendamos que leaís.
Bulletproof HTML: 37 Steps to Perfect Markup

|

Drag and drop de capas en páginas web

ByLuis

Cada día internet está mas llena de aplicaciones web que de documentos. El objetivo de un documento es mostrar información, mientras que en una aplicación se le debe añadir cierta interactividad.

Mover capas como si se tratara de las ventanas del sistema operativo es algo que nos puede aportar cierta vistosidad a nuestra página web, claro, que tampoco se debería abusar de ello. Con unas simples modificaciones en el diseño y un pequeño script, podremos crear este efecto.

Mostrar ejemplo

Read More “Drag and drop de capas en páginas web”