El gran libro de HTML5, CSS3 y Javascript
Segunda edición, 2013
© 2013 Juan Diego Gauchat
© 2013 MARCOMBO, S.A.
www.marcombo.com
Los códigos fuente para este libro se encuentran disponibles en www.minkbooks.com.
«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».
ISBN: 978-84-267-2064-1
Dedicado a aquellos
que ya no están a mi lado.
Introducción
1. Documentos HTML5
1.1 Componentes básicos
1.2 Una breve introducción a HTML
1.2.1 Etiquetas y elementos
1.2.2 Atributos
1.2.3 Elementos anteriores
1.3 Estructura global
1.3.1 <!DOCTYPE>
1.3.2 <html>
1.3.3 <head>
1.3.4 <body>
1.3.5 <meta>
1.3.6 <title>
1.3.7 <link>
1.4 La estructura del cuerpo del documento
1.4.1 Organización
1.4.2 <header>
1.4.3 <nav>
1.4.4 <section>
1.4.5 <aside>
1.4.6 <footer>
1.5 En el interior del cuerpo
1.5.1 <article>
1.5.2 <hgroup>
1.5.3 <figure> y <figcaption>
1.5.4 <details> y <summary>
1.6 Elementos nuevos y elementos antiguos
1.6.1 <mark>
1.6.2 <small>
1.6.3 <cite>
1.6.4 <address>
1.6.5 <wbr>
1.6.6 <time>
1.6.7 <data>
1.7 Nuevos atributos y viejos atributos
1.7.1 El atributo data–*
1.7.2 reversed
1.7.3 ping y download
1.7.4 translate
1.7.5 contenteditable
1.7.6 Spellcheck
2. Estilos CSS y modelos de caja
2.1 CSS y HTML
2.2 Breve introducción a CSS
2.2.1 Reglas CSS
2.2.2 Propiedades
2.2.3 Estilos en línea
2.2.4 Estilos incrustados
2.2.5 Archivos externos
2.2.6 Referencias
2.2.7 Selectores nuevos
2.3 Aplicar CSS a nuestro documento
2.3.1 Modelos de caja
2.4 Modelo de caja tradicional
2.4.1 Documento HTML
2.4.2 Selector universal (*)
2.4.3 Títulos
2.4.4 Declaración de nuevos elementos HTML5
2.4.5 Centrar el cuerpo
2.4.6 Creación de la caja principal
2.4.7 La cabecera
2.4.8 Barra de navegación
2.4.9 Área principal y Barra lateral
2.4.10 Pie de página
2.4.11 Toques finales
2.4.12 box-sizing
2.5 Modelo de caja flexible
2.5.1 Contenedor flexible
2.5.2 Documento HTML
2.5.3 Display
2.5.4 Ejes
2.5.5 Propiedad Flex
2.5.6 flex-direction
2.5.7 order
2.5.8 justify-content
2.5.9 align-items
2.5.10 align-self
2.5.11 flex-wrap
2.5.12 align-content
3. Propiedades CSS3
3.1 Las nuevas reglas
3.1.1 CSS3 ha enloquecido
3.1.2 Documento HTML
3.1.3 border-radius
3.1.4 box-shadow
3.1.5 text-shadow
3.1.6 @font-face
3.1.7 linear-gradient
3.1.8 radial-gradient
3.1.9 rgb
3.1.10 hsla
3.1.11 outline
3.1.12 border-image
3.1.13 background
3.1.14 Columnas
3.2 Transformar
3.2.1 transform: scale
3.2.2 transform: rotate
3.2.3 transform: skew
3.2.4 transform: translate
3.2.5 Transformar todo en un elemento
3.2.6 Transformaciones dinámicas
3.2.7 Transformaciones 3D
3.3 Transiciones
3.4 Animaciones
4 Javascript
4.1 Breve introducción a Javascript
4.1.1 El lenguaje
4.1.2 Variables
4.1.3 Condicionales y bucles
4.1.4 Objetos
4.1.5 Constructores
4.1.6 El objeto Window
4.1.7 El objeto Document
4.2 Una introducción a los eventos
4.2.1 Atributos de eventos
4.2.2 Propiedades del evento
4.2.3 El método addEventListener()
4.3 Incorporar Javascript
4.3.1 En línea
4.3.2 Incrustado
4.3.3 Desde un archivo externo
4.4 Nuevos selectores
4.4.1 querySelector()
4.4.2 querySelectorAll()
4.4.3 matchesSelector()
4.5 Interactuar con el documento
4.5.1 Estilos Javascript
4.5.2 ClassList
4.5.3 Acceder a los atributos
4.5.4 dataset
4.5.5 Crear y borrar elementos
4.5.6 innerHTML, outerHtml e insertAdjacentHTML
4.6 Las API
4.6.1 API nativas
4.6.2 API externas
4.7 Errores y depuración
4.7.1 Consola
4.7.2 console.log()
4.7.3 Evento error
5 Formularios
5.1 Formularios HTML
5.1.1 El elemento <form>
5.1.2. El elemento <input>
5.1.3 Más elementos de formulario
5.1.4 Enviar un formulario
5.2 Nuevos tipos de entrada
5.2.1 Tipo email
5.2.2 Tipo search
5.2.3 Tipo url
5.2.4 Tipo tel
5.2.5 Tipo number
5.2.6 Tipo range
5.2.7 Tipo date
5.2.8 Tipo week
5.2.9 Tipo month
5.2.10 Tipo time
5.2.11 Tipo datetime
5.2.12 Tipo datetime-local
5.2.13 Tipo color
5.3 Nuevos atributos
5.3.1 Atributo autocomplete
5.3.2 Atributos novalidate y formnovalidate
5.3.3 Atributo placeholder
5.3.4 Atributo required
5.3.5 Atributo multiple
5.3.6 Atributo autofocus
5.3.7 Atributo pattern
5.3.8 Atributo form
5.4 Nuevos elementos de los formularios
5.4.1 El elemento <datalist>
5.4.2 El elemento <progress>
5.4.3 El elemento <meter>
5.4.4 El elemento <output>
5.5 Nueva pseudo-clases
5.5.1 valid e invalid
5.5.2 optional y required
5.5.3 in-range y out-of-range
5.6 Formularios API
5.6.1 SetCustomValidity()
5.6.2 El evento invalid y el método CheckValidity()
5.6.3 Validación en tiempo real con ValidityState
5.6.4 Restricciones de validez
6 Vídeo y audio
6.1 Vídeo con HTML5
6.1.1 El elemento <video>
6.1.2 Atributos del elemento <video>
6.1.3 Formatos de vídeo
6.2 Audio con HTML5
6.2.1 El elemento <audio>
6.3 Subtítulos
6.3.1 El elemento <track>
6.4 Programar un reproductor multimedia
6.4.1 Diseño de un reproductor de vídeo
6.4.2 Aplicación
6.4.3 Eventos
6.4.4 Código Javascript
6.4.5 Métodos
6.4.6 Propiedades
6.4.7 Código en funcionamiento
7 API TextTrack
7.1 API TextTrack
7.1.1 Lectura de pistas o tracks
7.1.2 Lectura de entradas o cues
7.1.3 Adición de pistas nuevas
8 API Fullscreen
8.1 Basta de ventanas
8.1.1 Ir a pantalla completa
8.1.2 Estilos “Fullscreen”
9. API Stream
9.1 Capturar contenidos
9.1.1 Acceder a la cámara web
9.1.2 Objetos MediaStreamTrack
9.1.3 Método stop()
10 API Canvas
10.1 Los gráficos para la Web
10.1.1 El elemento <canvas>
10.1.2 GetContext()
10.2 Dibujar en el lienzo
10.2.1 Dibujar rectángulos
10.2.2 Color
10.2.3 Degradados
10.2.4 Crear trazados
10.2.5 Estilos de línea
10.2.6 Texto
10.2.7 Sombras
10.2.8 Transformaciones
10.2.9 Restaurar el estado
10.2.10 globalCompositeOperation
10.3 Procesamiento de Imágenes
10.3.1 drawImage()
10.3.2 Datos de imagen
10.3.3 cross-Origin
10.3.4 Extracción de los datos
10.3.5 Patrones
10.4 Animaciones sobre lienzo
10.4.1 Animaciones elementales
10.4.2 Animaciones profesionales
10.5 Procesar vídeo en el lienzo
10.5.1 Mostrar vídeo en el lienzo
10.5.2 Aplicación de la vida real
11. WebGL y Three.js
11.1 Lienzo en 3D
11.2 Three.js
11.2.1 Renderer
11.2.2 scene
11.2.3 Cámara
11.2.4 Mallas
11.2.5 Geométricas primitivas
11.2.6 Materiales
11.2.7 Implementación
11.2.8 Transformaciones
11.2.9 Luces
11.2.10 Texturas
11.2.11 Aplicación UV
11.2.12 Texturas de lienzo
11.2.13 Texturas de vídeo
11.2.14 Cargar modelos 3D
11.2.15 Animaciones en 3D
12 API Pointer Lock
12.1 Nuevo puntero del ratón
12.1.1 Capturar el ratón
12.1.2 pointerLockElement
12.1.3 movementX y movementY
13 API Drag and Drop
13.1 Arrastrar y soltar en la web
13.1.1 Eventos
13.1.2 DataTransfer
13.1.3 dragenter, dragleave y dragend
13.1.4 Seleccionar una fuente válida
13.1.5 setDragImage()
13.1.6 Archivos
14 API Web Storage
14.1 Dos sistemas de almacenamiento
14.2 SessionStorage
14.2.1 Implementar un sistema de almacenamiento de datos
14.2.2 Crear datos
14.2.3 Leer datos
14.2.4 Eliminar datos
14.3 LocalStorage
14.3.1 Evento storage
15 API IndexedDB
15.1 Una API de bajo nivel
15.1.1 Base de datos
15.1.2 Objetos y Almacenes de objetos
15.1.3 Índices
15.1.4 Transacciones
15.1.5 Métodos de almacenes de objetos
15.2 Implementar IndexedDB
15.2.1 Plantilla
15.2.2 Abrir la base de datos
15.2.3 Almacenes de objetos e índices
15.2.4 Agregar objetos
15.2.5 Leer objetos
15.2.6 Finalizar y probar el código
15.3 Listar datos
15.3.1 Cursores
15.3.2 Cambio de orden
15.4 Eliminar datos
15.5 Buscar datos
16 API File
16.1 Almacenamiento de archivos
16.2 Procesar archivos de usuario
16.2.1 Plantilla
16.2.2 Leer archivos
16.2.3 Propiedades de archivos
16.2.4 Blobs
16.2.5 Eventos
16.3 Crear archivos
16.3.1 Documento HTML
16.3.2 El disco duro
16.3.3 Crear archivos
16.3.4 Crear directorios
16.3.5 Listar archivos
16.3.6 Manejar archivos
16.3.7 Mover archivos
16.3.8 Copiar archivos
16.3.9 Eliminar
16.4 Contenido de archivos
16.4.1 Escribir contenido
16.4.2 Agregar contenido
16.4.3 Leer contenido
16.5 Acceder a los archivos
16.6 Sistema de archivos real
17 API Geolocation
17.1 Encontrar su lugar
17.1.1 Documento HTML
17.1.2 getCurrentPosition(ubicación)
17.1.3 getCurrentPosition(ubicación, error)
17.1.4 getCurrentPosition(ubicación, error, configuración)
17.1.5 watchPosition(ubicación, error, configuración)
17.1.6 Usos prácticos con Google Maps
18 API History
18.1 La interfaz de API History
18.1.1 Navegar por la Web
18.1.2 Nuevos métodos
18.1.3 URL falsas
18.1.4 La propiedad state
18.1.5 Un ejemplo de la vida real
19 API Offline
19.1 El manifiesto
19.1.1 El archivo manifiesto
19.1.2 Categorías
19.1.3 Comentarios
19.1.4 Uso del archivo manifiesto
19.2 API Offline
19.2.1 Los errores
19.2.2 online y offline
19.2.3 Estado del caché
19.2.4 Progreso
19.2.5 Actualización del caché
20 API Page Visibility
20.1 El estado de visibilidad
20.1.1 Estado actual
20.1.2 Una mejor experiencia
20.1.3 Detector completo
21 Ajax Level 2
21.1 XMLHttpRequest
21.1.1 Recuperar datos
21.1.2 Propiedades de respuesta
21.1.3 Eventos
21.1.4 Envío de datos
21.1.5 Solicitudes de orígenes cruzados
21.1.6 Cargar archivos
21.1.7 Una aplicación real
22 API Web Messaging
22.1 Mensajería entre documentos
22.1.1 Enviar un mensaje
22.1.2 Comunicar con un iframe
22.1.3 Filtros y orígenes cruzados
23 API WebSocket
23.1 WebSockets
23.1.1 Servidor WebSocket
23.1.2 Instalación y ejecución de un servidor WS
23.1.3 Constructor
23.1.4 Métodos
23.1.5 Propiedades
23.1.6 Eventos
23.1.7 Documento HTML
23.1.8 Iniciar la comunicación
23.1.9 Aplicación completa
24 API WebRTC
24.1 Llega la revolución
24.1.1 El viejo paradigma
24.1.2 El nuevo paradigma
24.1.3 Requisitos
24.1.4 RTCPeerConnection
24.1.5 Candidato ICE
24.1.6 Oferta y respuesta
24.1.7 SessionDescription
24.1.8 Flujos de medios o streams
24.1.9 Eventos
24.1.10 El final
24.2 Ejecutar WebRTC
24.2.1 Servidor de señalización
24.2.2 Servidores ICE
24.2.3 Documento HTML
24.2.4 El código Javascript
24.2.5 Aplicación de la vida real
24.3 Canales de Datos
24.3.1 Creación de canales de datos
24.3.2. Envío de datos
25 API Web Audio
25.1 Estructura de nodos de audio
25.1.1 Los nodos de audio
25.1.2 Contexto Audio
25.1.3 Fuentes de audio
25.1.4 Nodos de conexión
25.1 Sonidos para la Web
25.2.1 Dos nodos básicos
25.2.2 Bucles y tiempos
25.2.3 Crear AudioNodes
25.2.4 AudioParam
25.2.5 GainNode
25.2.6 DelayNode
25.2.7 BiquadFilterNode
25.2.8 DynamicsCompressorNode
25.2.9 ConvolverNode
25.2.10 PannerNode y sonido 3D
25.12.11 AnalyserNode
26 API Web Workers
26.1 Hacer el trabajo duro
26.1.1 Crear un trabajador
26.1.2 Enviar y recibir mensajes
26.1.3 Detectar errores
26.1.4 Detener el trabajador
26.1.5 API asíncronas
26.1.6 Importación de scripts
26.1.7 Trabajador compartido
Conclusiones
Trabajando para el mundo
Las alternativas
Modernizr
Bibliotecas
Google Chrome Frame
Trabajar para la nube
Las API que no han sido incluidas
Lo que debe saber
Palabras finales del autor
HTML5 es mucho más que una nueva versión del viejo lenguaje. Incluso es mucho más que una mejora respecto al lenguaje anterior, que ya podía ser considerado “tecnológicamente antiguo”. Realmente es un nuevo concepto diseñado para la creación de sitios web y aplicaciones en la era de los dispositivos móviles, el cloud computing y las redes.
Todo comenzó hace mucho tiempo con una sencilla versión de HTML que fue desarrollada para crear estructuras básicas de páginas web, organizar contenidos y compartir información. Es preciso recordar que el lenguaje y la misma Web nacieron sobre todo con la intención de comunicar información a través de textos.
El alcance limitado de HTML hizo que las empresas comenzaran a desarrollar lenguajes y aplicaciones que han dotado a la web de nuevas características y han elevado la experiencia del usuario hasta niveles antes inimaginados. Aparecieron poderosos y populares complementos: juegos simples y sencillas animaciones dieron paso a sofisticadas aplicaciones que cambiaron el concepto de la Web para siempre. De todas las opciones propuestas, Java y Flash fueron las más exitosas. Fueron adoptadas masivamente y unánimemente consideradas un sinónimo del futuro de la red. Sin embargo, ante el aumento avasallador del número de usuarios, Internet dejó de ser solo una manera de conectar a amantes de ordenadores para convertirse en un medio indispensable tanto para los negocios como para la interacción social. Y en este contexto, las limitaciones presentes en ambas tecnologías se convirtieron en su sentencia de muerte.
Java y Flash tienen una importante limitación en común y es la falta de integración. Ambas fueron concebidas como complementos: algo que se insertaba en una estructura con la que solo compartían un espacio en la pantalla. No había comunicación e integración entre aplicaciones y documentos. Esta falta de integración pronto se convirtió en un grave problema que allanó el camino para la evolución de un lenguaje que comparte espacio en el documento con HTML y que no se ve afectado por las limitaciones de sus predecesores.
Javascript, el lenguaje interpretado incorporado en los navegadores, sin duda era la mejor manera de mejorar la experiencia del usuario y proporcionar mayor funcionalidad a la Web. Sin embargo, después de algunos años de intentos fallidos de promoverlo, y ante el mal uso que se hizo del lenguaje, el mercado no llegó a adoptarlo plenamente y su popularidad comenzó a decaer.
Los detractores tenían buenas razones para oponerse a su uso. En ese momento, Javascript no podía reemplazar la funcionalidad de Java y Flash. Y aun cuando era evidente que Java y Flash estaban limitando el alcance de las aplicaciones web y aislaban el contenido de la Web, características como el streaming de vídeo, que se estaban convirtiendo en una parte importante de la web, solo eran ofrecidas de forma efectiva a través de estas tecnologías.
A pesar de su dominio, Java fue decayendo cada vez más. La compleja naturaleza del lenguaje, su lenta evolución y su falta de integración fueron minando su importancia hasta el punto de que hoy en día prácticamente no se utiliza en las aplicaciones web tradicionales. Con Java fuera de juego, los desarrolladores centraron su atención en Flash. Sin embargo, el hecho de que Flash comparte características básicas con su competidor lo hace susceptible a la misma suerte.
Mientras que se desarrollaba esta competencia silenciosa e intensa, el software para acceder a la Web continuaba evolucionando. Junto a las nuevas características y a las técnicas más rápidas de acceso a Internet, los navegadores también estaban mejorando sus motores de Javascript. La mayor potencia trajo consigo nuevas oportunidades que Javascript estaba dispuesto a aceptar.
En algún momento durante este proceso se hizo evidente para algunos desarrolladores que ni Java ni Flash serían capaces de proporcionar las herramientas necesarias para crear las aplicaciones que demandaba un número creciente de usuarios. Estos desarrolladores comenzaron a aplicar Javascript en sus aplicaciones de una manera que no se había visto nunca antes. La innovación y los resultados sorprendentes así obtenidos atrajeron la atención de más programadores y pronto nació la “Web 2.0”. Y a partir de ese momento, la percepción que la comunidad de desarrolladores tenía de Javascript cambió radicalmente.
Javascript es definitivamente el lenguaje que ha permitido a los desarrolladores innovar y crear cosas que nadie había hecho antes en la Web. En los últimos años, a los programadores y diseñadores web de todo el mundo se les han ocurrido métodos increíbles para superar las limitaciones de esta tecnología y sus deficiencias iniciales en cuanto a portabilidad. Pronto se hizo evidente que Javascript, junto a HTML y CSS, es el tercer elemento de una perfecta combinación de lenguajes, necesaria para la evolución de la Web.
HTML5 es el fruto de esa combinación, el pegamento que mantiene todo unido. HTML5 propone normas para todos los aspectos de la Web, así como un propósito claro para cada tecnología involucrada. Actualmente, HTML proporciona los elementos estructurales, CSS se encarga de la presentación para hacerlos más atractivo y útiles, y Javascript tiene el poder necesario para proporcionar la funcionalidad y crear aplicaciones web completas.
Los límites entre sitios web y aplicaciones finalmente han desaparecido. Las tecnologías necesarias están listas. La promesa es el futuro de la Web, y la evolución y la combinación de estas tres tecnologías (HTML, CSS y Javascript) es una alianza de gran alcance que ha convertido a Internet en la plataforma líder para el desarrollo. HTML5 está claramente a la cabeza.
Importante
Al momento de preparar este libro, no todos los navegadores soportan de manera absoluta las características de HTML5 y la mayoría de éstas son aún experimentales. Le recomendamos que a medida que lea sus lecciones, ejecute el código con la última versión de Google Chrome y Mozilla Firefox.
Google Chrome es una buena plataforma de pruebas. Está basado en un motor del navegación de código abierto (WebKit) y es compatible con casi todas las características ya implementadas en HTML5. Por otro lado, Mozilla Firefox es uno de los mejores navegadores para los desarrolladores y también proporciona soporte para HTML5. Los ejemplos de este libro fueron preparados para estos dos navegadores, pero para simplificar, usted encontrará algunos scripts que ejecutan solo los métodos experimentales proporcionados por Google Chrome. Por esta razón, le recomendamos estudiar los códigos en Google Chrome en primer lugar y luego expandir su trabajo a otros navegadores.
Sin importar cual sea el navegador que utilice, siempre tenga en cuenta que un buen desarrollador instala y prueba sus códigos en cada programa disponible en el mercado, así que compruebe los códigos proporcionados en este libro con todos los navegadores. Para descargar las versiones más recientes, visite los siguientes sitios web:
www.google.com/chrome
www.apple.com/safari/download
www.mozilla.com
windows.microsoft.com
www.opera.com
www.maxthon.com
El lenguaje HTML5 proporciona tres características básicas: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, aun cuando algunas API (Interfaces de programación de apliaciones) de Javascript y la especificación completa CSS3 no forman parte del lenguaje, HTML5 es considerado un producto que surge de la combinación de HTML, CSS y Javascript. Estas tecnologías son altamente confiables y actúan como una unidad organizada de acuerdo a la especificación HTML5. HTML es el encargado de la estructura, CSS presenta esa estructura y su contenido en la pantalla, y Javascript hace el resto, que (como veremos más adelante en este libro) es muy importante.
Importante
Para acceder a información adicional y a la lista de ejemplos, visite nuestro sitio web en www.minkbooks.com.
A pesar de la integración de estas tecnologías, la estructura sigue siendo la parte fundamental de un documento. Proporciona los elementos necesarios para distribuir el contenido estático o dinámico, y es también una plataforma básica para las aplicaciones.
Con la variedad de dispositivos que acceden a Internet y la diversidad de interfaces que se utilizan para interactuar con la Web, un aspecto tan básico como la estructura se convierte en una parte vital del documento. Ahora bien, la estructura debe proporcionar forma, organización y flexibilidad, y debe ser tan sólida como los cimientos de una casa.
Para trabajar con HTML5, ya sea en la creación de páginas web o de aplicaciones, primero necesitamos saber cómo se construye esa estructura. La creación de una base sólida nos ayudará después aplicar otros componentes para sacar el máximo provecho de estas nuevas posibilidades. Por ello vamos a empezar con lo básico, paso a paso. En este primer capítulo, aprenderá lo que es HTML y cómo construir una estructura esencial utilizando los nuevos elementos de este lenguaje.
El HyperText Markup Language (HTML) es un lenguaje de programación. A diferencia de otros lenguajes, no está compuesto por instrucciones, sino por un conjunto de etiquetas que organizan y declaran el propósito de cada contenido del documento.
En el sentido estricto, HTML es un texto escrito con una sintaxis particular que el navegador es capaz de leer y aplicar. Se trata de un lenguaje que fue creado para compartir a través de Internet no solo el texto incluido en los documentos, sino también su formato.
Precisamente es esta posibilidad de diferenciar las partes importantes del contenido de un documento proporcionada por el lenguaje HTML lo que ha abierto la puerta a la creación de la Web como la conocemos hoy en día.
Efectivamente, el código HTML no es un conjunto secuencial de instrucciones sino es un lenguaje de marcado, un conjunto de etiquetas que por lo general vienen en pares y que pueden ser anidadas (contenidas dentro de otros elementos). Estas etiquetas son palabras clave y atributos encerrados entre corchetes angulares (por ejemplo, <html lang=“en”>). Por lo general, nos referimos a una etiqueta individual simplemente como “etiqueta” y a un par de etiquetas de apertura y cierre como un “elemento”. Observe el siguiente ejemplo:
Código 1-1
Ejemplo de un documento básico de HTML.
Importante
Los conceptos que aquí se explican son básicos pero esenciales para la comprensión de los ejemplos en este libro. Si está familiarizado con esta información, por favor siéntase con la libertad de saltar sobre los temas que ya domina.
Hágalo usted mismo
Un documento HTML es un archivo de texto. Si no dispone de ningún software de desarrollo para crear el archivo, puede utilizar simplemente cualquier editor de texto como el Notepad de Windows. Cree un nuevo archivo con el Código 1-1, guárdelo con un nombre y la extensión .html (por ejemplo, prueba.html) y a continuación abra el archivo en el navegador. Si su editor de texto trabaja con diferentes formatos, asegúrese de guardar el archivo como texto sin formato antes de cambiar su extensión. Para ejecutar el archivo en el navegador configurado por defecto en su ordenador bastará con hacer doble clic sobre él en el explorador de archivos.
Algunos elementos de HTML son simples, es decir, están compuestos de una sola etiqueta, pero la mayoría requiere una etiqueta de apertura y otra de cierre. En el ejemplo del Código 1-1 podemos ver varias etiquetas, una tras otra, con texto e incluso con otras etiquetas en medio. Compare las etiquetas de apertura y de cierre de este ejemplo, y verá que la de cierre se distingue por tener una barra antes de la palabra clave. Por ejemplo, la etiqueta <html> indica el inicio del código HTML, mientras que </html> declara el final. El navegador tratará todo lo que se encuentre en medio de estas etiquetas como código HTML.
Importante
No se preocupe si no entiende cómo se crea la estructura presentada en el Código 1-1. Vamos a trabajar en ello y en los nuevos elementos estructurales introducidos en HTML5 en las próximas páginas.
En este ejemplo, aunque se trata de un código muy sencillo, ya podemos ver una estructura compleja. En la primera línea, hay una sola etiqueta con la definición del documento seguido de la etiqueta de apertura <html lang=“en”>. Entre las etiquetas <html> insertamos otras etiquetas, como las que representan a la cabeza y el cuerpo del documento (<head> y <body>), que también vienen en pares y encierran contenido adicional, como texto o de otros elementos (<title>).
Como se puede ver, para construir un documento HTML, las etiquetas aparecen una tras otra y también entre otras etiquetas, lo que da como resultado en una estructura en árbol, en la que la etiqueta <html> es la raíz.
En general, todo elemento puede ser anidado, ser un contenedor o ser contenido por otros elementos. Básicamente, elementos estructurales especiales como <head>, <html> o <body> tienen un lugar específico en un documento HTML, pero el resto de elementos son flexibles, como veremos más adelante en este mismo capítulo.
Como podrá darse cuenta, la etiqueta de apertura <html> del Código 1-1 no solo se compone de la palabra clave y el corchete angular, sino también de la cadena de texto lang=“es”. Se trata de un atributo con un valor. El nombre del atributo es lang y mediante el símbolo = se le ha asignado el valor “es”. Los atributos proporcionan información adicional acerca de un elemento HTML. En este caso, se declara que el lenguaje humano del código HTML es el español.
Los atributos siempre se declaran dentro de la etiqueta de apertura y pueden tener una estructura nombre=valor, tal como sucede con el atributo lang de nuestro ejemplo, o representar un valor booleano, en cuyo caso su presencia indica la condición verdadera o falsa (por ejemplo, el atributo disabled sin un valor específico deshabilita un elemento de formulario).
Dado que el lenguaje HTML pasó de tener un propósito general para centrarse más en la creación de la estructura del documento, la mayoría de los atributos clásicos han dejado de usarse y algunos han sido sustituidos incluso completamente por las propiedades CSS, como veremos en los capítulos siguientes. Sin embargo, algunos siguen siendo útiles; especialmente cuatro atributos genéricos que tienen especial importancia en el desarrollo de sitios y aplicaciones web en HTML5:
class: Este atributo permite trabajar con un grupo de elementos que comparten algunas características. Por ejemplo, es posible asignar el mismo tipo de fuente y estilos a textos ubicados en diferentes partes del documento simplemente asignando un valor para el atributo class.
id: Este atributo nos permite asignar un identificador único para cada elemento. Es la mejor manera de tener acceso a partir de CSS o Javascript a un elemento específico.
style: Este atributo nos permite asignar estilos CSS para cada elemento, de forma individual. Como veremos en el capítulo 2, es recomendable evitar el uso de este atributo y, en cambio, asignar estilos a los elementos HTML haciendo referencia a sus atributos class e id.
name: Es un viejo atributo que aún tiene aplicaciones cuando trabajamos con formularios. Simplemente declara un nombre personalizado para el elemento. Para obtener más información, consulte el Capítulo 5.
Además de los mencionados, hay atributos más específicos, como el atributo lang del elemento <html> del que también ya hemos hablado. Otros dos que vale la pena mencionar son el atributo href para el elemento <link> y el elemento <a>, así como el atributo src para elementos multimedia como son <img>, <video>, <audio>, etc, que indican la ruta para cargar el archivo o acceder a él.
Pruebe el ejemplo siguiente en su navegador:
Código 1-2
Uso del elemento <img> y del atributo src para mostrar una imagen.
Importante
Este libro se centra en las mejoras introducidas por HTML5. Los conceptos del lenguaje HTML que fueron introducidos antes de HTML5 se explican solo en las secciones denominadas Conceptos básicos. Si desea realizar un estudio más profundo del lenguaje HTML y encontrar una lista completa de los elementos HTML válidos para ser utilizados en proyectos, por favor visite nuestro sitio web y siga los enlaces dispuestos para este capítulo.
Conceptos básicos
El elemento <img> permite cargar y mostrar una imagen en la pantalla. Se trata de un elemento único sin etiqueta de cierre, y se usa junto con el atributo src para declarar la ruta de la imagen. También es posible declarar los atributos width y height para establecer el tamaño de la imagen. Vamos a estudiar y experimentar con estos y otros atributos en situaciones más prácticas a lo largo del libro.
En HTML5 algunos elementos han quedado obsoletos porque algunos elementos han cambiado y se han añadido otros nuevos. Entre ellos, hay algunos elementos que ya no se consideran parte del lenguaje, como <center>, <frame> o <font>. El último es tal vez el más importante. El elemento <font>, ahora generalmente sustituido por el elemento <span>, se utilizó hasta HTML4 para mostrar texto en la pantalla.
Otros elementos como <i> o <b>, que antes eran utilizados para enfatizar texto en pantalla, ahora tienen un significado diferente. Al mismo tiempo, nuevos elementos como <mark>, <address> o <time>, por ejemplo, fueron añadidos para proporcionar una mejor forma de describir y representar el contenido del documento.
Los documentos HTML están estrictamente organizados. Cada parte del documento está diferenciada, declarada y encerrada entre etiquetas específicas. En esta sección vamos a ver cómo construir la estructura global de un documento HTML y cómo ha cambiado este proceso en HTML5.
Hágalo usted mismo
Cree un nuevo documento en un editor de texto para probar en su navegador el código HTML que se presenta más adelante. Esto le ayudará a recordar las nuevas etiquetas y a familiarizarse con su uso.
Importante
Los navegadores ofrecen estilos mínimos para los elementos HTML. Para ver la estructura creada con código HTML en este capítulo en la pantalla, tendrá que aplicar estilos CSS. Estudiaremos el uso de CSS en los capítulos 2 y 3.
<!DOCTYPE>En primer lugar, es necesario que indicar el tipo de documento que se va a crear, porque los navegadores son capaces de procesar diferentes tipos de archivos. Para asegurarse de que el documento sea interpretado como código HTML de forma correcta, es necesario declarar el tipo de documento al principio del mismo. En HTML5 es simple:
Código 1-3
Uso del elemento <! DOCTYPE>.
Tenga en cuenta que esta línea debe ser la primera línea de su archivo y que no debe haber espacios ni líneas antes de ella. De esta forma se activa un modo y se fuerza a los navegadores a interpretar HTML5 si es posible, o ignorarlo si no es el caso.
Hágalo usted mismo
Puede comenzar a escribir el Código 1.3 en un archivo HTML e ir añadiendo cada uno de los nuevos elementos que presentaremos en las próximas páginas.
<html>Después de declarar el tipo de documento, tenemos que construir la estructura de árbol del HTML. Como siempre, el elemento raíz de este árbol es <html>. Éste es el elemento que contendrá todo el código HTML.
Código 1-4
Uso del elemento <html>.
El atributo lang en la etiqueta de apertura <html> es el único que necesitará indicar en HTML5. Recuerde que hemos dicho que este atributo define el idioma que se utiliza para el contenido del documento, que en este caso es, obviamente, español.
Para conocer otros idiomas para el atributo lang, puede seguir este enlace: http://www.w3schools.com/tags/ref_language_codes.asp
Importante
HTML5 es muy flexible en cuanto a la estructura y a los elementos utilizados para su construcción. El elemento <html> también puede ser incluido sin ningún atributo o incluso puede ser ignorado. Sin embargo, por razones de compatibilidad y otros motivos en los que no vale la pena extendernos en este manual, le recomendamos que siga nuestras reglas básicas. Tenga en cuenta que le explicaremos cómo crear documentos HTML de acuerdo con las que consideramos que son las mejores prácticas.
<head>Continuemos avanzando en la construcción del documento. El código HTML insertado entre las etiquetas <html> ha de estar dividido en dos secciones principales. Tal como sucedía en versiones anteriores de HTML, la primera sección es la cabeza (head) y la segunda el cuerpo (body). Así que el próximo paso será la creación de estas dos secciones en el código utilizando las etiquetas <head> y <body>.
Evidentemente, el elemento <head> va primero y, como el resto de los elementos estructurales, tiene una etiqueta de apertura y una etiqueta de cierre.
Código 1-5
Uso del elemento <head>.
La etiqueta en sí no ha cambiado respecto a versiones anteriores y su propósito también sigue siendo exactamente el mismo. Dentro de las etiquetas <head> vamos a definir el título de nuestra página web, a declarar la codificación de caracteres, a proporcionar información general sobre el documento y a incorporar archivos externos con los estilos, los scripts e incluso las imágenes necesarias para identificar la página. A excepción del título y de algunos iconos, la información incorporada al documento entre las etiquetas <head> normalmente no está a la vista del usuario.
<body>La siguiente sección en un documento HTML contiene la parte visible del documento y se identifica con la etiqueta <body>. Se trata, nuevamente, de una etiqueta que no ha cambiado respecto a las versiones anteriores de HTML.
Código 1-6
Uso del elemento <body>.
<meta>A continuación construiremos el elemento head del documento. El contenido de este elemento ha sufrido algunos cambios y uno de ellos es la etiqueta que define la codificación de caracteres del documento, que es la etiqueta meta, que indica cómo debe presentarse el texto en la pantalla.
Código 1-7
Uso del elemento <meta>.
La novedad de este elemento en HTML5, como en la mayoría de los casos, es la simplificación alcanzada. La nueva etiqueta <meta> para la codificación de caracteres es más corta y más simple. Por supuesto, puede utilizar la codificación que prefiera en lugar de utf-8 y además puede añadir las etiquetas <description> o <keywords>, tal como mostramos en el ejemplo siguiente.
Código 1-8
Uso de otros elementos <meta>.
Conceptos básicos
Hay varias etiquetas <meta> que pueden ser utilizadas en un documento para declarar la información general que no será mostrada en la ventana del navegador. Se trata de información que es utilizada por los motores de búsqueda y los dispositivos que necesitan obtener una vista previa o conseguir un resumen de los datos relevantes del documento. En el Código 1-8, el atributo name dentro de la etiqueta <meta> especifica el tipo y el atributo content declara su valor, pero ninguno de estos valores se muestra en la pantalla. Para obtener más información sobre las etiquetas <meta>, visite nuestro sitio web y siga los enlaces de este capítulo.
Debe saber que en HTML5, no es necesario cerrar las etiquetas individuales con una barra al final, pero es recomendable hacerlo por razones de compatibilidad. A continuación, añadimos al código anterior barras inclinadas:
Código 1-9
Etiquetas con barras de cierre.
<title>La etiqueta <title>, tal como sucedía en versiones anteriores, simplemente indica el título del documento, de manera que no hay ninguna novedad que comentar sobre la misma.
Código 1-10
Uso del elemento <title>.
Conceptos básicos
El texto que se encuentra entre las etiquetas <title> es el título del documento que estamos creando. Por lo general, los navegadores muestran este texto en la parte superior de la ventana.
<link>Otra parte importante del elemento <head> o la cabeza de un documento HTML5 es el elemento <link>. Este elemento se utiliza para incorporar estilos, scripts, imágenes o iconos desde archivos externos en el documento. Uno de sus usos más habituales es la incorporación de estilos mediante la inserción de un archivo CSS externo.
Código 1-11
Uso del elemento <link>.
Como en el lenguaje HTML5 no es necesario indicar el tipo de hoja de estilo, el atributo type ha sido eliminado. Ahora solo son necesarios dos atributos para incorporar la hoja de estilo: rel y href. El nombre del atributo rel significa relación y establece la relación entre el documento y el archivo incorporado. En este caso, el atributo rel tiene el valor stylesheet que indica al navegador que el archivo misestilos.css es un archivo CSS que contiene los estilos necesarios para interpretar la página.
Importante
En el Capítulo 2 se estudiará el lenguaje CSS y el proceso de creación del archivo misestilos.css para definir el estilo del documento.
El atributo href, como hemos explicado antes, declara la ruta para cargar el archivo. Este archivo, por supuesto, debe tener un contenido adecuado al valor del atributo rel. En este caso, la ruta apunta a un archivo CSS que contiene los estilos para el documento (stylesheet).
Conceptos básicos
Una hoja de estilo (stylesheet) es un conjunto de reglas de formato que modifican el aspecto del documento, por ejemplo, el tamaño y el color del texto. Sin estas reglas, el texto y otros elementos se mostrarán en la pantalla según los estilos estándar proporcionados por el navegador (tamaños predeterminados, colores, etc).
Como verá más adelante, los estilos son simples reglas y por lo general requieren solo unas pocas líneas de código que también pueden ser declaradas en el mismo documento, así que no es estrictamente necesario obtener esta información a partir de archivos externos, pero sí que es una práctica recomendable porque permite organizar el documento principal, aumentar la velocidad de carga del sitio web y aprovechar las nuevas características HTML5.
Con la última instrucción insertada, podemos dar por terminada la cabeza de nuestro documento. Ahora estamos en condiciones de agregar contenido a las etiquetas <body> para que comience la magia.
La estructura del cuerpo del documento, que es el código que se encuentra entre las etiquetas <body>, es la que generará la parte visible del mismo: el código que realmente le dará forma a la página web.
El lenguaje HTML siempre ha ofrecido distintas formas de construir y organizar la información visible en el cuerpo del documento. Uno de los primeros elementos utilizados para este fin era el elemento <table>, que permitía a los autores organizar datos, textos, imágenes y herramientas en filas y columnas de celdas, a pensar de que no había sido concebido para este fin.
El elemento <table> representó una de las primeras revoluciones de la web, un gran paso adelante en la visualización del documento que mejoró la experiencia de los usuarios. Con el tiempo otros elementos sustituyeron la función de este elemento pues proporcionaban una manera diferente de hacer lo mismo, pero más rápido y con menos códigos, facilitando así la creación, el mantenimiento y la portabilidad el sitio.
El elemento <div> fue uno de los que adquirió gran importancia. Con la aparición de nuevas aplicaciones web interactivas y la integración de HTML, CSS y Javascript, su uso se convirtió en una práctica habitual. Pero al igual que sucedía con el elemento <table>, el elemento <div> no proporciona mucha información sobre las partes del cuerpo del documento que representa. Cualquier cosa, desde imágenes hasta menús, textos, enlaces, scripts, formularios, etc., puede ir entre las etiquetas <div> de apertura y cierre. En otras palabras, la palabra clave <div> solo establece una división en el cuerpo, como las celdas de una tabla, pero no da una idea de qué tipo de división que es o cuál es el propósito de esa división y de su contenido.
Esta información, que es irrelevante para los usuarios, resulta en cambio de una importancia crucial para que los navegadores puedan realizar una correcta interpretación del contenido. Tras la revolución de los nuevos dispositivos móviles y las nuevas formas de acceder a la web, esta correcta identificación de cada una de las partes de una web ha adquirido una enorme relevancia.
Considerando estas circunstancias, HTML5 ha incorporado nuevos elementos que ayudan a identificar cada sección del documento y a organizar el cuerpo del mismo. En HTML5 las secciones más importantes se encuentran por tanto claramente diferenciadas y la estructura principal ya no está definida por las etiquetas <div> y <table>.
La Figura 1-1 representa un diseño regular que actualmente es utilizado en la mayoría de los sitios web. A pesar del hecho de que cada diseñador crea sus propios diseños, en general, podremos identificar las siguientes secciones en prácticamente cualquier sitio web:
Figura 1-1
Representación visual del diseño de una típica página web.
En la parte superior, que hemos llamado Cabecera del sitio, normalmente se encuentran el logo, el título o nombre de la página, los subtítulos y una breve descripción del sitio o página web.
La mayoría de los programadores ubican a continuación una Barra de navegación en la que ofrecen un menú o una lista de enlaces para facilitar la navegación, que dirige a los usuarios a diferentes páginas o documentos, por lo general en el mismo sitio web.
El contenido más relevante de la página se coloca generalmente en el centro de ésta. En esta sección se presenta la información más importante además de los enlaces y habitualmente está dividida en filas y columnas. En el ejemplo de la Figura 1-1 se pueden ver solo dos columnas: la Información principal y la Barra lateral, pero sepa que se trata de una sección extremadamente flexible, que los diseñadores suelen adaptar a según sus necesidades mediante la inserción de más filas, la división de las columnas en bloques más pequeños o la generación de diferentes combinaciones y distribuciones.
El contenido que se presenta en esta parte del diseño generalmente tiene la mayor prioridad o relevancia. En el ejemplo que presentamos, la Información principal podría incluir una lista de artículos, descripciones de productos, entradas de blog, o cualquier otro contenido relevante, y la Barra lateral podría mostrar una lista de enlaces relacionados con esos elementos. En un blog, por ejemplo, esta última columna ofrece una lista de enlaces a las entradas del blog, la información sobre el autor, etc.
En la parte inferior de la disposición típica, se encuentra el pie o Barra institucional. Le hemos dado este nombre porque suele mostrar información general sobre el sitio web, el autor, la compañía, además de enlaces a reglas, términos y condiciones, mapas y toda clase de datos adicionales sobre el promotor. La Barra institucional es el complemento de la Cabecera y es considerada actualmente una parte esencial de la estructura de una página web.
La Figura 1-2 es la representación de un blog estándar y en ella donde se pueden identificar claramente las partes del diseño descritas anteriormente:
Figura 1-2
Estructura de un blog estándar.
1. Cabecera
2. Barra de navegación
3. Información principal
4. Barra lateral
5. Pie o Barra institucional
Esta sencilla representación de un blog que acaba de ver muestra claramente que cada sección definida en un sitio web tiene un propósito. Aunque el propósito no siempre será tan explícito, siempre se mantiene la esencia y cualquier usuario será capaz de reconocer estos elementos en cualquier sitio.
HTML5 parte de esta estructura básica de diseño, y proporciona nuevos elementos para diferenciar y declarar cada uno de ellos. Ahora podemos anunciar a los navegadores cuál es el objetivo de cada una de las secciones. La Figura 1-3 muestra la disposición típica de la que venimos hablando, pero esta vez con los elementos de HTML5 correspondientes para cada sección (tanto etiquetas de apertura como de cierre).
Figura 1-3
Representación visual de la organización de un documento con las etiquetas de HTML5.
<header>Uno de los nuevos elementos incorporados en HTML5 es el llamado <header>. El <header> no debe confundirse con la etiqueta <head>, que usamos páginas atrás para construir la cabeza del documento. De la misma manera que la etiqueta <head>, la etiqueta <header> proporciona informaciones introductorias (tales como títulos, subtítulos o logotipos), pero ambas etiquetas difieren en alcance. Si bien las etiquetas <head> tienen el propósito de proporcionar información sobre todo el documento, las etiquetas <header> están destinadas a ser utilizadas como parte del cuerpo del documento HTML.
Código 1-12
Uso del elemento <header>.
En el Código 1-12 definimos el título de la página web con la etiqueta <header>. Tenga en cuenta que este título es distinto al título general del documento que definimos anteriormente en la sección <head>. La inserción del elemento de <header> representa el comienzo del cuerpo del documento y, por tanto, de su parte visible. A partir de este punto será capaz de ver los resultados del código que está creando en la ventana de su navegador.
Hágalo usted mismo
Si ha seguido las instrucciones desde el comienzo de este capítulo, ya debe disponer de un archivo de texto con los códigos HTML estudiados hasta ahora, listo para ser probado. Si no, lo único que tiene que hacer es copiar el contenido del Código 1-12 en un archivo de texto vacío creado con cualquier editor de texto (como el Bloc de notas de Windows), guardar el archivo con un nombre y la extensión .html, y abrirlo en su navegador.
Conceptos básicos
El elemento <h1>, aplicado en el Código 1-12, es un viejo elemento del lenguaje HTML utilizado para definir encabezados. En número, que puede estar comprendido entre el 1 y el 6, indica la importancia del encabezado. El elemento <h1> es el de mayor importancia y el elemento <h6> el de menor importancia, de manera que <h1> será el adecuado para mostrar el título principal y el resto de los subtítulos. Posteriormente, se estudiará cómo ha sido modificada la aplicación de estos elementos en HTML5.
<nav>La siguiente sección de nuestro ejemplo es la barra de navegación, que en HTML5 se genera con la etiqueta <nav>:
Código 1-13
Uso del elemento <nav>.
Tal como puede ver en el Código 1-13, el elemento <nav> también se encuentra entre las etiquetas <body> pero después de la etiqueta de cierre </header>. Se debe a que <nav> no es parte de la cabecera sino de una nueva sección.
Ya hemos mencionado que la estructura y el orden a utilizar con HTML5 es algo muy personal porque HTML5 es muy versátil y solo proporciona los parámetros y elementos básicos para trabajar, mientras que la forma de usarlos es una decisión personal. Gracias a esta versatilidad, la etiqueta <nav> realmente podría ser insertada dentro del elemento <header> o en cualquier otra sección del cuerpo. Sin embargo, debe tener en cuenta que se trata de una etiqueta que ha sido creada para proporcionar más información a los navegadores y para ayudar a los nuevos programas y dispositivos a identificar las partes más relevantes del documento y, como ya hemos dicho antes, para mantener la portabilidad y la facilidad de lectura de nuestro código HTML es preferible seguir las normas. El elemento <nav> está destinado a contener ayudas a la navegación como el menú principal u otros grandes bloques de navegación, y con este objetivo debería ser utilizado.
Conceptos básicos
El elemento <ul>, introducido en el Código 1-13, define una lista de elementos sin un orden específico. Para declarar cada elemento de la lista es necesario usar los elementos <li>, que se anidan dentro del elemento en <ul> (se introducen entre las etiquetas <ul> de apertura y cierre) y se muestran en la pantalla en el orden en el que son declarados. Para obtener más información acerca de estos elementos básicos de HTML, vaya a nuestro sitio web y siga los enlaces de este capítulo.
<section>Las siguientes partes del diseño son las que en la Figura 1-1 hemos llamado Información principal y Barra lateral. Como ya hemos mencionado, la Información principal comprende los contenidos más relevantes del documento y puede tener diversas presentaciones. Debido a que el propósito de estas columnas y bloques es más general, el elemento HTML5 que identifica estas secciones se llama simplemente <section>.
Código 1-14
Uso del elemento <section>.
Igual que sucedía con la Barra de navegación, la Información principal constituye una sección aparte. Por lo tanto, las instrucciones correspondientes a la Información principal están por debajo de la etiqueta </nav> de cierre.
Importante
Las etiquetas que representan cada sección del documento se encuentran en el código en forma de lista, una tras otra, pero en el sitio web de algunas de estas secciones estarán ubicadas unas junto a otras (la información principal y las barras laterales, por ejemplo). En HTML5, la presentación de estos elementos en la pantalla ha sido delegada a CSS y se logra mediante la asignación de estilos CSS para cada elemento. Recuerde que estudiaremos CSS en el próximo capítulo.
Hágalo usted mismo
Compare el contenido del Código 1-14 y el diseño de la Figura 1-3 para comprender cómo se ubican las etiquetas en el código y qué secciones generan esas etiquetas en la representación visual de la página web.
<aside>En el diseño de la Figura 1-1, la barra lateral está junto a la Información principal. Las etiquetas <aside> definen una columna o sección que normalmente contiene los datos relativos a la información principal, pero no es tan relevante ni importante como aquella. En el ejemplo de un diseño de blog estándar presentado en la Figura 1-2, la Barra lateral contiene una lista de enlaces a cada entrada del blog o proporcionan información adicional sobre el autor del blog. La información que contiene esta sección está por lo tanto relacionada con la Información principal