MAQUETACIÓN DE LA INTERFAZ GRÁFICA EN HTML

GA5-220501095-AA1-EV04

DEYQUER HANS MEDINA

APRENDIZ

HECTOR OSWALDO JEREZ DUARTE

INSTRUCTOR

PROGRAMA: ANÁLISIS Y DESARROLLO DE SOFTWARE

FICHA: 2977368
2024
 INTRODUCCIÓN

La maquetación o diagramación web se refiere a transformar un diseño gráfico en una

interfaz funcional en términos de programación que entienda un navegador o
dispositivo específico.

La maquetación web es el proceso de dar forma y estructura visual al contenido de una

página web, lo que incluye la disposición de elementos como texto, imágenes y
botones, así como la definición de estilos y diseño. La maquetación web no solo influye
en la apariencia del sitio, sino que también desempeña un papel crucial en la
experiencia del usuario, la accesibilidad, el rendimiento y el éxito en los motores de
búsqueda. En esta guía, exploraremos los conceptos clave, las herramientas
esenciales y las mejores prácticas en maquetación web.
 MAQUETACIÓN WEB

En la era digital actual, donde la presencia en línea es fundamental para empresas,

profesionales y creativos, la maquetación web se ha convertido en una pieza clave para
el éxito de cualquier sitio web. La maquetación web no solo implica el diseño visual de
una página, sino también su estructura y organización, lo que impacta directamente en la
experiencia del usuario y la funcionalidad del sitio.

La maquetación web es el proceso de diseñar y crear la estructura visual de una página

web, Implica la disposición y el diseño de elementos como textos, imágenes, botones y
otros elementos gráficos en una página web para que se vean y funcionen de manera
coherente y atractiva en un navegador web, la maquetación web se centra en aspectos
como la disposición de los elementos en la página, la tipografía, los colores, los
espacios en blanco y la organización general de la información.

Para llevar a cabo la maquetación web, los diseñadores y desarrolladores suelen utilizar
lenguajes de marcado como HTML (HyperText Markup Language) y CSS (Cascading
Style Sheets), el HTML se utiliza para estructurar el contenido de la página web,
mientras que la CSS se utiliza para definir cómo se verán esos elementos en términos
de diseño, colores, fuentes y disposición en la pantalla.

La maquetación web es una parte esencial del proceso de desarrollo web, ya que afecta
directamente a la experiencia del usuario y a la apariencia visual de un sitio web. Un
buen diseño de maquetación web debe ser fácil de leer, navegar y utilizar, además de
ser atractivo estéticamente. Los diseñadores web suelen trabajar en colaboración con
los desarrolladores web para asegurarse de que la maquetación se traduzca de manera
efectiva en un sitio web funcional y atractivo para los visitantes.
 CONCEPTOS DE LA MAQUETACIÓN WEB

La maquetación web implica una serie de conceptos clave que los diseñadores y
desarrolladores web deben entender y aplicar para crear sitios web efectivos y
atractivos:

 HTML (HYPERTEXT MARKUP LANGUAGE)

HTML es el lenguaje de marcado utilizado para estructurar el contenido de una página

web. Define los elementos como encabezados, párrafos, listas, imágenes, enlaces,
formularios y más.

 CSS (CASCADING STYLE SHEETS)

CSS se utiliza para controlar la presentación y el diseño de los elementos HTML.

Define aspectos visuales como colores, fuentes, márgenes, espaciado y disposición en
la página.

 DISEÑO RESPONSIVO

El diseño web responsive implica crear sitios web que se adapten y se vean bien en
una variedad de dispositivos y tamaños de pantalla, como computadoras de escritorio,
tabletas y teléfonos móviles.

 GRID LAYOUT

La cuadrícula de diseño es una técnica que utiliza CSS para organizar los elementos
en filas y columnas, lo que facilita la creación de diseños consistentes y alineados.
 FLEXBOX

Flexbox es un modelo de diseño en CSS que permite organizar y alinear elementos en

un contenedor de manera más eficiente y flexible que los modelos tradicionales de
diseño.

 TIPOGRAFÍA

La elección de fuentes y su estilo (negrita, cursiva, tamaño) es crucial para la

legibilidad y el aspecto general de la página web.

 COLORES

La paleta de colores utilizada en un sitio web influye en su identidad visual y en la

forma en que los visitantes perciben la marca. El uso de colores adecuados puede
transmitir emociones y mensajes específicos.

Azul claro

Blanco líneas negras

Gris lateral blanco

 IMÁGENES Y MULTIMEDIA

La selección y optimización de imágenes y otros medios es esencial para el

rendimiento de la página web. La etiqueta `<img>` de HTML se utiliza para insertar
imágenes.
  ENLACES (HIPERVÍNCULOS)

Los enlaces permiten la navegación dentro de un sitio web y la vinculación a otras

páginas web. Se crean con la etiqueta `<a>` en HTML.

 ACCESIBILIDAD WEB

La accesibilidad web se refiere a hacer que un sitio web sea usable para personas con
discapacidades. Esto incluye la implementación de etiquetas alt para imágenes, el uso
de marcado semántico y el cumplimiento de pautas de accesibilidad.

 FRAMEWORKS Y BIBLIOTECAS

Se pueden utilizar frameworks y bibliotecas de CSS como Bootstrap, Foundation o

Materialize para acelerar el proceso de maquetación y garantizar la coherencia en el
diseño.

 PROTOTIPADO

Antes de comenzar la maquetación completa, es común crear prototipos de diseño

para planificar la estructura y la apariencia general del sitio web.

REQUISITOS DEL CLIENTE

De acuerdo a las investigaciones el cliente desea una sistema realmente elementa pero
completo, que visualmente sea llamativo y cuente con la facilidad de compresión .

Otra de los requisitos del cliente es que su acceso sea cómodo y con oportunidad de
muestra de error en caso de no seguir la ruta requerida por el sistema.

 Facilidad en el registro

 Comodidad visual

 Fácil comprensión

 Economía en funcionamiento
 LAS CARACTERÍSTICAS DE LA MAQUETACIÓN WEB

Se refieren a las propiedades y aspectos específicos que definen la forma en que se

estructura y presenta el contenido en una página web:

1. Estructura Jerárquica

La maquetación web se basa en una estructura jerárquica que organiza el contenido

en diferentes niveles de importancia. Esto se logra mediante el uso de encabezados
(h1, h2, h3, etc.) y párrafos para crear una jerarquía de información.

2. División en Secciones

Las páginas web se dividen en secciones lógicas y coherentes, como encabezado,

navegación, contenido principal, barra lateral y pie de página. Esto facilita la
comprensión y la navegación para los usuarios.

3. Flujo de Contenido

La maquetación web controla cómo fluye el contenido en la página, asegurando que

sea fácil de leer y seguir. Se utiliza una combinación de elementos HTML y CSS para
lograr un flujo visualmente agradable.

4. Espacios en Blanco

El uso de espacios en blanco adecuados mejora la legibilidad y el aspecto general de

la página. Los márgenes, el espaciado entre párrafos y el espaciado entre elementos
son importantes para esto.

5. Diseño Responsivo

Una característica fundamental es la capacidad de adaptarse a diferentes tamaños de

pantalla y dispositivos. La maquetación web debe ser responsive para que el sitio sea
accesible en computadoras de escritorio, tabletas y dispositivos móviles.
6. Consistencia Visual

Mantener una consistencia en el diseño, como colores, fuentes y estilos, en todo el sitio
web ayuda a construir una marca sólida y proporciona una experiencia coherente para
los usuarios.

7. Navegación Intuitiva

Los elementos de navegación, como menús y enlaces, deben estar claramente visibles
y organizados de manera lógica para que los visitantes puedan moverse fácilmente por
el sitio.

8. Accesibilidad

La maquetación web debe ser accesible para personas con discapacidades. Esto
incluye la implementación de etiquetas alt para imágenes, el uso de marcado
semántico y el cumplimiento de pautas de accesibilidad.

9. Optimización para Motores de Búsqueda (SEO)

Se deben utilizar prácticas de SEO en la maquetación para mejorar la visibilidad del

sitio web en los motores de búsqueda. Esto incluye la optimización de etiquetas meta,
URL legibles y contenido de calidad.

10. Carga Rápida

La optimización de la maquetación y de los recursos como imágenes y scripts es

esencial para garantizar una carga rápida de la página, lo que mejora la experiencia del
usuario y el posicionamiento en buscadores.

11. Seguridad

Se deben tomar medidas para proteger la maquetación web contra vulnerabilidades de

seguridad, como ataques de inyección de código o ataques de CSRF (Cross-Site
Request Forgery).
TIPOS DE MAQUETACIÓN WEB

1. Maquetación web fija

Este tipo de maquetación web es considerado como uno de los más flexibles para
diseñar una página web, ya que te permite saber cómo aparecerá el sitio online en
diferentes navegadores web.

2. Maquetación web elástica

Es más utilizado para diseñar y estructurar los elementos de una página web, debido a
la forma en que se puede modificar para satisfacer las necesidades del contenido, de
hecho, ha generado buena aceptación dentro de la comunidad del diseño y
maquetación web por su capacidad para escalar contenido, tamaños de texto, etc. A
diferencia de la maquetación web fija, los diseños elásticos funcionan mejor cuando el
contenido flexible (como los bloques de texto) ocupa el primer lugar.

3. 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í).

4. Maquetación web híbrida

la maquetación web híbrida, se destaca, como su nombre lo dice, por combinar lo

mejor de todos los estilos, básicamente, este tipo de maquetación web garantiza que el
diseño web se adapte a la ventana gráfica de cualquier navegador, para así mantener
cierto control sobre los contenidos del sitio.
 ESTRUCTURA DE LA MAQUETACIÓN WEB

Es importante que conozcas la estructura de la maquetación web, pues, sin ella, una
página, literalmente, no tiene ni pies ni cabeza. Se podría decir que 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">.

Cabe señalar que una estructura de maquetación web con etiquetas HTML5 toma forma
gracias al código CSS

.
¿QUÉ ES HTML?

Es importante que saber que hablar de una página web es hablar de HTML
necesariamente. Se trata de un término con el que debes estar eternamente
familiarizado, si queremos dedicarnos a la programación. HTML son las siglas de
Hyper Text Markup Language, lo que, traducido al español, significa lenguaje de
marcas de hipertexto. En términos simples, el HTML es un lenguaje que nos permitirá
crear la estructura de nuestra página web a través de etiquetas.

Saber cómo funciona el HTML, grosso modo, es relativamente sencillo. Estas etiquetas
son fragmentos de texto que se incluyen entre los signos "<>". Por ejemplo: '<body>' o
'<head>'. Básicamente, en medio de estos signos, va una palabra que le da un
significado a la etiqueta, de manera que la estructura de un documento pueda,
posteriormente, ser leída y renderizada por un navegador, como Google Chrome, por
ejemplo.

¿QUÉ ES CSS Y PARA QUÉ SIRVE?

Tras la aparición de la primera versión en 1993, el lenguaje HTML fue evolucionando

hasta convertirse en un estándar o lo que hoy en día conocemos como HTML5, el cual
tiene características mucho más robustas, como el audio, video, gráficos SVG y la
adaptación a distintos dispositivos.

Todo esto fue posible gracias a las hojas de estilo en cascada o CSS por sus siglas, El
código CSS es utilizado para organizar la presentación y el aspecto de cualquier página
web; es decir, el CSS definirá cómo van a lucir los elementos de un documento HTML.
Digamos que el HTML es todo el esqueleto de una página web, mientras que el código
CSS es la capa que definirá su aspecto final. Como ejemplo, podríamos poner a las
etiquetas <H1>. Gracias al CSS, este texto podrá cambiar su apariencia (tamaño, color,
fuente) sin alterar el contenido base HTML.

Este código es el responsable de facilitar el trabajo a los desarrolladores front-end y

también de mejorar el rendimiento de cualquier página web debido a que se inserta una
menor cantidad de etiquetas HTML.
ALGUNAS HERRAMIENTAS PARA LA MAQUETACIÓN WEB

Existen diversas herramientas y programas que los diseñadores y desarrolladores web

utilizan para llevar a cabo la maquetación web, estas herramientas van desde editores
de código hasta aplicaciones de diseño visual, algunas de las más populares
herramientas de la maquetación web son:

1. EDITORES DE CÓDIGO

1.1. Visual Studio Code (VSCode)

Un editor de código gratuito y altamente personalizable con soporte para una amplia
gama de lenguajes de programación y extensiones.

1.2. Sublime Text

Un editor de texto ligero y rápido que es ampliamente utilizado por desarrolladores web
debido a su velocidad y facilidad de uso.

1.3. Atom

Un editor de código de código abierto desarrollado por GitHub con una comunidad activa
y una amplia variedad de extensiones disponibles.

1.4. Brackets

Un editor de código de código abierto diseñado específicamente para maquetación web,

con funciones de previsualización en vivo y extensiones.

2. EDITORES VISUALES Y DE DISEÑO

2.1. Adobe Dreamweaver

Una herramienta de diseño web visual que combina la edición de código y las vistas
previas en vivo.

2.2. Sketch

Una aplicación de diseño vectorial ampliamente utilizada por diseñadores de interfaces

de usuario y experiencia de usuario (UI/UX).

2.3. Figma

Una herramienta de diseño colaborativo basada en la nube que permite a los equipos
de diseño trabajar juntos en tiempo real.
 3. FRAMEWORKS CSS

3.1. Bootstrap

Uno de los frameworks CSS más populares que proporciona un conjunto de estilos y
componentes predefinidos para acelerar la maquetación.

3.2. Foundation

Otro framework CSS que ofrece una base sólida para la maquetación web responsive y
adaptable.

3.3. Bulma

Un framework CSS ligero basado en flexbox que facilita la creación de diseños flexibles.

DISEÑO GRAFICO

El diseño gráfico es una disciplina que combina arte, comunicación y tecnología para
crear soluciones visuales y comunicativas. Consiste en la creación y organización de
elementos como imágenes, tipografías, colores y formas, con el objetivo de transmitir un
mensaje de manera efectiva y estética.

El diseño gráfico se aplica en distintos ámbitos como el diseño de logotipos, diseño

editorial, diseño de publicidad, diseño web, entre otros. A través de principios y técnicas
estéticas, el diseñador gráfico busca comunicar de manera clara, impactante y
visualmente atractiva, estableciendo una conexión entre el emisor y el receptor.

Es una herramienta fundamental en la actualidad, especialmente en el ámbito digital,

donde la imagen juega un papel crucial en la captación de la atención de los usuarios y
en la construcción de la identidad de una marca.
DISEÑO GRÁFICO SEGÚN AUTORES

1. Steve Heller y Seymour Chwast

Según Heller y Seymour, "el diseño gráfico es el arte y la habilidad de combinar texto e
imágenes en anuncios, revistas, libros, carteles, etiquetas y muchas otras formas de
comunicación visual".

2. Ellen Lupton

Para Lupton, "el diseño gráfico es el arte de organizar y dar forma a las imágenes y al
texto para comunicar visualmente un mensaje".

3. Milton Glaser

Uno de los diseñadores gráficos más conocidos, define el diseño gráfico como "La
habilidad de crear y desarrollar ideas visuales que comuniquen de manera efectiva
información, emociones, valores y estética".

4. Adrian Shaughnessy

Según Shaughnessy, "El diseño gráfico es la práctica de hacer visible el contenido. Es

una disciplina visual que crea significado y valor a través de la creación de formas,
imágenes y palabras".

5. Jorge Frascara

Según este autor, “el diseño gráfico tiene como objetivo transmitir un mensaje específico
a un público determinado, con una intención y una función clara”.
 CONCLUSIONES

La maquetación web es un elemento esencial en el desarrollo de sitios web exitosos,

su importancia radica en su capacidad para influir en la apariencia, la funcionalidad y la
experiencia del usuario en un sitio web sin poseemos una maquetación bien diseñada
y optimizada contribuiremos a una navegación intuitiva y la accesibilidad, rendimiento y
el posicionamiento en los motores de búsqueda. Además, facilita el mantenimiento y la
escalabilidad del sitio, lo que es crucial en un entorno web en constante cambio.