Un sitio personal para aprender desarrollo web

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>.

La tabla de datos

Tabla de datos

El módulo JavaScript data-table.js es un componente para crear una tabla de datos para uso general, especialmente como componente de una interfaz de usuario cuando tenemos que presentar o recibir datos tabulados. Partiendo de los datos en un Array, se crea una tabla HTML con los datos en campos de texto <input> y con selectores de filas y columnas. Estos son botones que abren un panel con acciones para modificar los datos. Una última fila con el botón "✱" está presente para insertar una nueva fila. Inicialmente puede configurarse la tabla para permitir ediciones o bien que sea sólo de lectura.

Se agregan accesores de datos (getter y setter) para que sea posible adjudicar un Array u obtenerlo directamente de la tabla usando su propiedad value, igual que como haríamos con un <input>. Otras ventajas son la posibilidad de aplicar estilo CSS a la tabla o a las columnas, validar los datos de entrada y dotar de un atributo onchange que ejecute algo cuando se produzca un cambio en los valores. Si se incluye la tabla dentro de un <form>, se enviarán sus valores al servidor como campos de formulario.

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.

Gráfica Bezier cúbica

En el tema anterior vimos que se necesita un polígono de 5 o más puntos para conseguir una aproximación aceptable de la Bezier cuadrática a un arco de circunferencia, aproximación que de todas formas se podía apreciar desviaciones con una ampliación de 500 veces. Usando una Bezier cúbica conseguiremos una mejor aproximación incluso con polígonos de menos puntos.

La gráfica de la curva Bezier cúbica se aproxima al arco de circunferencia cuando el parámetro t ∈ [0, 1]. Como se observa en la imagen, la Bezier es una ecuación de grado 3 en azul y vemos que aparentemente coincide con la circunferencia en color rojo en el primer cuadrante, entre los dos puntos marcados con un pequeño círculo azul. El problema a resolver es buscar la ubicación de los dos puntos de control marcados con un pequeño círculo verde en la gráfica para conseguir esa aproximacón.

Construir polígono regular en SVG

El Selector de área y polígono es una utilidad que tiene ya algunos años. Se trata de situar un área que se sobrepone sobre un elemento HTML permitiendo mover y cambiar el tamaño de ese elemento. En el modo de polígono podemos crear uno ubicando puntos que se unían con líneas SVG (elemento <line>). Ahora lo he mejorado para unir los puntos con elementos <path>, tanto formando una línea (comando "L") como curvas de Bezier cuadráticas ("Q"), cúbicas ("C") y arcos ("A") de circunferencias. Una utilidad que contempla son unos controles para construir un polígono regular como se observa en la imagen.

He mejorado el componente Selector de área y polígono a raíz de la creación de un editor SVG dentro del marco de herramientas Webtools online. Así podemos crear fácilmente SVG polígonales con el elemento <path>, editando los puntos con el componente selector de polígono.

En este tema se expone como podemos usar el constructor de polígono regulares para incorporar arcos de curvas cuadráticas de Bezier en cada arista. Una de las posibilidades es aproximar una circunferencia, calculando donde debería ubicarse los punto de control de la curva de Bezier para lograrlo.

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.


...Ver más en el histórico