Descubre las últimas tendencias y técnicas en desarrollo web. Desde conceptos básicos hasta avanzados, estos artículos te sumergen en el fascinante mundo del desarrollo web, ofreciendo insights, herramientas esenciales y estrategias efectivas para construir sitios web impactantes.
Si necesitas botones on off en CSS con ese aspecto de interruptor tipo iOS, aquí tienes el código listo para pegar. Sin librerías. Sin JavaScript. Solo un checkbox y unas reglas CSS. Voy a mostrarte un toggle switch accesible de verdad: funciona con teclado, lo entienden los lectores de pantalla y respeta a quien prefiere
Cómo crear botones tipo on/off con CSS3 (toggle accesible 2026) Leer más »
Las imágenes son, casi siempre, lo que más pesa en una web. Aprender a comprimir imágenes bien es de lo que más impacta en la velocidad de carga y, de paso, en tu SEO y en la experiencia del usuario. Te cuento cómo hacerlo sin perder calidad, con herramientas gratis y buenas prácticas. Por qué
Cómo comprimir imágenes para web sin perder calidad (2026) Leer más »
Casebox es un CMS en PHP Y MySQL de código abierto que permite administrar registros, tareas y archivos. Esta poderosa herramienta web con las principales características: Permisos: un usuario puede especificar quien puede leer, escribir o modificar una tarea, archivo o registro. Administrador de tareas: permite crear tareas, asignarlas a múltiples usuarios y ver el
CaseBox – CMS en PHP para administrar tareas, registros y archivos Leer más »
Cambiar estilos de un select con CSS ha sido durante quince años el trabajo más frustrante de cualquier formulario. Le pones un borde bonito, y la flecha sigue siendo la del sistema. Intentas darle color a las opciones, y en Mac no pasa nada. Esa era la realidad, y desde 2025 ha cambiado de verdad.
Cambiar estilos de un select con CSS: la guía real (2026) Leer más »
Si estás terminando tu web y necesitas una página en construcción en HTML mientras tanto, aquí tienes 5 plantillas gratis y responsive que puedes descargar hoy. Todas incluyen contador de cuenta atrás, formulario para recoger emails y demo online, así que sirven tanto de «coming soon» como de landing provisional con cara y ojos. He
Página web en construcción en html Leer más »
Aquí tienes mi selección de menú desplegable horizontal, actualizada tras revisar qué sigue vigente hoy y qué no. Cuando publiqué este artículo por primera vez, jQuery era la forma habitual de dar dinamismo a un menú de navegación y evitar que la web se sintiera estática. Hoy el panorama ha cambiado bastante: el propio navegador
Menú Desplegable Horizontal: 12 Ejemplos con CSS y JS Leer más »
Un banner animado con CSS pesa unos pocos kilobytes, se ve nítido en cualquier pantalla y no necesita ni una imagen. Frente a un GIF o un vídeo, la diferencia en tiempo de carga es enorme, y eso cuenta en tus Core Web Vitals. Aquí tienes el código completo de cinco banners, listo para copiar.
Banner animado con CSS y HTML: código para copiar Leer más »
Quieres un acordeón HTML listo para pegar, sin jQuery y sin librerías. Aquí lo tienes. Te enseño dos formas de montar un menú acordeón que funciona hoy en cualquier navegador moderno: una con las etiquetas nativas <details> y <summary>, y otra con CSS puro para controlar el diseño al detalle. Copias, pegas y funciona. Este
Acordeón HTML nativo sin librerías: 2 métodos (2026) Leer más »
Si buscas menús animados con CSS3 listos para copiar, aquí tienes cuatro ejemplos completos con su HTML y su CSS. Nada de librerías ni de plugins. Son menús animados CSS puros: un menú horizontal con subrayado al hover, un desplegable accesible, una hamburguesa responsive solo con CSS y un efecto de relleno deslizante. Todos respetan
Menús animados con CSS3: 4 ejemplos listos para copiar Leer más »
En esta sección encontrarás unos ejemplos de infografia interactiva para que te inspires en tus próximas infografías en html5, otras en flash o en jpg. Las infografías utilizan gráficos y otros elementos que permiten comparar y visualizar datos rápidamente. Si te interesa este post también puede que te guste: Elementos de infografía en vector para
Infografías interactivas para inspirarse Leer más »
El elemento <progress> de HTML5 te permite mostrar el avance de una tarea sin necesidad de ninguna librería externa. Aquí tienes la sintaxis básica, cómo darle estilo con CSS, cómo actualizarlo con JavaScript y demos en vivo que puedes probar ahora mismo. Sintaxis básica del elemento progress La versión más simple no lleva ningún atributo:
HTML5 Progress Bar: guía completa con demos en vivo Leer más »
Si necesitas saber el color de una imagen con código, la buena noticia es que no hace falta jQuery ni nada complicado: se puede hacer con JavaScript puro, en unas pocas líneas, usando Color Thief, una librería gratuita y de código abierto de Lokesh Dhakar. Te explico cómo funciona, cómo se usa y cuándo te
Cómo saber el color de una imagen con JavaScript (sin jQuery) Leer más »
