Home Blog/ Transformación digital/
Transformación digital

Aprende las partes de una página web y exprésate como todo un desarrollador

Hans Baumann - 03 Nov 21

Articulo

7 min.

Definir la estructura y las partes de una página web no solo significa dar una disposición visual y gráfica o definir el árbol de navegación, es mucho más que eso: significa configurar el sitio para que pueda decir al usuario dónde está y adónde va

¬ŅTe has encontrado con sitios web que parecen inc√≥modos y desordenados? Seg√ļn Taylor and Francis Online, los usuarios tardan unos 50 milisegundos (es decir, 0,05 segundos) en formarse una opini√≥n sobre tu sitio web que determina si les gusta o no, si se quedan o se van.

Por lo tanto, cuando hablamos de las partes de una p√°gina web, no se puede improvisar, ya que dicha estructura est√° bien definida, utilizando elementos comunes para los internautas. Adem√°s, muchos aspectos entran en juego como la accesibilidad y funcionalidad. 

As√≠ que, en esta nueva entrada del blog, descubrir√°s en detalle las partes de una p√°gina web, su estructura y los principales elementos que la conforman. ¬°Acomp√°√Īanos!

Partes de una p√°gina web seg√ļn su estructura

Cuando hablamos de las partes esenciales de una página, normalmente nos referimos a la estructura web. Aunque también podemos referirnos a las partes de una web de acuerdo a su contenido. Para que lo entiendas mejor, te lo explicamos de la siguiente manera:

Estructura web: partes de una p√°gina web de acuerdo a su estructura.

  • Cabecera o header
  • Cuerpo o body
  • Pie de p√°gina o footer

Estos son los componentes clave del sitio web. La mayor√≠a de nosotros no pensamos en ellos mientras navegamos por Internet, pero los notar√≠amos si faltaran o estuvieran de alguna manera apagados, ya que son elementos esenciales. 

Cabecera o header

Una de las partes principales de una página web es la cabecera o header, la cual aloja los elementos de identificación del sitio. Por ejemplo:

  • Logotipo o identificador de marca.
  • Llamada a la acci√≥n (CTA).
  • Texto o titular.
  • Elementos de navegaci√≥n.
  • B√ļsqueda.

En el dise√Īo moderno, todo el espacio por encima del pliegue de la p√°gina de inicio se considera cabecera. Al ser la parte estrat√©gica de la p√°gina que la gente ve en los primeros segundos de carga de un sitio web, un encabezado act√ļa como una especie de invitaci√≥n, as√≠ que debe proporcionar informaci√≥n b√°sica sobre el sitio para que los usuarios puedan entender lo que se ofrece en segundos.

Si hablamos de las partes de un sitio web en lenguaje HTML, la cabecera debe aparecer entre las siguientes etiquetas:

<header>contenido de la cabecera</header>

 

Cuerpo o body

La segunda de las partes de un sitio web se trata del cuerpo o body, el cual es el centro que contiene la mayor parte del contenido de una p√°gina. Por ejemplo, la galer√≠a de fotos que quieres mostrar, un art√≠culo que quieres que tus visitantes lean. 

Es un √°rea que cambia de una p√°gina a otra. Las distintas partes del cuerpo de una p√°gina web generalmente se estructuran bas√°ndose en las columnas que distinguen el nivel de importancia del contenido.

Para identificar las partes una p√°gina web en lo que se refiere al cuerpo o body en HTML, puedes hacerlo r√°pidamente entre las siguientes etiquetas:

<body>contenido del cuerpo</body>

Pie de p√°gina o footer

Otra de las partes importantes de una página web es el pie o footer. Un pie de página cumple la misma función que la cabecera o header, es decir, es el área del sitio web que es constante de una página a otra, excepto que un pie de página está en la parte inferior en vez de la parte superior.

Puedes poner lo que quieras en el pie de p√°gina, pero lo que suele haber en esta parte es: 

  • Informaci√≥n de contacto.
  • Pol√≠tica de privacidad.
  • Condiciones de uso.
  • Mapa del sitio.
  • √ćconos de redes sociales.
  • Enlaces a otras p√°ginas importantes del sitio.

Como pudiste darte cuenta en las partes de una p√°gina web anteriores, el pie de p√°gina se en HTML encuentra entre estas etiquetas:

<footer>el contenido del pie de p√°gina</footer>

estructura de una pagina webFuente: www.unsplash.com

Ejemplo de las partes de un sitio

La siguiente es una p√°gina de inicio b√°sica de un sitio web de ejemplo. Aunque la mayor parte de las partes de una p√°gina web est√°n representadas en esta imagen, estos no son los √ļnicos componentes del sitio web cuando dise√Īes el tuyo. 

Como ver√°s, el color azul ser√≠a la cabecera o header. En ella est√° el logotipo de la marca y el men√ļ de navegaci√≥n. Generalmente, esta parte est√° siempre est√°tica aunque navegues por otras p√°ginas o hagas scroll.

El color magenta sería el cuerpo o body, el cual varía su información en cada página del sitio web.

Finalmente, el color amarillo es el footer de la web. Siempre está al final de cada página de la web y el contenido es siempre el mismo. El logo, información de contacto, métodos de pago disponibles y también los iconos de redes sociales.

partes fundamentales de un sitio webFuente: www.freepik.com

Partes de una p√°gina web seg√ļn el contenido

Estas son las partes de una p√°gina web seg√ļn el contenido y su distribuci√≥n:

  • Inicio o home
  • Contacto
  • Productos y servicios
  • Blog
  • Contenido destacado
  • CTA
  • Barra lateral
  • Entradas y contenido de feed
  • Enlaces internos
  • Formularios o informaci√≥n de contacto
  • Botones de redes sociales

A continuaci√≥n, te ense√Īamos cada elemento con m√°s detalle.

1. Home

También conocido como landing page, la sección de inicio es uno de los elementos básicos de una página web. Es justamente el primer pantallazo que obtiene el usuario al ingresar al sitio y determina el resto del viaje digital. Si el visitante no encuentra lo que busca en pocos pasos, es muy probable que termine abandonando el intento. Estos son los aspectos que debes tener en cuenta para destacar tu landing page:

  • Crea un buen dise√Īo web con el contenido bien estructurado.

  • Revisa la velocidad de carga del sitio web, deben ser r√°pidos.
  • El dise√Īo web responsive, es crucial en este punto ya que el uso de los m√≥viles o tablets para navegar por Internet es el m√°s utilizado en la actualidad. 

2. Motor de b√ļsqueda

Otro de los elementos de una p√°gina web es la barra del motor de b√ļsquedas o simplemente el bot√≥n de la lupa. Recuerda que hoy en d√≠a, los usuarios de internet lo quieren todo y lo quieren ya. Pocas veces cuentan con el tiempo de navegar tranquilos en la web, por lo cual debes procurar una buena indexaci√≥n del contenido (utiliza etiquetas).

3. Men√ļ 

Un elemento que hace a la estructura b√°sica de una p√°gina web es el men√ļ. Parece un poco obvio pero no te imaginas cuantos sitios web fracasan en esta tarea. No s√≥lo debes pensar en qu√© lugar lo ubicar√°s, sino tambi√©n su forma y contenido. Puede ser: un men√ļ desplegable, men√ļ fijo, que indique otras secciones o directamente partes de informaci√≥n.

home de un sitio webFuente: www.freepik.com

4. Productos y servicios

Si nos preguntamos cuáles son las partes de una página web, seguramente coincidamos en que el cuerpo es la sección más importante de todas. Por ejemplo, si lo que buscas es crear tu propio e-commerce, la sección en donde se encuentren los productos a la venta es crucial para determinar el éxito de la web. Piensa en lo que tu cliente necesita y hazlo realidad.

elementos del sitio web

Fuente: www.freepik.com

5. Blog

 ¬ŅPor qu√© la secci√≥n del Blog es de las partes esenciales de una p√°gina web? Hoy en d√≠a, las marcas utilizan los blogs para hacer crecer sus negocios y ampliar su alcance. Los profesionales del marketing B2B que utilizan blogs obtienen un 67% m√°s de clientes potenciales que los que no lo hacen, seg√ļn Hubspot.

Escribir un blog es una forma de atraer tr√°fico a tu sitio web y aumentar tu SEO. Cuanto m√°s publiques en la secci√≥n de blog de tu p√°gina, m√°s contenido tendr√°n que rastrear e indexar los motores de b√ļsqueda. Esto significa que pueden reconocer f√°cilmente que tu sitio es un recurso de informaci√≥n al que la gente puede acceder.

Fuera de los productos y servicios que ofreces, podr√≠as utilizar tu blog para crear contenido que tu audiencia se anime a compartir con sus conexiones. Por eso, constituye una de las partes de una p√°gina web m√°s importantes para una empresa. 

6. Contenido destacado

Esta secci√≥n suele ir exclusivamente en la p√°gina de inicio. Gu√≠a a los visitantes a partes de una p√°gina web que se convertir√°n en objetivos del sitio web, es decir, las acciones, interacciones, etc. de tu sitio web que cumplen un prop√≥sito. 

Por ejemplo, reservar un vuelo en la web de una agencia de viajes o comprar productos en una tienda online son ejemplos de ello.

7. Llamada a la acción (CTA)

Probablemente, ya has o√≠do hablar acerca de qu√© es la Call to action. Si no, sigue el enlace anterior. Son partes de una p√°gina web muy importantes tambi√©n, ya que las CTA sirven para guiar a los visitantes del sitio web hacia la informaci√≥n relevante, cumplir con los objetivos del sitio y navegar por la p√°gina. 

Las CTA pueden ser obvias, como los botones, o más sutiles, como los enlaces dentro del texto, pero todas sirven para el mismo propósito: guiar a los visitantes a la información que es clave para ellos.

8. Barra lateral

Las barras laterales, al igual que los men√ļs, son partes de una p√°gina web que suelen ayudar a la navegaci√≥n. Cuando hay que ordenar una gran cantidad de informaci√≥n, como varias entradas del blog, o productos, una barra lateral puede ayudar. 

Las barras laterales se utilizan a menudo para mostrar piezas de informaci√≥n relacionadas, contienen CTAs, o gu√≠an a los visitantes al siguiente paso despu√©s de que hayan le√≠do un post o a√Īadido un producto a su carrito, por ejemplo.

 

9. Entradas y contenido de ‚Äúfeed‚ÄĚ

Una forma pr√°ctica de conseguir que los visitantes de tu sitio web se comprometan con el contenido de la misma es ofrecer un "feed" de contenido. Puede ser un pase de diapositivas de productos recomendados o, en nuestro caso, las √ļltimas publicaciones del blog. Sirve para despertar el inter√©s del visitante y guiarlo a completar los objetivos de la p√°gina web.

10. Enlaces internos

Seg√ļn el contenido, los enlaces internos son partes de una p√°gina web √ļtiles que crean un flujo de navegaci√≥n ideal a trav√©s de tu sitio web. Los enlaces internos llevan a los usuarios a la p√°gina del blog, donde pueden examinar la lista completa de publicaciones y encontrar algo que les interese, completando as√≠ un objetivo del sitio web. 

El contenido de la barra lateral y los CTA de contenido destacado son otra forma de lograr lo mismo, con un efecto de captaci√≥n de atenci√≥n a√ļn m√°s eficaz.

11. Formularios o información de contacto

Los formularios de contacto son partes de una p√°gina web que son muy comunes de encontrar. Sirven para obtener la informaci√≥n de contacto de los visitantes. Los formularios de registro, los formularios de solicitud, los formularios de informaci√≥n de env√≠o y otros similares son ejemplos de c√≥mo se utilizan los formularios en los sitios web. 

A prop√≥sito, si te digo que puedes descargar gratis el Template de dise√Īo web que te ayudar√° a crear tu pr√≥xima p√°gina, ¬°es posible que debas rellenar un formulario para estar en contacto con las √ļltimas novedades!

12. Botones a redes sociales

Los enlaces a las redes sociales son un complemento muy popular en la mayoría de las páginas web. Aunque en ocasiones estos enlaces se muestran en el pie de página, los enlaces de redes sociales pueden aparecer en cualquier parte de un sitio web. Si a un visitante le gusta tu página, querrá recibir actualizaciones a través de las redes sociales.

partes del dise√Īo webFuente: www.freepik.com

Partes técnicas de un sitio web

La informaci√≥n detr√°s de un sitio web, como el alojamiento o hosting, los dominios y el sistema de gesti√≥n de contenidos (CMS), como Wordpress, siguen siendo importantes para comprender plenamente las partes de una p√°gina web y su anatom√≠a. 

1. Plugins

Los plugins son aplicaciones que a√Īaden funcionalidad a tu sitio web. Tu constructor de sitios web te ofrecer√° un men√ļ de plugins compatibles con tu interfaz. Algunos son gratuitos y otros requieren una suscripci√≥n o una cuenta con un servicio de terceros. 

Los plugins pueden encontrarse en muchas partes de una p√°gina web y pueden incluir:

  • Botones para compartir en redes sociales.
  • V√≠deos incrustados.
  • Formularios de suscripci√≥n por correo electr√≥nico.
  • Herramientas SEO.
  • Contadores de visitas.
  • Generadores de ventanas emergentes.

Plugins partes de una p√°gina webImagen: seoptimer.com

2. Alojamiento web o hosting

El hosting es como una peque√Īa propiedad inmobiliaria de Internet sobre la que construyes tu p√°gina web. Todos los sitios necesitan comprar un hosting, que consiste b√°sicamente en el alquiler del espacio en un servidor para almacenar y publicar tu contenido. 

Al igual que el alquiler, el alojamiento web debe renovarse anualmente. La mayoría de los creadores de sitios web también ofrecen una lista de servicios de alojamiento compatibles.

3. Nombre de dominio

Cada p√°gina web tiene una ubicaci√≥n √ļnica en Internet a la que se accede por su direcci√≥n IP. Esta direcci√≥n es una larga serie de n√ļmeros, por lo que existe una versi√≥n de texto "amigable" llamada nombre de dominio. El nombre de dominio tambi√©n se llama direcci√≥n web y suele tener la siguiente la f√≥rmula est√°ndar:

  • www
  • nombre de dominio
  • .org, .com, .edu, etc.

Pro TIP: Comunica la naturaleza de tu sitio web con la mayor claridad posible d√°ndole un nombre de dominio f√°cil de recordar y deletrear.

Nombre de dominio partes de una p√°gina webImagen: seoptimer.com

Los mejores cursos para desarrollar las partes de una p√°gina web

Ya conoces todas las partes de una p√°gina web que necesitas tener en cuenta para que tu pr√≥ximo lanzamiento sea un √©xito. ¬ŅTe gustar√≠a conocer un poco m√°s sobre esta tem√°tica? Te compartimos una lista de los mejores cursos que Crehana dise√Ī√≥ especialmente para personas como t√ļ. 

1. Sketch de cero a experto

En este curso aprender√°s c√≥mo usar Sketch, la mejor herramienta de dise√Īo de interfaz para expresar tus ideas con efectividad e integrar todas las partes de una p√°gina web.

‚ě§ Inscr√≠bete al curso de Sketch de cero a experto.

2. Fundamentos de UX y UI

Conocerás la importancia de la experiencia de usuario, la interfaz de usuario, la diferencia entre ambas y cómo aplicarlas en tu próximo proyecto que combinen de la mejor manera las partes de una página web .

‚ě§ Inscr√≠bete al curso de Fundamentos de UX y UI.

3. Desarrollo web: HTML y CSS desde cero

Este curso online te llevar√° desde cero a un nivel en el que podr√°s convertir cualquier dise√Īo, ya sea una imagen o un .psd, a c√≥digo HTML. Descubrir√°s temas como la funcionalidad de un navegador, introducci√≥n a HTML, etiquetas y atributos, formularios web, HTML gr√°fico, introducci√≥n a CSS, selectores, dise√Īo de sitios web responsivos, animaciones y mucho m√°s.

 ‚ě§ Inscr√≠bete al curso de Desarrollo web: HTML y CSS desde cero.

4. Fundamentos de Javascript

Gracias a estas clases podr√°s conocer de manera r√°pida los fundamentos del JavaScript junto con la aplicaci√≥n de distintos scripts que te permitir√° ampliar tus conocimientos y habilidades en dise√Īo de p√°ginas web. 

‚ě§ Inscr√≠bete al curso de Fundamentos de Javascript.

5. Bootstrap: Construye tu sitio web responsive

Te permitirá conocer desde cero lo que es un Framework, cómo instalar Bootstrap 4 y cómo usarlo para crear un sitio web. Durante las clases aprenderás paso a paso los diferentes componentes de Bootstrap y cómo desarrollar con el sistema de rejilla.

‚ě§ Inscr√≠bete al curso de Bootstrap desde cero: Construye sitios web responsive.

6. Git y Github: Control de versiones web

Estas herramientas te permitirán agilizar el desarrollo colaborativo de nuestros proyectos web. En este curso aprenderás a utilizar Git, el sistema de control de versiones más popular del mundo, y cómo descargar y realizar cambios desde GitHub.

‚ě§ Inscr√≠bete al curso de Git y Github: Control de versiones en proyectos web.

cursos onlineFuente: www.unsplash.com

Esperamos que esta gu√≠a intensiva sobre las partes de una p√°gina web te haya resultado √ļtil. No es necesario comprender toda la tecnolog√≠a subyacente para hablar de manera inteligente con un dise√Īador o un desarrollador web.

Solo necesitas tener un conocimiento básico del lenguaje de la tecnología web y estarás bien. Pero si quieres ir más allá, echa un vistazo a los cursos de Desarrollo web y tecnología que tenemos para ti. Esto ha sido todo por ahora. ¡Hasta muy pronto!