Cómo configurar una fuente de contenido

Para configurar una fuente de contenido, siga los siguientes pasos:

Abra el administrador de fuentes de contenido, para esto debe ir a la opción Fuentes de contenido del menú principal

Ahora haga clic en el botón Agregar

Antes de pasar a explicar cómo configurar una fuente de contenido, debe comprender como es que funciona para que se le haga más sencillo.

La aplicación tiene un scraper al cual se le debe indicar que parte de una página se quiere extraer, para esto se le indica en que contenedores se encuentra la información que desea extraer.

Existen diversas formas de indicarle a un scraper que contenedores o secciones de una web extraer, en el caso del que se tiene en EZ Content Creator, se le indican las secciones a través de contenedores HTML.

Lo primero que debe entender es “que es un contenedor” para la aplicación. Un contenedor es un elemento del HTML de la web fuente que contiene algo como, por ejemplo, una entrada, el título, imagen destacada, etc.

Para efectos de nuestro scraper, tenemos 3 tipos de contenedores:

• TAG HTML: como por ejemplo un DIV, SECTION, A, IMG.
• ID de elemento HTML: como por ejemplo <DIV ID=”main_content”></DIV>, <SECTION ID=”contenido”></SECTION>, <A ID=”enlace” HREF=”#”>Enlace</A>.
• CSS del elemento HTML: como por ejemplo <DIV ID=”main_content” CLASS=”contenido_wrap”></DIV>, <SECTION ID=”contenido” CLASS=”contenido_principal”></SECTION>.

El TAG HTML se identifica como tal, es decir, que, si es el tag MAIN, este se identifica como tal: main.

El ID de un tag HTML se debe escribir con el símbolo # al inicio, por ejemplo: #main_content, #contenido, #enlace.

La clase CSS de un tag HTML se debe escribir con un punto al inicio (.), por ejemplo: .contenido_wrap, .contenido_principal.

Tenga en consideración esto, ya que es importante para declarar el contenedor que necesita identificar. Más adelante le quedará más claro.

Para ayudarle a identificar los contenedores, hemos desarrollado una herramienta con la cual, utilizando únicamente el ratón puede identificar los contenedores.

Nota: Elegir los contenedores adecuados puede ser complicado dependiendo de la web fuente que está intentando configurar, y requiere conocimientos básicos (muy básicos) de HTML/CSS, pero no se asuste, vera que con la práctica no es tan difícil.

Todo esto de los contenedores será configurado más abajo, así que siga leyendo.

Si no logra realizar la configuración, no se preocupe, le ayudamos a hacerlo, solo póngase en contacto con nosotros utilizando el chat de soporte o desde el formulario de contacto.

Este formulario se divide en 2 secciones, la primera llamada “Configuración del listado de entradas” y la segunda “Configuración de los posts individuales”.

Esta sección tiene como objetivo configurar como fuente de contenido aquella URL donde se encuentran las últimas entradas publicadas, ya sea de un sitio de noticias, entradas de un blog, una categoría en específico de una web, etc.

Para ello, debe completar algunos datos:

1. Proyecto: Debe elegir a que proyecto esta asociando esta fuente de contenido.

2. Nombre de la web: Asigna un nombre a la web con la que la identificaras en tu Dashboard.

3. URL de la web: Introduce la URL desde la cual se va a extraer contenido. El contenido publicado en esta URL es la que se va a extraer para mostrar en el Panel individual del proyecto. Puede ser la URL donde esta la lista de las ultimas publicaciones, o una categoría en específico. Ejemplos:

• https://www.gsmarena.com/news.php3
• https://surferseo.com/blog/
• https://www.androidheadlines.com/category/all-news
• https://earthsky.org/earth/
• https://earthsky.org/space/
• https://earthsky.org/sun/

Después del campo del formulario para la URL de la web, verá dos botones (4) “Abrir URL” y (5) “Buscar Contenedores”. El primero abre la URL que ha colocado en el campo y el segundo abre la herramienta para selección de contenedores que se mencionó anteriormente extrayendo el contenido de dicha URL.

Se le recomienda usar la herramienta para selección de contenedores para poder completar los siguientes campos. Si tiene experiencia examinando el código fuente de una página web utilizando las herramientas de desarrollador (Inspeccionar) podría obviar usar la herramienta y hacerlo manualmente también. 

Haga clic en el botón “(5) Buscar contenedores” con el cual se abrirá una nueva ventana con el contenido extraído de dicha URL tal y como internamente nuestra app lo hace.

Nota: Se extrae el contenido, pero no sus hojas de estilo (CSS) ni Javascript (JS) por lo que no se verá igual a la web real, pero no se preocupe por ello. Además, según sea la configuración del blog, algunas veces no mostrará las imágenes, solo el espacio, tampoco se preocupe por eso.

a. Desplácese hasta que encuentre las publicaciones (la lista de posts/noticias) e ignore todo lo demás (menú, footer, etc).

b. Ubique el puntero del mouse sobre una publicación (no haga clic ni trate de marcar/sombrear contenido), mientras pasa el puntero del mouse por los elementos, comenzará a ver que el fondo cambia de color según el contenedor que está señalando con el mouse. Todos los contenedores que sean iguales cambiarán al mismo color, así podrá saber mejor qué es lo que se está seleccionando. Ejemplo, aquí se está señalando el elemento <p>, por lo tanto, todos los elementos <p> se están marcando en rojo. 

c. Cuando ha ubicado el contenedor de cada publicación haga clic para detener la selección de contenedores, y podrá observar en la parte inferior de la pantalla las diferentes opciones que podrían servir para identificar el contenedor correcto para cada publicación.

Nota: para activar la selección de contenedores nuevamente, vuelve a hacer clic en cualquier parte de la pantalla. Con un clic dejas de señalar, y con otro vuelves a señalar.

Observa las diferentes opciones y trata de decidir cuál es el contenedor que mejor identifica a cada publicación.

El espacio para Clases podría tener más de una opción posible, las cuales se separan con el carácter “|”.

e. Ahora que tiene posibles candidatos de contenedores, marca uno, y copialo con Ctrl + C y vuelve al formulario de configuración.

f. Vuelve a la pestaña en tu navegador donde se encuentra la configuración del blog fuente.

Debe encontrar los contenedores adecuados para cada campo de esta sección del formulario. El único campo obligatorio es el “Contenedor de cada item”.

En la mayoría de casos, con este dato es suficiente para que la herramienta funcione bien, pero para asegurarse, utilice el botón “Validar” en cada campo para asegurarse de que se extrae la información que supuestamente debería extraer.

Si no se extrae la información, puede probar con otro u otros contenedores según el campo que le de problemas.

6. Contenedor de cada item: Agrega en la caja el valor copiado de la herramienta para encontrar contenedores y luego haz clic en el botón (7) “Validar”.

Si el contenedor es correcto se abrirá una ventana mostrando la primera publicación de la lista, de lo contrario la ventana va a mostrar un mensaje indicando que no se ha podido extraer el contenido.

También, si no ha elegido correctamente el contendor, puede mostrar otra cosa que no sea la publicación. Prueba hasta encontrar el contenedor correcto.

Ahora que ha identificado el contenedor de las publicaciones, debe probar si se puede extraer el título, enlace e imagen destacada. Casi siempre se pueden extraer sin necesidad de configurar un contenedor especifico, si alguno falla únicamente debes ir a la pantalla donde se buscan los contenedores y buscar el adecuado según sea el caso.

8. Contenedor del título de la entrada: haga clic en el botón validar a la par de este campo y si se logra extraer el título sin problema puede continuar con el siguiente campo, de lo contrario busca el contenedor como se hizo para el contenedor de cada item.

9. Contenedor del enlace al artículo: haga clic en el botón validar y si se logra extraer el enlace a la publicación sin problema continue con el siguiente paso, de lo contrario busque el contenedor como se hizo para el contenedor de cada item.

10. Contenedor de la imagen destacada: haga clic en el botón validar y si se logra extraer la imagen destacada de la publicación sin problema puede continuar con el siguiente paso, de lo contrario busque el contenedor como se hizo para el contenedor de cada item.

En este punto hay un detalle, y es que no siempre se puede visualizar la imagen destacada en esta etapa, aunque el sistema en realidad si pueda hacerlo. En el editor inteligente se tiene un algoritmo mas potente para buscar la imagen destacada, así que, si no logra extraer la imagen destacada, no se preocupe y puede pasar a la siguiente sección.

Un ejemplo de cómo debe verse este formulario completo:

Esta sección tiene como objetivo configurar como la herramienta debe extraer el contenido de una página especifica. El procedimiento es muy similar a la configuración del listado de entradas, con la única diferencia de que en esta sección va a utilizar una URL de una entrada de su fuente de contenido.

Nota: No debe pasar a configurar esta sección si aún no ha configurado la sección anterior ya que se utiliza dicha configuración para probar esta sección.

Debe completar los siguientes datos:

1. URL de una publicación: abra la URL que tiene el listado de contenidos que configuró en la sección anterior y copie la URL del primer contenido y péguela en este campo.

2. Con el botón “Buscar contenedores” abra la URL para poder encontrar los contenedores asociados.

3. Contenedor del contenido esencial: se refiere al contenedor que envuelve al contenido, es decir, el artículo/post en sí. Use la herramienta para seleccionar contenedores para ubicar dicho contenedor.

Una vez tenga un contenedor para probar, haga clic en el botón (4) “Validar”, si el contendor es el adecuado va a mostrarle el contenido de la página que se está probando.

Una vez ha encontrado este contenedor, es muy probable que los otros elementos importantes como el título y la imagen destacada se extraigan sin ningún problema.

5. Contenedor del título: antes de buscar este contenedor, haga clic en el botón (6) “Validar” y verifique si la herramienta ya es capaz de extraer el título. Solo en el caso en que no se extraiga el título correctamente, vaya a la herramienta para seleccionar contenedores y busque el contenedor del título.

Una vez encuentre el contenedor adecuado, pruebe nuevamente con el botón (6) “Validar”.

7. Contenedor de la imagen destacada: antes de buscar este contenedor, haga clic en el botón (8) “Validar” y verifique si la herramienta ya es capaz de extraer la imagen destacada.

Solo en el caso en que no se extraiga la imagen destacada correctamente, vaya a la herramienta para seleccionar contenedores y busque el contenedor de la imagen destacada.

Una vez encuentre el contenedor adecuado, pruebe nuevamente con el botón (8) “Validar”.

Si no logra hacer que la herramienta muestre la imagen destacada, no se preocupe, es probable que la podamos extraer, esto lo podrá verificar en el panel individual del proyecto.

Una vez completada esta sección, puede proceder a hacer un preview de lo que extraería la herramienta una vez guarde la fuente de contenido. 

Haga clic en el botón (1) “Preview” y se abrirá una página similar al editor inteligente para que pueda ver cómo queda la extracción del contenido de una entrada individual. 

Nuevamente, si la imagen destacada no se muestra, no se preocupe, la herramienta aún tiene un as de la manga.

Si todo lo demás: titulo, contenido, etc está bien, puede proceder a guardar.

Recuerde que, si no logra realizar la configuración, nuestro soporte puede ayudar a lograrlo, solo ponte en contacto con nosotros utilizando el chat de soporte o desde el formulario de contacto.