Web Tools online: Explorador, resaltador, visor y buscador

Explorador de carpetas y archivos

El explorador de carpetas y archivos es una de las piezas básicas para el funcionamiento del marco de herramientas. La posibilidad del uso del atributo directory para el <input type="file"> así como la propiedad relativePath para el tipo File nos permite cargar un Sistema Local de Archivos. Por ahora sólo lo soporta Chrome y nos permite con un único click cargar una carpeta de desarrollo donde se encuentren todos los recursos de nuestros sitio web.

Figura
Figura. Apariencia de un explorador de carpetas y archivos para Web Tools online

Una vez cargado el Sistema Local de Archivos podemos acceder al Explorador para navegar por el árbol de carpetas y archivos, tal como se observa en la Figura. Un menú contextual nos ofrece las acciones posibles como explorar una carpeta, abrir un archivo, seleccionar carpetas o archivos y listar rutas.

El Explorador se usa en otras piezas de herramientas para cargar una ruta o lista de rutas y ejecutar un proceso con esos recursos. Cada instancia de ejecución tiene su propia configuración, con lo que podemos realizar un filtrado de lo que queremos explorar. Así podemos realizar una selección múltiple, selección por carpetas y/o archivos y que se muestren sólo carpetas.

Figura
Figura. Filtros de exploración en selección de carpetas y archivos en Web Tools online

Adicionalmente podemos realizar un filtrado más preciso usando expresiones regulares sobre la ruta o el nombre de la carpeta o el archivo y, en caso de archivos, sobre el tipo (MimeType) y la extensión. En la Figura podemos ver un ejemplo de filtros aplicados a los nombres de carpetas y extensiones de archivos. El patrón ^(?!no-publicable$).* incluye todas las carpetas a excepción de las nombradas con ese término. En cuanto a los archivos sólo presentará los que tengan extensión html o php.

Figura
Figura. Exportando la configuración en Web Tools online

La configuración que agregue o modifique puede ser salvada mediante el botón Exportar de la pestaña de configuración del marco principal (ver Figura). Se descargará como texto que podrá guardar en un archivo que debe nombrar como wt.txt y guardarlo en alguna carpeta de su Sistema Local de Archivos. O sobrescribir uno anterior si ya existiera. En un momento posterior cuando vuelva a cargar ese Sistema de Archivos desde su ordenador, el marco de herramientas buscará un archivo wt.txt y cargará la configuración guardada.

Resaltador de código

El Resaltador de código es una herramienta que nos permite el resaltado de documentos HTML, PHP, CSS y JS principalmente. Es una réplica del que ya tenía publicado Resaltador de código con JavaScript. Al integrar este recurso nos permitirá abrir un documento en el marco Web Tools online y que aparezca con código resaltado.

Figura
Figura. Resaltador de código en Web Tools online

En la Figura puede observar que seleccionamos una ruta del archivo a resaltar y abrimos ese archivo. El contenido pasará al texto a resaltar. O bien podemos escribir directamente texto a resaltar. El test es un archivo que contiene código de muestras para observar todo lo que permite este resaltador. Los siguientes documentos informativos están relacionados con los resaltadores de código:

Visor de archivos

El Visor de archivos nos permite visualizar archivos de texto e imágenes. Podemos explorar una ruta o una lista de ellas y visualizarlas con la barra de botones de navegación o con un desplegable.

Figura
Figura. Visor de archivos en Web Tools online

En la Figura se observa una lista de siete rutas presentándose un archivo de imagen de extensión ico, el icono de este sitio Wextensible.com que se ubica en la carpeta raíz.

Buscador de texto en archivos

Esta podría ser la primera herramienta básica que podríamos tener siempre a mano: un Buscador de texto en archivos. Supongamos que tengo que buscar cuántos documentos HTML de nuestro sitio usan el elemento <canvas>.

Figura
Figura. Buscador de texto en archivos en Web Tools online

Primero exploraríamos una lista de rutas que nos devolvería 208 documentos HTML. Luego fijamos un patrón de búsqueda, tal como se observa en la Figura. La búsqueda puede detenerse manualmente en cualquier momento. En la imagen la hemos detenido en el documento 117 mostrándonos los resultados encontrados hasta ese momento. Hay coincidencia en tres documentos cuyos números de posición son 52, 84 y 98. En el primero hay 11 coincidencias, en el segundo y tercero sólo hay una.

Figura
Figura. Coincidencias encontradas con el buscador de texto en Web Tools online

Al pulsar sobre el primer archivo econtraremos esas 11 coincidencias resaltadas, como se observa en la Figura. Se muestra en un Visor emergente resaltando y numerando las coincidencias.