Wextensible

Temas sobre desarrollo web y programación informática

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.

En JavaScript la operaci'ón 1.7 - 1.1 no da exactamente 0.6

En este tema entramos en la materia que me interesaba, saber por ejemplo por qué 1.75 - 1.125 da exactamente 0.625 y sin embargo 1.7 - 1.1 no da el resultado exacto 0.6. Esto tiene que ver con la precisión del formato IEEE754, donde el espaciado de los números es un concepto básico que debemos conocer.

Comentaremos sobre la comparación de números, los dígitos significativos y también sobre la cantidad total de números decimales que podemos representar en dicho formato.

El formato IEEE754

Convertidor formato IEEE754

El Formato IEEE754 es el que usa JavaScript para representar los números decimales. Se basa en un formato de coma flotante en un registro de 64 bits. Se presenta un convertidor IEEE754 con el que podemos extraer dicho formato de un número decimal y que nos servirá en temas posteriores para resolver dudas sobre ejemplos concretos.

Generador de formato local del método toLocaleString()

Los números decimales se tienen que representar en binario. Por lo tanto hay que saber al menos como convertir un número decimal en binario y al revés. Presentaremos un convertidor binario-decimal para practicar estas conversiones. Como la representación binaria de un número decimal siempre estará limitada a un número determinado de bits, eso introducirá limitaciones en la precisión que hay que conocer.

Otro tema que afecta a los números tiene que ver con los cálculos de operaciones aritméticas. Se presenta una calculadora binaria para realizar las operación básicas y que nos servirá en temas posteriores para resolver algunas dudas.

Los números en JavaScript

Siguiendo con el repaso de conceptos básicos de JavaScript y al mismo tiempo estudiando las nuevas incorporaciones de ES6 (EcmaScript 2015), ya iba siendo hora de enfrentarme con los números en JavaScript.

Y es que si intentamos entender todo lo que pasa con los números en JavaScript tenemos que conocer algo más que la sintaxis del lenguaje y los métodos del objeto Number. Es necesario conocer la representación binaria de los números, el formato IEEE754 y la limitaciones de la precisión. Es también necesario saber como dicho formato lleva a cabo el redondeo buscando la representación de un un número en dicho formato. Este primer tema será una introducción para luego continuar con los siguientes desarrollando esos puntos.

El método keys() recupera las claves de un objeto

El término iterar debemos entenderlo como repetir un mismo proceso sobre los propiedades de un objeto. Podemos, por ejemplo, recorrer todas las propiedades buscando áquellas cuyos valores sean tipos string y hacer algo con esos valores. Por definición los objetos creados directamente de Object no son iterables, pero otros como los Array si lo son, pues implementan un método Symbol.iterator(). Para iterar por un objeto hemos de recurrir a sus propios métodos, como Object.keys() que recupera un Array con las claves del objeto. Como todos los objetos derivan de Object estos métodos también se pueden aplicar a ellos, junto a la posibilidad de que implementen también el método Symbol.iterator().

Todos los objetos de JavaScript se constituyen con propiedades como parejas clave-valor

Las frases JavaScript está basado en objetos, Los objetos se relacionan a través de los prototipos y Los objetos contienen propiedades clave-valor podrían servir para identificar este lenguaje de programación. La última podría parecer innecesaria, pero describe la estructura de los objetos en JavaScript, dado que una propiedad es una entidad como una pareja clave-valor.

En este tema agrupamos todos los métodos que nos permiten crear y modificar propiedades como defineProperty(). Otros métodos como freeze() y seal() nos permitirán congelar y sellar respectivamente un objeto.

Todos los objetos de JavaScript tiene un __proto__ (prototipo)

Entender los prototipos de los objetos es imprescindible para manejarse bien con JavaScript. Por eso hemos agrupado en este tema todos los métodos que tienen que ver con los prototipos.

Podemos llegar a JavaScript desde otros lenguajes de programación que usan Programación orientada a objetos (POO). En ese caso podríamos decirnos lo siguiente: JavaScript, otro lenguaje basado en objetos, si conozco POO tendré bastante ventaja. Pero es una gran equivocación pensar así. JavaScript está basado en objetos, pero la relación entre ellos se produce a través de los prototipos. Y esto nada tiene que ver con POO, aunque la relación prototípica pueda simular bastante bien la POO.

El método toLocaleString() nos permite dar formato local a cadenas.

En Object hay algunos métodos básicos cuyo propósito es que puedan ser sobrescritos en las instancias, especialmente en los built-in como Array, Number o Date. Son los métodos del prototipo toString(), toLocaleString() y valueOf(). Con este último haremos un ejemplo de tipo de números romanos, evidenciándose para que sirve ese método. Con toLocaleString() podemos convertir a formato local tanto números como fechas.

Otro método que veremos es Object.is() que complementa las comparaciones de igualdad estricta === y con coerción ==. Explicaremos porque se aconseja siempre usar la comparación estricta.

Los objetos en JavaScript se relacionan a través de los prototipos

Conocer JavaScript pasa necesariamente por conocer los objetos y como se relacionan por medio de prototipos. La frase en JavaScript todo son objetos trata de sintetizar el hecho de que JavaScript es un lenguaje de objetos basado en prototipos, donde los objetos heredan de otros objetos y en última instancia del prototipo de Object (Object {}).

En este tema y los siguientes haré un repaso general de Object y sus métodos. Especialmente con la puesta al día de lo nuevo de ES6 relacionado con los objetos.

Trozo de código de XHR (AJAX)

Se dice que JavaScript está conducido por eventos. Por ejemplo, un evento click sobre un botón, los eventos del reloj del sistema que podemos usar con setTimeout() o peticiones asíncronas con XMLHttpRequest (AJAX, XHR) nos permitirán simular tareas complejas en JavaScript. Los nuevos generadores y promesas de ES6 resultarán muy útiles para implementar esas tareas, obteniéndose un código más claro y un control de errores más potente.

Esquema de multitarea con tres procesos A, B y C

La ejecución en multitarea significa que sólo tenemos un procesador y podemos llevar a cabo la ejecución de múltiples procesos compartiendo el tiempo de uso de ese procesador. Supongamos que tenemos los procesos A, B y C. Ejecutamos A durante un tiempo, lo paramos y ejecutamos B durante otro tiempo y así hasta que todos los procesos finalicen su tarea respectiva. Aparentará que los tres procesos se están ejecutando a la vez, pero realmente estaremos realizando alternativamente un trozo de ejecución de cada uno. Los generadores de ES6 nos facilitarán implementar algo parecido a multitarea en JavaScript.

Generadores en ES6

Código de un generador en ES6

Un generador es una función cuya ejecución puede ser pausada en un momento dado y continuada en otro posterior. En la pausa, que se produce cuando se ejecuta una expresión con yield, la función conserva su estado de variables. La pausa es, por tanto, ejecutada desde la propia función generadora con yield, mientras que la reanudación sólo puede llevarse a cabo externamente. Este comportamiento tiene tiene muchas utilidades, como la simulación de multitarea o gestionar mejor las tareas asíncronas combinando generadores y Promesas.

Iterables en ES6

Symbol.iterator en JavaScript

Los objetos iterables implementan el método Symbol.iterator. La ejecución de este método devuelve un objeto iterador que nos servirá para iterar por el objeto. En el objeto iterador siempre habrá un método next() que nos devuelve el siguiente elemento de la iteración. Los bucles for-of, el desestructurado de datos o el operador de propagación de Array se sustentan en que el objeto sobre el que se aplican sea un iterable.

Algunos objetos built-in como Array, Set, Map o arguments poseen intrínsicamente un método iterador. Además en este tema exponemos como podemos implementar un iterador particular para cualquier objeto, con lo que conoceremos cual es la finalidad de la iterabilidad y como puede ayudarnos a crear funciones iterables.

El método join() transforma un Array en un String

Los métodos de este tema transforman un Array en un valor simple devolviéndolo y no modificando el Array sobre el que actuan. Incluye los métodos antiguos join(), toString() y toLocaleString() que devuelven un String con los elementos del Array.

Más interesante son los métodos reduce() y reduceRight(). Ambos funcionan igual, sólo que el primero itera de izquierda a derecha en los índices del Array y el segundo lo hace al revés. Usa un callback para ir acumulando el resultado, por lo que es un método que tiene un gran número de aplicaciones. Como una implementación del algoritmo de exponenciación rápida, que también podemos hacer con el método reduce().

El método indexOf(valor) nos devuelve el índice

Los métodos para realizar búsquedas en un Array se pueden agrupar en tres clases. Están los que devuelven un valor booleano según encuentren o no lo que buscan, como every(), some() e includes(). Por otro lado están los que devuelven el índice del valor a buscar, con los métodos findIndex(), indexOf() y lastIndexOf().

Por último el método find() devuelve el valor que se está buscando según una condición en el callback. También funcionan con un callback los métodos some(), find() y findIndex(). El método includes() es de EcmaScript 2016 (ES7), pero ya los navegadores actuales más usados lo soportan. Haremos un ejemplo para obtener el valor de un grupo de botones de radio (<input type="radio">) usando, entre varias técnicas, el método find().

El método concat() crea un nuevo Array

Los métodos concat(), map(), slice() y filter() devuelven un nuevo Array, no modificando el Array sobre el que estén actuando. Con map() iteramos por el Array devolviendo otro Array con el mismo número de elementos, donde sus valores se establecen en una función callback. Los otros métodos, o map() cuando devuelve los valores, realizan una copia superficial del valor.

Con el método slice() haremos un ejemplo de búsqueda binaria, un algoritmo que reduce el coste de buscar un valor en un Array con un orden logarítmico.

Método para iterar por un Array

Iterar por un Array es acceder a sus elementos de forma secuencial. Los métodos key(), values() y entries() devuelven un objeto iterador que nos permitirá esa acción. El método forEach() funciona con un callback con iterando por el Array sin propósito específico.

Métodos push, pop, shift y unshift de un Array de JavaScript

Los métodos básicos para modificar un Array son pop(), push(), shift() y unshift(). Éstos agregan o eliminan elementos por la cabeza o la cola del Array. Son ideales para implementar una pila o una cola. Como ejemplo de pila implementaremos un conversor de expresiones aritméticas con notación infija a notación polaca inversa (RPN), tras lo que podremos ejecutar las expresiones con suma facilidad. Tambien hay un ejemplo de una cola para descargar archivos de imagen asíncronamente.

Otros métodos que modifican el Array sobre el que se aplican son copyWithin(), fill(), reverse(), splice() y sort(). Con el último haremos un ejemplo para ordenar una tabla por columnas.

El constructor Array de JavaScript

El constructor de Array ahora tiene dos nuevos métodos genéricos: Array.of() y Array.from(). Éste último nos permite crear un nuevo Array a partir de un iterable o de un array-like, objetos que se parecen a un array. Por otro lado comentaremos el método Array.isArray() para saber si un objeto es un Array.

A veces uno da por hecho cosas que merece la pena volver a comprobar, debido a que los navegadores son cada vez más eficientes o quizás lo que aprendimos no era del todo correcto. Como ejemplo comprobaremos si es más eficiente declarar un Array con notación literal o usando el constructor.

El Array en JavaScript implementa un vector

Un vector, formación o arreglo es una lista de elementos, cada uno con una posición o índice que nos sirve para accederlos. En JavaScript la estructura de datos que implementa un vector es el Array. Es uno de los objetos quizás con más uso y que ahora con ES6 consigue incrementar sus posibilidades. Nuevas características como el operador de propagación o el destructuring tienen una fuerte relación con los Array.

En este tema y los siguientes hago un repaso empezando por lo básico y exponiendo todos los métodos con ejemplos prácticos de uso. En este primer tema hablaremos de como agregar y eliminar elementos en un Array. También se exponen muchas de las formas posibles de iterar por un Array.

Symbol.iterator, un símbolo bien conocido en JavaScript

ES6 utiliza los símbolos para incorporar los Well-Known Symbols. Son los Símbolos Bien Conocidos que nos permiten cambiar la forma de actuar predeterminada de ciertas características internas de JavaScript. Por ejemplo, Symbol.iterator nos da la facilidad de hacer iterable un objeto, pues podemos asignar a ese símbolo un método iterador basado en una una función generadora.

Símbolos en ES6

string, number, boolean, null, undefined y symbol

ECMAScript 6 (ES6) introduce los símbolos con el nuevo tipo de datos primitivo symbol. Su característica principal es que pueden actuar como identificadores, que por su naturaleza deben ser únicos e inmutables. En esta serie de dos temas intentaremos ver qué son y para qué se utilizan.

Los símbolos se pueden usar para agregar nuevas propiedades a un objeto con la total seguridad de que no vamos a sobrescribir una propiedad existente. Esto es así por el carácter de únicos que tienen los símbolos.

ES6 los utiliza para incorporar los Well-Known Symbols. Son los Símbolos Bien Conocidos que nos permiten cambiar la forma de actuar predeterminada de ciertas características internas de JavaScript. Por ejemplo, Symbol.iterator nos da la facilidad de hacer iterable un objeto, pues podemos asignar a ese símbolo un método iterador basado en una una función generadora.

Esquema del desestructurado (destructuring) de un Array en EcmaScript 6 (ES6)

El desestructurado de datos (destructuring) de EcmaScript 6 (ES6) es una nueva característica que nos permite extraer datos individuales desde una estructura de datos usando sólo una sentencia. Podemos desestructurar Arrays y objetos en aquellos lugares donde se produzca una asignación de valores, como las propias expresiones de asignación, en los parámetros de una función cuando se ejecuta la llamada o en bucles for...of. En este tema expondremos la sintaxis con Arrays y objetos, con muchos ejemplos de uso.

Código que representa las funciones flecha (Arrow Functions) de JavaScript

ECMAScript 6 (ES6) introduce las funciones flecha (arrow functions) que son una sintaxis para representar funciones anónimas fijando las referencias arguments, this, super y new.target de forma estática al alcance de la función. Para las funciones que ya conocemos estas referencias se resuelven de forma dinámica, con lo que su valor no existirá hasta que la función se ejecute. Esto es un problema en muchos casos, como cuando adjudicamos eventos a elementos HTML, puesto que en la función manejadora se resolverá el this al elemento sobre el que actúa el evento.

Propiedad 'arguments', 'caller' y 'callee' de una función en JavaScript ES6

Las funciones en JavaScript también son objetos y por tanto pueden tener propiedades y métodos. Con ECMAScript 6 (ES6) se incorpora la nueva propiedad name que contiene el nombre de la función. La propiedad arguments contiene los argumentos recibidos en la llamada a una función. Es importante entender la diferencia entre parámetros y argumentos de una función y como se comportan en JavaScript. Especialmente conviene saber que los argumentos se pasan por valor, incluso cuando son objetos, pues se pasa el valor de la referencia al objeto. Podría asimilarse a un paso por referencia para los objetos, pero si éste es reasignado en el destino esa referencia se rompe.

ES6 incorpora mejoras como los parámetros por defecto, la sintaxis para el resto de parámetros, y el operador de propagación. Veremos para que sirven caller y callee advirtiendo que el modo estricto prohíbe su uso. Por último se exponen ejemplos de uso de los tres únicos métodos de una función: call(), apply() y bind().

Funciones en JavaScript ES6

Las funciones en JavaScript son de primera clase pues pueden pasarse en los argumentos y devolverse desde otra función. Esto junto a características como el anidamiento de funciones o las funciones anónimas le da un carácter de lenguaje funcional con el que se pueden hacer más cosas de las que pudiéramos suponer en principio. De hecho si no las conocemos en profundidad nos perderemos un montón de posibilidades que mejorarían sensiblemente nuestras aplicaciones.

EcmaScript 6 (ES6) incorpora novedades importantes relacionadas con las funciones, como los argumentos por defecto, el operador para indicar resto de argumentos, las funciones flecha y los generadores. Pero antes de meterme con eso quiero hacer un repaso general de las funciones. Y de eso va este tema, empezando por descubrir que las funciones están detrás de todas las variables en JavaScript, diferenciando entre declaraciones y expresiones de función, y finalizando con ejemplos donde se evidencia la utilidad de las funciones.

Template literal en JavaScript ES6

Hasta ahora podíamos presentar una declaración literal de un string usando comillas simples o dobles, indistintamente. Ahora con EcmaScript 6 (ES6) podemos también usar el caracter acento grave para encerrar una declaración literal denominada literal de plantilla (template literal).

Una de sus características es que nos permite presentar saltos de línea tal como los escribimos en el código. Pero su particularidad más importante está en el uso de las plantillas, que a modo de código embebido o interpolado facilita la representación de cadenas combinadas con expresiones.

Contenido de una variable String en un Developer Tools

Continuando con la presentación de cosas nuevas en ES6 (EcmaScript 2015), en este tema haremos un repaso de las variables de tipo string y del objeto intrínseco o built-in denominado String. Se expone como JavaScript diferencia entre ambos, detalle que hemos de tener en cuenta también para otros tipos como number o boolean por ejemplo. En el fondo hemos de entender que todo en JavaScript son objetos. Así, por ejemplo, un valor de variable "abc" dispone de todos los métodos del prototipo del objeto String, a partir de cuyo prototipo fue construida dicha variable.

ES6 nos trae nuevos métodos como includes() o repeat(), métodos usuales en otros lenguajes para saber si una cadena está incluida en otra o para repetir una cadena respectivamente. Otra mejora que se analiza es la ampliación del soporte UNICODE, pues en versiones anteriores había algunas limitaciones a la hora de usar códigos Unicode superiores al valor FFFF.

Título del estándar ECMAScript® 2015 (ES6)

EcmaScript versión 6 (abreviado como ES6) es ya una realidad. Se refiere al Standard ECMA-262 6th Edition / June 2015 que define un estándar para lenguajes como JavaScript para los navegadores o Node.js para los servidores. Trae muchas cosas nuevas y que conviene aprender cuanto antes. Por mi parte empezaré a experimentar con cosas sueltas que me interesan y que iré exponiendo en este sitio. En este tema veremos como afecta el nuevo estándar a la declaración de variables usando let y const. Nos centraremos también en saber los motivos por los que debemos dejar de usar la declaración var.

Nueve posiciones de alineado con CSS2 y CSS3

No hay ninguna propiedad específica para alinear elementos de bloque en CSS2. Se han venido usando diversas técnicas como la del valor auto para los márgenes horizontales que nos permite alinear en esa dirección. Otra forma es dar al elemento de bloque hijo el valor inline-block en su propiedad display. Así podemos dimensionarlo y obedecerá la alineación de elementos Inline que vimos en temas anteriores. Usando text-align para el bloque padre y vertical-align para el bloque hijo conseguimos, con ciertas limitaciones, alinear en ambas direcciones.

Esas técnicas y otras dejarán de ser usadas cuando la nueva especificación CSS Box Alignment Module Level 3, borrador del 18 de diciembre de 2014, se implemente finalmente. Establece la alineación en varios modelos de caja: block layout, table layout, flex layout y grid layout. Por ahora sólo es soportado en los dos últimos.

Se presentan ejemplos interactivos usando varias técnicas. Tres de ellas con CSS2: márgenes (margin), altura de línea (line-height) y presentación de celda de tabla (table-cell). Usando la propiedad de CSS3 transform junto al posicionamiento absoluto tendremos la técnica por posicionamiento (position). Con la técnica de cajas flexibles haremos dos ejemplos de flex alignment. Por último también disponemos un ejemplo con box alignment que debería también aplicar a elementos de bloque, aunque por ahora no funciona.

Buscando línea base (baseline) para una fuente de texto

La alineación vertical para elementos Inline en CSS es un tema complejo dado que tenemos que entender la estructura vertical de las fuentes de texto. Algunos conceptos como las líneas base (baselines) o las áreas ascendentes y descendentes son necesarios tenerlos claros para entender la propiedad vertical-align. Además no hay que olvidar como afectan las propiedades height y line-height a elementos Inline.

También se dedica este tema a descubrir a qué altura se ubican las distintas líneas base, intentando calcular los valores ascent y descent para una determinada fuente y tamaño. Con eso haremos un ejemplo de uso de vertical-align de CSS2.1 para entender mejor sus valores de alineación como baseline o middle.

Iconos de alineación horizontal

El módulo CSS Text Module Level 3 es la especificación CSS3 para manipulación de texto, cubriendo entre otras cosas todo lo relativo a la alineación de elementos en línea. Actualiza la propiedad de CSS2.1 text-align con nuevos valores y agrega más propiedades como text-align-last y text-justify. En este tema veremos un poco sobre esto que, en resumen, se trata de alinear horizontalmente contenidos Inline.

Ejemplo de la complejidad de una expresión regular

Las expresiones regulares en JavaScript y en cualquier lenguaje son un recurso muy importante que todo programador empezará a usar más temprano que tarde. Porque aunque todos los problemas no se pueden resolver con expresiones regulares, si que hay muchos donde esta técnica nos ayudará. Es verdad que antes de empezar a usarlas asustan un poco, porque de entrada ya vemos un revoltijo de caracteres que parecen imposibles de leer. Estos temas pretenden un acercamiento a las expresiones regulares y que al final no resulten tan "ásperas".

Imágenes, recurso imprescindible para la Web

Las imágenes en la Web son elementos imprescindibles a la vez que suponen un importante consumo de recursos. Si queremos que un sitio se adapte a los dispositivos tanto en tamaños de pantalla como en optimización de la velocidad de carga, tenemos que gestionar las imágenes con HTML-5.1. Las mejoras incorporadas son los nuevos atributos srcset y sizes para el elemento <img> así como un nuevo elemento <picture>.

CSS Shape, flotar y envolver texto

La especificación de formas geométricas CSS Shapes Module Level 1 nos permite crear una forma geométrica y flotarla, con lo que el texto envolverá dicha forma. También es posible usar una imagen como forma geométrica, tal que serán sus áreas de transparencia las que delimitarán como el texto envuelve a la imagen. La especificación está en fase CR y aún queda bastante para finalizar la implementación por parte de los navegadores, pero en algunos como Chrome 37 y Opera 24 ya puede usarse. Internet Explorer y Firefox aún no soportan esta especificación pero es posible que lo implementen en poco tiempo.

En este tema presento algunos ejemplos para flotar y envolver la forma geométrica de una imagen usando solo CSS2 y con esta nueva especificación CSS Shapes. Al final hay unos ejemplos para hacer algo parecido a una flotación al centro usando también ambas posibilidades .

Pestaña Sources del Devtools de Chrome

El navegador Chrome presenta unas herramientas de desarrollo (Developer Tools) que me están siendo muy útiles para diversos propósitos. El año pasado 2013 incoporaron a la pestaña Sources la posibilidad de agregar un workspace y así poder editar los archivos fuentes en el sistema local de archivos. El editor de código es muy sencillo pero completamente funcional. Junto a un servidor local como Apache con PHP, es más que suficiente para el propósito de editar los archivos HTML, CSS, JS y PHP para este sitio web.

En estos temas explico como agregar un workspace y hacer un mapeado de URL. También expongo una relación de teclas de método abreviado o shortcuts, necesarias para trabajar con el editor.

Latencia web

Medir velocidad de la conexión

La latencia y el ancho de banda son dos conceptos relacionados con las conexiones web. Especialmente la latencia que origina la comunicación con TCP debe ser tenida en cuenta si queremos optimizar la velocidad de carga de nuestra web. En este tema se expone una introducción a estos conceptos, intentando explicar como funciona TCP y también como medir el comportamiento de nuestro servidor en esta materia.

Pagespeed Insights para www.wextensible.com

Para optimizar algo necesitamos medir alguna característica, aplicar algún cambio y volver a medir para comprobar que hemos conseguido mejorarla. Dada la cantidad y complejidad de parámetros que intervienen en la carga de una página web, quizás como primer paso la mejor opción sea utilizar una herramienta que nos mida el grado de cumplimiento de ciertas reglas de optimización. Aplicarlas nos debe llevar también a entenderlas. Y este sería en todo caso un paso previo para luego intentar aplicar mejoras usando mediciones directas como la del DOMContentLoaded, Load o en que momento se ejecuta el primer Layout y pintado de la página. En este tema repaso algunas herramientas que podemos usar para optimizar la velocidad de carga, como Web Page Test, Pagespeed Insights y las Developer Tools de los navegadores.

Consulta medios en navegador móvil Las consultas de medios de CSS3 (media query) nos ofrecen información acerca del dispositivo donde vamos a presentar una página web. En este tema se expone una introducción y un ejemplo aplicándolas para modificar la estructura de la página y adaptarla al ancho de pantalla. Es un primer paso para conseguir un diseño adaptativo (responsive design).

Navegador móvil Una web puede funcionar bien en un ordenador de sobremesa, pero cuando pasamos a un dispositivo móvil hay muchas cosas que tener cuenta. Una de ellas son las propias dimensiones de la pantalla que nos obliga a hacer una adaptación de dispositivo de nuestras páginas. Esto será un punto de partida para lograr el diseño adaptativo (responsive design) de un sitio web.

Logo wextensible animado Las animaciones de CSS3 nos permiten modificar ciertas propiedades CSS durante un determinado tiempo para conseguir un efecto animado de un elemento HTML. Son similares a las transiciones, aunque en éstas el cambio se produce cuando el valor de la propiedad es modificado, mientras que la animación se inicia cuando las propiedades son aplicadas. Podemos controlar el inicio, fin y estados intermedios haciendo uso de marcos clave (keyframes).

El soporte transferable en los Web Workers es una característica que aporta una gran velocidad en la transmisión de arrays de datos de gran volumen. Actualmente los principales navegadores lo soportan, pero desde la versión inicial de soporte en Firefox 18 hasta la actual Firefox 22 tienen un comportamiento ligeramente diferente. Sólo permiten transferir el buffer y no la vista del mismo.

Hay un bug Mozilla registrado sobre este aspecto, aún sin resolver. Mientras sólo queda modificar lo necesario para adaptarnos a Firefox, ya que éste no quiere por ahora adaptarse a como lo hacen otros navegadores (Chrome 27, Opera 12.15). He revisado los temas Pruebas velocidad y soporte de los Web Workers y Web Workers con Canvas para tener en cuenta esta incidencia.

Posicionamientos con eventos 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.

Transformaciones con CSS3 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.

Transformaciones con CSS3 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.

JavaScript eficiente con objetos 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.

Closures, módulos, espacio de nombres 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.

Leer archivo con File API La especificación File API expone una API para representar objetos de archivo en aplicaciones web. Puede gestionar la lista de archivos seleccionados por el usuario y acceder a los datos de esos archivos. Esta especificación resume al principio los componentes de la API. Primero define una interfaz FileList que representa un array de archivos seleccionados. Luego otra interfaz Blob que representa datos binarios sin tratar y que no son modificables, permitiendo el acceso a rangos de bytes dentro de ese objeto. La interfaz File incluye información de atributos del archivo pero de sólo lectura (p.e. nombre de archivo o fecha de modificación). La interfaz FileReader provee métodos para leer un archivo a un objeto File o Blob con eventos para obtener el resultado. Por último define un URI scheme para usar con datos binarios como los archivos y así poder ser referenciados en las aplicaciones web. En la imagen puede ver como podemos acceder a un archivo de texto de nuestro ordenador y leer su contenido.

Evolución carga de recursos web

Con la actualización del 8 de Julio de 2012 he modificado todo el sitio para minimizar los documentos (o minificar como dicen algunos). Con la minimización de documentos tratamos de reducir los espacios y eliminar comentarios en los documentos HTML, PHP, JS y CSS para que ocupen el menor tamaño posible. Así se consigue una velocidad de transferencia superior y por tanto una mayor rapidez en la carga de la página. Esto es especialmente importante cuando tenemos nuestro sitio en un alojamiento compartido. Pero también la tendencia actual es incorporar más JavaScript a las páginas, en gran medida proveniente de fuentes externas, como los botones me gusta de la redes sociales por ejemplo. Todo esto entorpece la carga de la página por lo que hemos de reducir tiempos de carga atacando todas las vías posibles. Y esta de la minimización de documentos es una de ellas.

En esta gráfica puede ver la evolución histórica del tamaño agrupado por tipos de recursos de la página de inicio del sitio. Se observa que la minimización de documentos es más importante en los JS y en menor medida en los CSS y HTML. Las imágenes (tipo IMG) con extensiones jpg, png o gif son realmente recursos ya comprimidos, por lo que no se les aplica ninguna acción. Comprimir una imagen ya comprimida puede incluso incrementar su tamaño. En un futuro tendré que buscar la forma de optimizar el tamaño de las imágenes. Cosas como el diseño adaptativo (responsive design) para las imágenes son objetivos que debería implementar en este sitio.

Transiciones CSS3 La especificación CSS3 Transitions en fase WC del 3 de Abril de 2012 contempla las transiciones de las propiedades de estilo. Esa especificación está en fase de borrador, por lo que puede sufrir cambios y su implementación puede diferir de un navegador a otro. Con las transiciones se consigue que el cambio en una propiedad de estilo ocurra de forma gradual o suave durante un tiempo determinado. Por ejemplo, si desde JavaScript modificamos el ancho y alto de un elemento, esto ocurre de forma inmediata. Con transiciones este cambio será gradual, en un grado que puede ser configurado.

estilo CSS de un elemento En mi último artículo sobre los vendor prefixes o prefijos propietarios expliqué que estos se usan para aquellas características que se implementan antes de que exista un estándar. Mientras tanto si los navegadores no han unificado su comportamiento es posible que una propiedad CSS no se comporte igual en todos ellos. Lo más práctico es no usar nuevas características que aún no se han consolidado. Pero esta actitud no es adecuada para afrontar los cambios en Internet, donde debemos siempre estar aprendiendo y aplicando nuevas tecnologías. Aunque eso suponga equivocarse y verse obligado a rectificar o retocar cosas que hemos puesto en nuestro sitio. Con las propiedades con prefijo tenemos el problema de que hay que escribir muchas declaraciones CSS para los diferentes navegadores. Con el riesgo de que en un futuro todo ese material resulte, al menos, pesado de mantener. Hay técnicas ya funcionando para gestionar las nuevas propiedades de CSS3, algo que ya intenté hace tiempo y ahora estoy perfeccionando.

html5test.com En html5test.com se puede comprobar el soporte de las características de HTML5 en los navegadores, observándose que los actuales soportan los Web Workers, aunque con distinto grado en la adopción de las particularidades de esta característica. En este tema intento aplicar lo aprendido en un caso de uso concreto: mejorar los tiempos de proceso en el elemento Canvas del Generador de fractales. En lugar de hacer cambios en esa aplicación sin saber como resultará será mejor hacer unas pruebas previas con algo más sencillo. Esta página contiene siete ejemplos que generan un mismo fractal Julia. Inicialmente he tomado la configuración que aparece en el Trazador de gráficas matemáticas para el ejemplo expuesto en la sección Fractales de Julia en c=(-0.75, 0), aunque aquí también pueden modificarse los parámetros para generar otros ejemplos.

Dado el diferente nivel de soporte de los navegadores con los Workers, es necesario detectarlo previamente y actuar en su caso. Hay scripts que pueden ayudar en esto de la detección de características HTML5, como modernizr.com. Pero prefiero hacerme mi propio evaluador test-worker.js. El test se realiza llamando a la función var t = testWorker(). Luego accedemos a cada soporte, por ejemplo, con t.testArray que contiene un booleano para ver si pasó el test de enviar un array convencional.

Mensaje bloqueo navegador Web Workers es una API para ejecutar JavaScript en segundo plano de forma independiente a la ejecución de la interfaz de usuario. Lenguajes de elevadas prestaciones como Java tienen características creadas para usar hilos de ejecución. Se trata de realizar tareas de forma concurrente. JavaScript no posee la característica de la concurrencia y los Web Workers intentan llenar este hueco. Todos hemos tenido la experiencia de ver como el navegador se queda bloqueado en ciertas ocasiones debido a que está ejecutando algo en JavaScript. En la imagen puede ver el mensaje de un navegador cuando una tarea en JavaScript ocupa un tiempo excesivo, dándole la posibilidad al usuario de cancelar esa ejecución. Los Web Workers nos servirán para realizar ejecuciones en segundo plano mientras el usuario sigue interactuando con nuestra página. Sin embargo hay algunas limitaciones que restringuen los casos de uso y es lo que intento aprender en estos temas.

Fractales Julia Esto de los fractales se está convirtiendo en una adicción. Ahora explico en el tema Fractales con el Trazador de gráficas matemáticas como usar esa aplicación para generarlos. Pero además he realizado un aplicación específica para generarlos aplicando un algoritmo seleccionador de puntos. La imagen de la izquierda es un ejemplo obtenido con ese generador de fractales. Se trata de un Conjunto de Mandelbrot centrado en el punto (0.7487, 0.0607), con un zoom de 4000 y con un escape de 10000. Aunque no permite modificar el algoritmo, tal como sí podemos hacer en el Trazador, este generador en cambio permite aplicar las configuraciones sobre la marcha para adaptar el fractal a la mejor visualización. Los algoritmos que puede ejecutar son el Triángulo y Alfombra de Sierpinski y los conjuntos de Julia y Mandelbrot para las funciones fc(z)=z2+c y también para fc(z)=z3+c.

Fractales Básicos Un fractal es una forma geométrica fragmentada que se repite a cualquier escala. Es un término propuesto por Benoît Mandelbrot considerado como el principal creador de la geometría fractal. Las imágenes que se generan resultan extrañamente atractivas. Pero no sólo son imágenes, pues parece que además la geometría fractal tiene aplicación en otras áreas de la ciencia y las matemáticas. También resulta atrayente para un programador el reto de generar fractales. Quiero iniciarme con algunos fractales básicos, como el triángulo y la alfombra de Sierpinski o el copo de nieve de Koch. Es necesario entender el concepto de recursividad en programación, que junto al uso del elemento canvas de HTML-5 me servirá para llevar a cabo esta primera inmersión en el mundo de los fractales.

HTML-5 viene con muchas cosas nuevas. Los aspectos orientados a la estructura del documento son importantes, pero también lo es conocer otras cosas y, quizás, más entretenidas. Así el nuevo elemento <canvas> viene a ser un lienzo donde dibujar cualquier cosa.

Lo primero que tenemos que comprender es la nueva estructura de un documento HTML-5. Cambios en el DOCTYPE, el elemento raíz<html> y alguna meta-información dentro del <head> son los más importantes.

HTML-5 ya está aquí. Y para quedarse, como dicen algunos. ¿Por dónde empezar?. Pues por el principio, o mejor dicho, los principios de diseño publicados por W3C en el año 2007. A partir de ahí podemos fijarnos unas preferencias de sintaxis para escribr HTML-5.

Con CSS-2.1 podemos decorar una caja de un elemento con fondos y bordes. Ahora CSS-3 incorpora algunas cosas nuevas como bordes redondeados con {border-radius} o con imágenes con {border-image}. También hay la posibilidad de gestionar como el fondo se acopla a los bordes y relleno, es decir, a las caja de borde, de relleno o de contenido (border-box, padding-box o content-box), usando las nuevas propiedades {background-clip}, {background-origin} y {background-size}. Por último podemos añadir una sombra a la caja con {box-shadow} y controlar como se debe romper la decoración de la caja cuando se produce un salto de línea o página con {box-decoration-break}.

CSS-3 incorpora algunas cosas que expongo en este tema. Las transparencias con la propiedad {opacity} o la forma directa rgba(red, green, blue, alpha) para declarar un color con transparencia. También tenemos la posibilidad de usar el espacio de color HSL, una alternativa más natural al espacio RGB en cuanto que los colores se agrupan por matices o tonalidades. En estos temas además actualizo unos componentes que me habían servido para practicar CSS-2.1. Se trata de un cubo de color y una paleta de color usando objetos de Javascript y una esquematización del conjunto de propiedades CSS en un XML.

La técnica denominada AJAX usa el objeto XMLHttpRequest con JavaScript para conseguir un canal de comunicación con el servidor mediante el protocolo HTTP de peticiones y respuestas. No sustituye en ningún caso a esas mismas funciones del navegador, sino que lo complementa para hacer más eficientes ciertas tareas.

Los elementos HTML pueden ser posicionados de forma absoluta en una página. Usando esta característica y las funciones matemáticas del módulo Math de Javascript, he realizado esta aplicación para trazar gráficas de funciones matemáticas. Quizás no tiene la calidad de trazado de las basadas en componentes de Java o Flash por ejemplo. Pero no depender de esos componentes externos es al mismo tiempo una ventaja.

Los formularios en un sitio web son la herramienta imprescindible para recibir datos del usuario. Así conseguimos el objetivo de la comunicación con los que nos visitan. Hacer un formulario y recibir datos con PHP es relativamente fácil. En el glosario XHTML+CSS puede ver ejemplos sobre esto. Pero antes de usarlos para un objetivo real en mi sitio quiero saber más cosas sobre la seguridad relacionada con los datos recibidos. En este tema analizo los riesgos debido a amenazas como XSS o CSRF, observando la necesidad de filtrar y validar datos y formulario.

PHP: Sesiones

El tema de las sesiones en PHP puede ser, en principio, fácil de entender. Pero cuando se combina con la seguridad el asunto se complica. Este tema reúne seis capítulos que podemos considerar como una iniciación al uso de sesiones y cookies con PHP. Se estudia también los efectos sobre la seguridad, con temas como la fijación de sesión (session fixation), el secuestro de sesión (session hijacking) y las sesiones expuestas.

Una vez que he iniciado mi sitio web, creo conviente revisar y actualizar mi glosario XHTML+CSS, pues éste lo finalicé en el 2008. En este mes de junio he actualizado y probado sus contenidos con los navegadores Explorer 8.0, Firefox 3.5, Opera 10.5 y Safari 4.0, que son las versiones más reciente a inicios de Junio 2010.