Ejercicio práctico: creación de una página web paso por

paso

Aquí estamos, por fin. Este capítulo es algo especial y bastante diferente de lo que hemos
visto hasta ahora. Es, de hecho, un ejercicio práctico. Ahora ya no vale leerse mis capítulo
medio dormido: tendrás que ensuciarte las manos conmigo.

Aunque hasta el momento has leído un montón de teoría, quizá te sigas preguntando cómo
crean los webmasters páginas web tan elegantes. Quizá te sigas repitiendo que todavía te
queda un largo trecho hasta conseguir el conocimiento necesario para crear toda una página
web... ¡Pues te equivocas!

Esbozar el diseño
Me lo puedo imaginar. Estarás pensando «Estupendo, vamos a crear una página web
entera», así que abrirás tu editor de texto (Notepad++, por ejemplo), me mirarás y dirás «Vale,
¿por qué línea de código empezamos?»

Y tendré que pararte los pies. Coge lápiz y papel: primera has de pensar qué página de web
quieres crear. ¿De qué va a hablar? ¿Tienes algún tema u objetivo?

La experiencia me dice que la mayoría de vosotros solo queréis aprender en esta etapa. y
puede que no tengáis ninguna idea concreta en mente. Si es el caso, os sugiero que creéis
una página web para presentaros y trabajar vuestra presencia en Internet: esta página hablará
sobre vosotros e incluirá vuestra trayectoria profesional, vuestros futuros proyectos y, por qué
no, vuestro blog.

Por mi parte, en este ejercicio práctico crearé la página web de nuestra mascota Zozor, el
famoso burro (siguiente ilustración). Zozor ha decidido embarcarse en un viaje por todo el
mundo y su primera para será... ¡San Francisco! Por eso, quiere crearse una página web para
que la gente lo conozca y siga su viaje por todo el mundo.

El primer paso será esbozar el diseño para seguir un modelo de página web a la hora de
crearla. En este punto tenemos dos posibilidades:

 o eres un diseñador gráfico (o conoces a uno) acostumbrado a trabajar diseños con

programas como Photoshop;
 no eres demasiado creativo y te falta inspiración, en cuyo caso puedes inspirarte en
páginas web como https://html5up.net/, de donde los diseñadores pueden sacar ideas e
¡incluso utilizar los códigos HTML/CSS ya diseñados!

En mi caso, consulté a Jiyong Fan, el diseñador gráfico que sugirió el diseño (que por cierto
me encanta) que podéis ver a continuación.
Diseño del borrador: Fan Jiyong

Este borrador es en realidad solo una foto del resultado que queremos obtener. Le pedí al
diseñador gráfico que me facilitara los elementos que me ayudarían a crear el diseño; en otras
palabras, los códigos de color usados, las imágenes recortadas (mostradas abajo) y las
fuentes que iba a necesitar.
Unas cuantas imágenes recortadas utilizadas en el diseño

¡Y todo lo que hemos de hacer es crear la página web! Lo haremos en dos fases:

1. Crear el boceto HTML de la página.

2. Formatearlo y hacer el diseño de la página mediante CSS.

Venga, ¡manos a la obra!

Organizar el contenido en HTML

El primer paso es diferenciar los bloques principales en el modelo. Estos bloques conformarán
el borrador de nuestra página.

Para crear el borrador, utilizaremos varias etiquetas HTML:

 las etiquetas estructurales HTML5, que ya conocemos:<header>,<section>,<nav>, etc.;

 la etiqueta para fines generales<div>cuando no haya una etiqueta estructural
adecuada.

¿Cómo sé qué etiqueta he de utilizar?

Eso es decisión tuya. Lo ideal sería utilizar una etiqueta lógica (como las etiquetas
estructurales<header>,<section>,<nav>), pero si no hay ninguna que te parezca la adecuada,
decántate por la etiqueta genérica<div>.

Observa la siguiente ilustración y verás mi sugerencia de estructura.

Se nos pueden ocurrir otras maneras de vertebrar la estructura, ¡así que ten en cuenta que mi
opción no es por fuerza la única!

Aunque no todas las etiquetas que vamos a utilizar aparecen en este modelo, te darán una
idea de la disposición de elementos que sugiero.
En realidad, el código HTML no es la parte compleja de la construcción de la página web, así
que si has entendido la disposición de etiquetas no deberías tener ningún problema al escribir
un código similar al mío:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Zozor - Travel diaries</title>
</head>

<body>
<div id="main_wrapper">
<header>
<div id="main_title">
<img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />
<h1>Zozor</h1>
<h2>Travel diariese</h2>
</div>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<div id="banner_image">
<div id="banner_description">
Reflections on my holiday in the United States...
<a href="#" class="red_button">See article <img src="images/small_arrow.png" alt=""
/></a>
</div>
</div>

<section>
<article>
<h1><img src="images/pin.png" alt="Travel category" class="ico_categorie" />I'm a great
traveller</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
</article>
<aside>
<h1>About the author</h1>
<img src="images/arrow.png.png" alt="" id="arrow" />
<p id="zozor_picture"><img src="images/images/zozor.png" alt="Zozor Picture" /></p>
 <p>Let me introduce myself: My name's Zozor. I was born on 23 November 2005.</p>
<p>A bit meager, is it not? This is why I've now decided to write my biography to let my
readers know who I really am.</p>
<p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png"
alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr"
/><img src="images/rss.png" alt="RSS" /></p>
</aside>
</section>

<footer>
<div id="tweet">
<h1>My last tweet</h1>
<p>Hee-haw!</p>
<p>12/05 23:12</p>
</div>
<div id="my_pictures">
<h1>My pictures</h1>
<p><img src="images/pic1.jpg" alt="Picture" /><img src="images/pic2.jpg" alt="Picture"
/><img src="images/pic3.jpg" alt="Picture" /><img src="images/pic4.jpg" alt="Picture" /></p>
</div>
<div id="my_friends">
<h1>My friends</h1>
<ul>
<li><a href="#">Pupi the rabbit</a></li>
<li><a href="#">Mr Baobab</a></li>
<li><a href="#">Kaiwaii</a></li>
<li><a href="#">Perceval.eu</a></li>
</ul>
<ul>
<li><a href="#">Ji</a></li>
<li><a href="#">Super cucumber</a></li>
<li><a href="#">Prince</a></li>
<li><a href="#">Mr Fan</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>

Un pequeño apunte: como ves, todo el contenido de la página está ubicado dentro de una
larga etiqueta <div> con idmain_wrapper. Esta etiqueta, al alojar todo el contenido, nos
permitirá determinar el tamaño de la página fácilmente y centrar nuestra página web en la
pantalla.

Por lo demás, no hay ningún problema destacable. Verás que no había planeado todas las
etiquetas desde el principio: cuando diseñas en CSS, te das cuenta de que tienes que incluir a
veces algunas etiquetas de un bloque<div>para ayudarte a construir el diseño.
Estarás de acuerdo en que el aspecto de la página web aún no es nada del otro mundo, por
decirlo suave. Puedes observar el resultado actual en la siguiente ilustración.

El
aspecto de una página web al escribirla solo en HTML
Es el código CSS el que obra milagros.

Dar formato en CSS

Las cosas se complican algo más al llegar a la etapa de CSS. Bastante, porque lleva esfuerzo
(y algunos trucos de vez en cuando) obtener un resultado similar al del modelo. Digo «similar
a» porque nunca llegarás a un resultado idéntico píxel por píxel.

Hay que entender esto muy bien: el objetivo es obtener el resultado más similar y no perseguir
la perfección. Incluso si logras la perfección que buscas en un navegador, ten por seguro que
habrá diferencias en otro navegador (más antiguo) o en otro ordenador que no sea el tuyo. Así
pues, simplemente nos esforzaremos al máximo, lo que no deja de ser bastante trabajo, como
podrás comprobar.
Para dar formato al diseño seguiré varios pasos. Voy a tratar los siguientes elementos, en el
orden indicado:

1. Fuentes personalizadas.
2. Definición de los estilos principales de la página (ancho de la página web, color de
fondo, color de texto predeterminado).
3. Encabezado y enlaces de navegación.
4. Banner (que muestra el puente de San Francisco).
5. Sección principal del cuerpo de la página, en el centro.
6. Pie de página.
Fuentes personalizadas
Para el diseño, mi diseñador gráfico ha utilizado tres fuentes en el modelo:

 Trebuchet MS(fuente normal);

 BallparkWeiner(fuente exótica);
 Day Roman(fuente exótica).
Podrás encontrar estas fuentes en el archivo que he dejado para descargar más abajo. Si aún
no lo has hecho, te recomiendo encarecidamente que lo hagas ahora.
La mayoría de ordenadores vienen con Trebuchet MS(aunque no necesariamente todos, en
cuyo caso puedes descargarlo). Las otras dos fuentes, sin embargo, son un poco especiales,
y es poco probable que los ordenadores de quien te visite las tengan. Las descargaremos.

Como ya sabes, es necesario tener varias versiones de estas fuentes para diferentes
navegadores.Dafontsolo ofrece el formato.ttfpara descargar. Por el
contrario,FontSquirrelofrece un generador de fuentes para usar en CSS3 con@font-face: le
mandas un.ttfy la herramienta convierte el archivo al formato necesario, e incluso te
proporciona el código CSS ya preparado.

Yo lo he usado para generar las diferentes versiones de las dos fuentes exóticas que voy a
utilizar. Después, añado el código que me ha proporcionado FontSquirrela mi archivo CSS
para especificar las nuevas fuentes:

/* Definir fuentes personalizadas */

@font-face
{
font-family: 'BallparkWeiner';
src: url('polices/ballpark.eot');
src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
url('polices/ballpark.woff') format('woff'),
url('polices/ballpark.ttf') format('truetype'),
url('polices/ballpark.svg#BallparkWeiner') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}

Aparte de eso, tendrás que hacer que sea posible acceder a los archivos de las fuentes, claro
está. Como ves, he creado una subcarpetapolicespara las diferentes versiones de mis
fuentes.

Definir los estilos principales

Ahora podemos definir unos pocos estilos generales para todo el diseño de nuestra página.
Vamos a establecer una imagen de fondo, la fuente y el color del texto, y concretaremos el
tamaño de nuestra página y la centraremos en la pantalla.

/* Elementos principales de la página */

body
{
background: url('images/yellow_background.png');
font-family: 'Trebuchet MS', Arial, sans-serif;
color: #181818;
}

#main_wrapper
{
width: 900px;
margin: auto;
}

section h1, footer h1, nav a

{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;
}
Con#bloc_page, el bloque ocupa toda la página, así que limito el ancho a 900 píxeles. Con
márgenes automáticos, el diseño será centrado.

Si quieres crear un diseño que quepa en las dimensiones de la pantalla del visitante,
establece el ancho como porcentaje en lugar de en píxeles.
He utilizado la propiedad CSStext-transform: uppercase;(que ya hemos visto) para
asegurar que mis títulos estén siempre en mayúscula. Así pues, esta propiedad transforma el
texto a mayúsculas (también puede hacer lo contrario con lowercase). Date cuenta de que
también podríamos haber escrito los títulos directamente en mayúsculas en el código HTML.

La siguiente ilustración te muestra lo que has conseguido hasta ahora con el código CSS.
Aunque aún nos queda un buen trecho para tener el resultado final, ya parece que nos vamos
acercando.

El
fondo y los límites de la página comienzan a aparecer

Encabezado y enlaces de navegación

Siguiendo la estructura que he sugerido, el encabezado también contiene enlaces de
navegación. Empezaremos estableciendo el encabezado, y, más concretamente, la imagen
en la parte superior izquierda. A continuación, veremos cómo dar formato a los enlaces de
navegación.
El encabezado

/* Encabezado */

header
{
background: url('images/line.png') repeat-x bottom;
}

#main_title
{
display: inline-block;
}

header h1
{
font-family: 'BallparkWeiner', serif;
font-size: 2.5em;
font-weight: normal;
}

#logo, header h1
{
display: inline-block;
margin-bottom: 0px;
}

header h2
{
font-family: Dayrom, serif;
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
}

Vamos a resaltar el encabezado frente al cuerpo de la página con una imagen de fondo. Los
elementos están posicionados mediante inline-block y vamos a personalizar las fuentes y
los tamaños. Nade del otro mundo por el momento.
Los enlaces de navegación

El formato de los enlaces de navegación ya es algo más interesante. Como ya has visto, he
creado una lista no numerada para los enlaces, pero tal lista se muestra por lo general a lo
largo y no a lo ancho. Por suerte, es fácil de cambiar, como verás:
/* Navegación */

nav
{
display: inline-block;
width: 740px;
text-align: right;
}

nav ul
{
list-style-type: none;
}

nav li
{
display: inline-block;
margin-right: 15px;
}

nav a
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
}

nav a:hover
{
color: #760001;
border-bottom: 3px solid #760001;
}

El elemento nuevo aquí es la definición CSS list-style-type: none;, que elimina la figura
redonda utilizada en la lista. Cada elemento de la lista (<li>) se coloca en inline-block, lo
que nos permite ubicar los enlaces en horizontal a nuestro antojo.

Las demás definiciones no especifican nada fuera de lo normal: dimensiones, colores,

bordes... Nada que no sepas ya. Si te das cuenta, puede que no dé con los valores correctos
a la primera. A veces es necesario emplear el método de prueba y error para conseguir un
aspecto parecido al del modelo original.

La siguiente ilustración muestra el resultado obtenido con los últimos retoques de CSS.
 El
encabezado ya está dispuesto

El banner
Ahora nos pondremos con otro ejercicio que es algo más complicado pero muy interesante:
¡el banner! Nuestro modelo contiene un bonito banner en el que aparece el puente de San
Francisco). El banner de tu página web tal vez sea distinto. Como ejemplo, aquí tenemos el
último blog de nuestro amigo Zozor, que acaba de pasar por San Francisco.

El banner es interesante por varios motivos:

 tiene bordes redondos;

 la descripción está escrita sobre un fondo ligeramente transparente;
 el enlace «See the article» está introducido en CSS, con esquinas redondas;
 el banner lleva un sombreado que le da volumen.
Aquí está el código que he usado para crear el banner:

/* Banner */

#banner_image
{
margin-top: 15px;
 height: 200px;
border-radius: 5px;
background: url('images/sanfrancisco.jpg') no-repeat;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
}

#banner_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgb(24,24,24); /* Los navegadores antiguos leerán esto */
background-color: rgba(24,24,24,0.8); /* Los navegadores nuevos leerán esto */
color: white;
font-size: 0.8em;
}

.red_button
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url('images/red_background.png') repeat-x;
border: 1px solid #760001;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
}

.red_button img
{
border: 0;
}
El código es bastante técnico y está lleno de elementos CSS. Es posiblemente la parte más
complicada de crear esta página.

Verás que he optado por mostrar la imagen del puente como imagen de fondo en el bloque
<div> del banner.

También le he aplicado una posición relativa al banner sin usar propiedades para cambiar su
posicionamiento desplazado de su punto original... ¿Por qué? Por lo general, una posición
relativa sin un posicionamiento desplazado de su punto original no tiene ningún sentido... Y
aun así me ha resultado útil a la hora de situar el enlace «See article» en la parte inferior
derecha del banner. De hecho, he colocado el enlace dentro, en una posición absoluta.

¿Y no debería estar el enlace situado en la parte inferior derecha de la página?

No, recuerda lo que ya he explicado: si un bloque se sitúa en una posición relativa dentro de
otro bloque que a su vez tiene una posición absoluta, fija o relativa, el primero se
posicionará dentro del segundo.
Nuestro banner tiene una posición relativa (sin desplazamiento de su punto original). Como el
enlace tiene una posición absoluta dentro, se colocará en la parte inferior derecha del banner.

Esta técnica es particularmente útil y eficiente para crear diseños, ¡así que te convendrá
tenerla presente!

Un último detalle: para la leyenda del banner he optado por utilizar una transparencia con la
notaciónRGBaen lugar de con la propiedadopacity.opacity, de hecho, habría hecho que todo
el contenido del bloque fuera transparente, hasta el enlace «See article» de debajo. Me ha
parecido mejor dejar solo el fondo transparente en vez de extenderlo a todo el bloque.

El resultado es bastante bonito (siguiente ilustración).

El banner ya está dispuesto

¿A que queda genial?

Para producir la gradación de color del botón «See article» he utilizado una imagen de fondo
que presenta tal gradación y he repetido la imagen en horizontal. Deberías saber que existe
una propiedad CSS3 llamadalinear-gradientque te permite crear gradaciones sin tener que
recurrir a una imagen de fondo. Como utilizarlo será un poco complicado de momento, he
decidido no utilizarlo en este ejemplo. ¡Puedes buscar más información si te interesa!

El cuerpo

El cuerpo, en el centro de la página, consiste en este caso en una etiqueta <section>

(aunque podría haber varias etiquetas, claro está).

No hay verdaderas dificultades por lo que respecta al cuerpo. El bloque «About the author»
está situado como elemento inline-block. Jugaremos con los bordes redondos y las sombras y
ajustaremos los márgenes y el tamaño del texto un poco, ¡y ya lo tenemos!
/* Cuerpo */

article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
}

article
{
width: 625px;
margin-right: 15px;
}

.cat_icon
{
vertical-align: middle;
margin-right: 8px;
}

article p
{
font-size: 0.8em;
}

aside
{
position: relative;
width: 235px;
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.9em;
}

#arrow
{
position: absolute;
top: 100px;
left: -12px;
}
#zozor_picture
{
text-align: center;
}

#zozor_picture img
{
border: 1px solid #181818;
}

aside img
{
margin-right: 5px;
}

Aquí, la parte difícil era arreglárnoslas para situar la flecha a la izquierda del bloque <aside>
«About the author» para crear efecto de burbuja. Y de nuevo, nuestro mejor aliado es el
posicionamiento absoluto. La técnica es la misma: He posicionado el bloque <aside>de manera
relativa (sin insertar un desplazamiento del punto original), lo que me ha permitido posicionar la
imagen de la flecha de manera relativa al bloque<aside>(y no de manera relativa a la página
entera). Al ajustar la imagen desplazada de su punto original, puedo situarla con precisión en
cualquier píxel que desee (siguiente ilustración).
El cuerpo de la página ya está dispuesto

El pie de página

Tan solo nos queda ocuparnos del pie de página. Está formado por tres sub-bloques que he
creado con<div>, a los cuales les he asignadoidpara identificarlos mejor. Estos bloques están
posicionados uno al lado del otro coninline-block.

/* Pie de página */

footer
{
background: url('images/top.png') no-repeat top center, url('images/line.png') repeat-x top,
url('images/shadow.png') repeat-x top;
padding-top: 25px;
}

footer p, footer ul
{
font-size: 0.8em;
}

footer h1
{
font-size: 1.1em;
}

#tweet, #my_pictures, #my_friends

{
display: inline-block;
vertical-align: top;
}

#tweet
{
width: 28%;
}

#my_pictures
{
width: 35%;
}

#my_friends
{
width: 31%;
}

#my_pictures img
{
border: 1px solid #181818;
margin-right: 2px;
}

#my_friends ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
list-style-image: url('images/external_link.png');
padding-left: 2px;
}

#my_friends a
{
 text-decoration: none;
color: #760001;
}

Algunos pequeños apuntes sobre el pie de página:

 He utilizado la función de imagen de fondo múltiples de CSS3 para separar el cuerpo

del pie de página. Incluye tres imágenes: el separador, la flecha pequeña ascendente y
una pequeña gradación.
 He cambiado la viñeta de la lista «My Friends» de la parte inferior derecha mediante la
propiedadlist-style-image, que me ha permitido usar una imagen personalizada en
lugar de las viñetas estándar. Hay muchas propiedades CSS específicas como esta y
no podemos pararnos a verlas una por una en este curso, pero ahora que ya te has
hecho con CSS no te costará nada aprender a usarlas leyendolista del anexo con las
principales propiedades CSS.

Nuestro diseño ha quedad terminado (siguiente imagen).

El pie de página ya está dispuesto

Ah, ¿qué pensabas que habíamos acabado? Por desgracia, todavía nos queda algo de faena:
hemos de probar nuestra página web en varios navegadores. Lo ideal es hacerlo en cada fase
del proceso de creación del diseño. Concretamente, las versiones antiguas de Internet Explorer
(IE6 a IE8) necesitan de cierta atención, ya que el resultado puede no ser el esperado...

Asegurar la compatibilidad con IE

Tras Internet Explorer 9 (IE9) no ha habido más motivos para quejarnos sobre el mítico lag de
Internet Explorer al lidiar con CSS. Observa el resultado tú mismo (siguiente ilustración).
Queda muy bien en este navegador y no necesita ningún ajuste.

La página web en IE9: ¡ningún problema a la vista!

Pero ver el resultado en las versiones antiguas de Internet Explorer sí te puede crear un
trauma severo.
¿Cómo puedo ver cuál sería el resultado en los IE 6 a 8 si tengo IE9?

Te he hablado de IETester, una herramienta práctica, aunque inestable (se cuelga a menudo).
Lo puedes probar para verificar tu página en las versiones antiguas de IE.

Existe, no obstante, una versión más estable y rápida: presiona la tecla F12 de tu teclado
cuando estés en IE9 y aparecerá una barra de desarrollo web. En ella, un menú te permitirá
cambiar el comportamiento de IE (siguiente ilustración) para simular las versiones antiguas (a
partir de IE7).

Modificación del motor de renderizado en IE

Suele ser una experiencia un poco traumática.

La siguiente ilustración te muestra lo que verías en modo «IE7».
La página web en IE7: ¡nada está como toca!

Antes de que hagas las maletas y te escapes de este mundo cruel a Timbuktu, déjame
animarte con un comentario tranquilizador: existe una solución para cada problema (repítetelo
cuantas veces sea necesario).

De hecho, nuestra página web solo se ha topado con dos problemas en las versiones
antiguas de IE:

 El posicionamientoinline-blockno da buenos resultados en IE6 e IE7, con el resultado

de que la mayoría de nuestras etiquetas de posicionamiento no funcionen por el
momento... Sin embargo, ¡hemos visto una solución alternativa que corrige este defecto
sin demasiadas dificultades!
 Las etiquetas estructurales HTML5 (<header>,<nav>,<aside>, etc.) no dan buenos
resultados en IE6, IE7 e IE8, y traen serios problemas de visualización... Aunque, de
nuevo, ¡este problema se puede arreglar añadiendo un pequeño script al principio del
código HTML!

Por otro lado, tendrás que olvidarte de las funciones más recientes de CSS3 no compatibles
con estas versiones antiguas:
  esquinas redondas;
 múltiples imágenes de fondo;
 transparencia;
 sombreados.

Como son funciones de aspecto, no intentaremos que funcionen en las versiones más antigua
de IE. Aunque si realmente te empeñas en conseguirlo, de nuevo puedo decirte que
existen scripts que pueden emular la mayoría de las funciones que fallan, pero hará falta un
montón de trabajo extra y tu página web tal vez vaya más lenta en estos navegadores.
Mientras tu página web se pueda leer en las versiones más antiguas de IE, te recomiendo que
no sufras demasiado por estos problemas.

El asumir que tu página web «no va a quedar tan bien» recibe el nombre de tolerancia
elegante. Significa que, aunque no busques los mismos efectos, persigues una página web
que aun así se pueda leer en los navegadores más antiguos.

Ejecutar etiquetas estructurales HTML5

Tal como hemos visto, basta con añadir un simple fragmento de código JavaScript en el
encabezado de la página web (líneas 6 a 8):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Zozor - Travel diaries</title>
</head>

El archivo JavaScript se descargará de los servidores de Google: es una tecnología rápida

que evita que tengas que hacerte cargo del archivo tú. Si quieres, puedes hacerle una copia y
guardarla junto a los archivos de tu página web.

Ajustar la posición inline-block

Hemos visto que para utilizar la posición inline-block había que crear una hoja de estilo
especial para Internet Explorer. Se ha de utilizar CSS ligeramente diferentes para asegurarnos
de que estas versiones de IE «entienden» qué hay que hacer.

Al crear una hoja de estilo especial para las versiones más antiguas de IE (que podrías llama
rstyle_ie.css) y utilizar la siguiente técnica, podrás reproducir el comportamiento de las
etiquetas inline-block:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="style_ie.css" />
<![endif]-->

<title>Zozor: la página web</title>

</head>

La hoja de estilo style_ie.css contendrá instrucciones de este tipo:

element
{
display: inline;
zoom: 1;
}

Esta técnica se deberá aplicar a cada elemento posicionado mediante inline-block.

Hay más diferencias en las versiones más antiguas de IE: el texto no está siempre a la
derecha, algunos bloques también tienen dimensiones incorrectas, etc. Tales diferencias han
de solucionarse siguiendo una metodología individual para cada caso con la hoja de
estilostyle_ie.css.

Comprobar el funcionamiento
W3C ofrece una herramienta llamada Validator en su página web.
El validador es un tipo de programa que analiza tu código fuente y te dice si está escrito
correctamente o si contiene errores que has de arreglar.

Recuerda: W3C crea estándares que hay que respetar para garantizar que todas las páginas
web hablan la misma «lengua».

Existe un validador HTML y un validador CSS (¡que pasará a ser parte de tus «Favoritos»!). El
validador CSS tiene algunos errores (marca algunas hojas CSS que son válidas como
inválidas) en los que no nos vamos a detener aquí. El validador HTML, sin embargo, nos
serán muy útil: aquí está el enlace http://validator.w3.org.

Puedes validar tu página web de tres maneras distintas, razón por la cual hay tres pestañas
diferentes:

 dirección (URL);
 enviar el archivo.html;
 copiar y pegar el código HTML.

Nuestra página web todavía no está disponible en Internet, ya que no tiene dirección URL. La
mejor opción es enviar el archivo.htmlque hemos creado o copiar y pegar el código HTML
directamente.

Si envías el código HTML y todo marcha como debería, el validador contestará con el
mensaje que se muestra en la siguiente ilustración.

El validador W3C nos informa de que nuestra página no tiene ningún error

¡En este caso, significa que todo está bien y que has creado tu página web correctamente!

Por desgracia, a menudo te encontrarás con errores, y si esto pasa, no entres en pánico en
plan:
¡AYUDAAAA! ¡Mi página web no es válida, no sé qué hacer, la página está llena de errores,
haced algo, ayudadmeeee!

Tienes una página web bonita, que se ve bien, es agradable a la vista, y aun así el validador
envía un mensaje preocupante en rojo diciéndote que tu página web no está creada
correctamente.

Lo primero de todo, quédate bien con lo siguiente: que tu página web se vea correctamente no
significa que no contenga errores. Tu página web puede ser muy elegante y aun así tener un
montón de errores.

¿Qué sentido tiene corregirlos entonces?

La cuestión es que los buscadores «tratan» de no mostrar los errores cuando los encuentran
para no molestar al usuario. ¡Pero quizá otros navegadores sí que hagan cosas raras!

Tener una página web válida hará que te quedes tranquilo sabiendo que has hecho las cosas
como toca, porque simplifica el trabajo de los programas que leen páginas web.
Además, y esto se ha demostrado, es probable que una página web creada correctamente
esté mejor posicionada entre los resultados de búsqueda de Google, ¡lo que se traducirá en
más visitas!

Aquí tienes una lista de consejos que te ayudarán a resolver errores que puedan surgir antes
o después.

 Todos tus textos deben, por lo general, estar entre etiquetas de párrafo. No puedes
poner texto directamente entre etiquetas<body></body>sin haber puesto antes las
famosas etiquetas<p></p>. Esto también se aplica al salto de línea<br />, que deberá
estar dentro de los párrafos. Es un error muy frecuente entre principiantes.

<p>Este texto está colocado correctamente en un párrafo.

<br />
No olvides que las etiquetas <br /> deben estar dentro de un párrafo</p>
Este texto está dentro de un párrafo. No está permitido.
<br />

 Todas tus imágenes deben tener un atributoalt que especifique qué contiene la
imagen. Si por casualidad la imagen fuera puramente decorativa (no puedes
encontrarle una descripción), se permite que no introduzcas ningún valor para el
atributoalt.

<!-- La imagen contiene una descripción -->

<img src="picture.jpg" alt="My picturei" />

<!-- La imagen no tiene descripción pero tiene un atributo alt -->

<img src="deco.png" alt="" />

 Tus etiquetas han de estar cerradas en el orden correcto.

<!-- Las etiquetas no están cerradas en el orden en que fueron abiertas -->
<p>Texto <em>importante</p></em>

<!-- Las etiquetas están cerradas en el orden en que fueron abiertas-->

<p>Texto <em>importante</em></p>

Memoriza este esquema, porque es el error de muchos principiantes.

 Si tus links tienen&, tendrás que sustituirlo por el código de&para evitarle confusiones al
navegador.

<!-- Ejemplo de un enlace incorrecto en HTML -->

<a href="http://www.site.com/?day=15&month=10&year=2000">

<!-- Ejemplo de un enlace correcto en HTML -->

<a href="http://www.site.com/?day=15&amp;month=10&amp;year=2000">

 Por último, asegúrate de no usar etiquetas antiguas y obsoletas en HTML5 (como la

etiqueta antigua<frame>, o la etiqueta<marquee>, etc.).

El validador te indicará «Element XXX undefined» (etiqueta desconocida) y «There is no

attribute XXX» (atributo desconocido).
Todos cometemos errores, así que no pierdas la calma. Corrige tu página web paso por paso
hasta que el validador muestre un resultado correcto en verde.

El código final
He facilitado el código final de la página que hemos creado. También puedes ver el resultado
(siguiente ilustración) en línea a través de un código web.

Apariencia final de la página web ¡Pruébala!

También puedes descargarte un archivo ZIP con todos los archivos de la página para probarlo
en casa:

Descargar los archivos de la página web (500 KB)

Para asegurar que la página web funcione lo mejor posible en las versiones antiguas de
Internet Explorer, verás que este código final no incluye ninguna hojastyle_ie.css. En su
lugar he usado otra técnica que asigna una clase especial (como .ie7) a la etiqueta<body>solo
para las versiones antiguas de IE, que me dice qué versión del buscador se usa en el archivo
CSS (.ie7 footerpermite, por ejemplo, cambiar el estilo del pie de página en IE7).