6 Jul

Leaflet, el mapa interactivo definitivo

Leaflet es una librería JavaScript de código abierto, compatible con dispositivos móviles, de solo 42 KB y que cuenta con todas las características necesarias para un desarrollador que quiera incrustar un mapa interactivo en su web. Con 3 objetivos por bandera: simplicidad, rendimiento y usabilidad, Leaflet es compatible con la mayoría de las plataformas y navegadores. Además de contar con numerosos plugins desarrollados por la comunidad, también despliega una extensa documentación de la API.

18 Nov

Think with Google

¿Sabías que mejorar la carga de tu web en 0.1 segundos puede resultar en un incremento de la tasa de conversión del 0.8%?, ¿o que las páginas que tardan más de 3 segundos en cargar tienen una tasa de rebote 4 veces mayor?, ¿o que un retardo de un segundo en los tiempos de carga puede reducir las tasas de conversión un 20%?

La velocidad de carga de tu sitio es un factor importantísimo, tanto para el posicionamiento como para la experiencia de usuario. Si quieres empezar a optimizarla, pásate por la herramienta de Google «Think With Google» y consigue un análisis pormenorizado de aquellos parámetros que puedes mejorar, así como el tiempo y la valoración del tiempo de carga de tu web.

• Visitar herramienta Think With Google

21 Oct

Código optimizado de búsqueda para WordPress

Si usas Post personalizados (custom type post o CTP), en WordPress, te habrás dado cuenta de que los buscadores (tanto el de administración como el de usuarios) no entran en los campos ni en los Post que hayas creado. Para solucionarlo, os traigo un código que buscará en todos ellos. Añade el siguiente código al archivo functions.php de vuestro tema:

(más…)

13 Oct

Aprendiendo Regex fácil

Os dejo una hoja de ayuda para escribir expresiones regulares. En español, bien explicado y al grano.

29 Jun

Gráficas en CSS puro

Si queréis mostrar gráficas en vuestra web, sin usar Javascript (JS) ni recargar el sitio con más código del necesario, Chart CSS es vuestra solución. Un montón de estilos, para todas las variantes (barras, columnas, líneas, pastel, etc.), personalizables, responsive y en solo 6KB de CSS.

6 Abr

¿El Tooltip más completo?

Si queremos mostrar sugerencias de un elemento en nuestra web, lo mejor es recurrir a globos emergentes de información, lo que -comúnmente- llamamos un Tooltip. Existen numerosos códigos (scripts) para integrar dicha funcionalidad en nuestro sitio. Este me ha gustado especialmente, muchísimas funcionalidades, rápido de cargar, con temas… ¡Creo que no le falta de nada!

Visitar web oficial Tippy.js

1 Abr

Generador de gradientes

¡Los gradientes están de moda! y, en muchas ocasiones, nos resulta complicado escoger los más adecuados para crear una transición agradable y atractiva. Con esta utilidad se acabaron los problemas: selecciona un color y generará un degradado perfecto. Si -además- quieres aplicarlo en tu web, puedes obtener el código CSS con un solo clic.

27 Feb

Gráficas dinámicas en Javascript

Chart JS es una forma simple y flexible de añadir gráficas a tu página web. Gracias a canvas y javascript, podrás insertar todo tipo de diseños. Rápido, gratis, responsive y cuenta con animaciones. No se puede pedir más. Échale un ojo a las demos, si todavía no estás convencido.

4 Sep

Gradientes originales en CSS

No sé si la nueva moda de los gradientes la puso en marcha el rediseño del logotipo de Instagram, o el de los iconos de iOS, pero lo que está claro es que los degradados vuelven a estar en boca -y en pantalla- de todos. En esta ocasión, tenemos la oportunidad de explorar infinitas posibilidades de ellos gracias a la galería de Gradient Magic y, lo que es mejor, descargar su código en CSS para usarlo en el diseño de nuestra web. Por supuesto, si no os gusta ninguno, podéis crear el vuestro a medida.

23 Jul

CSS asíncrono. Rápido y fácil

A diferencia del código Javascript, que tiene atributos que permiten cargarlo de forma asíncrona, en CSS no existía nada parecido hasta la fecha. Ahora, con un pequeño truco, vamos a solventar este inconveniente. Para cargar CSS, de manera asíncrona y sin demorar el render de la página, utilizaremos el atributo onload. Aquí os dejo cómo tendríais que enlazar el archivo CSS:

<link rel="stylesheet" href="/mi_css.css" media="print" onload="this.media='all'">