JASoft.org

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

MENÚ - JASoft: JM Alarcón

Creando diálogos y pop-ups nativos con HTML: El elemento "dialog" de HTML 5.2

Una necesidad común en casi cualquier aplicación Web es la de mostrar diálogos al usuario. Se trata de los típicos "pop-ups" que surgen en la aplicación de vez en cuando con múltiples propósitos: notificaciones, preguntar algo al usuario, mostrar los detalles de un registro en una base de datos... Casi cualquier cosa que se te pueda ocurrir. Crear algo como esto mediante el uso de capas y un poco de JavaScript no es muy complicado, pero tiene bastantes "pegas". Por eso el W3C, encargado de los estándares Web, definió en HTML 5.2 un nuevo elemento específicamente pensado para esta tarea: <dialog> y que tiene muchas aplicaciones. Vamos a ver cómo sacarle todo el partido. [Más]

¿Cómo utilizar las fuentes de Google desde tu propio servidor en vez de desde Google?

Google Fonts es un recurso maravilloso y gratuito para acceder a decenas o centenares de fuentes tipográficas de manera rápida y con rendimiento, ya que además se sirven desde la CDN de Google. Sin embargo algunas personas prefieren servir las fuentes desde su propio servidor, sin depender de los servidores de Google. Aunque yo te recomiendo encarecidamente que uses las fuentes desde los servidores de Google y no desde el tuyo propio, dado que me lo han preguntado, voy a explicar cómo conseguir "gorronear" esas fuentes y utilizarlas desde tu propio servidor o en local. [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]

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]

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]

La relación entre atributos HTML y propiedades JavaScript

Cuando uno programa para la Web en la parte Front-End tiene muy interiorizados algunos conceptos que no siempre son correctos. Una confusión habitual (o al menos algo que no siempre se tiene claro) es la relación que existe entre los atributos de las etiquetas HTML y las propiedades de los objetos del DOM que representan a dichas etiquetas, a las que accedemos desde JavaScript. Muchas veces se piensa que existe una relación directa y bidireccional entre ellas, de modo que si cambias una propiedad se está cambiando el atributo y viceversa. Y aunque esto es cierto en algunos casos, existen otras casuísticas que pueden complicarte la vida si no las tienes en cuenta. Vamos a verlo... [Más]

Copiado de texto al portapapeles con JavaScript - API Asíncrona

El mes pasado os hablaba aquí de una manera sencilla y soportada por todos los navegadores para acceder al portapapeles desde código JavaScript en el navegador. Es un método simple pero un poco engorroso de implementar, puesto que hay que seleccionar rangos en la página para poder copiar su contenido. Además, su implementación varía ligeramente de un navegador a otro porque no está estandarizada. Otra pega importante que tiene el método "clásico" es que es síncrono. Para solucionar todos estos problemas la W3C ha creado la Async Clipboard API. A continuación te cuento cómo sacarle partido. [Más]

CSS: Cómo igualar la altura de dos cajas flotadas para que sean iguales

Imagina que tienes una maquetación básica de un sitio web que tiene una estructura típica: cabecera, cuerpo con dos secciones (lateral y principal) y pie. Para maquetar esto tenemos infinidad de posibilidades, pero supongamos que hemos utilizado cajas flotadas (con float) para definir la sección central, donde está la barra de navegación lateral y el contenido principal de la página. Un efecto negativo habitual de maquetar de esta manera es que si las dos cajas que están una al lado de la otra tienen contenidos muy diferentes en tamaño (lo más habitual de hecho) no tienen la misma altura y quedan descompensadas, creando un efecto muy feo. Te explico cómo solucionarlo usando CSS y un poco de imaginación. [Más]

Copiado de texto al portapapeles con JavaScript - Método "clásico"

Hasta no hace muchos años, facilitar programáticamente que la gente pudiera copiar (o cortar) contenido de una página para llevárselo al portapapeles no era tarea tan fácil. Es decir, si por ejemplo tenías un fragmento de código en tu página de contenidos, y querías ponerle un botón de "Copiar" para facilitar a tus visitantes su copiado al portapapeles, la cosa no era tan fácil. De hecho si querías asegurar que iba a funcionar en todos los navegadores debías recurrir al uso de Flash =:-O En la actualidad la forma de hacerlo está estandarizada y extendida, por lo que resulta más fácil, pero lo curioso es que lo complicado del caso no es tanto copiar al portapapeles sino cómo decidir qué es lo que se va a copiar, así como las pequeñas diferencias entre navegadores a la hora de hacerlo. En este artículo te lo cuento... [Más]