🏗🌐Estructuración de las paginas web

Una pagina web puede estar estructurada de diversas formas. Pero de manera generalizada se encuentran así: el Header, el Body y el Footer

Estructura general de un sitio web

Definición

Explicaré a continuación acerca de cada parte. Empecemos por el Header.

El header se ubica en la zona superior de la pagina web. Es donde muestra los elementos como el menú de navegación, el logo, el nombre de la pagina web, y a veces, la barra de búsqueda.

Header

El body, como dice su nombre en español, es el cuerpo. Esta zona de la pagina se encarga de mostrar todo el contenido principal al usuario. Elementos como artículos, post, videos, información, imágenes, etc

Existe una sección que se le conoce como Aside. En esta zona se le puede llamar barra lateral se encuentra información secundaria, banners, publicidad, redes sociales, etc.

Entre la Barra de Navegación e Institucional se encuentra todo el Body 
(también es otra forma de organizar el sitio web como muestra la imagen)

Y el último, pero no menos importante, el Footer. Se ubica al final de la pagina y se encarga de dar el cierre de la pagina web. En esta zona podemos encontrar datos como el copyright, créditos, información extra (Como las redes sociales), etc.

No siempre puede aparecer en una pagina web. Específicamente en las que tienen un scroll infinito, como en muchas redes sociales. insertar img

Pasemos a la practica

Es momento de ver si hemos entendido las definiciones. Empecemos con algunos ejemplos.

Si nos dirigimos a redes sociales como Pinterest, Facebook o Twitter y tratamos de hacer scroll al final de la página, resulta que se nos hace infinito porque vienen con publicaciones viejas en nuestro timeline, o nuevas como sea el caso. Este tipo de páginas web no poseen un Footer.

Tomando el de Twitter como referencia, en el header indica el logo de la red social, el nombre de la pagina donde te encuentras (la pagina de inicio) y la barra de busqueda.

Estructura de Twitter

En el body de Twitter notamos que están secciones como el timeline, la caja donde escribes un tweet, las tendencias, tu perfil de usuario, el menú de navegación y las tendencias.

También se puede ordenar estructurar de otra forma que mostraré a continuación.

Estructura de Pinterest

El diseño es diferente a como lo ve el usuario pero internamente su estructura esta definida como lo explique al inicio del post.

        Dato Extra: El diseño de Facebook puede tomarse desde otra perspectiva. Como si fuera un conjunto de subconjuntos. ¿Qué quiero decir? Pues, que dentro de un Body puede haber un Header, un Body y un Footer también

Estructura de Facebook

Volviendo al caso, probemos una pagina que si tenga Footer. En este caso, Wikipedia. Si vamos al final de la pagina, existe un Footer que muestra la política de privacidad, cookies, edición de la pagina y entre otro dato extra.

Inicio de Wikipedia

Final de Wikipedia

    Dejaré que el resto lo identifiquen ustedes para ver si captaron bien. Y como tarea final, identificar los elementos que hay en mi blog o en este post. Dejadme en los comentarios sus respuestas 🌟