{"id":10595,"date":"2021-11-03T10:05:00","date_gmt":"2021-11-03T09:05:00","guid":{"rendered":"https:\/\/www.host-fusion.com\/blog\/?p=10595"},"modified":"2021-11-01T11:07:04","modified_gmt":"2021-11-01T10:07:04","slug":"partes-de-una-pagina-web","status":"publish","type":"post","link":"https:\/\/www.host-fusion.com\/blog\/2021\/11\/03\/partes-de-una-pagina-web\/","title":{"rendered":"Cu\u00e1les son los elementos y las partes de una p\u00e1gina web"},"content":{"rendered":"\n
\"partes<\/figure>\n\n\n\n

Los elementos y las partes de una p\u00e1gina web<\/h2>\n\n\n\n

Quiz\u00e1s te est\u00e9s preguntando cu\u00e1les son los elementos y las partes de una p\u00e1gina web en el caso de que por primera vez est\u00e9s creando un site para tu negocio.<\/p>\n\n\n\n

Es una duda bastante habitual y que no siempre tiene una respuesta f\u00e1cil o clara, pues depende en gran medida de qu\u00e9 pretendamos obtener con nuestra web, en definitiva, qu\u00e9 objetivos y fines nos hemos marcado.<\/strong><\/p>\n\n\n\n

Este es un primer paso clave para luego poder definir mejor el tipo de web qu\u00e9 necesitamos y qu\u00e9 estructura web tener.<\/p>\n\n\n\n

As\u00ed pues, a lo largo de este post te vamos a explicar de forma extensa las tres partes de una web y elementos clave m\u00e1s habituales.<\/p>\n\n\n\n

Tipos de p\u00e1ginas web<\/h2>\n\n\n\n

Seg\u00fan su funcionalidad, estructura y contenidos una p\u00e1gina se puede categorizar de un tipo u otro.<\/p>\n\n\n\n

Se puede construir un tipo de web que se adapte a casi cualquier prop\u00f3sito y las limitaciones en cuanto dise\u00f1o, creatividad y funcionalidades son cada vez menores.<\/p>\n\n\n\n

Disponemos de planes de hosting especializados para estos tipos de webs, adem\u00e1s ponemos a tu disposici\u00f3n Cpanel con todas las aplicaciones que necesitas.<\/p><\/blockquote>\n\n\n\n

Por ejemplo, no es el mismo tipo de web el que necesitamos para una tienda online de ropa que el necesario para un escritor que publica sus art\u00edculos. Evidentemente son muy diferentes, aunque compartan muchos elementos<\/strong>.<\/p>\n\n\n\n

A\u00fan as\u00ed, aqu\u00ed te vamos a mostrar los tipos m\u00e1s comunes que podemos usar.<\/p>\n\n\n\n

P\u00e1gina web est\u00e1tica<\/strong><\/p>\n\n\n\n

Una web es est\u00e1tica cuando su contenido no se actualiza de forma peri\u00f3dica o de forma frecuente.<\/p>\n\n\n\n

P\u00e1gina web din\u00e1mica<\/strong><\/p>\n\n\n\n

Una p\u00e1gina web din\u00e1mica es esa en la que su contenido se actualiza de forma peri\u00f3dica con cierta frecuencia.<\/p>\n\n\n\n

Blog<\/strong><\/p>\n\n\n\n

P\u00e1gina en la que se muestran y da acceso a un listado de entradas.<\/p>\n\n\n\n

Tienda online o ecommerce<\/strong><\/p>\n\n\n\n

Site cuyo dise\u00f1o y funcionalidad est\u00e1 plenamente orientado a la venta de productos online.<\/p>\n\n\n\n

Landing Page<\/strong><\/p>\n\n\n\n

P\u00e1gina de una web dise\u00f1ada con la finalidad de obtener una conversi\u00f3n o un lead principalmente.<\/p>\n\n\n\n

Web corporativa<\/strong><\/p>\n\n\n\n

Web con el fin de mostrar informaci\u00f3n de una empresa u organizaci\u00f3n.<\/p>\n\n\n\n

Foro<\/strong><\/p>\n\n\n\n

P\u00e1gina web cuyo dise\u00f1o y funcionalidades permite el intercambio de informaci\u00f3n y comunicaci\u00f3n entre usuarios.<\/p>\n\n\n\n

Qu\u00e9 tres partes de una p\u00e1gina web son b\u00e1sicas<\/h2>\n\n\n\n

Si bien no todas las webs son iguales y cada una tiene unas ciertas particularidades algunos de sus elementos son comunes en la mayor\u00eda de los casos.<\/p>\n\n\n\n

A continuaci\u00f3n te vamos a mostrar las tres partes de una p\u00e1gina web que con m\u00e1s frecuencia se utilizan.<\/p>\n\n\n\n

Header<\/h3>\n\n\n\n

El header (encabezado) es la parte m\u00e1s visible de toda una web<\/strong> y siempre se encuentra en la parte superior de cualquier p\u00e1gina ocupando todo el ancho (aunque a nivel dise\u00f1o visible no sea as\u00ed).<\/p>\n\n\n\n

Se trata por lo general de una secci\u00f3n cuyo dise\u00f1o y contenido es id\u00e9ntico en toda la web<\/strong>, mostr\u00e1ndose por ejemplo tanto en una entrada como en la p\u00e1gina de inicio o la de contacto.<\/p>\n\n\n\n

En el encabezado es habitual encontrar siempre el t\u00edtulo o logo y un men\u00fa<\/strong>, esto tiene todo el sentido pues sirve para ofrecer un acceso directo a las principales p\u00e1ginas de una web.<\/p>\n\n\n\n

Es interesante precisamente tener en cuenta esto \u00faltimo, que sean accesos directos a las p\u00e1ginas a las que nos interesa que los usuarios se dirijan. Por tanto, evita sobrecargar este men\u00fa.<\/p>\n\n\n\n

\"Header<\/figure><\/div>\n\n\n\n

Si ofreces productos y acceso a clientes, como es nuestro caso, dales todo el protagonismo en el encabezado de tu web.<\/p>\n\n\n\n

Por otro lado, un ejemplo de p\u00e1gina a descartar a incluir ser\u00eda la de pol\u00edtica de privacidad.<\/p>\n\n\n\n

Adem\u00e1s, t\u00e9cnicamente en esta parte, su contenido al ser el primero que se carga<\/strong> de toda la web se incluye mucho c\u00f3digo fundamental para su buen funcionamiento.<\/p>\n\n\n\n

Tambi\u00e9n es imprescindible para la inclusi\u00f3n de c\u00f3digo de terceros como Google Analytics<\/a> o el P\u00edxel de Facebook.<\/p>\n\n\n\n

Desde el punto de vista del SEO debes tener en cuenta que Google tendr\u00e1 muy en cuenta esta parte para estructurar bien tu web as\u00ed como \u00absaber de qu\u00e9 va\u00bb.<\/p>\n\n\n\n

Ahora bien, \u00bfpueden haber p\u00e1ginas sin header? Por supuesto que s\u00ed.<\/p>\n\n\n\n

Una p\u00e1gina de aterrizaje no es buena idea que tenga un header<\/strong> como el resto de la web. En este tipo de p\u00e1ginas precisamente lo que interesa es que no tenga \u00abv\u00edas de escape\u00bb como son los enlaces a otras p\u00e1ginas del men\u00fa de navegaci\u00f3n.<\/p>\n\n\n\n

Te puede interesar: \u00bfQu\u00e9 es una landing page? Empieza a obtener conversiones<\/a><\/p><\/blockquote>\n\n\n\n

Igualmente ocurre en p\u00e1ginas en construcci\u00f3n o p\u00e1ginas de procesos de compra.<\/p>\n\n\n\n

Body o cuerpo de la web<\/h3>\n\n\n\n

En esta parte es donde se va a mostrar la mayor parte de nuestro contenido y en la que adem\u00e1s vamos a desarrollar y colocar la mayor\u00eda de elementos de nuestra web.<\/p>\n\n\n\n

Es importante a la hora de incluir contenido en esta secci\u00f3n tener en cuenta que para visualizar una web es necesario hacer un desplazamiento vertical hacia abajo<\/strong>, de tal modo que el contenido m\u00e1s relevante debe estar siempre lo m\u00e1s arriba posible y conforme vaya careciendo de relevancia m\u00e1s abajo.<\/p>\n\n\n\n

Esta forma de organizar nuestro contenido es evidente en una p\u00e1gina de inicio, donde en la parte superior se suele incorporar el contenido m\u00e1s destacado con incluso alguna llamada a la acci\u00f3n y m\u00e1s abajo otros contenidos secundarios o complementarios que aportan m\u00e1s informaci\u00f3n.<\/p>\n\n\n\n

\"body<\/figure><\/div>\n\n\n\n

Un buen ejemplo son los diarios digitales de informaci\u00f3n.<\/p>\n\n\n\n

Tambi\u00e9n podemos encontrar este tipo de orden de los contenidos en p\u00e1ginas din\u00e1micas como la de blog en la que nos interesa que se muestren primero los posts m\u00e1s recientes.<\/p>\n\n\n\n

\"el<\/figure><\/div>\n\n\n\n

Footer o pie de la web<\/h3>\n\n\n\n

Al igual que ocurre con el header esta es una parte que se incluye en pr\u00e1cticamente todas las p\u00e1ginas de la web<\/strong> y por lo general se muestra en las mismas que el encabezado.<\/p>\n\n\n\n

Sin embargo la importancia del pie de p\u00e1gina es mucho menor dada su menor visibilidad<\/strong>. Son pocos los usuarios que normalmente llegan al final de una web, pero cuando lo hacen es porque buscan un determinado contenido en concreto que saben que puede encontrarse ah\u00ed.<\/p>\n\n\n\n

Es frecuente en este apartado encontrar accesos a otras p\u00e1ginas o contenidos no relevantes como pueden ser las p\u00e1ginas legales, enlaces a redes sociales o contacto.<\/p>\n\n\n\n

\"footer<\/figure><\/div>\n\n\n\n

Aunque tambi\u00e9n es posible que quieras aprovechar para incluir ah\u00ed un acceso directo a pr\u00e1cticamente cualquier p\u00e1gina de tu web<\/strong> de forma que el usuario pueda desde ah\u00ed tener una visi\u00f3n m\u00e1s amplia de tu web y encontrar accesos que no hayas incluido en tu men\u00fa superior de navegaci\u00f3n.<\/p>\n\n\n\n

Si tu negocio tiene una direcci\u00f3n f\u00edsica te recomendamos que incluyas lo que se denomina en SEO Local NAP<\/strong> (datos de tu direcci\u00f3n) en esta parte. Te contamos m\u00e1s aqu\u00ed<\/a>.<\/p>\n\n\n\n

Elementos que no pueden faltar en tu web<\/h2>\n\n\n\n

Ahora que ya tenemos las tres partes destacadas de cualquier web veamos cu\u00e1les son los elementos que se suelen incluir en ellas.<\/p>\n\n\n\n

Formulario<\/h3>\n\n\n\n

Los formularios son uno de los elementos m\u00e1s b\u00e1sicos y empleados en cualquier web desde los inicios, adem\u00e1s su versatilidad los hace imprescindibles<\/strong> para casi cualquier tipo de web.<\/p>\n\n\n\n

Sin embargo nos gustar\u00eda destacar dos tipos de formularios.<\/p>\n\n\n\n

Formularios de contacto:<\/strong> ideales para ser incluidos en la p\u00e1gina de contacto o el footer, son la forma m\u00e1s habitual de permitir el contacto directo entre usuario y propietario de la web.<\/p>\n\n\n\n

En este tipo de formularios se pueden incluir todo tipo de campos para as\u00ed recabar m\u00e1s informaci\u00f3n del usuario.<\/p>\n\n\n\n

Formularios de suscripci\u00f3n:<\/strong> un elemento imprescindible para crear una estrategia de emailmarketing con el objetivo de fidelizaci\u00f3n o poner en marcha embudos de conversi\u00f3n.<\/p>\n\n\n\n

Te puede interesar: Newsletter, qu\u00e9 es y c\u00f3mo crear una para tu negocio o marca<\/a><\/p><\/blockquote>\n\n\n\n

Se pueden incluir en cualquier p\u00e1gina y pr\u00e1cticamente en cualquier parte.<\/p>\n\n\n\n

Si queremos obtener un buen n\u00famero de suscriptores es necesario ofrecer algo a cambio en la llamada a la acci\u00f3n que incluyamos.<\/p>\n\n\n\n

Enlaces<\/h3>\n\n\n\n

Los enlaces son b\u00e1sicos a nivel SEO para mejorar el posicionamiento de una web<\/strong>, tanto si son internos como externos.<\/p>\n\n\n\n

Un buen enlazado interno permite estructurar nuestra web y la relaci\u00f3n de importancia o jerarqu\u00eda entre diferentes p\u00e1ginas.<\/p><\/blockquote>\n\n\n\n

En cuanto al enlazado externo sirve para aportar m\u00e1s informaci\u00f3n relevante al contenido que se comparte.<\/p>\n\n\n\n

Tambi\u00e9n es importante cuando hablamos de enlaces distinguir entre \u00abDo Follow\u00bb y \u00abNo Follow\u00bb. Sobre esto te contamos m\u00e1s en este post<\/a>.<\/p>\n\n\n\n

Men\u00fa navegaci\u00f3n<\/h3>\n\n\n\n

Los men\u00fas de navegaci\u00f3n, como te dec\u00edamos anteriormente ocupan un lugar muy destacado y visible<\/strong> principalmente en el header, sin embargo este no es el \u00fanico lugar en el que los podemos encontrar.<\/p>\n\n\n\n

Su importancia es muy grande pues son el principal acceso mediante enlaces internos a cualquier parte de una web.<\/p>\n\n\n\n

Adem\u00e1s, ese enlazado permite jerarquizar mejor la estructura de una web<\/strong>, algo que tambi\u00e9n favorece a su posicionamiento.<\/p>\n\n\n\n

Botones<\/h3>\n\n\n\n

Son excelentes elementos para conseguir incluir atractivas llamadas a la acci\u00f3n al usuario<\/strong>, es decir, incitarle a que lleve a cabo una determinada acci\u00f3n.<\/p>\n\n\n\n

\"bot\u00f3n<\/figure><\/div>\n\n\n\n

El \u00e9xito de un bot\u00f3n a menudo est\u00e1 muy relacionado con su propio dise\u00f1o, por lo que es importante tambi\u00e9n tener muy en cuenta este aspecto.<\/p>\n\n\n\n

Banner<\/h3>\n\n\n\n

Un banner es un elemento visual perfecto para incluir una llamada a la acci\u00f3n<\/strong> que debe adem\u00e1s incluir un enlace de cualquiera de los dos tipos que hemos visto.<\/p>\n\n\n\n

Al igual que con los botones su dise\u00f1o es fundamental para que tenga \u00e9xito.<\/p>\n\n\n\n

Los banners, adem\u00e1s de para hacer llamadas a la acci\u00f3n sirven para tambi\u00e9n separar secciones en el dise\u00f1o de una p\u00e1gina creando espacios.<\/p>\n\n\n\n

\"el<\/a><\/figure>\n\n\n\n

En este post por ejemplo nos sirve para crear m\u00e1s espacios entre p\u00e1rrafos y as\u00ed dar m\u00e1s aire a la lectura del usuario. \u00bfQu\u00e9 te parece nuestro banner? Prueba a hacer clic.<\/p>\n\n\n\n

Pop Up<\/h3>\n\n\n\n

Este es uno de los elementos m\u00e1s odiados por los usuarios, y con raz\u00f3n, por su mal uso-abuso en muchos casos.<\/p>\n\n\n\n

Sin embargo un buen pop up es muy \u00fatil para captar suscriptores<\/strong> con un formulario de suscripci\u00f3n o una llamada a la acci\u00f3n.<\/p>\n\n\n\n

Su configuraci\u00f3n es clave.<\/p><\/blockquote>\n\n\n\n

El consejo principal que te podemos dar es que no abuses de este elemento, que no hagas que salte sin aportar ning\u00fan valor al usuario, pero sobre todo, que valores si es molesto<\/strong>.<\/p>\n\n\n\n

Si la respuesta es s\u00ed te toca hacer cambios.<\/p>\n\n\n\n

Recursos de medios<\/h3>\n\n\n\n

Como elementos de medios nos referimos a im\u00e1genes y v\u00eddeos principalmente.<\/p>\n\n\n\n

Son fundamentales para aportar m\u00e1s valor al texto de una web as\u00ed como para el dise\u00f1o, usabilidad y funcionalidad de cualquier web<\/strong>.<\/p>\n\n\n\n

Ten en cuenta que los v\u00eddeos aumentan la retenci\u00f3n en una web.<\/p>\n\n\n\n

Adem\u00e1s, no pierdas de vista cuando incluyas im\u00e1genes su optimizaci\u00f3n.<\/p>\n\n\n\n

Te puede interesar: \u00bfC\u00f3mo optimizar im\u00e1genes para web?<\/a><\/p><\/blockquote>\n\n\n\n

Testimonios y rese\u00f1as<\/h3>\n\n\n\n

\u00bfVerdad que es posible que una marca resulte m\u00e1s cre\u00edble cuando te habla de ella alguien que ha adquirido sus productos?<\/p>\n\n\n\n

Los testimonios o rese\u00f1as son elementos clave para aportar m\u00e1s credibilidad y fuerza al mensaje de tu marca.<\/strong><\/p>\n\n\n\n

\"Testimonios<\/figure>\n\n\n\n

Se pueden incluir en la p\u00e1gina de inicio, servicios o productos, la p\u00e1gina de qui\u00e9nes somos, etc.<\/p>\n\n\n\n

Otro consejo que te damos a este respecto es que es preferible la calidad de esos testimonios o rese\u00f1as a la cantidad que muestres.<\/p>\n\n\n\n

Conclusi\u00f3n<\/h2>\n\n\n\n

A lo largo de este post hemos visto las partes de una web m\u00e1s destacadas as\u00ed como tambi\u00e9n los elementos m\u00e1s importantes que por lo general solemos incluir.<\/p>\n\n\n\n

Esperamos que hayas podido tomar buena nota y que tambi\u00e9n nuestros consejos para su utilizaci\u00f3n te sean pr\u00e1cticos para ser aplicados en la creaci\u00f3n o renovaci\u00f3n de tu web.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Los elementos y las partes de una p\u00e1gina web Quiz\u00e1s te est\u00e9s preguntando cu\u00e1les son los elementos y las partes de una p\u00e1gina web en el caso de que por primera vez est\u00e9s creando un site para tu negocio. Es una duda bastante habitual y que no siempre tiene una respuesta f\u00e1cil o clara, pues […]<\/p>\n","protected":false},"author":4,"featured_media":10603,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1460,90,751,1410],"tags":[15,1090,301,1461,1462],"class_list":["post-10595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-diseno-web-marbella","category-hosting-wordpress-2","category-seo","tag-diseno-web","tag-diseno-web-marbella","tag-diseno-wordpress","tag-elementos-y-partes-de-una-pagina-web","tag-partes-de-una-pagina-web"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/posts\/10595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/comments?post=10595"}],"version-history":[{"count":0,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/posts\/10595\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/media\/10603"}],"wp:attachment":[{"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/media?parent=10595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/categories?post=10595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.host-fusion.com\/blog\/wp-json\/wp\/v2\/tags?post=10595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}