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.

Gestor tablas WXTABLE

El Gestor de tablas WXTABLE tiene por objetivo principal crear tablas HTML. La idea partió de la necesidad de incorporar una muestra visual de una tabla. Hice la tabla en una aplicación de hoja de cálculo y capture la imagen para ponerla en ese tema. A partir de ahí pensé en crear una aplicación que pudiera generar y gestionar tablas HTML.

La facilidad para editar tablas HTML se basa en el uso de botones para combinar celdas. Y otros para aplicar funciones suma, multiplicación, etc. Se dota de barras de botones y menú contextual para ejecutar las acciones necesarias para editar la tabla. Además de HTML, permite importar y exportar en diversos formatos como TSV, CSV, texto y JSON. En HTML podemos hacer una visualización previa del resultado.

Editor grafos SVG: Modo matriz de adyacencia

He realizado una mejora en los módulos del Editor de Grafos SVG para que permita introducir la definición de un grafo con una matriz de adyacencia. Se trata de un array de dimensión n×n para un grafo de n nodos. La imagen muestra como introducimos una de 5 × 5 que define un grafo G con 5 nodos.

Cuando G[i][j]=null entonces es que no hay arista en la dirección de los nodos i → j. Si es distinto de nulo ese será el valor de la arista. Por ejemplo, G[0][4]=14 significa que hay una arista con valor 14 en la dirección 0→4. Por otro lado la posición G[4][0]=null nos dice que esa arista sólo va en esa dirección 0→4 y no en la contraria 4→0. Así se configuraría como un grafo dirigido.

Editor grafos SVG

Esta Herramienta de Web Tool Online sirve para crear grafos usando exclusivamente elementos SVG. Puede interactuar con el editor SVG traspasando el código SVG generado en la gráfica a ese editor y así poder realizar modificaciones en los elementos SVG de la gráfica. Otra posibilidad es traspasar el código al Parseador XML con objeto de verificar la corrección del SVG, pues en cualquier caso un SVG es un XML.

La información del grafo se introduce en formato JSON. La disposición gráfica de los nodos y aristas se realiza de forma automática. Aunque es posible desplazar las líneas de las aristas usando alguna configuración para el nodo.

Calendarios

Esta herramienta sirve para construir calendarios con eventos marcados. Seleccionando una fecha podemos construir la hoja de un mes, bimestre, trimestre, cuatrimestre o año correspondiente a esa fecha. Es posible incluir también números de semana. Se acompaña una lista de eventos festivos nacionales de España, pero podría servir para agregar cualquier clase de evento. Hay 4 niveles de importancia, pudiendo seleccionar el estilo de presentación y configurarle un estilo CSS a cada nivel.

Al crear el calendario podemos copiar o exportar la estructura o bien imprimirlo. Hay 4 formas de estructurar el calendario: texto plano, en elementos <table>, en elementos <pre> y en elementos <div>.

Editor SVG

Esta Herramienta de Web Tool Online sirve para crear gráficas lineales usando exclusivamente elementos SVG. Los tipos disponibles son gráficas de barras, de líneas y circulares (tipo "tarta"). Puede interactuar con el editor SVG traspasando el código SVG generado en la gráfica a ese editor y así poder realizar modificaciones en los elementos SVG de la gráfica. Otra posibilidad es traspasar el código al Parseador XML on objeto de verificar la corrección del SVG, pues en cualquier caso un SVG es un XML.

La herramienta es similar a otra anteriormente publicada gráficas lineales con HTML donde utilizábamos exclusivamente HTML+CSS para los mismos tipos de gráficas de barras, líneas y circulares. Actualmente los navegadores soportan ampliamente SVG, resultando en un código final más compacto.

Editor SVG

El objetivo principal de esta herramienta es editar iconos SVG. Ya comenté en el tema sobre cómo se hacen iconos SVG que conviene utilizarlos en lugar de imágenes, pues ocupan menos, se escalan mejor y responden a CSS y DOM. Y además son fácilmente editables si tenemos un editor SVG. Pues de eso se trata, de construir un editor sencillo para crear y modificar iconos SVG.

El editor utiliza el componente Selector de área o polígono. Esta herramienta en el modo selector de área permite abrir un área que selecciona un elemento para mover o modificar su tamaño o posición. En el modo selector de polígono permite crear puntos y unirlos con líneas. Al menos así era inicialmente, pues ahora se incorporan mejoras para poder trazar curvas de Bezier tanto cuadráticas como cúbicas así como arcos de circunferencia.

Vínculos con elementos A y atributos HREF

Los vínculos o enlaces son elementos clave en una página web. Hay que asegurarse que funcionan correctamente cuando publicamos una página e incluso en momentos posteriores, pues en algún caso el destino del vínculo pudiera modificarse o eliminarse. Esta herramienta se dedica a comprobar la corrección de los vínculos al propio sitio. No revisa vínculos externos a otros sitios.

En síntesis se trata de usar el parseador XML para construir el Array de Nodos del documento a chequear, rastreando atributos de elementos que puedan contener un vínculo, como href, src o action entre otros. Revisa también los vínculos internos a un documento, es decir, los que apuntan con "#" a un elemento identificado con el atributo id o name. En CSS también se chequean los vínculos contenidos en los valores url(...).

Generador Sitemap en Web Tools Online

El Sitemap o mapa del sitio web es un archivo que contiene una lista de rutas de las páginas web de un sitio. Con ello se mejora la accesibilidad de los buscadores. Esta herramienta nos permite generar un Sitemap a partir de las rutas de archivos que carguemos desde nuestro ordenador.

Por ahora hay dos formatos disponibles: texto y XML. La configuración de esta herramienta también se utiliza con el Publicador para generar el Sitemap cuando publiquemos contenidos.

Publicador en Web Tools Online

Esta herramienta tiene por objeto filtrar y modificar en su caso los documentos en desarrollo para que luego puedan ser publicados en el sitio web. Proviene de otra que ya venía usando en PHP en el marco de herramientas sólo para uso "localhost" y que ahora estoy migrando a JavaScript. Como se observa en la imagen, partimos de una lista de rutas a publicar que podemos extraer automáticamante filtrándolas según unas opciones de configuración.

Se repite el proceso para cada una de las rutas pudiéndose detener en cualquier momento. Al finalizar obtendremos unos resultados que nos permitirán descargar aquellos documentos que fueron modificados y ver una lista de archivos que tendríamos que copiar desde la carpeta de desarrollo a la de publicación.

Codigo HTML minimizado

Con la acción de minimizar documentos quitamos todos los espacios inútiles con objeto de reducir el tamaño del documento. La reducción de tamaño puede ser significativa en algunos casos, tal como comenté en el tema del enlace anterior. En documentos HTML la reducción puede estar en torno al 15%. En documentos JS y CSS la reducción puede superar el 50%.

En su día ya presente la herramienta minimizador (con PHP) con la que venía ejecutando el minimizado de los documentos antes de subirlos al servidor. Últimamente he estado trasladando esas herramientas desde PHP a JavaScript en el marco de herramientas Web Tools Online. Ahora le toca el turno al minimizador de documentos.

Para llevar a cabo un minimizado eficaz necesitamos parsear el documento y obtener el Array de nodos. También se usa el gestor XML DOM, pues necesitaremos realizar algunas consultas y modificar algunos nodos. El parseador nos permite reconstruir el documento tras las modificaciones, obteniéndose un contenido minimizado que se ajusta a una determinada configuración previa.

La herramienta además verifica la sintaxis de los JS y PHP en algunas cosas que pudieran dar lugar a errores tras el minimizado. Otra facilidad que podemos usar es el refactorizado de nombres de variables en los JS con objeto de reducir el tamaño del código.

Métodos XML DOM en Web Tools Online

Esta herramienta incrementa las posibilidades del Parseador XML agregando métodos similares a los del DOM de HTML al Array de Nodos que podíamos obtener en el Parseador. Son métodos como getElementById(), appendChild() o remove() que nos permitirán modificar ese Array de Nodos.

Tras las modificaciones podemos reconstruir el XML que ya incluirá esas modificaciones en los nodos. También agregaremos al Array de Nodos un nuevo nodo document. Así podemos hacer algo como document.getElementByClassName("abc") para obtener todos los elementos con ese nombre de clase en el documento, como haríamos con el DOM de HTML.

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.