Herramientas para desarrollo web

Colección de programas, principalmente en PHP, aunque también en otros lenguajes que pueden servir en la ayuda al desarrollo web. Las iré incorporando a medida que las vaya desarrollando para el uso en otras partes de este sitio o bien para entender y experimentar otros conceptos. Si pueden representar algún riesgo su ejecución en línea, sólo expondré el código de las mismas, pues muchas de ellas son para usar en un servidor en localhost y realizar tareas en ejecución local.

Parseador XML

El parseador XML es un nueva herramienta para el marco Web Tools online. Es una migración a JavaScript con mejoras de otro que había construido con PHP hace algunos años para verificar las páginas que he venido desarrollando en este sitio. La verificación se basa en comprobar que los elementos estén bien formados en documentos HTML, XHTML y XML, verificando atributos, referencias de caracteres y otras opciones.

La herramienta permite configurar todos los aspectos de cada uno de los tipos de documento que verifiquemos. Incluso crear nuevos tipos a medida. Podemos verificar un trozo de código o un archivo que seleccionemos en el ordenador. También es posible seleccionar una lista de archivos para pasarle una verificación a todos ellos y devolvernos al final una lista con los resultados obtenidos.

También es posible construir un árbol de nodos, a modo de DOM, que nos puede servir para analizar el documento con más claridad. Este árbol se extrae de un array de nodos que puede tener una utilidad derivada, aunque no con esta herramienta. Si tenemos un array de nodos que refleje un documento no resulta díficil editar ese array para agregar, modificar o eliminar nodos. Una función nos permitirá reconstruir el documento a partir del array de nodos, con lo que las ediciones automáticas en el documento serían fáciles de implementar.

Vista de los primeros bytes de un archivo PNG

Si queremos estudiar como se conforman los bytes en un archivo, por ejemplo un PNG de imagen, necesitaremos una herramienta para observar el contenido. Con este visor binario podemos cargar un archivo del ordenador y ver sus bytes con varias vistas como binaria, hexadecimal y decimal. Por ejemplo en la Figura se observan los hexadecimales de los primeros bytes de un archivo PNG.

Probador expresiones regulares y Font Metric para la aplicación Web Tools online

He replicado en el marco Web Tools online versiones de herramientas publicadas anteriormente. Por un lado el Probador de expresiones regulares con mejoras como incluir una lista de muestras de ejemplos de expresiones regulares para validar direcciones email o formatos de números por ejemplo. Y por otro lado la aplicación Font Metric que nos permite fijar dos de los tres parámetros ancho de la frase, número de caracteres y tamaño de la fuente para encontrar el tercero. Por ejemplo, fijando el número de caracteres en 80 y el tamaño de la fuente en 16px podemos encontrar para una familia de fuentes determinada cuál es el ancho promedio de una frase.

Soporte Drag & Drop para la aplicación Web Tools online

He incorporado soporte Drag & Drop para arrastrar archivos hasta la aplicación Web Tools online. Esto amplía las posibilidades de los <input type="file"> con los que podemos cargar un Sistema de Archivos Locales al marco de herramientas. Así en esos botones se seguirá pudiendo seleccionar una carpeta de su ordenador y se cargarán todos los archivos de todas las subcarpetas de de esa carpeta. Por supuesto, siempre que su navegador soporte el atributo directory para el <input type="file"> y la propiedad relativePath para el tipo File, tal como comenté en el tema anterior. Esta característica por ahora sólo la soporta Chrome.Pero además con o sin soporte de selección por carpetas podrá arrastrar archivos hasta los campos del marco de herramientas que admitan una ruta o lista de rutas.

También he integrado el antiguo Compositor de Imágenes y Generador de Sprites CSS a este nuevo marco de herramientas. Como mejora he agregado la posibilidad de probar el Sprite CSS generado.

Captura de pantalla de la aplicación Web Tools online

Desde hace tiempo vengo usando un marco de herramientas web con PHP en un servidor local (localhost). Explicaba en ese tema que no lo publicaba en el servidor en producción principalmente por los recursos que consume. Quería ir compartiendo todas esas herramientas, con lo que si había alguién interesado tendría que descargarse ese marco de herramientas e instalarlo en su localhost.

Para evitar ese contratiempo he ido replicando herramientas para ejecutar online, como el resaltador de código con JavaScript. Y creando nuevas como el reciente probador de expresiones regulares JavaScript. Pero hay un conjunto de recursos comunes a todas ellas que se podrían compartir en un marco de herramientas basado sólo en JavaScript. Así cuando agregase una nueva herramienta al marco me ahorraría volver a rescribir esos recursos. Bueno, pues ese es el marco de herramientas Web Tools Online que presento ahora, cuya captura de pantalla puede ver en la imagen.

Muestra parcial de la herramienta probadora de expresiones regulares, con resalte en colores de las distintas partes del patrón.

Esta es una herramienta para probar expresiones regulares de JavaScript. Esta técnica requiere un esfuerzo de aprendizaje que sólo se consigue con mucha práctica. Especialmente con patrones complejos es necesario dividir el problema en partes más sencillas e irlas probando. Esta herramienta permite esto, realizando una división del patrón por grupos de paréntesis y con formato de colores para poder leer el patrón más fácilmente.

Además de probar y experimentar con patrones, nos dará información sobre las propiedades de la instancia de expresión regular y del objeto RegExp, exponiendo todos los métodos de ejecución disponibles en JavaScript como search(), match() o replace() entre otros.

Muestra código resaltado

Esta es "otra" herramienta para resaltar código HTML, CSS, JS y PHP realizada en JavaScript y que puede ejecutarse on-line. Es una nueva versión basada en la anterior herramienta resaltador con PHP para ejecutar en localhost, incoporando nuevas funcionalidades y arreglando algunos problemas.

Al igual que la anterior, se apoya en expresiones regulares para identificar las partes del código. Las expresiones regulares de JavaScript no son tan potentes como las de PHP, pero al menos podemos construir herramientas y aplicaciones para que funcionen en el navegador. Además haciendo uso de la File API de HTML5 nos permitirá resaltar código de nuestros archivos locales así como descargar el resultado en un archivo de texto.

Una mejora es la posibilidad de incluir vínculos a URL's dentro del código, especialmente en los comentarios. También es posible exportar e importar los parámetros de configuración, de tal forma que se puede personalizar el resaltado. He mejorado la aplicación para reducir el tamaño del código resultante mediante la unificación de clases contiguas. He conservado la utilidad de compresión para obtener códigos aún más reducidos y poder moverlos por la red con mayor facilidad.

Optimizador de imágenes para la web

Las imágenes en una página web son recursos que pueden condicionar la velocidad de carga. Lo primero que debemos hacer con ellas es optimizar su tamaño. Esta herramienta basada en PHP y en el marco de herramientas que ya había presentado anteriormente optimiza lotes de imágenes que podemos filtrar por su extensión y localizar en una o más carpetas hijas de forma recursiva. Puede agregar cualquier programa externo como optipng.exe o jpegtran.exe para llevar a cabo la optimización. Estos programas son ejecutados en el modo de línea de comandos con PHP usando la función exec de PHP.

Font metric

Gráfica de distribución de la herramienta Font Metric

Por accesibilidad web es recomendable que las líneas de texto no tengan mucho más de 80 caracteres. Si tenemos ya pensado usar una fuente y un tamaño de la misma, la pregunta sería saber cuántos píxeles son necesarios para cubrir esa cantidad de caracteres. Esta herramienta nos permite encontrar ese dato, pues seleccionando una fuente y fijando dos de los tres parámetros (ancho, número de caracteres y tamaño de la fuente) nos calculará el tercero. Podemos ejecutar una única prueba o una serie larga, en cuyo caso verterá los resultados en una gráfica de distribución presentando también algunos resultados estadísticos simples.

Gráfica conexión TCP

Una sencilla utilidad para comprobar como se comporta el servidor haciéndole peticiones de archivos de diferentes tamaños. Se trata de una página HTML con JavaScript que solicita archivos de texto entre 2000 y 66000 bytes en tramos de 2000 bytes. O bien 30 archivos en tramos de 1000 bytes. Usando XMLHttpRequest (XHR) medimos el tiempo desde que hacemos la petición a cuando recibimos el archivo. Nos servirá para comprobar algunos aspectos de las conexiones TCP, como el control slow start y estimar donde se ubica la ventana de congestión inicial (IW).

Gráfica de barras

Editor y visor de gráficas de líneas, barras y circulares. Se apoya en módulos creados previamente, como el menú contextual (menu-context.js) o el que permite crear conectores para el editor de diagramas (conector.js). Con éste podemos dibujar una línea recta entre dos puntos del plano, agregando terminaciones en sus puntas. El único requerimiento es tener soporte de la propiedad CSS transform: rotate() para usar los conectores y también para girar rótulos y mostrar la gráfica circular. Todo se realiza con HTML, pudiéndose exportar el contenido en un literal HTML, incluso con medidas relativas en em's.