7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

Diseñar y codificar un sitio web desde cero: Parte 2

Read Time: 62 mins

Spanish (Español) translation by Manuel (you can also view the original English article)

Dado que Internet es cada vez más popular, un sitio web atractivo es algo imprescindible. Obviamente, puedes pagar a un diseñador web para que te diseñe una, pero ¿no sería realmente genial diseñarla y codificarla tú mismo? "Difícil", dirás; ¡pero en realidad no es tan difícil una vez que has aprendido a hacerlo!

En esta segunda parte del tutorial, codificaremos nuestro diseño en un diseño xHTML, CSS y JavaScript/jQuery compatible con los estándares de los navegadores. Enciende Coda, o el editor que prefieras... ¡es hora de codificar!

Primer paso: qué vamos a hacer

Podrías pensar que simplemente usaremos nuestro diseño previo como una especie de base y luego codificaremos un diseño mucho menos complejo para simplificarnos las cosas, ¡pero ese no es el caso! Al final de este tutorial, este es el aspecto que tendrá tu diseño en un navegador:

Ten en cuenta que esta no es una versión de Photoshop, sino el resultado real en Firefox. ¡Fue tomada usando el Screengrab! Plugin, así que esto es exactamente lo que verás una vez terminado.

Algunas consideraciones sobre el diseño:

  • El pase de diapositivas funciona completamente con transiciones suaves
  • Los títulos no son imágenes
  • El CSS es válido con las especificaciones 2.1 y 3.0
  • El xHTML se valida con un Doctype 1.0 estricto

Segundo paso - Requisitos

Aunque intentaré ser lo más claro y conciso posible a lo largo de este tutorial, decir que un completo principiante podría seguir y entender esto sería una ilusión. Claro, copiar y pegar es posible, pero para entender todas las explicaciones, necesitarás tener algunos conocimientos de técnicas web:

  • Se recomienda encarecidamente tener un sólido conocimiento de HTML y CSS, pero probablemente también te las apañarás sabiendo solo lo básico
  • Es importante tener una idea de cómo funciona JavaScript, y más concretamente jQuery

Si no sabes nada de esas cosas, siempre puedes ir a aprenderlas. Aquí tienes algunos enlaces útiles para hacerlo:

Tercer paso: configurar nuestro entorno de desarrollo

En esta parte del tutorial, solo trataré de explicar mi manera de hacer las cosas cuando estoy codificando un sitio web. Lo primero, y probablemente lo más importante, es sobre tus herramientas. ¿Qué aplicaciones vas a utilizar para codificar, para depurar, para probar?

En mi caso, Dreamweaver es la elección para el código. "Oh, caramba, solo otro desarrollador web WYSIWYG", podrías pensar, pero la respuesta es no, no uso el modo WYSIWYG. Yo uso Dreamweaver porque simplemente me encantan sus funciones de autocompletado y su resaltado de sintaxis. Sin embargo, si no te apetece pagar 799 dólares por una aplicación, hay varios editores de código estupendos gratuitos o por mucho menos. Estoy pensando en Coda, Text Mate, Espresso o CSS Edit para Mac OS X, y Aptana Studio, Notepad++ o E Text Editor para Windows. Evidentemente, podrías usar solo el Bloc de notas o Text Edit, pero ¿por qué hacerlo cuando hay tantas herramientas estupendas disponibles de forma gratuita?

Lo siguiente que tenemos que elegir es un navegador de desarrollo. Necesitamos un navegador con grandes herramientas de depuración. Aunque soy un usuario empedernido de Opera en el día a día, uso Firefox durante mis ciclos de desarrollo debido a su excelente herramienta: Firebug. Por supuesto, Opera tiene Dragonfly, y Safari 4 viene con algunas herramientas geniales también, pero Firebug sigue estando un paso por delante, y esto me hace elegir Firefox como mi navegador de desarrollo. En cualquier caso, debes asegurarte de utilizar un navegador compatible con los estándares. En otras palabras, no utilices Internet Explorer como entorno principal de pruebas. Aunque mi elección es Firefox para las pruebas durante el ciclo de desarrollo, tengo todos los navegadores recientes instalados en mi ordenador para comprobar que todo funciona bien en todos ellos. Por lo tanto, mis diseños están probados en Firefox 3+, Opera 9.5+, Safari 3+, Chrome 1+ e Internet Explorer 7+. De este modo, deberían visualizarse correctamente para cerca del 95% de los internautas. * Nota del editor: esta cifra variará considerablemente en función del público objetivo del sitio.

Bien, ahora que tenemos las herramientas para trabajar, también necesitamos una estructura de directorios. Para mantener las cosas claras, he decidido crear un nuevo "sitio" en mi servidor local solo creando una nueva carpeta en la carpeta www/. Estoy usando WAMP como mi localhost. Dentro de este sitio, necesitaremos crear tres carpetas, js/, css/, e img/. Supongo que los nombres se explican por sí mismos.

Ahora que tenemos nuestro entorno configurado, podemos empezar a codificar.

Paso 4 - El xHTML

Ya lo he mencionado, pero en este tutorial, nos aseguraremos de construir xHTML válido. ¿Qué significa eso?

La mayoría de las páginas de la World Wide Web están escritas en lenguajes informáticos (como el HTML) que permiten a los autores de la Web estructurar el texto, añadir contenido multimedia y especificar el aspecto, o estilo, que debe tener el resultado.

Como todos los idiomas, estos tienen su propia gramática, vocabulario y sintaxis, y se supone que todos los documentos escritos con estos lenguajes informáticos deben seguir estas reglas. [...]

Sin embargo, solo como los textos en un lenguaje natural pueden incluir errores ortográficos o gramaticales, los documentos que utilizan lenguajes de marcado pueden (por diversas razones) no seguir estas reglas. [...]

Teniendo en cuenta estos conceptos, podemos definir la "validación de marcas" como el proceso de comprobación de un documento web con respecto a la gramática (generalmente una DTD) que dice utilizar.

Servicio de validación del W3C

Pero, ¿por qué molestarse en validar una página? Bueno, hay algunas ventajas, la primera es el SEO. El rastreador de Google clasifica mejor las páginas válidas. La segunda es la accesibilidad. Las personas que utilizan lectores de pantalla pueden no ser capaces de ver su sitio correctamente si su marcado no es válido. Por último, pero no por ello menos importante, la capacidad de producir un código válido es algo que demuestra que no eres un simple dominguero.

Lo que debemos hacer ahora es pensar un poco en cómo vamos a estructurar nuestro diseño, qué etiquetas vamos a utilizar, los ID que les vamos a dar, etc. Esto es lo que se me ha ocurrido:

Ahora que sabemos lo que vamos a producir, ¡comencemos por definir los aspectos básicos de nuestro documento!

Lo básico

Ya te he dicho que vamos a utilizar xHTML Strict. Esto significa que tenemos que mantener nuestra lógica de estructura separada de nuestra lógica de diseño. Para decirle al navegador qué "gramática" estamos utilizando, tenemos que definir una llamada DTD o Definición de Tipo de Documento. El Doctipo Estricto xHTML 1.0 tiene el siguiente aspecto:

Este código debe colocarse en primer lugar en todos tus archivos HTML. La falta de esta definición dará lugar a una validación fallida.

A continuación, solo tenemos que definir los elementos básicos de nuestra página: la cabecera y el cuerpo. Querrás una etiqueta de título en tu sección head para mostrar un nombre correcto en la barra de título del navegador en lugar de algo como "Untitled 1". Decidí poner algunas meta-etiquetas también para el SEO, aunque todos sabemos que no son tan útiles hoy en día.

Una vez hecho esto, podemos empezar a codificar el contenido real.

La barra de estado

¿Recuerdas que te hice crear un montón de grupos de capas y cambiarles el nombre por algo que reflejara su función? Pues ahora entenderás por qué. Echa un vistazo a esta paleta de capas:

¿Puedes ver lo que quiero decir ahora? Efectivamente, esto nos da la estructura de nuestro HTML: tenemos una carpeta envolvente llamada Status Bar, en la que tenemos subcarpetas. Esas carpetas representan los elementos del bloque de nuestra página. Sin embargo, esto no es infalible. La experiencia demuestra que necesitamos algunos bloques más de envoltura para centrar el contenido de la barra y que el fondo de la misma ocupe el 100% del ancho. También necesitamos una envoltura alrededor del mensaje de bienvenida y la barra de acción para que el campo de búsqueda flote a la derecha. Este es el aspecto que debe tener tu código:

La etiqueta Div con un ID de status-bar es nuestro bloque envolvente, como habrás entendido. El bloque status-bar-content es necesario para centrar el contenido de esta barra. También deberías notar las etiquetas de párrafo dentro de las etiquetas de formulario. Esto es necesario para la validación de xHTML 1.0 Strict. La última cosa importante a tener en cuenta en este fragmento de código es el hecho de que no hemos sustituido nuestras etiquetas de párrafo por divs. Esto es lo que los diseñadores web llaman codificación semántica. Un párrafo siempre debe estar envuelto en

para enfatizar el hecho de que es un texto legible. Esto también facilita la lectura a los lectores de pantalla.

¡Genial! Eso fue todo para la barra de estado. No es tan complicado, ¿eh? La clave es proceder lógicamente desde la jerarquía de capas en nuestro PSD para construir nuestro marcado de la manera correcta. Solo tienes que tener en cuenta que tu HTML sea semántico. Usa etiquetas de párrafo para los párrafos, blockquotes para las citas, obviamente, y así sucesivamente.

La cabecera

Tendremos que echar un vistazo a la paleta de capas para tener una idea de cómo construirla. Esto es lo que tenemos para la cabecera:

Ahora traduzcamos esta estructura en código. Necesitaremos una envoltura, un bloque de logotipo y dos bloques de texto: uno para la cabecera y otro para el subtítulo. Sin embargo, en este caso no utilizaremos etiquetas de párrafo. ¿Por qué no? Pues sencillamente porque podemos ser aún más semánticos que eso, utilizando etiquetas de encabezamiento. Como el texto de la cabecera es el primer título de nuestro documento, lo envolveremos con una etiqueta h1. El subtítulo será una etiqueta h2, ya que es el segundo título de nuestro documento.

Una cosa que hicimos aquí fue añadir un enlace a la página de inicio en el logotipo. Esta es una convención que casi todos los diseñadores web utilizan. También es bien conocido por los usuarios, por lo que no ofrecer dicho enlace podría causar cierta confusión con sus lectores. Aparte de esto, no hay más que decir sobre esta parte del diseño, así que pasemos solo a la parte del contenido.

Las pestañas

Antes de empezar con las pestañas propiamente dichas, tendremos que añadir un div envolvente con un id de contenido para contener las pestañas, el envolvente de la página, y tanto el módulo de twitter como el de blog. Una vez hecho esto, tendremos que pensar un poco en el menú y en cómo se va a estructurar. La mejor forma de codificar un menú es probablemente una lista desordenada, aunque queramos un menú horizontal. ¿Por qué una lista? Bueno, las listas son buenas para mostrar elementos con el mismo valor, sin destacar algunos y no otros. Esto es exactamente lo que queremos. En cada elemento de la lista, obviamente añadimos una etiqueta de anclaje. Este enlace ancla no enlaza con nada real; el atributo href es solo igual a #home para nuestro tutorial.

Deberías notar que no envolvimos nuestras pestañas en un div con un id de pestañas, simplemente porque la etiqueta ul ya lo hace por nosotros. Siempre hay que intentar eliminar el mayor número posible de bloques div innecesarios para que la página sea más rápida y limpia. También se preguntarán qué significan < y >. Pues bien, significan "menor que", y gt "mayor que" y son simplemente los valores HTML de < y >.

No te preocupes demasiado por el hecho de que nuestro menú de pestañas horizontales sea una lista vertical por el momento; nos aseguraremos de que tenga un aspecto adecuado cuando escribamos nuestro CSS.

El envoltorio

El "wrapper" es lo que yo llamo la caja con el slideshow y el mensaje de bienvenida. Crearemos un div con un ID de "page-wrapper" para asegurarnos de que la caja estará correctamente definida. Este div está obviamente anidado en el div de contenido también.

Ahora necesitamos codificar la parte de la presentación de diapositivas. Crearemos un contenedor con un ID de "slideshow". Dentro de este, creamos un div llamado "slides" que va a contener todas las imágenes que queremos recorrer. También hay un enlace a su alrededor para redirigir al lector a la sección de portafolio del sitio. El div con un ID de "slideshow-commands" contiene los comandos anterior y siguiente, y el título de la diapositiva actual.

Lo importante aquí es la forma en que agregamos todas nuestras imágenes de diapositivas en un contenedor para facilitar el deslizamiento. Sin embargo, necesitamos tener una diapositiva por defecto. En este caso, he añadido una clase "default-slide" al ancla que contiene la imagen por defecto. Para facilitar el estilo, solo hay que añadir una clase "thumb" a esas imágenes también. Se pueden asignar varias clases a un elemento separándolas con espacios. El atributo alt en las imágenes es obligatorio para un código válido. También será importante para nuestra presentación de diapositivas, ya que es donde obtendremos el título de la diapositiva.

El siguiente paso de este "page-wrapper" es el mensaje mostrado y la información de contacto. Esto será bastante fácil. Necesitamos un título, que será un h3 porque es nuestro tercer título en la página, una etiqueta de párrafo que contenga el mensaje en sí, y una etiqueta de párrafo que contenga la información de contacto.

Solo tienes que fijarte en que hemos puesto etiquetas span alrededor del número de teléfono y de la dirección para poder estilizarlos por separado. No olvides que las nuevas líneas de tu código no influyen en absoluto en el texto que se imprime en la pantalla. Podemos utilizar esto para hacer que nuestro código sea bonito, y sangrar el párrafo correctamente.

Una vez hecho esto, es el momento de hacer un pequeño descanso para ver lo que hemos hecho. Este es todo el código hasta ahora:

Puedes comprobar su validez ahora en http://validator.w3.org/ y ver que es válido. Bien, ahora podemos continuar con la codificación de los módulos.

El módulo del blog

El código es bastante sencillo aquí. Tendremos que añadir un div contenedor con un ID de "blog" y una clase de "módulo" para poder estilizar los dos módulos juntos, ya que son prácticamente iguales. El encabezado será un h4 mientras que los títulos serán h5. Esto hará un esquema claro con una sólida jerarquía en nuestro documento. Lo último que hay que tener en cuenta aquí son las pocas líneas de cada entrada. Lo pondremos en etiquetas blockquotes. ¿Por qué? Bueno, aunque no sea una cita propiamente dicha, sigue siendo un texto extraído de otra parte del sitio web, por lo que es apropiado utilizar comillas aquí. También solo hemos puesto un enlace "Leer más" envuelto en una etiqueta de párrafo para que todo sea válido.

Deberías ver que hemos añadido etiquetas de párrafo dentro de los blockquotes. Esto es algo obligatorio para pasar la validación. En lugar de añadir Ids a todos los elementos de entrada, hemos añadido clases, para poder ponerlas varias veces. Por lo tanto, verás un párrafo con un ID de "meta" o un blockquote con una clase de "contenido", por ejemplo. Cada entrada está envuelta en su propio div solo para facilitar el espaciado.

El módulo de Twitter

El módulo de Twitter será similar al del blog, así que lo repasaré más rápidamente. Solo hay que recordar que la estructura detrás del HTML que estamos codificando viene dada por nuestra paleta de capas. En este caso, por ejemplo, este es el aspecto del grupo de capas del Módulo Twitter:

Por lo tanto, necesitaremos una envoltura de la barra de cabecera, y contenedores para cada tweet, pero también un bloque que contenga el botón. Este es el aspecto que tendría el código:

Nada sorprendente aquí, seguimos usando blockquotes para el contenido del tweet. También estamos enlazando a la página de Twitter a través del h5. También estamos utilizando la misma sintaxis para el enlace "Get More Tweets" como lo hicimos para el enlace Read More.

El pie de página

La última parte de nuestro documento HTML va a ser el pie de página. Va a ser muy fácil de construir. Solo necesitamos un wrapper con un ID de "footer", otro div contenedor para la imagen, y un párrafo para nuestro aviso legal y el nombre de la empresa.

En realidad, no hay nada demasiado sofisticado. Solo hay que tener en cuenta que hemos sustituido el símbolo de copyright por el de © porque, de lo contrario, no se mostraría correctamente.

Terminado

Bueno, aunque no lo creas, ya hemos terminado con nuestro marcado. Te has dado cuenta de que en realidad no es tan difícil producir un código HTML correcto y válido solo siguiendo algunos grupos de capas. La clave es proceder de forma lógica y lenta, para estar seguros de no perder nada.

Este es el código que hemos hecho:

¡Puede comprobar su validez una vez más y ver que se verifica con éxito como xHTML 1.0 Strict!

Paso 5 - El CSS

El lenguaje de las Hojas de Estilo en Cascada tiene una sintaxis extremadamente sencilla y, por tanto, es muy fácil de aprender. Sin embargo, debido principalmente a las incoherencias de los navegadores, puede ser totalmente difícil de dominar. Intentaremos que el CSS sea lo más sencillo y conciso posible, sin dejar de intentar que funcione en todos los navegadores modernos. Para ello, hay un concepto que debemos dominar. Me refiero al modelo de caja.

El modelo de caja es la forma en que se muestra una caja en su página web. Pero una imagen sería probablemente mejor que una larga explicación.

Este es el modelo de caja estándar del W3C. Lo que es importante entender aquí es que la anchura real de la caja no es la definida por la propiedad width, sino la suma de la anchura, el relleno y el borde. Digamos que tenemos una caja con un ancho de 200px, 25px de relleno en ambos lados y un borde de 5px de grosor alrededor de esta caja. El ancho real de la caja será de 260px y no de 200px como queríamos. Pero eso está bien, si queremos una caja que sea estrictamente de 200px de ancho, solo tendremos que establecer la propiedad width a 140px y ya está. Lo importante es solo saber cómo funciona esto. Esto evitará muchos dolores de cabeza más adelante.

Bien, ahora que estás familiarizado con el concepto del modelo de caja del W3C, podemos empezar a codificar nuestro diseño.

El restablecimiento del CSS

Antes hablaba de las inconsistencias de los navegadores. Entre ellas, algunos navegadores ponen un margen de 10px a cada bloque, otros lo ponen a 15px y más cuestiones de este tipo. Obviamente, esto puede causar algunos problemas al codificar porque no necesariamente restableceremos todas esas propiedades en nuestro código. Para resolver este problema y, por lo tanto, ayudarnos a producir sitios de píxeles perfectos, vamos a querer utilizar un restablecimiento de CSS. Hay muchos disponibles por ahí, pero en mi sincera opinión, el de Eric Meyer sigue siendo el mejor. Solo me gusta la forma en que restablece casi todo y nos permite un control total sobre nuestro diseño. Puedes buscarlo aquí: http://meyerweb.com/eric/tools/css/reset/ . He decidido poner esto en su propio archivo CSS llamado reset.css y luego lo puse en la carpeta CSS de nuestra plantilla.

Solo decidí eliminar la línea content: none; porque hacía que la validación CSS fallara. * Nota del editor: recuerden amigos, la validación debe trabajar para ustedes, no en contra. No pasa nada si tu página no se valida SI sabes exactamente por qué. Como sabía que no iba a necesitar inserciones y borrados, también eliminé esos reinicios, solo para hacer esta cosa un poco más ligera.

Si vuelves a cargar el archivo index.html en tu navegador, verá que no ha cambiado nada. Esto se debe a que todavía no hemos enlazado la hoja de estilos en nuestro HTML. Sin embargo, no añadiremos una etiqueta de enlace en nuestra sección head. En su lugar, solo llamaremos al archivo reset.css desde nuestra hoja de estilos principal usando el comando @import cuando empecemos a construirla.

La tipografía

Suelo dividir mi CSS en dos partes. Una que controla el diseño de la página, que es mi hoja de estilos principal, y otra que controla la tipografía. Esto incluye la alineación del texto, el color de la fuente, el tamaño de la fuente, el espacio entre letras, la altura de la línea, etc. Esto es bueno porque te permite una mayor flexibilidad en tu proceso de codificación. Digamos que quieres cambiar el tamaño de la fuente del h1 a 48px en lugar de 36px, pues bien, en lugar de empezar a rebuscar en tu style.css, que probablemente tenga varios cientos de líneas, solo tienes que abrir tu hoja de estilos de tipografía, buscar los estilos relacionados con la etiqueta h1, cambiar el tamaño de la fuente y ¡listo!

Cuando codifiquemos nuestra hoja de estilos de tipografía, nuestro diseño en Photoshop nos será de gran utilidad. Podemos coger la Herramienta de Tipo (T) en Photoshop, y empezar a resaltar los diferentes bloques de texto de nuestro diseño. De esta manera, podemos ver que el h1 va a tener un tamaño de fuente de 48px, un color de #4d4d4d, y una fuente establecida en Myriad Pro. Este último punto causará algunos problemas. Myriad Pro no es una fuente web estándar, así que no podemos definir una familia de fuentes que empiece por Myriad Pro y pensar que todo el mundo verá nuestro diseño como debería. Vamos a resolver este problema más adelante utilizando algunas técnicas web más avanzadas, pero por ahora, solo definiremos una propiedad font-family con Myriad Pro incluida, y algunas otras fuentes de reserva en caso de que el lector no tenga Myriad Pro instalado en tu ordenador.

Si continuamos así, escaneando nuestro PSD para obtener toda la información de la fuente, podemos ver que nuestras etiquetas h3 deben tener un tamaño de fuente de 24px, que nuestras etiquetas h5 tienen un color de #6eb9cc y así sucesivamente. Si procedemos de forma lógica, esto es lo que obtendremos:

No creo que haya mucho que explicar. Esto es solo el estilo de apariencia muy básico. Ten en cuenta que estoy definiendo el estilo de las etiquetas de párrafo estándar y las etiquetas de anclaje estándar antes de empezar a definir la apariencia de bloques de texto más específicos, como los meta párrafos, por ejemplo. Esto forma parte del concepto de codificación "No te repitas". Los tipos de letra que he decidido utilizar son Helvetica y Arial, no son grandes sustitutos de Myriad, pero probablemente no los necesitaremos de todos modos, como explicaré más adelante. Es solo para estar seguros.

Una cosa de la que quiero hablar es del estilo de codificación aquí. Por supuesto, las sangrías son importantes para la legibilidad del código, pero no solo. A primera vista, puedes pensar que mi código parece un poco desordenado, pero si lo miras con más cuidado, te darás cuenta de que estoy siguiendo una sintaxis muy estricta. El primer punto de esta sintaxis es ordenar las propiedades alfabéticamente. Esto ayuda en gran medida a encontrar una propiedad cuando se quiere editar más tarde. El siguiente es el hecho de que mantengo mi estilo en una sola línea si no uso más de tres propiedades para el elemento y que no es un estilo por defecto que se declara como para la etiqueta p. Aunque se puede discutir si es legible o no, disminuye drásticamente el tamaño del archivo. En mi opinión, no es difícil de leer aunque las declaraciones se mantengan en una sola línea. Incluso hace que el CSS sea más conciso y más fácil de navegar.

Lo más importante en tu estilo de codificación es la coherencia. Si no quieres usar una declaración de una línea, solo hazlo. Tienes que sentirte cómodo con tu forma de codificar. No digo que mi manera sea la mejor; solo me gusta así. No obstante, te animo a que encuentres tu propio estilo para codificar aún más rápido.

Configuración de nuestra hoja de estilo principal

Cuando terminamos con el restablecimiento, te dije que no lo incluyeras en el archivo HTML directamente usando una etiqueta de enlace porque íbamos a llamarlo desde nuestra hoja de estilos principal. Obviamente podrías incluir todos tus archivos CSS directamente en el código HTML, pero decidí no hacerlo, ya que mantiene la sección de la cabeza más ordenada.

Necesitaremos crear nuestra hoja de estilos maestra. Yo suelo llamarla style.css, pero podrías llamarla main.css, master.css, screen.css o lo que sea. Dentro de esta hoja de estilos, tendremos que incluir primero nuestro reinicio y luego nuestra hoja de estilos de tipografía. Para ello, voy a utilizar la regla @import. Tus primeras líneas en el archivo style.css deben tener este aspecto:

Con esas pocas líneas, incluimos nuestras dos hojas de estilo en el archivo style.css, y solo tenemos que llamar a un archivo en nuestra sección head.

Si miramos ahora nuestra página web, esto es lo que veríamos:

Tendría que estar de acuerdo contigo si dices que no se ve impresionante por el momento, pero todavía puedes ver algunos detalles que se ven exactamente como queremos, como los meta párrafos o incluso el logotipo. Bien, ahora que nuestra hoja de estilo maestra está configurada, ¡podemos empezar a dar estilo a la página de verdad!

El cuerpo

Solo tenemos que establecer algunos estilos básicos para la etiqueta body. Esto incluye centrar el diseño usando margin: auto, establecer un color de fondo y establecer el ancho al 100%.

La barra de estado

Como siempre, solo empezaremos por la parte superior y diseñaremos hasta el pie de página. Me gusta codificar mis diseños divididos en bloques. Empiezo con la cabecera, por ejemplo, luego me tomo un descanso, diseño el contenido y así sucesivamente. Eso me ayuda a motivarme. Esto también implica terminar completamente un área antes de empezar otra.

Así que, antes de empezar la codificación CSS de la barra de estado, vamos a tomarnos un tiempo para ver qué imágenes necesitamos para ella. La primera es una imagen de fondo, que es un simple gradiente que se repetirá en el eje x. El segundo es un fondo para la barra de acción: un rectángulo redondeado. Obviamente podríamos haber usado la propiedad border-radius aquí, pero decidí usar una imagen para que fuera perfecta en todos los navegadores. La última imagen que necesitamos para nuestra barra de estado es un fondo para el cuadro de búsqueda.

Empecemos con la imagen de fondo. Como he dicho, vamos a repetir esta imagen en el eje x, por lo que solo necesitamos una imagen de 1px de ancho. Esto reducirá drásticamente su tamaño. Así que empieza por tomar la herramienta Marquesina de una columna en Photoshop, ve al grupo de capas de la Barra de Estado / Caja, oculta la capa "Borde", y fusiona la capa "Fondo" y la capa "Sombra". Una vez hecho esto, selecciona un trozo de esta capa recién creada con tu herramienta de selección, cópialo y pégalo en un nuevo documento. Este documento debe ser de 1*50px. Debido a algunas peculiaridades del modelo de caja, tendremos que reducir esta altura a 40px. Solo hay que recortar los 10 píxeles superiores y luego guardarlo para Web & Devices (Alt + Shift + Ctrl + S) en PNG 24, y llámalo status-bar-bg.png. Save For Web & Devices ofrece grandes herramientas de compresión para que el tamaño de los archivos sea lo más pequeño posible. Esto es muy importante cuando se trabaja con la web, y por eso siempre hay que utilizar esa herramienta.

Ahora, el fondo de la barra de acción; abre el grupo de capas "Action Bar", y selecciona la capa llamada "Shape". Selecciona todo el documento (Ctrl + A), copia la capa y pégala en un nuevo documento. Tendrás que rasterizar la forma vectorial para poder copiarla correctamente. No olvides establecer la opacidad de la capa al 55% de nuevo. Guarda esto para Web & Devices de nuevo, y llámalo action-bar-bg.png.

El último paso para convertir el diseño en imágenes será el Campo de Búsqueda. Solo hay que ir al grupo de capas "Campo de búsqueda", ocultar la capa "Búsqueda" y fusionar la lupa y la forma. De nuevo, selecciona todo el documento con Ctrl + A, y cópialo en un nuevo documento. Guárdalo como search-field.png.

Bien, ahora que hemos terminado con las imágenes, podemos empezar a codificar. Lo primero que queremos hacer es configurar el contenedor. Establecer su anchura y altura, así como una imagen de fondo y un borde.

El estilo de la ranura para el borde nos da este aspecto agradable que estábamos luchando para obtener en Photoshop. Hemos establecido un ancho de 40px aunque nuestro fondo es de 50px debido al modelo de caja.

Luego queremos asegurarnos de que el contenido de esta barra esté centrado. La cuestión aquí es que queremos que el fondo ocupe el 100% del ancho mientras que el contenido debe estar centrado. Por eso utilizamos un div envolvente que contiene prácticamente todo lo que ponemos en nuestra barra de estado. Debemos aplicarle un ancho de 800px así como algún margen.

Para colocar correctamente las dos partes de esta barra de estado, la izquierda y la derecha, estamos estableciendo las propiedades width y float.

Ahora tenemos que dar estilo a la barra de estado-comandos para que la barra de acciones flote en el centro de la barra de estado. También ponemos la imagen de fondo adecuada a la barra de estado. Obviamente, también se utilizan los márgenes y los rellenos para que las cosas se vean como deben. Ten en cuenta el modelo de caja cuando configures estas propiedades. Esa es la razón por la que establecemos la altura de la barra de acción a 14px en lugar de 30px; tenemos 8px de relleno.

Estamos añadiendo "|" para separar los enlaces en la barra de acciones. He decidido hacerlo así porque es más correcto desde el punto de vista semántico. De hecho, esas tuberías no tienen absolutamente nada que ver con nuestro contenido, por lo que ponerlas en el HTML no sería realmente correcto. Fíjate en el último selector, bastante complejo, que selecciona el último enlace y añade una tubería después y antes de él.

El último punto será estilizar el campo de búsqueda y añadirle la imagen de fondo. Tendremos que restablecer algún estilo por defecto del navegador que se añade a las entradas, y también tenemos que ocultar el botón de envío. Quizá no sea lo mejor cuando hablamos de accesibilidad, pero aun así, he optado por anteponer el diseño a la accesibilidad en este caso.

Esto es lo que deberíamos tener ahora:

Se parece bastante a nuestro PSD, ¿verdad? ¡Pues eso es exactamente lo que queremos! Procedamos ahora con la cabecera.

La cabecera

La cabecera es bastante básica por lo que será bastante fácil de codificar.

Lo primero que tenemos que hacer es preparar nuestra imagen. Solo hay que ir al grupo de capas "Header" y fusionar la capa "Image" y la capa "Shape". Ahora selecciona el documento con Ctrl + A, y finalmente cópialo y pégalo en un nuevo documento. El archivo debe ser de 1600*250px.

Sin embargo, ahora tenemos un problema. No queremos que la imagen de la cabecera se repita sobre la cabecera si la resolución de la pantalla del lector es superior a 1600px. Por lo tanto, tenemos que desvanecer los bordes añadiendo una máscara de capa y haciendo que los bordes izquierdo y derecho se desvanezcan a la transparencia. Sin embargo, la transparencia en imágenes tan grandes puede tardar mucho en cargarse, así que solo he rellenado el fondo con #6eb9cc.

Esta imagen es enorme, por lo que hay que comprimirla para que se cargue más rápido. He elegido guardarla en PNG 8 con solo 256 colores. Esto reducirá el tamaño en casi un 80% comparado con el PNG 24, ¡que es enorme! Llama a este archivo header-image.png.

Bien, ahora el código. Queremos que la imagen de la cabecera esté centrada dentro del div "header". Pero para que las pantallas panorámicas muestren nuestro diseño correctamente, tenemos que aplicar también un color de fondo para que pueda desvanecerse bien. También ponemos un borde. En lugar de usar el surco, estoy usando el estilo cresta, que es exactamente lo contrario, porque pone el color de inicio en la parte superior y no en la parte inferior, que es lo que queremos en este caso. Solo estoy aplicando un poco de estilo al logotipo también para colocarlo correctamente.

Eso es en realidad todo lo que tenemos que hacer con nuestra cabecera. Ahora podemos comprobar el resultado en un navegador:

La caja de contenidos

Aquí tenemos que romper un poco nuestra regla semántica. De hecho, para poner la sombra superior e inferior al div de contenido, tenemos que crear dos divs vacíos en nuestro marcado: uno con un ID de "content-top-shadow" y el otro con un ID de "content-bottom-shadow". El primer div debe colocarse entre el div de cabecera y el div de contenido, y el otro debe colocarse entre el contenido y el pie de página. Sé que podríamos haber utilizado los fondos múltiples de CSS 3 para resolver este problema, pero el problema es que los fondos múltiples aún no son soportados por muchos navegadores, así que solo nos quedaremos con esta técnica por ahora.

Antes de codificar necesitamos sacar las imágenes. Solo hay que ir al grupo de capas "Contenido" / "Caja", y fusionar la forma de fondo con las dos capas de sombra. A continuación, utiliza la herramienta Marquesina de una columna y selecciona un trozo de 1px del fondo. Cópialo y pégalo en un nuevo documento. Ahora utiliza la herramienta de recorte y recorta los 20px superiores de la imagen. Guárdalo para Web & Devices como PNG 24, y llámalo content-top-shadow.png. A continuación, haz Edición->Transformar->Rotar 180, y guárdalo de nuevo, esta vez como content-bottom-shadow.png.

Al div#content, solo le estamos añadiendo un diseño de caja básico como el padding y la anchura, pero la parte interesante aquí son los dos contenedores "content-shadow". Obviamente, estamos estableciendo una altura y una anchura, y una imagen de fondo, que se repite en el eje x. Esto produce la ilusión de una sombra. También solo estoy aplicando un clear: both; al content-bottom-shadow, porque sé que mis módulos flotarán y que no funcionará de otra manera.

Solo hay que fijarse en que hemos puesto position: relative; en el div de contenido. Esto será útil más adelante cuando coloquemos nuestro menú de navegación con pestañas.

Bien, ahora que hemos terminado con esta caja, ¡podemos empezar a estilizar el contenido!

El envoltorio de la página

En lugar de comenzar con el estilo del menú, solo nos aseguraremos de que nuestra envoltura de página se muestre correctamente primero.

Para empezar, añadiremos un poco de estilo de caja básico a la envoltura de la página. Vamos a definir la anchura, la altura, el relleno y el margen tal y como elegimos hacer en nuestro PSD, teniendo en cuenta el modelo de caja del W3C (¡sí, todavía nos persigue!), y añadimos un color de fondo blanco y un borde. Como vamos a utilizar la propiedad float para mostrar el menú de navegación con pestañas, necesitamos borrar: both; aquí, y como estamos utilizando una altura fija, también queremos ocultar cualquier desbordamiento para no romper nuestro diseño. El desbordamiento no debería ocurrir, pero nunca se sabe.

Ahora queremos diseñar nuestra caja de presentación. Esto es realmente un estilo básico. Gracias al modelo de caja, podemos usar la propiedad border para mostrar el separador vertical que queremos entre la presentación y el mensaje.

Ahora queremos asegurarnos de que solo mostramos una miniatura cuando se carga la página, porque la forma en que está codificada en este momento muestra los tres pulgares al mismo tiempo, lo que rompe completamente nuestro diseño. Obviamente, podríamos dejar que nuestro JavaScript arreglara esto por nosotros, pero solo no es aceptable hacer imposible que la gente sin JS activado vea nuestra página. Después de añadir algo de estilo a cada miniatura, ocultamos todas las miniaturas y solo mostramos la que tiene la clase "default-slide".

Una vez hecho esto, el último paso es dar estilo a los comandos de la presentación de diapositivas. Tenemos que recortar algunas imágenes del PSD. Estás comenzando a acostumbrarse al proceso, así que solo navega al grupo de capas "Contenido" / "Envoltura" / "Presentación" / "Comandos", y rasteriza todas las capas. A continuación, copia la flecha izquierda, la flecha derecha y el fondo en nuevos documentos, y guárdalos como comandos-previa-diapositiva.png, comandos-siguiente-diapositiva.png y comandos-bg.png respectivamente.

Luego tenemos que incluirlos en nuestra plantilla. Primero estoy definiendo el diseño de la caja, con su imagen de fondo, anchura y altura y también una posición: relativa; para poder centrarla bajo la miniatura.

A continuación, podemos utilizar una técnica básica de sustitución de imágenes para que nuestros comandos anterior y siguiente se vean bien.

Por último, es necesario un margen superior en el título para centrarlo verticalmente.

Muy bien, nuestro pase de diapositivas ahora se muestra correctamente. Solo queremos dar estilo al mensaje y habremos terminado con la envoltura. El estilo será bastante fácil porque la mayor parte se hizo en el archivo typography.css.

En primer lugar, estamos configurando algunos estilos de caja para que el mensaje tenga un margen izquierdo de 15px, y también estamos aplicando un margen inferior al título para que las cosas respiren.

La parte más difícil de esto será estilizar la información de contacto. Antes de empezar, asegúrate de guardar el icono del teléfono y el del correo en dos archivos separados y llámalos phone-icon.png y address-icon.png respectivamente. Creo que todos ustedes probablemente ya saben cómo hacerlo, así que no creo que sea necesario explicarlo una vez más.

Aplicaremos esas imágenes con una imagen de fondo, pero para poder hacerlo, necesitamos usar las etiquetas span como bloques, de ahí el display: block; en las etiquetas span. El resto es sencillo, añadimos una imagen de fondo a cada span, hacemos que uno flote a la izquierda, y usamos paddings para sangrar el texto lejos del icono.

Si echamos un vistazo al diseño ahora esto es lo que veremos:

Todavía no se ve muy bien solo, pero realmente estamos empezando a llegar a alguna parte. El siguiente paso va a hacer que se vea aún mejor.

El menú de navegación

Esto será un hueso duro de roer. Es un menú bastante complejo el que estamos utilizando aquí, y el hecho de que esté alineado a la derecha no facilita las cosas. Sin embargo, el hecho de que ya hayamos diseñado el menú en Photoshop obviamente nos ayudará un poco.

Sprites

Vamos a utilizar algo llamado CSS Sprites. En lugar de usar una imagen para cada enlace, solo vamos a combinarlas todas en una gran imagen, llamada sprite. Esta técnica tiene numerosas ventajas. En lugar de cargar una veintena de imágenes, incluyendo los estados hover y activo, solo tenemos que cargar una. Esto puede reducir drásticamente el tiempo de carga y también es bueno para tu servidor.

Entonces, ¿cómo hacemos un sprite así? Comienza por crear un nuevo documento que es 425*115px. A continuación, arrastrar y soltar el menú de pestañas de nuestro PSD a este archivo. Elimina todos los espacios innecesarios con Ctrl + T y finalmente quita el estado hover y activo que pusimos a Home y Portfolio para que nuestro diseño parezca real. Esta línea solo contiene nuestros botones por defecto: cuando no están ni rondando ni activos. Este es el aspecto que debería tener:

Entonces duplica este grupo de capas dos veces, y colócalas con un espacio de 5px. La segunda línea será nuestro estado hovered, por lo que el color de la fuente debe ser #6eb9cc. El tercero es el estado activo, por lo que la fuente debe estar en negrita. Este es el aspecto de nuestro sprite una vez terminado:

Evidentemente, debes hacer el fondo transparente. Solo he añadido un fondo blanco para que sea más legible como captura de pantalla.

Una vez hecho esto, guárdalo para la web y los dispositivos en PNG 24, y llámalo tabs-sprite.png.

Lo importante a tener en cuenta cuando se diseñan los sprites es mantener el ancho de cada elemento constante, y alinearlos bien para estar seguros de usar background-position más adelante sin problemas.

Bien, ahora tenemos nuestro sprite. Te preguntarás cómo vamos a aplicar esto a nuestra lista desordenada que realmente no parece un menú de navegación horizontal con pestañas. La respuesta está por venir.

Antes de empezar a utilizar nuestras imágenes de fondo, solo queremos colocar bien el menú. Aquí es donde un posicionamiento relativo en el contenido es útil. Al utilizar un posicionamiento absoluto en las pestañas, ahora podemos colocarlas refiriéndose a su padre y no a la ventana. Esto significa que la coordenada (0, 0) no será la parte superior izquierda de la ventana, ¡sino del "contenido"! Esto nos da mucha flexibilidad en nuestra codificación.

Después de colocar la lista, ahora tenemos que dar estilo a las viñetas. Al hacerlas flotar hacia la izquierda, hacemos que los elementos se muestren en una sola fila. Después de añadir las propiedades de anchura y altura también, establecemos la imagen de fondo a nuestro archivo sprite. Esto significa que cada elemento de la lista de menú desordenado compartirá el mismo fondo, y esta es la sutileza de los CSS Sprites.

También estamos utilizando el reemplazo de imágenes para eliminar los enlaces de texto sin procesar y hacer que se pueda hacer clic en el enlace en toda la pestaña.

Bien, el siguiente paso será dar estilo a cada pestaña. Tenemos que aplicar la posición de fondo normal, luego la posición de fondo hover, y finalmente la posición activa y actual. Esto es, por ejemplo, lo que parece para la pestaña "anterior":

No te preocupes demasiado por el ancho que le hemos puesto, es solo porque la pestaña "anterior" es más ancha que las pestañas estándar. No tenemos que preocuparnos por esto con las otras pestañas. Solo tienes que hacerlo para cada pestaña, y no te olvides de sustituir los valores de los píxeles por los correctos. Puedes usar la herramienta de regla de Photoshop (I) para ayudarte. Este es el aspecto del código completo:

Bueno, ¡eso era todo para las pestañas! Este es el aspecto de nuestra plantilla ahora:

El módulo del blog

Empezaremos con lo básico, como siempre. Un poco de estilo de diseño obvio nos da algo como esto:

Después de esto, solo vamos a darle estilo a la barra de encabezado. Tenemos que hacer crear una imagen para utilizar como fondo aquí. Solo hay que ir al grupo de capas de la derecha, ocultar la capa de texto y fusionar el icono y la forma. Guarda esto como blog-header-bar.png.

Podemos añadir esta imagen de fondo una vez que hayamos establecido la altura, la anchura, el relleno y el margen:

El siguiente paso será dar estilo a cada entrada. Como la mayor parte del trabajo se hizo en typography.css, no necesitamos hacer mucho aquí, solo añadir algunos márgenes y paddings básicamente.

El último paso es dar estilo al enlace "Leer más". Debido a que vamos a utilizar tres estados para este botón (regular, hover y activo) vamos a utilizar un sprite aquí también. Solo tienes que arrastrar el grupo de capas derecho en un nuevo documento, y duplicarlo dos veces. Dejé 10px entre cada estado. Para el estado hover, solo cambié el color del texto a #6eb9cc, y para el estado activo, solo invertí tanto el Gradient Overlay como el Stroke para crear un efecto 3D al hacer clic en él. Este es el aspecto de mi sprite:

Lo he guardado como read-more-button.png. Para aplicarlo, haremos básicamente lo mismo que hicimos con las pestañas. También tenemos que hacer que el botón flote a la derecha y tenga algunos márgenes.

Ya hemos terminado con el módulo del blog. Echemos un vistazo a su aspecto.

El módulo de Twitter

Esto es más o menos lo mismo que el módulo del blog, así que solo lo repasaré más rápidamente.

Supongo que no es necesario explicar cómo se debe hacer para conseguir el fondo de la barra de cabecera. Solo recuerda ocultar el texto antes de fusionarlo. Llama a esta imagen twitter-header-bar.png.

Añadimos algunos márgenes y una anchura a la caja, y luego añadimos el fondo de la barra de cabecera solo como hicimos para el blog.

Después, solo tenemos que dar estilo a cada tweet. Solo hay que observar que hacemos flotar la imagen para que aparezca a la izquierda del nombre. Los márgenes y los paddings se establecen utilizando el modelo de caja.

La razón por la que posicionamos el h4 de la forma en que lo hicimos es porque la altura de línea por defecto de Myriad Pro es un poco convencional. Sin embargo, no te preocupes si no quieres que tu código se llene de position: relative, es solo un detalle menor que estamos arreglando aquí.

Para los botones Obtener más tweets, solo hay que reemplazar el texto en el sprite de Leer más, y guardarlo de nuevo, esta vez como get-more-tweets-button.png. Después de eso, utilizamos exactamente la misma técnica que usamos para el botón Leer más.

Al terminar este módulo de Twitter, ¡también terminamos la estilización del contenido! Sé que ha sido muy largo, pero solo hay que ver lo que hemos producido. ¡Creo que valió la pena!

¡Realmente está empezando a ser impresionante!

El pie de página

Nuestro pie de página se compone de dos partes. La primera es la imagen, y la otra es la parte de texto.

Por las mismas razones por las que tuvimos que editar un poco la imagen de la cabecera, tenemos que hacer que los bordes de la imagen del pie de página se desvanezcan a #6eb9cc también. Solo tienes que copiar la imagen en un nuevo documento, y utilizar la herramienta de degradado (G) para hacerlo. Guarda esto en PNG 8 y llámalo pie de página-imagen.

Para añadir esto a nuestro documento, el código que usaremos es casi exactamente el mismo que el que usamos para la cabecera.

Finalmente, para el texto del pie de página, estamos añadiendo la imagen content-top-shadow.png ya creada como imagen de fondo para crear el efecto de sombra. Obviamente, también estamos estableciendo la altura, la anchura y un poco de relleno.

Hecho con el CSS

Y eso fue todo; ¡ya hemos terminado con el CSS! Ha sido bastante difícil, ¿verdad? Lo importante a recordar cuando se codifica un diseño es proceder lógicamente, recordando siempre el modelo de caja. Una vez que sepas lo que estás haciendo con él, codificarás de forma mucho más eficiente y no tendrás que luchar tanto con los errores entre navegadores. Este es el aspecto de nuestra página en Firefox:

Puedo asegurar que esta página se ve exactamente igual en IE 8, Safari 3 y 4, Chrome 1 y 2, Firefox 3 y Opera 9.5. Sin embargo, si ahora miramos cómo se ve en IE 7, notaremos varios defectos. Si no tienes IE 7 en tu ordenador, solo tienes que ejecutar IE 8 en modo de compatibilidad y verás la página solo como en IE 7.

Esas cuestiones son, por ejemplo:

  • La barra de estado es demasiado fina
  • La barra de acción no está correctamente posicionada, y la falta de :antes hace que el relleno se vuelva loco
  • La envoltura de la página no está correctamente posicionada
  • El título de la presentación de diapositivas no está correctamente posicionado.

Esto puede parecer mucho, pero en realidad no lo es. Se pueden arreglar fácilmente usando el hack !important o un comentario condicional. No me gustan los CSS Hacks, así que voy a seguir con una hoja de estilo condicional. Pero siéntete libre de utilizar cualquier técnica que desees.

Cómo solucionar los problemas de IE

Dije que íbamos a usar comentarios condicionales. ¿Qué son esos? Bueno, son simplemente una manera de dirigirse a los navegadores de Microsoft y utilizar una etiqueta específica o un grupo de etiquetas que solo se muestran en IE. Otros navegadores solo interpretarán esto como un comentario y por lo tanto no mostrarán la etiqueta. En nuestro caso, vamos a poner una etiqueta de enlace a una hoja de estilo externa en este comentario.

Una vez incluida esta hoja de estilo, podemos empezar a arreglar los pocos problemas que tenemos. Crea una nueva hoja de estilo llamada ie7.css, y guárdala en nuestra carpeta css.

Lo primero que tenemos que hacer es fijar la altura de la barra de estado. Nada demasiado complicado, solo hay que establecer una nueva altura, y asegurarse de que el fondo está pegado a la parte inferior ya que no tiene 50px de altura sino solo 40.

A continuación, tenemos que solucionar el problema que estamos experimentando debido a que IE 7 no admite el pseudoformato :before y :after. En lugar de añadir tubos con imágenes de fondo o algo así a los enlaces de la barra de acción, solo espaciamos un poco más los enlaces y los centramos. También tenemos que arreglar el hecho de que IE no entiende cómo flotar correctamente los elementos que no están situados sobre el contenedor en el código fuente. Esto se puede hacer usando un posicionamiento absoluto, y fijando el margen izquierdo.

Después de esto, tenemos el problema con la posición de la envoltura de la página. Nada demasiado complicado de resolver aquí, solo hay que utilizar el modelo de caja a tu favor. También utilizamos este selector para eliminar el sobreespacio en la parte inferior del div de contenido.

IE no parece mostrar nuestro título de la diapositiva correctamente, porque le hemos puesto un posicionamiento relativo. Solo hay que cambiarlo a absoluto, y restablecer las propiedades superior e izquierda.

Por último, ocurre que IE duplica el relleno entre el título de la entrada y su contenido en el módulo del blog. Podemos arreglar esto estableciendo la mitad del valor del mismo.

Bien, ahora puedes comprobar nuestro diseño en IE 7 y ver que también funciona bien.

Sexto paso - El JavaScript

Esto no será muy complicado. Utilizaremos jQuery, el plugin jQuery Cycle y Cufón. Te explicaré por qué y dónde puedes descargarlos a medida que avancemos.

Aquí estoy usando JavaScript siguiendo la filosofía de la mejora progresiva. Obviamente, el pase de diapositivas no funcionará ahora mismo si no tenemos activado JavaScript, pero podría hacerlo fácilmente si solo añadimos algo de PHP a la página y cambiamos los enlaces siguiente y anterior. Sin embargo, este no es el tema del tutorial así que no lo cubriré. Solo hay que tener en cuenta que solo se necesitan 5 líneas de código PHP para hacerlo funcionar. Así que eso es para la presentación de diapositivas que se mejora progresivamente. También estamos suavizando las fuentes de los encabezados con un código JavaScript. Esto nos permite utilizar cualquier fuente que deseemos aunque el lector no la tenga instalada en su ordenador. Si el lector no tiene activado JavaScript, lo único que ocurrirá es que verá una fuente de reserva.

jQuery

No vamos a utilizar toda la potencia de jQuery en este tutorial. Sin embargo, nos facilita las cosas, así que vamos a incluirlo en nuestro proyecto aunque suponga 19 kilobytes extra.

Puedes descargar la versión minificada y comprimida por YUI de jQuery en su sitio web oficial (http://jquery.com/) simplemente marcando la casilla "Production" y haciendo clic en el gran botón "Download". Llama a este archivo jquery.js y colócalo en nuestra carpeta JS.

Para utilizar el poder de jQuery en nuestra plantilla, obviamente necesitaremos llamarlo. Deberás colocar el código en tu sección head.

Eso es todo; ¡jQuery ahora se carga con la página y nos permite utilizar todas sus propiedades y métodos!

Cufón

Antes hablaba de un código JavaScript para suavizar las fuentes, pero en realidad no es eso. Cufón nos permite utilizar la fuente que queramos en nuestro diseño sin que el lector la tenga necesariamente instalada.

No voy a cubrir los fundamentos del uso de Cufón ya que Jeffrey Way ya hace un excelente trabajo al respecto aquí: http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/.

Solo tienes que descargar Cufón de este sitio: http://cufon.shoqolate.com/generate/ , y utilizar el convertidor de fuentes en línea para convertir la fuente Myriad Pro en un archivo JS. Si no estás seguro de cómo hacerlo, ¡consulta el tutorial de Jeff!

Guarda el archivo Cufón en la carpeta JS y llámalo cufon.js, y el archivo de fuentes myriadpro.font.js.

Una vez que estén en el directorio correcto, tenemos que llamarlos desde nuestro archivo index.html. Añade etiquetas script en la sección head de nuestro documento de marcado, y utiliza el atributo src para llamar a los archivos. No olvides que la etiqueta script no se cierra automáticamente. No puede utilizar la sintaxis. Si lo haces, la validación fallará. La sintaxis que debes utilizar es aunque la etiqueta esté vacía.

Si recargas la página, verás que... en realidad no ha pasado nada. Esto es porque necesitamos llamar al reemplazo de texto de Cufón y especificar qué etiquetas deben ser analizadas.

Abre una nueva etiqueta de script, pero en lugar de llamar a un archivo JS externo, solo escribiremos nuestro código directamente en nuestro archivo HTML. Podemos hacer esto porque estamos usando una sola línea de código. Sin embargo, si tu código es más largo, debes colocarlo en un archivo externo. El método para activar el reemplazo es Cufon.replace() y toma como argumento la etiqueta que debe ser reemplazada. Como ya hemos llamado a jQuery, también podemos utilizar su motor de selección de CSS para atrapar las etiquetas adecuadas.

El código que podrías colocar en tu HTML sería el siguiente:

Simplemente estamos apuntando a las etiquetas de encabezado, y Cufón está haciendo la magia. Recarga la página y podrás ver cómo Cufón ha sustituido sin problemas todas nuestras etiquetas h por imágenes construidas sobre la marcha.

¿Qué ocurre si el lector no tiene activado JavaScript? La fuente utilizada es la especificada en nuestro CSS. Si el lector posee Myriad Pro, se utilizará, aunque no se suavice, y si no, se utilizará una de nuestras fuentes de reserva. Es la belleza de la mejora progresiva.

La presentación de diapositivas

Nuestro último paso consistirá en dar vida al pase de diapositivas. Para ello, utilizaremos un plugin de jQuery increíblemente útil llamado jQuery Cycle Plugin. Puedes obtenerla aquí: http://malsup.com/jquery/cycle/lite/ . No vamos a utilizar transiciones complicadas, así que la versión Lite funcionará bien. Lo mejor de todo es que solo ocupa 3kb.

Asegúrate de que estás descargando la versión comprimida de YUI del plugin, entonces colócalo en nuestra carpeta JS y llámalo cycle.js. Entonces, obviamente, tenemos que llamarlo desde nuestro HTML. Coloca la llamada al plugin Cycle debajo de la llamada a jQuery para asegurarte de que el plugin se añadirá a la biblioteca.

A continuación, tenemos que disparar el efecto utilizando algo de código JavaScript. Aquí es donde podemos especificar algunas opciones como los comandos Anterior y Siguiente, el retraso, etc. Pondremos este código en un nuevo archivo llamado slideshow.js en la carpeta JS obviamente, que luego llamaremos desde nuestro HTML.

Antes de empezar a codificar, tenemos que decidir qué queremos que haga nuestro pase de diapositivas. El comportamiento por defecto es tomar cada elemento de un contenedor especificado, y luego hacerlos deslizar, ocultando los demás. Esto es bueno ya que ponemos todas nuestras imágenes de la presentación en un contenedor con un id de "Diapositivas". ¿Cómo queremos que se comporte? Bueno, cada 5 segundos, debería cambiar de diapositiva, pero también debería cambiar de diapositiva si hacemos clic en el botón Anterior o Siguiente. También queremos que la presentación se detenga si pasamos el ratón por encima. Esto es bueno porque da tiempo a que la gente haga clic si está interesada en la diapositiva actual.

Por suerte, todo esto es extremadamente fácil de hacer usando el plugin Cycle. Una vez que el DOM esté listo, haz que jQuery recupere el contenedor #slides, e inicia el pase de diapositivas usando el método cycle(). Entonces, utilizando un objeto anónimo que pasamos como argumento, podemos establecer el comportamiento que queramos.

Este es el aspecto que debe tener tu código:

¿Qué significan esas propiedades? Bueno, prev y next son obviamente el ID de nuestros comandos Previous y Next, delay es el tiempo entre cada diapositiva en milisegundos, y si pause se establece en 1, entonces la diapositiva se pausará al pasar por encima.

Si recargamos la página, podemos ver que la imagen se desliza bien, y que los comandos anterior y siguiente funcionan bien. Sin embargo, el título es inexorablemente el mismo. Podemos resolver este pequeño problema llamando a una función antes de cada deslizamiento La función sólo obtendrá el atributo alt y el atributo href de la siguiente diapositiva para poder sustituir el h4 y el enlace correctamente. Este es el aspecto de la función:

Sin embargo, esto no funcionará a menos que especifiquemos que esta función debe ser llamada antes de cada cambio de diapositiva.

Para ello, solo tenemos que especificar la propiedad "before" dentro de nuestro objeto de configuración anónimo. Esta propiedad debe establecerse con el nombre de la función. No debes usar comillas alrededor del nombre de la función.

Este es el aspecto del código de trabajo completo:

Estupendo, si ahora recargamos la página veremos que nuestro pase de diapositivas funciona tal y como queríamos, ¡y esto solo con unas pocas líneas de código! Ese es el poder de jQuery y sus plugins.

Séptimo paso - Reflexiones finales

Ahora hemos codificado todo el diseño de nuestro sitio web utilizando xHTML 1.0, CSS 2.1 y JavaScript sobre la base de la plantilla que diseñamos en la Parte I. Puedes comprobar cada uno de los archivos del proyecto y ver que son 100% válidos. Es importante recordar esto, ya que puede mejorar en gran medida la accesibilidad y la calidad general de su codificación.

Espero sinceramente que hayas disfrutado de esta serie de tutoriales, que hayas aprendido algunas técnicas nuevas y que ahora seas capaz de hacer tú mismo plantillas web excepcionales. Estaré encantado de ver lo que has conseguido hacer en los comentarios.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.