Sesion 1 Introduccion a las tecnologias web - jesusgpa/2022-2023-CSAAI GitHub Wiki
- Tiempo: 2h (50 + 50min)
- Fecha: Martes, 31-Enero-2023
-
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
- Ventajas/Inconvenientes
- Páginas dinámicas
- Tecnologías en el lado del cliente
- Tecnologías en el lado del servidor
- Introducción a HTML
- VSCode y HTML
- 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.
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
- 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.
El formato general de las URLs es:
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 sintáxis y el autocompletado.
Para previsualizar los ficheros HTML fácilmente instalaremos la extensión HTML preview. En este gif animado se muestra el proceso
¡Listos! 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
