Introducción
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web aplicaciones en una era que combina dispositivos móviles, computación en la nube y trabajos en red.
Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información. El lenguaje y la web misma nacieron principalmente con la intención de comunicar información por medio de texto. El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes y programas para agregar características a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios.
Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre. De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron masivamente adoptadas y ampliamente consideradas como el futuro de Internet. Sin embargo, tan pronto como el número de usuarios se incrementó e Internet pasó de ser una forma de conectar amantes de los ordenadores a un campo estratégico para los negocios y la interacción social, limitaciones presentes en estas dos tecnologías probaron ser una sentencia de muerte.
El mayor inconveniente de Java y Flash puede describirse como una falta de integración. Ambos fueron concebidos desde el principio como complementos (plug-ins), algo que se inserta dentro de una estructura pero que comparte con la misma solo espacio en la pantalla. No existía comunicación e integración alguna entre aplicaciones y documentos.
La falta de integración resultó ser crítica y preparó el camino para la evolución de un lenguaje que comparte espacio en el documento con HTML y no está afectado por las limitaciones de los plug-ins. Javascript, un lenguaje interpretado incluido en navegadores, claramente era la manera de mejorar la experiencia de los usuarios y proveer funcionalidad para la web. Sin embargo, después de algunos años de intentos fallidos para promoverlo y algunos malos usos, el mercado nunca lo adoptó plenamente y pronto su popularidad declinó. Los detractores tenían buenas razones para oponerse a su adopción. En ese momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o Java. A pesar de ser evidente que ambos limitaban el alcance de las aplicaciones y aislaban el contenido web, populares funciones como la reproducción de video se estaban convirtiendo en una parte esencial de la web y solo eran efectivamente ofrecidas a través de estas tecnologías.
A pesar del suceso inicial, el uso de Java comenzó a declinar. La naturaleza compleja del lenguaje, su evolución lenta y la falta de integración disminuyeron su importancia hasta el punto en el que hoy día no es más usado en aplicaciones web de importancia. Sin Java, el mercado volcó su atención a Flash. Pero el hecho de que Flash comparte las mismas características básicas que su competidor en la web lo hace también susceptible de correr el mismo destino.
Mientras esta competencia silenciosa se llevaba a cabo, el software para acceder a la web continuaba evolucionando. Junto con nuevas funciones y técnicas rápidas de acceso a la red, los navegadores también mejoraron gradualmente sus intérpretes Javascript. Más potencia trajo más oportunidades y este lenguaje estaba listo para aprovecharlas.
En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores que ni Java o Flash podrían proveer las herramientas que ellos necesitaban para crear las aplicaciones demandadas por un número creciente de usuarios. Estos desarrolladores, impulsados por las mejoras otorgadas por los navegadores, comenzaron a aplicar
Javascript en sus aplicaciones de un modo nunca visto. La innovación y los increíbles resultados obtenidos llamaron la atención de más programadores. Pronto lo que fue llamado la “Web 2.0” nació y la percepción de Javascript en la comunidad de programadores cambió radicalmente.
Javascript era claramente el lenguaje que permitía a los desarrolladores innovar y hacer cosas que nadie había podido hacer antes en la web. En los últimos años, programadores y diseñadores web alrededor del mundo surgieron con los más increíbles trucos para superar las limitaciones de esta tecnología y sus iniciales deficiencias en portabilidad. Gracias a estas nuevas implementaciones, Javascript, HTML y CSS se convirtieron pronto en la más perfecta combinación para la necesaria evolución de la web. HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo. HTML5 propone estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologías involucradas. A partir de ahora, HTML provee los elementos estructurales, CSS se encuentra concentrado en cómo volver esa estructura utilizable y atractiva a la vista, y Javascript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales.
Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las tecnologías requeridas para el proceso de integración están listas. El futuro de la web es prometedor y la evolución y combinación de estas tres tecnologías (HTML, CSS y Javascript) en una poderosa especificación está volviendo a Internet la plataforma líder de desarrollo. HTML5 indica claramente el camino.
IMPORTANTE: En este momento no todos los navegadores soportan HTML5 y la mayoría de sus funciones se encuentran actualmente en estado de desarrollo. Recomendamos leer los capítulos y ejecutar los códigos con las últimas versiones de Google Chrome y Firefox. Google Chrome ya implementa muchas de las características de HTML5 y además es una buena plataforma para pruebas. Por otro lado, Firefox es uno de los mejores navegadores para desarrolladores y también provee total soporte para HTML5.
Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador instala y prueba sus códigos en cada programa disponible en el mercado. Ejecute los códigos provistos en este libro en cada uno de los navegadores disponibles.
Para descargar las últimas versiones, visite los siguientes enlaces:
www.google.com/chrome
www.apple.com/safari/download
www.mozilla.com
windows.microsoft.com
www.opera.com
En la conclusión del libro exploramos diferentes alternativas para hacer sus sitios webs y aplicaciones accesibles desde viejos navegadores e incluso aquellos que aún no están preparados para HTML5.
1. HTML5 (HyperText Markup Language)
HTML5 es la última versión del lenguaje de marcado estándar para crear páginas web. Proporciona la estructura básica de una página web y permite definir elementos y su semántica.
Características Clave:
- Semántica: Introduce elementos semánticos como
<header>,<footer>,<article>,<section>, y<nav>para una mejor estructura del contenido y SEO. - Multimedia: Soporta elementos para incluir audio (
<audio>) y video (<video>) directamente en la página. - Formularios Mejorados: Nuevos tipos de entrada y atributos, como
<input type="email">o<input type="date">, mejoran la funcionalidad y la validación del formulario. - Almacenamiento: Permite almacenamiento local y de sesión mediante
localStorageysessionStorage.
Ejemplo de Código HTML5:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Web</title>
</head>
<body>
<header>
<h1>Bienvenido a mi página web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre">Sobre nosotros</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<section id="inicio">
<h2>Inicio</h2>
<p>Contenido de la página de inicio.</p>
</section>
<section id="sobre">
<h2>Sobre nosotros</h2>
<p>Información sobre la empresa.</p>
</section>
<section id="contacto">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
</form>
</section>
<footer>
<p>© 2024 Mi Empresa</p>
</footer>
</body>
</html>
2. CSS (Cascading Style Sheets)
CSS se utiliza para estilizar y diseñar los elementos HTML. Controla la apariencia visual de la página web, incluyendo colores, fuentes, márgenes, y diseño en general.
Características Clave:
- Selección de Elementos: Permite seleccionar y aplicar estilos a elementos HTML mediante selectores.
- Diseño Responsivo: Mediante consultas de medios (media queries), CSS permite que el diseño se ajuste a diferentes tamaños de pantalla.
- Diseño de Layout: Utiliza técnicas como Flexbox y Grid para crear diseños complejos y adaptativos.
- Transiciones y Animaciones: Permite agregar efectos de transición y animaciones a los elementos de la página.
Ejemplo de Código CSS:
/* Estilos básicos */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 10px;
background: #fff;
border-radius: 5px;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
3. JavaScript
JavaScript es un lenguaje de programación que se utiliza para crear interactividad en las páginas web. Permite realizar operaciones en el lado del cliente, como manipular el DOM, gestionar eventos, y realizar peticiones asíncronas.
Características Clave:
- Manipulación del DOM: Permite acceder y modificar el contenido y la estructura del HTML mediante el DOM (Document Object Model).
- Manejo de Eventos: Puede reaccionar a eventos del usuario, como clics y entradas de teclado.
- Programación Asíncrona: Utiliza promesas y
async/awaitpara manejar operaciones asíncronas, como peticiones a un servidor. - Validación de Formularios: Permite validar datos antes de enviarlos al servidor.
Ejemplo de Código JavaScript:
// Cambiar el color de fondo al hacer clic en un botón
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('button');
button.addEventListener('click', () => {
document.body.style.backgroundColor = '#e0e0e0';
});
});// Validar el formulario
document.querySelector('form').addEventListener('submit', (event) => {
const nombre = document.getElementById('nombre').value;
const email = document.getElementById('email').value;
if (nombre === '' || email === '') {
alert('Todos los campos son obligatorios.');
event.preventDefault(); // Evita el envío del formulario
}
});
Interacción entre HTML, CSS y JavaScript
- HTML estructura el contenido.
- CSS se encarga del estilo y diseño visual del contenido estructurado en HTML.
- JavaScript añade interactividad y lógica al contenido estructurado y estilizado con HTML y CSS.