DISEÑO DE PAGINAS WEB

DISEÑO DE PÁGINAS WEB

El diseño de páginas web, según Arocena, F. (2011) “se trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc)” (p.1). Estos documentos o páginas web pueden ser creadas:

• Creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.

• Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.

• Utilizando lenguajes de programación del lado servidor, para generar la página web.

EL LENGUAJE HTML

Castillo, C. (2012), señala que el HTML “es un lenguaje que se utiliza para la creación de páginas en la WWW” (p.1). Por página entenderemos el documento que aparece en el visualizador. HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW.

En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos verlas.

ESTRUCTURA DE UNA PÁGINA WEB

La gran mayoría de las páginas web tienen divisiones o secciones similares. Lo usual es que, según López, J. (2012) “en la parte superior de la página se encuentre un encabezado, seguido de un cuerpo principal que suele estar flanqueado por una columna lateral (tanto a la izquierda como a la derecha) o dos columnas laterales, seguidas al final de la página por un pie de página” (p.3). La imagen siguiente es un esquema típico de una página web:

El encabezado

El encabezado es una faja horizontal que ocupa todo el ancho de la página en la parte superior de la misma. A la izquierda del encabezado suele ubicarse el logotipo del sitio, que ocupa un área importante dentro del mismo, aunque suelen haber diferencias importantes de un sitio a otro. Castillo, C. (2012) dice al respecto “Esta imagen debe tener un enlace a la página principal del sitio, ya que es uno de los estándares más respetados por los diseñadores y una de las formas que tienen los usuarios de volver al inicio” (p.1).

Desde el final del logotipo, ocupando el centro y la zona derecha del encabezado, frecuentemente se sitúan una serie de franjas de diferentes grosores. En la faja superior, se encuentran algunos enlaces generales de la página, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a perfiles, salidas, etc., así como ayudas y buscadores internos. La zona más ancha generalmente se encuentra ocupada por el título de la página, nombre de empresa, slogan, etc.

La zona inferior del encabezado se emplea para ubicar los links de navegación y las etiquetas de navegación, uno de los elementos más importantes a la hora de ayudar a los usuarios a encontrar las páginas componentes del sitio web. Dependiendo de la complejidad del sitio, puede encontrarse solo uno de estos sistemas de navegación o los dos; por ejemplo, cuando el sitio está dividido en secciones, uno de ellos está destinado a estas divisiones, mientras que el otro sirve para navegar dentro de cada sección, aunque pueden emplearse otros métodos de clasificación de los contenidos y por consiguiente, otros métodos de organizar la navegación interna.

Columnas de exploración

El cuerpo principal de una página web, en el diseño moderno se le encuentra dividido. Una de estas divisiones, consiste una o dos columnas de exploración. Este tipo de columnas, señala Arocena, F. (2011) “se le emplea para ubicar algunos elementos importantes de la página, como enlaces externos, navegación interna, publicidad, informaciones adicionales y contenidos secundarios” (p.1).

Cuando se emplea una única columna, es indistinto para los usuarios, de acuerdo a estudios sobre el comportamiento de usuarios de sitios web, ya que su ubicación no plantea dificultad alguna. En el caso de que el diseño requiera el empleo de dos columnas, pueden ubicarse una a cada lado del cuerpo principal de la página o ambas a uno de los lados, siendo también indiferente en este caso si se ubican a la derecha o a la izquierda del contenido principal.

Los usuarios, dado el uso continuo de estos elementos para esta función, suelen buscar la información de contacto en este tipo de columnas, por lo que resulta uno de los mejores lugares para ubicar los datos de contacto. A continuación, vemos algunos ejemplos de columnas de exploración:

Área de contenido

Arocena, F. (2011) dice que “esta zona del diseño de la página, es la que menos reglas tiene respecto de su diseño, ya que el hecho de que en ella se encuentren los contenidos principales de la página, el diseño depende en gran medida de los mismos, sobre todo en lo que respecta al tipo de contenidos, la cantidad, la disposición que se desea emplear, etc” (p.1). Sin embargo, hay que considerar algunas reglas importantes y que, salvo muy raras ocasiones, deben ser seguidas al pie de la letra.

En la parte superior de esta área se debe emplazar el título entre etiquetas <h1>, ya que este título tiene las palabras clave que los usuarios luego emplearán en sus búsquedas y será de gran importancia para que los buscadores indexen la página en forma correcta. Además, los usuarios buscarán en este punto el título de lo que se expone, siendo de extrema importancia que el mismo sepa a qué contenidos está accediendo.

En caso de que los contenidos sean muchos y haya que hacer desplazamientos importantes hacia abajo, es de mucha utilidad colocar al final del área algún tipo de salto al inicio, para evitar que el usuario deba realizar grandes desplazamientos. En el caso de que se empleen varias páginas para albergar contenidos relacionados, tanto al inicio de la página como al final de la misma es de gran utilidad colocar un navegador de páginas (del tipo Página anterior 1 – 2 – 3 … Página siguiente) para que la navegabilidad entre ellas sea sencilla.

Pie de página

Finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se colocan algunos elementos importantes, como el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de

...