Curso Diseño Web III - Primeros esbozos

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas. Esta entrada pretende transmitir al lector una metodología de trabajo cuando se enfrenta a un proyecto Web.

A menudo las propuestas de trabajo que reciben las agencias de diseño Web son descritas vagamente por el cliente y es tarea del diseñador descubrir los objetivos del portal Web a construir. No obstante, la mayoría de las veces recibimos un ramillete de información preexistente en forma de la antigua Web, un folleto, algunos documentos internos etc. Imaginemos que José Antonio Labordeta contacta con nosotros y nos pide que hagamos la Web de su programa de televisión un país en la mochila y nos facilita para ello su diario (mostrado en la imagen a continuación).

La primera tarea consiste en esbozar en papel o con la ayuda de algún programa de diseño de interfaz de usuario como será nuestro sitio. Yo recomiendo esbozar en papel ya que crearemos prototipos rápidamente y no hay predisposición a impedir cambios o nuevas ideas durante las primeras etapas del proceso de diseño. Nadie se enfada si tiramos su esbozo en papel a un papelera y comenzamos de cero. Sin embargo, no estará tan dispuesto a realizar cambios sobre su diseño en Microsoft Visio o OmmniGraffle en el que ha estado trabajando toda la mañana. Una vez tengamos el esbozo, hay que imaginarse como pasar de esa idea a código HTML. Este proceso se ilustra en la siguiente imagen.

El esquema HTML mostrado en la imagen anterior muestra elementos cabecera (<h1>, <h2>, <h3>), párrafos (<p>) e imágenes (<img>). El elemento imagen es un elemento vacío. Denominamos elementos vacíos a aquellos que sólo tienen etiqueta de apertura. Aparte de imagen, hay otros elementos vacíos como <br>. Éste sirve para crear retornos de carro. Los navegadores ignoran los espacios en blanco, sangrías etc. que aparezcan en nuestros archivos HTML por lo cual <br> sería el equivalente al efecto que obtenemos en los procesadores de texto cuando pulsamos la tecla ENTER. Es decir, un salto de linea.

Listas

En HTML es común encontrar información ordenada en listas. Hay dos tipos de listas aquellas cuyos elementos deben aparecer en un orden preestablecido y aquellas cuyos elementos no deben guardar un orden estricto. Ejemplo de lo primero serían el listado de los diez mandamientos que todos repetíamos en nuestros años de catequesis. En cuanto a lo segundo podemos tomar la lista de la compra. En la cual el orden en que tengamos escrita "leche" o "carne" no influye en la felicidad de nuestra nevera. Los elementos HTML para escribir listas son los siguientes:

• <ul> Lista desordenada
• <ol> Lista ordenada
• <li> elemento de una lista

A continuación se muestra un ejemplo de una lista de la compra en HTML

 
<ul> 
 <li>Pan</li> 
 <li>Leche</li> 
 <li>Mantequilla</li> 
</ul> 

Anidamiento

Podemos pensar que el modo de estructurar nuestros elementos HTML se asemeja al funcionamiento de las muñecas rusas. La originalidad de estas muñecas consiste en que se encuentran huecas por dentro, de tal manera que en su interior albergan una nueva muñeca, y ésta a su vez a otra, y ésta a su vez otra. Del mismo modo nuestros elementos HTML pueden albergar en su interior varios HTML y éstos a su vez otros. La imagen a continuación le ayudará a visualizar esta metáfora.

Resumen

• Planea la estructura del portal Web antes de escribir el contenido. Empieza con unos simples esbozos que te sirvan para crear una visión de como quedará el portal. Luego traslada esta visión a HTML.
• Planea tu página comenzando con los elementos de bloque, para luego refinarla con elementos en linea.
• Recuerda, que siempre que sea posible, hay que usar elementos que le digan al navegador el significado del contenido.
• Usa siempre el elemento que más cerca este del significado de su contenido. Por ejemplo, nunca use un elemento de párrafo cuando necesite una lista.
• <p>, <blockquote>, <ol>, <ul> y <li> son elementos de bloque. Constituyen un bloque en si mismo y son mostrados con espacio en blanco antes y después de su contenido.
• <q>, <em> y <a> son elementos en linea. El contenido de estos elementos fluye en linea con el resto del contenido del elemento que los contiene.
• Usa el elemento <br> cuando necesites insertar retornos de carro.
• <br> es un elemento vacío.
• Los elementos vacíos no tienen contenido.
• Un elemento vacío consiste sólo en una etiqueta y quizás algunos atributos.
• Un elemento anidado es un elemento contenido completamente dentro de otro elemento. Si sus elementos están anidados correctamente, sus etiquetas deberían encajar correctamente.
• Para crear una lista en HTML se debe usar una combinación de dos elementos: <ol> y <li> para una lista ordenada; o <ul> y <li> para una lista desordenada.
• Cuando el navegador muestra una lista ordenada, crea la numeración de la lista automáticamente.
• Puede especificar su propio orden en una lista ordenada por medio del atributo start. Para cambiar los valores de los elementos individuales, use el atributo value.
• Puede construir listas anidadas poniendo elementos <ol> o <ul> dentro de los elementos <li>.
• Use entidades para los caracteres especiales en su código HTML.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design