Mejoras Del Html5 Comparado Con El Html4

Mejoras del html5 comparado con el html4
HTML5 es la especificacin que define la quinta revisin importante del

lenguaje bsico de la World Wide Web: el Hypertext Markup Language (HTML).
HTML5 es la piedra angular de la Plataforma Web Abierta, un entorno de
programacin completo para aplicaciones multiplataforma con acceso a las
capacidades de vdeo, animaciones, grficos, estilo, tipografa y otras
herramientas de edicin digital, amplias capacidades de red, y mucho ms.
Entre las nuevas caractersticas cabe resaltar:
Nueva semntica y elementos estructurales
HTML5 multimedia: audio y video, Dibujo, animacin de grficos con el
elemento Canvas, interacciones con vdeo HTML5 Forms
API de JavaScript: DOM, la geolocalizacin, la orientacin
Persistencia: Dom almacenamiento, memoria cach, IndexedDB
HTML5 est aqu y ya se puede empezar a usar porque se est implementando
en los ltimas versiones de los navegadores esto beneficiar la creatividad de
los desarrolladores y diseadores Web podrn poner a prueba sus habilidades
a travs de numerosas nuevas funcionalidades.

Las principales diferencias entre HTML5 y HTML4
Estamos en un momento del desarrollo web muy activo, llevamos cierto tiempo
con gran cantidad de cambios, nuevas tendencias y sobretodo nuevas
necesidades. Por esto me siento afortunado de estar viviendo esta oleada de
cambios que a mi parecer algn da terminarn.
Un cambio que ahora estamos viviendo es el nacimiendo de HTML5, una
nueva revisin del estandard que mueve Internet y hace posble que ahora
estemos interactuando (los usuarios que leen la pgina).
El aumento de necesidades han dado lugar a la aparicin de nuevos tags, el
debate sobre el uso de otros y cambios ms o menos importantes pero que
debemos conocer.

1. Sintaxis
El trmino HTML posee una sintaxis compatible
con HTML4 y XHTML1 publicados en la red, pero no compatible con las
caractersticas ms esotricas del SGML de HTML4.
HTML5 define detalladas reglas de parse, incluyendo un control de errores,
para que esta sintaxis sea compatible con las implementaciones ms
populares. Los agentes de usuario seguirs las mismas reglas que para los que
actualmente tienen text/html.
El otro sintaxis que se puede utilizar para HTML5 es el llamado XHTML5, que
no es ms que una sintaxis compatible con XML y documentos correctos en
XHTML1. Los documentos servidos con esta sintaxis deben ser servidos
mediante el MIME application/xml.

2. Codificacin de carcteres
Al igual que sus hermanos menores, seguiremos podiendo definir el charset de
nuestro documento mediante el tag <meta charset="UTF-8" > o la correspondiente
versin de XML para XHTML5.

2.2. El DOCTYPE
El nuevo HTML5 requiere el elemento DOCTYPE que debe ser declarado al
proncipio de la pgina, de esta forma nos aseguramos de que el navegador
renderiza la pgina en modo estandard. En cambio para la versin XHTML5
este elemento es opcional debido a que XML actua de diferente manera dentro
de nuestro navegador.
<!DOCTYPE html >
3.1. Modelos estrictos de contenidos
HTML5 define de forma ms estricta el contenido para elementos <div /> y <li />.
Estos elementos ahora pueden contener contenido de elementos block o
inline pero no los dos. En HTML4 esto fue considerado como un bug de la
espeficacin ya que permita el uso de ambos.
Permitido:
<div>
<em></em> //contenido inline

</div>
<div>
<p><em></em></p>
<p></p> //Contenido block
</div>
pero no permite esto:
<div>
<em></em>
<p></p>
</div>
Otro cambio afecta al elemento <tfoot />, ahora podr aparecer al final de la
pgina, al igual que directamente despues del elemento <thead />.
<table border="1">
<caption>Nombre de la tabla</caption>
<thead>
<tr>
<th scope="col">COLUMNA 1</th>
<th scope="col">COLUMNA 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>DATOS 1</td>
<td>DATOS 2</td>
</tr>
<tr>
<td>DATOS 3</td>
<td>DATOS 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col">PIE 1</th>
<th scope="col">PIE 2</th>
</tr>
</tfoot>
</table>
3.2. Nuevos elementos
Los tiempos modernos requieren nuevos elementos para proporcionar una web
ms semntica, completa y homogenea. Para ello se han aadido una buena
serie de elementos que nos permitirn encapsular ms nuestro contenido.
<article /> elemento que nos permite declarar un trozo del contenido como
artculo. Ideal para blogs o peridicos.
<aside /> representa un trozo de contenido que se relaciona muy levemente
con el resto del contenido.
<dialog /> elemento que permite reprensetar conversaciones.
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
<figure /> podrs usarlo para asociar con un caption un contenido incrustado,
como por ejemplo grficos o vdeo:
<figure>
<video src=ogg></video>
<legend>Example</legend>
</figure>
<footer /> parece que me han leido la mente o quizas leyeron este post.
Seccin de la pgina para contener informacin sobre el autor, copyright, etc,
<header /> representa a la seccin de cabecera.
<nav /> representa la seccin de la pgina orientada a la navegacin.
<section /> elemento que indica que se trata de una seccin genrica.
<audio /> y <video /> para el contenido multimedia.
<embed /> es un elemento dedicado para contenido de plugins.
<m /> representa el texto marcado.
<meter /> usado para representar medidas, por ejemplo el tamao del disco
usado
<time /> usado para mostrar fechas y/o tiempo.
<canvas /> usado para mostrar grficos renderizados en tiempo real, por
ejemplo grficos, juegos, etc,
<commnad /> relacionado con los comandos que el usuario puede invocar.
<datagrid /> ideal para mostrar un arbol de datos o una tabla tabulada.
<details /> muestra informacin adicionar si el usuario lo demanda.
<datalist /> junto con el nuevo atributo list para los <input /> puede ser usado
para crear comboboxes:
<input list=browsers>
<datalist id=browsers>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
<event-sources /> puede ser usado para capturar eventos enviados desde
servidor.
<output /> nos indica que tipo de salida vamos producir con nuestra pgina.
<progress /> representa una barra de proceso de una tarea, por ejemplo
descargar,
Los elementos de entrada <input /> dispondrn de una serie de tipos (type)
nuevos para indicar los diferentes tipos de elementos de entrada posibles.
datetime
datetime-local
date
month
week
time
number
range
email
url
La idea es que estos tipos sean poporcionados por el agente de usuario
(navegador) en su interface que submitarn el formato definido al servidor.

3.3 Nuevos atributos
HTML 5 ha introducido una gran cantidad de nuevos elementos para varios
elementos de los que ya disponemos en la HTML4.
media: Para conseguir una mayor consistencia con el link en los elementos <a
/>
ping: Especificacremos una lista separada por espacios donde produciremos
un ping cuando se siga el enlace, para los elementos <area /> y <a />
target: Disponible para mejorar la consistencia con el elemento <a />.
autofocus: Destinado para indicar el elemento <input /> (no hidden), <select
/>,<textarea /> o <button /> que ha de coger el foco al cargar la pgina.
form: Atributo para <input />, <ouput />, <select /> <textarea />, <button
/> y<fieldset /> que permite que se sococien con un simple formulario.
replace: atributo para <input /> <button /> y <form /> que le afectar cuando
el contenido del elemento sofra algn cambio.
data: Para <form />, <select /> y <datalist />.
required: Para elementos <input /> (Excepto hidden e image) y <textarea />,
indica que el campo es obligatorio.
inputmode: Atributo para <input /> y <textarea />.
disabled: Para <fieldset />, permite desactivar el fieldset completo.
autocomplete, min, max, pattern, step: Para elementos <input /> permite
delimitar las posibilidades de nuestros elementos de entrada.
list: Para elementos <datalist /> y <select />.
template: Para <input /> y <button /> podr usarse para repetir templates.
scoped: Para elemento <style />, permitir usar hojas de estilo scoped ??
async: Para el elemento <script /> el ajax hecho atributo.

Atributos globales
Aparte de los ya existentes: class, dir, id, lang y title.
contenteditable: indica que se trata de una rea editable.
contextmenu: Puede ser usado como punto de men contexctual
proporcionado por el usuario.
draggable: indica que se trata de un elemento draggable.
tabindex: indica la posicin numrica a la que llegaremos pulsando la tecla
TAB.
irrelevant: atributo que indica que el contenido no es relevante.
repeat, repeat-start, repeat-min, repeat-max: atributos referentes a las
iteraciones.

3.4 Elementos Cambiados
Estos elementos de HTML5 son imcompatibles con HTML4.
El elemento <a /> sin href ahora crear un enlace al sitio.
El elemento <address /> es ahora un nuevo concepto de seccin.
El elemento <b /> ahora representa un trozo de texto a ser estilizado sin
ninguna importancia.
Para elementos <label /> el navegador no debe mover el foco desde la etiqueta
al control a menos que el comportamiento sea estandar para el interfaz
utilizado en la plataforma.
<menu /> ha sido redefinido para ser usado con los actuales mens.
El elemento <small /> ahora representa una impresin pequea.
El elemento <strong /> definitivamente representa el enfasis puesto en trozo de
nuestro texto.

3.5 Elementos eliminados
En la nueva versin, algunos de los elementos anteriormente
desaprovados pasan a ser eliminados definivamente.
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript (solo en XHTML5)
s
strike
tt
u
3.6 Atributos eliminados
Al igual que los elementos los atributos tambien pasarn a mejor vida.
rev y charset en <link /> y <a />
target en <link />
nohref en <area />
profile en <head />
version en <html />
name en <map />
scheme en <meta />
archive, classid, codetype, declare y standby en <object />
valuetype en <param />
charset en <script />
summary en <table />
header, axis y abbr en <td /> y <th />

4.1. Extensin de HTMLDocument
HTML5 tambien ha modificado el elemento padre del DOM Level 2. En l
encontramos una serie de mejoras y otras que finalmente se hacen estandares:
getElementsByClassName(), para seleccionar elementos por el atributo class.
Ya lo comentamos hace tiempo y vimos que las diferencias a nivel de tiempo
de respuesta eran ms que satisfactorias.
innerHTML, aunque prcticamente se usa en todas, o casi todas, las
aplicaciones web existentes, por fn ser reconocido como estandar en la
especificacin. Adems aprovechando si inserccin se posibilita su uso en el
elemento padre.
activeElement, hasFocus(), nos permetir conocer el elementos activo en
tiempo real y el que tenga el foco.
getSelection(), devuelve un objeto con la seleccin actual.
designMode y execCommand(), muy usados para editar documentos.

4.2. Extensiones del Elementos HTMLElement.
A nivel de elemento el DOM tambien ha sufrido una serie de cambios que vale
la pena comentar.
getElementsByClassName(), nos permite seleccionar los hijos de cualquier
objeto que contengan una clase determinada.
innerHTML, nos permite leer/modificar el contenido de un nodo (al aadir crea
nodos texto con etiquetas).
classList, una implementacin muy interesante para vivir con className que
nos permite interactuar con las clases de los elementos, proporcionando
mtodos como has(),add(), remove() y toggle() con los que podremos trabajar
con las clases de nuestros elementos.
relList, funciona de igual forma que classList, pero sobre los atributos rel de <a
/>,<area /> y <link />.

Mejoras Del Html5 Comparado Con El Html4

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Mejoras Del Html5 Comparado Con El Html4

Загружено:

Авторское право:

Доступные форматы

Mejoras del html5 comparado con el html4

HTML5 es la especificacin que define la quinta revisin importante del

Вам также может понравиться