todo sobre html5
DESCRIPTION
Conceptos Fundamentales sobre HTML5: - Definición - Historia - Etiquetas Nuevas - Etiquetas Eliminadas - Doctype - Etiqueta HTML - Encabezado - La Codificación - Nueva Organización del Sitio - Incorporar Video - Otras Características - Validación de HTML5 - Soporte De Los Navegadores - ReferenciasTRANSCRIPT
TODO SOBRE HTML5Andrés Felipe Montoya Ríos
re.vu/AndresMontoya@montoya118
HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5.
DEFINICIÓN DE HTML5
La familia HTML5 incluye las nuevas etiquetas y tecnologías como:◦ CSS3◦ Geolocalización◦ Almacenamiento Web (Web Storage)◦ Web Workers◦ Web Sockets
Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles.
HTML4 se dio en 1998
Los diseñadores y desarrolladores lo han utilizado por muchos años, combinándola con CSS y JavaScript para mayor funcionalidad
Continuando con la evolución de la Web, se comenzó con XHTML1.0 el cual era más estricto y más valorado por los desarrolladores
ALGO DE HISTORIA
En 2004 se creó el grupo WHATWG (Web Hypertext Application Technology Working Group) integrado por representantes de fabricantes de navegadores y desarrolladores web
Su misión consistía en crear una especificación de lenguaje HTML mejor, orientada a crear un nuevo tipo de aplicaciones web pero manteniendo la compatibilidad con las versiones en activo de los navegadores existentes.
Durante unos dos años y medio el W3C y el grupo WHATWG trabajaron en paralelo y de manera independiente
En 2006, Tim Berners-Lee, creador de la World Wide Web y fundador del W3C, anunció que el W3C y WHATWG trabajarían juntos en la elaboración del estándar.
Como resultado de ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5.
No obstante, conviene recordar que HTML5 empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realmente HTML5.
Gracias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmente un estándar gratuito y con las suficientes garantías de no incurrir en problemas de propiedad intelectual.
<article> <mark> <aside> <meter> <audio> <nav> <canvas> <output> <command> <progress>
<datalist> <rp> <details> <rt> <embed> <ruby> <figcaption> <section> <figure> <source>
<footer> <summary> <header> <time> <hgroup> <video> <keygen> <wbr>
ETIQUETAS NUEVAS EN HTML5
<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset>
<noframes> <strike> <tt> <u> <xmp>
ETIQUETAS ELIMINADAS DE HTML4
El DOCTYPE, también llamado DTD, sirve para indicar al navegador a qué reglas de escritura obedece el código fuente de la página Html o Xhtml.
En ausencia de un doctype el navegador no sabe según qué reglas debe procesar la página. Se conforma con acogerse a reglas genéricas para renderizar a toda costa la página Html.
Doctype Antes:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
Ahora:<!DOCTYPE html>
EL DOCTYPE
La etiqueta <html> indica al navegador que se trata de un documento Html.
La etiqueta <html> puede incluir el atributo lang="es“. Especifica que el documento está en lengua española.
Esta información es muy valiosa para los motores de búsqueda como Google y para los programas de síntesis de voz usados por personas con dificultades visuales.
Quedaría algo así:<!DOCTYPE html><html lang="es">...</html>
ETIQUETA HTML
En la etiqueta Script cambia de la siguiente manera:
<script type="text/javascript">….</script> ó<script type="text/javascript" src="archivo.js"></script>
Por:
<script>…</script>Ó <script src="archivo"></script>
EN EL ENCABEZADO
En la etiqueta Style, usada para los css, quedaría de la siguiente manera:
<style type="text/css">...</style>Ó <link rel="stylesheet" type="text/css" href="archivo.css">
Por:
<style>...</style>Ó <link rel="stylesheet" href="archivo.css">
El juego de caracteres determina la forma en que los caracteres de un alfabeto se convierten en bytes en un archivo informático (y viceversa).
Con HTML 4.0:<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
Con HTML 5.0:<meta charset="iso-8859-1">
LA CODIFICACION DEL DOCUMENTO
La etiqueta <header> es para la información de la cabecera (logo, texto introductorio...)
<nav> para los menús de navegación
<section> y<article> para organizar los contenidos principales,
NUEVA ORGANIZACIÓN DEL SITIO
<aside> para los contenidos secundarios, como anotaciones laterales o espacios publicitarios
<footer> para incluir la información a pie de web (año, autor, información legal, etc.).
Antes de la llegada de HTML5 dependíamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vídeo.
Con HTML5 se resuelve esta necesidad ya que especifica un elemento HTML llamado <video> que funciona de manera nativa en el navegador y se integra con Javascript.
INCORPORAR VIDEO
Algunos atributos de la etiqueta:
Autoplay: sirve para que el video comience automáticamente.
Controls: activa los controles de reproduccion del video.
Poster: permite poner una imagen antes de reproducir el video. Una vez comience, la imagen desaparece.
Width, Height: permite definir un tamaño para el video
Ejemplo: <video src='videos/BigBuck.mp4' controls
poster='poster320.png' width='320' height='180'>
Existen otras características importantes, que pueden consultar en las referencias que se encuentran al final, las cuales son mas complejas. Estas son:
Drag&Drop Canvas Geolocalización
OTRAS CARACTERISTICAS
Las ventajas de un código fuente perfecto y por tanto de la validación son:
Comprensión y verificación en profundidad de Html5 por parte de programadores iniciados (y avanzados).
Asegurar que la página se mostrará siempre de forma correcta en la mayoría de los navegadores. Una página inválida puede llevar a los navegadores a interpretarla de forma muy distinta.
Demostración de su propia capacidad y profesionalidad a la hora de realizar un código de calidad, conforme a los estándares de Html5.
Los programas de síntesis vocal y otras ayudas técnicas dirigidas a personas con problemas de accesibilidad se basan en un código válido a la hora de procesar las páginas de la red.
VALIDACIÓN DE HTML5
Los validadores Html5 (en línea) disponibles son:
El validador de W3C:
W3C presenta un validador de código (validator.w3c.org). Lo cual es garantía de calidad. No obstante la validación de Html5 se anuncia todavía en un estado experimental.
Destaquemos:
Que está en inglés. Que ofrece la validación de un archivo a partir de su
dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto.
Que es muy potente. Que sus notas y explicaciones son muy técnicas o a veces
incluso sibilinas. Que es "la" referencia de los profesionales.
El validador de W3Québec
W3Québec es un organismo sin ánimo de lucro cuya labor consiste en promover el conjunto de normas, estándares abiertos y buenas prácticas de la Web y del mundo multimedia.
Proporciona un validador: En francés. Con la posibilidad de validar un archivo a partir de su
dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto.
Las advertencias y errores proporcionados están en francés. Le faltan explicaciones más explícitas para corregir el
código enviado. Se trata de una traducción al francés del sitio Web de W3C.
No existe una versión española a día de hoy. El validador de W3Québec (www.w3qc.org/validateur/)
El validador validator.nu
El sitio Web validator.nu proporciona, también en estado experimental, un validador de Html5 (html5.validator.nu/).
Fue el primero en proporcionar un validador de Html5.
Se puede subrayar: Que está en inglés. Que su interfaz es muy sencilla. Que ofrece la posibilidad de validar un archivo a partir
de su dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto.
Que parece de excelente calidad.
Si quieres saber que tan eficiente es el navegador que usas, puedes ingresar a la siguiente dirección:
http://www.html5test.com/
Ésta página califica al navegador desde el cual estés accediendo.
SOPORTE DE LOS NAVEGADORES
http://msdn.microsoft.com/es-es/ie/hh749019
Libro: HTML5 y CSS3 Domine los estándares de las aplicaciones Web, Luc VAN LANCKER
PC ACTUAL: http://www.pcactual.com/articulo/zona_practica/paso_a_paso/paso_a_paso_internet/9684/haz_tus_primeros_pinitos_con_html5.html?utm_source=dlvr.it&utm_medium=twitter
REFERENCIAS