El documento detalla la maquetación web, explicando su importancia en la disposición de elementos en una página y el uso de HTML y CSS para su implementación. Describe técnicas de maquetación, posicionamiento de elementos y estrategias de diseño, tales como diseños fijos, líquidos y elásticos. También aborda la separación de contenido y presentación para facilitar el mantenimiento y mejorar la carga del sitio.

1. TECNOLOGÍA DE DISEÑOWEB
Jony Rene Silva Ledesma
Correo: jony.silva@unapiquitos.edu.pe
Celular: 930217860
MaquetaciónWeb

2. Maquetación 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.
• La maquetación 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.

3. Objetivo yVentajas
El objetivo es mantener separado el contenido de la página de la presentación.
De este modo haces más fácil el mantenimiento y cambios al contenido y
diseño que tengas que hacer en el futuro. Hay otras ventajas, como reducir el
tiempo de desarrollo y el tiempo que el usuario debe esperar a que se cargue
completamente el sitio.

4. Proceso
El proceso de maquetación web es la transformación del diseño de un
producto web en un conjunto de archivos (html, css) capaces de ser
reproducidos por los navegadores web. Es el proceso en el que el prototipo
gráfico también denominado «layout» (con los requisitos estructurales y
estéticos definidos y aprobados en un análisis inicial) pasa a transformase en
código html y css(estándares web) para que los navegadores puedan
interpretarlo correctamente.

5. Planificación del proceso
• A la hora de plantear una maquetación web debemos fijar unas zonas de trabajo
que soporten la estructura de contenidos de nuestro sitio web y generar los
recursos necesarios que faciliten la futura carga de contenidos. Un error muy
frecuente es plantear una maquetación estática sin pensar en las necesidades
reales de la estructura de contenido. En estos casos, al introducir más o menos
elementos de los inicialmente planteados se produce una desmaquetación del
documento que deteriora su representación.
• Separa la presentación del contenido: es muy importante, para facilitar tanto el
proceso creativo como el futuro mantenimiento del sitio, separar el contenido y las
funcionalidades de la web de los archivos que definen las propiedades gráficas
(css). Además, este proceso optimiza la velocidad de carga de la web y permite la
personalización del sitio según necesidades de los usuarios.
• Utiliza estándares en desarrollo de la maqueta: para una correcta representación
de un documento web se recomienda el uso de los estándares web (conjunto de
recomendaciones lideradas por la W3C) que nos permiten mostrar la información
de forma universal y robusta y poder acceder al mayor número de usuarios
independientemente del dispositivo o la tecnología que usen.

6. Edición de los archivos web
• La edición de los archivos web y su base de html se realiza mediante el uso de
editores de texto plano, que permiten escribir código sobre un documento en
blanco.
• Para poder maquetar un documento web con este tipo de editores necesitaremos
tener amplios conocimientos en html. Para facilitar este proceso existen los
denominados editores gráficos de html, que nos permiten maquetar un
documento web basado en estándares sin necesidad de teclear ni una línea de
código, mediante el uso de un entorno gráfico de trabajo.

7. 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.
Cualquier elemento HTML de bloque, tiene dos atributos que
pueden definir su tamaño: ancho (width) y alto (height).

8. Desbordamiento
Al utilizar un elemento de bloque, como una capa, un párrafo, el “body”, etc...
el tamaño depende del contenido. Pero al definir un tamaño fijo nos puede
surgir un problema: ¿qué pasa si el contenido del elemento (texto, imágenes,
etc...) no cabe? Entonces se produce un desbordamiento, que podemos
controlar desde el estilo con la propiedad overflow. Podemos darle estos
valores: • visible. Es la opción por omisión. El contenido sale de elemento, y puede
que se solape con los elementos que haya a continuación.
• hidden. Lo que no quepa en el elemento, queda oculto.
• auto. Muestra las barras de desplazamiento en el elemento cuando sea
necesario.
• scroll. Siempre muestra las barras de desplazamiento.

9. Posicionamiento
• El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo.
• Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de elementos de
bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este
posicionamiento se le denomina estático.
• Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los
elementos. Existen cuatro tipos de posicionamiento:
• static. Es el normal.
• relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí,
podemos desplazar el elemento, permaneciendo el hueco de su posición original.
• absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al
elemento que lo contiene.
• fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda
fijo en la pantalla, aunque utilicemos barras de desplazamiento.
• Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto produce que
un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que
podemos asignar un valor numérico. Un elemento con un z-index mayor se verá por encima de otro
con un z-index menor.

10. Posicionamiento relativo
• El posicionamiento relativo coloca el elemento en su posición normal, y a
partir de ahí lo desplaza la distancia que le indiquemos. Al desplazarlo deja
un "hueco" donde estaría su posición normal.
• Para aplicarlo, lo primero es declararlo en el estilo, utilizando position:
relative;.
• Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a
la izquierda y right para hacerlo a la derecha. Utilizar valores negativos,
produce el efecto opuesto. Por ejemplo, para desplazar un elemento 40px a
la derecha, podríamos poner right: 40px; o left: -40px;.
• Del mismo modo, podemos desplazarlo verticalmente utilizando top para
desplazarlo hacia arriba o bottom para hacerlo hacia abajo.

11. Posicionamiento absoluto
• Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del
elemento en la página.
• Al contrario que con el posicionamiento relativo, el elemento al que le hemos
asignado un posicionamiento absoluto no deja un hueco en la página. Podemos
decir que el resto de elementos lo ignoran, y se colocan como si no existiese.
• Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.
• La posición y tamaño del elemento se indica siempre en relación a otro elemento
que lo contiene. El elemento contenedor será el más cercano que haya con
posicionamiento no estático. Si no hay ninguno, se utilizará el body.
• Para definir la posición utilizamos top para referirnos a la distancia entre el borde
superior del elemento posicionado y el borde superior del elemento contenedor.
Por lo tanto left será la distancia entre los lados izquierdos, right entre los lados
derechos y bottom entre los lados inferiores.

12. Posicionamiento flotante
• El posicionamiento es un poco distinto al resto. Para empezar, no se define
con la propiedad position, si no con la propiedad float. Puede tomar estos
valores:
• left: flotante a la izquierda (float: left;).
• right: flotante a la derecha (float: right;).
• none: sin flotante.
• Lo que hace este posicionamiento es desplazar el elemento todo lo que
pueda hacia la dirección indicada, hasta encontrar el límite del elemento
contenedor, u otro elemento también flotante. Además hace que todos los
elementos fluyan alrededor de él.

13. Posicionamiento fijo
El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento
absoluto, con las propiedades top, bottom, left y right. Pero su
comportamiento es distinto: el posicionamiento fijo se refiere siempre a la
ventana del navegador, independientemente de que el elemento posicionado
esté dentro de otro elemento con posicionamiento, como pasaba con el
absoluto. Además, el elemento siempre se muestra en la misma posición,
aunque la página sea larga y nos desplacemos hacia abajo o hacia un lado.

14. Ancho de la página, líquido o elástico
• Al crear el diseño de una web, básicamente existen dos tendencias: que la
página ocupe todo el ancho de la ventana del navegador (diseño líquido), o
que ocupe sólo una columna con un ancho fijo (diseño fijo).
• No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:

15. Diseño fijo
• En el diseño fijo, la página tiene un tamaño exacto, normalmente expresado
en píxeles. Esto facilita el diseño, sobre todo si está compuesto por
imágenes divididas en trozos que deben casar perfectamente, ya que
podemos posicionar todo de forma exacta. También nos permite controlar
el ancho de los elementos de texto, no creando columnas ni demasiado
largas ni demasiado pequeñas.
• Por contra, no aprovecha bien el espacio. Pensemos en una página de ancho
fijo, de 900px. Si un usuario la ve desde la pantalla de su teléfono móvil, que
tiene un ancho de 320px, la mayor parte de la página no quedará visible. En
cambio, si se ve desde un monitor panorámico de 24'', con 1920px de ancho,
la mayor parte del espacio estará desaprovechado.

16. Diseño líquido
• En el diseño líquido, en vez de unidades absolutas se utilizan relativas al
tamaño de la ventana. Esto hace que la página sea más flexible a los
distintos dispositivos de visualización.
• Por contra, es más difícil controlar el diseño, sobre todo si se basa en
muchas imágenes, porque hay que pensar en qué ocurre si la ventana es
muy pequeña o muy grande, y que no se descoloque todo al cambiar de
tamaño. También puede producir líneas de texto muy largas, lo que
incomoda la lectura. Aunque el usuario siempre tiene la opción de hacer más
pequeña su ventana.
• Para intentar controlar un poco el tamaño de los elementos, existen las
propiedades de estilo max-width (ancho máximo), min-width (ancho
mínimo), max-height (alto máximo) y min-height (alto mínimo).

17. Diseño elástico
• Últimamente, se ha acuñado el término "diseño elástico" para el diseño en
el que el tamaño de los objetos, no es ni fijo ni en relación al tamaño de la
ventana, si no al tamaño del texto (basado en em), dando al usuario la
posibilidad de cambiar su tamaño, y en proporción, el de todos los
elementos. Aunque permite que el texto se controle, sigue sin adaptarse a
las distintas ventanas, y resulta difícil controlar las imágenes.
• Actualmente, la mayoría de las páginas ofrecen un diseño fijo, sobre todo si
tienen un diseño más elaborado. Las que ofrecen un diseño más elástico,
suelen mostrar una columna central elástica, que se adapta a la pantalla, y
columnas con un ancho fijo, para menús o para la publicidad.