Lo normal cuando nos encontramos ante un sitio Web corporativo es que lo definamos como la página Web de un negocio o empresa. Sin embargo esa definición no es correcta pues lo adecuado sería decir Sitio Web pues la Web, como tal, está compuesta por una serie de páginas que conforman el denominado Sitio Web.

En este post voy a hablar de cuál sería la estructura adecuada a la hora de ponerse manos a la obra para confeccionar correctamente una página de un Sitio Web (El patrón luego será el mismo para todas las páginas que componen la Web).

Una página tiene 3 partes: ENCABEZADO, CUERPO y PIE. Enumeraré primero los elementos que forman, o pueden formar, parte de cada uno de los bloques y luego indicaré unas breves pinceladas acerca del uso del lenguaje HTML esencial para la correcta configuración de una página.

1.- ENCABEZADO

Se ubica en la parte superior de la página (Antiguamente también solía mostrarse en el lateral izquierdo del diseño pero hoy día está en desuso).

Los elementos que lo componen son:

. LOGO: Lo habitual es encontrarlo en el extremo izquierdo si bien también puede estar en el centro e incluso alineado con la zona correspondiente a los menús.
. MENU PRINCIPAL: Ubicado a la derecha del logo. Suele tener varías pestañas (Inicio, Sobre nosotros, Productos y/o Servicios, Trabajos realizados – conocido en el mundo del diseño como PORTFOLIO – y Contacto). Algunos menús pueden tener un acceso a un área privada en la que habrá que identificarse para poder ver los contenidos que se ofertan en dicha parte de la Web.
. REDES SOCIALES y/o DATOS PERSONALES (Teléfono y correo electrónico de contacto). No es este un elemento que aparezca en todas las Webs pues muchos diseñadores ubican estos elementos en el PIE DE PÁGINA del que luego hablaremos.

Encabezado Sitio Web

2.- CUERPO

Se ubica en la parte central de la Página Web.

En su interior es posible encontrar infinidad de elementos (Imágenes, pases de diapositivas – conocidos popularmente como SLIDER – tanto de imágenes como de vídeos, enlaces a cada uno de los apartados de la Web a los cuales también se accede a través de los menús – La diferencia es que estos enlaces contendrán un pequeño resumen de lo que se mostrará en cada una de las partes de la Web mientras que en los menús simplemente se enumeran – , entradas del BLOG, formularios de contacto etc)

cuerpo Sitio Web

3.- PIE DE PÁGINA

Ubicado en la parte inferior de la Web.

Los elementos que podremos encontrar son:

. DATOS PERSONALES: Nombre o Razón Social, Dirección Postal, Teléfono, Email.
. MAPA DE UBICACIÓN: Se mostrará la ubicación física del negocio. Es común para ello mostrar un plano de Google Maps de la zona donde está nuestro lugar de trabajo.
. ENLACES DE INTERÉS: Se enumerarán distintos enlaces a otros Sitios Webs que consideramos pueden ser de interés para nuestros potenciales clientes.
. ULTIMAS ENTRADAS DEL BLOG: Suele ubicarse en la parte derecha del pie un enlace donde mostraremos las últimas entradas de nuestro Blog.
. REDES SOCIALES: Iconos de acceso a los distintos perfiles que la empresa o negocio tiene habilitados en los distintos perfiles existentes.

Finalmente haré unas breves indicaciones acerca del uso del lenguaje HTML necesario para la configuración de un Sitio Web.

A menudo escucho que hoy día, con ayuda de los denominados CMS (WordPress, Joomla, Drupal, Prestashop…), cualquiera puede diseñar un Sitio Web, en mi opinión si y no a la vez.

Sí. Porque lo básico de una Web es posible hacerlo con la ayuda de los CMS mencionados.

No. Porque en el momento que quieras personalizar algo o tienes unos mínimos conocimientos de HTML (ya no hablo de que seas programador) o estás perdido.

Cada una de las páginas que componen un Sitio Web deberá seguir obligatoriamente, para qué a Google le resulte atractivo, unas pautas definidas por las llamadas ETIQUETAS HTML. Os nombro algunas que se usan sí o sí en todas las páginas.

Etiquetas H: Son las etiquetas de encabezados de cada una de las partes de una página. Un H1 obligatorio para todas las páginas, H2 para cada una de las secciones, H3…

Etiquetas P: Indican que el contenido incluido en ellas formará parte de un párrafo.

Etiquetas IMG: Para insertar imágenes.

Como no me quiero extender más dejaré el análisis exhaustivo de las etiquetas necesarias para el correcto diseño de un Sitio Web para futuros post, espero que os haya gustado lo que expongo aquí.

Hasta la próxima.

 
 
Consulta todo lo que hacemos para ti en

Desplazamiento principio págna