diff options
| -rw-r--r-- | contenidos.md | 335 |
1 files changed, 335 insertions, 0 deletions
diff --git a/contenidos.md b/contenidos.md new file mode 100644 index 0000000..3f7b175 --- /dev/null +++ b/contenidos.md @@ -0,0 +1,335 @@ +--- +links-as-notes: true +toc: true +title: Documentación +subtitle: Desarrollo de aplicaciones con tecnologías Web +author: "`Ekaitz Zárraga <ekaitz@elenq.tech>`" +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 + + <html> + <head> + <title>An Example Page</title> + </head> + <body> + <p>Hello World, this is a very simple HTML document.</p> + </body> + </html> + + +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 +<tag attr="valor" attr2="valor2"> + cuerpo +</tag> +``` + +También existen elementos vacíos, cuya etiqueta de apertura también aplica el +cierre, ya que no pueden tener contenido: + +``` html +<tag attr="valor" /> +``` + +## Un documento HTML + +Plantilla de un documento HTML mínimo: + +``` html +<!DOCTYPE html> <!-- Indica HTML5 --> +<html> + <head> + <!-- Definición de la codificación del texto --> + <meta charset="utf-8"> + <!-- Interesante para responsive/mobile-first --> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <title>Título de HTML mínimo</title> + <meta name="author" content="Ekaitz Zárraga"> + <meta name="description" content="Un documento HTML mínimo"> + </head> + + <body> + ... + </body> +</html> + +``` + +## 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 +`<head>`. + +Algunos interesantes son: + +- La declaración del encoding: `<meta charset="utf8"/>` +- La declaración de viewport, interesante para visualización en dispositivos + móviles: + `<meta name="viewport" content="width=device-width, initial-scale=1">` +- El título de la página: `<title>` +- 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. |