1. Cliente Web (y herramientas)#

1.1. ¿De qué va este tema?#

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

1.2. Clases#

Este curso está organizado sobre 8 sesiones de clase y una dedicación mínima de 16h.

1.2.1. El Cliente HTTP (navegadores)#

  1. El Agente de Usuario (HTTP):

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

Actividad: 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.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: 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.2.3. El Mensaje HTTP#

Mensajes HTTP :

https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages/httpmsgstructure2.png
  • 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: 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.2.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

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.2.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

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.2.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 )

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.2.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

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.2.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

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?

1.2.9. 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).