Introducción a la navegación WEB - URL - HTTP - HTML
Summary
TLDREl 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
🌐 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.
🔑 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.
📡 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.
Mindmap
Keywords
💡Cliente-Servidor
💡HTTP
💡URL
💡HTML
💡Servidor
💡TCP/UDP
💡Sockets
💡Protocolo
💡Transacción HTTP
💡GET
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
تصفح المزيد من مقاطع الفيديو ذات الصلة
⭐PROTOCOLO HTTP 🖥️ Requests y Responses con: GET, POST, PUT, PATCH y DELETE | DESARROLLO WEB 🌎
¡La historia completa de la web en 40 minutos! - La mejor explicación en español
¿Como funcionan las Paginas Web?
WEB 2 - #1 Arquitecturas Web
Web I - SPA y Ajax - Partial Render
Modelo Cliente Servidor, Explicación Simple
5.0 / 5 (0 votes)