Tp N° 2 -AAT Diseño preliminar de un sitio web- Wideframes Mapa del sitio

Materia Adaptación al ambiente de trabajo

 
Tp N° 2 -  Diseño preliminar de un sitio web

 

                                                Photo by rawpixel on Unsplash

1. ¿Qué es un sitio web?

Un sitio web es un conjunto de páginas relacionadas entre sí que se publican en Internet. Cada página puede contener texto, imágenes, videos, enlaces y otros elementos interactivos.

2. El proceso de diseño web

Antes de comenzar a programar un sitio, se debe planificar y diseñar. Esto implica varias etapas:

a) Definir el tema y los objetivos

Primero, se elige un tema de interés personal (por ejemplo: música, videojuegos, deportes, cocina, viajes, moda, etc.) y se define qué se quiere lograr con el sitio:

• ¿Qué información quiero mostrar?

• ¿A quién está dirigido (público objetivo)?

• ¿Qué tipo de contenido tendrá?

b) Analizar sitios de referencia

Es importante observar otros sitios de la misma temática para:

• Inspirarse en su diseño.

• Analizar qué funciona bien y qué podría mejorarse.

• Entender cómo organizan la información.

De cada sitio se pueden listar aspectos positivos y negativos, como:

• Positivos: colores agradables, buena organización, fácil de navegar.

• Negativos: textos difíciles de leer, muchos anuncios, diseño confuso.

3. Wireframes (bocetos del sitio)

Un wireframe es un dibujo simple del diseño de una página web.
Sirve para planificar la estructura del contenido antes de pasar al diseño digital.

🔹 Se puede hacer a mano en papel, usando cuadros y líneas para representar:

• Encabezado (header)

• Menú de navegación

• Cuerpo o contenido principal

• Imágenes

• Pie de página (footer)

🔹 No se dibujan colores ni decoraciones, solo la distribución de los elementos.

4 ¿Qué es un mapa del sitio?

Un mapa del sitio (o sitemap) es un esquema que muestra cómo están organizadas todas las páginas de un sitio web.

Es como un árbol o diagrama que ayuda a ver la estructura del sitio antes de empezar a diseñarlo o programarlo.

Explicado de forma simple:

Un sitio web se organiza como una estructura jerárquica:

• Inicio (Home): es la página principal
• Desde ahí se accede a otras páginas
• Algunas páginas pueden tener subpáginas

Ejemplo de mapa del sitio:

Inicio
├── Sobre mí
├── Servicios
│ ├── Diseño web
│ ├── Desarrollo
├── Blog
│ ├── Artículo 1
│ ├── Artículo 2
└── Contacto

¿Para qué sirve?

• Organizar las ideas antes de diseñar
• Evitar páginas desordenadas
• Pensar cómo va a navegar el usuario
• Planificar mejor el sitio web

 

 

Ejercicios:

Al ser esta una materia de Nivel Secundario no tiene como objetivo adentranse en toda la teoría formal sobre desarrollo web, pero si dar nociones previas necesarias para un curso introductorio.

En este práctico se busca que se pueda realizar un bosquejo de un sitio web a elección, teniendo como referencias otros sitios de temáticas similares.


Desarrollar


1 Describir sus intereses personales

2- Elegir el tema del sitio web a diseñar de entre los intereses nombrados en el punto anterior. Escribir un breve párrafo explicando por qué eligió ese tema y qué lo hace interesante.

3- Segun el tema elegido , indicar  5 sitios de internet que se puedan tomar como referencia para el trabajo. Visitar los sitios y listar tres aspectos positivos y tres negativos de cada uno.

4- Wireframes a mano. Hacer bocetos en papel con las posibles estructuras del sitio (mínimo 10 secciones)

5 Dibujar el mapa del sitio completo, incluir al menos un camino que incluya dos niveles 

6 Crear un wideframe en Figma y subir la captura de pantalla

Nota: tener encuenta que el tema elegido no se podrá cambiar en el transcurso del año y que las modificaciones que surjan deberan actualizarce en toda la documentación