Conceptos sobre Paginas Web

 

- ¿QUE ES EL WORD WIDE WEB?

PARA QUE SIRVE UNA DIRECCION IP

COMO FUNCIONA EL CLIENTE SERVIDOR

QUE ES EL HTTP Y HTTPS Y CUAL ES SU DIFERENCIA 

QUE ES UNA URL

EXPLICAR El Ping y el DNS

Conceptos básicos para trabajar PW

Herramientas: Símbolo del sistema (CMD) o Terminal.

Dinámica:

1. Ping y DNS: Pide a los alumnos que ejecuten el comando ping google.com. Deberán anotar la dirección IP que responde. Luego, pídales que peguen esa IP directamente en la barra de direcciones del navegador para ver qué sucede.

2. Rastreo de Ruta: Utilizando el comando tracert [url_de_un_diario_local], deben analizar cuántos "saltos" (nodos/routers) da un paquete de datos antes de llegar al destino.

3. Reflexión: ¿Por qué es más lento llegar a un servidor en Japón que a uno en su propio país? Introducir el concepto de latencia y nodos de red                

na actividad física o diagramada para entender el protocolo de transferencia de datos y la diferencia de seguridad.

• El Escenario: Tres alumnos actúan como Cliente (Navegador), Servidor y Hacker (Man-in-the-middle).

• Ronda 1 (HTTP): El Cliente envía un papel con una "contraseña" escrita al Servidor. El Hacker puede interceptar el papel en el camino y leerlo en voz alta.

• Ronda 2 (HTTPS): El Cliente y el Servidor primero intercambian una "caja con candado" (Certificado SSL/Llave pública). El mensaje viaja dentro de la caja. El Hacker lo intercepta, pero no puede leerlo.

• Análisis Técnico: * Discutir los códigos de estado HTTP que ven a diario: 200 (OK), 404 (Not Found), 500 (Server Error).

¿Cuál de los 2 situaciones son mas seguras y porque?

1 . Abrir cualquier sitio web y presionar F12 (Herramientas de Desarrollador).

2. Ir a la pestaña "Network" (Red) y recargar la página. 

3. Observación: Los estudiantes deben identificar: * El Método (GET para traer datos, POST para enviar). 

* El Tipo de archivo (documento, script, imagen). * La Cabecera (Header): Ver cómo el navegador le dice al servidor qué idioma prefiere o qué navegador está usando.

"Deben diseñar un protocolo de comunicación para una red de mensajería que solo envía emojis. ¿Qué reglas (protocolos) establecerían para que el receptor sepa quién envía, cuándo termina el mensaje y si el mensaje llegó corrupto?"

Deben definir:

1. Estructura del paquete (¿Qué va primero? ¿El ID del usuario o el emoji?).

2. Confirmación de recepción (ACK).

3. Acción en caso de error (¿Se reenvía o se descarta

Concepto	Analogía para clase
URL	La dirección postal (Calle Falsa 123).
IP	Las coordenadas GPS exactas de esa casa.
HTTP/S	El idioma y las reglas de cortesía para pedir algo.
Cliente/Servidor	El comensal que pide y el mozo/cocina que entrega

Trabajo Practico de Páginas Web

 

Una página web es un documento digital (usualmente escrito en HTML) capaz de contener texto, imágenes, video y enlaces. Su función principal es la comunicación y el acceso a la información a escala global.

·         Actividad 1: Piensa en una necesidad cotidiana (ej. comprar comida, estudiar, entretenerte). Explica brevemente cómo una página web resuelve esa necesidad mejor que un medio físico tradicional.

 

Una página web es un documento digital (usualmente escrito en HTML) capaz de contener texto, imágenes, video y enlaces. Su función principal es la comunicación y el acceso a la información a escala global.

• Actividad 1: Piensa en una necesidad cotidiana (ej. comprar comida, estudiar, entretenerte). Explica brevemente cómo una página web resuelve esa necesidad mejor que un medio físico tradicional.

---

2. La Infraestructura: Protocolos y Direccionamiento

Para que la web funcione, las computadoras deben hablar el mismo "idioma".

• Cliente-Servidor: Es el modelo de comunicación. El cliente (tu navegador) solicita datos y el servidor (una computadora potente y remota) los entrega.
• IP (Internet Protocol): La "dirección postal" numérica de cada dispositivo en la red.
• HTTP/HTTPS: El protocolo de transferencia. La S final en HTTPS indica que los datos viajan cifrados (seguros).
• URL: La dirección amigable que escribes (ej. https://www.google.com).
• WWW: El sistema de documentos interconectados por hipervínculos que se ejecutan en Internet.

 

Actividad 2: Identifica las partes de esta URL: https://www.educacion.gob.ar/recursos

1.      Protocolo: __________

2.      Subdominio (WWW): __________

3.      Dominio principal: __________

4.      Ruta/Directorio: _________

3. Desarrollo Web: El proceso de creación

El desarrollo web se divide principalmente en dos áreas:

1. Frontend: Lo que el usuario ve y toca (diseño, botones, colores).
2. Backend: La lógica "detrás de escena" (bases de datos, seguridad, procesamiento).

• Actividad 3: Si estuvieras creando una red social, menciona una tarea que haría el desarrollador Frontend y una que haría el Backend.

 

Evolución de la Web

La web no siempre fue dinámica como la conocemos hoy:

Etapa	Características
Web 1.0 (Estática)	Solo lectura. El usuario es un espectador pasivo.
Web 2.0 (Social)	Interacción, redes sociales, wikis. El usuario crea contenido.
Web 3.0 (Semántica/IA)	Datos conectados, personalización extrema e inteligencia artificial.

• Actividad 4: ¿En qué etapa de la web crees que nos encontramos actualmente al usar herramientas como ChatGPT o algoritmos de recomendación de TikTok? Justifica tu respuesta.

 

4. Investiga rápidamente en tu dispositivo: ¿Cuál es la diferencia entre Internet y World Wide Web (WWW)?

 

Actividad Practica:

2. Preparación de la Dinámica 

Divide a la clase en tres grupos y asígnales los siguientes roles:

• Grupo 1: Los Clientes (Navegadores). Tienen hojas de papel (Formularios de Petición) donde deben escribir qué quieren ver (ej. index.html, foto_gato.jpg, o pagina_inventada.php). Cada cliente tiene asignada una "Dirección IP de origen" (ej. IP: 192.168.1.5).

• 
  Grupo 2: Los Enrutadores/Cables (La Red). Son los encargados de transportar físicamente el mensaje del Cliente al Servidor y viceversa. Solo pueden entregar el mensaje si tiene la "IP de destino" correcta.

• 
  Grupo 3: Los Servidores (Web Server). Tienen carpetas físicas con "archivos" (hojas de papel que dicen "Página de Inicio", "Imagen"). Reciben las peticiones y deben armar la respuesta.

• 
  3. Ejecución del Juego 
  Se realizan varias rondas simulando diferentes escenarios de red:
  Ronda 1: Petición Exitosa (El 200 OK):
  Un Cliente escribe una petición válida (ej. "Quiero ver la página principal").
  El Enrutador lleva el papel al Servidor.
  El Servidor busca en su carpeta, encuentra el archivo, le pega un post-it que dice "Estado HTTP 200: Todo bien", y se lo da al Enrutador para que lo lleve de vuelta a la IP del Cliente.

• 
  Ronda 2: El Error Común (El 404 Not Found):
  Un Cliente pide un archivo que no existe (ej. juego_secreto.html).
  El Servidor busca en sus carpetas, no lo encuentra, y devuelve un papel con el mensaje "Estado HTTP 404: Archivo no encontrado".

• 
  Ronda 3: Caída del Servidor (El 500 Internal Server Error):
  El profesor interviene y le "ata las manos" temporalmente al grupo de los Servidores o les da un problema matemático difícil que los distrae. Cuando llega una petición, no pueden responder a tiempo o se equivocan, enviando un error 500.

• 
  4.   Cierre 
  Pídele a los estudiantes que vuelvan a sus lugares y guíalos para conectar el juego con la infraestructura real:
  ¿Qué pasaría si el "Enrutador" se queda por el camino? (Pérdida de paquetes / Time out).
  ¿Qué pasa si 100 clientes le piden cosas al servidor al mismo tiempo? (Ataque DDoS o saturación del servidor).