• Tiempo: 2h (50 + 50min)
• Fecha: Martes, 30 de Enero de 2024
• Objetivos de la sesión:
  • Conocer los orígenes de internet y su evolución
  • Primer contacto con los elementos relacionados con la web
  • Explicar el documento HTML hola mundo (para avanzar con las prácticas)

• Escenario
• Historia
• La WEB
  • Formato URL
  • Funcionamiento
    • Ejercicio 1
• Ventajas/Inconvenientes
• Páginas dinámicas
• Tecnologías en el lado del cliente
• Tecnologías en el lado del servidor
• Introducción a HTML
  • Documento HTML hola mundo
  • Estructura del documento Hola mundo
• VSCode y HTML
  • Extensión HTML-preview
  • Escribiendo el Hola-mundo desde cero
  • Previsualizando el Hola mundo desde VSCode
  • Mostrando el hola mundo desde el navegador
  • Modificando el documento
• Tutoriales del W3C-school
• Descargas
• Autor
• Licencia
• Enlaces

Partimos del siguiente escenario.

Tenemos un teléfono móvil (u otro dispositivo) y accedemos a la web de la wikipedia.

En pocos segundos vemos en nuestra pantalla su página principal.

¿Qué es todo lo que ha pasado para que eso sea posible?

En ciencia y en ingeniería los problemas complejos se dividen en capas o niveles.

En cada uno de ellos se resuelve un problema concreto.

El modelo OSI (Open Systems Interconnection) de la ISO (Organización Internacional de Normalización) es un marco conceptual que divide las funciones de un sistema de comunicación en siete capas.

Estas capas, numeradas de 1 a 7, se conocen como niveles OSI y cada una de ellas tiene responsabilidades específicas.

Se encarga de la transmisión de bits a través de un medio físico (cables, fibra óptica, etc.).

Define las características eléctricas, mecánicas y funcionales de la interfaz física entre el dispositivo y el medio de transmisión.

Maneja la transmisión confiable de datos a través de un enlace físico.

Realiza detección y corrección de errores, control de flujo y control de acceso al medio.

Ofrece funciones de enrutamiento para el transporte de datos entre nodos en diferentes redes.

Puede gestionar la fragmentación y reensamblaje de datos, así como la dirección lógica de los dispositivos.

Proporciona la entrega de extremo a extremo de datos de manera fiable y eficiente.

Ofrece control de flujo, segmentación y reensamblaje de datos, y control de errores.

Establece, mantiene y termina sesiones entre aplicaciones.

Ofrece servicios como el control de diálogo, la sincronización y la recuperación de errores.

Se encarga de la representación de datos, la traducción y la compresión.

Garantiza que la información sea presentada de manera comprensible para las aplicaciones.

Proporciona servicios de red directamente a las aplicaciones del usuario.

Incluye servicios como el correo electrónico, transferencia de archivos y acceso a bases de datos.

Cada nivel OSI se comunica con los niveles adyacentes para proporcionar un servicio completo de comunicación de extremo a extremo.

Este modelo proporciona una estructura modular que facilita la interoperabilidad entre sistemas de diferentes fabricantes al separar las funciones de comunicación en capas bien definidas.

El protocolo HTTP (Hypertext Transfer Protocol) opera en la capa de aplicación (nivel 7) del modelo OSI.

HTTP es un protocolo de comunicación que se utiliza para la transferencia de información en la World Wide Web.

Funciona sobre el protocolo de transporte TCP (Transmission Control Protocol), que pertenece a la capa de transporte del modelo OSI.

En una transmisión típica de datos web, HTTP se utiliza para la comunicación entre el cliente (como un navegador web) y el servidor que aloja la información web.

HTTP define cómo se deben enviar y recibir mensajes entre el cliente y el servidor para solicitar y entregar recursos web, como páginas HTML, imágenes, hojas de estilo, etc.

Aunque HTTP opera en la capa de aplicación del modelo OSI, es importante destacar que el modelo OSI es un marco teórico y no todos los protocolos se ajustan perfectamente a sus niveles.

HTTP se apoya en los servicios proporcionados por las capas inferiores, como TCP/IP (o UDP/IP), que gestionan la transmisión de datos a través de la red.

Algunos hitos importantes que han llevado a la web actual

• 1970: Arpanet. Departamento de defensa. Creación de una red segura capaz de sobrevivir a ataques nucleares. Ideas claves
  • Red descentralizada
  • Multiples caminos entre puntos
  • División de mensajes en fragmentos
• 1983: Protocolo IP (32 bits), TCP (Red abierta. RFC)
• 1985: Creación de la FSF por Richard Stallman
• 1991: Nacimiento de Linux (Linus Torvalds). Actualmente todos los supercomputares en el top 500 usan el Sistema Operativo GNU/Linux. Móviles Android. Prácticamente todos los servidores y ruters de intenrnet llevan Linux
• 1991: Tim Berners-Lee: Primer nodo web en el CERN
• 1994: Creación del consorcio W3C. Director: Tim Berners-Lee. Recomendaciones y estándares de la WEB
• 1995: Comienza la guerra de los navegadores
• 2000: Burbuja .com. Entra en escena Google
• 2004: Firefox, Facebook, Arduino
• 2005: Youtube
• 2006: Twitter
• 2007: Git
• 2008: Github
• 2010: Instagram, RISC-V (Procesador abierto)
• 2011: Gitlab
• 2015: FPGAs Libres (Obijuan: Algo que a medio largo plaza tendrá un impacto muy grande en la tecnología)
• 2018: TikTok

La web es una colección de documentos enlazados a través de hiperenlaces.

Cada recurso queda unívocamente definido por su URL (Localizador de recurso).

En los servidores hay un fichero especial, index.html, que contiene la página principal.

Está escrito en lenguaje HTML.

Una URL (Uniform Resource Locator) es una cadena de caracteres que se utiliza para identificar de manera única la ubicación de un recurso en la web.

La URL proporciona información sobre cómo acceder al recurso y está estructurada de la siguiente manera:

esquema://usuario:contraseña@host:puerto/ruta?consulta#fragmento

El formato general de las URLs:

Indica el protocolo utilizado para acceder al recurso.

Ejemplos comunes son "http", "https", "ftp", etc.

Opcionalmente, pueden proporcionarse para acceder a recursos que requieren autenticación. Sin embargo, el uso de usuario y contraseña en las URLs es cada vez menos común por razones de seguridad.

Especifica la ubicación del recurso en la red.

Puede ser una dirección IP o un nombre de dominio (por ejemplo, "www.ejemplo.com").

Opcional, indica el puerto al que se conectará el cliente para acceder al recurso.

Si no se especifica, se asume el puerto predeterminado para el esquema utilizado (por ejemplo, 80 para HTTP).

Especifica la ubicación precisa del recurso en el servidor.

Puede incluir directorios y archivos.

Opcional, se utiliza para enviar parámetros al recurso. Se utiliza sobre todo en las búsquedas online.

Opcional, se utiliza para especificar una sección específica dentro del recurso, como un anclaje en una página web.

Cuando un usuario introduce una URL en un navegador web y presiona "Enter", el navegador realiza una serie de pasos para acceder al recurso:

1. Resolución de DNS

Si la URL contiene un nombre de dominio, el navegador utiliza el sistema de nombres de dominio (DNS) para traducir el nombre de dominio a una dirección IP.

2. Establecimiento de Conexión

Utilizando el protocolo especificado en el esquema (HTTP, HTTPS, etc.), el navegador establece una conexión con el servidor.

3. Solicitud y Respuesta HTTP

El navegador envía una solicitud HTTP al servidor, indicando el recurso específico que se desea.

El servidor procesa la solicitud y devuelve una respuesta, que puede incluir el recurso solicitado.

4. Renderización del Recurso

Si la respuesta del servidor es exitosa, el navegador renderiza el recurso, ya sea una página web, una imagen u otro tipo de contenido.

Una URL funciona como un identificador que le dice al navegador web cómo acceder a un recurso específico en la web y cómo interactuar con él mediante un protocolo de comunicación como HTTP o HTTPS.

HTTP maneja varios tipos de solicitudes.

Solicita la recuperación de un recurso en el servidor.

Se utiliza para obtener información, como una página web, una imagen o un archivo, desde el servidor.

Las solicitudes GET son idempotentes, lo que significa que realizar la misma solicitud varias veces no tiene efectos secundarios diferentes de obtener la misma respuesta.

Envía datos al servidor para que sean procesados.

Se utiliza comúnmente en formularios web y en situaciones en las que se están enviando datos al servidor para ser almacenados o procesados.

Las solicitudes POST no son idempotentes.

Se utiliza para cargar un recurso en el servidor o actualizarlo.

La diferencia entre PUT y POST radica en la intención: PUT se utiliza cuando el cliente tiene la intención de reemplazar completamente el recurso en la ubicación especificada.

Solicita que se elimine el recurso especificado en la URL del servidor.

Al igual que PUT, DELETE es idempotente, ya que realizar la misma solicitud varias veces no tiene efectos secundarios diferentes de obtener la misma respuesta.

Similar a GET, pero solicita solo los encabezados del recurso sin el cuerpo de la respuesta.

Se utiliza para obtener información sobre el recurso sin descargar el contenido completo.

Esta solicitud es útil cuando se quiere saber detalles sobre el recurso sin necesidad de descargar todos los datos.

Solicita información sobre las opciones y requisitos de comunicación disponibles para el recurso especificado.

Se utiliza para determinar las opciones y/o requisitos de comunicación antes de iniciar la solicitud real.

Cada método tiene un propósito específico y se utiliza según las necesidades de la aplicación web.

Ejemplo de funcionamiento: Acceso a una web que tiene un fichero índice con dos imágenes (A y B) y un enlace a otro documento C que tiene otra imagen (D).

¿Qué es lo que ocurre desde que se introduce la URL en el navegador?

Las Fases son:

• Fase 1: El usuario introduce la URL en el navegador. Esta URL puede estar abreviada: www.urjc.es.
• Fase 2: El navegador convierta la URL en el formato correcto: http://www.urjc.es:80/.
• Fase 3: El navegador solicita el documento raiz (index.html) al servidor, a través de una solicitud [HTTP GET].(https://developer.mozilla.org/es/docs/Web/HTTP/Methods/GET) del protocolo HTTP.
• Fase 4: El Servidor devuelve el fichero index.html. Queda almacenado en la máquina del cliente.

• Fase 5: El navegador abre el fichero index.html y lo analiza. Muestra al usuario su contenido.
• Fase 6: El navegador detecta que hay una imagen (A). Pide al servidor el fichero con esa imagen.
• Fase 7: El servidor devuelve la imagen A y se almacena en el cliente.
• Fase 8: El navegador muestra la imagen.

Se repite el proceso con la imagen B.

Al analizar el index.html, el navegador ha detectado que se está usando otra imagen (B).

Se solicita al servidor, se almacena en la máquina cliente y se muestra en pantalla.

Por último, en el index.html hay un enlace a otro documento html (C), que tiene una imagen (D).

Ese documento es un enlace, por lo que NO se solicita el documento al servidor (ni la imagen de la que depende)

Así quedaría después de haberse completado el acceso a la página.

Es importante ver que los documentos C y D NO se han descargado en el cliente.

Se renderiza en la pantalla el enlace a C, pero no se ha descargado su contenido.

¿Qué ocurre si el usuario pincha en el enlace hacia el documento C?

¿Por qué usar tecnologías web?

• Ventajas:
  • Multidispositivo: Nos permiten acceder a ellas desde cualquier dispositivo: móvil, tablet, ordenador...
  • No hay que instalar nada: Usamos el navegador
  • Actualización de contenido/funcionalidad inmediata
  • Muy fácil de usar
• Inconvenientes:
  • Dependencia de Internet

• Inicialmente, las páginas eran documentos inmutables
• Actualmente se pueden generar al vuelo, a partir de plantillas, antes de entregarlas al cliente

Las veremos en esta asignatura

• HTML: Contenido. Define la Estructura
• CSS: Estilo del contenido (tipo de letra, colores...)
• Javascript: Acciones

Se verán en la asignatura: Laboratorio de Tecnologías WEB (LTAW)

• Node.js
• Python, Django, Flask
• Ruby
• Servlets
• PHP
• CGI

Veremos una mini-introducción a HTML para empezar a practicar en el laboratorio.

Más adelante volveremos a ello en las sesiones de teoría.

El HTML es un lenguaje de marcado que nos permite generar documentos estructurados

¿Por qué queremos que los documentos estén estructurados?

• Dar estilo a las partes (Ej. que los apartados principales tengan tipo de letra xxxx)
• Procesamiento mediante algoritmos: los documentos estructurados se convierten en estructuras de datos (árboles) que podemos recorrer usando lenguajes de programación

<!DOCTYPE html>
<!-- Esto es un comentario -->

<html>
  <head>
    <meta charset="utf-8">
    <title>Ejemplo HTML</title>
  </head>

  <body>
    <h1>Capítulo 1</h1>
    <p>En un lugar de la URJC...</p>
  </body>
</html>

El código html, al ser estructurado, lo procesa el navegador (o cualquier otro programa) y crea un árbol en memoria, para representarlo

Al ser ahora una estructura de datos, nuestros programas lo pueden recorrer para extraer la información, o para añadir elementos nuevos.

Otra forma de representarlo es la siguiente, en la que se muestran los diferentes ámbitos. Así, la cadena "Capítulo 1" está en el ámbito H1, que está dentro del ámbito BODY que a su vez está dentro del ámbito HTML

El Visual Studio Code permite trabajar directamente con ficheros HTML: realiza el resaltado de sintaxis y el autocompletado.

Para previsualizar los ficheros HTML fácilmente instalaremos la extensión HTML preview.

En este gif animado se muestra el proceso

Listo, NO hay que hacer nada más.

Vamos a escribir el fichero hola_mundo.html desde el VSCode.

Lo guardaremos en el repositorio de las prácticas (2020-2021-CSAAI-PRACTICAS), en la carpeta P1/S1 (eL S1 es porque es un ejemplo que estamos haciendo en la sesión 1 de teoría)

Lo empezamos a escribir pero... ¡NO LO ESCRIBIREMOS CARÁCTER A CARÁCTER! Vamos a usar la ayuda que nos da VSCode.

La primera línea es la siguiente:

<!DOCTYPE html>

Escribimos el carácter <. Al hacerlo se despliega un menú con posibles etiquetas.

Vemos que la nuestra (!DOCTYPE) está la primera.

Pulsamos en el TAB (o en Enter) y nos aparece la etiqueta completa. Pulsamos Enter para pasar a la siguiente línea

La siguiente línea es un comentario.

No hace falta ponerlo, pero lo vamos a insertar para practicar:

<!-- Esto es un comentario -->

Tecleamos los 4 primeros caracteres de apertura del comentario: <!-- y automáticamente nos aparece la parte final.

Escribimos el comentario

Los comentarios también se pueden introducir muy rápidamente seleccionando el texto a comentar y pulsando las teclas Ctrl + / (NOTA: En Windows el atajo es Alt+Shitf+A)

Ahora escribimos la etiqueta de apertura <html>. Simplemente escribimos ht y le damos al TAB (o enter) y luego al Enter. Nos aparece la etiqueta de cierre: </html>

Escribimos la etiqueta de apertura de la cabeza <head>. Escribimos hey le damos al TAB y luego al Enter. Automáticamente se nos añade la etiqueta de cierre </head>

Esta es la siguiente línea:

<meta charset="utf-8">

Escribimos me + TAB. Nos metemos dentro de la etiqueta y tecleamos c + TAB. Introducimos "utf-8"

Para la etiqueta <title> escribimos t+ TAB

Introducimos la etiqueta <body> con bo + TAB

Y por último las dos etiquetas que nos falta: <h1> con h1 + TAB y <p> con p + TAB

Lo guardamos. Este es el aspecto que tiene nuestro documento:

Súbelo a tu repositorio

Para que se nos renderice el documento HTML pinchamos en el botón de la parte superior derecha que dice Open Preview to the Side

Al hacer nos aparecerá en la derecha la visualización. En mi caso tengo el tema oscuro, por lo que me sale con fondo negro y letra blanca

Los ficheros HTML los podemos visualizar en el navegador. Una forma es abriendo un explorar de ficheros de tu sistema operativo desde el VSCode, dándole al botón derecho + Open Containing Folder, y haciendo doble click en el fichero hola_mundo.html. Se te abrirá en el navegador predeterminado (en mi caso Firefox)

Fíjate en la URL de la parte superior.

Comienza por file://.

Este esquema indica que el navegador está mostrando un fichero html que está en el sistema de ficheros local de tu máquina

si tenemos la previsualización abierta, se nos irán mostrando los cambios en la parte derecha según los vayamos haciendo. Para probarlo añadiremos un párrafo nuevo:

<p>Añadiendo un párrafo nuevo</p>

Para verlo desde el navegador, si ya tenemos abierta la página sólo hay que guardar el fichero html desde VSCode y darle al botón de recargar en el navegador

Este el nuevo código html modificado:

<!DOCTYPE html>
<!-- Esto es un comentario -->

<!-- Esto es
otro comentario
pero en varias
líneas  -->

<html>
    <head>
        <meta charset="utf-8">
        <title>Ejemplo HTML</title>
    </head>
    <body>
        <h1>Capítulo 1</h1>
        <p>En un lugar de la URJC...</p>
        <p>Añadiendo un párrafo nuevo</p>
    </body>
</html>

Y así se ve en el navegador:

Para sobre HTML de manera práctica, y familiarizarse con las diferentes etiquetas, utilizaremos este tutorial de HTML del W3shool.

Está en inglés, pero es muy didáctico y sencillo, con muchísimos ejercicios para practicar

• Diapositivas de apoyo. Profesor Jose María Cañas

Jesús Parrado Alameda (jesusgpa)

• Creado a partir del contenido generado por el profesor Jose María Cañas
• Creado a partir del contenido generado por el profesor Juan Gonzalez-Gomez

• Universidad Rey Juan Carlos de Madrid
• Escuela Técnica Superior de Ingeniería de Telecomunicaciones (URJC)