Está destinado a suceder. Tarde o temprano, alguien escribirá una URL incorrecta o seguirá un enlace roto a su sitio. Aquí es cuando se muestra la notoria página 404. Para que la experiencia sea menos frustrante, puede tomarse el tiempo y diseñar una página de error amigable, que alentará a su usuario a permanecer en su sitio web.
Hoy estamos haciendo precisamente eso. Vamos a crear una página 404 animada, que puede personalizar y mejorar fácilmente.
El HTML
Como de costumbre, comenzamos con el marcado HTML. Aquí estamos usando el nuevo tipo de documento HTML5 y el nuevo hgroup etiqueta. En la sección principal, incluimos el script de habilitación de HTML5 para IE dentro de un comentario condicional. Este script ayudará a Internet Explorer a comprender las nuevas etiquetas HTML5.
404.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an Animated 404 Page | Tutorialzine Demo</title>
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="rocket"></div>
<hgroup>
<h1>Page Not Found</h1>
<h2>We couldn't find what you were looking for.</h2>
</hgroup>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html> Después de la secuencia de comandos de habilitación de HTML5, incluimos la hoja de estilo, un extracto de la cual se proporciona en la siguiente sección. Dentro de la etiqueta del cuerpo, puedes ver el #rocket div y el mencionado hgroup . El #cohete div tiene cohete.png como fondo, y tiene una serie de estilos aplicados, incluido el posicionamiento relativo, que es necesario para la animación, como verá en un momento.
Por último, tenemos la biblioteca jQuery y nuestro script.js archivo, también discutido en las siguientes secciones.
La página es minimalista y presenta solo información básica para el usuario. Puede mejorarlo al incluir un mensaje más específico del sitio y un enlace a su página de inicio (u otros recursos que considere adecuados).
El CSS
Ahora pasemos al estilo. Como se mencionó en la parte HTML del tutorial, el #rocket El posicionamiento de div se establece en relativo. Esto nos permite insertar los tramos absolutamente posicionados, que forman los gases de escape que salen del motor, y compensarlos con respecto al cohete.
body{
background:url('img/bg.png') no-repeat center center #1d1d1d;
color:#eee;
font-family:Corbel,Arial,Helvetica,sans-serif;
font-size:13px;
}
#rocket{
width:275px;
height:375px;
background:url('img/rocket.png') no-repeat;
margin:140px auto 50px;
position:relative;
}
/* Two steam classes. */
.steam1,
.steam2{
position:absolute;
bottom:78px;
left:50px;
width:80px;
height:80px;
background:url('img/steam.png') no-repeat;
opacity:0.8;
}
.steam2{
/* .steam2 shows the bottom part (dark version)
* of the background image.
*/
background-position:left bottom;
}
hgroup{
/* Using the HTML4 hgroup element */
display:block;
margin:0 auto;
width:850px;
font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
text-align:center;
}
h1{
color:#76D7FB;
font-size:60px;
text-shadow:3px 3px 0 #3D606D;
white-space:nowrap;
}
h2{
color:#9FE3FC;
font-size:18px;
font-weight:normal;
padding:25px 0;
} Cada tramo de vapor tiene 80 px de ancho por 80 px de alto, y se le asigna steam.png como fondo. Esta imagen tiene el doble de la altura de los tramos y en realidad contiene dos versiones del vapor:blanco y negro. El steam1 y vapor2 Las clases muestran la versión respectiva de la imagen. La versión ligera del vapor crea la ilusión de humo, mientras que la versión negra hace parpadear las llamas del motor del cohete.
jQuery crea e inserta los tramos de vapor en el #cohete contenedor, y los mueve en la dirección opuesta al movimiento del cohete con el animar método, como verá en unos momentos.
JQuery
Como discutimos anteriormente, la parte de jQuery es crear la animación de los gases de escape. Echemos un vistazo más de cerca a cómo se logra esto.
La secuencia de comandos comienza adjuntando un detector de eventos a la ventana de carga. evento. Esto difiere del documento listo evento al que solemos apuntar, en ese window.load se activa cuando no solo se carga el DOM, sino también las imágenes. De esta forma podemos estar seguros de que el usuario no va a ver el humo del cohete antes de rocket.png está cargado.
$(window).load(function(){
// We are listening for the window load event instead of the regular document ready.
function animSteam(){
// Create a new span with the steam1, or steam2 class:
$('<span>',{
className:'steam'+Math.floor(Math.random()*2 + 1),
css:{
// Apply a random offset from 10px to the left to 10px to the right
marginLeft : -10 + Math.floor(Math.random()*20)
}
}).appendTo('#rocket').animate({
left:'-=58',
bottom:'-=100'
}, 120,function(){
// When the animation completes, remove the span and
// set the function to be run again in 10 milliseconds
$(this).remove();
setTimeout(animSteam,10);
});
}
function moveRocket(){
$('#rocket').animate({'left':'+=100'},5000).delay(1000)
.animate({'left':'-=100'},5000,function(){
setTimeout(moveRocket,1000);
});
}
// Run the functions when the document and all images have been loaded.
moveRocket();
animSteam();
}); El animSteam() función es lo que crea el efecto de humo. Cuando se llama, la función ejecuta una animación que, cuando se completa, usa setTimeout para programar la misma función para que se ejecute de nuevo en 10 milisegundos. Esto evita acumulaciones:iniciar una segunda animación antes de que se complete la primera.
El script elige aleatoriamente entre steam1 y vapor2 clases en la línea 10 y compensa el lapso horizontalmente con un valor aleatorio de margin-left . En el animar() método, más adelante en la cadena, le decimos a jQuery que comience una animación desde la posición actual del div de vapor (que está exactamente sobre la boquilla del cohete) y mueva el elemento 58 píxeles hacia la izquierda y 100 píxeles hacia abajo.
Después de esto, pasamos la duración de la animación:120 milisegundos y una función de devolución de llamada, que se ejecutará después de que se complete la animación.
La otra función de animación - moveRocket() mueve lentamente el cohete hacia la izquierda y hacia la derecha modificando la propiedad CSS izquierda. Ambas funciones se llaman una vez al final del archivo. Si desea deshabilitar una de las animaciones, simplemente comente la llamada de función respectiva.
¡Con esto nuestra Página 404 Animada está completa!
Conclusión
Recuerde que para que la página se muestre cuando se produzca un error 404, debe agregar esta línea a su .htaccess archivo:
ErrorDocument 404 /404.html
Esto generará la página con los encabezados apropiados, dado que la ha colocado en su carpeta raíz. También puede agregar más información útil a la página, como enlaces a su página de inicio, un mensaje más personalizado o incluso una forma para que los usuarios informen los errores que han encontrado.