¿Cómo funciona una página web? | Funcionamiento de un sitio web HTML5

En este artículo conoceremos los principios básicos de como funciona una página web (WebSite).

 

Hablaré sobre la estructura y la comunicación con el navegador, utilizando un lenguaje comprensivo para un lector sin conocimientos previos.

 

El objetivo, es dar un poco de claridad al funcionamiento de un sitio web de forma práctica, adquiriendo una base de conceptos que ayuden a mejorar la relación del usuario con las tecnologías online.

 

Hay que diferenciar una página web (soy el primero en utilizar mal este aspecto), y sitio web.

 

El primero hace referencia al contenido que vemos desde la parte superior de una única página, hasta finalizar el “scroll” del ratón (desplazamiento).

 

El sitio web, es la suma de las páginas diferentes que forman el conjunto que pertenece al nombre de dominio.

Principios básicos de la estructura de un sitio web (WebSite)

Como punto de partida, entendemos que este artículo es de conceptos generales, como funciona una página o sitio web, sin profundizar en cuestiones complejas y técnicas de todos los procesos que intervienen en un sitio web.

Estructura de un sitio web

Cuando hablamos de página web, nos referimos a una única visualización de URL, pero para referirnos a todas las páginas que componen un proyecto web, debemos utilizar el término “sitio web”.Un sitio web está estructurado en lo que se denomina HTML5, compuesto por tres códigos o lenguajes (HTML, CSS y JavaScript). 

 

Cada uno de ellos, desempeña un papel distinto. y comunican esa información al navegador que se encarga de darnos el resultado final a modo de visualización de la página.

 

La incorporación de otros dispositivos en la navegación online (sobre todo móviles), ha incorporado nuevos métodos en cuanto a la adaptabilidad de las páginas en la visualización en estos dispositivos.

 

Enlaces interesantes sobre el tema:

 

Como funcionan las páginas móviles aceleradas AMP

¿Qué es el Responsive design? (Diseño adaptativo)

Como funciona el Código HTML

HTML5 Marketing4u

Siglas en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto).

 

La revisión definitiva y su puesta en marcha data de octubre de 2014.

 

Saber como funciona una página web implica conocer HTML.

 

Es un estándar de protocolo web, se encarga de definir la estructura de una o varias páginas de un sitio web.

 

Por comparar con un vehículo, sería el equivalente al chasis, es el esqueleto que recoge y soporta toda la estructura de la página.

 

HTML, como su propia definición describe, es un lenguaje de texto, es labor del navegador interpretar y unir todas las partes que dan visualización a una página.

La estructura del código HTML

Desde la implementación de HTML5,  se han incorporado nuevos protocolos de utilización de etiquetas, el uso de otros dispositivos de navegación, como tablets y móviles, así como el cada vez más usado contenido multimedia (videos, audio, 3d, animaciones,etc.), han modificado no solo el código si no la propia estructura de una página web.

Etiquetas de código HTML5

Las etiquetas son parámetros de código que desarrollan funciones distintas en la estructura de un sitio web.

 

Definen las partes en que se compone la página, head (cabecera), body (cuerpo), footer (pie). article (contenido de información)

 

Otras etiquetas de estructura son nav (zona de navegación, menú), aside (barras laterales), header (parte visible de la cabecera).

 

Las etiquetas HTML, tienen el objetivo de definir el tipo de contenido, la ubicación que ocupa cada elemento y significado  dentro de una página web.

 

No tiene incidencia en la visualización estética de la web, esta orientado a la interpretación de los navegadores.

 

Es utilizado en los algoritmos de búsqueda y filtrado de Google, una estructura sana y bien definida, ayuda a recoger mejor la información por los bots, lo cual, beneficia en la aparición en los primeros puestos de resultados.

Código básico de página HTML
Visualización del código en el navegador

Existen gran cantidad de etiquetas HTML dentro del contexto de como funciona una página web, para conocer cada una de ellas podéis acceder a este enlace de w3schools donde se explica cada una de ellas.

Como funciona el Código CSS

Como funciona una página web CSS3

CSS3 es la última versión de  Hojas de Estilo en Cascada (Cascading Style Sheets), que son como su propio nombre indica las encargadas de dar diseño a un sitio web.

 

Este lenguaje o código, se encarga de la personalización del diseño general, así como de las peculiaridades y características visuales de las páginas y el sitio.

 

El principal objetivo y labor de una hoja de estilos (puede haber varias en un mismo sitio) es marcar posiciones , separaciones y presentación del contenido.

Etiquetas de código CSS3

Este código o lenguaje es diferente a HTML, tanto en la sintáxis como en el formato visual de la programación.

 

Su uso es selectivo, es decir, se puede especificar al detalle o hacer una programación general.

 

CSS tiene diferentes partes que se pueden combinar de múltiples maneras.

 

Los selectores eligen que tipo de etiquetas HTML van a ser influenciadas en su aspecto original.

 

A continuación se expresa la declaración del elemento al que van a ser cambiadas sus propiedades.

 

Las propiedades son todas las características distintas en las que se pueden modificar el aspecto, ubicación y animaciones de cada elemento.

 

Este sería un resultado muy básico y rudimentario de los cambios que prooduce CSS en una estructura HTML.

Aplixación básica de código CSS

Es exactamente la misma página HTML, se vincula con la hoja de estilos lo que modifica su aspecto.

 

Obviamente es un ejemplo muy básico para diferenciar el trabajo de ambos códigos y el resultado de la colaboración de unir sus fuerzas.

Como funciona el Lenguaje JavaScript

No soy experto en JavaScript, mis tiempos de programador quedan un tanto alejados en el tiempo.

 

El lenguaje de programación JavaScript, ofrece recursos que HTML y CSS no pueden.

 

La mayoría de las aplicaciones, plugins y complementos de los sitios web están hechos con este lenguaje.

 

Su funcionamiento esta en el lado del cliente (se ejecuta en nuestro ordenador), a diferencia de PHP (lenguaje de programación que comunica el servidor con el navegador y devuelve el resultado visible), este se desarrolla desde el servidor.

 

Hace no mucho tiempo JavaScript se insertaba en el código HTML, dentro de la etiqueta head.

 

Desde la implementación de HTML5, esto se hace de la misma forma que con el código CSS, se vinculan las librerías de lenguaje JavaSvript y se realizan las llamadas de ejecución cuando se necesitan.

 

Todos hemos visto en alguna ocasión la etiqueta “<script>”, esta se encarga de ejecutar la acción solicitada cada vez que se nevesite.

Ejemplos de uso de Lenguaje JavaScript

Definir en una lista las posibilidades que ofrece JavaScript en el funcionamiento de una página o sitio web, es literalmente imposible.

Resumiendo su funcionalidad en pocas palabras, permite complementar aquellas partes que HTML y CSS no consiguen llegar. 

Al tratarse de un lenguaje de programación tiene la versatilidad y flexibilidad necesaria para cubrir cualquier necesidad de proceso.

Alguno de las infinitas opciones y posibilidades de aplicar JavaScript podrían ser:

 

Lista de 10 aplicaciones de JavaScript

1.Ventanas emergentes (popups), mensajes de alerta e información.

2.Efectos de desplazamiento de página (scroll).

3.Botón de inicio de página (vuelve a la parte superior).

4.Formularios, mensajes personalizados, comentarios, tesrimonios., etc.

5.Plugins, complentos, mósulos.

6.Efectos, animaciones, manipulaciones gráficas.

7.Velocidad y mejora de procesos.

8.Analítica y procesos estsdísticos.

9.Mejora las páginas móviles Aceleradas AMP.

10.Aplicaciones tanto para web como multidisposito¡ivo.

 

Existen tantas posibilidades de uso como capacidad imaginativa e innovadora.

La labor del navegador

Algunos recordamos los tiempos en que Internt Explorer tenía el monopolio de las búsquedas en la red.

 

Con la irrupción (momentánea) de los navegadores de código abierto (llamados así por su uso libre y de aportación al código de cualquier usuario), el conocimiento de su funxionamiento interno, es tarea obligada para el profesional o webmáster.

 

Sin embargo, hemos pasado (en España) de el uso exclusivo de IE a utilizar principalmente dos navegadores, Google Chrome y Mozilla Firefo, en rercer lugar ponemos Opera aunque a bastante distancia de los dos primeros.

 

La labor principal de un navegador es ofrecer de forma visual una página web.

Un gran artículo y muy completo sobre el funcionamiento de los navegadores podéis verlo en este enlace.

 

No confundir el navegador con el buscador, podéis leer más sobre el funcionamiento y características de los busvadores donde, al menos en España, Google es el rey en este enlace.

3 septiembre, 2019

About WPLMS

Marketing4U, es una agencia de marketing digital dirigida a pequeñas empresas y autónomos, con el objetivo de desarrollar planes estratégicos que ayuden a sus negocios a aumentar ventas a través de la incorporación de nuevos clientes.

top
Web desarrollada por Marketing4U. Todos los derechos reservados. 2019
A %d blogueros les gusta esto:
Ir a la barra de herramientas