INTITUTO TECNOLOGICO DE IGUALA

“MAQUETACION DE PAGINAS WEB”

INTEGRANTES:
YAZMIN JAIMES CARRANZA
YARIZBETH LUNA CASTREJON
MIRIAM MORENO ARROYO
INGENIERIA EN INFORMATICA
¿QUÉ ES LA MAQUETACIÓN DE UNA PÁGINA WEB?

La maquetación o también llamada diagramación de una página web es

quizás la parte más importante del proceso de diseño de una página
web, esta etapa del diseño es realizado por los diseñadores a cargo del
proyecto y suele ser crucial para el éxito del proyecto.
Estrictamente el proceso de maquetar, sólo se refiere al acto de
estructurar la página web, distribuir y organizar los elementos y los
espacios de la página. sin embargo, este proceso se mejora cuando la
maquetación se convierte en una pre-visualización del sitio web, es
decir, además de estructurar y organizar los elementos, también se elige
una paleta de colores, y se diseña ya sea en papel o en algún editor
gráfico la visión final del sitio web
PORQUE ES IMPORTANTE LA MAQUETACIÓN WEB
La principal importancia de la maquetación de un sitio web, es el hecho
de organizar y pre-visualizar la futura página, tener un mapa de cómo
debemos hacer el trabajo, donde colocar los elementos, los colores y el
tipo de programación se usará.
PORQUE ES IMPORTANTE LA MAQUETACIÓN WEB

Se debe trabajar cada proyecto siguiendo el proceso completo de

diseño y tomamos especial importancia en la maquetación y pre-
visualización de la página web, como resultado tenemos un sitio web
armonioso, homogéneo y con una sola idea de diseño.
Realizar bocetos (wireframe)

Se recomienda elaborar los bocetos antes

de comenzar a maquetar, para que
tengas una idea clara sobre la distribución
de elementos como: la cabecera, el menú
de navegación, los titulares, párrafos,
imágenes, banners de publicidad,etc

Además así te ahorras malos entendidos

con el clientes, porque en el boceto está
la estructura del diseño.
EMPLEAR PALETA DE COLORES

Como todo diseño que debe ser bonito, atractivo y que cause una buena
impresión, para eso los colores deben contrastar, pero no te preocupes
si nunca has visto este tema, aquí te presento algunas paletas de
colores que te ayudarán con la combinación de los colores para tu sitio
web.
 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).
 
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.
La forma de organizar el contenido de la página
web también posee una gran importancia, lo mejor
en este caso es apostar por la sencillez y la lógica.
de nada sirve contar con un diseño bonito si luego los
clientes potenciales no saben llegar al contenido que
buscan, por eso es importante que todos los
contenidos sean de fácil acceso.

En este sentido no es nada recomendable cargar el

sitio web de numerosos menús y sub-menús, ni
tampoco añadir diversas cajas de búsqueda y
botones por todos los sitios.

La apariencia del sitio web tiene que ser limpia y

sencilla y todas las páginas y secciones deben
contar con una función específica.
Es importante que todas las páginas del sitio web sigan una misma
línea, es decir, que utilicen los mismos colores, las mismas tipografías, el
menú se muestre siempre igual y en el mismo sitio…etc. el cambiar la
apariencia de una página a otra del mismo sitio web da sensación de
desorden, además de que puede volver al usuario un poco loco, incluso
puede llegar a pensar que está en distintos sitios web.
HAY QUE TENER EN CUENTA UN CONJUNTO DE ELEMENTOS
DESDE SU DISEÑO E IMPLEMENTACIÓN PARA QUE
FELIZMENTE ESTO OCURRA.

Los elementos fundamentales son:

*Claridad en los objetivos del sitio.

*Información básica correspondiente al contenido.

*Selección de un nombre de dominio correcto.

*Selección de la tecnología para el diseño y la programación.

*Selección adecuada de un alojamiento web (hosting)

Claridad de los buscadores, directorios de internet y el seo, 
optimización para los motores de búsqueda.

Realización de un diseño en función de los requerimientos del sitio y de los

usuarios.

La navegabilidad.

Realización de la programación en determinación de los requerimientos del

sitio y de los usuarios.

Aplicación de técnicas de seo para lograr una mayor visibilidad en internet.

Actualizar los contenidos periódicamente.

CÓMO DEBEMOS PLANIFICAR EL PROCESO DE
MAQUETACIÓN WEB

Estructura una retícula (visible o invisible) capaz de mostrar los contenidos

de la web: 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.
LOS ESTÁNDARES MAS UTILIZADOS SON:

html/xhtml: para generar el código del contenido.

css: para definir la presentación gráfica de la maquetación.

js (javascript): para mejorar la interacción de sus elementos.

CONCLUSIÓN.

Es muy importante llevar una maquetación antes de diseñar nuestra pagina web ya
que con esta nos realiza una visualización a futuro de como quedara nuestra
pagina.