HTML5 CSS3 JavaScript

Como sabemos HTML5 (Lenguaje de marcado, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web. Todavía se encuentra en modo experimental, lo cual indica la misma W3C (World Wide Web Consortium), aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas.

Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.

En combinación con CSS3, HTML5 resulta ser una herramienta muy potente para el desarrollo web.

¿No sabes que es CSS3? CSS3 (Hojas de estilo en cascada, versión 3) es el lenguaje de hojas de estilo para describir el aspecto y el formato de un documento que se escribe en alguna versión de HTML u otros lenguajes como XML, por ejemplo. La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo «<style>».

Una hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de reglas consiste en uno o más selectores y un bloque de declaración (o «bloque de estilo») con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede.

Antes de ver un ejemplo y recomendaciones para iniciar con HTML5 veamos algunos sitios para que te inspires a usar HTML5 combinado con CSS3 y Javascript:

Otros efectos muy divertidos con estas herramientas son:

¿Verdad que están muy buenos los efectos?

Veamos un ejemplo sencillo para que te familiarices con todo esto. Para iniciar con HTML5 solamente debemos tener instalado algún editor de texto (cualquiera, incluso el bloc de notas) pero mi recomendación para comenzar es: Notepad++ que además te sirve para muchos otros tipos de archivos de otros lenguajes de programación, es gratuito y te marca la sintaxis de diferentes colores para que te adaptes a las etiquetas del lenguaje.

Una vez instalado puedes comenzar a trabajar con HTML5. La sintaxis básica (Hola Mundo) es:

<!DOCTYPE html>
<html>
<head>
<title>HolaMundo</title>
<link rel="stylesheet" href="/estilos.css">
</head>
<body>
<h1>HOLA MUNDO</h1>
</body>
</html>

Como puedes observar la única diferencia entre alguna versión anterior de HTML es la etiqueta <!DOCTYPE html> que le está indicando al navegador que se trata de HTML5. A continuación vamos a ver una forma alternativa de definir un pasador de imágenes usando tecnologías de HTML5, en concreto, transiciones de CSS3.

Lo primero que tenemos que hacer es inicializar los elementos que queremos animar. En nuestro caso pondremos la clase «active» al elemento actual, y las clases «prev» y «next» al elemento anterior y siguiente respectivamente.

Para las animaciones definiremos 3 clases «center», «prev» y «next». Estas clases serán las posiciones finales de los elementos. Por ejemplo, si le damos al botón siguiente. El elemento con clase «active» pasará a tener la clase «prev» y el elemento con la clase «next» pasará a tener la clase «center».

.slider div.images div.next {
left:100%;
}
.slider div.images div.prev {
left:-100%;
}
.slider div.images div.center {
left:0;
}

Para que funcionen las animaciones definiremos una clase «animate» a la cual le pondremos la transición a utilizar:

.slider div.images div.animate {
transition: left 400ms;
-moz-transition: left 400ms;
-webkit-transition: left 400ms;
-ms-transition:left 400ms;
-o-transition:left 400ms;
z-index: 2;
}

Luego sólo tendremos que ir añadiendo y quitando clases por medio de javascript. El código completo quedaría algo así:

<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

$.fn.slider = function () {
$(this).each(function () {
var divimages = $(this).find("div.images");
divimages.find("div:first").addClass("active");
divimages.find("div:first").next().addClass("next");
divimages.find("div:last").addClass("prev");

var lock = null;

var init = function (div) {
var active = div.find("div.active");
div.find("div.animate").removeClass("animate");
div.find("div.center").removeClass("center");;
div.find("div.next").removeClass("next");
div.find("div.prev").removeClass("prev");
var next = active.next();
if (next.size() == 0) {
next = div.find("div:first");
}
var prev = active.prev();
if (prev.size() == 0) {
prev = div.find("div:last");
}
next.addClass("next");
prev.addClass("prev");
}

$(this).find("a.next").click(function (e) {
e.preventDefault();

if (lock) return;
lock = true;

var active = divimages.find("div.active");
var next = divimages.find("div.next");

next.addClass("active animate center");
active.removeClass("active").addClass("animate prev");

setTimeout(function () {
init(divimages);
lock = false;
}, 400);
});

$(this).find("a.prev").click(function (e) {
e.preventDefault();

if (lock) return;
lock = true;

var active = divimages.find("div.active");
var prev = divimages.find("div.prev");

prev.addClass("active animate center");
active.removeClass("active").addClass("animate next");

setTimeout(function () {
init(divimages);
lock = false;
}, 400);
});
});
}

$(document).ready(function () {
$(".slider").slider();
});
</script>
<style>
body {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
.slider {
width: 320px;
margin: 0 auto;
}
.slider div.images {
position: relative;
width: 320px;
height: 200px;
overflow: hidden;
}
.slider div.images div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: black;
z-index: 1;
}
.slider div.images div img {
display: block;
width: 100%;
height: 100%;
}
.slider div.images div.active {
z-index: 2;
}
.slider div.images div.animate {
transition: left 400ms;
-moz-transition: left 400ms;
-webkit-transition: left 400ms;
-ms-transition: left 400ms;
-o-transition: left 400ms;
z-index: 2;
}
.slider div.images div.next {
left: 100%;
}
.slider div.images div.prev {
left: -100%;
}
.slider div.images div.center {
left: 0;
}
.slider div.actions {
text-align: center;
padding: 5px 0;
}
.slider div.actions a {
display: inline-block;
margin: 0 5px;
outline: none;
border: #CCC solid 1px;
border-radius: 5px;
font-size: 10px;
color: #333;
line-height: 100%;
text-decoration: none;
padding: 4px 10px;
transition: background-color 500ms;
-moz-transition: background-color 500ms;
-webkit-transition: background-color 500ms;
-ms-transition: background-color 500ms;
-o-transition: background-color 500ms;
}
.slider div.actions a:hover {
background: #CCC;
}

</style>
</head>
<body>

Luego sólo tendremos que ir añadiendo y quitando clases por medio de javascript. El código completo quedaría algo así:

¿Qué tal? Te dejo algunos libros interesantes sobre el tema:

Gauchat, J. (2012). El Gran libro de HTML5, CSS3 y Javascript. Barcelona: Marcombo.
Lubbers, P., Albers, B., Salim, F. & Pye, T. (2011). Pro HTML5 programming. New York: Apress.