Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Cómo funciona un sitio web

18/32
Recursos

Llevamos ya varios años navegando en internet en páginas informativas, foros de discusión, redes sociales, etc. Pero ¿sabemos realmente como es que estos sitios funcionan? ¿Cómo es que se guardan y envían nuestros mensajes?

¿Cómo es que navegamos en internet?

Cuando escribimos una dirección web y damos clic, se ejecutan una serie de pasos, que no vemos, pero que son responsables de que lleguemos o no al sitio elegido:

  • El navegador le hace una petición al sistema operativo para ver si tiene una versión en caché.

  • GET le pide al servidor los datos y se los envía a la IP del servidor.

  • El servidor responde con un número, como 200 (OK), 404 (No encontrado), 500 (error del servidor).

  • Se buscan los archivos que ya tenemos en caché.

  • Se empieza a desplegar el sitio web empezando por el texto.

  • Por último se solicitan las imágenes, videos y otros assets del sitio.

  • Las cookies son datos guardados en variables y van ambos lados, tanto en el servidor como en el navegador. Las cookies pesan, entonces es importante limitarlas para no afectar la velocidad de las peticiones.

Contribución creada por Annecode y Mayra López

Aportes 209

Preguntas 32

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Anotaciones de la Clase






soy tecnólogo ADSI llevo 8 meses sin hacer una línea de código, por coincidencia pude comprar pazti Basic llevo 3 días y son los 3 días más felices, motivantes y con más ganas de romper por fin con todas las metas que me eh planteado ya hace 2 años.
muchas gracias

Yo inspeccionando: Me parece que he visto un lindo gatito!!

Siento que cada vez empezamos a ser màs pràcticos, mis apuntes:

Clase 14
¿Que puedo aprender de esta clase?
¿Como puedo utilizarlo a nivel personal y a nivel profesional?
¿Para que me sirve este conocimiento?
¿CÓmo mejorará mi calidad de vida?
¿Cómo puedo ayudar a otras personas a través de este conocimiento?
¿Como puedo usar esta información para tomar mejores decisiones?

Puntos claves:

Cuando escribo heysoypaez.com o platzi.com:

  • Lo primero, el navegador hace una peticion al SO para ver si en cache esta la ip solicitada
    Una vez la tiene …

Paso 1 forma un http request a través de un GET

protocolo GET  {
GET /fundamentos https2
Host: www.platzi.com
User-Agent: Chrome 28
}

PASO 2 a través del Puerto http en el puerto 80, el servidor recibe la petición del navegador

PASO 3 Surge el HTTP Response en direcciòn al navegador


HTTP Response
---------------------------
http 200OK (O 404, 500
Date: xx
Last-modified: xxx
content-length: 13 B (cantidad de bytes de peticion http)
connection: close  // (o abiertas para sockets)
content-type: text/html (o image, o vifeo, o mp3)
<h1>hola</h1>
------------------------------
 

Si mi archivo tiene css, peticiones ajax vuelvo a pasar por el mismo camino en el punto numero 4

PASO 4: Assets Request

-> Vuelve al Punto 1 en cada Asset de manera independiente

¿Còmo hace el señor navegador para recordar quien soy yo?
¡A travès de las cookies!

  • Las coockies no van en el request o el response van en ambos lados

  • las coockies son un nombre y un valor, “id”:”gato

  • las coockies se pegan al request

  • Cada request que yo haga tiene las coockies instaladas

  • Estas entran al servidor cuando yo hago la peticion

  • La cookies se envia junto la cabecera http

  • Las cookies se llaman cookies porque vienen de las galletas de las fortunas que guardan mensajes

  • Las cookies pesan bytes por eso no hay que abusar de las cookies

Accion

  1. para averiguar que cookies guardan de mi inspeccionar > resources > cookies

Nota: En Chrome lo ves en Application (inspeccionar > application > cookies)

Deciciones

  1. Comprometerme a la buena pràctica de usar las minimas cookies necesarias

  2. Profundizar en como usar y como funciona el proceso http

Dejo el siguiente video para complementar la explicación de Cookies:
https://www.youtube.com/watch?v=S16ZOjaWw-I

Espero les sea de utilidad.

Cookies: Eran herramientas anteriormente utilizadas, para guardar las preferencias que tenias al momento de ingresar a una pagina y como por ejemplo cambiar el idioma, aqui el cookie cuando volvias a entrar ya sabia que preferencia de idiomas tenias anteriormente y te hace la carga automatica, pero ahora se utilizan para el marketing. Otro caso tambien es que funcionan como una base de datos para guardar la informacion que introduzcas en ese momento dentro de la pagina web, como por ejemplo tu usuario. Entonces basicamente una cookie es un forma de mandar datos entre el cliente y el servidor.

–> Ademas tambien los cookies funcionan para hacer un track de lo que hizo un usuario dentro de la pagina web, es decir sabe cuales fueron los items que agregaste a un carrito de compra, cuanto tiempo duraste en sesion, cuales fueron los links que viste dentro de la pagina, el tipo de dato que puede guardar un cookie depende del programador y como se estableca pero es casi ilimitada las opciones que se tienen

Hola. Encontré las cookies de cualquier sitio así (Chrome):

  • F12

  • Desplazar hacia la pestaña que dice Application

  • En la barra izquierda dice “Cookies”

Abre Chrome en tu ordenador.
Arriba a la derecha, haz clic en Más Más y luego Configuración.
Abajo, haz clic en Configuración avanzada.
En “Privacidad y seguridad”, haz clic en Configuración del sitio web.
Haz clic en Cookies y luego Ver todas las cookies y datos de sitios web

Mi resumen de la clase

  1. El navegador hace peticiones al SO, para ver si tiene en cache los DNS para resolver el sitio que va a buscar.

  2. El navegador cuando cuando entiende cuàl es la IP, forma internamente en la memoria RAM un HTTP REQUEST, en formato GET.
    3)El servidor responde con un código, que representa un mensaje.

  3. Assets Request, cuando el html que se pidió puede requeriri más elementos , como imágenes, sonidos, backgrounds, código javascript, si el código javascript empeiza a hacer más peticiones de AJAX se repite todo el proceso por cada uno de los elementso de manera independiente, con la url del asset que sale del HTML.

Cookies, van en el request y en response, son variables con un valor, se debe tener en cuenta de utilizar las necesarios, pues tienen un peso y puede afectar la velocidad de las peticiones.

1xx: Respuestas informativas
100 Continue
102 Processing (WebDAV - RFC 2518)
103 Checkpoint

2xx: Peticiones correctas
200 OK
201 Created
202 Accepted
203 Non-Authoritative Information (desde HTTP/1.1)
204 No Content
205 Reset Content
206 Partial Content
207 Multi-Status (Multi-Status, WebDAV)
208 Already Reported (WebDAV)

3xx: Redirecciones
300 Multiple Choices
301 Moved Permanently
302 Found (antes “Moved Temporarily”)
303 See Other (desde HTTP/1.1)
304 Not Modified
305 Use Proxy (desde HTTP/1.1)
306 Switch Proxy
307 Temporary Redirect (desde HTTP/1.1)
308 Permanent Redirect

4xx: Errores del cliente
400 Bad Request
401 Unauthorized4​
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Satisfiable
417 Expectation Failed
418 I’m a teapot
422 Unprocessable Entity (WebDAV - RFC 4918)
423 Locked (WebDAV - RFC 4918)
424 Failed Dependency (WebDAV) (RFC 4918)
425 Unassigned
426 Upgrade Required (RFC 7231)
428 Precondition Required
429 Too Many Requests
431 Request Header Fields Too Large)
449 Una extensión de Microsoft: La petición debería ser reintentada después de hacer la
acción apropiada.
451 Unavailable for Legal Reasons

5xx: Errores de servidor
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
506 Variant Also Negotiates (RFC 2295)
507 Insufficient Storage (WebDAV - RFC 4918)
508 Loop Detected (WebDAV)
509 Bandwidth Limit Exceeded
510 Not Extended (RFC 2774)
511 Network Authentication Required
512 Not updated
521 Version Mismatch

En Firefox

En Firefox > inspect element > storage > cookies

los videos de platzi me funcionan lento con mi internet. alguna sugerencia de como pueda disminuir la calidad mas de los 720 p para no tener tanto problema?

Las cookies son buenas, pero no hay que exagerar con muchas porque hacen más lenta nuestra conexión e intercambio de datos con el servidor web.

Encontre las cookiesss

Así sale en Chrome! (:

Siento que aquí ya me costó más trabajo comprender que en las clases anteriores, pero sigo entusiasta.

ya encontré los cookies de platzi pero no se como interpretarlo, creo que debo realizar el curso una segunda vez, algunos conceptos no se me quedaron.
alguna recomendación para estudiar o aprender mejor?

Jaja un maestro freddy… cuando queda un segundo en silencio tras explicar las Cookies

Tantos años como Tech Support y jamás escuche a alguien definir de una manera rápida y precisa una cookie.

Google Chrome versión 76.0.3809.100

Inspeccionar > Application > Cookies > https://platzi.com

Acostumbrábamos a inventar mil teorías de por qué se llamaban así las cookies, nunca pensé que fueran por esa razón…

Acá dejo de aporte de que son las cookies y para que sirven con mas detalle para los que no nos quedo claro:) https://www.youtube.com/watch?v=QFrUTDfYgnM

No se si alegrarme o que hacer, pero mientras más avanzo y aprendo, más entiendo todooooooooooooooo lo que me falta por saber.

En el link pueden encontrar más acerca de los códigos de estatus de respuesta HTTP códigos de respuesta

Mejor que las clases de mi universidad!

Que pasa en un minuto en intenet

Dato curioso. Las cookies 🥠 se llaman cookies porque vienen de las galletas de la fortuna, donde se envían datos dentro del modelo cliente servidor.

jeje sabes que el video tiene buen tiempo online cuando Freddy menciona Flash

Siempre había sentido que la red era cómo agua y ahora entiendo... estamos trabajando para ser plomeros digitales... saber como fluye es sólo el principio. Que comunidad tan genial 😁

Qué pasa cuando se quiere ingresar a un sitio web

  1. En el momento en el que se escribe la dirección de la página a la que se quiere acceder, el navegador le hace una petición al sistema operativo para ver si el caché tiene el DNS para resolver la petición.

    Los protocolos se encargan de manejar todas las peticiones que hacen la páginas de internet desde tu navegador hacia los servidores DNS, éstos transforman la dirección de la página web en una dirección IP y tu navegador se conecta a esa IP.

  2. El navegador, una vez descifra cuál es la IP a la que se quiere acceder, forma internamente en la memoria RAM un HTTP Request y lo organiza usando un formato GET, GET le pide al servidor los datos y se los envía a la IP del servidor (puerto 80).

  3. El servidor responde la petición mediante http (http 200, http 404 not found), y a esto se le conoce como HTTP Response.

  4. Assets Request, se hacen las nuevas peticiones al servidor desde lo que se desplegó en el navegador en el código HTML.

    La cookies son datos guardados en variables y van en el request y en el response del servidor. Las cookies pesan, entonces es importante limitarlas para no afectar la velocidad de las peticiones.

se me antojo una cockies

fui a ver y Platzi tiene una cookie para ver si el usuario está logueado, entre muchas otras.

Las Cookies como bien dice Freddy se acuño el termino por las galletas de la fortuna las cuales contenian un mensaje secreto en su interior, es una informacio enviada por el sitio web y guardada por el navegador con la finalidad de hacer consultas previas de la actividad.

las funciones principales son:

Recordar accesos .
Conocer los habitos de navegacion del usuario.

Una página web consiste en una serie de códigos que los navegadores pueden leer. En base a la información que incluye este código, podrán mostrar la página de forma adecuada. El código le va diciendo al navegador qué partes son texto, qué partes son referencias, qué partes son imágenes.

Crear una página web dinámica es un proceso más complejo en relación al de crear una estática, esto debido a que es necesario contar con un nivel importante de conocimiento previo sobre lenguajes de programación y gestión de bases de datos.

Su desarrollo requiere de lenguajes como el PHP, lo que permite definir características y funciones a placer buscando satisfacer nuestras necesidades (informar, vender, recabar datos, etc.). En estas páginas gran parte de sus tareas son ejecutadas en un servidor, el cual es el encargado de darle su dinamismo.

¿Cómo ver las cookies?
Para ver las cookies en chrome podemos acceder al inspector de elementos, luego a application, y en el menú localizamos storage, ahí estarán las cookies.
Cómo ver y borrar cookies a las que accedimos
En chrome vamos a los tres puntos de la esquina superior derecha, abrimos configuración, luego privacidad y seguridad, y aplastamos en configuración del sitio web. Aquí ponemos en cookies y datos del sitio, donde debemos aplastar en ver todas las cookies y datos del sitio web. Ahora sí las podemos ver y eliminar.
Para otros navegadores pueden ingresar aquí

Porqué 200, 404, o 500?

No pensé que el nombre de las cookies viniera de eso.

Ya entiendo para que son las famosas Cookies. Muy bueno.

Realmente no saben como esto es de ayuda en mi carrera!

para ver las cookies en chrome, van a inspeccionar un elemento luego en la doble flecha que señala a la derecha, clieck en application y a la izquierda aparece las cookies que esta guardando la pagina web.

es aconsejable periódicamente limpiar de cookies, ya que con el tiempo el pc se comporta lento

El tema de las cookies, me de dejó pensativa. Recuerdo que hace algunos años no salía ningún anuncio sobre aceptar cookies de un sitio y ahora es muy frecuente que al visitar un sitio le pida al usuario aceptar el uso de cookies. Alguien sabe por qué ahora es así?

Abusar de las cookies puede llegar a ralentizar los procesos de requests debido a que cada una de ella tiene un peso en bytes que debe ser considerado para la respuesta dada por el servidor.

Cómo saber que Cookies guarda un sitio web? >Configuración> Configuración avanzada > Configuración de sitio web > Cookies

Excelente.

Dato curioso sobre las Cookies.
Existe un tipo de Cookie llamada Zombie Cookie la cual es una cookie en HTTP que se recrea despues de ser borrada. El termino fue creado por Attorney Joseph H.

Me parece genial saber que le llaman cookies por galletas de la fortuna porque dentro hay información que transmite entre el cliente y servidor la cual hay que salvaguardar.Pero como todo no es bueno abusar pues haria que el sitio fuera pesado.

El exámen de este curso me va a llevar varios intentos

me encanta lo bien explicado que esta todo este curso

Actualmente, la forma de ver las cookies que son almacenadas en Chrome, es por Dev Tools (Click derecho -> Inspeccionar) en la pestaña Application
.
Adicional a esto, puedes ver el Local Storage, que es una especie de Base de Datos que vive en el navegador y puede ser consultada por el Front-end.
.
Así mismo, tenemos el Session Storage, que también es una Base de Datos como el Local Storage, pero que es limpiada cuando cierras el navegador, es decir, no es tan persistente como el Local Storage.
.
No está de más aclarar que, al poder ser consultadas por el Front-end, lo ideal es que NO guardar información sensible ahí 😅

  1. Solicitud del dominio desde el navegador
  2. El navegador busca la ip en la caché.
    2.1 Si está en la caché crea get/fundamentos
    con un Http requesto al servidor
  3. El servidor recibe el Http request, lo procesa y devuelve
    un Http response
    3.1 Con status code 200 si la solicitud fue encontrada
    3.2 Status code 404 si no fue encontrada
    3.3 500 Error del servidor (Error en el código normalmente)
  4. Assert request cuando debe mostrar elementos individuales en el HTML con los CSS, Vídeos.
    Repitiendo el proceso la veces necesarias pero con cada assert.

Códigos de estado de respuesta HTTP:
Los códigos de estado de respuesta HTTP indican si se ha completado satisfactoriamente una solicitud HTTP específica. Las respuestas se agrupan en cinco clases:
Respuestas informativas (100–199).
Respuestas satisfactorias (200–299).
Redirecciones (300–399).
Errores de los clientes (400–499).
y errores de los servidores (500–599).
https://developer.mozilla.org/es/docs/Web/HTTP/Status

Importante no abusar de las cookies para no limitar la velocidad de las peticiones

¿13?

Excelente explicación.

Saber dar uso correcto a la cookies, guardar lo necesario y lo mislo al dolicitar
Hacer más eficientes los sitios para aprovechar las nuevas tecnologías

¿Como funciona por debajo un sitio web?

Cuando voy a una Web el navegador consulta si tiene cacheado la dirección del DNS, si es así se hace un request al servidor con un método HTTP que puede ser (GET, POST, PUT etc).

Ese request normalmente lleva información relacionada con la información (Headers) que tiene data como el navegador desde el que se envió, data por el Body como un JSON don datos, Tokens de acceso (API KEYS) entre otros.

Una vez el servidor recibe la petición y la procesa normalmente va a responder de la misma forma con un status de la petición (Si falló o todo estuvo OK), con la fecha, el tamaño de la respuesta, el tipo de contendido, el contenido entre otros.

¿Donde quedan las cookies?

Todo lo que viaja por los headers le dan peso a la petición y las cookies, viajan en cada petición que hacemos al servidor, tanto en la petición como en la respuesta, por ende es de suma importancia usar este recurso con prudencia porque puede hacer las peticiones de mi sitio sumamente lentas.

Min 6:05 Freddy tiene su momento Pitbull.

oooooooooooo esto es maravilloso

las cookies en Google Chrome has de hacer lo siguiente:

Abre Google Chrome
Vete al menú del navegador haciendo clic en los tres puntos verticales en la parte superior derecha de la ventana.
En la opción «Privacidad y seguridad«, selecciona «Configuración de sitios web«.
Pincha en «Cookies«.
Para habilitarlas, activa el interruptor que hay en la opción «Con bloqueo«.

muy interesante!

Cuando se hace la busqueda de un sitio web en el navegador, este inspecciona dentro de la memoria del sistema operativo para ver si existe registro del mismo, de lo contrario recurre a el DNS. Una vez que se tiene la direccion, dentro de la memoria RAM se crea un HTTP request para el servidor por medio de formatos send o get, se encapsulan datos como el formato, la direccion del sitio web, el protocolo usado, el host del sitio ya que una direccion ip puede abarcar distintos sitios web y el user agent (que navegador se esta usando), ademas de otros datos no mencionados. Esta solicitud es enviada a la direccion IP del servidor y es recibida por medio del puerto 80. Una vez que el servidor la recibe, envia un HTML response donde incluye datos como la cantidad de elementos en el archivo, el nombre del servidor, si la conexion esta abierta o cerrada en http, el tipo de contenido o formato de archivo, la ultima vez que se modifico, el date, la peticion html y el estado de http (200 ok, 404 o 500, etc.). Si la peticion html requiere otros datos y otras modificaciones, se usa un Asset Request, esto noes mas que volver al punto 1 con la direccion usada en la peticion html, editar el http request, enviarlo al servidor hasta tener la informacion correcta. Las cookies son datos integrados en ambos formatos (get y send), vienen integradas, vienen integrados en el http request y al igual que el DNS son variables que pueden cambiar de valor cuando pasan por el servidor y se incluyen en el html reponse. Estas cookies son las responsables de mantener un tweet como borrador cuando por accidente saliste del navegador o guardar tus contraseñas.

sabes las cookies que un sitio web guarda

En la web, los clientes, como un navegador, por ejemplo, se comunican con los distintos servidores web con ayuda del protocolo HTTP, el cual regula cómo ha de formular sus peticiones el cliente y cómo ha de responder el servidor.

Básicamente, el hosting o alojamiento web es como una computadora remota que almacena tu sitio y le muestra la información a tus visitantes, quienes llegan a través del dominio.

1.- Los protocolos se encargan de manejar todas las peticiones que hacen la páginas de internet desde tu navegador hacia los servidores DNS, éstos transforman la dirección de la página web en una dirección IP y tu navegador se conecta a esa IP.

2.- Una vez se tiene la dirección IP el navegador envía un HTTP request en donde envía información con las características del cliente y los requerimientos del mismo, es decir, Host requerido, página del sitio que necesita, tipo de navegador, versión del navegador, etc.

3.- El servidor envía los resultados por medio del mismo protocolo HTTP en forma de un HTTP Response en donde manda todo el HTML del sitio web así como otros datos que el navegador necesita.

4.- Por último se cargan los assets de nuestro sitio web y es aquí donde se descargan imágenes, sonidos, etc.

Hace mas de 10 años que conoci de cristalab cuando estaba aprendiendo flash y actionscript, hoy me acabo de enterar que aun existe ese sitio web.

Se me antojan unas Toddy.

Al utilizar el navegador revisa en el sistema operativo si es que tiene una versión en la cache.
hace la solicitud mediante el método GET al servidor de DNS y recibe la ip del servidor.
el Protocolo HTTP envía la ip publica del servidor y la solicitud de que pagina quiere ver de que dominio y con que navegador lo esta revisando.
el servidor envía la respuesta 200 OK y response

Mmm asi que las Cookies no se comen🤔

navegadores como firefox cuentan con versiones como firefox developer que facilita la visuazación de elementos como cookies

Aquí algo sobre el protocolo HTTPS:
protocolo de aplicación basado en el protocolo HTTP, destinado a la transferencia segura de datos de hipertexto.
Es una versión segura de HTTP.

Excelente clase

Los pro y los contras de las cokkies.
https://www.youtube.com/watch?v=oXdrBA3OJdg

Los sitios web aun me cuesta entenderlos.

petición al sistema operativo a buscar la ip en cache
http request get, http headers
Http Responce
Assets Request
Cookies guarda las variables del sitio llega como parte de la cabecera
cookies por que traen información oculta
las cookies se mandan siempre por lo que no deberían ser muy grandes por que alentecen un sitio

¿que tan seguras son las cookies? no hay peligro de que empresas roben o tomen nuestra informacion sin relamente nosotros quererlo?

Entonces el assets request es traer cada uno de los elementos de la respuesta del servidor como imágenes, videos, texto y así? tipo cartas de exodia?

Excelente Explicacion.

Alguien usa el navegador web brave? Lo conseguí en Inspeccionar/ aplication/ storage/ Cookies. No se si sean solo esas.

Muy buena clase, explicación completa del tema.

Excelente!

¿Qué es Assets Request?

Muy Buena Clase !!!

tienes mucha razón que no se debe abusar de las cookies!

protocolos interesante

Buen vídeo

Inspeccionar>Application>cookies [chrome]

Muy interesante y super intendible

el mindblow de saber que las cookies se llaman asi por las galletas de la fortuna

https://developers.google.com/web/tools/chrome-devtools/storage/cookies?utm_source=devtools
en el link esta como ver editar y el8iminar cookies es de google

¿Como se realiza el envío de la respuesta del servidor al navegador? ¿Con esto se puede solucionar los problemas de cache que se puedan presentar en las diferentes páginas web?

excelente informacion

En opera sale de esta forma

muy buena información