Fundamentos del Web Scraping

Fundamentos del Web Scraping

   a. Arquitectura de la web y estructura HTML

 En este módulo, se profundizará en la arquitectura de la web y se proporcionará una comprensión sólida de la estructura HTML. Los participantes aprenderán cómo funciona la web en términos de la interacción entre el navegador y el servidor, así como la representación visual de una página web. Algunos de los aspectos clave que se abordarán son los siguientes:

Fundamentos del Web Scraping

Cliente y servidor: 

  • El concepto de cliente-servidor es fundamental en la arquitectura de la web y en muchas otras aplicaciones de red. Aquí tienes una explicación más detallada:

En una arquitectura cliente-servidor, hay dos componentes principales: el cliente y el servidor. Estos componentes interactúan entre sí para proporcionar servicios y recursos a los usuarios. Aquí está la descripción de cada uno:

1. Cliente: El cliente es el componente que solicita y utiliza los servicios o recursos proporcionados por el servidor. En el contexto de la web, el cliente generalmente se refiere al navegador web que se utiliza para acceder a páginas web. Los clientes pueden ser aplicaciones o dispositivos que realizan solicitudes al servidor para obtener información o servicios. Por ejemplo, cuando ingresamos una URL en el navegador y presionamos «Enter», el navegador actúa como cliente y envía una solicitud al servidor correspondiente.

2. Servidor: El servidor es el componente que responde a las solicitudes realizadas por los clientes. Es responsable de proporcionar los servicios o recursos solicitados. En el contexto de la web, el servidor es una aplicación o un sistema informático que aloja las páginas web y otros archivos relacionados. Recibe las solicitudes de los clientes y devuelve las respuestas correspondientes. El servidor web interpreta y procesa las solicitudes, recupera la información necesaria y la envía de vuelta al cliente en forma de páginas web, imágenes, archivos, etc.

La interacción entre el cliente y el servidor sigue un flujo de comunicación. El cliente envía una solicitud al servidor, que contiene información sobre el recurso que se necesita o el servicio que se solicita. El servidor procesa la solicitud y genera una respuesta, que incluye los datos o recursos solicitados. Esta respuesta se envía de vuelta al cliente, donde se procesa y se presenta al usuario final.

Es importante destacar que el modelo cliente-servidor es una forma común de organizar la comunicación y el intercambio de información en muchas aplicaciones y sistemas distribuidos. Proporciona una estructura clara y eficiente para la entrega de servicios y recursos en la web y otras redes.

Fundamentos del Web Scraping.

Estructura HTML:

La estructura HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para estructurar y presentar el contenido de una página web. HTML se compone de una serie de elementos que definen diferentes partes y componentes de una página web. Aquí tienes una descripción de la estructura HTML básica:

1. Etiquetas HTML: Las etiquetas son elementos fundamentales en HTML y se utilizan para marcar y estructurar el contenido de una página web. Cada etiqueta comienza con un signo de menor que («<«) y termina con un signo de mayor que («>»). Existen etiquetas de apertura («<etiqueta>») y etiquetas de cierre («</etiqueta>»). Por ejemplo, la etiqueta `<p>` se utiliza para marcar un párrafo y se abre con `<p>` y se cierra con `</p>`.

2. Elementos HTML: Los elementos HTML están formados por una o más etiquetas y su contenido. Los elementos pueden contener texto, imágenes, enlaces, tablas, formularios y otros elementos HTML. Algunos elementos comunes incluyen:

   – Encabezados (`<h1>`, `<h2>`, `<h3>`, etc.): Se utilizan para definir títulos y subtítulos en una página.

   – Párrafos (`<p>`): Se utilizan para agrupar y presentar texto en forma de párrafos.

   – Enlaces (`<a>`): Se utilizan para crear hipervínculos a otras páginas web o recursos.

   – Imágenes (`<img>`): Se utilizan para mostrar imágenes en una página.

   – Listas (`<ul>`, `<ol>`): Se utilizan para crear listas no ordenadas y ordenadas, respectivamente.

   – Tablas (`<table>`): Se utilizan para estructurar datos en filas y columnas.

   – Formularios (`<form>`): Se utilizan para recopilar información del usuario, como nombres, contraseñas o comentarios.

3. Atributos HTML: Los atributos se utilizan para proporcionar información adicional sobre los elementos HTML. Se agregan a las etiquetas y se definen mediante un nombre y un valor. Por ejemplo, el atributo `src` se utiliza para especificar la URL de la imagen en una etiqueta `<img>`. Algunos atributos comunes incluyen `class`, `id`, `href`, `src`, `alt`, entre otros.

4. Anidamiento y jerarquía: Los elementos HTML pueden anidarse unos dentro de otros para crear una estructura jerárquica. Esto significa que los elementos pueden estar contenidos dentro de otros elementos, lo que permite organizar y estructurar el contenido de manera significativa. Por ejemplo, los párrafos pueden estar contenidos dentro de una sección (`<section>`) y la sección puede estar contenida dentro de un artículo (`<article>`).

En resumen, la estructura HTML se basa en etiquetas y elementos que permiten marcar y organizar el contenido de una página web. Combinando diferentes etiquetas, elementos y atributos, se puede crear una estructura coherente y significativa para presentar información y recursos en la web.

Fundamentos del Web Scraping

Inspección de elementos en el navegador: 

La inspección de elementos en el navegador es una función proporcionada por las herramientas de desarrollo integradas en la mayoría de los navegadores web modernos. Permite a los desarrolladores y usuarios examinar y explorar la estructura HTML, los estilos CSS y el comportamiento de una página web en tiempo real. Aquí tienes una explicación de cómo funciona y qué puedes hacer con la inspección de elementos:

1. Acceso a las herramientas de desarrollo: En la mayoría de los navegadores web, puedes acceder a las herramientas de desarrollo haciendo clic derecho en cualquier parte de la página y seleccionando «Inspeccionar elemento» o «Inspeccionar» en el menú contextual. También puedes usar atajos de teclado como F12 o Ctrl+Shift+I para abrir las herramientas de desarrollo.

2. Panel de elementos: Una vez que las herramientas de desarrollo están abiertas, se mostrará un panel que generalmente se llama «Elementos» o «Inspector» en la parte inferior o lateral de la ventana del navegador. Este panel muestra una representación visual de la estructura HTML de la página web.

3. Exploración de elementos: En el panel de elementos, puedes navegar y explorar la estructura HTML expandiendo y contraeriendo los elementos anidados. Al hacer clic en un elemento específico, se resaltará en la página web para ayudarte a identificarlo visualmente. Puedes hacer clic derecho en los elementos para acceder a acciones adicionales, como editar el HTML, eliminar o modificar atributos, o agregar estilos temporales.

4. Propiedades y estilos CSS: Además de la estructura HTML, el panel de elementos también muestra información sobre los estilos CSS aplicados a cada elemento. Puedes ver y modificar los estilos CSS en tiempo real para experimentar con el diseño y la apariencia de la página. Al seleccionar un elemento, se mostrarán las reglas de estilo aplicadas en el panel de estilos, donde puedes ver y editar los valores de las propiedades CSS.

5. Depuración y análisis de eventos: Las herramientas de desarrollo también ofrecen capacidades de depuración, lo que significa que puedes inspeccionar y rastrear eventos, errores y mensajes de consola en la página web. Esto es útil para identificar problemas en el código JavaScript, seguir el flujo de ejecución y realizar pruebas interactivas.

La inspección de elementos en el navegador es una herramienta poderosa para comprender y analizar el funcionamiento de una página web. Te permite examinar la estructura HTML, los estilos CSS y la interacción con el código JavaScript en tiempo real. Esta funcionalidad es especialmente útil para los desarrolladores web que desean depurar, realizar ajustes o comprender mejor cómo está construida una página web.

 

Indice

Curso Web Scraping Avanzado

Anterior

Introducción al Web Scraping Avanzado