ACTIVIDAD DE APRENDIZAJE

Mapa de Navegación GA5-220501095-AA1-EV05

Dirman Yermey Garcia garcia

Instructor(a)

NOMBRE DEL INSTRUCTOR(A)

Camilo Alfonzo salamanca

Ficha - 2721425

SERVICIO NACIONAL DE APRENDIZAJE – SENA

Centro de Gestión Administrativa

Fecha 06/12/2023´

PÁG. 3
 Introducción:

La maquetación web es un proceso crucial en el desarrollo de páginas web. Consiste en la creación

de una estructura visual y funcional que permite presentar el contenido de manera atractiva y
organizada para los usuarios. Una correcta maquetación garantiza una mejor experiencia de
navegación, facilita la comprensión del contenido y mejora la usabilidad del sitio web.

La maquetación web se realiza utilizando diferentes programas de desarrollo de software que

permiten la creación de interfaces gráficas interactivas y funcionales. Algunos de los programas más
utilizados son Adobe Photoshop, Adobe Illustrator, Sketch, Figma, entre otros. Estas herramientas
proporcionan una amplia variedad de funcionalidades y opciones de diseño para crear maquetas
web de manera eficiente y profesional.

Durante el proceso de maquetación, se definen y estructuran los elementos visuales de una página
web, como la disposición de los bloques de contenido, los colores, las tipografías, las imágenes y
los espacios en blanco. Además, se incorporan elementos interactivos, como botones, menús
desplegables, formularios, entre otros, que permiten la navegación y la interacción del usuario con
el sitio.

La maquetación también es fundamental para garantizar la adaptabilidad y la respuesta del sitio web
en diferentes dispositivos y tamaños de pantalla. Con la creciente popularidad de los dispositivos
móviles, es vital crear páginas web responsivas, que se ajusten de manera automática y fluida a
diferentes resoluciones y orientaciones de pantalla.

En resumen, la maquetación web es esencial para crear sitios web atractivos, funcionales y fáciles
de usar. Permite presentar el contenido de manera organizada y agradable a la vista, facilitando la
navegación y la comprensión de los usuarios. Utilizando programas de desarrollo de software,
podemos crear maquetas web eficientes y adaptables a los diferentes dispositivos, brindando una
experiencia de usuario óptima.

¿Que es la maquetación en la web?

PÁG. 4
La maquetación en la web es el proceso de diseñar y organizar visualmente el contenido de una
página web. Consiste en crear la estructura, la disposición y el aspecto de los elementos que
conforman una página, como textos, imágenes, videos, formularios, enlaces, etc. La maquetación
se lleva a cabo utilizando lenguajes de marcado, especialmente HTML, que define la estructura
básica y los elementos de la página.

El objetivo principal de la maquetación web es presentar la información de manera ordenada y

atractiva para el usuario, facilitando la navegación y la comprensión del contenido. Al maquetar una
página web, es importante tener en cuenta aspectos como la jerarquía de la información, la
legibilidad del texto, el contraste de colores, la utilización de imágenes y otros elementos multimedia,
la consistencia visual entre las diferentes secciones y la adaptabilidad a diferentes tamaños de
pantalla.

La maquetación web no solo se basa en la disposición visual de los elementos, sino que también
implica la organización lógica del contenido. Esto se logra mediante la estructura de la página, que
se define utilizando etiquetas y atributos HTML. Por ejemplo, se utilizan encabezados (etiquetas
<h1> a <h6>) para resaltar los títulos, párrafos (etiqueta <p>) para mostrar el texto, imágenes
(etiqueta <img>) para incluir gráficos, enlaces (etiqueta <a>) para crear hipervínculos, entre otros.

Además de HTML, en la maquetación web se suelen utilizar otros lenguajes de programación

complementarios como CSS (Cascading Style Sheets), que permite controlar el estilo y la apariencia
de los elementos y facilita la consistencia visual en toda la página, y JavaScript, que se utiliza para
hacer la página interactiva y dinámica.

En resumen, la maquetación web implica diseñar y organizar visualmente el contenido de una página
web utilizando lenguajes de marcado como HTML, con el objetivo de crear una experiencia
agradable y accesible para los usuarios. Es un proceso esencial para la creación de páginas web
efectivas y atractivas.

PÁG. 5
1. ¿Qué es CSS y para qué sirve?

CSS, siglas de Cascading Style Sheets (Hojas de estilo en cascada), es un lenguaje de marcado
utilizado para describir el aspecto y el formato de un documento escrito en HTML o XML. Sirve para
separar la estructura y contenido de un documento web de su presentación visual. Permite
especificar cómo deben aparecer los elementos HTML, como colores, fuentes, tamaños, márgenes,
etc.

2. ¿Qué es la maquetación de una página web?

La maquetación web se refiere al proceso de estructurar y organizar visualmente los elementos de

una página web. Implica determinar la ubicación, tamaño y apariencia de los elementos como textos,
imágenes, botones, formularios, etc.

3. Características de la maquetación web:

- Responsiva: se adapta a diferentes dispositivos y resoluciones de pantalla.

- Accesible: se diseña considerando la usabilidad para todos los usuarios, incluyendo aquellos con
discapacidades.

- Intuitiva: es fácil de usar y navegar para los usuarios.

- Coherente: mantiene un estilo y diseño uniforme en todas las páginas del sitio web.

4. ¿Qué es una navegación simple?

Una navegación simple es un elemento de la interfaz de usuario en una página web que permite a
los usuarios moverse y acceder a diferentes secciones de la página o a otras páginas del sitio web.
Se basa en un diseño sencillo y proporciona opciones de navegación claras y fácilmente
identificables.

PÁG. 6
5. ¿Qué es un orden jerárquico en la maquetación?

El orden jerárquico en la maquetación web se refiere a la forma en que se estructuran y se organizan

los elementos visuales en una página. Se basa en la importancia y relación de los elementos entre
sí. Los elementos más importantes y relevantes se colocan en posiciones visuales destacadas,
mientras que los elementos menos relevantes se colocan en lugares menos prominentes.

6. ¿Qué son CTAs?

CTA es la sigla de Call To Action (Llamada a la Acción). Un CTA es un elemento visual, como un
botón o un enlace, que invita al usuario a realizar una acción específica en una página web. Puede
ser, por ejemplo, "Comprar ahora", "Suscribirse", "Descargar", etc. Su objetivo es motivar y guiar al
usuario hacia una acción deseada.

7. La importancia de la maquetación web radica en:

- Mejorar la estructura y organización visual de la página para facilitar la experiencia del usuario.

- Resaltar la identidad y el estilo visual de la marca o empresa.

- Optimizar la navegación y la usabilidad del sitio web.

- Adaptarse a diferentes dispositivos y resoluciones de pantalla.

- Mejorar el posicionamiento en los motores de búsqueda al utilizar una estructura semántica

adecuada.

8. Tipos de maquetación web:

PÁG. 7
- Maquetación estática: el diseño visual de la página es fijo y no cambia.

- Maquetación fluida: el diseño se adapta al tamaño de la ventana del navegador.

- Maquetación responsiva: el diseño se adapta a diferentes dispositivos y resoluciones de pantalla.

9. Estructura de la maquetación web:

La estructura de la maquetación web se compone de varios elementos: encabezado (header),

navegación (navbar), contenido principal (main content), barra lateral (sidebar) (opcional), pie de
página (footer), entre otros. Estos elementos se organizan y se ubican de acuerdo a la jerarquía
visual y a los criterios de navegación adecuados para una mejor experiencia del usuario.

Las herramientas más efectivas para maquetación web son:

1. HTML (HyperText Markup Language): Es el lenguaje de marcado estándar utilizado para

estructurar y presentar el contenido en la web. Permite definir la estructura de una página web
mediante etiquetas.

2. CSS (Cascading Style Sheets): Es un lenguaje de estilos utilizado para controlar la apariencia y
el diseño de una página web. Con CSS, se puede definir el color, la fuente, el tamaño, el espaciado,
el diseño de las páginas y mucho más.

3. Bootstrap: Es un framework de CSS desarrollado por Twitter. Proporciona una serie de estilos
predefinidos y componentes listos para usar que facilitan la maquetación web y hacen que las
páginas sean responsivas y amigables para dispositivos móviles.

PÁG. 8
4. Adobe XD: Es una herramienta de diseño y prototipado de interfaces de usuario. Permite crear
maquetas interactivas para web y aplicaciones móviles, y proporciona herramientas de diseño y
visualización muy útiles para diseñadores y desarrolladores.

5. Figma: Es una herramienta de diseño colaborativa basada en la nube. Permite crear y compartir
diseños de interfaces de usuario, así como realizar prototipos interactivos. También permite la
colaboración en tiempo real, lo que facilita el trabajo en equipo.

6. Sketch: Es una aplicación de diseño vectorial desarrollada exclusivamente para macOS. Es muy
utilizada por diseñadores para crear diseños de interfaces de usuario web y móviles. Proporciona
herramientas intuitivas y gran cantidad de recursos y complementos.

JavaScript ?

es un lenguaje de programación que se utiliza ampliamente en el desarrollo web. Permite la

interacción dinámica con las páginas web, mejorando la experiencia del usuario y añadiendo
funcionalidades interactivas. Con JavaScript, es posible manipular el contenido HTML, crear
animaciones, validar formularios, realizar solicitudes a servidores y mucho más. Es un lenguaje
interpretado por el navegador y es compatible con todos los principales navegadores web.

MAQUETACION

PÁG. 9
1. PASO UNO DAR CLIK EN IDEET SOLUCIONES PAGINA WIX

2. DESPUES DAR EN CONTACTO

3. CORPORATIVO
4. USUARIO
5. CONTACTO

1. CLIENTE DA EN CONTACTO
2. INGRESA SUS DATOS
3. ESPERA QUE DESPLIEGUE UNA BURBUJA DE CHAT

PÁG. 10
1. DEPLIEGA UN CHAT PARA INTERACTUAR CON EL USURIO EN MAQUETACION

PÁG. 11
2. SEGUIDO A ESO ENVIA NOTIFICACION AL CORREO

PÁG. 12
 1. MENSAJE DIRECTAMENTE DESDE LA PAGINA WEB ASIA EL CORREO DEL CLIENTE
CON NOTIFICACION Y UN FORMULARIO DE RESPUESTA

Interfaz corporativo dela empresa

PÁG. 13
2. CLIENTE TERNINA SU PROCESO DE CONTACTARNOS
3. VE LOS HORARIOS DE RECEPCION DEL REQUIPO
4. Y TERNINA EL PROCESO

PÁG. 14
5. LA MAQUETACION VUELVE AL PRINCIPIO PARA DAR UNA NUEVA COTIZACION YA SEA
AL USUARIO O CORPORSATIVO DE LA EMPRESA

PÁG. 15
programa realizado por plataforma WIX

1. PAGINA VUELVE AL PRINCIPIO DE COMO SE VE CUANDO LA BUSCAN POR LA URL

IDEET SOLUCIONES
2. Inicio
3. Muestra la interfaz gráfica de
4. Quienes somos

PÁG. 16
 5. Que opinan nuestros clientes
6. Servicio técnico
7. Venta de equipos móviles
8. Venta de accesorios
9. Tramites y garantías
10. Contacto
11. Nuevamente inicia el servicio dando solo un clic

ser

MAQUETACIÓN

Interfaz usuario

PÁG. 17
PÁG. 18
Maquetación datos a ingresar

PÁG. 19
maquetación de interfaz de comunicación de
usuario

interfaz correo del cliente

PÁG. 20
PÁG. 21
Interfaz corporativo

PÁG. 22
Interfaz contáctanos

PÁG. 23
Interfaz gráfica maquetación cotización

Maquetación página de servicio

PÁG. 24
Conclusión

PÁG. 25
En conclusión, la maquetación en una página web sirve para dar forma y estructura a la
información que se presenta en ella. Es un proceso fundamental para asegurar una correcta
visualización y navegación por parte de los usuarios.

La maquetación permite organizar el contenido de manera lógica y coherente, facilitando la

comprensión de la información y mejorando la experiencia del usuario. Esto se logra
mediante el uso de elementos como encabezados, párrafos, listas, imágenes, entre otros,
que son distribuidos de forma adecuada en la página.

Además, la maquetación garantiza la adaptabilidad de la página web a distintos dispositivos

y tamaños de pantalla. Con el uso de técnicas de maquetación responsiva, se puede
asegurar una correcta visualización en dispositivos móviles, tabletas y ordenadores,
brindando así una experiencia óptima sin importar el dispositivo utilizado.

La maquetación también tiene un impacto en el rendimiento y la optimización de una página

web. Al utilizar una estructura bien definida y elementos optimizados, se pueden reducir los
tiempos de carga y mejorar la velocidad de navegación. Esto resulta en una página más
eficiente, atrayendo a los usuarios y favoreciendo su permanencia en el sitio.

En resumen, la maquetación en una página web es esencial para organizar y presentar la

información de manera efectiva, garantizar una correcta visualización en diferentes
dispositivos, mejorar la experiencia de usuario y optimizar el rendimiento de la página. Es un
proceso integral en el desarrollo de una página web exitosa y funcional.

PÁG. 26