Cargando



Introducción a la maquetación Web

La maquetación o diagramación se encarga de organizar en un espacio, los contenidos escritos, visuales y audiovisuales en medios impresos y electrónicos, como son los libros, diarios y revistas.


sep 25 2014 13:12
Avanzado
sep 25 2014 13:13
La maquetación se relaciona con la distribución de los elementos en un espacio determinado de la página, en cambio el diseño editorial incluye otros elementos que van desde el proyecto gráfico, hasta los procesos de producción llamados también de preparación para impresión. Sin embargo a este proceso se lo conoce como maquetación.

Para comenzar a maquetar una Web es necesario contar con 3 programas como es el caso de PhotoShop, Fireworks y Dreamweaver. A su vez es fundamental contar con algún conocimiento previo de código HTML. HTML describe la estructura y contenido de un sitio en forma de texto. Los elementos en HTML se componen por una etiqueta inicial, y una etiqueta final, entre medio de ellas se coloca un contenido.

maquetacion.jpg


Cuando el contenido multimedia se empezó a usar masivamente en la web, apareció en código HMTL 5 para facilitar esta inclusión. El HTML5 presenta las siguientes características.
  • No ser de manos privadas
  • Flexible
  • Estandares usados
Antes de comenzar a trabajar con la maquetación el diseñador debe haber trabajado con un proyecto en donde plasma las necesidades de sus clientes:

maquetacion4.jpg


A continuación se abrirá el programa PhotoShop (PSD) para poder ver el proyecto:

maquetacion5.jpg


A continuación se van a empezar a analizar los elementos comunes, es decir organizar la página como grupos.
Se puede apreciar que el cuerpo de la página va a ser el total del proyecto en donde a continuación se van a empezar a agrupar los distintos elementos, por ejemplo: dentro del contenido se puede agrupar en una capa los dos logos que se hallan en la parte superior:

maquetacion6.jpg


Una vez que se ha analizado el proyecto base en PhotoShop se comenzará a trabajar con Fireworks:
Se abre el proyecto con Fireworks:

maquetacion7.jpg


Con la herramienta división de Fireworks se van a comenzar a encuadrar cada uno de ls elementos del diseño:

maquetacion8.jpg


Una vez que se han realizado las divisiones de los elementos, se selección de manera conjunta y se exportan como HTML e imágenes. De esta manera se van a generar archivos para cada una de las divisiones.

maquetacion9.jpg


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X