El gran libro de HTML5, CSS3 y Javascript

Diego Gauchat Juan

• Publisher: Marcombo
• Year: 2013
• ISBN:
  9788426720641
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Programación web

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.

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

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, si...