SERVICIO NACIONAL

DE APRENDIZAJE
FICHA TECNICA. 2626997

Maquetación de la interfaz gráfica

en HTML

INSTRUCTOR.
FRANCISCO ARNALDO VARGAS BERMÚDEZ

APRENDICES.
LEIDY FERNANDA MUÑOZ MONTENEGRO
JUAN CARLOS LÓPEZ MEJÍA
LUIS EDUARDO ACEVEDO SARMIENTO
ZULEY CASTELLANOS PACHECO
 MAQUETACIÓN WEB
La maquetación web consiste en transformar el diseño de una web en
un conjunto de archivos (html, css y js) para que los navegadores web
puedan interpretarlos y reproducirlos correctamente en diferentes
dispositivos. La maquetación es una fase avanzada del proceso de
desarrollo web.

QUE ES HTML
Es el código que se utiliza para estructurar la base de la mayoría de
las páginas web y sus contenidos. Este estándar sirve de referencia
del software que interactúa con la elaboración de páginas web, para la
presentación de contenido de una página web, que incluye texto,
imágenes, videos, juegos, entre otros elementos y es adoptado por
todos los navegadores actuales.

1
QUÉ ES JAVASCRIPT
JavaScript es un lenguaje de programación que los desarrolladores
utilizan para hacer páginas web interactivas. Desde actualizar fuentes
de redes sociales a mostrar animaciones y mapas interactivos, las
funciones de JavaScript pueden mejorar la experiencia del usuario de
un sitio web. Como lenguaje de scripting del lado del servidor, se trata
de una de las principales tecnologías de la World Wide Web. Por
ejemplo, al navegar por Internet, en cualquier momento en el que vea
un carrusel de imágenes, un menú desplegable “click-to-show” (clic
para mostrar), o cambien de manera dinámica los elementos de color
en una página web.

QUE ES CSS
Se trata de una tecnología utilizada para dotar de cualidades visuales
y estéticas a una página web. Las siglas CSS (Cascading Style
Sheets) significan “Hojas de estilo en cascada” y parten de un
concepto simple pero muy potente: aplicar estilos (colores, formas,

2
márgenes, etc...) a uno o varios documentos (generalmente
documentos HTML, páginas webs) de forma automática y masiva.

¿Qué es la maquetación en web?

La maquetación web es el proceso de diseño y creación de un sitio
web. Se ocupa de la estructura del sitio, la disposición de los
elementos y la forma en que se presenta el contenido. La maquetación
es importante porque ayuda a los usuarios a comprender mejor el
contenido de un sitio web y navegar de manera eficiente.

La maquetación web es la forma en que se organiza y representa el

contenido de un sitio web. La maquetación web afecta directamente la
usabilidad, la estética y la experiencia de un usuario al navegar por un
sitio web.
La maquetación de un sitio web debe hacerse de una manera que sea
funcional y atractiva para el usuario.
Debe ser lo suficientemente flexible para permitir que el contenido se
adapte a diferentes dispositivos y pantallas. También debe ser lo
suficientemente estable para que el sitio se cargue rápidamente y sin
errores.

3
EXISTEN DIFERENTES TIPOS DE MAQUETACIÓN WEB TALES
COMO:

1. Maquetación web estática

En primer lugar encontramos la maquetación web estática más común.
Se trata de una operación en la que se marca e inserta información
estructural dentro del HTML sin cargar ningún script en operaciones
adicionales. Es decir, sin recursos externos.
No obstante, las modificaciones son mucho más costosas, tanto
financieras y en términos de coste en el desarrollo como el
levantamiento del servidor, y suelen requerir modificaciones en los
archivos HTML fuente e incluso cambios por parte del administrador
de servidores.

2. Maquetación web con plantillas

El principal beneficio de maquetar web con plantillas es que permite a
los diseñadores web crear sitios web de aspecto profesional sin tener
que invertir mucho tiempo o esfuerzo. Las plantillas web están
diseñadas por expertos y ofrecen un aspecto atractivo y moderno, lo
que permite que los sitios web creados con ellas se destaquen de la
competencia.
Además, las plantillas web suelen estar disponibles en una gran
variedad de estilos y temáticas, por lo que es fácil encontrar una que
se adapte a las necesidades de cualquier sitio web.

3. Maquetación web dinámica

El dinamismo web es uno de los puntos álgidos del desarrollo actual.
Se puede definir como una modificación estructural de modo global
que puede navegarse a ejecutar desde cualquier dispositivo.
Para ello, se utilizan las llamadas a las bases de datos SQL y las
utilidades de operaciones externas de php de la Intranet de PHP.

4
4. Hibrida
Si la maquetación web estática y dinámica presenta algunos
inconvenientes, esta otra intenta mezclar los puntos fuertes de ambas
y reducir las impurezas de las mismas.

En la maquetación híbrida se mezclan las operaciones para cargar un

código selectivo, sobre todo para la ejecución particular en sistemas
Smartphones.

5. Maquetación en cuadrícula
La maquetación en cuadrícula se basa en un sistema de rejilla para
organizar el contenido en una página web. Cada elemento de
contenido se coloca en una celda de la rejilla y se organiza de forma
estructurada. Esta es una de las maquetaciones más utilizadas en el
diseño web y permite un diseño limpio y ordenado.

6. Maquetación fluida o diseño responsive

La maquetación fluida o diseño responsive se adapta al tamaño de
pantalla del dispositivo en el que se está visualizando el sitio web. Esto
significa que el sitio web se redimensionará automáticamente para
adaptarse a cualquier pantalla, ya sea un ordenador de sobremesa, un
portátil o un dispositivo móvil.
Este tipo de maquetación es muy útil si vas a utilizar el sitio web en
diferentes dispositivos.

7. Maquetación fija
La maquetación fija se refiere a un diseño de página web en el que los
elementos se colocan en posiciones fijas en la pantalla.

5
Esto significa que, independientemente del tamaño de la pantalla en la
que se visualice el sitio web, los elementos se verán siempre en el
mismo lugar.

CARACTERISTICAS DE MAQUETACIÓN WEB

Continuación, presentaremos las características esenciales de la
maquetación web, explicadas de forma clara y concisa:

Responsividad: La maqueta web debe adaptarse a diferentes

dispositivos y tamaños de pantalla, garantizando una experiencia
óptima tanto en ordenadores de escritorio como en dispositivos
móviles. Esto se logra mediante el uso de técnicas como media
queries y grids, que permiten ajustar el diseño según las necesidades
específicas de cada dispositivo.

Usabilidad: Una maqueta web debe ser intuitiva y fácil de navegar.

Los elementos de navegación, como menús y enlaces, deben estar

6
ubicados estratégicamente para que los usuarios puedan acceder al
contenido de manera rápida y sencilla. Además, se deben tener en
cuenta los principios de diseño de interacción para crear una
experiencia agradable y satisfactoria para el usuario.

Accesibilidad: Es importante que la maqueta web sea accesible para

todas las personas, incluyendo aquellas con discapacidades visuales o
auditivas. Esto implica utilizar técnicas como etiquetas ALT en
imágenes, textos descriptivos en enlaces y compatibilidad con lectores
de pantalla. Además, se deben seguir estándares de accesibilidad
como las pautas WCAG (Web Content Accessibility Guidelines) para
asegurar que el sitio sea usable por todos los usuarios.

Rendimiento: Una maqueta web eficiente debe cargar rápidamente y

ser optimizada para un rendimiento óptimo. Esto implica minimizar el
tamaño de los archivos, como imágenes y scripts, y utilizar técnicas de
compresión y caché para reducir los tiempos de carga. Además, se
deben seguir buenas prácticas de programación para garantizar un
código limpio y eficiente.

Compatibilidad con navegadores: La maqueta web debe ser

compatible con diferentes navegadores web, como Google Chrome,
Mozilla Firefox, Safari e Internet Explorer. Esto implica realizar pruebas
exhaustivas en cada navegador para asegurarse de que el diseño se
vea correctamente y que todas las funcionalidades se comporten
como se espera.

Flexibilidad: Una maqueta web flexible permite realizar cambios y

ajustes de manera fácil y rápida. Esto implica utilizar técnicas como el
uso de hojas de estilo en cascada (CSS) para separar la presentación
visual del contenido, lo que facilita la modificación de estilos sin afectar
la estructura del sitio.

7
Optimización para motores de búsqueda: Una maqueta web bien
optimizada para los motores de búsqueda contribuye a mejorar su
visibilidad en los resultados de búsqueda. Esto implica utilizar técnicas
de SEO (Search Engine Optimization) como la optimización de
metadatos, el uso adecuado de palabras clave y la creación de URL
amigables

¿Cuál es la estructura de la maquetación web?

La maquetación web se refiere al proceso de diseñar la estructura
visual de una página web, incluyendo la disposición de elementos
como texto, imágenes, videos y otros elementos multimedia. La
estructura de la maquetación web generalmente sigue un patrón
común que incluye los siguientes elementos
Encabezado (Header):
En esta sección se suelen incluir el logotipo y el nombre de la empresa
o sitio web, así como también el menú de navegación principal.

8
Barra lateral (Sidebar):
Es opcional y se coloca a un lado de la página, generalmente en el
lado izquierdo o derecho. Aquí se pueden incluir enlaces de
navegación adicionales, widgets, publicidad u otra información
relevante.

Contenido principal (Main Content):

Esta es la sección principal de la página donde se presenta el
contenido más importante. Puede incluir texto, imágenes, videos,
formularios, listas, etc.

Pie de página (Footer):

Al final de la página, se encuentra el pie de página que suele contener
información adicional, como enlaces de contacto, términos y
condiciones, políticas de privacidad, enlaces a redes sociales y
créditos del sitio.

Elementos de navegación y estructura:

Además de los elementos específicos mencionados anteriormente, la
maquetación web también implica la organización y disposición de
elementos de navegación como menús, botones, enlaces y
breadcrumbs (migas de pan) para guiar a los usuarios a través del
sitio.

Diseño adaptable (Responsive Design):

En la actualidad, es esencial que la maquetación web sea adaptable y
compatible con diferentes dispositivos y tamaños de pantalla. Esto
implica el uso de técnicas como diseño responsivo y media queries

9
para garantizar que el sitio se vea bien y sea fácil de usar en
dispositivos móviles, tabletas y computadoras de escritorio.

La estructura de la maquetación web puede variar dependiendo de las

necesidades y preferencias específicas de diseño de cada proyecto,
así como también de las tendencias actuales de diseño web. Sin
embargo, estos elementos comunes proporcionan una base sólida
para crear una experiencia de usuario coherente y efectiva en
cualquier sitio web.

Herramientas de software para la elaboración de las maquetas

Bootstrap: es un framework CSS y Javascript diseñado para la

creación de interfaces limpias y con un diseño responsive. Además,
ofrece un amplio abanico de herramientas y funciones, de manera que
los usuarios pueden crear prácticamente cualquier tipo de sitio web
haciendo uso de los mismos.

10
Tailwind CSS: es un framework de CSS de código abierto para el
diseño de páginas web. La principal característica de esta biblioteca es
que, a diferencia de otras como Bootstrap, no genera una serie de
clases predefinidas para elementos como botones o tablas. En su
lugar, crea una lista de clases CSS "de utilidad" que se pueden usar
para dar estilos individuales a cada elemento.

11
Foundation: es un framework de interfaz de usuario responsive.
Foundation proporciona una cuadrícula responsive e incluye
componentes de interfaz de usuario HTML y CSS, plantillas, y
fragmentos de código, incluyendo tipografía, formularios, botones,
barras de navegación y otros componentes de interfaz usuario, así
como extensiones de JavaScript opcionales. Foundation está
mantenida por zurb.com y es un proyecto de código abierto.

12