JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Exportando tablas a Excel, CSV y otros formatos desde una página HTML en JavaScript puro

Una necesidad muy habitual en todo tipo de desarrollos Web es la de poder exportar información que tenemos en la página a archivos descargables que el usuario pueda utilizar.
Para solucionar este problema, muchas veces se recurre a que, cuando el usuario pulsa el botón de exportar, lanzamos una nueva petición al servidor, y el documento descargable se genera al vuelo en el backend, siendo devuelto al usuario a través de Internet. Esto está bien y de hecho es indispensable a veces, según el tipo de información y el formato del archivo que nos interese. Sin embargo, lo que muchos programadores Front-End no saben, es que es posible generar archivos para descarga directamente desde el navegador, usando tan solo JavaScript. Y eso precisamente es lo que voy a explicar hoy en este artículo... [Más]

Una opinión personal sobre la gestión de Angular 2

Como seguramente sabrás, se acaba de presentar Angular 2, llamada a ser según algunos el futuro del desarrollo web. A continuación os comento mi punto de vista sobre esta tecnología, pero no sobre si es buena, mala o regular, o las ventajas y desventajas que tiene, sino sobre cómo pienso que lo han hecho de mal respecto a gestionar la comunicación del proyecto. Y es que algo como esto es crucial si estás gestionando una tecnología utilizada por millones de personas, como es el caso. [Más]

¿Detectar dispositivos móviles mediante código? Una mala idea...

Hace poco alguien me preguntó cómo podía hacer, mediante JavaScript, para detectar si el dispositivo que estaba usando un usuario era o no un móvil. La idea era adaptar la interfaz y parte del JavaScript a ese caso concreto, para mostrar una interfaz y funcionalidad diferente para dispositivos móviles respecto a la "versión" de escritorio de la aplicación web. De entrada, detectar el dispositivo es una práctica muy poco recomendable. Hace ya bastantes años era lo habitual, pero en los últimos años, con la proliferación de dispositivos, navegadores, factores de forma, etc... y la velocidad con la que cambian las características soportadas por todos ellos, hacer una detección de tipo de dispositivo o navegador es una mala idea. La cadena de agente de usuario: mala idea Lo que se hacía hace mucho tiempo para detectar el tipo de dispositivo era utilizar la cadena de agente de usuario (User Agent) de los navegadores, para determinar el tipo de navegador, su versión y el sistema operativo... [Más]

Midiendo el rendimiento de nuestro código JavaScript de manera sencilla desde la consola

Hace unas semanas os contaba un truco poco conocido pero muy útil para mostrar datos de modo tabular por la consola durante una sesión de depuración con JavaScript. Hoy traigo un par de trucos más del mismo estilo que estoy seguro de que no son demasiado conocidos tampoco.Cronometrar códigoUna necesidad habitual es medir el tiempo transcurrido al ejecutar determinado código, por ejemplo para tratar de ver cuál de dos estrategias diferentes de código es la más rápida con un número grande de datos o cosas por el estilo.Una forma habitual de hacerlo es guardar la fecha y hora actuales en una variable antes y después de la ejecución, y luego mostrar por consola la diferencia en milisegundos entre ambas. Sin embargo existe una forma mucho mejor que es utilizar los métodos console.time() y console.timeEnd().Estos métodos de la consola toman como parámetro el nombre de un contador, de modo que además podemos utilizar más de uno al mismo tiempo, midiendo incluso tiempos en paralelo si fuera ne... [Más]

Precarga y renderizado de páginas y recursos para mejorar el rendimiento de navegación

Existen multitud de técnicas para mejorar el rendimiento de las páginas web y conseguir mejores tiempos de respuesta, aunque la mayor parte de estas mejoras se deben realizar en el servidor. Sin embargo existen algunas cosas que podemos hacer desde el propio código HTML, en el Front-End y sin la intervención del servidor, para mejorar la velocidad de carga de las páginas siguientes a la actual y que creo que no son muy conocidas por la comunidad de desarrolladores. Imagina la siguiente situación: tienes una presentación basada en HTML en la que el usuario se va moviendo hacia adelante para ir visualizando una serie de recursos. Cada pulsación del botón "adelante" hace que se cargue un nuevo recurso. El caso típico es un carrusel de imágenes en el que, cada vez que pulsas en el botón de "adelante" se carga la siguiente imagen que haya en la lista. Si las imágenes son grandes, con mucha resolución, no están muy optimizadas o simplemente la conexión es lenta, es posible que tarden en c... [Más]

Cómo procesar y tratar datos JSON con Excel

Hace 15 años parecía que el futuro del intercambio de datos pasaba por XML. Este lenguaje de marcas permitía definir estructuras de datos todo lo complejas que necesitáramos, con varios niveles de estructura anidados, y de manera sencilla pues está basado en texto. De hecho recuerdo que cuando apareció la plataforma .NET lo que más destacaban en la documentación era el soporte para XML (hasta el propio nombre se derivaba en cierto modo de que estaba preparado para la Red gracias a este soporte).Desde entonces ha llovido mucho, y las cosas han cambiado mucho también. En la actualidad existe un consenso bastante amplio en que el formato de intercambio de datos por antonomasia es JSON: JavaScript Object Notation. Este formato, basado en sintaxis JavaScript, tiene todas las ventajas del XML como el poder describir estructuras todo lo complejas que queramos, pero añade varias ventajas, como que es más fácil de leer y escribir por los humanos y, sobre todo, que es mucho más compacto para ser... [Más]

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc... Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:"Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan de... [Más]

Cómo obtener una referencia al ámbito global en cualquier entorno JavaScript (HTML, Node.js, Windows Scripting Host...)

El ámbito global de JavaScript es el ámbito superior en el que se definen las variables y que contiene algunas de las funcionalidades globales del entorno de ejecución. Se trata de un objeto especial que: Siempre está disponible Se llama de manera implícita, es decir, no es necesario mencionar su nombre explícitamente para usar sus métodos o propiedades, al contrario que con cualquier otro objeto. Según indica el estándar ECMAScript, este objeto global no dispone de constructor ni de prototipo y no se puede invocar como una función al igual que el resto de los objetos. Si en un fragmento de código JavaScript definimos una variable o una función como estas fuera de todo contexto, o sea, para simplificar, sin ser dentro de una función): var miVar = 0; function sumar(a, b) { return a+b; } Lo que estamos haciendo es crear sendos miembros en el objeto global, que es el que constituye ... [Más]