Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Marcombo
- Kategorie: Wissenschaft und neue Technologien
- Serie: El gran libro de
- Sprache: Spanisch
- Veröffentlichungsjahr: 2013
Vivimos una revolución. Internet ha dejado de ser sólo un instrumento de comunicación para convertirse en parte de, prácticamente, todos los aspectos de la vida humana. En este contexto, el lenguaje HTML5 ha adquirido una importancia única. Las aplicaciones de Internet a las que accedemos ahora incontables veces en un día, ya sea desde un ordenador de mesa, un teléfono móvil, una PDA o cualquier otro dispositivo, son posibles gracias a HTML5. Con este manual aprenderá, a través de ejercicios prácticos soportados por sólidos conocimientos teóricos, a crear toda clase de sitios webs y aplicaciones estructuradas en HTML5, con estilos CS3 y programadas con las más importantes y recientes herramientas de Javascript. Estudiará desde los conceptos más básicos y tradicionales de cada uno de los lenguajes hasta los más utilizados por verdaderos profesionales de la programación. En cada capítulo irá desarrollando diversos códigos que irán ganando complejidad a medida que se avanza en la lección y harán mucho más accesibles los conceptos previamente estudiados. Mediante el uso de los componentes de los tres lenguajes, las nuevas API que ofrece Javascript y librerías externas, aprenderá a escribir sus propios códigos para crear, programar y optimizar formularios, personalizar la forma en la que se reproduce un archivo de vídeo o de audio, insertar una o más pistas de subtítulos en un vídeo, controlar la entrada y salida de cualquier elemento en el modo de pantalla completa, capturar vídeo en streamig, crear gráficos y animaciones de dos y tres dimensiones, programar un vídeo juego, controlar la apariencia y la forma en la que se comporta el ratón en determinadas circunstancias, utilizar la geolocalización, manipular la historia de navegación del usuario, optimizar el funcionamiento fuera de línea de su sitio, crear aplicaciones de mensajería digital y otras formas de comunicación bidireccional, entre muchos otros conocimientos.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 727
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
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 aquellosque ya no están a mi lado.
Índice
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
Introducción
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
1. Documentos HTML5
1.1 Componentes básicos
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.
1.2 Una breve introducción a HTML
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.
1.2.1 Etiquetas y elementos
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.
1.2.2 Atributos
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.
1.2.3 Elementos anteriores
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.
1.3 Estructura global
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.
1.3.1 <!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.
1.3.2 <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.
1.3.3 <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.
1.3.4 <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>.
1.3.5 <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.
1.3.6 <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.
1.3.7 <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.
1.4 La estructura del cuerpo del documento
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>.
1.4.1 Organización
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.
1.4.2 <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.
1.4.3 <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.
1.4.4 <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.
1.4.5 <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, pero no es relevante por sí misma. Siguiendo el ejemplo del blog, podemos decir que las entradas del blog son relevantes, pero los vínculos y las previsualizaciones cortas de las entradas solo facilitan la navegación y aquello en lo que el usuario o lector estará más interesado.
En HTML5 podemos identificar este tipo de información secundaria con el elemento <aside>.
Código 1-15
Uso del elemento <aside>.
El elemento <aside> no tiene una posición predefinida, de manera que puede situarse tanto del lado derecho como del izquierdo de la página. Este elemento describe la información que contiene y no su ubicación en la estructura y puede por tanto estar situado en cualquier parte, siempre y cuando su contenido no sea considerado parte de la información principal del documento. Por ejemplo, podemos utilizar el elemento <aside> dentro de un elemento <section>, o incluso dentro de la información principal, por decir algo, para mostrar una cita de texto dentro de la página.
Conceptos básicos
El elemento <blockquote> utilizado para mostrar información relacionada con cada artículo de la página en el Código 1-15 define un bloque de texto que se cita desde otra parte del documento. Los navegadores muestran de este elemento por defecto con los márgenes, proporcionando un formato específico al párrafo que contienen.
1.4.6 <footer>
Para terminar la construcción de la estructura principal de nuestro documento HTML5, solo necesitamos un elemento más. Ya tenemos el encabezado del cuerpo, las secciones con ayudas a la navegación y la información importante, así como información adicional en una barra lateral. Lo único que queda es cerrar el diseño y dar fin al cuerpo del documento. HTML5 proporciona un elemento específico para este propósito llamado <footer>.
Código 1-16
Uso del elemento <footer>.
En el diseño de una página web estándar (Figura 1-1), la sección denominada la Barra institucional se definiría con etiquetas <footer>. Estas etiquetas identifican normalmente el final (o el pie) del documento, que es la parte de la página web habitualmente utilizada para compartir información general sobre el autor o la empresa detrás del proyecto, al igual que los derechos de autor, términos y condiciones, etc.
Tenga en mente que, aunque por lo general el elemento <footer> representa el final del cuerpo del documento y tiene el propósito principal descrito, también puede ser utilizado varias veces dentro del cuerpo para representar también el final de diferentes secciones. (así como también las etiquetas <header> pueden ser utilizadas varias veces en el cuerpo.) Estudiaremos este uso más adelante.
1.5 En el interior del cuerpo
El cuerpo de nuestro documento está listo, pero, aunque la estructura básica del sitio está terminada, aún tenemos que desarrollar el contenido. Los elementos HTML5 estudiados hasta ahora nos ayudan a identificar cada segmento del diseño y la finalidad intrínseca de cada uno, pero lo realmente importante para nuestro sitio web es el contenido de cada uno de esos segmentos.
La mayor parte de los elementos ya analizados fueron creadas para proporcionar una estructura para el documento HTML que pueda ser identificada y reconocida por los navegadores y dispositivos. Hemos conocido las etiquetas <body>, que declaran el cuerpo o la parte visible del documento, las etiquetas <header>, que encierran información importante del cuerpo, las etiquetas <nav>, que suministran ayudas a la navegación, las etiquetas <section>, que incluyen el contenido más relevante, y las etiquetas <aside> y <footer>, que proporcionan información adicional.
Sin embargo, ninguno de estos elementos declara nada sobre el contenido propiamente, sino que tienen una función estructural muy específica.
A medida que avanzamos en la creación del documento HTML, nos acercamos a la definición de los contenidos. Esta información estará compuesta de diferentes elementos visuales tales como títulos, textos, imágenes, vídeos y aplicaciones interactivas, entre otros. Es necesario que sea posible diferenciar estos elementos y establecer relaciones entre ellos.
1.5.1 <article>
El diseño básico con el que venimos trabajando (Figura 1-1) es hoy en día la estructura más común y básica para sitios web en Internet, pero también ilustra cómo son mostrados en pantalla los contenidos más relevantes.
De la misma manera que los blogs se dividen en entradas, los sitios web suelen presentar la información relevante dividida en partes que comparten características similares. El elemento <article> es el que nos permite identificar cada una de estas partes.
Código 1-17
Uso del elemento <article>.
Como se puede ver en el Código 1-17 que acabamos de presentar, las etiquetas <article> se encuentran dentro de las etiquetas <section>. Las etiquetas <article> están subordinadas a la sección <section> de la misma manera que cualquier elemento colocado entre las etiquetas del elemento <body> está subordinado a este último. E igual que sucede con cualquier elemento anidado dentro del elemento <body>, las etiquetas <article> se colocan una tras otra, y cada una constituye una parte independiente del elemento <section>, como se muestra en la Figura 1-4.
Figura 1-4
Representación visual de las etiquetas <article> dentro de la sección creada para albergar la información relevante de la página web.
Conceptos básicos
Ya hemos explicado antes que la estructura HTML puede ser descrita como un árbol cuya raíz es el elemento <html>. Otra forma de describir las relaciones entre los elementos es nombrarlos como padres, hijos o hermanos de acuerdo a su posición en la estructura de árbol. Por ejemplo, en un documento HTML típico, el elemento <body> es hijo del elemento <html> y hermano del elemento <head>. Ambos, <body> y <head>, tienen al elemento <html> como padre.
El elemento <article> no está limitado a artículos de noticias, por ejemplo, sino que está destinado a contener cualquier elemento de contenido independiente. Por tanto, puede incluir ya sea una entrada de un foro, un artículo de una revista, una entrada de un blog, un comentario de usuario, o cualquier otro contenido similar. Este elemento, <article>, agrupará segmentos de información relacionados entre sí, independientemente de la naturaleza de la información.
Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia estructura independiente. Para definir esta estructura, podemos tomar ventaja de la versatilidad de las etiquetas <header> y <footer> estudiadas anteriormente. Estas etiquetas son portátiles y pueden ser utilizadas no solo en el cuerpo sino también en cada sección de nuestro documento.
Código 1-18
Construcción de la estructura <article>.
Conceptos básicos
El elemento <p> que hemos usado dentro del pie o, lo que es lo mismo, dentro del elemento <footer> de cada artículo del Código 1-18, define un párrafo. Por defecto, los navegadores muestran los contenidos de estas etiquetas con márgenes y saltos de línea. Además de declarar párrafos, también es posible sacar provecho de las propiedades de este elemento para aplicar formato a textos breves, que es el uso que se le ha dado en este ejemplo.
Los dos artículos insertados en el Código 1-18 se construyeron con el elemento <article> y tienen una estructura específica. En primer lugar, las etiquetas <header> contienen el título, que se define con un elemento <h1>. A continuación está el contenido en sí, que es el texto del artículo. Y finalmente, después del texto, está la etiqueta <footer> que especifica en este caso el número de comentarios.
1.5.2 <hgroup>
Dentro de cada elemento <header>, ya sea al comienzo del cuerpo o al comienzo de cada elemento <article> de nuestro ejemplo, hemos incorporado etiquetas <h1> para indicar un título. Las etiquetas <h1> son, básicamente, todo lo que se necesita para crear el encabezamiento de todas las partes del documento, pero a veces también hay que añadir subtítulos o más información para declarar de qué trata la página web o alguna de sus secciones. De hecho, es habitual que el elemento <header> albergue también otros elementos, como tablas de contenidos, formas de búsqueda, o textos cortos y logotipos.
Puede hacer uso de todas las etiquetas H: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Sin embargo, para fines de procesamiento interno y para evitar la generación de múltiples secciones o subsecciones durante la interpretación del documento, estas etiquetas deben estar agrupadas. Para ello, HTML5 proporciona el elemento <hgroup>.
Código 1-19
Uso del elemento <hgroup>.
Las etiquetas H deben respetar su jerarquía, es decir, primero se debe declarar el título con la etiqueta <h1>, a continuación, utilizar <h2> para los subtítulos, y así sucesivamente. Sin embargo, a diferencia de las versiones anteriores de HTML, HTML5 permite reutilizar las etiquetas H y construir esta jerarquía una y otra vez en cada sección del documento. En el ejemplo del Código 1-19, se añade un subtítulo y metadatos para cada entrada y agrupamos a títulos y subtítulos con la etiqueta <hgroup>. La jerarquía <h1> y <h2> es reutilizada en cada elemento <article>.
Importante
El elemento <hgroup> es necesario cuando hay un título y un subtítulo, o más etiquetas H juntas en el mismo elemento <header>. Este elemento solo puede contener etiquetas H y por eso en el ejemplo lo mantuvimos fuera de los metadatos. Si solo dispone de la etiqueta <h1> o la etiqueta <h1> y metadatos, no tiene que agrupar estos elementos. Por ejemplo, en el elemento <header> del cuerpo no las usamos porque éste solo contenía un elemento H dentro. Recuerde siempre que las etiquetas <hgroup> han sido diseñadas para agrupar solamente las etiquetas H, tal como como su nombre indica.
Los navegadores y programas que ejecutan sitios web leen el código HTML y crean su propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna se divide en secciones que son independientes de las divisiones en el diseño o del elemento <section>. Estas son las secciones conceptuales generadas durante la interpretación del código. El elemento <header> no crea una de estas secciones conceptuales por sí mismo, lo que significa que los elementos dentro del <header> representan diferentes niveles y podrían generar internamente secciones diferentes. El elemento <hgroup> fue creado con el propósito de agrupar etiquetas H y evitar errores de interpretación por parte del navegador.
1.5.3 <figure> y <figcaption>
La etiqueta <figure> fue creada para ser declarar el contenido del documento de una forma más específica. Antes de que fuera introducido este elemento, no era posible identificar el contenido que formaba parte de la información, sino el que era independiente, por ejemplo, ilustraciones, fotos, videos, etc. Por lo general, esos elementos forman parte de los contenidos relevantes pero pueden ser removidos sin afectar o interrumpir el flujo de un documento. Cuando este tipo de información está presente, puede ser identificada con las etiquetas <figure>.
Código 1-20
Uso de los elementos <figure> y <figcaption>.
En el Código 1-20, insertamos en la primera entrada una imagen (<img src=“http://www.minkbooks.com/content/myimage.jpg”>) después del texto del mensaje. Ésta es una práctica habitual, pues a menudo el texto está enriquecido con imágenes o videos. Las etiquetas <figure> nos permiten encerrar estos elementos visuales y diferenciarlos de la información más relevante.
También en el Código 1-20 se encuentra un elemento adicional dentro del elemento <figure>. Por lo general, las unidades de información como imágenes o vídeos vienen acompañadas de un breve texto, normalmente ubicado bajo ellas, que las describe. HTML5 aporta un elemento para ubicar e identificar esta leyenda descriptiva. Las etiquetas <figcaption> encierran la leyenda relacionada con el elemento <figure> y establecen una relación entre ambos elementos y su contenido.
1.5.4 <details> y <summary>
Una característica importante de los sitios web es la posibilidad de mostrar información adicional cuando así es solicitado por el usuario. Para evitar el uso de Javascript y facilitar la creación de esta herramienta, HTML5 incorpora los elementos <details> y <summary>. El elemento <details> declara la herramienta de ampliación de información y, dentro de este elemento, se especifica el título de la herramienta con el elemento <summary> además de toda la información que ésta oculta.
Código 1-21
Creación de una herramienta con <details> y <summary>.
Figura 1-15
El elemento <details> antes y después de pulsar sobre él.
1.6 Elementos nuevos y elementos antiguos
HTML5 ha sido desarrollado con el fin de simplificar, precisar y organizar el código. Para lograr estos propósitos, se añadieron elementos y atributos y se integró HTML con CSS y Javascript. Estas incorporaciones y mejoras respecto a las versiones anteriores no se refieren solo a los nuevos elementos sino también a la forma en la que usamos los viejos.
1.6.1 <mark>
La etiqueta <mark> se añadió para resaltar parte de un texto que en principio no es considerada importante, pero que puede adquirir relevancia de acuerdo con la actividad del usuario. El mejor ejemplo es un resultado de búsqueda. El elemento <mark> resaltar la parte del texto que coincide con la cadena de búsqueda.
Código 1-22
Uso del elemento <mark> para resaltar la palabra “coche”.
Si alguien realiza una búsqueda en una página web para la palabra “coche”, los resultados podrían ser mostrados con el Código 1-22. El breve texto representa los resultados de la búsqueda, y las etiquetas <mark> encierran el texto que se ha buscado (la palabra “coche” en nuestro ejemplo). En algunos navegadores, la palabra buscada se resalta con un fondo amarillo por defecto, pero siempre es posible sobrescribir esos estilos usando su propio CSS, como veremos en capítulos posteriores.
En el pasado, generalmente se lograba el mismo resultado utilizando un elemento <b>. Sin embargo, la adición de <mark> ayudó a cambiar el sentido y establecer un nuevo propósito para estos y otros elementos relacionados.
<em>: Se utiliza para indicar énfasis (en sustitución de la etiqueta <i> que hemos utilizado antes).
<strong>: Es para indicar importancia.
<mark>: Destaca texto que es pertinente de acuerdo con las circunstancias.
<b>: Debe ser utilizado solo cuando no hay ningún otro elemento apropiado para la situación.
<i>: Ya no declara cursiva a un texto, pero de acuerdo a la especificación, representa una voz alternativa o humor, como un pensamiento, un término técnico, etc.
1.6.2 <small>
La nueva especificación de HTML también es evidente en elementos como <small>. Anteriormente, este elemento presentaba cualquier texto en fuente pequeña. La palabra clave hacía referencia al tamaño del texto, independientemente de su significado. En HTML5, el propósito del elemento <small> es representar la “letra pequeña” en sentido figurado, es decir, textos legales, renuncias, etc.
Código 1-23
Texto legal con <small>.
1.6.3 <cite>
Otro elemento que se ha vuelto más específico es <cite>. Ahora estas etiquetas encierran el título de una obra como un libro, una película, una canción, etc.
Código 1-24
Citar una película con <cite>.
1.6.4 <address>
El elemento <address> es un viejo elemento que se ha hecho estructural. No hemos tenido que utilizarlo en la construcción de nuestro documento de ejemplo, pero puede encajar perfectamente en algunas situaciones para representar la información de contacto de un elemento o <article> del elemento <body> entero. Este elemento debe ser incluido dentro de un elemento <footer>, como en el ejemplo siguiente:
Código 1-25
Agregar información de contacto para un elemento <cite>.
Conceptos básicos
El hipertexto es parte de la naturaleza de HTML5: un texto que presenta referencias a otros textos y permite a los lectores moverse o “navegar” a través de los documentos. El elemento <a>, implementado en el Código 1-25, se utiliza para crear los hipervínculos necesarios para proporcionar esta característica. Como ya se ha mencionado, este elemento tiene un atributo llamado href para declarar la ruta del documento al que estamos apuntando.
1.6.5 <wbr>
La etiqueta <br>, un elemento que no usa etiqueta de cierre, era anteriormente el único elemento utilizado para insertar un salto de línea en un párrafo. Los navegadores muestran un salto de línea en el lugar de este elemento. Pero solo es útil cuando se sabe exactamente dónde debe generarse el salto de línea. HTML5 introduce el nuevo elemento <wbr>
