Introducción a la navegación WEB - URL - HTTP - HTML

Summary

El video introduce las aplicaciones web de servidor y los conceptos clave como HTTP y cómo generar aplicaciones usando Express.js. Explica la navegación web desde su invención por Tim Berners-Lee en 1989, destacando la importancia de la arquitectura cliente-servidor y los elementos como URLs, HTTP y HTML. Se detalla el funcionamiento de los navegadores web, la estructura de las URLs y cómo las solicitudes y respuestas HTTP facilitan la interacción entre cliente y servidor. Finalmente, se mencionan los códigos de respuesta HTTP y cómo se presentan las páginas web en los navegadores.

Takeaways

• 🌐 El concepto de navegación web fue propuesto por Tim Berners-Lee en 1989, generalizando el hipertexto para la distribución de documentos en internet.
• 🖥️ La web funciona bajo una arquitectura cliente-servidor, donde el cliente es el navegador y el servidor ofrece los recursos solicitados.
• 🔗 El URL es un identificador fundamental en la web, compuesto por un protocolo (como http), la dirección del servidor y la ruta del recurso.
• 📄 El HTML es el lenguaje utilizado para estructurar las páginas web, permitiendo que estas se visualicen correctamente en los navegadores.
• 🔒 Los protocolos http y https son utilizados para transferir información entre cliente y servidor, siendo https la versión segura que encripta los datos.
• 🔍 Los navegadores permiten al usuario acceder a páginas web introduciendo URLs, las cuales son procesadas mediante transacciones http.
• ⚙️ El servidor gestiona las solicitudes http y responde con los recursos solicitados, como páginas HTML o archivos.
• 💻 Las aplicaciones web pueden ser dinámicas o estáticas, y los servidores asignan puertos específicos para cada servicio (como el puerto 80 para http).
• 📝 Una transacción http se compone de una solicitud y una respuesta, ambas con una estructura similar que incluye una línea de inicio, parámetros y un cuerpo.
• ❌ Los errores comunes, como el código 404 (página no encontrada), son respuestas del servidor cuando un recurso no está disponible.

Q & A

¿Qué es la navegación web y quién la propuso?

La navegación web es el proceso de acceder a documentos hipertexto distribuidos en internet, y fue propuesta por Tim Berners-Lee en 1989.

¿Cuál fue la innovación clave de Tim Berners-Lee para la navegación web?

La innovación clave fue la creación del URL, una dirección que identifica cualquier recurso en internet, permitiendo a los navegadores acceder a páginas web utilizando el protocolo HTTP.

¿Qué componentes tiene un URL?

Un URL tiene tres componentes principales: el protocolo (como HTTP), la dirección del servidor (como www.upm.es), y la ruta que identifica un recurso específico dentro del servidor.

¿Qué es el protocolo HTTP y para qué se utiliza?

HTTP es el protocolo que se utiliza en la web para intercambiar información entre clientes (navegadores) y servidores. Permite solicitar y recibir páginas web en formato HTML.

¿Qué función cumplen los navegadores web en el modelo cliente-servidor?

Los navegadores web actúan como clientes en el modelo cliente-servidor. Su función es solicitar recursos desde servidores web a través de URLs y presentar las páginas web al usuario.

¿Cómo se estructura una solicitud HTTP?

Una solicitud HTTP tiene tres partes: una línea de solicitud que incluye el método (como GET), la ruta del recurso, y la versión del protocolo; seguido de una lista de parámetros y, en algunos casos, un cuerpo con datos adicionales.

¿Qué es un servidor web y cómo funciona?

Un servidor web es un programa que responde a solicitudes HTTP enviadas por navegadores. El servidor entrega los recursos solicitados, como páginas HTML, desde un repositorio público de su sistema de archivos.

¿Qué es una transacción HTTP?

Una transacción HTTP es una unidad de interacción entre un cliente y un servidor. Comienza con una solicitud del cliente y termina con una respuesta del servidor, siendo cada transacción independiente de las demás.

¿Qué sucede cuando se introduce un URL en un navegador?

Cuando se introduce un URL en un navegador, este establece una conexión HTTP con el servidor correspondiente, solicita el recurso especificado en el URL y lo muestra al usuario.

¿Qué son los códigos de respuesta HTTP y cuáles son algunos ejemplos?

Los códigos de respuesta HTTP indican el resultado de una solicitud. Por ejemplo, el código 200 significa 'OK' (solicitud exitosa), y el código 404 significa 'Not Found' (recurso no encontrado).

Outlines

00:00

🌐 Introducción a la navegación web y HTTP

En este apartado, se aborda la historia y los fundamentos de la navegación web, destacando la propuesta de Tim Berners-Lee en 1989 que introdujo el concepto de hipertexto distribuido. Se explican los principios básicos del modelo cliente-servidor, el uso de URL y el protocolo HTTP como bases para el acceso a páginas web. También se menciona la evolución de la web, que pasó de ser una red de interacción conversacional a una red de distribución de contenidos, con un crecimiento exponencial desde su creación.

05:01

🔑 Estructura y componentes de un URL

Este párrafo se centra en la estructura de un URL, que consta de tres partes: el protocolo (como HTTP), el nombre del servidor y la ruta hacia el recurso. Se explica cómo los URLs se utilizan no solo para páginas web, sino también para otros servicios, como el correo electrónico y FTP. Además, se menciona la posibilidad de añadir credenciales de usuario (nombre y contraseña) en el URL, aunque esto no se recomienda sin HTTPS debido a la seguridad. También se explica cómo los parámetros y fragmentos dentro de un URL permiten acceder a recursos específicos o secciones de una página web.

10:02

📡 Transacciones HTTP y la interacción cliente-servidor

Aquí se describe cómo se establece una conexión HTTP entre un cliente (navegador web) y un servidor web. Se explica el proceso de las transacciones HTTP, donde el cliente inicia la solicitud y el servidor responde. Cada transacción es independiente, y se detalla el formato de las solicitudes y respuestas HTTP, como la famosa solicitud GET para pedir una página web y los códigos de respuesta como el 200 (éxito) o el 404 (página no encontrada). Finalmente, se resalta la importancia de HTTP en la interacción entre navegadores y servidores, permitiendo a los usuarios acceder a páginas web en cualquier servidor de internet.

Keywords

💡Cliente-Servidor

El modelo Cliente-Servidor es una arquitectura fundamental de las aplicaciones web donde el cliente (navegador) solicita recursos al servidor, que responde con la información solicitada. Este concepto es clave en la navegación web, ya que permite la interacción entre usuarios y los servidores donde se alojan las páginas web.

💡HTTP

HTTP (Hypertext Transfer Protocol) es el protocolo utilizado para la transferencia de datos en la web. Define cómo los mensajes se formatean y transmiten, y cómo los servidores responden a las diversas solicitudes de los navegadores. En el video, se explica cómo HTTP es esencial para el funcionamiento de las aplicaciones web y la interacción entre el cliente y el servidor.

💡URL

La URL (Uniform Resource Locator) es una dirección única que identifica un recurso en la web. Tim Berners-Lee fue el creador de este concepto, que revolucionó la manera en que accedemos a los recursos distribuidos en Internet. En el video, se explica que la URL es fundamental para localizar documentos y servicios dentro de la red.

💡HTML

HTML (Hypertext Markup Language) es el lenguaje utilizado para estructurar y presentar el contenido en la web. Las páginas web se escriben en HTML y se muestran en el navegador. En el video, se menciona cómo el HTML permite definir la estructura de las páginas web con precisión, facilitando su visualización como documentos digitales.

💡Servidor

Un servidor es un programa que aloja y entrega páginas web a los clientes. Estos programas están conectados a la red y responden a las solicitudes de los navegadores. En el video, se describe cómo los servidores están ubicados en máquinas físicas y cómo su función principal es servir páginas web y otros recursos a los clientes que los solicitan.

💡TCP/UDP

TCP (Transmission Control Protocol) y UDP (User Datagram Protocol) son protocolos de transporte que permiten la comunicación entre dispositivos en Internet. En el video se explica que las aplicaciones web usan estos protocolos para establecer conexiones entre clientes y servidores, siendo TCP el más utilizado para garantizar la entrega confiable de datos.

💡Sockets

Un socket es un punto de comunicación que permite la interacción entre dos dispositivos a través de una red. En el modelo cliente-servidor, los sockets permiten que los datos fluyan entre el cliente y el servidor, facilitando la transferencia de información. El video menciona que las aplicaciones de Internet utilizan sockets para comunicarse.

💡Protocolo

Un protocolo es un conjunto de reglas que definen cómo se realiza la comunicación entre dispositivos en una red. El video menciona varios protocolos, como HTTP para la web, FTP para la transferencia de archivos, y SMTP para el correo electrónico, destacando la importancia de estos en la correcta operación de las aplicaciones web.

💡Transacción HTTP

Una transacción HTTP es una operación que se lleva a cabo entre el cliente y el servidor, donde el cliente envía una solicitud (por ejemplo, un GET) y el servidor responde con los recursos solicitados. En el video se describe cómo estas transacciones permiten que los navegadores obtengan y muestren páginas web.

💡GET

GET es un tipo de solicitud HTTP que permite a un cliente pedir a un servidor una página o un recurso específico. El video muestra cómo la solicitud GET se utiliza para pedir una página web al servidor, y cómo la respuesta contiene el contenido que será presentado al usuario en el navegador.

Highlights

Introducción a las aplicaciones web de servidor y conceptos básicos de HTTP y Express.js.

El concepto de cliente-servidor en la navegación web es fundamental para el funcionamiento de internet.

Tim Berners-Lee propuso la web en 1989, transformando Internet en una red de distribución de contenidos.

La navegación web utiliza HTTP y HTML para visualizar páginas con estructura precisa como si fuera un libro.

El URL fue una de las grandes contribuciones de Tim Berners-Lee, permitiendo identificar recursos en Internet.

Un URL está compuesto por el protocolo, servidor, y ruta, que identifica un recurso en un servidor remoto.

El directorio de recursos web en un servidor está limitado por medidas de seguridad, solo exponiendo ciertos contenidos.

Los URL evolucionaron para incluir servicios adicionales como FTP y correos electrónicos, no solo para la web.

La autenticación de usuario mediante URL con credenciales no es recomendable por motivos de seguridad, salvo que se use HTTPS.

Los servidores web funcionan en puertos específicos, siendo el puerto 80 el estándar para HTTP.

Los navegadores web son clientes que solicitan páginas a servidores usando direcciones URL específicas.

HTTP opera mediante transacciones independientes que inician siempre desde el cliente con una solicitud.

Las transacciones HTTP tienen una estructura definida, comenzando con la solicitud 'GET' para pedir recursos.

El código de respuesta HTTP 200 indica éxito, mientras que el 404 not Found indica que no se encontró el recurso.

Los navegadores web permiten acceder a cualquier servidor en Internet, facilitando la navegación global.

Transcripts

[Música]

Hoy empezamos un nuevo capítulo

aplicaciones web de servidor donde vamos

a ver los conceptos más importantes de

http y de cómo generar estas

aplicaciones con Express js vamos a ver

todos estos temas que tenemos aquí y

empezamos por ver una introducción a la

navegación web donde repasaremos los

conceptos de clientes servidor URL http

y html que son los elementos básicos de

la navegación

web el web o la navegación web fue

propuesta o inventada por Tim bernes Lee

en

1989 en que propuso un servicio de

documentos hipertexto distribuidos por

toda la internet generalizó El

hipertexto que ya existía en los

ordenadores de Apple en aquella época

para que los enlaces pudiesen traer eh

documentos en ados en otros servidores

diferentes esta aplicación que al

principio Pues fue mal entendida eh creó

un enorme almacén de documentos que es

justo lo que lo que necesitaba la red y

transformó internet de una red más

conversacional en una red de

distribución de contenidos como la

arquitectura del web propuesta por Tim

bernas Lee era muy distribuida y

escalable desde entonces el web y la

información que hay en internet no ha

parado de crecer de forma exponencial

el web eh se basa o es una aplicación de

tipo cliente servidor eh tal y como son

todas las aplicaciones de internet que

se basan en tcp udp y utilizan los

sockets para comunicar Y en este modelo

los clientes eh son programas que están

en máquinas cliente que son las máquinas

que utiliza el usuario para acceder a

internet sus portátiles hoy día también

los móviles tabletas teléfonos etcétera

etcétera Pero el cliente propiamente

dicho es un programa es un programa que

identifica el el acceso al servicio a

través de una dirección y en el caso del

web y esta fue la gran genialidad de Tim

bernes le inventó el URL una dirección

que identifica cualquier recurso dentro

de internet por lo tanto en el mundo de

internet tenemos que los clientes pues

son los navegadores Aquí tienen los

logotipos de los más importantes ch

firefox Internet Explorer opera etcétera

etcétera En los Cuáles nosotros

introducimos estas direcciones estos URL

Entonces nos traen desde un servidor la

la página web que le estamos pidiendo

que está identificada por este URL

utilizando el protocolo http y como esas

páginas están html que es un lenguaje

que permite Definir la estructura del

documento con toda precisión estas se

pueden visualizar como si estuviésemos

viendo un libro Con la máxima calidad

tipográfica

e los servidores es y los recursos que

están dentro de ellos se identifican a

través de este URL web eh que tiene eh

tres componentes fundamentales eh el URL

web es una cosa como esto de aquí que

tiene primero un protocolo el http

cuando estamos en web un servidor una

dirección de servidor que es upms este

es el servidor de mi universidad y luego

una ruta que identifica un recurso un

fichero de los que se están trayendo a

través de con el navegador dentro de el

repositorio de recursos de este servidor

el directorio o el repositorio de

recursos web es un elemento fundamental

es un directorio del sistema operativo

eh donde se colocan todas las páginas

web en él o en subdirectorios que ese

servidor web puede servir a clientes

remotos el resto de los directorios

permanecerá protegido no podrá ser

accedido a través de http pero que

pongamos aquí lo publicamos en toda la

internet por eso el la ruta aquí dir

página html que es este tercer

componente página html sería una un

fichero página html una con tiene una

página html que está en el directorio

dir del repositorio de eh recursos de

este de este servidor este repositorio

de recursos normalmente es un directorio

queci el nombre de public o

3w el la dirección como ya he dicho es

probablemente el invento o la propuesta

de más impacto que hizo Tim bernes Lee

porque eh se habla de las épocas oscuras

de internet antes de la existencia de

urls y las épocas ya luminosas después

de los urls porque es a partir de

Entonces cuando se empezaron a poder

hacer aplicaciones muy sofisticadas y

apareció lo que hoy día se denomina

internet computing porque el URL es una

dirección que identifica unívocamente un

recurso un elemento dentro de internet

ese recurso puede ser un fichero un

servicio cu cualquier elemento como ya

veremos en en este tema eh nosotros por

eso si metemos en un navegador esta

dirección y esta dirección se

corresponde con una página que dentro

Pues nos servirá la página que la

veremos con toda la calidad que nos

permite el web a la que estamos

acostumbrados Aunque la dirección el URL

apareció para el web y como

identificador del curso servidor web se

generalizó rápidamente para otro tipo de

servicios y también para los servicios

web con esta estructura que tienen aquí

donde el primer elemento es el protocolo

en el caso de web es http pero en el

mail es mail to Y bueno pues en otros

servicios en ftp es ftp en cada servicio

tiene su propio eh protocolo o esquema

eh luego viene eh dos puntos y barra

barra opcionalmente después puede venir

el usuario o password eh tal como

identifica aquí eh Este ejemplo que

hemos puesto donde hemos añadido Pues el

nombre de un usuario eh al URL web

típico entonces lo que nos lleva

simplemente a al login directamente

poniendo Ya esa palabra de usuario si

ponemos el password también separado por

dos puntos tal como indica aquí entonces

nos autentica y nos mete directamente en

la cuenta de usuario de ese usuario que

tuviese el nombre Félix y el password

que hubiésemos puesto Esto no se

recomienda hacer porque el password

podría circular en claro salvo que se

utilice el protocolo https que ese sí

que encripta y enviaría los passwords

sin que fuesen visibles e después de

esto eh Y esto tiene con el símbolo ad

este de aquí eh viene el nombre del

servidor eh la dirección del servidor ya

bien sea simbólica o o digital y el

puerto si no est el puerto por defecto

que está asignado a ese servicio por

ejemplo Aquí estaríamos accediendo a un

servidor web que estuviese conectado en

el puerto 8000 en vez del puerto 80 que

es el habitual eh A continuación tenemos

la ruta que identifica Pues un fichero

dentro del directorio hoy identifica un

servicio cuando lo que tenemos es una

aplicación web en vez de un servidor

estático tradicional eh ese esa ruta se

puede enriquecer por un query que son

unos parámetros por ejemplo para

identificar qué usuario o qué tipo de

elemento queremos acceder a una base de

datos eh Como se ilustra aquí el query

empieza por una interrogación y luego

pues los parámetros que tienen nombre y

valor nombre igual a valor pues van

separados por el ampersand Y por último

tenemos el fragment o anchor el ancla eh

que lo que indica es un elemento html

dentro de la página html por eso Si

nosotros ponemos aquí el el el símbolo

este con p3 eh lo que estamos

direccionando es el elemento html dentro

de la página html que tiene el

identificador p3 Y en vez de mostrarnos

la página por el principio nos la

mostraría por la mitad empezaríamos

veríamos la parte de arriba Pues el como

primer elemento elemento html que tiene

este identificador el URL por lo tanto

es un elemento fundamental porque es el

que identifica

eh Dónde está digamos Dónde están los

recursos en internet y permite hacer

transformar internet en un enorme

recurso de computación podemos combinar

procesar y mezclar los recursos como

queramos el URL es parte de la

definición genérica que hizo Tim berners

Lee de uris uniform resource identifiers

que están definidos aquí para los que

tengan intención de profundizar un poco

más aunque esto es una norma como verán

bastante larga y difícil de de entender

en su en su totalidad el URL Aquí

también lo pueden ver en la Wikipedia

que tiene una explicación rápida y

concisa e los servidores son los

elementos que sirven páginas web

e los servidores son programas son

programas que están conectados dentro de

la máquina servidora a un puerto tcp o

udp como sabrán de la arquitectura de

internet por ejemplo el web se conecta

en el puerto 80 es el puerto que tiene

asignado el correo electrónico en el

puerto 25 si es mtp Y si utiliza pop 3

en el 110 y map en el 143 eh el htp

seguro en 443 el protocolo shsh el

puerto 22 Y así sucesivamente las

máquinas servidoras tienen direcciones

conocidas Y si el usuario no conoce su

dirección porque esta como habrán visto

la transparencia anterior forma parte

del URL no puede acceder a ello URL

lleva la dirección incluida del servidor

al que queremos acceder bien puede ir en

forma más simbólica como googlecom

upm.com localhost por ejemplo dirección

de mi máquina o las direcciones

numéricas tanto en la versión ipv4 que

es la versión antigua del protocolo IP

como ipv6 que es la versión moderna del

protocolo

IP Cuando alguien establece o Busca una

página es decir mete un URL en el

cajetín de búsqueda de un navegador y

hace clic Como haría esta persona que

tenemos allí entonces le atiende un

programa que es el navegador web que

está conectado el navegador web Eh no

está conectado a ningún Puerto

específico porque es una máquina cliente

y las máquinas cliente pueden conectarse

a cualquier Puerto entonces lo que hace

establecer una conexión

http a través de un puerto que se elige

aleatoriamente por ejemplo aquí pues en

este ejemplo sería el

943 13 y ese se establece siempre con el

puerto que está especificado en el URL

del navegador que sería en el caso de un

servidor web estándar el puerto 80 esta

conexión eh http en el caso más sencillo

es el circuito virtual tcp eh pero Eh

puede tener formas más complejas ya que

http está pensado para trabajar en el

contexto este tan fragmentado que tiene

la internet actual donde no hay

conectividad extremo a extremo Una vez

que se ha establecido este circuito el

cliente y el servidor interacción a

través del protocolo propio de esa

aplicación en el caso del web es http y

lo que realizan es transacciones http

que son transacciones eh que permiten

gestionar recursos en servidores el una

transacción Http es una operación

unitaria eh Son operaciones

independientes unas de otros cada

transacción que inicia siempre el

cliente el cliente es el que siempre

lanza la primera solicitud eh Cuando

indica que quiere hacer una solicitud se

establece el circuito la conexión http

si esta no está todavía establecida está

establecida se reutiliza y una vez que

la está establecida si habido que

establecerla de nuevo entonces se envía

la sol http que se envía del cliente al

servidor y tiene este formato de aquí

con tres partes eh el servidor lee la

solicitud y responde con una respuesta

http que tiene también una estructura

muy similar con tres partes tanto

solicitud como respuesta tienen una

primera línea donde va la información

más importante la información más

importante en la transacción http get

que es la transacción que permite pedir

una página web para que nos la Sirva y y

la pueda presentar en el navegador tiene

esta estructura esto es un String donde

va Aquí simplemente

el el la palabra get en mayúsculas luego

un blanco luego la ruta de la página

dentro del servidor para que el servidor

pueda identificarlo dentro del

repositorio de recurso y luego la

versión http que se está utilizando

luego viene una lista de parámetros todo

esto es texto y por últim eh los

parámetros acaban con una línea en

blanco y luego viene el cuerpo que en el

caso de get está vacío y en la respuesta

tenemos que viene pues la versión de

que está utilizando el código de

respuesta cuando se sirve una página

correctamente sea el código de respuesta

200 lleva el mensaje asociado hoc si no

encontrase la página bueno estuviese en

este servidor entonces manda el mensaje

404 not Found que habrán recibido cuando

buscan una página que no existe y

después vien los parámetros que ya

veremos más adelante en los próximos

temas su estructura y al fin se limitan

por una línea en blancoa y después viene

el cuerpo que es donde va el contenido

como Pues el sitio donde se carga el el

fichero que se envía que en este caso

sería la página web y esta página web es

la que el cliente muestra en el

navegador por eso la navegación web Pues

nos permite a desde cualquiera cliente

acceder a cualquier servidor y con estos

tres elementos ya bien sea cuando clicem

en un enlace o cuando busquemos a través

del cajetin acceder a cualquier página

web que esté en cualquier servidor de

internet aquí tiene básicamente un

resumen de lo que hemos visto hasta Lo

acabamos de ver y con esto acabamos

Muchas gracias