Se ve bien, pero puede estar rota
Revisar una página web es comprobar que su estructura es correcta, que carga rápido y que se puede usar. Una página que se ve bien puede estar rota por dentro: una imagen sin descripción, un enlace roto o un archivo enorme.
Antes de publicar el menú de la cafetería, alguien debe revisarlo. Hoy lo haces con un script, que no se cansa y siempre mira lo mismo.
Al terminar esta lección
Nota
Puedo revisar una página y decir qué falla en su estructura y qué pesa.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Auditoría | una revisión con una lista de comprobaciones fijas | |
| Validación | comprobar que el HTML cumple las reglas del lenguaje | |
| Texto alternativo | la descripción de una imagen para quien no la ve | alt="Una paella" |
| Peso | los bytes que hay que descargar para ver la página | 1373 bytes |
| Caché | una copia que el navegador guarda para no descargarla otra vez | |
| Código de estado | el número con el que el servidor dice cómo fue la petición | 404 |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Una auditoría es una lista de comprobaciones
Una auditoría repasa siempre las mismas cosas, por orden, y anota lo que falla. La validación del HTML es una parte de ella: mira que las etiquetas sigan las reglas del lenguaje.
Muchas comprobaciones se hacen con una lectura del texto de la página. No hace falta abrirla en el navegador para saber si a una imagen le falta su descripción.
Seis comprobaciones de estructura y su motivo
| Comprobación | Por qué importa | Cómo falla |
|---|---|---|
| Hay lang en html | Los lectores de pantalla eligen la voz | <html> sin idioma |
| Cada img tiene alt | Quien no ve la imagen la oye descrita | <img src="a.jpg"> |
| Hay un solo h1 | El título de la página es único | Dos h1 |
| No se saltan niveles | El esquema sigue un orden | Un h4 justo tras un h2 |
| Cada input tiene label | Se sabe qué pide cada campo | Un campo sin etiqueta |
| Los enlaces internos existen | Un enlace roto lleva a ninguna parte | href="#postres" sin ese id |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
El peso se mide en bytes
El peso de una página es la suma de los bytes de todos sus archivos. Cada archivo es una petición al servidor, y cada petición cuesta tiempo, sobre todo con datos móviles.
Un kilobyte son mil bytes. Una página pequeña como la del laboratorio pesa unos 3,6 kilobytes. Una imagen puede pesar cien veces más.
Ejemplo resuelto: el peso de la página
| Archivo | Para qué sirve | Peso en bytes |
|---|---|---|
| index.html | La estructura | 1373 |
| style.css | El estilo | 1125 |
| app.js | El comportamiento | 1093 |
| Total | Los tres archivos | 3591 |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Mide la página y pídela al servidor
El primer script del laboratorio escribe el peso de cada archivo de site. Escribe en inglés: bytes son bytes y total es el total.
El segundo pide la página al servidor de la vista previa, como hace un navegador. Debe escribir el estado 200, el título Lunch menu y que style.css llega como text/css.
Medir los tres archivos de la página
docker exec jupyter python3 steps/sizes.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Pedir la página al servidor
docker exec jupyter python3 steps/serve.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
La caché evita descargas repetidas
La primera vez que visitas una página, el navegador descarga todos sus archivos. Guarda una copia, la caché, y la siguiente vez pregunta si han cambiado. Si no, usa la copia.
Por eso a veces no ves un cambio recién guardado: el navegador sigue con la copia vieja. Una recarga forzada, con Control y Mayúsculas más R, la salta.
Tres códigos de estado habituales
| Código | Qué dice el servidor | Qué hace el navegador |
|---|---|---|
| 200 | Aquí está el archivo | Lo descarga y lo usa |
| 304 | No ha cambiado | Usa su copia guardada |
| 404 | Ese archivo no existe | No puede cargarlo y la página queda rota |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un error frecuente
Advertencia
Mucha gente cree que, si la página se ve bien en su pantalla, está bien hecha. Una imagen sin alt se ve igual. Falla para quien usa un lector de pantalla. Revisa el texto de la página y no solo cómo se ve.
Python lee el HTML etiqueta a etiqueta
Python trae un lector de HTML, HTMLParser. Se escribe una clase que lo extiende. Cada vez que el lector encuentra una etiqueta de apertura, llama a handle_starttag con el nombre de la etiqueta y sus atributos.
Con dict(attrs) los atributos se leen por nombre. Con "alt" not in atributos se ve si falta uno.
Aviso de una imagen sin alt
from html.parser import HTMLParser
class Revision(HTMLParser):
def handle_starttag(self, tag, attrs):
atributos = dict(attrs)
if tag == "img" and "alt" not in atributos:
print("img sin alt")