Introducción a las tecnologías web

Sesión 1: Introducción a las tecnologías web

• Tiempo: 50min + 50min

Contenido

• 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
  • Demostración
• Tutoriales del W3C-school
• El Rincón Friki
• Descargas

Escenario

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

Historia

Algunos hitos importante 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

• 2008: Github

• 2015: FPGAs Libres (Opinión personal: Algo que a medio largo plaza tendrá un impacto muy grande en la tecnología)

La Web

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

Formato URL

El formato general de las URLs es

Funcionamiento

Ejemplo de funcionamiento (Simulación en la pizarra). 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 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 navigador 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

Ejercicio 1

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

Ventajas/Inconvenientes

¿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

Páginas dinámicas

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

Tecnologías en el lado del cliente

Las veremos en esta asignatura

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

Tecnologías en el lado del servidor

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

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

Introducción a HTML

Veremos una mini-introducción a HTML para empezar a practicar en el laboratorio. Más adelante volveremos a ello en las sesiones de terorí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

Documento HTML hola mundo

<!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>

Estructura del documento hola mundo

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 extrar la información, o para añadir elementos nuevos

Otra forma de representarlo es la siguiente, en la que se muestras 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

Demostración

En el laboratorio lo haréis vosotros, pero aquí os lo enseño en mi ordenador

• Abrir el hola mundo en el editor Atom
• Mostrar el documento en la previsualización del Atom
• Mostrar el documento en el Navegador
• Modificar el documento
• Mostrar el auto-completado

Tutoriales del W3C-School

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

El rincón friki

Al final de las clases de teoría, os enseñaré cosas que considero interesantes, aunque no estén relacionadas directametne con la asignatura. Es contenido que NO entra en el examen, simplemente os lo enseño como curiosidad, para despertar vuestro interés

• Freecad 0.18. Programa de diseño 3D, libre y multiplataforma. La versión estable es la 0.17, pero en breve se liberará la 0.18, que está en la fase final. Esta vesión de desarrollo se puede descargar desde aquí

• Elemento hola mundo: Ficha de casino. Diseñaremos en directo una ficha de casino, para veáis lo simple que es. Estos diseños 3D luego se imprimen en una impresora 3D
• Diseño con primitiva básica: cilindro. Descarga de fichero: ficha-casino.FCStd

• Diseño de un anillo básico: Usaremos dos cilindros y una resta. Descarga de fichero: anillo.fcstd

Descargas

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

Autor

• Juan González-Gómez (Obijuan)

Creditos

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

Licencia

Enlaces

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