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]

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]

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]

Emmet es un inventazo. Si no lo conoces ya estás tardando en aprenderlo. Visual Studio Code lo tiene integrado y puedes ahorrar mucho tiempo haciendo tus páginas Web. Sin embargo una de las abreviaturas más importantes, html:5, genera un código un poco "chungo" que estaría genial poder cambiar a voluntad y meter lo que realmente usemos nosotros casi siempre. En este post te explico cómo lograrlo y cómo puedes crear más abreviaturas para acelerar más el trabajo todavía. [Más]

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]

Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario. Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos, podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo de nuevo cuando vuelva a aparecer. Cosas por el estilo. Esta funcionalidad no se incluye nativamente en HTML/JavaScript. He desarrollado una biblitoeca JavaScript que añade eventos a la página para detectar los cambios de visibilidad de cualquier elemento. [Más]

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]

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]

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]

Los tooltips son esas ventanitas flotantes pequeñas de color amarillo que aparecen cuando pasas por encima de algunos elementos de las interfaces de usuario de muchas aplicaciones. Los controla el sistema y poco puedes hacer para controlar su aspecto o ubicación. Pero no podemos controlar el aspecto que tienen ni cómo se muestran. Mediante JavaScript es fácil detectar el movimiento del cursor sobre un determinado elemento o un trozo de texto y mostrar una capa con el aspecto que deseemos en el lugar que queramos, pero no deja de ser un trabajo pesado y tedioso, además de propenso a errores y que carga un poco más la página. En este post voy a explicar cómo podemos crear tooltips con el aspecto que deseemos, que aparezcan donde queramos y utilizando exclusivamente CSS, sin escribir nada de código... [Más]