summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEkaitz Zarraga <ekaitz@elenq.tech>2023-01-27 21:48:07 +0100
committerEkaitz Zarraga <ekaitz@elenq.tech>2023-01-27 21:50:07 +0100
commitb306c81b5983178118bbce7b5aadb97b47644ff0 (patch)
treebf10243d315f6770d3b53a2875a70f2b9333d2fa
Semana 1: HTML y CSS Básico
Diffstat
-rw-r--r--contenidos.md335
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.

© ElenQ Technology