Читать книгу Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión. IFCD0210 - José Raúl Aranda Córdoba - Страница 32

A continuación, se describen los adaptadores más comunes utilizados en los diferentes navegadores.

Firebug

Este plugin está especialmente pensado para desarrolladores web. Con él se podrá inspeccionar el código fuente desde el navegador con la posibilidad de depurar cualquier error o bug.

Al ejecutar este plugin se abre una ventana en el propio navegador desde donde se podrá revisar la velocidad de carga, la estructura HTML, editar CSS y HYML, y depurar JavaScript.

Firebug será un aliado a la hora de desarrollar una web e ir probando in situ el código fuente.

Se encuentra disponible para la mayoría de los navegadores actuales aunque en sus inicios fuese una extensión solamente para Mozilla Firefox.

Consola Firebug en Firefox

Inspeccionar elemento

Si bien no se trata de un plugin en sí, puede ser adecuado si no se desea utilizar Firebug. Esta opción puede encontrarse en el menú contextual al clicar con el botón derecho del navegador en cualquier sitio de una página web. Dentro de este menú, al seleccionar Inspeccionar elemento, se abre una ventana similar a Firebug, donde también se podrá inspeccionar el código fuente de una web.

Menú Inspeccionar elemento

Nota

La opción Inspeccionar elemento se puede encontrar en las versiones más recientes de los navegadores web más populares.

Colorzilla

Es un plugin que se puede encontrar tanto en Firefox como en Chrome.

Este complemento va a ayudar tanto a diseñadores como a los desarrolladores web en tareas relacionadas con el color. Este plugin puede obtener una lectura de color de cualquier punto del navegador y utilizarlo en otro programa, entre otras muchas opciones.

Aplicación práctica

Para un diseño web se necesita averiguar un color en concreto. Ese color se encuentra en la barra de búsquedas del buscador de Google. ¿Qué pasos se deben llevar a cabo para saber qué color se utiliza en la barra de búsquedas utilizando Colorzilla?

SOLUCIÓN

Acceder a una página web, por ejemplo, www.google.es, y situarse sobre el recuadro de búsquedas. Con el botón derecho del ratón, se clica sobre este, y en el menú contextual que aparece, se selecciona la opción Inspeccionar elemento. Se abrirá en la parte de abajo del navegador una especie de consola mostrando el código fuente del elemento seleccionado.

Clear Cache

Es una de las extensiones para navegador más útiles y que más puede ayudar en la labor de desarrollar una web.

Clear Cache

Como ya se ha mencionado, cuando se navega por internet, parte de la información de las páginas web se guarda en el ordenador, sobre todo el contenido multimedia e imágenes. Esta información se almacena en archivos temporales, donde pasado un tiempo se borrará de forma automática, o bien se puede borrar desde el navegador web.

Puede darse el caso en que se esté editando una web y se realicen ciertos cambios en algunas imágenes sin modificar su nombre ni extensión. Si se procede a visualizar la página en el navegador, no se observará ningún cambio (pese a que existan elementos que se hayan modificado). Esto ocurre porque el navegador está leyendo el archivo que se guardó en el ordenador y no el nuevo. Para que los cambios tengan efecto se debe proceder a limpiar la memoria caché del navegador.

Para vaciar esta memoria se tiene que seleccionar el menú apropiado en cada navegador e ir a las opciones de limpiar caché.

Este plugin realiza precisamente ese mismo procedimiento, solamente hay que seleccionarlo en su barra de menú.

MeasureIt

Este plugin permite conocer las dimensiones de cualquier objeto o elemento que se encuentre en una web. Es muy útil si se quieren obtener de forma rápida las dimensiones de un campo de texto, una imagen, etc.

Esta herramienta muestra las dimensiones del objeto seleccionado en píxeles.

MeasureIt

Web developer

Esta extensión agrega varias herramientas de desarrollo web a un navegador. Se tendrá un control total sobre el código que forma la web, pudiendo acceder a aquellas partes que resulten más importantes, tales como el CSS, las imágenes o los formularios. Con este plugin instalado en el navegador, se podrá alterar casi cualquier elemento que componga la web, pudiendo realizar modificaciones en tiempo real, para así poderse aplicar dicho elemento a los archivos finales.

Web developer

Capturador de pantallas

Otro plugin importante es el capturador de pantallas, el cual permite realizar capturas de pantalla completas de una web, pudiendo capturar la página en su totalidad, aunque disponga de un scroll para desplazarse por ella, o realizar capturas parciales.

Captura de pantalla

Capturador de pantallas