Maquetación Web


Es el proceso o actividad por el cual se redistribuyen los elementos de diseño y navegación de una página. Es decir, se sitúan y se colocan en ella a través del código HTML y se les dota de estilos a través de las hojas de estilo en casacada o CSS.

El maquetador Web o persona encargada de este trabajo debe enfrentarse a la comprobación de las distintas Webs en los diferentes navegadores, para que en todos ellos se visualice correctamente el contenido de la página. Debe ocuparse también de que el contenido de dicha página sea visible al mayor público posible, por lo tanto debe tener en cuenta en su trabajo que resoluciones de pantallas utilizan sus usuarios. Una página con un contenido poco accesible o con una navegación complicada puede hacer que los usuarios abandonen la página sin ni siquiera leer el contenido por muy interesante que pueda ser el mismo.

Los estilos CSS nos permitirán dar todo tipo de estilos, colores, tipografías, tamaños, inclusión de imágenes,... con el fin de "ahorrarnos" código y agrupar bajo unas mismas caracteristicas comunes (un mismo estilo) o individuales (en estilos diferentes) los elementos de la página como pueden ser "titulos" ,"subtitulos", "tablas"....

Contenido
1 Tipos de maquetación
  • Marcos o Frames
  • Tablas
  • Capas o Div
2. Programas y editores de texto
3. Problemas comunes de maquetación
4. Referencias

Tipos de maquetación Web


Existen varios tipos de maquetación HTML que cito y resumo a grandes rasgos:

  • Maquetación mediante Marcos o Frames: Actualmente está en desuso. Consistia en dividir la página físicamente en varias zonas. Estas zonas eran totalmente independientes unas de otras, como si fueran páginas distintas y se cargaban por separado. Una estructutra muy conocida era la de: cabecera, menu y contenido.
frames_ejemplo.jpg
  • Maquetación mediante Tablas: Consiste agrupar el contenido de la página en diferentes tablas para posicionarlas y distribuir su contenido en la página. El principal problema que plantea es que para posicionar con exactitud muchos elementos en la página era necesaria la anidación de unas tablas dentro de otras, de forma que en ocasiones distinguir estas tablas dentro del código fuente resultaba una trabajo tedioso.
    • Ejemplo de código estructura de una tabla simple (3 filas, 2 columnas) sería asi:
    • <table>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
  • Maquetación mediante Capas o Div: Mediante etiquetas que permiten la anidación de elementos y su posicionamiento a través de las hojas de estilo CSS. Editando su ubicación en la pantalla mediante cordenadas cartesianas.
    • Ejemplo código etiqueta div:
    • <div></div>

Programas y editores de texto


Para el proceso de maquetación web se pueden utilizar muy diversas herramientas, tan variables como: un simple editor de texto como el Bloc de notas o Note Pad a un sofisticado programa de maquetación como el conocido Dreamweaver, perteneciente al pack creado por Adobe el cual también incluye programas de diseño tan variados como: Adobe Photoshop, Flash, Illustrator,... entre otros.

Existen distintos editores de código HTML o XHTML que ofrecen funcionalidades complementarias al proceso de creación de páginas web. Además de los citados anteriormente, otra buena herramienta es el programa Coda desarrollado por Panic. El cual ofrece un gestor de ftp, visualizador emulando distintos navegadores, correción de código e incluso manuales de consulta dentro del programa. Es una buena alternativa para los desarrolladores que trabajen con Mac Os X.

Algunos de los editores de código de HTLM utilizados son:
  • Dreamweaver
  • FrontPage
  • HTML-kit
  • Kompozer
  • Editplus
  • WYSIWYG
  • Web Page Maker

Otras herramientas utilizadas para la maquetación web son: WordPress, Joomla, Drupal, Plone... Son gestores de contenidos web que permiten su edición de forma más sencilla. Existen plantillas o templates desde los que partir y son cada vez más editables y con un gran número de posibilidades.

Problemas comunes de maquetación


El principal problema que se presenta a la hora de afrontar la maquetación web es la diferencia de visualización del contenido en los navegadores.
Normalmente las diferencias las encontramos en l visualización en Internet Explorer 6 y 7 y para eso los maquetadores utilizamos unos trucos llamados "hacks" que sirven para adaptar ciertos espacios y hacer que el contenido se vea iguan en los distintos navegadores.

Un ejemplo de hack sería:
tabla {
 margin-left: 7em; /* Todos los navegadores */
*margin_left:6.5em; /* IE7 */
 _margin-left: 6em; /* IE6 */
}
 
Donde se estaría dando valores diferentes de margen a una tabla para los navegadores porque los espacios se muestran diferentes. Así para Internet Explorer 7 la propiedad es precedida de un asterisco ( * ) y para Internet Explorer 6 es precedida de un guión bajo ( _ )

Referencias



Libros:
  • Crandford Teague, Jacson. 2007 Programación: CSS, DHTML y AJAX. ANAYA MULTIMEDIA. Madrid ISBN:98-84-415-2217-6 (pág. 140 -145)
  • Blanco, Jaime. Bernaus, Albert. 2001 Curso de Diseño y Programación para Internet. INFORBOOKS EDICIONES. Barcelona. ISBN:84-95318-54-7 (pág. 43-75, 115-131)

Página web: