🌐 El Front-End del diseño web explicado de forma sencilla.

    Una simple forma y sencilla de entender la estructura de una página web, es con esta imagen.

    Si alguna vez llegaste a preguntarte de cómo se diseñan las páginas web, has tenido curiosidad o estas empezando en el mundo de la programación (incluso si no) 🤔. Esta imagen es perfecta para explicar cómo están constituidas las páginas webs que visitamos en nuestro día a día 👍.

    Utilizaremos el cuerpo humano, como se muestra en la imagen, para describir cómo funciona la disposición básica de una página web. Explicando los tres lenguajes fundamentales para el desarrollo web en el lado del front-end (Parte visual del sitio web).

    🌐 Empezando por el HTML, HyperText Markup Language (Lenguaje de Marcas de Hipertexto). Es un lenguaje de etiqueta (tags) que conforma la página. Definiendo los contenidos como la cabecera, el documento, el pie de página, encabezados, párrafos, etc. 

    Como función, es mantener un orden del contenido. Así mismo, como los huesos, dando una estructura de dónde va la cabeza, el cuerpo, los brazos, las piernas, etc. Modelar la información a mostrar a las personas. Y una forma de comunicarse con los navegadores para que sea más de encontrar el sitio web en los buscadores.

    El “HyperText” es quien permite conectar las diferentes páginas web entre sí. Incluso si es dentro o fuera de los diversos sitios web. Y “Markup”, por sus etiquetas (tags), para anotar textos, imágenes y otro contenido para ser mostrado en un navegador web.

. 

    La composición base del HTML está conformada por tres secciones. Header, Body y Footer.

.

    La cabeza (Header). Donde nos encontramos la barra de navegación de la página, su introducción o ambas. 

    El cuerpo (Body), que se enfoca en todo el contenido principal de la página. Como los artículos, la información, imágenes, videos, etc.

    Y al final de sitio web, tenemos los pies (footer). Donde es agregada la información menos detallada o acerca de pequeños datos acerca de la página (Como de quienes la diseñaron, sus contactos, etc).

    🌐 Ahora, mostrando la piel del sitio web, pasamos al Cascading Style sheets. Abreviado y conocido como CSS.

    Este segundo lenguaje tiene la finalidad de darle un diseño entendible al usuario y cómo deben mostrar los elementos del sitio web. Como la forma, posición, colores, espaciados, entre otros.

    Básicamente es la presentación/diseño de la página. Toda la parte estética.

    A nivel de cuerpo humano, sería como mostrar el color de piel, el tamaño de los ojos, las formas de la boca, etc.

    Sin este elemento las páginas web estarían desorganizada. Mostrando el contenido de manera inentendible para el usuario.

    Por último, tenemos a JavaScript (JS). Los músculos del sitio web. Un lenguaje de programación que le da acciones a la página para que el usuario interactúe con ella. Como mostrar actualizaciones de contenido en el momento, interactuar con mapas, animaciones gráficas 2D/3D etc.

    Igual que el cuerpo humano cuando hace algún movimiento, como moverse, correr, cerrar los ojos

    Este lenguaje de programación habilita la creación de contenido nuevo, generando un uso dinámico de la página. Controlar archivos de multimedia. Crear imágenes animadas. Y muchas otras cosas más. 

    JavaScript es el único lenguaje de programación que entienden los navegadores. Con el que se desarrolla las funcionalidades y aplicaciones web.

    Una de las cosas que la gente suele hacer, es confundir JavaScript con Java. 

    Estos dos lenguajes de programación son DISTINTOS. JavaScript es un lenguaje para desarrollo de páginas web mientras que Java es un lenguaje para el desarrollo de aplicaciones. Nunca olviden eso. 

    Para finalizar quiero dejar esta nota: HTML y CSS NO SON LENGUAJES DE PROGRAMACIÓN. 

    La razón por el cual HTML y CSS no son lenguajes de programación, sino marcas de etiquetado, es porque no tienen estructura de control. Lo que le permite agregar condiciones o ciclos/bucles para realizar ciertas acciones.

    En pocas palabras, no puedes agregar cuando quieres que la pagina realice alguna acción. Solo etiquetas.