El documento describe los elementos fundamentales para el diseño y maquetación de un sitio web, incluyendo la determinación de contenidos, estructura y sistemas de navegación. Se explican conceptos como encabezados, menús, imágenes, colores y tipografía y cómo estos deben organizarse para lograr un diseño funcional y atractivo.

1. Planificación y
Maquetacion
Web
Mtro. Ernesto Silva Mendoza

2. Determinación de la
información del sitio web
• Definir contenidos
• Está comprobado que el recorrido visual que
realiza el visitante comienza por el extremo
superior izquierdo (donde es usual que
encontremos el logo) y luego se fija en el
centro de la página, donde está el contenido
principal.

3. Determinación de la
información del sitio web
• BARRA LATERAL O SIDEBAR.
• Este elemento gráfico sirve para organizar contenidos
importantes del sitio. Se puede ubicar a la derecha del
cuerpo principal, a la izquierda o en ambos lados.
• Contiene enlaces externos e internos, información
adicional organizada por categorías y, actualmente, se
utiliza también para incluir publicidades (banners,
links, etcétera).

4. Determinación
de la
información del
sitio web
• PIE DE PÁGINA O FOOTER
• Elementos relevantes, como enlaces, mapas de sitios (para ayudar a la indexación
en Google), información y formularios de contacto, y los infaltables links a las
redes sociales, que nos invitan a unirnos, compartir, ver perfiles y hasta visualizar
los últimos posts de Twitter.
Actualmente,
los footers son
algo más que un
buen cierre para
el sitio.
Su uso y
actualización
marca
tendencia.

5. Determinación
de la
información del
sitio web
Lo más frecuente es desarrollar un mapa
de contenidos, definiendo primero
factores fundamentales

6. Determinación de la
información del sitio web
• Dentro de los contenidos básicos de sitios de
empresas e instituciones podemos encontrar
secciones como mapa del sitio, formularios
de contacto, información personal o
institucional, novedades, buscador interno,
áreas para usuarios registrados, servicios y
productos, ayuda, historia, etc.

7. Definición de contenidos de un
sitio web
• De acuerdo con Luján (2002), el aspecto
posiblemente más importante de un sitio
web es su contenido, muy probablemente
un sitio web con un buen diseño, pero con
un contenido inadecuado tendrá pocas
probabilidades de triunfar, y, por el
contrario, un sitio web con un diseño
pobre, pero un contenido excelente podrá
triunfar con mayor facilidad.

8. Mtro. Ernesto Silva Mendoza
Grandes compañías
• ¿Quiénes somos?
• Información de contacto.
• Historia de la compañía.
• Objetivos.
• Cartera de clientes.
• Productos o servicios.
Periódicos
• Editorial.
• Noticias internacionales.
• Noticias nacionales.
• Deportes.
Centros educativos
• Personal.
• Profesores.
• Estudiantes.
• Planes de estudio.
Es necesario primero dar respuesta a algunas preguntas como las siguientes:
• ¿Cuál es el objetivo de este sitio web?
• ¿Qué información necesita tener para lograr el objetivo?
• ¿Cuál es la mejor manera de entregar esta información? (video, imagen, audio, folleto digital, etc.)
• ¿Quién es nuestro público objetivo?
• ¿Qué contenido tendrá?
• ¿Qué características debe tener? (galería de fotos, mapa de ubicación física, enlaces a redes sociales,
página de contacto, etc.)

9. Diseño de la
estructura
del sitio.
• Estructura se refiere a la forma que tendrá el sitio en sus secciones,
funciones y sistemas de navegación. En cambio, el diseño implica las
soluciones gráficas que se implementarán en el sitio, como los colores,
las formas, viñetas, etc.

10. Diseño de la
estructura del sitio.
LA FORMA DE NAVEGACIÓN
• Navegación sin clics:
• www.dontclick.it propone una navegación
sin clics.
• Navegación vertical:
• Todo el contenido se presenta en una sola
página, que se mueve hacia arriba o hacia
abajo según las opciones que vayamos
eligiendo.
• Navegación original:
• En http://doorstepdairy.com encontramos
que la navegación se realiza mediante el
movimiento de un elemento.

11. Diseño de la
estructura del sitio.
• LA FORMA DE NAVEGACIÓN
• Un usuario tiene la capacidad de predecir el sitio,
buscando de forma rápida lo que le interesa.
• Es importante mantener estándares de estructura para
darle una coherencia visual a la distribución del
contenido en todas las páginas

12. Diseño de la estructura
del sitio.
• Una representación de un blog normal.
En este ejemplo se puede claramente
identificar cada parte del diseño
considerado anteriormente
• 1. Cabecera
• 2. Barra de Navegación
• 3. Sección de Información Principal
• 4. Barra Lateral
• 5. El pie o la barra Institucional

13. Determinación de
elementos de los
sistemas de navegación
• ENCABEZADO O
HEADER
• El header es uno de
los aspectos
principales que
encontramos en un
sitio web, ya que es
lo primero que
vemos.

14. Determinación de
elementos de los sistemas
de navegación
• Elementos y aspectos visuales
• Logo: dentro del header se sitúa
el logotipo, es decir, la identidad
gráfica, el sello distintivo de una
empresa. está comprobado
mediante estudios que este es el
primer lugar donde los usuarios
dirigen su mirada.

15. Determinación de
elementos de los
sistemas de navegación
• Elementos y aspectos
visuales
• Menú: en el header
también
encontramos la barra
de navegación, que
contiene los enlaces
para acceder a las
diferentes secciones
del sitio

16. Determinación de
elementos de los sistemas
de navegación
• Elementos y aspectos visuales
• Menú de rastros: este menú es
recomendable en los sitios que
tienen muchas secciones y
subsecciones, ya que informa al
usuario su ubicación dentro del
sitio.
• Identificación de secciones: es
importante que el usuario sepa
en qué sección se encuentra y
que pueda identificarla de
inmediato.

17. Determinación de
elementos de los
sistemas de navegación
• Elementos y aspectos
visuales.
• Sliders: este recurso
interactivo ha ganado
terreno gracias a las
nuevas tendencias del
diseño 2.0.
• Buscadores internos: en
sitios grandes, estos
buscadores suelen
ubicarse arriba a la
derecha o en los
sidebars. Sirven para
encontrar de forma
rápida algo puntual.

18. Mtro. Ernesto Silva Mendoza

19. LAS IMÁGENES DIGITALES
• Dentro del mundo de Internet, un elemento vital
para el aspecto de un sitio es incluir en ellos
imágenes en diferentes formatos
• La correcta selección y edición de las imágenes
digitales que vamos a incluir en nuestro sitio será
fundamental para que éste posea un contenido
visual acorde con el mensaje que se desea
transmitir y que, a la vez, sea atractivo para el
usuario fin
Mtro. Ernesto Silva Mendoza

20. EL DISEÑO Y LA WEB
• El diseño puede definirse como la tarea o el arte de
seleccionar, crear, ordenar y combinar diferentes
elementos dentro de un mismo espacio para lograr un
objeto visual único que exprese una idea o concepto.
• Gráficos vectoriales
• Los mapas de bits
• Los formatos
• Los colores en la Web
Mtro. Ernesto Silva Mendoza

21. Gráficos
vectoriales
• imagen digital que esté definida por
trazos computarizados, es decir,
mediante elementos gráficos (líneas,
puntos, figuras geométricas, etc.)
• Un gráfico vectorial (a diferencia de su
formato contrastante, el mapa de bits),
puede ser escalado, rotado y deformado
sin que esto dañe su definición y calidad
Mtro. Ernesto Silva Mendoza

22. Los mapas
de bits
• Los mapas de bits, o gráficos rasterizados, son
imágenes que están definidas por medio de
milimétricos puntos (píxeles), cada uno de
ellos con un valor de color y luminosidad
determinada, que se ubican dentro de una
cuadrícula que representa a la totalidad de la
imagen.
Mtro. Ernesto Silva Mendoza

23. Formatos de Imagen
• GIF (Graphics
Interchange
Format): Sus
características
principales son la
incorporación de
transparencias y
la animación.
Mtro. Ernesto Silva Mendoza
• BMP (Bitmap):
Suele tener un
gran tamaño, una
desventaja es que
no es
multiplataforma,
ya que sólo es
compatible con
PC y MAC OS.
• JPEG o JPG (Joint
Photographic
Experts Group):
Formato estándar
por excelencia de
las páginas web.

24. Formatos de Imagen
• SWF (Shockwave
Flash): Formato de
salida de gráficos y
animaciones
vectoriales
(Macromedia Flash).
<son el resultado de
los archivos fuente
(FLA) de esta
aplicación>.
Mtro. Ernesto Silva Mendoza
• PNG (Portable
Network Graphics): se
trata de un formato de
mapa de bits simple y
de alta compresión.
Soporta la
transparencia (mucha
mejor calidad, ya una
paleta de colores de 48
bits).
• SVG (Scalable Vector
Graphics): Formato
vectorial primero de
ellos en proponer la
compatibilidad con
HTML, almacenando el
sistema de vectores
mediante un sistema
de etiquetas propio.

25. La resolución
• Es el tamaño relativo de un
componente visual digital.
Mtro. Ernesto Silva Mendoza
 En el contexto de las imágenes digitales,
la resolución puede englobar varios
conceptos, como la resolución de
archivo digital, la resolución de
impresión, resolución de digitalización,
resolución de semitono, etc., pero el
primero de estos conceptos es el más
ligado a lo que normalmente se
denomina resolución, y está definido
por el número de píxeles diferentes con
los que cuenta una imagen por unidad
de longitud.

26. Los colores en la Web
• Dos componentes fundamentales: colores y la tipografía que conformen el sitio.
• Formato del color
• Las computadoras manejan tres colores básicos denominados primarios y, a partir de ellos,
se elaboran todas las tonalidades restantes. RGB (Red-Green-Blue) la composición de otros
tonos se realiza mediante la combinación de los píxeles que representan a cada color básico.

27. La tipografía
• Factor que hay que tener en cuenta
para el diseño visual.
• Es el formato gráfico que tendrán las
fuentes de nuestras páginas, es decir,
la forma física de las letras.
• XHTML reconoce algunos
formatos de familias
tipográficas.
Mtro. Ernesto Silva Mendoza

28. Fondos texturas web
• Los atractivos más típicos en cualquier diseño es la utilización de
texturas para darle profundidad y dinamismo a un fondo.
• Al momento de diseñar un sitio web, es importante utilizar elementos
que optimicen la velocidad.
• Texturas de fondo gratis:
http://www.webtexture.net/
http://www.patterns.ava7.com/
http://www.dinpattern.com/
http://www.pattern8.com/
Mtro. Ernesto Silva Mendoza

29. Maquetación Web
Mtro.
Ernesto
Silva
Mendoza
• Consiste en tomar el diseño y la arquitectura de
un sitio web y convertirlo en código para el
programador. Esta es una profesión muy
demandada que requiere de conocimientos de
varias disciplinas, como estilos CSS, HTML, etc.
• La maquetación, también llamada a veces
diagramación, es un oficio del diseño editorial
que se encarga de organizar en un espacio,
contenidos escritos, visuales y en algunos casos
audiovisuales (multimedia) en medios impresos y
electrónicos, como libros, diarios y revistas.

30. Proceso
Mtro.
Ernesto
Silva
Mendoza
• El proceso de maquetación web es la transformación del
diseño de un producto web en un conjunto de archivos
(html, css, js) 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, css y
js (estándares web) para que los navegadores puedan
interpretarlo correctamente.

31. Los
estándares
mas utilizados
son:
Mtro. Ernesto Silva Mendoza
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.

32. Para agrupar los elementos que forman cada zona o
división de la página se utiliza la etiqueta <div>
Mtro.
Ernesto
Silva
Mendoza
Los nombres más comunes, y sus equivalentes en inglés, se muestran a continuación:
• contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la página y se
emplea para definir las características básicas de la página: su anchura, sus bordes,
imágenes laterales, si se centra o no respecto de la ventana del navegador, etc.
• cabecera (header) que incluye todos los elementos invariantes de la parte superior de la
página (logotipo, imagen o banner, cuadro de búsqueda superior, etc.)
• contenido (content) engloba el contenido principal del sitio (la zona de noticias, la zona
de artículos, la zona de productos, etc. dependiendo del tipo de sitio web)
• menu (menu) se emplea para agrupar todos los elementos del menú lateral de
navegación de la página
• pie (footer) que incluye todos los elementos invariantes de la parte inferior de la página
(aviso de copyright, política de privacidad, términos de uso, etc.)
• lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y
secundarias de la página.

33. Ejemplo de
página
compleja
estructurada
con etiquetas
div.
Mtro.
Ernesto
Silva
Mendoza

34. Maquetacion 1: Diseño a 2 columnas con cabecera
y pie de página

35. Maquetacion 2: Diseño a 3 columnas con cabecera
y pie de página

36. Ejemplos de Maquetacion Web

37. Ejemplos de Maquetacion Web

38. Bibliografía
CREACIÓN DE SITIOS WEB, Pablo Vázquez, Manuales USERS.
Enciclopédia de Características (2017). "Página Web".
Recuperado de: https://www.caracteristicas.co/pagina-web/
Hugo Delgado. (2018). Elementos básicos de un sitio Web y
sus partes. 08/02/2019, de Akus.net Diseño Web Sitio web:
https://disenowebakus.net/elementos-de-un-sitio-web.php
Luján, S. (2002). Programación de aplicaciones web: historia,
principios básicos y clientes web. Editorial Club Universitario
Mtro. Ernesto Silva Mendoza