Cómo configurar selectores CSS para analizar contenido en Telematic.Pro

Introducción

Al configurar fuentes en Telematic.Pro, es muy importante configurar correctamente los selectores CSS. Estos permiten:

Extraer enlaces a artículos desde la página principal del sitio.
Encontrar y analizar el contenido principal de cada artículo.
Excluir elementos innecesarios (por ejemplo, publicidad, pies de página y menús laterales).

Para realizar un análisis eficaz, es necesario saber cómo encontrar los selectores adecuados mediante DevTools en el navegador. En este artículo veremos cómo hacerlo.

Uso de DevTools para encontrar selectores

1. Abrir DevTools

En Google Chrome o Firefox, pulsa F12 o Ctrl + Shift + I (en Mac: Cmd + Option + I) para abrir las Herramientas para desarrolladores (DevTools).

1741617980612_devtools-collection-product-hover-dd23c141bea5f9739410eaa06e83ee80.jpg

2. Determinar el selector de los enlaces

1741617980537_select-an-element-63e42331a0df1985c597ffc8ead02a0f.jpg
1741617980612_selected-element-652798a29828d5b1a4d893c2de7a0e75.jpg

Supongamos que queremos extraer enlaces a artículos desde la página principal del blog «https://example.com/news».

Abre DevTools y selecciona la pestaña Elements.
Coloca el cursor sobre el título del artículo y haz clic derecho en Inspect (Inspeccionar elemento).
En el código de la página, busca la etiqueta <a> más cercana que contenga el enlace al artículo.
Revisa sus clases, ID u otros atributos.
Para copiar un selector listo para usar, haz clic derecho en el elemento → Copy → Copy selector.

Ejemplo de código HTML:

<article class="news-item">
    <a href="/news/article-123" class="news-link">Título del artículo</a>
</article>

Por lo tanto, el selector CSS para los enlaces será:

.news-item .news-link

En Telematic.Pro, indica este selector en el campo Selector CSS de los enlaces.

3. Determinar el selector del contenido

1741617980612_devtools-collection-product-hover-dd23c141bea5f9739410eaa06e83ee80-2.jpg

Después de obtener la lista de enlaces, el sistema accede a cada artículo y extrae su contenido. Debemos indicar dónde se encuentra.

Abre DevTools en la página del artículo.
Busca el contenedor principal que contiene el texto (normalmente un <div>, <article> o <section>).
Comprueba sus clases o ID.
Selecciona el contenedor necesario y haz clic derecho → Copy → Copy selector para obtener rápidamente el selector CSS.

Ejemplo de código HTML:

<article class="article-content">
    <h1>Título del artículo</h1>
    <p>Texto del artículo...</p>
</article>

Selector CSS para el contenido:

.article-content

Indícalo en Telematic.Pro, en el campo Selector CSS del contenido.

4. Excluir elementos innecesarios

1741617980612_devtools-collection-product-name-49124d4c5af086ac2577f349e1ffd989.jpg

A veces, en el artículo aparecen elementos adicionales: bloques publicitarios, botones de redes sociales o enlaces a otros materiales.

Utiliza DevTools para encontrar el código HTML de los elementos innecesarios.
Determina sus clases o ID.
Selecciona el elemento y haz clic derecho → Copy → Copy selector para obtener su selector CSS.
Comprueba el selector en DevTools: abre la consola (pestaña Console) e introduce:
```
document.querySelectorAll('selector')
```
Si se encuentran varios elementos, puede ser necesario precisar el selector.

Ejemplo de código HTML con elementos no deseados:

<article class="article-content">
    <h1>Título del artículo</h1>
    <p>Texto del artículo...</p>
    <div class="related-posts">Otros artículos</div>
    <div class="ad-banner">Publicidad</div>
</article>

Selectores CSS de exclusión:

.related-posts, .ad-banner

Añádelos en Telematic.Pro, en el campo Selectores CSS de exclusión.

Ejemplo completo de configuración en Telematic.Pro

Supongamos que estamos configurando una fuente para un blog con la URL https://example.com/news. La configuración en Telematic.Pro será la siguiente:

Selector CSS de los enlaces: .news-item .news-link
Selector CSS del contenido: .article-content
Selectores CSS de exclusión: .related-posts, .ad-banner

Conclusión

La configuración de los selectores CSS permite extraer con precisión los datos necesarios y excluir los elementos innecesarios. Utiliza DevTools para encontrar los selectores adecuados, cópialos mediante el menú contextual y pruébalos en la consola antes de añadirlos a Telematic.Pro.

Cómo configurar selectores CSS para analizar contenido en Telematic.Pro | Blog | Telematic.Pro