MAQUETACIÓN

WEB
T A B L A S C L A S E S Y M E N U S

E Q U I P O 4
 INTRODUCCIÓN AL
TEMA....
¿QUE ES LA 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.
 es el proceso de planificación,
conceptualización y organización de
contenido de una página web, es decir,
asegura que los textos, las imágenes, los
vídeos, como todo lo que quieras añadir a
una página web, están estructurados para
crear una buena experiencia de usuario.
En palabras simples, la efectividad de una
página web depende en gran parte de una
buena maquetación web.
 ¿CUAL ES LA IMPORTANCIA DE LA
MAQUETACIÓN WEB?

Una buena maquetación web

mantiene a los usuarios en el sitio
porque hace que la información sea
fácilmente accesible e intuitiva de
encontrar. Recuerda que un mal
diseño puede hacer que los usuarios
no encuentren lo que buscan y
abandonen la página.
 Además, la importancia del diseño y la
maquetación web impacta directamente en
el tiempo que el usuario se queda en tu
página web. Dicho de otra manera, existe
una fuerte relación entre la maquetación
web y la participación de los usuarios en el
sitio.
 TABLAS EN LA
MAQUETACIÓN WEB
Al crear un sitio web seguramente habrá
ocasiones en las que necesites incluir
datos de forma visual para que resulten
más fáciles de leerse o comprenderse.
Para esto, uno de los métodos que
puedes utilizar en el diseño web son las
tablas HTML.
 Las tablas HTML son elementos dentro del
diseño web que permiten a los
desarrolladores web organizar datos
como texto, imágenes y enlaces en filas y
columnas.
Dentro del lenguaje de diseño web, las
tablas HTML se crean usando las etiquetas
<table> y </table>.
En ella se incluyen dos etiquetas
importantes: <tr>, que es para crear filas
de tablas y <td>, para crear celdas de
datos. Todo lo que esté dentro de ambas
etiquetas es el contenido de la celda de
la tabla.
 El Lenguaje de Marcado de Hipertexto
(HTML) es el código que se utiliza para
estructurar y desplegar una página web y
sus contenido.

¿Que es HTML no es un lenguaje de programación; es

HTML? un lenguaje de marcado que define la
estructura de tu contenido. HTML consiste en
una serie de elementos que usarás para
encerrar diferentes partes del contenido para
que se vean o comporten de una determinada
manera.
Clases de maquetación
web.
2. Maquetación web
1. Maquetación web fija:
elástica: Es de los tipos de
Este tipo de maquetación
maquetación web más
web es considerado como
utilizados para diseñar y
uno de los más flexibles para
estructurar los elementos de
diseñar una página web, ya
una página web, debido a
que te permite saber cómo
la forma en que se puede
aparecerá el sitio online en
modificar para satisfacer
diferentes navegador web.
las necesidades del
contenido.
Clases de maquetación
web.
4. Maquetación web
3. Maquetación web de
híbrida: Por supuesto, al
escalado: Se trata de un
mencionar todos estos tipos
tipo de maquetación web
de maquetación web, no
que permite ajustar la
podemos olvidar mencionar
orientación de una página
el más popular de todos: la
web, especialmente en
maquetación web híbrida, la
dispositivos móviles y
cual se destaca, como su
dependiendo de la forma en
nombre lo dice, por
que se sostenga el
combinar lo mejor de todos
dispositivo.
los estilos.
MENU EN LA
MAQUETACIÓN WEB.
Los menús son una parte importante
del diseño de una página web,
debido a que colabora en gran
medida en la usabilidad de la
página. Toda página web debe
contar con al menos un menú que
permita a los usuarios desplazarse
por las diferentes páginas en forma
ágil y sencilla.
 Los menús pueden ubicarse en varios
puntos de la página, aunque los más
usados son debajo de la cabecera,
encima de la misma, y en una columna
lateral, preferentemente a la izquierda.
Importa
ncia del El menú de navegación es uno de los factores
menú. más importantes en el diseño de tu pagina
web, este debe estar diseñado para dar
accesibilidad al contenido de tu página web
así como orientado a un flujo que genere
conversiones.
 ¿Cómo aplicar estos
conocimientos?

Aprender cómo maquetar una página

web no es nada del otro mundo; de
hecho, este puede ser un proceso
llevadero si conoces algunas pautas.
Claro que también existe un grupo de
herramientas de maquetación web
con las cuales se puede simplificar
aún más este trabajo.
 1. Piensa en el 5. No te olvides de las
recorrido del usuario. etiquetas HTML5
2. Establece la 6. Céntrate en los
jerarquía visual botones de llamada a
correcta. la acción.
3. Escoge una buena

paleta de colores
4. Selecciona la
tipografía indicada
¡Gracias por la
atención BIBLIOGRAFÍA:
https://www.mantis.cat/es/maquetacion-

prestada! web.
https://www.crehana.com/blog/transformaci
on-digital/que-es-maquetacion-web/
Integrantes del equipo:
Fernando Arisai Rivas Reyes

Miguel Ángel Cortázar Pérez https://idsolutions.xyz/blog/ejemplos-de-

Alexander Castellanos Gutiérrez menu-de-navegacion-para-tu-pagina-web/
Jonatan Díaz Gómez
Alan Gilberto Ramirez Maldonado
https://developer.mozilla.org/es/docs/Learn
/Getting_started_with_the_web/HTML_basic
s