¿Qué es HTML?

HTML son las siglas de HyperText Markup Language (“lenguaje de marcado de hipertexto”), es

decir, lenguaje que se usa para elaboración una página Web.

HTML utiliza una estructura de marcado de la información mediante etiquetas, en formato de

hipertexto, para incluir textos, imágenes, vídeos, sonidos, etc.

Este lenguaje, HTML, es leído e interpretado, por un navegador la Web, mediante el protocolo

HTTP (HyperText Transfer Protocol - Protocolo de Transferencia de Hipertexto) y nos muestra

el contenido en forma de documento, que es lo que conocemos cómo una página Web.

HTML se escribe con “etiquetas”, van rodeadas por corchetes angulares (< - >) y cada etiqueta

tiene unos atributos y eso atributos tiene unos valores.

¿Qué es la semántica HTML?

La semántica HTML es, utilizar las etiquetas para que realice las funciones que tienen y fueron

creadas, es decir, que cada etiqueta de HTML, fue creada para reflejar un tipo de contenido, y

no se debe usar para otros propósitos, por ejemplo:

Un párrafo está contenido entre la etiqueta <p></p>.

Una lista ordenada está contenido entre la etiqueta <ol></ol>.

Un bloque de texto citado es contenido entre la etiqueta <blockquote></blockquote>

Los elementos HTML no son usados para otro propósito que no sea el de la semántica. Por

ejemplo:

h1 contiene encabezados; no es para hacer el texto más grande.

blockquote contiene una cita larga; no es para aplicar sangría al texto.

Un elemento de párrafo vacío (p) no se usa para saltar líneas.

¿Qué es HTML5?

HTML5 es última la actualización de HTML.

Pero en realidad, HTML5 es un término de que se usa para agrupar varias tecnologías de

desarrollo de páginas Web: HTML5, CSS3 y nuevas capacidades de JavaScript (en especial con

la nueva etiqueta de HTML5: canvas).

¿Por qué surge HTML5?

Porque la versión anterior de HTML, es decir HTML4, carece de características necesarias para

soportar, los nuevos contenidos que se estaban incluyendo las páginas Web y se necesitaban

plugins de otras aplicaciones, como Adobe Flash, para que los navegadores mostrasen esos

contenidos.

Flash ha sido usado para reemplazar estas carencias que tenía HTML, a la hora de desarrollar

Web apps y que superaran las habilidades de un navegador: Audio, video, Webcams,

micrófonos, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras

cosas.

Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y sobre todo que existe una gran

compatibilidad y competencia entre navegadores, para incorporar los estándares de HTML5.

Además ha originado una guerra entre las compañías de estos navegadores para incorporar los

nuevos estándares de HTML5.

También el uso de JavaScript y de FrameWorks, cómo jQuery, Dojo.js, Ext JS, ShowCase, ect,

han ayudado a que estos contenidos se muestre en el navegador, sin la necesidad de tener que

instalar, estos plugins.

¿Qué va a pasar con las Web en HTML4?

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML seguirá

funcionando sin problemas en HTML5.

¿Cómo se crea una página Web?

Tenemos que saber que una página Web, se crea a partir de diferentes tecnologías.

HTML

CSS

JavaScript

A la hora de crea y maquetar una página Web, lo podemos hacer dos formas diferentes:

1. Escribimos tanto todo el código dentro del documento HTML, es decir, los etilos y el

código JavaScript, mezclado con el código HTML. Esta opción en un principio parece

más ventajosa, pero en el caso de que tengamos que modificar el código nos va a

resultar más tedioso y complicado. Y sobre todo si tenemos que modificar los estilos

de un sitio Web, tendremos que hacerlo página por página.

2. Escribimos el código CSS y JavaScript en documentos distintos y luego hacemos

referencia a esto documento, en el head del documento HTML, es decir, los etilos y el

código JavaScript, están en archivos distintos del código HTML. Esta opción en un

principio parece más complicada, pero en el caso de que tengamos que modificar el

código nos va a resultar más fácil y cómodo. Y en el caso de tener que modificar los

estilos de un sitio Web, sólo tendremos que modificar la línea del estilo deseado y se

aplicará a todas las páginas del sitio Web, de forma automática.

Cómo podéis comprobar la segunda opción, es un poco más complicada de realizar en tiempo

de desarrollo, pero las ventajas que proporciona a la hora de realizar modificaciones son

innegables.

¿Cómo se declara un documento HTML5?

Para empezar a usar HTML5, lo único que se tiene que hacer es colocar el DOCTYPE, al

principio del documento, es decir, antes de la etiqueta <html>.

Ejemplo en HTML5:

<!DOCTYPE html>

Esta declaración de DOCTYPE está más simplificada, que cuando se declaraba un documento

en XHTML y te permite usar todas las habilidades de HTML5.

Ejemplo en XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta http-equiv="content-language" content="es" />

Etiqueta dir = LTR | RTL [CI]:

Este atributo específica la dirección del texto, es decir, texto que no tiene direccionalidad

heredada según se define en [UNICODE] de los contenidos o los valores de los atributos de un

elemento. Valores posibles:

LTR: Texto o tabla de izquierda a derecha (Left-to-right).

RTL: Texto o tabla de derecha a izquierda (Right-to-left).

¿Cuáles son las nuevas etiquetas de HTML5?

La mayoría de las nuevas etiquetas de HTML5 no tienen una representación especial en

pantalla y se comportan cómo un <div> o un <span>. Pero cada una tiene un significado

semántico superior a un simple div o span.

<header>

Hacer lo mismo que cuando declarábamos en nuestro documento HTML, la capa de la

cabecera con: <div id="header"> en los proyectos Web.

<header> está diseñada para reemplazar la necesidades de crear una capa (div) sin significado

semántico.

<hgroup>

Muchos header necesitan múltiples títulos, cómo un Blog que tiene un título del nombre del

Blog o sitio Web y una línea (tagline) con el lema o explicando el contenido Blog o sitio Web.

<hgroup> permite escribir un h1, h2 y h3 dentro del header sin afectar el SEO, además nos

permitirá usar otra etiqueta h1 dentro del contenido del sitio Web.

En el HTML actual, sólo puedes usar h1 una vez por página Web o el h1 pierde prioridad en el

SEO.

<nav>

Tiene el mismo valor semántico que <header>, <nav> está diseñada para insertar la barra de

navegación principal, es decir, los botones para navegar dentro del sitio Web.

Se puede colocar cualquier etiqueta dentro, pero lo recomendado es usar listas <ul>. Y sólo

puedes haber un elemento <nav> por página Web.

<section>

Tiene el mismo valor semántico que <header>. Se usa para definir la sección donde está el

contenido dentro de la página Web, es decir, donde vamos a escribir lo que queremos que el

usuario lea en nuestra página Web. Se puede crear distintas secciones en una página Web

siempre y cuando cada sección tenga contenido único.

Por ejemplo:

En un Blog, sería la zona donde están los posts o artículos.

En un video de YouTube, habría un section para el video, uno para los datos del video, otro

para la zona de comentarios.

<article>

Define zonas únicas de contenido independiente. Por ejemplo:

En el home o página de inicio de un Blog, cada post o artículo sería un article y cada uno de sus

comentarios sería un <article>.

<aside>

Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un

aside. Por ejemplo:

En un Blog, el aside es la barra lateral de información o de enlaces a otro Blog. En el home de

un periódico, puede ser el área de indicadores económicos, el tiempo, enlaces a sígueme en las

redes sociales.

¿Cuándo se debe usar div, aside, section o article?

Hay que de diferenciar el uso de div, section y article. Aunque no es sencillo, tampoco es muy

complicado, para entender cuáles son los detalles que diferencian estas tres etiquetas, que

parecen que tienen las mismas funciones.

La diferencia está principalmente en la semántica que le vamos a dar al contenido. Por eso

usaremos:

Article: para representar cualquier información que tenga un sentido por él mismos.

Un ejemplo: un artículo de un Blog, el resumen de ese artículo en una portada de Blog,

una pregunta en un foro, un comentario…

Section: para agrupar contenido relacionado. Puede servirnos para enmarcar un

conjunto de artículos, o artículos que se dividan en secciones.

Aside: para agrupar contenido que no tiene relación con el contenido principal, cómo

pueden ser enlaces a antiguos artículos, redes sociales, enlaces al otras Web,

publicidad, etc.

Div no tiene intención semántica, es simplemente un contenedor de contenido.

Imaginemos un documento, que esta viene divida en secciones, para a entender mejor esta

información. Y las secciones pueden estar divididas en más secciones, que aglutinan el

contenido del documento (los artículos).

<footer>

Es el pie de página. La etiqueta footer representa el pie de un documento o sección. La

información que se suele añadir en este bloque es el autor del documento, enlaces a

contenido relacionado, información de copyright, avisos legales, etc.

Igualmente podremos agregar al pie información de contacto. Recordar que para ello

disponemos de otra etiqueta llamada address. Al igual que en la etiqueta anterior, a pesar de

su nombre, este elemento no tiene porque ir al final del documento o sección aunque suele

ser lo más normal.

Atención: div no está muerto

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando

necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado

semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.

Ejemplo de código con HTML5

<header>

<hgroup>

<h1>El Blog de Freddie Mercury</h1>

<h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2>

</hgroup>

</header>

<nav>

Aquí va la botonera de navegación

</nav>

<section>

<article>Aquí va un post, con su titulo en h2</article>

<article>Aquí va un post, con su titulo en h2</article>

<article>Aquí va un post, con su titulo en h2</article>

</section>

<aside>

Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc.

</aside>

<footer>

Pie de página, copyright, avisos legales, etc.

</footer>

Las etiquetas nuevas "importantes" de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y un buen

desarrollo Web, no es la razón por la que todo el mundo habla de HTML5.

Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las

personas que alaban su uso. Específicamente, las nuevas etiquetas son:

<video>

Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta

codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.

<audio>

Inserta audio sin necesidad de plugins. Se puede usar múltiples formatos, en especial mp3,

pero también depende del navegador.

<input>

Input ya existía cómo la etiqueta para insertar cajas de texto y botones en los formularios,

pero ahora es más poderosa, con la capacidad de insertar cajas tipo "email" que se

autovalidan, calendarios tipo "date", números, entre otras.

<canvas>

Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo para Javascript.

<svg>

Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de

Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

La segunda revolución de la Web y el soporte de HTML5 en navegadores antigüos

HTML5 la incorporación al desarrollo Web nuevas habilidades para facilitar la inserción

<video>, <audio> y <canvas>, con estos elementos, que cada vez eran más que necesarios, y

evitar la necesidad de recurrir a elementos externos, ni la instalación de plugins.

Sin embargo, no es el primer gran cambio de Internet. La primera gran revolución del

desarrollo Web vino en el 2004 con Gmail, que puso en funcionamiento el objeto

XmlHttpRequest, más conocido como AJAX.

Pocos son los que saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en

1999. Sí, el navegador responsable de detener la innovación de los estándares Web, es

también el creador de la innovación más importante sin la cual, cosas como Gmail, Facebook,

Google Maps o quizás Twitter, habrían sido inviables.

Internet Explorer, es también hoy la razón de la poca implementación de HTML5, en muchos

sitios Web, porque no incorporan los estándares de HTML5, hasta Internet Explorer 9, que sólo

se puede instalar en Windows Vista y 7.

Sin embargo, hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3

funcionen en IE. Gracias a los grandes hackers del mundo:

HTML5 Enabling Script: Permite usar las etiquetas semánticas dentro de IE6, 7 y 8

como si fueran div normales y permite utilizar CSS3. Sin este script, las etiquetas de

HTML5 son ignoradas en por el navegador IE y es imposible maquetar en HTML5, y que

se vea correctamente IE6, 7 y 8.

IE-CSS3: Este script permite usar cosas como bordes redondeados y sombras sobre

objetos de CSS3 en IE6, 7 y 8.

Selectivizr: Librería JS que nos simula el comportamiento de CSS en los navegadores

IE6-IE8.

Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene

soporte para múltiples capacidades de Javascript, HTML5 y CSS3.

Html5shiv: El código añade nuevos elementos HTML5 y también es compatible con la

impresión de elementos HTML5 e incluye los estilos predeterminados para los

elementos de HTML5, como bloque sobre el artículo y sección.

Para incluir Html5shiv en una página Web, sería:

<header>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</header>

Nuevas capacidades de JavaScript

JavaScript, el lenguaje favorito del desarrollador de FrontEnd y ha recibido muchas habilidades

y funcionalidades nuevas. Las más importantes son:

Web Storage

Las cookie es una forma cutre de guardar información en el lado del cliente, pero también es la

única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio.

Esto es muy poco, pero todo el contenido de las cookies va pegado a las peticiones HTTP que

se hagan al servidor. Lo que significa que por cada vez que el usuario recarga la página se tiene

que subir los KB que pesan todas las cookies que le hemos dado de nuevo al servidor.

Con Web Storage se soluciona este problema. Son variables que se pueden guardar en el disco

del usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB

y no sólo texto. Cualquier tipo de datos cabe en un Storage.

Web SQL

Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer 9

declaró que no implementará Web SQL y la realidad es que Web Storage es más que suficiente

para la mayoría de usos. Así que esto por ahora no sirve.

Web Workers

¿Sabías que Javascript sólo puede hacer una cosa al tiempo? Es una de las razones por la que

las Web apps son simples, ya que la multitarea es imposible. Web Workers soluciona eso y

permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas

complejas más veloces gracias al multithreading.

Web Sockets al igual que XMLSockets en Actionscript, permite hacer aplicaciones multiusuario

en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de

Web Sockets, es posible usar implementaciones multiusuario en Javascript como

PubSubHubBub.

Arrastrar y soltar

El gesto de arrastrar y soltar ahora es posible, gracias a HTML5. Un ejemplo, sería: Gmail, crea

un email arrastrar un archivo del explorador de archivos al mail. Comprobarás que es posible

adjuntarlo sólo arrastrarlo.

Geolocalización

El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud

y longitud de tus usuarios, pero para ellos te tienen que dar permiso. Lo mejor es que funciona

en cualquier PC. Prueba este demo.

Fuentes y páginas de interés:

http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5/etiquetas-

semanticas/section-o-article.html

http://www.ibm.com/developerworks/ssa/web/library/wa-html5fundamentals/

http://www.creativasfera.com/infografia-estructura-de-un-documento-html5-bien-redactado

http://www.baluart.net/articulo/html5-series-estructura-y-secciones-de-los-documentos

http://activ.com.mx/uso-de-elementos-semanticos-en-html5/

http://www.cristalab.com/tutoriales/pagina-en-construccion-estilo-minimalista-en-html5-y-

css3-c107576l/

http://www.cristalab.com/tags/html5/

http://www.cristalab.com/tutoriales/introduccion-a-html5-c92171l/

http://www.creativasfera.com/5-principios-para-crear-un-codigo-css-limpio-y-optimizado/

http://www.genbetadev.com/desarrollo-web/introduccion-a-la-web-semantica-en-html5

http://caniuse.com

http://www.laWebera.es/diseno-Web/diseno-Web-en-html5.php

http://www.imaginanet.com/Blog/como-usar-html-5.html

http://www.imaginanet.com/Blog/maquetacion-en-html5.html

http://www.pedroventura.com/desarrollo-Web/10-herramientas-online-para-ayudar-y-crear-

codigo-html5/

http://www.foroshtml5.com

http://www.useragentman.com/Blog/2010/07/27/creating-cross-browser-html5-forms-now-

using-modernizr-Webforms2-and-html5widgets-2/

http://www.limejs.com/

Generadores de Código HTML5:

http://www.initializr.com/

http://reuze.me/

http://reuze.me/

http://foundation.zurb.com/download.php

Generadores de Código CSS3:

http://westciv.com/tools/

http://westciv.com/tools/audio/

http://modernizr.com/download/

http://css3please.com/

http://css3pie.com/

http://www.layerstyles.org/builder.html

http://www.wordpressthemeshock.com/css-drop-shadow/

http://border-radius.com/

http://www.css3.me/

http://css3gen.com/

http://css-tricks.com/examples/ButtonMaker/

http://www.spritebox.net/

http://www.css3shapes.com/

http://buzz.jaysalvat.com/

http://www.css3maker.com/index.html

http://www.3dcsstext.com/

http://css3generator.com/

http://www.css3generator.in/

http://prefixmycss.com/

Validador de CSS3:

http://csslint.net/

Formularios:

http://djdesignerlab.com/2011/08/08/10-useful-html5-and-css3-forms-tutorial-with-source-

file/

Los Mejores Frameworks y Grids de CSS para Responsive Design:

http://www.creativasfera.com/los-mejores-frameworks-y-grids-de-css-para-responsive-design

Crear Plantallas gratis HTML, WorkPress, Joomla, ASP.net:

http://www.cooltemplate.com/