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:
Entender conceptos básicos de protocolo HTTP
Entender qué es un cliente HTTP
Conocer las herramientas de desarrollo web
Esfuerzo Necesario
El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.
La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.
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
Instala wget en tu máquina (la que quieras) (también podrías trabajar con cURL / curl)
Descarga un archivo (por ejemplo de www.apuntesinformaticafp.com). ¿Cuál descarga?
Descarga el archivo y también las cabeceras.
¿Cómo descargas un sitio web de forma recursiva? (ojo a limitar los niveles de recursividad)
¿Cómo haces para realizar una descarga, y que continúe, aunque se caiga la conexión?
¿Cómo haces para que coja los urls a descargar, de un archivo?
¿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¶
El mensaje: peticiones y respuestas
Estructura:
Actividad T01-A03. Cabeceras HTTP
Revisa qué significan los siguientes campos de cabecera (http headers), y qué valores puede tener:
Accept
Content Type
Cache-Control
Cookie
Content-Length
Date
Host
Referer
User-Agent
Accept-Charset
Accept-Encoding
1.4. Herramientas de desarrollo¶
¿Qué son y para qué sirven?
Extensión para el navegador
Para analizar una página web (sus diferentes componentes)
¿Cómo lo utilizo?:
Abrir el panel
Inspeccionar un elemento
Personalizar la apariencia
Actividad T01-A04. Revisar las cabeceras HTTP de una conexión
Accede a una página web
¿Qué versión de HTTP está utilizando?
¿Qué método de solicitud utilizaste?
¿Qué código de estado HTTP respondió?
¿Que campos de respuesta HTTP te da el servidor?
¿Qué tipo de informacion está enviando?
¿Cual es su tipo MIME?
¿En qué fecha y a qué hora te respondió?
¿Está la información comprimida?
¿Ha utilizado algún tipo de caché?
1.5. Los elementos de una página¶
Ver elementos del documento ( View DOM Nodes )
Editar una web de forma instantánea ( Edit the DOM )
El contenido
Los atributos
Las etiquetas HTML
Actividad T01-A05. Ver los elementos de una página
Accede a una página web cualquiera
Inspecciona el elemento que quieras
¿Qué relación tiene con el elemento html? Ruta jerárquica
¿Cual es su elemento padre?
¿Tiene algún elemento hijo?
¿Tiene hermanos?
¿Puedes cambiar el contenido?
¿Puedes eliminar alguno de los elementos?
¿Puedes buscar algún tipo de elemento?
¿Puedes ver el código fuente de toda la página?
1.6. Los estilos del documento¶
Ver el estilo de un elemento ( View and Change CSS )
Y funcionalidad más avanzada ( CSS Features Reference )
Actividad T01-A06. Ver los estilos de una página
Accede a una página web cualquiera
Inspecciona el estilo de un elemento cualquiera
¿Qué propiedades CSS tiene?
¿Tiene algún identificador de elemento?
¿Tiene algún identificador de clase?
¿Puedes buscar alguna propiedad concreta?
¿Puedes quitar una propiedad de un estilo?
¿Puedes modificar el valor de una de las propiedades?
¿Sabría seleccionar el estado de uno de los elementos (por ejemplo :hover?
¿Sabrías encontrar la hoja de estilo en la que está la propiedad de ese elemento?
1.7. La Consola JS¶
Me permite:
Interpretar JS
Interactuar con la Página (objeto DOM)
Útil en el trabajo de desarrollo web con JS
Actividad T01-A07. Usar la consola JS
Accede a la consola
¿Hay algún error en la página?
¿En qué archivo y línea?
¿Puedes asignar una variable?
¿Puedes imprimir esa variable en la consola?
¿Puedes imprimir esa variable en la pantalla?
¿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¶
Pestaña Sources (Fuentes). Permite ver los recursos que conforman la página (o la aplicación):
Archivo HTML
Hojas CSS
Scripts
Recursos Multimedia
Pestaña Red. Analiza el rendimiento de cada recurso (Network)
Recursos que se descargan y Tipo
Estado HTTP
Tamaño y tiempo de descarga
Análisis de la conexión
Actividad T01-A08. Revisar los recursos de la página
Accede a una página web (cualquiera)
¿Cuántos recursos conforman la página web?
¿Cuántos y de qué tipo?
¿Cuales están en el mismo servidor donde está alojada la web?
¿Puedes descargarte alguno de los recursos multimedia?
¿Cual es el recursos que más tamaño tiene?
¿Cual es el que menos?
¿Cual es el que se descarga más rápido?
¿Y el que tarda menos?
¿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:
Algunas ideas sencillas (20 minutos)
Curso Completo (1 hora)
Y ya para dar un curso. Puedes saltar a 1:38:30 (muy completo).