{"id":42287,"date":"2023-03-28T11:08:25","date_gmt":"2023-03-28T09:08:25","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=42287"},"modified":"2023-03-28T11:29:46","modified_gmt":"2023-03-28T09:29:46","slug":"partes-de-una-web-estructura-y-contenido","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/diseno-web\/partes-de-una-web-estructura-y-contenido\/","title":{"rendered":"Partes de una Web: Estructura y Contenido"},"content":{"rendered":"
<\/div>

\"Partes<\/p>\n

Cuando entras a una web, entras a una web y ya est\u00e1, pero si te fijas hay partes en una web<\/strong> que contienen una estructura<\/strong> y un contenido<\/strong>.<\/p>\n

\u00bfEst\u00e1 todo en ese sitio y en ese orden por alg\u00fan motivo? Por supuesto que s\u00ed, la mayor\u00eda de los sitios web mantienen una estructura para que sea m\u00e1s amigable para el usuario y le sea m\u00e1s f\u00e1cil la navegaci\u00f3n.<\/p>\n

\u00bfTe has preguntado por qu\u00e9 miras el logotipo en la parte superior de la web y la direcci\u00f3n en la parte inferior? \u00a1Vamos a verlo!<\/p>\n

 <\/p>\n

\u00bfQu\u00e9 es la estructura de una web?<\/h2>\n

Cuando hablamos de la estructura de una web, nos referimos a la forma en que se organizan y se presentan los diferentes elementos<\/strong> del sitio web.<\/p>\n

La estructura de una web puede variar bastante dependiendo del tipo de p\u00e1gina web que est\u00e9s creando, pero existen algunos elementos b\u00e1sicos<\/strong> que se encuentran en la mayor\u00eda de las p\u00e1ginas web, los cuales son:<\/p>\n

    \n
  • Encabezado<\/strong> (Header)<\/li>\n
  • Cuerpo<\/strong> (Body)<\/li>\n
  • Pie de p\u00e1gina<\/strong> (Footer)<\/li>\n<\/ul>\n

    Como puedes ver hemos lo hemos puesto tambi\u00e9n en ingl\u00e9s y es que en la mayor\u00eda de los sitios lo encontrar\u00e1s as\u00ed, pero en realidad se trata de lo mismo.<\/p>\n

    Si te dicen: \u00bb A\u00f1ade esta etiqueta en el header\u00bb<\/em>, se refieren a la cabecera o encabezado.<\/p>\n

    Encabezado o Header<\/h3>\n

    El encabezado<\/strong> es la parte superior de la p\u00e1gina web<\/strong>, que generalmente contiene el logotipo<\/strong> y un men\u00fa de navegaci\u00f3n<\/strong> del sitio web.<\/p>\n

    El encabezado es una parte fundamental de la estructura de una web<\/strong>, ya que es lo primero que ve un usuario al acceder al sitio y a partir de ah\u00ed pueden dirigirse a lo que le interesa o empezar a navegar por los men\u00fas.<\/p>\n

    Adem\u00e1s del logotipo y el men\u00fa de navegaci\u00f3n, que son los elementos m\u00e1s comunes, se pueden a\u00f1adir otros elementos al header seg\u00fan el tipo de web que se est\u00e9 creando, por ejemplo:<\/p>\n

      \n
    • Un buscador<\/strong> interno, para que los usuarios puedan buscar productos o art\u00edculos dentro de nuestro sitio.<\/li>\n
    • Un bot\u00f3n de acceso o registro<\/strong>, para permitir a los usuarios identificarse o crear una cuenta en la web, imprescindible en algunos casos.<\/li>\n
    • Un carrito de compra<\/strong> para que los clientes de la tienda puedan acceder a \u00e9l desde cualquier sitio de la web.<\/li>\n
    • Un banner o un slider<\/strong>, para destacar ofertas, novedades, etc …, ideal para llamar la atenci\u00f3n sobre algo que nos interese.<\/li>\n
    • Botones de redes sociales<\/strong> o para que los usuarios tengan un acceso muy r\u00e1pido a nuestras redes, sobre todo, si tenemos una estrategia de redes muy pronunciada.<\/li>\n<\/ul>\n

      Estos son solo algunos ejemplos, pero hay muchos m\u00e1s elementos que se pueden a\u00f1adir al header de una web seg\u00fan las necesidades y preferencias de cada proyecto web.<\/p>\n

      Lo importante es que el header sea claro<\/strong>, funcional y atractivo<\/strong> y que transmita la identidad y gu\u00ede al usuario al acceder a la web.<\/p>\n

       <\/p>\n

      Cuerpo (Body)<\/h3>\n

      El cuerpo<\/strong> o body<\/strong> de la p\u00e1gina web es el \u00e1rea principal<\/strong> donde se muestra el contenido de la web<\/strong>.<\/p>\n

      Aqu\u00ed es donde se encuentran los textos<\/strong>, im\u00e1genes<\/strong>, videos<\/strong> y otros elementos que conforman el contenido del sitio web.<\/p>\n

      Si se trata de un sitio web de noticias en el cuerpo encontrar\u00e1 las noticias destacadas o separadas por secciones.<\/p>\n

      Si se trata de una tienda online, es donde el usuario ver\u00e1 el escaparte de la tienda con los productos<\/strong> y si se trata de un portfolio, las muestras que se quieran exponer.<\/p>\n

      En el cuerpo<\/strong> de la web ser\u00e1 donde m\u00e1s trabajemos en la web, cambiando art\u00edculos, publicando post o a\u00f1adiendo productos, as\u00ed que suele ser la parte m\u00e1s din\u00e1mica de la web.<\/p>\n

       <\/p>\n

      Pie de p\u00e1gina (Footer)<\/h3>\n

      El pie de p\u00e1gina<\/strong> es la parte inferior de la p\u00e1gina web<\/strong> y generalmente contiene informaci\u00f3n adicional sobre el sitio web, como la informaci\u00f3n de contacto<\/strong>, los enlaces a las redes sociales y la pol\u00edtica de privacidad<\/strong>.<\/p>\n

      Adem\u00e1s de los elementos que hemos mencionado, como el contacto, las redes sociales o la pol\u00edtica de privacidad, hay otros que se pueden a\u00f1adir al pie de p\u00e1gina para mejorar la experiencia del usuario<\/strong> y la imagen de la marca.<\/p>\n

        \n
      • Enlaces internos a los sitios m\u00e1s relevantes del sitio<\/strong>, como el blog, el portfolio, los testimonios o las preguntas frecuentes. Esto facilita el acceso a la informaci\u00f3n y evita que el usuario tenga que volver a la cabecera<\/strong> o al men\u00fa principal para seguir navegando.<\/li>\n
      • Un formulario de suscripci\u00f3n al bolet\u00edn o newsletter<\/strong>, que permite captar el correo electr\u00f3nico de los visitantes interesados en recibir novedades, ofertas o contenidos exclusivos. Esto ayuda a crear una relaci\u00f3n m\u00e1s cercana con el p\u00fablico y a fidelizarlo. Recuerda respetar la RGPD para no tener problemas.<\/li>\n
      • Un mapa del sitio o sitemap<\/strong>, que muestra la estructura jer\u00e1rquica de la web y todos los enlaces internos disponibles<\/strong>. Aunque est\u00e1 algo en desuso, puede ser de ayuda a usuarios y buscadores web.<\/li>\n
      • Un logotipo<\/strong> o que identifique a la marca y refuerce su imagen corporativa. Aunque ya se haya incluido en la cabecera, a\u00f1adir el logotipo en el pie de p\u00e1gina tambi\u00e9n es habitual, sobre todo al lado de la informaci\u00f3n de contacto.<\/li>\n<\/ul>\n

        Estos son algunos ejemplos de elementos que se pueden a\u00f1adir al pie de p\u00e1gina de una web<\/strong>, pero no son los \u00fanicos ni los obligatorios.<\/p>\n

        Lo importante es adaptar el footer a las necesidades y objetivos de cada web, teniendo en cuenta el p\u00fablico al que se dirige<\/strong> y el mensaje que se quiere transmitir.<\/p>\n

         <\/p>\n

        \u00bfQu\u00e9 es el contenido de una web?<\/h2>\n

        \"\u00bfQu\u00e9<\/p>\n

        El contenido de una web<\/strong> se refiere a todos los elementos que se utilizan y se quieren a\u00f1adir en el sitio para que los usuarios pueden verlos o acceder.<\/p>\n

        Puede incluir texto<\/strong>, im\u00e1genes<\/strong>, videos<\/strong>, gr\u00e1ficos y otros elementos multimedia.<\/p>\n

        El contenido es el rey<\/strong> y una parte fundamental de una web, ya que es el sitio en donde usuarios interact\u00faan con el sitio web y encuentran la informaci\u00f3n que necesitan.<\/p>\n

        Como podr\u00e1s imaginar, el contenido que puedes a\u00f1adir en una web depender\u00e1 mucho de la propia web, cu\u00e1l sea su objetivo o para qu\u00e9 se ha creado.<\/p>\n

        Si se trata de un blog estar\u00e1 lleno de posts, con im\u00e1genes y mucho texto, pero si se trata de una tienda online, lo que encontraremos son los productos, con sus fotos, explicaciones, etc….<\/p>\n

        Estos son los elementos m\u00e1s comunes que puedes encontrar en el contenido de una web<\/strong>:<\/p>\n

          \n
        • Texto<\/strong>
          \nEl texto<\/strong> es la forma m\u00e1s com\u00fan de contenido en una p\u00e1gina web. El texto puede ser utilizado para comunicar informaci\u00f3n, contar historias, describir productos o servicios y intentar vender algo a los usuarios.<\/li>\n
        • Im\u00e1genes<\/strong>
          \nLas im\u00e1genes<\/strong> son un elemento visual clave<\/strong> en la mayor\u00eda de las p\u00e1ginas web. Las im\u00e1genes pueden ser utilizadas para mostrar productos o de referencia en art\u00edculos o para presentar los servicios que se ofrecen. Las im\u00e1genes se utilizan para hacer que la p\u00e1gina sea m\u00e1s atractiva.<\/li>\n
        • V\u00eddeos<\/strong>
          \nLos v\u00eddeos<\/strong> son un elemento multimedia que se utiliza cada vez m\u00e1s<\/strong> en las p\u00e1ginas web. Los videos pueden ser utilizados para demostrar productos o servicios, proporcionar tutoriales o simplemente agregar valor al contenido. Hoy en d\u00eda es dif\u00edcil encontrar una web en la que no tenga alg\u00fan v\u00eddeo de referencia.<\/li>\n<\/ul>\n

           <\/p>\n

          Cosas a Tener en Cuenta<\/h2>\n

          Ahora ya sabes qu\u00e9 partes conforman las partes de una web<\/strong>\u00a0y qu\u00e9 elementos m\u00e1s comunes puedes encontrar en el contenido<\/strong>.<\/p>\n

          Por supuesto, esto no tiene por qu\u00e9 ser as\u00ed al 100%, pero si puedes usarlo como referencia o como punto de partida para crear tu proyecto web.<\/p>\n

          Recuerda que en Hostinet<\/strong> podemos ofrecerte hosting web<\/a><\/strong> para que puedas alojar tu proyecto online, ya est\u00e9 empezando y s\u00f3lo necesites lo m\u00e1s b\u00e1sico, como si necesitas servidores VPS<\/a><\/strong> con un mont\u00f3n de recursos disponibles.<\/p>\n

          \"Hosting<\/a><\/p>\n