Un sitio personal para aprender desarrollo web

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.

Podemos necesitar la posición (x, y) donde se ejecuta un evento de ratón si luego hemos de ubicar en ese punto la apertura de un mensaje emergente, un menú contextual o cualquier otro componente. Por ejemplo, cuando hacemos click en un elemento podemos obtener la posicion con respecto a la esquina superior izquierda de ese mismo elemento. O bien con respecto a la página, que resulta útil para el cometido antes señalado. El objeto event nos ofrece varias posiciones como pageX, pageY, offsetX y offsetY. Pero también hay otros valores y no todos son soportados por los distintos navegadores.

Un menú contextual es una lista de acciones que aparecen en un contenedor emergente por encima del resto de contenidos de una aplicación. Suele activarse con el botón derecho del ratón y las acciones ofrecidas son seleccionadas según el contexto donde se haya activado. En inglés podemos encontrar términos como context menu, shortcut o pop-up menu.

En este tema se explica como usar el módulo menu-context.js parar construir objetos JavaScript e implementar uno o más menús contextuales en una página web.

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.

Los selectores CSS son patrones que realizan una selección de elementos en una página HTML o XML. La especificación en fase REC (estándar) W3C - CSS Selectors Level3 (CSS3) reúne los ya existentes y que también he publicado en este sitio en el tema CSS2.1 selectores así como otros nuevos que expondré en estos temas.

Las transformaciones en CSS-3 nos permiten aplicar efectos sobre los elementos como traslación, rotación, escalado e inclinado. La especificación en fase WD CSS3 Transforms reúne transformaciones 2D y 3D, es decir, para espacios de dos y tres dimensiones. En este tema expondré una introducción sólo a la transformaciones 2D con ejemplos comentados.

Los objetos en JavaScript son estructuras que nos permiten manipular aplicaciones Web con grandes prestaciones. Saber cómo construir objetos o cómo funciona un constructor son aspectos claves para poder trabajar con objetos en JavaScript. En esta serie de cinco temas actualizo los conceptos relacionados con esta materia, pero enfocándolos desde la perspectiva de mejorar la eficiencia cuando usamos objetos. Cosas más recientes como Object.create() o defineProperty nos presentan nuevas características orientadas a crear objetos y configurar sus propiedades. Pero sobre todo están ahí para mejorar la eficiencia de estas estructuras. Para lograr esa finalidad es necesario especialmente entender el concepto del prototipo, como por ejemplo aprendiendo a diferenciar __proto__ de prototype, para poder sacarle el máximo partido a los objetos.

En programación informática una clausura (closure) es una función o referencia a una función que se construye en un entorno y puede acceder a variables no locales, llamadas variables libres, incluso después de finalizada su ejecución. Entender cómo funciona un closure es importante para poder detectar cuando se produce un closure accidental o no deseado. Además los closures nos permiten encapsular los datos de un módulo. Estructurando los módulos en un espacio de nombres evitamos los problemas de colisiones y facilitamos la tarea de desarrollo y mantenimiento del código. Por último incorporando un cargador de módulos forzamos a descargar todos los módulos de forma asíncrona al mismo tiempo que damos prioridad a la descarga y renderizado de los contenidos HTML.

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.

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.