• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

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

Log in or subscribe for free to enjoy all this course has to offer!

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 burro Zozor
El burro Zozor

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.

Descargar las imágenes y fuentes

Unas cuantas imágenes recortadas utilizadas en el diseño
Unas cuantas imágenes recortadas utilizadas en el diseño
Unas cuantas imágenes recortadas utilizadas en el diseño

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.

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>conidmain_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
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).

La mayoría de ordenadores vienen conTrebuchet 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 proporcionadoFontSquirrela 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.

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 conlowercase). 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
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 medianteinline-blocky 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 CSSlist-style-type: none;, que elimina la figura redonda utilizada en la lista. Cada elemento de la lista (<li>) se coloca eninline-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 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
El banner ya está dispuesto

¿A que queda genial?

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 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
El pie de página ya está dispuesto

 

Ah, ¿que 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!
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).

 

Cambiar el motor de renderizado en IE
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!
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.

 

 

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>

 

 

Ajustar la posición inline-block

 

Hemos visto que para utilizar la posicióninline-blockhabí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 llamarstyle_ie.css) y utilizar la siguiente técnica, podrás reproducir el comportamiento de las etiquetasinline-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 estilostyle_ie.csscontendrá instrucciones de este tipo:

 

element
{
    display: inline;
    zoom: 1;
}

 

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

 

 

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
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)

Example of certificate of achievement
Example of certificate of achievement