Tema Maqueta 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 claramente diferenciados, como un
encabezado, columnas, y un pie de página.

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 una 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.

Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear un div
alrededor de contenido ya existente desde Dreamweaver, seleccionamos la parte de la página
y en el menú Insertar, opción Objeto de diseño, elegimos Etiqueta Div.

Elementos de la Maqueta.

Entre los elementos más relevantes que conforman el sistema de navegación se cuentan los
siguientes:

Menú General o Menú de navegación: siempre presente en todo el sitio, permite el acceso a
cada una de las áreas del sitio.

Encabezado: es el área de tu sitio web que aparece en la parte superior de tu sitio y a lo largo de
tus páginas. El encabezado puede contener el título de tu sitio, el logotipo de la empresa y el menú
del sitio.

15
Pie de Página o footer: usualmente ubicado en la parte inferior de cada página, indica el
nombre de la institución, teléfonos, dirección física y de correo electrónico.

Área de contenido: 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.

Banner: es un formato publicitario en Internet. Esta forma de publicidad por internet consiste en
incluir una pieza publicitaria dentro de una página web. Prácticamente en la totalidad de los casos,
su objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.

Fecha de publicación: para saber la vigencia de publicación del contenido desplegado.

Botón Home: para ir a la portada.

16
Botón Mapa del sitio: para ver el mapa de la estructura del Sitio Web

Logo o emblema: signo gráfico que identifica a una empresa, un producto comercial o, en
general, cualquier entidad.

Buscador: presente en cada página si es que la funcionalidad existe en el sitio.

Botón Ayuda: para recibir ayuda sobre qué hacer en cada pantalla del sitio.

17
Actividad 4 “Partes de la Maqueta Web”
Escribe los nombres en cada área de las partes principales de la maqueta web.

18
Actividad 5 “En equipo” Realiza un boceto de tu tema como se muestra
a continuación:

Notas:
 No es necesario una medida específica, solo parecerse a lo anterior

 No es necesario colocar banners.

 Si no alcanzas a ver la imagen ve a la siguiente dirección electrónica:

cort.as/uAIc

 Revisa en la siguiente hoja la rúbrica de evaluación para ver los puntos a evaluar de
esta actividad

19
Rubrica de Evaluación de la actividad 5

Puntos a evaluar Puntos Total de puntos asignados

1.- Muestra en el boceto: encabezado “logo

mapa del sitio, nombre del sitio u empresa”
1

2.- Creo su logotipo de su empresa.

2

3.- Ilustro correctamente el área de

encabezado. (Nombre del sitio, logo, etc)
1

4.- Muestra en el boceto área de contenido

así como el área de banners o red social.
2

5.- Ilustro correctamente el área de

contenido así como los banner si es que los
1
llegase a tener.

6.- Especifica en el boceto los temas y

subtemas.
1

7.- Utilizo colores para dar más vida al

boceto.
1

8.- Coloco alguna imagen o información en

el área de pie de página.
1

Calificación total

Firma del Docente: ___________________

20
 Lee el sub tema “Medidas de una página WEB”

Estás en tu programa de diseño favorito porque vas a comenzar a trazar una nueva página web,
comienzas definiendo la medida del canvas1 en tu nuevo documento y te preguntas ¿cuáles son
las medidas de una página web? ¿Existe una medida estándar o al menos un tamaño sugerido?

Esa pregunta es sencilla de responder; no hay una medida específica. Al final de este artículo
incluiré unas medidas que podría sugerirte pero en definitiva antes de elegirla debes considerar
los tres factores siguientes:

1.- La resolución de pantalla

La resolución de pantalla es el factor más importante a considerar para el tamaño de un sitio

web, aunque no el único, para esto hay que tener en cuenta las resoluciones de pantalla más
comunes. Hasta hace un tiempo la resolución más popular era 1024×768 pixeles pero eso ha
cambiado en los últimos años y ahora el tamaño más común es 1366×768, en segundo lugar un
tamaño mucho mayor 1920×1080.

Ahora, si la resolución de pantalla más común es de 1366×768 ¿debería diseñar el sitio de este
tamaño? Pues tampoco es así necesariamente. Toma en cuenta los demás factores para llegar
a una conclusión.

2.- Las personas a las que se dirige

Siendo más específico al tipo de dispositivos que usan esas personas, si nos dirigimos a un sector
con un poder adquisitivo alto sus equipos posiblemente tengan resoluciones muy altas, si el
tipo de sitio va a ser mayormente consultado por personas que trabajan en oficinas de gobierno
la resolución promedio de sus equipos serían de unos 1280 a 1024. El sitio también podría estar

1
Herramienta que nos va a servir como inicio de nuestro proyecto para diseñar nuestro modelo de negocio

21
dirigido a personas que solo lo visiten a través de sus teléfonos inteligentes y una resolución de
800px bastaría.

3.- El tipo de contenido

Este es otro factor importante que se debe tener en cuenta, si el tipo de contenido son
principalmente textos, como los blogs o los sitios de noticias, no es necesario pensar en un
ancho de pantalla de 1900px ¿se imaginan leer ese párrafo extra ancho? tendríamos que mover
la cabeza como carro de máquina de escribir para leerlo. Las columnas de texto no muy anchas
se agradecen. En cambio si el contenido del sitio son principalmente imágenes o video de alta
calidad lo recomendable es hacer sitios pensado en resoluciones grandes que permitan
destacar su contenido mucho más.

22
 “Individual” subraya la respuesta correcta.
1.- ¿Que es la maqueta web?
a) Distribución del contenido web, así como la url.
b) Es la distribución de los elementos en la página.
c) Son los elementos del boceto web.

2.- Son algunos elementos de la maqueta web.

a) Tamaño de la página, url,
b) pie de página, banners, dirección del sitio.
c) menú de navegación, contenido, encabezado

3.- ¿Que es el logotipo?

a) Es el texto que muestra el fabricante.
b) Gráfico que identifica a una empresa o producto comercial
c) Es la unión de varias imágenes.

4.- ¿Que es el footer?

a) Parte del encabezado donde muestra las redes sociales, teléfonos y correo electrónico.
b) Parte de contenido que muestra la dirección o títulos de la institución.
c) Es una parte de la maqueta web que puede indicar el nombre de la institución, teléfonos,
dirección física o correo electrónico etc.

5.- ¿En qué parte se ubica el footer en la maqueta web?

a) Parte inferior “pie de página”.
b) En el contenido.
c) Parte superior “cabecera”.

6.- ¿Qué es lo que se muestra en el encabezado?

a) Puede contener el título de tu sitio, el logotipo de la empresa y el menú del sitio.
b) Parte de contenido que muestra la dirección o títulos de la institución.
c) Puede contener la fecha día mes y año, banner o dirección web.

7.- Escoge que tipo de medidas web en los dispositivos móviles.

a) Dispositivos móviles: hasta 767px, Tabletas hasta 1023px, PC menor de 1024px
b) Dispositivos móviles: hasta 767px, Tabletas hasta 1023px, PC más de 1024px
c) Dispositivos móviles: hasta 650px, Tabletas hasta 1000px, PC más de 2000px

8.- ¿Cuál es la media ideal para un sitio web?

a) 1028 x 765.
b) Dependiendo del monitor.
c) No hay una medida específica para un sitio web.

23