Evidencia de producto: GA5-220501095-AA1-EV04 – Maquetación de la

interfaz gráfica en HTML

Sara Bata

Maria rios

Heidy Nocua

Johan Banquez

Cesar García

Facultad de Ingenierías, Servicio Nacional De Aprendizaje (Sena)

Tecnólogo En Análisis Y Desarrollo De Software

Morales

26 de noviembre de 2022
Introducción ......................................................................................................................................... 2
Contexto ............................................................................................................................................... 2
Solución ................................................................................................................................................ 4
Maquetación Web ........................................................................................................................... 4
Conceptos De La Maquetación Web................................................................................................ 5
Las características De La Maquetación Web ................................................................................... 5
Tiene Fácil Navegación. ................................................................................................................ 6
Sigue El Orden Jerárquico ............................................................................................................ 6
Incluye CTAs ................................................................................................................................. 6
Tipos De Maquetación Web............................................................................................................. 6
¿Qué es HTML? ................................................................................................................................ 9
¿Qué Es CSS Y Para Qué Sirve? ........................................................................................................ 9
Algunas Herramientas Para Maquetación Web .............................................................................. 9
Conclusión .......................................................................................................................................... 11
Referencias ......................................................................................................................................... 11
 Introducción

En el vertiginoso mundo digital actual, la creación de páginas electrónicas se ha

convertido en un proceso fundamental para transmitir información de manera efectiva y

atractiva. Esta actividad implica la meticulosa definición de la composición de texto,

formas, colores, tamaños, imágenes, animaciones y videos mediante el uso del lenguaje

HTML. Estos elementos, cuidadosamente maquetados, constituyen la esencia de

aplicaciones web que deben adaptarse a diversos dispositivos para ofrecer una experiencia

fluida. Para abordar este desafío, es crucial comprender conceptos fundamentales,

considerar las necesidades del cliente y manejar herramientas avanzadas, desde lenguajes

como HTML, CSS y JavaScript hasta el diseño gráfico y estrategias de marketing digital.

Este proceso de maquetación no solo es técnico, sino también una expresión artística que

busca cautivar a la audiencia digital.

Contexto

Esta actividad consiste en la definición de la composición de texto, formas, colores,

tamaños, imágenes,

Animaciones, videos de las páginas electrónicas en lenguaje HTML que conforman

en su conjunto una aplicación

 Web proyectando también los dispositivos en donde se van a visualizar esos

elementos.

Aspectos a tener en cuenta:

• Estudiar detenidamente los conceptos y características definidas en el

componente formativo.

• Contar con los requisitos del cliente.

• Describir el concepto de maquetación.

• Contar, preferiblemente, con conocimientos en lenguaje HTML, CSS

y JavaScript.

• Tener conocimientos en diseño gráfico.

• Preferiblemente contar con conocimientos en marketing digital.

 • Manejar herramientas de software para la elaboración de las

maquetas. Se recomienda utilizar framework

• Front end como Bootstrap, Tailwind CSS o Foundation.

Solución

Maquetación Web

El diseño de un sitio web es el proceso de planificación, conceptualización y

organización del contenido de un sitio web, lo que significa que garantiza que el texto, las

imágenes, los videos y cualquier otro contenido que desee agregar al sitio web estén

estructurados para brindar una buena experiencia de usuario. Experiencia.

Para comprender completamente qué es el diseño de un sitio web, es necesario

comprender que va más allá de la estética y se centra en la funcionalidad general del sitio

web, teniendo en cuenta la arquitectura de la información. Aunque también incluye el

desarrollo de aplicaciones web y móviles así como el diseño de interfaces de usuario.

Entonces, ¿a qué nos referimos cuando hablamos de diseño y disposición de sitios

web? En otras palabras, podemos decir que el concepto de diseño de un sitio web se refiere
a la fase de estructura detallada de los componentes individuales del sitio web, que tiene

lugar antes de la fase de programación.

Conceptos De La Maquetación Web

La maquetación web se refiere al proceso de estructurar y diseñar la apariencia

visual de una página web. Involucra la utilización de lenguajes como HTML (Hypertext

Markup Language) para definir la estructura de la página, CSS (Cascading Style Sheets)

para establecer el estilo y diseño, y a veces JavaScript para añadir interactividad. La

maquetación web es esencial para lograr una presentación coherente y atractiva de la

información en un sitio web.

Las características De La Maquetación Web

Tiene Fácil Navegación.

Para aprender a diseñar un sitio web, primero debe saber que el proceso tiene como

objetivo proporcionar a los usuarios una navegación rápida e intuitiva. Por este motivo, no

se pueden ocultar botones, enlaces y otros elementos que los usuarios necesitan encontrar

para realizar una acción. De hecho, cuantos menos clics, mejor. Recuerde que si los

usuarios tienen dificultades para navegar, probablemente abandonarán su sitio.

Sigue El Orden Jerárquico

Esta característica en el diseño de un sitio web tiene como objetivo ayudar a los

usuarios a realizar una acción específica desde el momento en que ingresan al sitio web.

Para lograrlo, es importante colocar imágenes, menús y fuentes de manera estratégica.

 Incluye CTAs

Finalmente, esta característica de la maquetación web pretende marcar un antes y un

después en la efectividad de tu página.

Si con el orden jerárquico le sugerimos al usuario el rumbo que debe seguir para

navegar en nuestra página, con una llamada a la acción (CTA) nos aseguramos de que

realiza una acción en particular, por ejemplo, una compra.

Tipos De Maquetación Web

Diseño De Red Fijo

Este tipo de diseño de sitio web se considera uno de los más flexibles cuando se

trata de diseño de sitios web porque le permite saber cómo se verá su sitio web en

diferentes navegadores web.

De hecho, se ha vuelto muy popular entre los sitios web que prefieren una

optimización del diseño predecible.

Diseño De Red Flexible

Este es uno de los tipos de diseños de sitios web más utilizados para diseñar y

estructurar elementos del sitio web porque puede modificarse según sus necesidades de

contenido. De hecho, ha recibido mucho reconocimiento en la comunidad de diseño y

maquetación web por su capacidad para escalar contenido, tamaño de texto y más. A

diferencia de los diseños de sitios fijos, los diseños flexibles funcionan mejor cuando el

contenido flexible es lo primero (por ejemplo, un bloque .text).

 Maquetación Web Escalado

Se trata de un tipo de maquetación web que permite ajustar la orientación de una

página web, especialmente en dispositivos móviles.

Dependiendo de la forma en que se sostenga el dispositivo, este tipo de maquetación

web tiene el potencial de modificar la orientación visual (alterando la cantidad de espacio

que se le da al contenido en sí).

Maquetación Web Híbrida

Por supuesto, al mencionar todos estos tipos de maquetación web, no podemos

olvidar mencionar el más popular de todos: la maquetación web híbrida, la cual se destaca,

como su nombre lo dice, por combinar lo mejor de todos los estilos.

Estructura De La Maquetación Web

Una página web tiene una estructura básica, la cual está conformada por las

siguientes etiquetas:

Cabecera (<header>)

Menú principal (<nav>)

Cuerpo (<body>)

Pie de página (<footer>)

 Ahora, si hay que hablar específicamente de una estructura de maquetación web

HTML5, se le agregan algunas secciones como:

Títulos y subtítulos (<hgroup>)

Contenido principal del documento (<main>)

Contenido (<article>)

Sección del documento (<section>)

Menús secundarios (<aside>)

Foto y leyenda (<figure> y <figcaption>)

Detalles adicionales y sumario (<details> y <summary>)

También, existe una estructura de maquetación web tradicional, la cual estaba

delimitada por etiquetas <div>. Es posible combinar ambas estructuras debido a que

algunos navegadores podrían no reconocer las nuevas etiquetas. Si ponemos un ejemplo, la

etiqueta <header>, con una estructura combinada, sería <div id=”header”>.

¿Qué es HTML?

HTML (Lenguaje de Marcado de Hipertexto) es un estándar que se utiliza para la

creación y el diseño de páginas web. Permite estructurar el contenido de una página

mediante etiquetas, las cuales definen diferentes elementos como encabezados, párrafos,

enlaces, imágenes, entre otros. HTML trabaja en conjunto con CSS (Hojas de Estilo en

Cascada) y JavaScript para dar estilo e interactividad a las páginas web.

 ¿Qué Es CSS Y Para Qué Sirve?

CSS, que significa “Cascading Style Sheets” (Hojas de estilo en cascada), es un

lenguaje de diseño utilizado para controlar la presentación y el formato de un documento

HTML. Sirve para aplicar estilos a elementos HTML, como colores, fuentes, márgenes,

tamaños y posicionamiento, permitiendo así definir el aspecto visual y la disposición de los

elementos en una página web. En resumen, CSS separa la estructura y el contenido de un

documento HTML de su estilo, lo que facilita la creación de sitios web atractivos y bien

organizados.

Algunas Herramientas Para Maquetación Web

HTML KickStart

HTML KickStart es un framework con soporte para HTML 5, CSS y JavaScript,

que contiene una amplia variedad de librerías orientadas a facilitar el trabajo de desarrollo y

diseño web.

Es muy fácil de usar, solo requiere descargar las librerías de la página web, guardar

los archivos en las carpetas respectivas y realizar un enlazado desde la cabecera del sitio

para que puedas acceder a sus muchas facilidades.

Cuenta con múltiples diseños de botones, menús, tablas, tipografías, íconos y más.

Es una herramienta de código abierto y gratuita con la que podrás crear páginas web

atractivas y funcionales en poco tiempo.

 Bootstrap

Bootstrap es una herramienta creada para desarrollar páginas web adaptativas, es

decir que se ajustan a cualquier dispositivo. Este framework combina HTML, CSS y

JavaScript para dar toda la interactividad que un sitio web requiere en la actualidad.

W3.CSS

W3.CSS es un framework CSS que le dará forma y estilo a tu web en poco tiempo.

Podrás crear botones, formularios, tarjetas, barras de navegación, incluir imágenes y mucho

más de forma sencilla.

Skeleton

Skeleton es uno de los frameworks más simples, ideal si quieres realizar un

maquetado rápido. Podrás realizar tablas, cambiar tipografías, botones, casillas de

verificación, listas y muchos otros recursos que darán un aspecto agradable a tu web.

Conclusión

En conclusión, la maquetación de páginas web no solo se limita a la disposición

técnica de elementos visuales, sino que es una amalgama de creatividad y funcionalidad. La

comprensión detallada de c0onceptos, la atención a las especificaciones del cliente y la

aplicación de conocimientos en diseño gráfico son esenciales para lograr un producto final

que destaque en el vasto panorama digital. La familiaridad con herramientas de software y

el uso de frameworks front end como Bootstrap, Tailwind CSS o Foundation potencian la

eficiencia en el desarrollo. En este viaje hacia la creación de experiencias web cautivadoras,

la sinergia entre técnica y estética se convierte en la clave para el éxito, brindando no solo

funcionalidad, sino también una estética visualmente impactante y adaptada a las demandas

del mercado actual.

Referencias

ANDREA FLORES (17/ABR/2022) ¿QUÉ ES LA MAQUETACIÓN WEB? FUTURE OF PEOPLE

https://www.crehana.com/blog/transformacion-digital/que-es-maquetacion-web/

5 HERRAMIENTAS PARA LA MAQUETACIÓN WEB (28/NOV/2023) TUTORIALES WEB

https://www.dongee.com/tutoriales/maquetacion-de-paginas-web/