Tag: navegador

Cómo funcionan los navegadores

Hace un par de semanas me preguntaron por el funcionamiento interno de los navegadores web.

No hay mucha información sobre ello, quizás porque es un “secreto industrial”. Lo más interesante que he encontrado es HTML5 Parser, en el que se explican algunas cosas del nuevo analizador de Mozilla y How Browsers Work: Behind the scenes of modern web browsers, que realiza un análisis muy completo del funcionamiento de un navegador.

El almacenamiento local en el navegador

El almacenamiento local en el navegador (web storage o DOM storage) es un nuevo método de almacenamiento que proporcionan la mayoría de los navegadores modernos y que permite romper las limitaciones que existían con las cookies, el único método que ha existido durante muchos años.

En localStorage: Use it, Don’t Abuse it, nos explican qué es el almacenamiento local en el navegador y nos muestran numerosas páginas en las que se usa.

En la siguiente imagen se resumen las diferentes opciones que existen en la actualidad:

Y en la siguiente imagen se muestra el soporte de los navegadores:

¿Cómo se puede detectar el “user agent” o agente de usuario en PHP?

La cadena  “user agent” o agente de usuario es una cadena que envía un navegador con cada petición HTTP al servidor web.

En PHP se puede acceder a este valor a través del array superglobal $_SERVER. En la documentación oficial se indica que se debe acceder a la posición HTTP_USER_AGENT:

Contenido de la cabecera User-Agent: de la petición actual, si existe. Consiste en una cadena que indica el agente de usuario empleado para acceder a la pagina. Un ejemplo típico es: Mozilla/4.5 [en] (X11; U; Linux 2.2.9 i586). Entre otras opciones, puede emplear dicho valor con get_browser() para personalizar el resultado de la salida de la página en función de las capacidades del agente de usuario empleado.

El siguiente fragmento de código visualiza el valor de la cadena del agente de usuario:

<?php echo $_SERVER['HTTP_USER_AGENT']; ?>

Secretos de las herramientas para desarrolladores

Secrets of the Browser Developer Tools explica cómo emplear algunas características desconocidas de las herramientas para desarrolladores que poseen la mayoría de los navegadores actuales.

Por ejemplo, en la siguiente captura de pantalla se muestran dos trucos muy interesantes: cómo definir un punto de parada para cuando una parte del DOM cambia y cómo definir un punto de parada para modificar las peticiones AJAX.

Otro navegador web en tu servidor web

Ayer hablaba de cómo tener un navegador web en tu servidor web con PhantomJS. Hoy hago referencia a otro, SlimerJS. En la página web dice:

  • Opening a webpage,
  • Clicking on links,
  • Modifying the content…

SlimerJS is useful to do functional tests, page automation, network monitoring, screen capture, etc.

SlimerJS is similar to PhantomJs, except that it runs Gecko, the browser engine of Mozilla Firefox, instead of Webkit.

Un navegador web en tu servidor web

Llevaba tiempo queriendo saber cómo se hace esto, cómo puedes ejecutar un navegador web en tu servidor web para, por ejemplo, realizar una captura de pantalla y mostrar cómo se visualiza una página web un navegador o para, por ejemplo, tener una representación de la página web (con su JavaScript ejecutado, su CSS aplicado) y poder extraer cierta información.

Para hacer esto necesitas un headless browser, un navegador web sin interfaz gráfico. Hay unos cuantos por ahí fuera, pero parece que uno de los más usados hoy en día es PhantomJS, basado en WebKit (el motor de Google Chrome y Safari), que ofrece:

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.