1. Arquitectura y Desarrollo Web

Se trata de que conozcas todos los elementos que se pueden encontrar en una aplicación web y en la arquitectura web de un servicio. Aprenderás a:

1. Entender la diferencia entre la infraestructura internet y los servicios web

2. Conocer las diferentes partes de una arquitectura web

3. Entender los conceptos previos de las aplicaciones web

Está organizado en 8 talleres de unas 3 sesiones de clase. En total unas 24 sesiones de clase más tu trabajo en casa.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

1.1. Internet y Web (no es lo mismo)

1. Repaso (se ve en PAR - Planificación y Administración de Redes)

2. Son cosas diferentes:

   1. Internet (Infraestuctura)

   2. Web (Servicios)

3. Infraestructura Internet: TCP/IP + Servicios

4. Recordar los estándares (y las organizaciones)

5. El protocolo HTTP

Actividad T01-A01. Estudio y repaso Internet

40 preguntas sobre Internet ( Kahoot )

1.2. Arquitecturas

Según el enfoque ( tipos de arquitecturas )

1. Física: cómo está construida la infraestructura (el hardware)

2. Lógica: cómo está construido el servicio (el software)

El modelo Cliente / Servidor :

1. El Cliente

2. El Servidor

3. El protocolo (y el servicio)

El modelo de tres capas (Arquitecturas Web):

1. Capas Físicas

   

2. Capas Lógicas

   

El modelo MVC:

Actividad T01-A02. Tarea de Investigación

1. ¿Cual es la principal diferencia entre una arquitectura C/S y una P2P?

2. ¿El aula virtual Moodle, qué arquitectura seguirá?

3. ¿Y Discord?

4. ¿Y cuando hago una llamada de voz o una videoconferencia con Discord?

5. ¿Cuántos clientes se pueden conectar a un servidor HTTP?

6. ¿Qué protocolo usará ese servidor?

7. ¿Qué protocolo usará un cliente que se conecte a ese servidor?

8. ¿Algún ejemplo de protocolo que no sea HTTP?

9. Si uso JS para comprobar el DNI en un formulario, ¿en qué capa estaría trabajando?

10. Si uso PHP para insertar el DNI en la BD, ¿en qué capa estaría trabajando?

1.3. Página web

1. Estrictamente la petición web intercambia texto (txt, json, csv, html, css). Incluso los recursos multimedia.

2. Para eso se utiliza una codificación especial ( Tipos MIME )

3. Los lenguajes de marcas se usan (en la web) para:

   1. dar estructura

   2. dar estilo (básico)

   3. integrar recursos (hipertexto)

4. HTML no es HTTP

5. Sitio web: una o más páginas web (y todos sus recursos asociados)

6. Creacion de sitios web: muchas opciones

Actividad T01-A03. Sitio Web Sencillo

1. Envíame un sitio web sencillo que hayas hecho (empaquetado en ZIP). Tuviste que hacer uno para llegar a este curso.

2. Envíame tres enlaces a sitios web que uses habitualmente

3. El Marca, ¿es un sitio web?

4. Netflix, ¿es un sitio web?

5. Una videoconferencia usando discordweb, ¿es un sitio web?

6. ¿Cual sería el sitio web más sencillo que se podría construir?

7. ¿Y cual sería el sitio web más complejo?

1.4. Tecnologías Web

1. Las tecnologías que usamos para construir sitios (y aplicaciones) web.

2. Sitios web estáticos: HTML + CSS (opcional) + Javascript (opcional)

3. Modelo de tres capas:

   1. Front-End: Páginas estáticas + Javascript

   2. Back-End (generalmente):

      1. Servidor Web: la infraestructura

      2. Servidor de Aplicaciones: la programación

   3. Almacén Datos: los datos que se almacenan

Actividad T01-A04. Tecnologías web

1. ¿Donde puedo ver las especificaciones de HTML?

2. ¿Y de CSS?

3. ¿Y de Javascript?

4. ¿Cual es la última versión de cada uno de ellos?

5. ¿Algún servidor web (que no se el típico Apache o Nginx)?

6. ¿Sabrías distinguir un servidor web de un servidor de aplicaciones?

7. El servidor de aplicaciones, el web y el de base de datos, ¿tienen que estar en la misma máquina? ¿en la misma red?

1.5. Crear una Aplicación Web

Generar una página web (html + css):

1. Sitios Web estáticos (no propiamente aplicación web):

   1. Creación estática de contenidos

   2. Generadores estáticos de contenidos ( SSGs )

2. Sitios web dinámicos (aplicación web):

   1. se modifican en el cliente

   2. se modifican en el servidor

3. Single Page Application ( SPA ):

   1. Servicios Remotos (REST)

   2. Datos en texto (JSON)

Actividad T01-A05. Tipos de Aplicaciones Web

1. ¿Cómo hiciste para generar el sitio web que me enviaste?:

   1. ¿Qué editor web utilizaste?

   2. ¿Donde está alojado?

   3. ¿Lo podría editar yo?

2. ¿Cómo está generado este sitio web que estás viendo?

   1. ¿Qué editor web crees que usa?

   2. ¿Donde está alojado?

   3. ¿Podrías editarlo tú?

3. ¿Cual es la diferencia entre una página estática y otra dinámica?

4. ¿Que ventajas (y desventajas) crees que pueden tener las páginas SPA?

5. La web que más te gusta, ¿qué tipo de arquitectura crees que usa?

6. Aunque no es objeto del currículum de este tema, ¿alguna idea de lo que es JSON, REST y AJAX)

1.6. Entorno de Desarrollo Web

1. El editor de texto (o IDE)

2. Infraestructura Básica:

   1. Sistema de Archivos Local

   2. Sistemas de Archivos Remoto (Hosting)

   3. Intercambio de archivos (ftp, rsync, cvs, etc …)

3. Los sistemas CMS

   1. Proceso: Edición -> Presentación -> Publicación (y repetir)

   2. Generalente automatizado y como servicio web (usando un navegador)

   3. Con control, más o menos complejo, de usuarios y tipo de contenidos

   4. Para diferentes usos y con diferentes funciones y nivel de complejidad

   5. Lo más utilizado para la creación de páginas web

Actividad T01-A06. Entorno de Desarrollo Web

1. Dime un editor de desarrollo web que puedas usar en tu escritorio

2. ¿Y otro que puedas llevar en un pendrive?

3. ¿Qué mecanismo utilizas para enviar tus archivos locales a tu servicio de hosting?

4. GitHub Pages, ¿qué tipo de sistema sería?

5. ¿Y WordPress?

6. Si soy un instituto, ¿cuánto me costaría tener mi sitio web con Wordpress?

7. ¿Me compensa pagar o mejor lo hago con mi propio desarrollo?

8. ¿Cuántos sistemas CMS hay? Dime uno que creas que no conozca (no vale WordPress)

9. El servicio Shopify, ¿crees que sería un sistema CMS?

10. ¿Qué entorno de desarrollo vas a utilizar para tu desarrollo web?

1.7. El Cliente Web

1. El concepto es amplio, y más cuando ya se usan APIs

2. Cliente CLI: sin entorno gráfico

3. Cliente GUI: el navegador

   1. En local file:://

   2. En conexión https://

Actividad T01-A07. Revisar curso DWEC

Puedes revisar la información en Cliente Web (y herramientas) por si quieres profundizar

1.8. El Servidor Web

1. Servidor Web: Un software que ejecuta el protocolo HTTP o HTTPS

   • Funcionamiento (básico) de la conexión cliente vía HTTP:

     1. GET (no envía body)

     2. POST (envía datos en el body)

   • Algunas estadísticas de uso : diferentes servidores web

   • Por ejemplo, podemos usar: Apache , ngnix

2. Diálogo HTTP ¿ Cómo funciona HTTP ?

3. Servidor Aplicaciones: añadir una capa de programación (controlador o lógica de programación) para la generación dinámica de html

   • Ejecutar Aplicaciones Web:

     • En el Cliente - front-end: Javascript

     • En el Servidor: PHP y similares

   • LAMP es una arquitectura completa (no sólo servidor http)

Actividad T01-A08. Trabajo sobre servidores web

1. ¿Cuántos servidores web hay?

2. ¿Podrías contarme un poco la historia de Apache?

3. ¿Existe un servidor que se llama Naviserver?

4. ¿Es un servidor web o un servidor de aplicaciones?

===

1.8.1. En resumen

1. Arquitecturas Web y Tecnologías habituales:

   

2. Una visión completa (más actual y técnica)

   

---