Un sitio personal para aprender desarrollo web

Arcos de Bezier

El siguiente problema es como dibujar un arco de circunferencia entre dos puntos P y Q. Sólo conocemos las coordenadas de esos puntos y tenemos que dotar de puntos de control para una cuadrática o bien cúbica de Bezier. En los temas anteriores vimos como calcular la distancia de control y el ángulo de control para conformar una circunferencia que se aproxime a una cuyo radio es el del polígono y con un determinado número de lados. Recordamos que con 5 lados podíamos obtener una buena aproximación con cuadráticas y, por supuesto, mejor aproximación con las cúbicas.

Ahora trataremos de descubrir el centro O = (x, y) del polígono de n lados y a su vez de la circunferencia donde está inscrito partiendo de los dos puntos conocidos del segmento PQ. Conocido el centro obtendremos el radio del polígono como cualquiera de las dos distancias iguales OP = OQ. Usándolo con α = 360° / n podemos calcular directamente la distancia de control y el ángulo de control, valores que nos pemitirán aproximar un arco de circunferencia entre P y Q.

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