En el escritorio no le das importancia, porque al final todo se introduce con un teclado físico, pero en cuando vas a introducir información en un dispositivo de dimensiones limitadas como un móvil, toda ayuda que recibas es muy importante. Por ello, sería mucho mejor que para introducir una cantidad apareciese ya el teclado numérico activado. Y lo mismo con otros tipos de teclados especializados que podamos necesitar: para introducir direcciones web, emails o teléfonos, por ejemplo. En este artículo te explico un par de maneras de conseguirlo tan solo con HTML. [Más]

Los checkboxes son un tipo de control muy útil. Se trata de esos pequeños cuadraditos que nos permiten marcar opciones para decidir si las activamos o las desactivamos. Su mayor problema es que son pequeños y no son especialmente bonitos. Y para acabar de denigrarlos, cuando Apple lanzó el iPhone cambió el aspecto de este tipo de selectores para que, en vez de ser una simple caja, se comportasen como una clavija, deslizándose de un lado a otro. El caso es que en HTML no están disponibles controles como este switch de iOS, y nos tenemos que conformar con el humilde pero efectivo checkbox. En este artículo te voy a explicar paso a paso y con detalle cómo conseguir el aspecto que desees. [Más]

Ya he hablado en otras ocasiones sobre cómo podemos averiguar qué partes de las hojas de estilo de una página no se están usando y también de cómo podemos, incluso, limpiarlas automáticamente. Google Chrome y los navegadores basados en él (Edge, Opera, Brave...) ofrecen de serie algunas herramientas, como la de cobertura, para poder lograr esto. Hace unos meses que en las versiones preliminares (Canary , Dev y Beta) se incluye una característica experimental que nos ayuda todavía más a comprender cómo funcionan nuestras hojas de estilo (¡o las de otros!): el Informe CSS. Te cuento cómo activarlo y qué te ofrece. [Más]

El clásico elemento para colocar imágenes en HTML, , poco a poco ha sido sustituido por el más moderno y capaz elemento que permite definir diferentes imágenes y formatos en función del ancho de pantalla y el soporte, y combinarlo con subelementos y para un control total. Esto no sólo sirve para lo obvio, que es mostrar imágenes a diferentes tamaños y resoluciones, sino que se pueden conseguir cosas más avanzadas, como por ejemplo, hacer que según el tamaño de la pantalla se centre la imagen en determinado detalle, en lugar de que se vean otras partes menos interesantes. Bien, el caso es que una duda sencilla pero que a más de uno le puede traer de cabeza (lo sé porque me lo preguntan mucho los alumnos) es ¿cómo hago para centrar los contenidos de un elemento en mi página o aplicación web? [Más]

Tanto null como undefined en JavaScript son valores bastante extraños, sobre todo para los principiantes. Ambos sirven para algo muy parecido, que es indicar la ausencia de valor. Lo que ocurre es que undefined es un valor que denota que no hay valor porque no se ha definido todavía, mientras que null se usa para indicar que no hay valor porque así lo hemos querido indicar expresamente. Pero en ambos casos el significado último de "ausencia de valor" es el mismo. Sin embargo ¿en qué se diferencian? Pues en muchas cosas... Vamos a verlas. [Más]

Ya he hablado en este blog hace mucho tiempo acerca de las variables CSS y cómo nos permiten obtener una gran potencia sin necesidad de recurrir a metalenguajes como Sass/SCSS o similares solo para parametrizar los diseños. Hoy voy a comentar brevemente cómo podemos modificar dinámicamente los valores de estas variables CSS mediante JavaScript, por ejemplo para cambiar los colores de la página, sin recargarla, cambiando tan sólo el valor de las variables CSS que controlan su aspecto. [Más]

Aunque todos los desarrolladores Web tienen más o menos claro el funcionamiento de los eventos unload, beforeunload y otros similares en un navegador de escritorio, el tema de la descarga de páginas en los navegadores móviles es bastante complejo por la forma particular que tienen de funcionar respecto a un navegador de escritorio. Es largo de contar y con muchas ramificaciones, pero voy a intentar resumirlo. [Más]

Tradicionalmente, si por algún motivo queremos que los usuarios no sean capaces de seleccionar ciertas partes del contenido de nuestra página Web, hemos tenido que recurrir a JavaScript. Se marcaban los elementos a "proteger" de alguna manera (por ejemplo con una clase determinada) y tras la carga de la página un código los buscaba e interceptaba ciertos eventos para anularlos e impedir así que fueran seleccionables. La versión 4 de la especificación CSS incluye una nueva funcionalidad precisamente para esto. Todavía está en borrador pero ya hace tiempo que todos los navegadores del mercado lo soportan. Vamos a conocerla. [Más]

La síntesis de voz por parte de las computadoras siempre ha sido una de las cosas más llamativas que se podían hacer. En la era de los asistentes personales por voz como Siri, Alexa o Google Home, parece una cosa trivial y que casi hemos dado por sentada, pero no era así hace tan solo unos pocos años. Por suerte ahora están tan presentes que es posible incluso implementar síntesis de voz natural (muy realista) en cualquier navegador Web moderno usando unas pocas líneas de JavaScript y peleándonos un poco con algunos pequeños detalles. En este artículo te cuento cómo conseguirlo... [Más]

El tamaño y la cantidad de los recursos asociados a las páginas influye mucho sobre diversos factores de nuestro sitio web. Desde la velocidad de carga de la página, hasta el ancho de banda consumido. Por eso, muchos sitios web, especialmente los que hacen uso intensivo de imágenes, implementan técnicas para que sólo se cargue lo estrictamente necesario en cada momento. A estas técnicas se les suele denominar de "lazy loading" y hasta ahora había que usar JavaScript para conseguirlo. Por suerte ahora existe un atributo HTML que nos permite conseguir el mismo efecto sin programar. Vamos a verlo... [Más]