Aprende a identificar y extraer la información clave de páginas de noticias con selectores de CSS. A partir de HTML como fuente de datos semiestructurados, verás cómo localizar los vínculos, el título y el cuerpo del artículo usando el inspector del navegador y queries simples, tomando como ejemplo El Universal.
¿Qué es lo esencial para crear scrapers con selectores CSS?
Para construir scrapers efectivos, lo primero es entender la estructura intrínseca del HTML. No todo el contenido importa por igual: imágenes, columnas y resúmenes son secundarios si tu objetivo es capturar enlaces reales a noticias y, dentro de cada nota, su H1 y el texto del artículo.
- Datos semiestructurados: HTML con jerarquías y clases útiles para consultas.
- Queries: selecciones específicas que devuelven solo lo que necesitas.
- Selectores de CSS: el “lenguaje” para consultar la estructura HTML.
- Inspector del navegador: usa Inspect para ver etiquetas, clases y jerarquías.
- Generalización: la estructura cambia entre periódicos, hay que adaptarse.
¿Cómo identificar vínculos reales en la homepage?
El truco es observar dónde viven los enlaces dentro del HTML. Al inspeccionar un vínculo, se ve que está dentro de un H1 con la clase “field content”. Otro enlace puede estar dentro de un H2 con la misma clase. Lo importante: la clase se repite y el enlace es la etiqueta a dentro de ella. Así, una query CSS apunta a esos a anidados.
¿Qué queries extraen los enlaces de interés?
Según la observación, puedes seleccionar los enlaces con una clase repetida y el elemento a descendiente.
- Selecciona los vínculos dentro de contenedores con clase “field content”.
- Funciona para H1 y H2 si comparten la misma clase contenedora.
- Útil para listar enlaces de la página de inicio.
Nota práctica: si cambias de periódico, la estructura puede variar. Es normal repetir el análisis y ajustar los selectores.
¿Cómo obtener el título y el cuerpo del artículo?
Dentro de una noticia, el H1 no siempre trae clase propia. La clave está en el contenedor que lo envuelve. Además, el cuerpo aparece como una lista de párrafos dentro de un div con una clase específica.
¿Qué selector usar para el título H1?
El H1 está dentro de un div con clase “pain content”. La estrategia: seleccionar el contenedor por clase y luego el H1 que contiene.
- Encuentra el título principal de la nota.
- Se apoya en el contenedor en lugar del H1 directamente.
¿Cómo capturar el texto del artículo completo?
El contenido de la nota aparece dentro de un div con clase “field name body”. Seleccionarlo te da acceso al texto completo del artículo.
- Devuelve los párrafos que conforman el cuerpo.
- Ideal para extraer y limpiar el contenido final.
¿Cómo validar, adaptar y pedir ayuda?
Cada sitio organiza su HTML de forma diferente. La práctica recomendada es probar tus queries y verificar que devuelvan exactamente lo que buscas. Si no te sientes cómodo con selectores, las clases de desarrollo web ayudan, porque en la web los estilos y la selección por CSS son fundamentales.
¿Cómo confirmar que tus queries funcionan?
- Prueba los selectores en el inspector del navegador.
- Revisa que los resultados coincidan con los vínculos y textos deseados.
- Ajusta y vuelve a probar hasta aislar los elementos correctos.
¿Qué compartir para mejorar tus resultados?
- Indica qué periódico trabajas y cómo varía su estructura.
- Comparte las queries que usas para la front page, el título y el cuerpo.
- Deja dudas y comentarios en el sistema de comentarios para recibir ayuda.
¿Tienes avances u obstáculos con tus selectores de CSS? Cuéntanos qué periódico usas, qué queries intentaste y qué obtuviste. Así podemos ayudarte a mejorar tu scraper paso a paso.
