An Example Page

--- links-as-notes: true toc: true title: Documentación subtitle: Desarrollo de aplicaciones con tecnologías Web author: "`Ekaitz Zárraga `" author-meta: Ekaitz Zárraga lang: es-ES polyglossia-lang: name: spanish license: CC-BY-SA --- # Introducción a la Web La Web nace como una tecnología para intercambio de documentos de hipertexto. Para habilitar el intercambio de hipertexto hace uso de tres componentes principales: - Protocolo de intercambio -> HTTP - Identificación de documentos en la red -> URL - Formato de documentos que soporten enlaces de hipertexto -> HTML Para poder navegar la red de documentos de hipertexto es necesario un software concreto: un navegador. El navegador tiene diferentes tareas: - Visualizar documentos - Descargar documentos - Permitir la navegación a otros documentos (navegar = descargar + visualizar) Los navegadores modernos realizan muchas más tareas de las descritas, pero esa es su esencia. # Protocolo de intercambio: HTTP(s) *HyperText Transfer Protocol*. Protocolo a nivel de aplicación, que funciona sobre TCP. Es un protocolo de intercambio de mensajes en formato texto. Dos versiones: segura (HTTPs), cifrada, y no segura (HTTP), comunicación cruda sin cifrar. Arquitectura cliente-servidor: - El cliente envía consultas - El servidor responde Diferentes métodos para consultar: - *GET* - *HEAD* - *OPTIONS* - *TRACE* - *PUT* - *POST* - *PATCH* - *DELETE* - *CONNECT* Diferentes modos de respuesta - `1XX` - *Info* - `2XX` - *OK* - `3XX` - *Redirect* - `4XX` - *Client error* - `5XX` - *Server error* Estructura de las peticiones y respuestas: - Método / Código de respuesta - Cabeceras (*headers*): parejas clave-valor que indican conceptos adicionales opcionales, relacionados con la conexión - Cuerpo (*body*): Campo opcional para envío de datos Petición de ejemplo (Wikipedia): GET / HTTP/1.1 Host: www.example.com Respuesta de ejemplo (Wikipedia): HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 138 Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) ETag: "3f80f-1b6-3e1cb03b" Accept-Ranges: bytes Connection: close An Example Page

Hello World, this is a very simple HTML document.

Protocolo **sin estado** usa otros mecanismos para mantener el estado (sesiones): - Cookies: se obtienen por la cabecera Set-Cookie entregada por el servidor y se devuelven en la cabecera Cookie - Campos ocultos en formularios - Tokens: En la cabecera, en cuerpo de la consulta o, a veces, en el querystring > Esto se verá más adelante # Identificador de documentos en la red: URL El esquema completo de un identificador de documento en la red es el siguiente: ``` schema://user:password@host:port/path?querystring#anchor ``` Los campos indicados en la URL son en su mayoría opcionales. En la web, normalmente no se utilizan el campo `user` ni el campo `password`, porque no es una forma segura de conectars, así que el URL queda así (se elimina el caracter `@`): ``` schema://host:port/path?querystring#anchor ``` - El `schema` se refiere al *protocolo* de comunicación a utilizar. En el caso de la web, será `http` o `https`, siendo preferible el segundo para conexiones cuyo contenido deba protegerse. - El `host` indica un identificador de un equipo. Puede ser un nombre de dominio o una dirección IP. - El `puerto` puede ignorarse (quitando también los dos puntos, `:`), y en tal caso tomará por defecto el valor del puerto asignado al `schema` elegido: 80 para HTTP y 443 para HTTPs. - El `path` identifica el documento a seleccionar. Se indica mediante un `path` estilo UNIX desde la raíz del servidor. - El `querystring` indica información adicional de la consulta, su formato es el de parejas *clave* y *valor*, separadas por `&`. Con este formato: `?clave=valor&clave2=valor2&clave3=valor3` - El `anchor` se refiere a un *ancla* que no se envía en la petición pero el navegador utiliza para mover la vista de la página a la zona indicada por el *ancla*, normalmente mediante un atributo `id` en una etiqueta HTML. ## URL relativas y absolutas En caso de que una URL se reciba en el contenido de un documento, no es necesario incluir en ella el `host`, el `schema`, etc. para señalar a otro documento dentro del mismo `host`. Por ejemplo, si se entrega la página: `https://server.com/pages/index.html`, y en el contenido de ésta existe un enlace a la URL `/css/style.css`, el navegador resolverá la URL completa a ese recurso usando la información de la URL actual. Es decir, creará `https://server.com/css/style.css`. Además, el navegador tratará las URLs que sólo incluyan el `path` pero que no parta desde la raíz (`/`) como URLs relativas. > El formato del `path` en la funciona como en un sistema de archivos de UNIX. > Igual que en el sistema de archivos UNIX, usar `..` se refiere a la carpeta > superior. - Las URL **absolutas** parten siempre desde la raíz `/` e indican qué documento debe accederse desde la raíz del servidor. Ejemplo: `/css/style.css` - Las URL **relativas** se resuelven desde el documento actual. Ejemplo: `usuario.html`. Estas URLs por sí mismas no identifican de forma inequívoca un documento, son dependientes del documento donde están escritas. Por ejemplo, si `/paginas/index.html` tiene un enlace a `usuario.html`, éste se resolverá a `/paginas/usuario.html` pero si la página con el enlace es simplemente `/index.html` éste se resolverá a `/usuario.html`. Conocer los diferentes tipos de URL es muy útil a la hora de estructurar el contenido de modo que sea fácil de reorganizar. Tratar de reducir la longitud de las URLs escritas en un documento HTML es fundamental para facilitar la lectura del documento. # HTML *HTML: HyperText Markup Language* HTML es un **formato semántico** basado en XML. Para aprender HTML lo mejor es seguir la documentación en [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/HTML) Muestra contenido, basándose en su significado lingüístico/lógico: párrafo (`p`), imagen (`img`), enlace (`a`), sección (`section`), artículo (`article`), cita (`quote`, `blockquote`), títulos de diferentes niveles (`h1`, `h2`...), etc ## Sintaxis HTML ``` xml cuerpo ``` También existen elementos vacíos, cuya etiqueta de apertura también aplica el cierre, ya que no pueden tener contenido: ``` html ``` ## Un documento HTML Plantilla de un documento HTML mínimo: ``` html Título de HTML mínimo ... ``` ## La cabecera (head) El HTML también sirve para indicar metadatos para que el navegador conozca información adicional sobre el documento. Estos se incluyen en el apartado ``. Algunos interesantes son: - La declaración del encoding: `` - La declaración de viewport, interesante para visualización en dispositivos móviles: `` - El título de la página: `` - La inclusión de documentos relacionados como hojas de estilo e iconos mediante `<link>` ## El cuerpo (body) El cuerpo (`<body>`) del HTML debe incluir el apartado visible del documento. Usa etiquetas semánticas para describir el contenido. Algunos ejemplos: - `<main>`: Indica la parte principal del contenido del documento. - `<section>`: Indica una sección del documento. - `<article>`: Indica una pieza de información que se puede considerar una entidad única. Existen muchos componentes HTML. [MDN mantiene una referencia actualizada][html-ref] de todos los componentes HTML disponibles, su significado, su compatibilidad con los principales navegadores y una detallada explicación de qué atributos estándar pueden utilizar. [html-ref]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element ### Formularios Los formularios son un componente muy importante de la web. > TODO discutir los formularios # CSS *CSS: Cascading StyleSheets* El HTML sólo almacena información semántica. Las hojas de estilos son documentos adicionales que pueden enlazarse a documentos HTML para indicar el estilo de éstos. Para aprender CSS lo mejor es seguir la documentación de [MDN Web Docs][css] [css]: https://developer.mozilla.org/en-US/docs/Learn/CSS Este es el formato de una regla CSS mínima: ``` css selector { propiedad: valor; /* Esta pareja se conoce como "declaración" */ } ``` Los [selectores][selector] funcionan en [cascada][cascade], de más genérico a más concreto (especificidad, *specificity*). Siendo los más concretos aplicados después, añadiendo sobre (y sobreescribiendo) las declaraciones aplicadas previamente. El órden de declaración también es relevante. [selector]: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors [cascade]: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance > Recientemente se ha añadido el concepto [*Cascade > Layer*](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers) > lo que permite controlar de forma más avanzada los conceptos de especificidad > y cascada. La [herencia][cascade] también es un concepto importante. Indica que si un elemento está contenido en otro hereda las propiedades del componente padre. Por ejemplo, si un `body` define la fuente con un tamaño concreto, todos sus hijos (y los hijos de estos) aplicarán ese tamaño de fuente, a no ser que se especifique lo contrario. La herencia permite, por tanto, aplicar propiedades a objetos sin tener que seleccionarlos de forma directa con un selector. Esto también significa que mover un elemento HTML de un contenedor a otro puede cambiar su estilo, debido a que puede heredar nuevas reglas CSS de su nuevo contenedor. Aprender CSS requiere de tiempo, ya que existen varios tipos de selectores y combinaciones entre ellos e infinidad de propiedades, cada una con una gran variedad de valores posibles. Una vez entendidos los conceptos de la [guía de MDN][css] de forma general, la mejor manera de aprender es ir trabajando y aprendiendo a realizar operaciones concretas con el tiempo. Tener los conceptos básicos es primordial, eso sí, pero tampoco son demasiados.