1. Cliente Web (y herramientas)

Se trata de entender los conceptos de Arquitectura y Desarrollo Web enfocándonos en uno de los elementos (el cliente) y comenzando a utilizar las herramientas de desarrollo web ( Chrome Developer Tools / Firefox DevTools ). Aprenderás a:

1. Entender conceptos básicos de protocolo HTTP

2. Entender qué es un cliente HTTP

3. Conocer las herramientas de desarrollo 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. El Cliente HTTP (navegadores)

1. El Agente de Usuario (HTTP):

   • Agente Web: el navegador web (cliente http + muchas otras cosas). Visualizan.

   • El resto ( rastreadores , motores de búsqueda , etc). Obtienen información (usando http)

2. Ejemplos de Agentes de Usuario (User-Agent String)

   • Base de Datos Organizada ( what is my browser )

   • ¿Cual es el tuyo ahora ?

Actividad T01-A01. Navegadores y Agentes de Usuario

1. ¿Cual fue el primer navegador web?

2. ¿En qué año se utilizó por primera vez?

3. ¿Cuántos navegadores hay en la actualidad?

4. ¿Uno para navegar en modo texto?

5. Instala (y usa) un navegador en modo texto (por ejemplo visitando la wikipedia o el marca)

6. ¿Qué User-Agent String tiene Mozilla Firefox en un Windows de Escritorio?

7. ¿Qué User-Agent String tiene Google Chrome en un Mac OS de Escritorio?

8. ¿Qué UAS tiene el robot rastreador de Google?

9. ¿Algún lugar donde buscar un ejemplo de UA?

10. ¿Cual es el agente de usuario que estás utilizando ahora?

1.2. El Cliente HTTP (rastreadores web)

Uso de un agente en consola (web crawler GNU wget / wget )

• Mucha flexibilidad

• Eficiente, Robusto, Portable, Automatizable y muy completo

• Uso: descarga contenidos consola (o acceso a APIs).

Actividad T01-A02. Uso de descargas web vía consola

1. Instala wget en tu máquina (la que quieras) (también podrías trabajar con cURL / curl)

2. Descarga un archivo (por ejemplo de www.apuntesinformaticafp.com). ¿Cuál descarga?

3. Descarga el archivo y también las cabeceras.

4. ¿Cómo descargas un sitio web de forma recursiva? (ojo a limitar los niveles de recursividad)

5. ¿Cómo haces para realizar una descarga, y que continúe, aunque se caiga la conexión?

6. ¿Cómo haces para que coja los urls a descargar, de un archivo?

7. ¿Cómo muestras el % de progreso de la descarga?

¿Alguna opción que hayas visto interesante? Porque tiene muchas opciones .

1.3. El Mensaje HTTP

Mensajes HTTP :

• El mensaje: peticiones y respuestas

• Estructura:

  1. Petición:

     1. Línea de Inicio

     2. Cabeceras (campo: valor)

     3. Línea Vacía

     4. Cuerpo del mensaje (opcional)

  2. Respuesta:

     1. Línea de estado

     2. Cabeceras (campo: valor)

     3. Línea Vacía

     4. Cuerpo del mensaje (opcional)

• Cabeceras HTTP para Dummies

Actividad T01-A03. Cabeceras HTTP

Revisa qué significan los siguientes campos de cabecera (http headers), y qué valores puede tener:

1. Accept

2. Content Type

3. Cache-Control

4. Cookie

5. Content-Length

6. Date

7. Host

8. Referer

9. User-Agent

10. Accept-Charset

11. Accept-Encoding

1.4. Herramientas de desarrollo

1. ¿Qué son y para qué sirven?

   1. Extensión para el navegador

   2. Para analizar una página web (sus diferentes componentes)

2. ¿Cómo lo utilizo?:

   1. Abrir el panel

   2. Inspeccionar un elemento

3. Personalizar la apariencia

Actividad T01-A04. Revisar las cabeceras HTTP de una conexión

1. Accede a una página web

2. ¿Qué versión de HTTP está utilizando?

3. ¿Qué método de solicitud utilizaste?

4. ¿Qué código de estado HTTP respondió?

5. ¿Que campos de respuesta HTTP te da el servidor?

6. ¿Qué tipo de informacion está enviando?

7. ¿Cual es su tipo MIME?

8. ¿En qué fecha y a qué hora te respondió?

9. ¿Está la información comprimida?

10. ¿Ha utilizado algún tipo de caché?

1.5. Los elementos de una página

1. Ver elementos del documento ( View DOM Nodes )

2. Editar una web de forma instantánea ( Edit the DOM )

   1. El contenido

   2. Los atributos

   3. Las etiquetas HTML

Actividad T01-A05. Ver los elementos de una página

1. Accede a una página web cualquiera

2. Inspecciona el elemento que quieras

3. ¿Qué relación tiene con el elemento html? Ruta jerárquica

4. ¿Cual es su elemento padre?

5. ¿Tiene algún elemento hijo?

6. ¿Tiene hermanos?

7. ¿Puedes cambiar el contenido?

8. ¿Puedes eliminar alguno de los elementos?

9. ¿Puedes buscar algún tipo de elemento?

10. ¿Puedes ver el código fuente de toda la página?

1.6. Los estilos del documento

1. Ver el estilo de un elemento ( View and Change CSS )

2. Y funcionalidad más avanzada ( CSS Features Reference )

Actividad T01-A06. Ver los estilos de una página

1. Accede a una página web cualquiera

2. Inspecciona el estilo de un elemento cualquiera

3. ¿Qué propiedades CSS tiene?

4. ¿Tiene algún identificador de elemento?

5. ¿Tiene algún identificador de clase?

6. ¿Puedes buscar alguna propiedad concreta?

7. ¿Puedes quitar una propiedad de un estilo?

8. ¿Puedes modificar el valor de una de las propiedades?

9. ¿Sabría seleccionar el estado de uno de los elementos (por ejemplo :hover?

10. ¿Sabrías encontrar la hoja de estilo en la que está la propiedad de ese elemento?

1.7. La Consola JS

1. Me permite:

   1. Interpretar JS

   2. Interactuar con la Página (objeto DOM)

2. Útil en el trabajo de desarrollo web con JS

Actividad T01-A07. Usar la consola JS

1. Accede a la consola

2. ¿Hay algún error en la página?

3. ¿En qué archivo y línea?

4. ¿Puedes asignar una variable?

5. ¿Puedes imprimir esa variable en la consola?

6. ¿Puedes imprimir esa variable en la pantalla?

7. ¿Puedes crear la típica función que diga hola al nombre que le pasas por parámetro?

1.8. Recursos de la Página

1. Pestaña Sources (Fuentes). Permite ver los recursos que conforman la página (o la aplicación):

   1. Archivo HTML

   2. Hojas CSS

   3. Scripts

   4. Recursos Multimedia

2. Pestaña Red. Analiza el rendimiento de cada recurso (Network)

   1. Recursos que se descargan y Tipo

   2. Estado HTTP

   3. Tamaño y tiempo de descarga

   4. Análisis de la conexión

Actividad T01-A08. Revisar los recursos de la página

1. Accede a una página web (cualquiera)

2. ¿Cuántos recursos conforman la página web?

3. ¿Cuántos y de qué tipo?

4. ¿Cuales están en el mismo servidor donde está alojada la web?

5. ¿Puedes descargarte alguno de los recursos multimedia?

6. ¿Cual es el recursos que más tamaño tiene?

7. ¿Cual es el que menos?

8. ¿Cual es el que se descarga más rápido?

9. ¿Y el que tarda menos?

10. ¿Algún recurso con algún problema?

---

Material Extra

Una vez que tengas más conocimiento de las tecnologías web, puedes profundizar en el uso de estas herramientas. Este material extra te puede ayudar:

1. Algunas ideas sencillas (20 minutos)

2. Curso Completo (1 hora)

3. Y ya para dar un curso. Puedes saltar a 1:38:30 (muy completo).

---