Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos, como encabezados, columnas, menús laterales, etc.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetación.

Las capas pueden estar anidadas unas dentro de otra. Básicamente, lo que haremos será definir cómo se posiciona en la página, su colocación y su tamaño.

Nota: Lo aquí explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar otro DTD, o no hacerlo, puede que el resultado no sea el esperado.

Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Lados y tamaño

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:

Tamaños absolutos, utilizando px, cm, etc...

Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).

Tamaños relativos a la fuente, utilizando em.

El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

 

<p style="width:200px; height:100px; border: red 2px solid">

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor auto.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o relativo. En el siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado el id="contenido", y en la hoja de estilo le hemos asignado un ancho fijo y la hemos centrado.

Diseño y Usabilidad

El contenido de una página web es lo más importante pero un buen contenido con un mal diseño no es una buena página web. Tampoco sirve de nada un buen diseño con un mal contenido.

Suponemos que el buen contenido lo pones tú, nosotros vamos a intentar darte unas orientaciones para conseguir un buen diseño.

. Un buen diseño

 Ver el videotutorial

El cómo presentamos la información es muy importante para un sitio web. Y esto lo conseguimos con un buen diseño.

Pero ¿qué es un buen diseño web? Bueno, este punto puede dar para mucho, pero vamos a intentar transmitir unas pocas ideas básicas:

Comodidad para el visitante. Le debe de resultar cómodo navegar por el sitio, y también debe de poder captar la información (texto, imágenes, flash, vídeos...). Por eso es importante un buen sistema de navegación, y presentar el contenido de forma clara y espaciada.

Comodidad para el autor. Cuanto más fácil nos resulte realizar modificaciones, mejor. Por eso separaremos el contenido del diseño, utilizando hojas de estilo.

Accesibilidad. Cuanta más gente pueda ver nuestro sitio mejor. Pensemos en cómo accede el visitante. En el aspecto técnico, el sitio debería de seguir los estándares, para facilitar la compatibilidad con navegadores antiguos, u otros dispositivos, como teléfonos móviles. También es importante un diseño que soporte las pantallas pequeñas, pero que aproveche las pantallas de gran tamaño, cada vez más frecuentes. Además, hacerlo legible y poner textos descriptivos a las imágenes puede facilitar el uso para visitantes con problemas visuales.

Usabilidad. Por otra parte, pensemos en quién es el visitante. No es lo mismo si se dirige a niños, adultos, personas mayores o a todo el mundo. En cualquier caso, nuestro sitio debe de ser fácil de usar.

Transmitir. El diseño debe de transmitir lo que el usuario puede esperar de él. Por ejemplo, de un banco esperamos seriedad, por lo que un diseño informal puede ser contraproducente.

Bonito y original. El diseño debe de ser agradable, combinar bien colores, organización de los elementos, etc. Y cuanto más original sea, más lo será nuestro sitio.

Simple. Cuanto más simple sea el diseño, más se facilitarán el resto de aspectos que hemos comentado.

Estos aspectos debemos de tenerlos en cuenta, pero no podemos pretender aplicar cada uno al 100%. Por ejemplo, un diseño más original implicará utilizar más elementos, y que todos aparezcan correctamente ordenados, lo que lo hará más complejo. Y al final un buen diseño depende de la temática de la página y de lo que queramos transmitir con ella.

 Colores

La elección de colores apropiados es una de las cosas que más influyen en el aspecto del sitio.

Lo habitual es utilizar una gama de colores armónicos, con variaciones de tonos de un mismo color. Con ellos formaremos la paleta de colores de nuestro sitio. Utilizar la misma paleta es importante, porque si no iremos utilizando variaciones del color, y al final tendremos un sitio con muchos colores distintos.

Para aquellos que no sean buenos combinando colores, siempre se pueden inspirar en el diseño de páginas web, o herramientas que nos facilitan paletas de colores. Una buena idea es utilizar un selector de color, una herramienta que nos permita tomar el color de una parte de la pantalla o de la página web. Existen muchas herramientas gratuitas de este tipo. Nosotros hemos utilizado ColorPic. Si necesitas ayuda para instalar y utilizar la herramienta, visita este básico Básico.

Un buen ejercicio sería que intentases capturar la paleta del sitio que queremos crear utilizando ColorPic. Captura sólo el color de los elementos HTML, no los colores que forman parte de las imágenes.

PREPARAR NUESTRO SITIO

 Navegación

Antes de comenzar a definir la navegación, debemos de tener una idea de cómo va a ser el sitio web, es decir, debemos tener una idea formada de la estructura y extensión del sitio. Así podremos decidir qué sistema de navegación es el más adecuado.

Si construimos un sitio sobre la marcha, sin planificación, según vaya creciendo, se irá complicando la navegación y al final no nos quedará más remedio que hacer modificaciones que resultarán más costosas que haberlo pensado un poco mejor con anterioridad.

Existe una regla que dice que un usuario no debería de necesitar más de tres clics para llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a navegación.

El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello:

Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto.

Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.

Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o con textos de información emergentes.

Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás del navegador.

La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas páginas aprenderá a moverse por nuestro sitio, y le resultará más cómodo.

La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las páginas.

 Estructura del menú

El uso de menús es muy habitual en las páginas web. Un menú no es más que una lista de enlaces relativos a nuestro sitio, llamados elementos del menú.

Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o debajo de él, o en un lateral, normalmente el izquierdo.

El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.

Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está en esa sección es probable que le interesen los apartados relacionados.

Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.

El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.

En lo que se refiere al código, el menú suele tener estos elementos:

Los menús se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista, colocaremos un enlace. Si no sabes qué son las listas, puedes verlo en este básico Básico.

El aspecto del menú se consigue por CSS.

Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos avanzados, o en vez de los enlaces.

Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegación.

editor Web?

Un editor Web sería cualquier aplicación que nos permita crear, editar y guardar una página Web. Como ya hemos visto, una página no es más que un archivo de texto, por lo que cualquier programa que nos permita editar texto, puede funcionar como un editor Web.

Podemos considerar tres categorías de editores Web:

Editores de texto.

Nos permiten editar el código fuente puro y duro, como puede ser el bloc de notas.

Editores de HTML.

Funcionan como los editores de texto, pero pueden tener algunas opciones más avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automáticamente.

Editores WYSIWYG.

Por un lado, nos permiten editar el código fuente como los editores de HTML. Y por otro, nos permiten trabajar en vista de diseño. Es decir, ver la página como se vería en un navegador mientras la editamos. La mayoría de estos editores suelen tener opciones para realizar tareas adicionales de forma más fácil, como por ejemplo, crear elementos de un formulario, insertar menús, e incluso código JavaScript tipo AJAX ( más adelante veremos de qué se trata). Editores de este tipo pueden ser Amaya o Dreamweaver.

Escribir directamente el código fuente nos da un mayor control sobre la página, obteniendo un código más preciso y sin etiquetas innecesarias. Pero el tener que escribir cada etiqueta hace que sea mucho más lento y que debamos conocer mejor el HTML.

Utilizar editores WYSIWYG resulta más cómodo. Ya que no hemos de preocuparnos por la mayoría de las etiquetas, y escribimos el texto como lo haríamos en un procesador de texto. No obstante, no siempre se generará el código que queramos. Y sobre todo si utilizamos editores no especializados, como Word que permite guardar como página web, aunque generando un código muy "sucio". Por ejemplo, crear un html con Word en el que sólo ponga "Hola mundo", con letra Arial y tamaño 16px, genera un archivo de 22KB y 400 líneas de código.

Lo habitual es realizar el grueso de la página en vista de diseño, sobre todo escribir el texto. Y después, cosas más concretas y correcciones, realizaras sobre el código fuente. Esto también depende de los conocimientos de cada uno.

Nota: Aunque en un editor WYSIWYG podemos ver cómo quedará la página, siempre hemos de probarla en los navegadores más utilizados, en este momento Internet Explorer y Mozilla Firefox.

Para realizar este curso, te recomendamos que no pierdas de vista el código fuente, e intentes trabajar directamente con él la mayoría de las veces, sobre todo al hacer cosas nuevas. Puede que vayas un poco más despacio al principio, pero aprenderás mucho mejor el HTML, y después no tendrás problema para utilizar cualquier editor.

. Elegir un editor

Existe un gran número de editores Web, unos más completos que otros, con más o menos opciones y con más o menos fallos.

Y como al elegir cualquier programa, lo primero es optar por una solución gratuita o de pago. Para realizar nuestra página Web, vamos a utilizar un editor WYSIWYG. Uno de los mejores (si no el mejor) editor de este tipo es Dreamweaver, de Adobe. Es un editor muy completo, y el elegido por la mayoría de des arrolladores profesionales. Pero se trata de un editor de pago, aunque es cierto que podemos probarlo gratuitamente durante 30 días. En cuanto a opciones gratuitas, podemos encontrar, entre otros, Bluefish, más enfocado a programadores; Amaya, desarrollado por el consorcio W3C; o KompoZer. Nos hemos quedado con este último por ser bastante simple e intuitivo.

Podemos descargar KompoZer desde su página oficial. No requiere instalación, basta con descomprimirlo en una carpeta y ejecutarlo, aunque sí deberemos instalar el paquete de idiomas en español como se explica en el sitio. Si necesitas ayuda para instalarlo, sigue este básico Básico.

ASPECTOS DE LA PAGINA: ESTILOS BASICOS

Hasta ahora hemos aprendido a utilizar los elementos básicos de HTML para escribir texto, imágenes y enlaces, pero los resultados han sido muy pobres desde el punto de vista estético. A continuación vamos a ver como poner "guapa" nuestra página formateando el texto, con bordes, márgenes y fondos. Veremos un concepto muy importante y potente: el estilo CSS. El aspecto de la página se controla con los estilos CSS.

Por ejemplo, añadiendo estilos CSS a la página de nuestro ejemplo obtenemos este resultado.

Los estilos que hemos añadidos son los que puedes ver en esta imagen y que vamos a comentar a continuación:

A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura básica de la página, a continuación empezaremos a colocar cosas en la página, primero texto, luego imágenes, enlaces y por último hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que queramos, las capas.

Etiquetas

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.

Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,<title> o <p>.

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre, está el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br />, que equivaldría a <br></br>. La etiqueta <br /> escribe un salto de línea.

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

Hasta hace poco, lo más usual a la hora de escribir páginas web era que cada etiqueta tuviera bastantes atributos, que se referían a propiedades del formato o representación de los elementos. La tendencia actual es la de separar el formato del contenido, descartando estos atributos, sustituyéndolos por propiedades de estilo.

Por ejemplo, para escribir la siguiente línea:

Bienvenidos a www.aulaclic.es

Antes, sin estilos:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.es</font></p>

Ahora, con estilos:

<p class="presentacion">Bienvenidos a www.aulaclic.es </p>

Como veremos en el siguiente tema, en otro lugar se definen las caracteristicas del estilo.

MI PRIMERA PAGINA WEB

Introducción

Pulsa en este icono  Ver el videotutorial para ver un videotutorial con el contenido de esta unidad.

El objetivo de este curso es enseñar a crear páginas web, partiendo desde cero y usando herramientas gratuitas.

Para seguir el curso sólo necesitas un ordenador y ganas de aprender, al final del curso podrás crear páginas como la que puedes ver haciendo clic aquí o aquí.

El lenguaje que se utiliza para crear una página web es el HTML, Hyper Text Markup Lenguage (Lenguaje de Marcas de Hypertexto) Hay muchos cursos de HTML pero creemos que este es diferente porque pretende ser un curso integral de creación de páginas web.

Vamos a explicar brevemente que queremos decir con esto. Lo fundamental para escribir páginas web es saber HTML pero no es suficiente. Si quieres poner una imagen en tu página necesitarás saber un poco sobre gráficos web, para recortar la imagen al tamaño adecuado, si quieres poner un menú desplegable es conveniente que conozcas algo sobre JavaScript, si quieres recoger datos de los usuarios mediante un formulario es conveniente hacerlo con un lenguaje tipo PHP.

También es conveniente utilizar un editor web para facilitar la escritura de páginas web, como KompoZer, para que tu página sea agradable es conveniente saber algo sobre diseño web, y por último para que todo el mundo mundial vea tu trabajo necesitarás subir tu página a un servidor de Internet y darla a conocer.

Pues bien, todo esto y un poco más es lo que hay en este curso. Además hemos intentado explicarlo de forma que lo pueda entender cualquier persona sin conocimientos previos sobre todos estos temas. Dicho así, parece una misión casi imposible, esperamos que sigas todo el curso y llegues al final cumpliendo estas espectativas. Es un reto complicado pero esperamos crear un curso que sea un punto de partida a este apasionante mundo de la comunicación global a través de Internet y te dote de la visión general que te permita avanzar hasta lograr crear páginas web atractivas y completas. A final del curso estamos seguros que lograrás crear conocimiento y ponerlo a disposición de las personas, y algo del espiritu de colaboración y gratuidad desde el que está hecho este curso quizás llegue a contagiarte un poco. Se acaba dando parte de lo que se recibe.

Por supuesto, tratar todos estos temas en profundidad exigiría un curso de un tamaño enorme, pero el objetivo es dar una introducción a cada tema, de forma que el alumno se pueda desenvolver en las tareas básicas y tenga las nociones suficientes para poder ampliar lo que más le interese en otros sitios. Por esto, al final de los últimos temas hemos puesto unas cuantas direcciones con lo mejor de la red en ese tema.

 Contenidos

Para que sea más facil de entender hemos desarrollado el temario de forma progresiva mediante la creación de un sitio web sobre flores, introduciendo cada concepto según se va necesitando.

Así, primero (tema 2,3) veremos los conceptos básicos de HTML, escribir texto, darle formato, hiperenlaces, estilos, etc. Luego (tema 5) explicaremos brevemente el editor KompoZer, luego veremos como estructurar una página web y un sitio web (tema 6), más adelante introduciremos el programa Gimp para trabajar con gráficos (tema 9), unas ideas para crear gráficos vectoriales, como por ejemplo un logotipo para la página, con el programa Inkscape. En el siguiente tema (tema 10) introduciremos conceptos sobre JavaScript, y luego un poco de PHP (tema 11). En los temas finales, teorizaremos un poco sobre cómo publicar nuestro sitio y como conseguir que aparezca en los buscadores y tenga visitas.

 Metodología

Como hemos dicho los diversos conceptos los introduciremos según sean necesarios a medida que vamos desarrollando un sitio web. Primero crearemos una página sencilla para introducir los elementos básicos de HTML, luego iremos añadiendo elementos a esa página, como un menú, gráficos, formularios, etc.

En algunos temas, sobre todo al principio, la explicación será un poco más teoría y general. Muchas veces, encontrarás la opción de probar el código que se está explicando. Te animamos a que hagas cambios sobre esos ejemplos y los vuelvas a probar, para ver qué sucede.

En otros temas, nos centraremos más en trabajar sobre el sitio de ejemplo, realizando cambios concretos. Por eso, te sugerimos que vayas creando el mismo sitio, asegurándote de haber aplicado los cambios explicados en cada tema.

Los temas están explicados también en videotutoriales, a los que puedes acceder al principio de cada uno. Aunque en ellos no explicamos cosas nuevas, puede que te ayuden a entender algunos conceptos al verlos de forma más visual.

Al final de cada tema encontrarás unos ejercicios propuestos. Con ellos, irás creando otro sitio con lo visto en cada tema.