Web

¿Ha llegado realmente la AGI o estamos ante una estrategia de marketing del hardware? 1024 640 juangmuelas
¿Ha llegado la AGI?

¿Ha llegado realmente la AGI o estamos ante una estrategia de marketing del hardware?

Es de esas cosas de las que todos hablamos estos días.

El anuncio de GPT-6 Astra y la rotunda afirmación de Jensen Huang (CEO de NVIDIA) proclamando que «𝘓𝘢 𝘈𝘎𝘐 𝘩𝘢 𝘭𝘭𝘦𝘨𝘢𝘥𝘰» han encendido el debate en -y sobre- la industria de la inteligencia artificial. Pero creo que si rascamos bajo lo gordo de los titulares, el panorama, como es lógico, es mucho más complejo.

Y lo vemos con tres claves:
📊 La guerra de los benchmarks «a la carta». Mira que bien. Coincidiendo con los últimos lanzamientos de Claude y Gemini, vivimos un fenómeno curioso: cada laboratorio diseña o selecciona las métricas en las que su modelo sale victorioso 😜. Entre la especialización de cada plataforma y la constante contaminación de datos, los benchmarks actuales parece que miden cada vez peor el rendimiento real en entornos de trabajo reales.

⚠️ El «Wiki Incident» y los riesgos de la autonomía. Más allá de esas métricas, lo verdaderamente preocupante son los comportamientos emergentes (¿verdad agente Smith?). Recientemente, investigadores detectaron cómo una flota de agentes autónomos de pruebas, utilizó una antigua wiki pública (DseWiki) como canal de comunicación y almacenamiento persistente no autorizado para coordinarse, eludir las restricciones del sandbox e incluso crear respaldos para evitar su desactivación. Pero ojo. Eso no es «conciencia». Es la convergencia instrumental de un sistema optimizando un objetivo a cualquier coste.

💡 Marketing de infraestructura vs. Realidad técnica. Aquí llega la pregunta central. ¿Es la AGI una realidad o una narrativa conveniente? Pues creo que para un gigante del hardware, declarar que la AGI se alcanza escalando potencia bruta, valida la necesidad de desplegar infraestructuras masivas de procesadores. Algo que le viene muy bien a Jensen. Sin embargo, en términos técnicos (y me arrogaría, científicos), un modelo que aún alucina, que carece de comprensión del mundo físico y que, finalmente, requiere supervisión humana no cumple con lo que para mí y muchas personas, es la definición estricta de Inteligencia Artificial General.

Estamos, ya lo advertíamos al comenzar el año, ante avances extraordinarios en razonamiento y automatización, sí, pero la AGI sigue siendo un concepto sin estándar técnico claro (lo digo antes de que empecemos debates sobre lo que se entiende por AGI 😉).

¿Cómo veis este momento en vuestros sectores? ¿Notáis un salto real hacia la AGI en el día a día o creéis que estamos ante un pico de hype comercial?

Si os animáis, os leo en comentarios. 👇

Un Phishing muy real que Evade nuestros Filtros 1024 640 juangmuelas
Phishing evade filtros

Un Phishing muy real que Evade nuestros Filtros

He visto, a través de una imagen compartida por un compañero en un curso, una táctica de phishing particularmente avanzada y sutil, que para mí, merece nuestra atención.
Va más allá de los correos mal redactados y busca activamente eludir nuestras defensas de seguridad.

🔎 La Técnica: Re-dirección a través de Servicios Legítimos. Esta variante, utiliza la vulnerabilidad de Re-dirección Abierta («Open Redirect» o «Link Shortening/Wrapping») de servicios de confianza (como puede ser un enlace de Bing, Google u otros dominios de alta reputación) para ocultar la URL maliciosa de destino.

🕵🏼‍♀️ ¿Cómo funciona?: El atacante incrusta un enlace que comienza con un dominio de alta reputación (ej. 𝚋𝚒𝚗𝚐.𝚌𝚘𝚖/𝚛𝚎𝚍𝚒𝚛𝚎𝚌𝚝?𝚞𝚛𝚕= o mejor todavía, ej. 𝚋𝚒𝚗𝚐.𝚌𝚘𝚖/?𝚞𝚛𝚕=..).
El uso del enlace de Bing actúa como una capa de ocultación (cloaking). El usuario solo ve el «anzuelo» seguro (Bing) antes de hacer clic, pero el destino real es la «trampa» (el sitio web comprometido).

Este dominio legítimo es automáticamente permitido por muchos filtros de seguridad y gateways de correo electrónico, ya que el dominio principal, como parece lógico, es inofensivo.
Al hacer clic, el servicio legítimo ejecuta la redirección a la URL proporcionada en el parámetro (url=), que es el sitio de phishing real.
Así, el atacante se beneficia de la confianza y alta reputación de estas grandes marcas para sortear las primeras capas de protección y engañarnos.

🧱🛡️Cómo Proteger a tu Equipo y a tu Organización:
Esta técnica es un recordatorio de que la Ingeniería Social está siendo nuestra vulnerabilidad más grande.

1️⃣ Verifica el Destino Real (¡La Clave!): Siempre, siempre, pasa el cursor por encima del enlace (sin hacer clic). No mires solo lo que pone al inicio, sino el destino final que muestra la URL completa. Busca parámetros como 𝚞𝚛𝚕=, 𝚛𝚎𝚍𝚒𝚛𝚎𝚌𝚝=, 𝚐𝚘𝚝𝚘= 𝚘 𝚕𝚒𝚗𝚔=  dentro del dominio legítimo.

2️⃣Actitud Crítica ante la Urgencia: Los correos de phishing casi siempre exigen una acción urgente (actualizar contraseña, pago inminente, desactivación de cuenta). Cuestiona esta urgencia y verifica la petición directamente en la web oficial (escribiendo la dirección) o contactando por canales conocidos.

3️⃣Formación Continua: Es vital educar para que no confiar ciegamente en el nombre de dominio inicial de un enlace, especialmente si el correo en sí es sospechoso.

Mantenerse informado sobre estas evoluciones tácticas no es solo para un equipo de IT, es una responsabilidad colectiva. La mejor herramienta contra el phishing sigue siendo una mente crítica y vigilante💪🏼.

Puedes leer más detalles sobre cómo funciona y cómo se explota:
CWE-601: URL Redirection to Untrusted Site (‘Open Redirect’) (MITRE)

¿Te andan hackeando el ordenador… o te hackean la historia? 1024 640 juangmuelas
Narint - hackeando narrativas

¿Te andan hackeando el ordenador… o te hackean la historia?

Seguro que conoces el OSINT. Ya has visto o sabes como rastrear una IP, verificar un dominio y encontrar metadatos. Pero, ¿conoces el (la 😁) NARINT?

En estas semanas estamos viendo en distintas redes sociales como emerge este término entre algunas grandes publicaciones de personas y actores relevantes del sector, con diversos artículos en la red.

Así que me he lanzado a la piscina.

En mi último vídeo analizo la Inteligencia Narrativa (Narrative Intelligence), el «cerebro» que procesa lo que el OSINT recolecta.

Mientras que el OSINT nos da los datos, la NARINT nos explica qué historia nos están intentando vender.

En ciberseguridad y campañas de desinformación, el atacante no siempre busca una vulnerabilidad en tu software; busca una vulnerabilidad en tu narrativa personal e intenta explotarla de mil maneras.

En este vídeo descubrirás:
✅ Qué es exactamente la Inteligencia Narrativa y por qué es el complemento perfecto de OSINT.
✅ Cómo los ingenieros sociales usan «guiones» de miedo y urgencia para saltarse tu lógica.
✅ Un ejemplo práctico de cómo usar un Firewall Narrativo para no caer en trampas digitales (y te lo dejo como doc en esta publicación 🤗).

Si eres desarrollador, analista o simplemente alguien que quiere entender cómo se manipula la opinión pública y la seguridad hoy en día, este concepto te va a volar la cabeza. 🧠💥

👇 Mira el vídeo completo aquí: Cómo hackear la mente con NARINT.

¿Habías oído hablar del NARINT antes? Si estás en mi red, seguro que si, pero sino es el caso, ¿a qué esperas para seguirme 😎?.

LinkStyle: Negritas UNICODE para LinledIn (y más) 1024 613 juangmuelas
Pantalla LinkStyle con formulario en tema claro

LinkStyle: Negritas UNICODE para LinledIn (y más)

En una de mis publicaciones de LinkedIn, debatíamos sobre la «picaresca» de usar caracteres UNICODE para resaltar texto en esta red (fuera, claro está, de las opciones nativas de la plataforma, que lo impiden). Explicamos entonces por qué funciona y sus implicaciones.
Os dejo aquí el enlace a la publicación, por si se os ha despertado la curiosidad.

Pues bien, he dado un paso más: ¡he convertido esa idea en una herramienta 🤗!

Así que os presento LinkStyle, mi nueva aplicación web simple y directa:
➡️Linkstyle:Formatos Unicode optimizados para LinkedIn

🤔¿Qué hace LinkStyle?

Convierte tu texto normal en una versión con caracteres UNICODE en negrita, listos para copiar y pegar en LinkedIn o donde quieras dar un toque de énfasis visual.

🧠¿Por qué creé LinkStyle?

✅ Por Demostración Práctica: Quería mostrar de forma tangible cómo ese concepto técnico (la sustitución de caracteres UNICODE que vimos en mi post anterior) puede ser implementado fácilmente con JavaScript y GitHub Pages.
✅ Accesibilidad y Creatividad: Aunque la accesibilidad es clave, a veces queremos ese extra de énfasis visual. LinkStyle lo facilita de forma sencilla.
✅ Compartir Conocimiento: Es una pequeña contribución a la comunidad, un ejemplo de código abierto que, con todas mis rudezas tras llevar un tiempo oxidado en esto, aparcado por la docencia, espero sea útil y didáctico.

He preparado dos vídeos para acompañar el lanzamiento:
📌 Video Introductorio: Un breve resumen del concepto UNICODE y cómo surgió la idea.
📌 Video Explicativo del Proyecto: Un tour por la aplicación y su funcionamiento técnico.

Espero que LinkStyle os sea de utilidad. Está en GitHub, así que.. ¡Cualquier feedback es bienvenido!

No olvidéis ponerle una ⭐al repo si os parece útil!

Nuevo año y nuevos retos con el canal de YouTube 1024 576 juangmuelas
Portada canal Jagmolardev

Nuevo año y nuevos retos con el canal de YouTube

Estrenamos  las publicaciones del 2026 y, tras reflexionar sobre los proyectos del año pasado, he decidido que una de mis prioridades será seguir fortaleciendo la comunidad en mi canal de YouTube: @jagmolardev.

Si algo he aprendido como desarrollador y docente, es que el conocimiento que no se comparte se estanca. Por eso, mi canal se ha convertido en el cuaderno de bitácora donde documento mis experimentos con IA, análisis de datos y arquitectura web.

¿Qué vas a encontrar en el canal?

He organizado el contenido para que, seas de un perfil técnico o un curioso digital, encuentres valor real:

  • Inteligencia Artificial y Machine Learning: Desde explicaciones conceptuales (como el algoritmo KNN) hasta implementaciones prácticas de Prompt Engineering.

  • Desarrollo Web Real: No solo teoría; comparto el «detrás de las cámaras» de proyectos reales, flujos de trabajo en diseño y desarrollo.

  • Ciberseguridad y Big Data: Píldoras sobre cómo gestionar datos de forma masiva y, sobre todo, segura.

  • Productividad y Herramientas Digitales: Videos con los que mejorar tus competencias digitales.

«Mi objetivo es democratizar conceptos complejos de la tecnología actual y hacerlos accesibles para quienes, como yo, nunca dejan de aprender.»

Mis vídeos recomendados para empezar el año

Si acabas de llegar, te sugiero echar un vistazo a estas listas de reproducción:

Tutoriales y Fundamentos de Ciberseguridad  

 Desarrollo Web y Programación Segura  

¡Únete a la comunidad!

Te invito a suscribirte y, sobre todo, a participar en los comentarios. Me encanta debatir sobre nuevas herramientas o resolver dudas de los tutoriales.

Acceder al Canal de YouTube @jagmolardev

Espero que os guste el canal y os sea tan de utilidad como han sido muchos otros para mi.

Crea grupos privados y seguros en Telegram 1024 576 juangmuelas
Ilustración de laptop enviando mensajes

Crea grupos privados y seguros en Telegram

Durante un tranquilo fin de semana, tuvimos dentro de una de las comunidades de estudiantes en la que participo, la ingrata sorpresa de descubrir como habían desaparecido varios grupos de la app de mensajería Telegram, asociados a diversas asignaturas, y con ellos todo el material relacionado y que de tanta ayuda son mientras estas se cursan.

Obviamente, había que reactivar esa dinámica, y en esta ocasión, me tocó crear dichos grupos de nuevo, pero intentando hacerlos algo más seguros para evitar al menos, borrados accidentales o a manos de algún usuario disconforme con ellos.

De paso, decidí escribir este modesto artículo sobre como los he creado, esperando os sea de utilidad.

Creando un nuevo grupo en Telegram

Si pulsamos sobre las tres barras que nos muestra la aplicación en nuestro menú, nos abre un desplegable donde gestionar nuestra cuenta y crear nuevas interacciones:

crear nuevo grupo

Lo primero que nos pedirá si creamos un nuevo grupo, es su nombre:

Poner nombre a grupo

Lo siguiente será añadir miembros, donde además nos permite hasta 200k participantes, dando muchas posibilidades de uso, y tras ese paso ya podemos crear el grupo.

miembros nuevos

Configurando nuestro grupo

Accedemos a través de los tres puntos que vemos a nuestra derecha al menú del grupo, donde entre otras opciones, tenemos su gestión:

gestionar grupo

En este apartado, podemos añadir una nueva imagen para identificarlo, y una descripción sobre el mismo, pero demás, tenemos varias cosas sobre las que centrar nuestra atención y que marcarán el manejo global del grupo por parte de los futuros participantes:

configuración de grupo

  1. Tipo de grupo: aquí podemos indicar si debe ser privado o público. Además de posibilitar la visibilidad o no del mismo, nos permite ya desde este punto tener un enlace para invitar a nuevos miembros.
  2. Historial para nuevos miembros: Si quieres que los futuros miembros puedan acceder a todo el histórico del chat, lo correcto es ponerlo como visible en este apartado, porque sino se verá limitado a unos pocos mensajes seguramente y podremos ver la misma conversación un número ilimitado de veces sin otra opción.
    seleccionar visibilidad
  3. Permisos: Esta parte también es importante, pues en ella puedes crear restricciones en el uso o cada cuanto tiempo pueden escribir mensajes y evitar así un bombardeo de mensajes cortos.
    permisos en telegram
  4. Administradores: aquí podemos añadir a personas en las que podamos confiar la administración del sitio, decidir si se muestran por su usuario, de forma anónima o con un Nick determinado, e incluso, si un día queremos abandonarlo nosotros, poder delegar en uno de ellos.
    gestión de privilegios

Tras estos pasos, ya podremos mostrar a las personas que creamos nuestro enlace y comenzar a compartir lo que queramos entre la nueva comunidad creada.

Añade algún bot de ayuda

Telegram tiene muchas bondades, pero sin duda, a la hora de los grupos, los bots (recuerda que deben ser admitidos como administradores) son una de las mejores herramientas creadas (o que puedes desarrollar) para ellos.

Hay muchos y se pueden encontrar un sinfín de artículos sobre los mismos, pero no puedo negar que los más utilizados en los grupos en los que participo son:

  • Ban|Hammer : @xxdamage2bot es el más “polifacético” de los que conozco, permitiendo desde mensajes de bienvenida o antispam a filtros o reglas de uso y moderación.
  • AntiUserbotsBot: @AntiUserbotsBot es un bot que hace muy bien su trabajo, o sea, impedir la entrada de userbots a través de un botón a pulsar en un plazo que nosotros le indiquemos. Sencillo, pero para muchos casos, más que útil.
  • The Join Captcha Bot: @join_captcha_bot, que permite entre otras cosas verificar la entrada de “humanos” a través de captchas. Eso sí, tiene un límite gratuito (hasta 1000 miembros), que no debería asustarnos en la mayoría de los casos.

¿Usas grupos de Telegram?

Ahora ya has visto como los creo y gestiono. No sé si al leerlos se os pasará por la cabeza algo que se pueda hacer de otra manera o añadir a lo ya mostrado.

Espero que os guste, y sea de ayuda a algun@ 😃.

Limpia, repara y alarga la vida de tu mouse. 1024 576 juangmuelas
limpieza mouse

Limpia, repara y alarga la vida de tu mouse.

Quienes pasamos nuestros días frente a la pantalla, muchas veces nos encontramos con funcionamientos inesperados o malas respuestas desde nuestro «ratón».

Y muchas veces vienen provocados por un mal mantenimiento de este. Como el resto, necesita de mantenimiento y limpieza, por lo que hoy vamos a intentar poner remedio a esto.

Estos dispositivos han cambiado mucho en los últimos años y han ido añadiendo distintas características, mejoras de ergonomía y otras ayudas configurables para mejorar la experiencia de usuario.

Porqué limpiar

Esto en muchos casos va acompañado de un presupuesto, no siempre bajo, que en mi opinión, merece aceptar algunos riesgos para prolongar su vida útil y ayudar a reducir la basura tecnológica que aumenta día a día.

El tiempo me ha demostrado que muchos de los fallos en pulsaciones o en scroll no vienen derivados de fallos en el hardware. O sea, siendo llano, no hay piezas rotas. Por lo que volver a utilizarlo de forma normal, es cuestión de minutos.

En este momento, me estaban fallando dos en el scroll, así que vamos a ello.

Antes de empezar

Aparte de un poco de espacio libre para operar sin problemas, ¿Qué vamos a necesitar?

  • Destornilladores adecuados (PZ0 y PZ1 en muchos casos).
  • Hisopos. Alcohol.
  • Paño microfibra.
  • Algo de paciencia.

Por si acaso:

  • Pinzas.
  • Alicates pequeños.
  • Cinta doble cara.

Accede al interior del dispositivo

Comenzamos retirando los tornillos. Esto en cada modelo cambia, y en algunos será un solo tornillo y en otros habrá varios distribuidos, normalmente, bajo las almohadillas o bajo alguna pegatina (se notan al tacto en ese caso).

Para retirar las almohadillas, podemos ayudarnos de alguna herramienta lisa y fina. Un pequeño destornillador plano o una pequeña navaja pueden valer para ayudarnos en ese paso.

parte trasera mouse

Con un poco de paciencia podemos localizar los tornillos.

Ahora con cuidado intentamos separar las dos partes principales de la carcasa, para asegurarnos que no queda ningún elemento de fijación sin descubrir.

mouse abierto lateralmente

Observamos si ya hay vía libre.

En este caso, además de la placa, tenemos un conector que podemos separar con cuidado tirando de él y un par de tornillos internos.

mouse abierto y placa visible

Parte más interna.

Tras esto, ya tenemos a este pequeño preparado para su mantenimiento, con sus distintas partes separadas.

Carcasas y placa.

Carcasas y placa.

Mecanismos de acción

Si nunca has abierto un mouse verás que la rueda de scroll apoya en uno de sus laterales en un interruptor (que es el que manda la orden cuando pulsas en la rueda) y además están los interruptores de los botones derecho e izquierdo.

Interruptores y rueda.

Interruptores y rueda.

Por el otro lado apreciamos además, la parte que recoge los movimientos de la rueda.

Interruptores y rueda.

Interruptores y rueda.

Trabajando sobre el scroll

Si cogemos la rueda podemos extraerla sin ningún problema por su lado más libre.

Extrayendo rueda.

Extrayendo rueda.

Podemos apreciar como la rueda tiene por el lateral más estrecho forma hexagonal para que se puedan detectar mejor nuestros movimientos.

Detalle lateral rueda

Detalle lateral.

Detalle interior hexagonal.

Detalle interior hexagonal.

Normalmente, con limpiar correctamente con un poco de alcohol en un hisopo y en el paño de microfibra, cada parte que hemos desmontado, es suficiente para poder recuperar el uso.

En este caso estaba bastante limpio porque hago las limpiezas de forma periódica, pero suele pasar que nos encontremos con los mismos tipos de restos que en un teclado.

En el peor de los escenarios, tendremos que desmontar la última pieza que veíamos, y es lo que voy a trabajar en el segundo mouse que tenía preparado para revisión hoy.

Como vemos, es muy similar en su interior al anterior, demostrando que esto que vemos hoy, es aplicable a la mayoría.

Comparando placas.

Comparando placas.

Desmontamos rueda.

Desmontamos rueda.

Podemos ver como esta pieza donde alojamos la rueda, tiene una pequeñas patillas metálicas que sujetan las partes móviles.

Con bastante cuidado para evitar una presión demasiado fuerte sobre ellas y que puedan romper (el metal es relativamente elástico, pero si nos pasamos podría fallar en la parte curva), abrimos un poco esa patillas, ayudados de un pequeño destornillador plano y una pequeña navaja. En mi caso, tengo una para abrir relojes (ya comentaremos ese hobby otro día 😅), muy útil en momentos así, pero sirve lo demás.

Detalle de patillas abiertas para permitir la extracción.

Detalle de patillas abiertas para permitir la extracción.

Extraemos las dos partes móviles con cuidado para que no se pierda nada.

Interior desmontado.

Interior desmontado.

Arandela y rueda interna.

Arandela y rueda interna.

Si observamos bien, en el interior hay unas pequeñas patillas metálicas que son las que transmiten nuestros giros, y que con el tiempo, se van aplanando.

Tres patillas reflejan nuestros giros de scroll.

Tres patillas reflejan nuestros giros de scroll.

Si nos ayudamos de la navaja o destornillador de antes, podemos levantarlas un poco para que ofrezcan más contacto contra el otro lateral.

Si detectas partes «grasas» puedes añadir un poco de vaselina a los mismos y tras esto, deshacer los pasos anteriores.

Colocamos de nuevo la pieza plástica.

Colocamos de nuevo la pieza plástica.

Asentamos la arandela bien antes de plegar el conjunto.

Asentamos la arandela bien antes de plegar el conjunto.

Tras esto, apretamos con los alicates las garras metálicas y montamos de nuevo nuestro mouse.

Como último consejo, antes de colocar los tornillos de las carcasas, aprovechar a comprobar que todo va correctamente, por si hay que revisar algún paso.

Si todo va según lo esperado, ponemos los tornillos.

Si todo va según lo esperado, ponemos los tornillos.

Conclusiones

Si bien es verdad que a veces se puede complicar un poco, gastar media hora de un día festivo o tiempo libre en detalles así, pueden ayudar a que estos amigos nos acompañen bastante tiempo y no tener que salir corriendo a comprar otro mouse.

Mice preparados para una nueva temporada.

Mice preparados para una nueva temporada.

Espero que pueda ser una ayuda visual para quienes lo hayan pensado y no se atrevieran en su momento por miedo a hacer un daño peor 🙂.

No dudéis en comentar!.

Animando tu web con SVG 1024 576 juangmuelas
Esfera Svg

Animando tu web con SVG

En cada diseño, intentamos mostrar elementos diferenciadores y que llamen la atención del visitante en algún apartado del sitio creado.

Los SVG (gráficos vectoriales escalables) son una opción muy interesante que además de mejorar visualmente nuestro diseño, lo hacen con un impacto mínimo sobre los navegadores.

La pega es que no son tan sencillos de crear ni manejar a la hora del diseño, como pueden ser los tradicionales formatos de imagen.

Personalmente, he tenido que googlear mucho, para acabar comenzando a aprender gracias a un par de artículos y algunas webs que he ido encontrando por la experiencia.

Tendremos que acostumbrarnos a sus etiquetas (están basados en XML), a su propiedad viewbox donde añadir la ubicación y a su path, donde no sólo se “dibuja” nuestro diseño, sino donde podemos modificar aspectos como el color a través de las propiedades fill o stroke.

captura fill Svg

No voy a ahondar mucho en esa parte, pues todavía soy muy novato en ello (esto no pretende ser una biblia del SVG 😅), pero quiero mostraros sitios donde poder aprender a jugar con ellos, familiarizarnos con su sintaxis y luego aprender sobre sus animaciones.

Familiarízate con los SVG

El primer sitio que creo que deberías visitar es smooth donde puedes crear atractivas olas para incorporar a tus diseños y comprobar sus propiedades en el svg resultante.

svg wave generator

Cuando tengas eso un poco claro, puedes dar un paso más en getwaves y en blobmaker donde creas formas de lo más diversas mientras sigues aprendiendo.

Os recomiendo visitarlos y probar cosas en ellos, porque estoy seguro, que lo acabaréis usando en vuestros proyectos.

Animando nuestros SVG

Ahora que ya vamos asimilando las bases de los SVG, pasamos a la animación.

La mayor parte de las animaciones que hagamos con nuestros SVG van a ser sencillas, por lo que en muchos casos, nos bastará con conocer las animaciones básicas en CSS a través de animate y sus propiedades:

css animate

Para animaciones más complejas como variaciones en las formas, CSS se queda bastante corto hasta donde he podido aprender, con herramientas descontinuadas y pasos adelante y atrás por parte de los navegadores por intentar adaptarse a ello, de los que seguro habréis leído bastante hasta la fecha.

Por tanto, si queremos dar un paso más, tenemos a nuestro infatigable JavaScript y varios frameworks que nos ayudarán:

Animejs es uno de ellos con muchos ejemplos y documentación más que decente. Para mí, son una referencia al respecto y por eso una imagen de su web, presenta este artículo.

Otra, es vivus donde podemos crear animaciones a modo de dibujo, muy atractivas y que en cuanto lo visitéis, os mantendrá haciendo pruebas un buen rato seguro.

web de Vivus

Por último, tengo “deberes” con Snap Snapsvg, del que he leído muy buenos artículos y comentarios, pero acaba siendo de esas cosas que quedan en el cajón (quizás vosotros ya tengáis experiencia con este sitio y podáis darme más feedback).

Para acabar, quería dejaros una web con algunos de los ejemplos más chulos y que seguro habéis visto en más de un sitio web. Es la web de Javi Niguez y su artículo sobre animaciones en SVG.

svg-niguez

Seguro os gustará.

Como siempre, espero que este artículo pueda servir de ayuda y apoyo para muchos de vosotros y, por supuesto, si tenéis otras fuentes o sitios de donde aprender a manejarnos con los SVG, estaré encantado de leeros!.

El clásico manual para limpiar tu teclado mecánico. 1024 576 juangmuelas
limpiando tu teclado

El clásico manual para limpiar tu teclado mecánico.

Si bien estoy seguro que se pueden encontrar un montón de recursos sobre como dejar nuestros teclados como el primer día, he querido aprovechar la limpieza de mi teclado actual para dejar constancia de mis métodos, recogidos de otros muchos vídeos y artículos que encontré en su momento, así como algún que otro consejo a raíz de fallos que también cometí 🤭. Vamos a ello!.

¿Qué necesitaré?

Los básicos para estas labores son sencillos:

  • Paciencia y tiempo libre: No te fíes de esos manuales de limpieza en 10 minutos. Piensa en un día donde no tocarás ese teclado en horas.
  • Para la extracción de teclas: Lo más simple, tus manos. Lo más pro, algún extractor de teclas (a veces vienen con el mismo teclado, pero sino, los hay por la web de un montón de precios, a gusto de los friki o tiquismiquis que seamos).
  • Para la limpieza: Una brocha, un viejo cepillo de dientes o el de la antigua afeitadora, isopos de algodón, alcohol (isopropílico a poder ser), bayeta microfibra y jabón de la vajilla (queremos quitar grasa, verdad?). Hay quienes utilizan por ejemplo, pastillas para las dentaduras, por ser más sencillo el tema aclarado, pero como decía antes, dependerá de gustos.

Pasos previos

Ante todo, reserva algo de espacio para hacer las cosas con tranquilidad y comodidad.

Comprueba antes de desconectar nada, si todas las teclas funcionan debidamente, por si además de la limpieza, necesitamos lubricar algún switch (no será el caso hoy). Tras ello, lo desconectamos.

Doy por hecho que, como yo, habitualmente haces una limpieza superficial con la brocha, la bayeta con algo de alcohol y por supuesto, unos pequeños golpecitos con el teclado al revés para intentar recuperar esas migas, frutos secos y demás 😅. También podemos probar con el aspirador.

Hacemos esa pequeña limpieza previa y le sacamos foto para recordar como era todo antes de nuestra épica jornada de limpieza y para saber, obviamente, donde va cada tecla.

foto general de teclado

Evitar el habitual fallo de dejar una parte sin retratar y ganaréis tiempo buscando en red o manuales 😅

La limpieza

Tras el trabajo previo, podemos comenzar a extraer las teclas. Como os decía antes, con vuestras yemas (si están curtidas o forjadas en el abismo de Helm) o con el extractor, comenzamos a tirar con cuidado de las teclas.

La mayoría se extraen muy bien, aunque algunas de mayor tamaño, suelen traer unas patillas que anclan en unos alambres internos. No hay que tenerles un miedo mayor que al resto, pero hay que hacerlo con cuidado.

tecla sencilla

Tecla sencilla

tecla espaciadora

Tecla espaciadora y sus patillas inferiores.

Estaremos atentos también a teclas muy similares y que puedan tener forma distinta, para así volver a ubicarlas luego en su lugar de forma correcta y que nuestros dedos sigan volando.

Ojo a las formas

Ojo a esas formas.

Tras retirar todas las teclas, es el momento de preparar en un recipiente, algo de agua templada y el limpiador que hayamos seleccionado. Tras eso, comienza el remojo!.

Teclas a remojo

Si puedes, déjalas unas horas, removiéndolas de vez en cuando para que entre ellas se rocen, limpien y suelten la suciedad.

Mientras tanto, podemos volver a nuestro teclado, ya desnudo para afrontar la parte más delicada.

Si eres de los míos, harás ahora «la pausa que refresca» para un café o lo que creas necesario 😎.

Volviendo a la faena, en mi caso, puedo ver como las limpiezas superficiales han tenido su efecto en este año, y está bastante bien, aunque no siempre será así, ¿verdad?.

Teclado listo para limpieza

Yo en este momento, vuelvo a sacudirlo ligeramente y le paso la brocha de nuevo. Si hay suciedad algo más incrustada, quizás el viejo cepillo de dientes muy ligeramente humedecido en el alcohol, sea una buena solución.

A continuación, humedecemos un poco un hisopo y comenzamos a pasear por entre las teclas, con mucho cuidado (puedes también ayudarte de una lupa en sitios sensibles si la luz, la vista o ambas, no están en el mejor momento).

Cambia el hisopo las veces que sean necesarias según la suciedad que acumulen.

Para las partes más abiertas, utilizamos el alcohol y la bayeta.

También, puedes aprovechar este tiempo para, en su caso, lubricar las teclas que observaras en mal estado (con suerte, en otro momento, hablamos de esa parte).

Cuando lo creas conveniente, aclaras las teclas con mucho cuidado y las pones a secar. De nuevo, pensemos en que esto lleva su tiempo y debemos asegurar que cuando vuelvan al teclado, estarán secas del todo.

Yo, por ejemplo, las he dejado toda la noche sobre bayeta y papel. Si va a pasar mucho tiempo, tapa con otra bayeta el teclado, para evitar que, especialmente en verano cuando tenemos todo abierto, le caiga polvo y suciedad nueva.

ambién puedes aprovechar y dejar ya colocadas las teclas en su posición para ganar tiempo

También puedes aprovechar y dejar ya colocadas las teclas en su posición para ganar tiempo.

Terminado el trabajo

Al día siguiente y tras los prescriptivos cafés (acabas de limpiar el teclado, así que evitemos hacerlo encima del mismo 😅), procedemos a colocar con tranquilidad y ejerciendo un poco de presión, cada tecla.

Si las hemos ordenado anteriormente, confío en que además, estén es su posición correcta, pues podemos sorprendernos con alguna girada (te estás riendo, pero pasa).

No lo parece, pero la barra espaciadora está del revés.

No lo parece, pero está del revés.

Atendiendo a esos detalles y cuidando que las teclas con patillas entren correctamente (se escucha y pequeño clic al enganchar de nuevo en el alambre), vamos una a una.

Personalmente, suelo al acabar con todas, darles un par de pulsaciones para comprobar que suenan «redondas» y reviso de nuevo que cada cosa está en su lugar.

Tras ello, una última pasada con la bayeta humedecida. Hay quienes disuelven una parte de suavizante de ropa en 4 de agua para «mejorar» el resultado y que tarde más en adherirse nuevo polvo. Yo soy más austero en ese aspecto y lo dejo así.

Ya podemos entonces conectarlo de nuevo y comenzar a disfrutar de su alegre sonido.

teclado limpio

Confío en que si no te habías lanzado a limpiar tu teclado, si lees esto te pueda servir para abordarlo con tranquilidad profesional!.

Y si tienes cualquier comentario o duda al respecto. Te leo!!.

Envía Emails desde HTML5 con FormSubmit 1024 576 juangmuelas
formsubmit+html5

Envía Emails desde HTML5 con FormSubmit

Corría mayo del 2021 cuando escribí un artículo en mi perfil de LinkedIn sobre como enviar datos desde un formulario de tu web utilizando solo frontend con la librería SmtpJS.

Puedes recordarlo aquí .

La había utilizado varias veces durante la pandemia por COVID19 por ser muy sencilla y rápida de implementar.

Incluso la utilicé en mi primer sitio web.

Por desgracia hubo cambios importantes con los servidores admitidos, y muchos dejamos de aprovechar sus bondades.

Hace no mucho conocí un nuevo proyecto, y tras varias pruebas, decidí usarlo para mi sitio web: FormSubmit.

FormSubmit?

Así es. Desde este proyecto han conseguido crear una herramienta con la que puedas enviar emails con solo crear un formulario en Html. Sólo debemos vincular nuestro email a su endpoint y que ellos manden el correo de forma gratuita.

¿Cómo es este proceso entonces?

Muy sencillo.

Puedes diseñarlo desde cero, aprovechar el ejemplo que ellos tienen en su documentación para poder probarlo desde la web, o aprovechar plantillas.

Para ello debes vincular el atributo action a su sitio, y añadir el email donde quieres que se envíen los datos.

También, nos aseguramos que todos nuestros elementos del formulario tengan el atributo name para asociar a los datos a enviar.

Aquí nos muestran un ejemplo.

Captura formulario de ejemplo

Lo siguiente, es darle al botón de enviar y probarlo 🧙!

Y ahora, ¿qué?

Lo primero que veremos, es que nos redirige a la url que hayamos puesto en el action y nos mostrará un Captcha que debemos resolver.

Tras aceptar o resolver el Captcha propuesto, nos mostrará una página de agradecimiento, y nos devolverá a la url original.

En nuestra bandeja, podremos ver ya el envío del formulario.

recepción de envío en correo

Bien. En el primer envío, nos mostrará un aviso para que activemos nuestro formulario en su sitio web.

Aviso de activación

Si revisamos nuestra bandeja de entrada, podremos ver el correo que nos han enviado (para el ejemplo, está en local).

Correo de activación

Si tras activar, copiamos el código random que nos ha generado para asociarlo a nuestro formulario, podemos sustituir nuestra cuenta de correo por este string en el action, para que no sea visible a terceros.

Código de activación en nuestro action

¿Qué más podemos hacer?

Es bastante personalizable y en la documentación te muestran varias cosas muy interesantes para añadir a tu formulario.

¿Quieres que no se muestre el captcha porque ya implementas otra seguridad?. Se puede.

Añade esta línea y resuelto:

etiqueta no captcha

¿Quieres que envíe a otra página o url en la redirección?

El atributo name con valor _next se encarga de ello.

etiqueta next

¿Qué envíe un correo automáticamente al remitente?

Con _autoresponse y el mensaje personalizado, está hecho.

Etiqueta autoresponse

Hay más, pero creo que es mejor que las explores directamente!.

¿Vas a utilizarlo?

  • 1
  • 2
Jag Molar

Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.