JASoft.org

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

MENÚ - JASoft: JM Alarcón

Activa el historial del portapapeles en Windows 10 (y de paso en Office aunque no tengas Windows 10)

Una de las cosas que más utilizo en el sistema operativo es el portapapeles. Para mi es básico, y supongo que para la mayoría de los usuarios también. Poder copiar/cortar algo y duplicarlo en cualquier otro lado es uno de los inventos más útiles que se han dado en la informática moderna, pero como lo tenemos tan interiorizado ni siquiera le prestamos atención. Aprovecho para reivindicarlo.
El caso es que, para mi, una de las mayores limitaciones que ha tenido el portapapeles de Windows es que solo recuerda lo último que has copiado, pero nada de lo anterior. Y lleva siendo así desde Windows 1.0. No me explico cómo no han solucionado el tema antes. Aunque ha habido intentos (Office tiene algo así), no es hasta ahora cuando por fin lo han hecho. Te cuento cómo activarlo y cómo sacarle partido. [Más]

Diferencias entre RGB y HSL: ¿cuál es mejor para manejar colores CSS para la Web?

En CSS se expresan los colores de diversas maneras, pero las más comunes son dos: RGB y HSL. Tradicionalmente todos hemos aprendido a manejar colores basándonos en un principio muy simple sacado de la naturaleza: la combinación de colores. En el colegio aprendimos que todo color se puede expresar como la combinación de otros tres colores básicos: el rojo, el verde y el azul. En esto es en lo que se basa la notación RGB. Sin embargo esta notación presenta varios problemas, entre ellos que no es nada intuitiva. La notación HSL, por el contrario, es mucho más fácil de visualizar y utilizar en el día a día. En este post te explico en qué consiste cada una de ellas y cómo sacarles partido. [Más]

Cómo instalar un certificado HTTPS en IIS Express para desarrollo en local

En mi último post te contaba cómo podías generar un certificado HTTPS válido para poder hacer desarrollo en local usando conexiones seguras (necesarias para usar ciertas APIs de HTML5), incluso simulando el dominio real que se usará en la aplicación final. El método vale para cualquier sistema operativo y genera certificados válidos solo para la máquina local, por lo que son perfectos para desarrollo. Ahora toca ver cómo montar ese certificado en tu servidor local de desarrollo. Cada uno tiene su método. Yo me voy a ocupar de IIS Express. [Más]

Cómo generar certificados HTTPS para desarrollo local que no produzcan errores

El uso de conexiones seguras se está volviendo imprescindible también a la hora de desarrollar. El principal motivo es que cada día más APIs de HTML5 requieren el uso de HTTPS para poder funcionar. Por ejemplo, la API de geolocalización, la de notificaciones o la de service workers entre otras muchas. Debido a ello, si necesitamos desarrollar aplicaciones con ciertas características, no nos queda más remedio que utilizar también HTTPS en nuestros equipos de desarrollo para poder probar y afinar el código. En este artículo te voy a contar cómo puedes montar un entorno de desarrollo que utilice HTTPS contra localhost, de manera sencilla en cualquier sistema operativo de escritorio (Windows, Mac y Linux). [Más]

Qué pasa cuando escribes la dirección de una web en tu navegador y cómo simular cualquier dominio en tu equipo local para desarrollo

Lo que voy a contar hoy es algo de "cultura general", pero también es cierto que muchas personas lo desconocen todavía, sobre todo si están comenzando en el mundo de la programación web. Empezaré repasando cómo es el funcionamiento básico desde el momento en el que escribimos una dirección web en un navegador y hasta que empieza a solicitarse la página de verdad, y luego explicaré un sencillo proceso que te permite simular que cualquier dominio de internet, exista o no, está en cualquier servidor que tu quieras. ¡Vamos allá! [Más]

TRUCO - Depuración con Chrome: convertir archivos JavaScript en "cajas negras" para evitar depurarlos

Cuando estamos depurando paso a paso, poniendo puntos de interrupción en ciertas líneas para luego ir ejecutando el código instrucción por instrucción, no tiene mucho sentido que, de repente, se nos abra el código fuente de algunas bibliotecas estándar que están muy probadas y son robustas (jQuery, lodash, Angular, Vue...), pues no vamos a depurarlo. Y mucho menos si lo estamos usando ya minimizado y listo para producción, puesto que encima no veremos gran cosa tampoco. Vamos a ver cómo hacer que el depurador de Chrome se salte archivos completos que no nos interesa depurar, ahorrando tiempo y ganando productividad. [Más]

jQuery.pan: Un plugin para jQuery, gratuito y Open Source, para hacer zoom y pan de imágenes

Hace unos días os hablaba de un plugin sencillo para jQuery que había creado que permite añadir un tooltip basado en CSS a las imágenes y otros objetos, que va siguiendo el puntero del ratón para facilitar dar información sobre éstos. Otro añadido que hice al blog al mismo tiempo fue un sistema para realizar zooms a las imágenes y que puedes comprobar en cualquiera de los artículos que tengan alguna imagen un poco más grande del espacio disponible. Esta funcionalidad se la otorga un plugin de jQuery llamado jQuery.pan. Os lo presento a continuación. [Más]

YACSSTooltip: un plugin gratuito y Open Source para crear tooltips de imágenes con jQuery

Si eres seguidor habitual de este blog, habrás notado que desde hace unos días las imágenes muestran la información de una manera más clara, en concreto utilizando un "tooltip" o capa de información que persigue al cursor y que muestra el texto asociada a la misma de una forma visible. Este tooltip es una capa especial creada con JavaScript y CSS y para que funcione así he creado un plugin gratuito y open source para jQuery que funciona con cualquiera de sus versiones y que permite generar ese tooltip para cualquier elemento que disponga de un atributo title o alt, pero que está pensado fundamentalmente para imágenes. En este post te cuento sus características, cómo ponerlo a andar y cómo personalizarlo. [Más]

Tutorial: ngrok - cómo publicar en Internet cualquier página o aplicación web que tengas en tu equipo local

Está claro que si queremos publicar un sitio o aplicación web de manera permanente debemos configurar y gestionar un servidor web, o contratar algún tipo de servicio básico (hosting) o avanzado (Cloud PaaS) para hacerlo. Pero en muchas ocasiones lo único que queremos es poder exponer temporalmente hacia el exterior de manera sencilla un desarrollo que hemos hecho y que tenemos en nuestra máquina local. Existen muchos casos en los que esto es interesante. Para suplir estas necesidades, una herramienta estupenda y cada vez más utilizada es ngrok (pronunciado "en-groc"). Como me gusta mucho y le saco mucho partido, m he decidido a crear este tutorial para que tú también puedas exprimirle toda su utilidad. ¡Allá vamos! [Más]

CSS: cómo cambiar los estilos de un conjunto de elementos cuando haya más de un número determinado de ellos

Imagina que en una aplicación web tienes un listado de fichas de producto en el que cada elemento es una pequeña estructura HTML para mostrar toda la info de cada uno de los productos del listado: foto, nombre, descripción, tamaños, colores, precio... Además, ese conjunto de elementos de información se generan desde una aplicación en el lado servidor, en función de alguna búsqueda o filtro de la base de datos, de modo que *no puedes saber de antemano* desde tu HTML cuántos elementos hay en la lista. Dependiendo de cuántos haya, quieres cambiar el diseño del listado de resultados. Por ejemplo, si hay muy pocos (3 o menos) quieres que se vean más grandes y resaltándolos todo lo que puedas. Sin embargo si hay más 4 o más la ficha de cada producto en el listado será menos llamativa. En este post vamos a ver como conseguir esto *tan solo usando CSS* sin necesidad de programación ni en cliente ni en servidor. Tiene más miga de lo que parece. [Más]