MAPA DE SITIO Y

WIREFRAMES
XOCHITL CLEMENTE PARRA
 MAPA DE SITIO (SITEMAP)
Estructura de enlaces de
páginas web que definirá la
navegación de un sitio web.

Empezando por la página de

Inicio hasta la página de
contacto, todo sitio web debe
tener un mapa para que la
navegación del usuario web sea
lo más fácil posible.
 CLASES DE SITEMAPS

Los dos sitemap más conocidos son: de página (de texto o html) y en
formato xml.

El sitemap de página suele ser una página web que incluye todos los
links o enlaces  estructurados del sitio web.

Un sitemap en formato xml se usa como herramienta de

posicionamiento web para facilitar la rápida inclusión  de esas
páginas en el índice de los motores de búsqueda como Google.
Mapa de sitio de página
Mapa de sitio XML
Crear y usar un archivo sitemap.txt
Se puede emplear un simple archivo de texto plano en el que solo aparezcan listadas las direcciones
URL de las páginas del sitio que se desea indexar, por ejemplo:

http://sitio/pagina1.html

http://sitio/pagina2.html

http://sitio/directorio/pagina3.html

El archivo debe nombrarse sitemap.txt, se sitúa en la raíz del sitio y se envía a los buscadores, con
eso bastará.

Siempre se debe tener presente en la creación de los archivos sitemap.txt:

• Debe especificarse siempre una dirección URL absoluta.

• El archivo de texto creado debe guardarse usando la codificación UTF-8.

• Solo deben aparecer el archivo las direcciones URL.

WIREFRAMES
 WIREFRAME
Es un boceto donde se representa
visualmente, de una forma muy sencilla y
esquemática la estructura de una página
web.

El objetivo es definir el contenido y la

posición de los diversos bloques de tu
web. Esto incluye menús de navegación,
bloques de contenido, etc…

En los wireframes no se utilizan ni colores, ni

tipografías ni cualquier elemento gráfico. Lo
importante es centrarse en la funcionalidad
del sitio y la experiencia del usuario. La
prioridad son los contenidos de la web.
 VENTAJAS

Rápidos y baratos de crear

Detectar y corregir los problemas

antes

Mejoras sencillas

Mejor usabilidad
MAQUETADO CON GRID
 QUE ES
A grid can create a basic
structure, a skeleton for your
design. They consist of
“invisible” lines upon which your
design elements can be placed.
Doing so ties them together in an
overall “system” and supports
your composition—rationally. 
 COMO LO HAGO
Definir el tamaño de la grid depende de
la resolución que se adopte para la
realización del sitio web
 QUE GRID UTILIZO

• Pueden tener varios tamaños

• Las más utilizadas se basan en una

resolución 960px
 Columnas
Unidad: Pixeles

Margen Canaleta
• http://webdesdecero.com/wireframes-que-son-y-como-crearlos/

• http://www.raincreativelab.com/paperbrowser/#download-templates

• https://www.uxpin.com/studio/ui-design/what-is-a-wireframe-
designing-your-ux-backbone/

• https://webdesign.tutsplus.com/articles/a-comprehensive-
introduction-to-grids-in-web-design--cms-26521