Un sitio personal para aprender desarrollo web

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.

Conexión segura con HTTPS

Desde hace algunos meses los navegadores vienen advirtiendo al usuario que una página no es segura si no está bajo el protocolo HTTPS. Por ahora se limita a páginas como las que recopilan contraseñas. Pero más adelante marcaran como no seguras todas las páginas que no usen HTTPS. Por otro lado el proveedor donde tengo alojado este sitio ya está ofreciendo HTTPS incluido en el coste del paquete. Así que no hay excusa para no llevarlo a cabo.

En este tema comento los pasos mínimos necesarios para implementar esta y otras mejoras. Una importante tiene que ver con la reducción del tamaño de los documentos HTML y JS, con el objetivo de reducir el tiempo extra en la carga que supone la conexión HTTPS.

Otra utilidad es ofrecer al usuario la posibilidad de configurar aspectos visuales, como maximizar el ancho de pantalla y agrandar el tamaño del texto. La configuración se almacena en una cookie, con lo que conseguimos aplicarla a todas las peticiones de páginas mientras el navegador esté abierto.

Iconos SVG

Iconos SVG

Los SVG (Scalable Vector Graphics) son los Gráficos vectoriales escalables. Se estructuran en un documento XML para representar formas gráficas en dos dimensiones. Tienen un uso muy diverso y especialmente me interesa incorporarlos a este sitio como iconos.

Anteriormente venía utilizando los Sprites CSS para este cometido. Pero los SVG tienen algunas ventajas adicionales, especialmente que se incorporan al DOM como un elemento más. Así es posible darles estilo CSS adicional, respondiendo al tamaño de la fuente de texto o al color de primer plano, por ejemplo. Los Sprites, sin embargo, no dejan de ser imágenes, por lo que no hay muchas formas de interaccionar con ellas. Al incrementar su tamaño perderán resolución. Y no es posible cambiarles el color.

JavaScript ES6

Tras publicar una serie de temas sobre JavaScript para actualizar conocimientos con la incorporación de las nuevas versiones ES6 y siguientes, creo conveniente crear un índice de temas para una mejor localización.

También comento brevemente acerca del estándar EcmaScript 262 que se encarga de publicar las ediciones de este lenguaje.

La versión 5 (ES5) es del año 2009, apareciendo la 5.1 en el 2011. En 2015 aparece la versión sexta (ES6), ECMA-262 6th Edition, que marca una importante diferencia de desarrollo con respecto a todo lo anterior. Además ahora el propósito es no dejar pasar tanto tiempo entre versiones e ir incorporando pequeñas mejoras todos los años. Así en el 2016 aparece la séptima y este año 2017 está en curso la octava.

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.

El redondeo estándar para cálculos en una factura

El redondeo estándar de fracciones 0.5 se basa en observar el siguiente dígito después de los especificados para redondeo y si es igual o mayor que 5 redondeará arriba, en otro caso se quedará como está. Esta regla se usa en aplicaciones contables y comerciales donde entran en juego cálculos con importes de moneda. Es el caso del cálculo de una factura, realizando un ejemplo para ver cómo redondeamos los resultados parciales y totales.

Los métodos como toFixed() podrían redondear a un número determinado de dígitos fraccionarios. Pero no ejecutan el redondeo estándar en algunos casos. Por ejemplo, si lo aplicamos a 1.025 redondeando a dos dígitos resultará 1.02 en lugar del esperado 1.03. Así que el tema se dedica a presentar ese problema y buscar una función que ejecute correctamente el redondeo estándar.

El formato IEEE754 redondea el número cuando hay un exceso de bits

Entender el redondeo que aplica el formato IEEE754 es imprescindible para saber por qué suceden algunas cosas con los números en JavaScript. Por ejemplo, por qué la operación 1.33 × 1.4 = 1.862 nos da el resultado 1.8619999999999999 en JavaScript, por debajo del valor esperado. Mientras que 1.33 × 1.1 = 1.463 resulta 1.4630000000000003, por encima del valor.

Generador de formato local del método toLocaleString()

Dedicaremos este tema a ver métodos que aplican especialmente a números reales, mejor dicho, a números decimales con parte fraccionaria. Uno de ellos es parseFloat() que convierte un string en un number. El método toExponential() nos permitirán poner un número en formato exponencial mientras que toFixed() y toPrecision() sirven para ajustar el número de dígitos fraccionarios y significativos respectivamente.

También hablaremos de los métodos heredados de Object que son toString() y toLocaleString() que tienen un especial comportamiento con los números. Con el último haremos un generador de formato para presentar números con formato local de moneda o porcentajes.

Infinito y NaN son números del formato IEEE754

En este tema se expone como el formato IEEE754 representa los valores infinito y NaN y que utilidades tenemos en JavaScript para manejarlos. Una cuestión que resolveremos es dónde empieza Infinity. También se dedica el tema a los enteros, explicando con detalle el método parseInt() para convertir a entero.


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