Wextensible

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.

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.

Editor de diagramas

Muestra de diagramas  
abc
DIAGRAMAS
123
R2

Este editor de diagramas es una herramienta para crear contenidos con elementos HTML y estilo CSS, usando solamente elementos <div>. Este componente se apoya en el editor de propiedades CSS y el menú contextual, utilidades que publiqué anteriormente. Con CSS3 podemos generar elementos con bordes redondeados y círculos. Con el uso de transformaciones CSS podemos crear rombos. Se trata de rotar -45º un elemento cuadrado por lo que pasará a ser un rombo. Algo de escalado hará que el rombo se ensanche un poco en la dirección horizontal. Por otro lado para crear y manejar rectas oblicuas con terminaciones de flecha, cuadrado o círculo, ahora incorporo el módulo conector.js que también se basa en transformaciones de rotación para crear una recta oblicua en cualquier dirección.

Antes de estos párrafos a la izquierda hay una imagen PNG, una captura de pantalla de una muestra realizada con el editor de diagramas. Al lado hay un contenedor con el diagrama exportado desde ese editor, compuesto con elementos HTML-CSS. Tanto la imagen como el contenido exportado ocupan algo menos de 4 KB cada uno, por lo que en principio no hay una ventaja de que se reduzca el tamaño final con HTML-CSS. Pero si incrementamos el zoom de la ventana, veremos que el diagrama HTML-CSS se ajusta al tamaño mayor sin pérdida de calidad como le pasa a la imagen. El contenido exportado tiene todas las dimensiones en em's ajustándose al tamaño de la fuente del contenedor, que también está en esa unidad relativa.

Editor propiedades CSS3

Esta aplicación nos permite editar las propiedades CSS de los elementos. No es un editor HTML, sino sólo un recurso para estudiar CSS, especialmente las nuevas propiedades de CSS3. Con un click accedemos a un contenido emergente que recopila el estilo del elemento seleccionado. Diferencia los valores con color marron para el estilo en línea, es decir, el incluido en el atributo style. Es ese estilo el que usaremos para las ediciones. El resto de los valores en color azul lo obtiene del estilo computado inicial. Este puede ser estilo heredado, declarado en reglas (elementos <style> o archivos css vinculados) o estilo por defecto de los elementos. Si se vacía un valor se aplicará de nuevo el estilo computado inicial.

botones contenedor código resaltado

Todas las acciones de JavaScript relacionadas con el resaltado de texto se encuentra en el módulo resaltador.js que vinculo en la páginas que necesiten resaltar texto. Ahí se encuentra la función descomprimirResaltado(). Comprimir el código resaltado reduce el tamaño total, especialmente cuando el texto es grande y tiene muchos espacios o tabuladores seguidos. Como expliqué en el primer tema de esta serie, resaltar código supone incrementar el tamaño pues hemos de albergar el formato de colores con elementos extra como span. Pero al comprimirlo incluso podemos obtener una reducción de tamaño. Por ejemplo, el código sin minimizar de la página de inicio de este sitio ocupa actualmente 43.1 KB. Tras resaltarlo y comprimirlo se reduce hasta 41.7 KB con una reducción de un -3.2 %. Si no lo hubiésemos comprimido, el código resaltado ocuparía 87.1 KB con un incremento de un 102 %.

La ventaja en la reducción de tamaño es significativa. Pero para descomprimirlo hay que usar JavaScript. Esto hay que tenerlo en cuenta pues si tenemos muchos trozos de código en una página quizás es preferible traerlos sin comprimir, aunque suponga incrementar algo el tamaño del documento, puesto que la tarea de descomprimir puede alargar en demasía la carga final de la página. En este apartado y los siguientes se exponen todas las funciones que, como esta para descomprimir, usa el contenedor de código resaltado: numerar líneas, ver texto plano para copiar e imprimir código resaltado.

botones contenedor código resaltado

He actualizado el contenedor de código resaltado para mostrar una barra de botones con algunas utilidades como numerar líneas de código o imprimir código. A la hora de acometer esto me he encontrado con algunos problemas relacionados con el manejo de los espacios blancos o white space. Los espacios blancos son el espacio normal, la tabulación ASCII 9 y el salto de línea ASCII 13, éste último también es ASCII 10 + 13 en Windows. El código fuente se escribe con un sangrado de las líneas de texto (también escrito como indentado, un anglicismo de la palabra indent que se traduce como "sangrar líneas de texto"). Yo no uso la tabulación pues no se presenta igual en todos los editores. Configuro mi editor para que use 4 espacios normales en una tabulación. Pero a la hora de transferir un texto de código a un elemento apropiado de HTML podemos tener algunos problemas con los espacios blancos que intentaré exponer y resolver en este tema.

Un sprite de ejemplo

Esta aplicación es una herramienta para componer imágenes, que trabaja on-line sin acceder al servidor en ningún caso. Podemos realizar una composición de varias imágenes, cargándolas desde el ordenador, posicionándolas y/o redimensionándolas con el selector de áreas. También podemos ubicarlas en diferentes capas. Permite alinearlas ordenadas por tamaños con la finalidad de que la composición ocupe el menor tamaño posible. A partir de ahí podemos generar el Sprite CSS. La estructura de la composición puede extraerse como un archivo de texto plano para posteriormente volver a cargar esa composición. La aplicación trabaja los datos de la imagen en base64 por lo que una finalidad de la misma es convertir una imagen a base64.

Esta aplicación hace uso del acceso a los archivos de su ordenador mediante el botón <input type="file">. O bien si su navegador lo soporta mediante la acción de la API Drag and Drop. Las imágenes y/o archivos de texto se cargan desde las carpetas de su ordenador al navegador siempre que éste soporte la API File. Estos archivos en ningún caso son enviados al servidor. Todas las acciones se realizan en su navegador. Aunque usted puede leer archivos de su ordenador en ningún caso la aplicación es capaz de escribir archivos.

Paleta cubo color

Una paleta de color es una utilidad que antes o después usaremos para buscar un determinado color o conjunto de colores que queremos aplicar a una página. Se trata de representar el espacio de colores en una pequeña superficie de pantalla. Recordemos que en RGB podemos tener hasta 2563 = 16.777.216 colores. En el cubo de color que ya presenté en el tema cubo de color CSS3 intenté representar ese espacio en tres dimensiones disponiendo cada color en una celda de tabla HTML. Se estructura en una guía Z y un plano XY. El color se forma con la combinación de las tres dimensiones (Z, X, Y) en el caso de que Z sea la guía roja (la seleccionada inicialmente en esta aplicación). Con un tamaño de 13 supone llegar a 133=2.197 colores. Variando las guías podemos tener tres vistas distintas: con guía roja (Z, X, Y), verde (X, Z, Y) y azul (X, Y, Z). Pero en todo caso son los mismos 2.197 colores. Si quisiera acceder a todos los colores tendría que construir un plano de 256×256 celdas, que sumadas a otras 256 de la guía supondrían 65.792 celdas. Indudablemente esto son muchas celdas para una tabla HTML. Para resolverlo he realizado algunos cambios en ese cubo de color para efectuar un ajuste de color a cada celda y mostrar el valor exacto que se vaya a buscar, es decir, acceder a cada uno de los 16.777.216 de colores RGB.

Herramienta web para minimizar código

Controlar la rapidez con que se descargan las páginas de nuestro sitio web es una de las tareas de mantenimiento y supervisión rutinaria. Como usuarios sabemos que no hay nada más desesperante que una página lenta. Además buscadores como Google penalizan el posicionamiento por esta cuestión. Hace poco publiqué un tema sobre la minimización de documentos exponiendo que hay que optimizar la carga de los recursos. Pues ahora en este tema publico la herramienta para minimizar o minificar documentos con la que he llevado a cabo la minimización en este sitio. Hay cosas que no estarán directamente bajo nuestro control, como la velocidad de la red, la configuración del servidor si estamos en un alojamiento compartido o incluso el navegador que utilice el usuario. Pero lo que si podemos controlar son nuestras páginas. Y hay muchas cosas que podemos hacer. Una de ellas es minimizar o minificar los documentos HTML, CSS y JS.

En la captura de pantalla de la izquierda se muestra el resultado de minimizar la página índice de este sito. Partiendo de un tamaño de 43.6 KB se obtiene una reducción de casi un 21%. Pero con otros documentos como JS o CSS se obtienen reducciones superiores en torno al 50%. En la minimización de este sitio que llevé a cabo hace poco conseguí una reducción promedio de 19.4% sobre un total de 5700 KB de 185 documentos HTML, PHP, JS y CSS. Los PHP no se envían al navegador directamente, pero al ser de menor tamaño también supone que el servidor los manejará más rápidamente. En definitiva, la minimización es uno de los muchos pasos que hay que llevar a cabo para conseguir una web más rápida.

Herramienta web para resaltar código fuente

Esta es una utilidad para usar dentro del marco de herramientas que ya presenté anteriormente. Se trata de un resaltador de código con PHP. Funciona en localhost y puede resaltar código HTML, PHP, JS y CSS. Tiene la posibilidad de obtener código resaltado, con numeración de líneas y también permite comprimir el código resaltado. Es evidente que resaltar código hace que el tamaño final sea mayor, pues hay que cambiar los caracteres <, > por &lt;, &gt; respectivamente. Además el estilo hay que incluirlo en algún elemento como <span>. Pero la opción de código resaltado y comprimido puede incluso hacer que el resultado final sea de menor tamaño que el original. Además se puede enviar en una variable JavaScript y descomprimirlo en el navegador. Así ahorramos ancho de banda y la descompresión en el navegador es bastante rápida.

La necesidad de crear mi propio resaltador de código se fundamenta en que este sitio wextensible.com está orientado a exponer lo que voy aprendiendo sobre desarrollo web. Y presentar el código fuente es parte de este objetivo. Todos los que nos dedicamos al desarrollo web hemos usado alguna vez el "Ver código fuente" del navegador para aprender cómo está hecha una página. O al menos intentarlo pues no siempre lo conseguimos ya que un sitio en producción no tiene porque preocuparse de este aspecto. Y más últimamente que todos los sitios ya están incluyendo código minificado o minimizado (ver la página del buscador de Google por ejemplo).

marco de herramientas web

Con un marco de herramientas web en localhost podemos hacer cosas como modificar contenidos de forma genérica, analizar los documentos HTML para ver si están bien construidos, localizar vínculos rotos, construir índices para un buscador, construir el sitemap o el robots.txt, etc. La idea general se basa en construir módulos PHP escalables que funcionan apoyándose unos en otros. Así por ejemplo existe el módulo básico llamado comun.php desde donde se inicia el marco de herramientas. Luego tenemos otros también básicos como explorador.php y visor-ficheros.php que claramente sirven para explorar por carpetas y archivos y seleccionarlos o, en el otro caso, como un visor de archivos de texto. A partir de esa base vamos agregando herramientas con una estructura similar con relativa facilidad. En resumen, esto que empezó como una aplicación a modo de ejercicio para practicar con PHP, ahora ya es algo imprescindible para desarrollar mi sitio.

En esta primera entrega puede descargar el conjunto mínimo de recursos para que el marco funcione correctamente, tal como se observa en la captura de pantalla de la imagen. Para probarlo he agregado la herramienta Telnet, aunque espero seguir incorporando otras herramientas a este marco.

Las expresiones regulares son una poderosa técnica para buscar y reemplazar texto. Podemos construirnos una herramienta que sustituya un texto en todos los documentos del sitio . Esto me servirá también para hacer cambios genéricos en este sitio, especialmente cuando tenga que modificarlos en la migración desde XHTML a HTML-5 que voy a emprender.

Cuando tenemos un sitio en un alojamiento compartido obtenemos el beneficio de su bajo coste. Además de entrada no tenemos que hacernos cargo de un sitio dedicado que requiere saber más sobre el tema de servidores. En contra tenemos riesgos de seguridad como el que atañe a que otro usuario del servidor pueda manipular los contenidos de nuestras carpetas. Un explorador de carpetas y archivos realizado con PHP nos puede mostrar hasta que punto ese riesgo está presente y con que facilidad podría ser llevado a cabo.

Telnet (Telecommunication Network) es parte de los protocolos TCP/IP en los que se basa la comunicación en Internet. Para hacer pruebas sobre la seguridad de las sesiones PHP podría ser conveniente saber como funciona esta herramienta. Y si es posible construirnos una a medida que nos permita profundizar más en este complejo asunto de los protocolos de redes.