Introducción a las aplicaciones web - HackMD

<style> .reveal section img { background:none; border:none; box-shadow:none; } .reveal blockquote { width: 90% } #attribution { font-size: 12px; } .reveal code.htmlmixed { font-size: 15px; } </style> # Introducción a las aplicaciones web --- [TOC] --- ## ¿Qué son las aplicaciones web? - Son del tipo cliente-servidor - El cliente (`User-agent`) y el servidor intercambian mensajes usando protocolo HTTP - HTTP es un protocolo sin estado, es decir, no guarda ninguna información sobre conexiones anteriores --- ## Recursos Se localizan mediante una URL (Uniform Resource Locator) ![URL](https://upload.wikimedia.org/wikipedia/commons/d/d6/URI_syntax_diagram.svg) <div id="attribution"> OmenBreeze [<a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>], <a href="https://commons.wikimedia.org/wiki/File:URI_syntax_diagram.svg">via Wikimedia Commons</a> </div> Note: + `scheme` típicamente `http`, `https`, `ftp`, `mailto`, `file`, `data` + `userinfo` opcional, `usuario:contraseña` seguido de `@` + `host` nombre registrado en el DNS o dirección IP + `port` opcional, puerto TCP + `path` lista de `segments` separados por `/` + `query` opcional, generalmente pares atributo-valor + `fragment` opcional, identifica un subrecurso --- ## Métodos (verbos) de HTTP Indican qué acción se quiere realizar sobre un recurso + `GET` obtener recurso + `HEAD` obtener recurso pero solo las cabeceras + `POST` enviar una nueva instancia de un recurso + `PUT` reemplaza los datos de un recurso existente + `DELETE` borra la instancia de un recurso + `OPTIONS` obtiene las opciones de comunicaciòn con un recurso + `PATCH` modifica parcialmente un recurso --- ## Formato de un mensaje HTTP ### Petición ``` Verbo Recurso HTTP/1.1 Cabeceras [línea en blanco] ``` ### Respuesta ``` HTTP/1.1 CodigoRespuesta Recurso Cabeceras [línea en blanco] Body ``` ---- ### Códigos de respuesta | Código | Significado | Código | Significado | | -------- | ----------- | -------- | -------------------- | | `10X` | Informativo | `401` | No autorizado | | `20X` | Satisfactorio | `404` | No encontrado | | `30X` | Redirect | `500` | Internal server error | | `40X` | Errores del cliente | `507` | No disponible <div id="attribution"> http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml </div> --- ## Ejemplo de diálogo ### Petición ``` $ curl -v -s https://www.uah.es/es/ > /dev/null [...] > GET /es/ HTTP/1.1 > Host: www.uah.es > User-Agent: curl/7.54.0 > Accept: */* > [...] ``` --- ### Respuesta (`headers`) ``` < HTTP/1.1 200 OK < Date: Wed, 27 Nov 2019 11:57:14 GMT < Server: Apache/2.4.6 (Red Hat) < Set-Cookie: JSESSIONID=D76A8FCE1A05227BC046C17EBF0D6E1F; Path=/; HttpOnly < Last-Modified: Wed, 27 Nov 2019 11:57:15 GMT < Cache-Control: public, max-age=0 < Content-Length: 281761 < Vary: Accept-Encoding,User-Agent < Connection: close < Content-Type: text/html;charset=UTF-8 < ``` --- ### Respuesta (`body`) ```htmlmixed <!DOCTYPE html> <html lang="es" > <head> <title>Universidad de Alcalá (UAH) Madrid</title> <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css" type="text/css"> <script type="text/javascript" src="/scripts.."></script> [...] </head> <body> <h1 class="sr-only">Universidad de Alcalá (UAH) Madrid</h1> [...] <img src="/galleries/imagenes/logo1.png" /> [...] </body> </html> ``` --- ### ¿Esto es todo? No. La respuesta al GET inicial fue: `Content-Type: text/html;charset=UTF-8` Lo que viene en el body es un doc HTML (DOM). Hay que descargar (GET) todas las referencias de ese DOM: imágenes, scripts, letras, media, etc... --- ### Falta descargar los contenidos estáticos | | | |---|---| ![asd](https://i.imgur.com/KUVhT3W.png)| ![](https://i.imgur.com/5vMpFpK.png =600x) --- ## Recursos dinámicos vs estáticos + Los contenidos estáticos: + No varían + Son compartidos por todos los usuarios + Pueden ser cacheados + Los contenidos dinámicos: + Cambian de una petición a otra + Hay que generarlos puntualmente en cada petición + No son cacheables --- ### Técnicas para servir recursos estáticos + Usando un servidor web, p.e. `nginx`, `apache2`, etc. + Usando buckets: + Cloud Storage en Google + S3 en AWS + En ambos casos debe ser posible identificar qué recursos son estáticos ``` https://www.miapp.com/static/css/styles.css https://www.miapp.com/static/images/pic01.png ``` --- ### Técnicas para servir recursos dinámicos Cuando se pide un recurso dinámico se debe ejecutar un proceso que en función de una determina lógica elabore la respuesta adecuada A este tipo de software se le denomina Web Applications, Aplicaciones Web o WebApps [Introducción a Flask](/8JxYmfbaQV2DEIdgosrjlQ) --- ## ¿Quién es el destinatario de la información? `GET /weather?q=Alcalá` --- ### ¿Humanos :person_with_pouting_face:? + `Content-type: text/html` + Imágenes, estilos, multimedia, css, etc. ![](https://i.imgur.com/6E2V7Fr.png =600x) --- ### ¿Máquinas :computer:? + Ejemplo: evaluar riesgos climatológicos + `Content-type: application/json` + Información estructurada: `JSON` o `XML` <style></style> ```json= { "coord": { "lon": 139,"lat": 35}, "base": "stations", "main": { "temp": 289.92, "pressure": 1009, "humidity": 92, "temp_min": 288.71, "temp_max": 290.93 }, ``` :bulb:[Podríamos acordar la forma de intercambiar información usando HTTP](/@ogarcia/restful)