Web Reactiva
Web Reactiva
Haz tu aplicación sexy 🌶️
0:00
-29:29

Haz tu aplicación sexy 🌶️

4 trucos prácticos para que guste tanto que quieran volver

Alguna vez te ha llenado el deseo de acariciar, pulsar y pellizcar una pantalla o el ratón para accionar ese botón rojo 🛑 de tu aplicación favorita.

Te resulta atractiva, magnética y electrizante. 🌶️

(Imagina música de saxofón🎷 de fondo, así empieza el audio ▶ de arriba)

¿Sabes que tú también puedes lograr esa sensación con tus proyectos? Te lo cuento.

Soy Dani Primo de Web Reactiva y en este envío, si haces scroll, tienes esta dinamita 🧨

👉 4 trucos para hacer tu side project mucho más atractivo y “hot” (Escúchalo en audio más arriba o en Spotify y otros podcatchers)

⏰ Solo quedan 20 días para lanzar mi side project: te pido ayuda

👉 Consejos rápidos para escribir buenos mensajes de error

👉 ¿Tienes miedo a la IA? Te cuento como perderlo

👉 12 recursos para developers y gente curiosa: Engaña a tu jefe con una hoja de cálculo molona, apps a 1 clic con Docker Compose y 100 enlaces que te hubiera gustado tener cuando no sabías nada de programación.

🚩 El mejor vídeo de YT que he visto en años.

¿Qué hace que una aplicación sea sexy?

Continuamos hoy nuestra saga sobre side projects que arrancamos con una hoja de ruta que, por vuestros comentarios, os ha lanzado a varios 💪🏼.

Interpreto "sexy" como algo que te apetece usar por su estética o por su funcionalidad. Si te pasa con la webapp de la Agencia Tributaria aquí vas a entender la razón de tal “atracción”.

1️⃣ Minimiza la fricción de entrada

Esta es la característica más importante para hacerla sexy y en la que más veces veo que metemos la pata.

Hay sitios como Infinite Craft de Neal donde entras y ya puedes empezar. No hay registro, no hay pantalla de bienvenida, explicaciones, las justas.

👉 Evita el login de entrada.

Y si lo necesitas imperiosamente, usa el “login social” con Google, Github o demás familia. Que esté a un clic.

Ejemplos de aplicaciones con mínima fricción son Excalidraw o Tldraw, donde dibujas sin registro. Luego puedes guardar tu trabajo o compartirlo con una URL.

💡 Piensa en el Dato Mínimo Viable.

Si necesitas una dirección, ¿te vale un código postal? ¿Podrías usar geolocalización? ¿Realmente necesitas nombre y apellidos?

📝 Puse a prueba a Linkedin con este ejemplo.

2️⃣ Dar antes de pedir

Arrancar desde cero nos cuesta y tenemos que aplicar el punto anterior. Nos encantan las plantillas, los buscadores con resultados, las recomendaciones de otros…

Si estás creando una app de notas, empieza con ejemplos. Si es una webapp de comentarios de de libros, muestra títulos disponibles sin esperar a que los meta el usuario.

🧨 Si no tienes datos, usa la IA para generarlos.

  • Otras fuentes son el scraping (capturar información de internet) o los datasets de datos abiertos.

  • GitHub está lleno de información almacenada en proyectos que puedes reutilizar.

3️⃣ Recompensa a tus usuarios

Las aplicaciones sexy ofrecen recompensas por usarlas. Pueden ser visuales (como el famoso confetti que aparece al completar algo) o funcionales.

La recompensa no tiene que ser elaborada, sino inmediata y clara.

  1. Me encanta el botón de Josh W. Comeau en sus tutoriales, un corazón que se va llenando cuando le das "me gusta".

  2. En RepoMix, una herramienta que convierte ficheros en un solo archivo de texto para pasar a la IA. Al subir tu repo o carpeta, ya ves el resultado: todo el código listo para copiar y usar.

  3. En el juego Pink solo debes llenar toda la pantalla de color rosa resolviendo puzzles.

💡 Todos podemos implementar estas recompensas, aunque no seamos diseñadores, usando librerías de animaciones o simplemente dando feedback claro al usuario.

4️⃣ Muestra rasgos de humanidad

En muchos side projects falta este componente vital: no se ve quién está detrás. No hay un "Sobre mí", no hay una foto, es como si fueran fantasmas.

Incluye quién eres y por qué has creado la aplicación: genera confianza.

Si tienes prueba social (testimonios), mejor. Pero si no, al menos muestra tu cara, tu historia o un pequeño video explicando cómo funciona la aplicación.

💡 Crea un video corto explicando tu proyecto es un hecho diferencial (más abajo tienes una herramienta para hacerlo).

~~~~~~~~

Si te gusta Web Reactiva solo tienes que darle al ♥️ ”me gusta” que encontrarás junto al título de arriba. El algoritmo y yo te lo agradecemos infinito ♾️

Vamos bien, creo, pero el tiempo corre…

⏰ 20 días para la entrega del side project, tic tac, tic tac…

El problema de los datos ya está resuelto y ya tengo algo parecido a Stack Overflow: 20 dudas resueltas por humanos.

Ejemplo de pregunta: “¿Cuál es el mejor hosting?”

La IA (concretamente el modelo GPT-4o en ChatGPT) ha interpretado las respuestas de los participantes en la conversación en la Comunidad Malandriner y las ha unido en una sola.

Ahora bien, ¿cómo hacer esto verdaderamente sexy?

🥊 🥊 Te pido ayuda

¿Qué puedo hacer con un listado de preguntas y respuestas al estilo de Stack Overflow?

  1. Una lista de preguntas y respuestas con buscador

  2. Ranking de mejores respuestas votadas por la comunidad

  3. Un juego para adivinar qué respuesta corresponde a una pregunta

  4. Competición IA vs. humanos: comparar respuestas de la comunidad con las generadas por IA

Te leo en comentarios, ¡gracias! ;)

Deja un comentario


Me dan una “paliza contra las cuerdas” con AWS

Reconozco que me gustan, demasiado, los “sugar hosting” donde lo único que tienes que hacer es escribir “vercel” o “git push” y todo funciona.

🧡 Camilo Nevot ha venido a hacerme sudar y ya hemos pasado por la primera entrega de “Developer contra las cuerdas: Desplegando en AWS”.

Y, francamente, lo estoy pasando un poquito mal 😅

👉 Mira los primeros 10 minutos de la saga

⭐️ Disponible completo para suscriptores premium de Web Reactiva.

☕️ Aprende a escribir mensajes de error que ayuden y no frustren

Amy Hupe es una diseñadora que conoce bien que es lo que más le molesta a los usuarios que entran en tus aplicaciones: los errores.

🏁 Tienes que empezar por Identificar todos los puntos donde pueden ocurrir fallos para evitar mensajes no planificados. Y a partir de aquí, más consejos:

🗣️ Escribe como un humano — Usa lenguaje natural como si estuvieras guiando a alguien en persona.
"El input no es válido"
"Vuelve a escribir el código de 6 dígitos que te enviamos por email"

😜 Evita mensajes graciosos — En momentos de frustración, el humor puede irritar más al usuario.
"¡Ups! Parece que eres una salchichita despistada"
"El formato de correo electrónico no es válido."

🏃 Utiliza la voz activa — Aclara responsabilidades y hace las instrucciones más explícitas.
"Su solicitud no pudo ser procesada."
"No pudimos procesar tu solicitud porque el tipo de archivo adjunto no es compatible. Por favor, adjunta el archivo como jpeg e inténtalo de nuevo."

🧭 Ofrece un camino claro — Indica exactamente qué debe hacer el usuario para resolver el problema.
"Pago fallido"
"Verifica que los datos de tu tarjeta sean correctos o prueba otro método de pago"

— Lee How to write error messages that actually help users rather than frustrate them


🤖 Robotito quiere IA

¿Y si pierdes el miedo a la IA aplicando el concepto de Ai First?

Por ejemplo:

  1. Copias y pega estos consejos de arriba a un chat con la IA

  2. Añade tu lista de errores y verás que ocurre la magia.

🧨 Esa es la mentalidad AI First de la que te hablé esta semana en Esperando a Eskainet.

Mira…

  • ¿Te preocupa que la IA te quite el trabajo?

  • ¿Quieres manejar ChatGPT y Copilot y no sabes cómo?

  • ¿Sientes angustia porque no conoces las herramientas de IA?

✔ Si has respondido SI a alguna de estas te propongo una solución gratuita.

👉 Suscríbete a Esperando a Eskainet, la primera publicación (newsletter+podcast) en español que habla de la IA sin FOMO, sin agobios.

Cada miércoles a las 11:00 en tu bandeja de entrada con trucos, planes y tareas accionables lejos del ruido y el follón que no te deja ponerte manos sobre el teclado.

Quiero apuntarme

💊 Recursos a tutiplén

⚡️ ASOMBROSICO

Anna’s Archive, la librería online con la que se entrena la IA de LLama

Una base de datos de 50 millones de libros y 100 millones de papers listos para descargar. Ya no somos los únicos piratas, las grandes compañías entrenan sus modelos con esto. Compartido de rebote por 🧡 Miguel.

🎢 CARRERA PROFESIONAL

100 recursos que te gustaría haber tenido a los 18

sigue a Web Reactiva y ha publicado una colección imperdible de recursos en para pasar de cero a Software Engineer.

🛠 HERRAMIENTAS

Despliega apps con Docker Componse en 1 click

En Awesome Docker Compose encontrarás muchas aplicaciones listas para hostear con gracias a la magia de Docker Compose.

Screenrecorder, algo más que grabar la pantalla

Directamente desde el navegador, sin instalar nada y con un editor post grabación bastante elegante. Y todo gratis.

😎 PARA FARDAR

Píxel a Píxel: Crónicas del videojuego español

Un documental de 2025 que cuenta la historia de los videojuegos "made in Spain". Sí, sale "La abadía del crimen", pero llegan a la actualidad pasando por Commandos. El enlace lleva al vídeo publicado en Canal Sur.

🕹 JUEGOS

Disimula con tu jefe mientras juegas: Bored Spreadsheet

Una hoja de cálculo que en cada pestaña esconde un juego: Solitario, 2048, Sudoku...

🔰 PARA APRENDER

Un proyecto personal con una IA de andar por casa y SQLite

Geoffrey Litt cuenta en este artículo cómo ha montado Stvenes, un asistente que le envía la agenda, el pronóstico del tiempo y paquetes que esperan recibir. Telegram y corn jobs desplegados en val.town.

Crea con Fastify, el framework de JS más rápido

Aprende los conceptos de Fastify con este tutorial que lo integra con SQLite para hacer un CRUD en 14 pasos.

🛠 HERRAMIENTAS

Una extensión que simplifica y mejora Github

Refined Github mejora tu experiencia con Github en las code reviews, PR, navegación y múltiples historias de usuario más.

Desacopla Drupal con Next.js

Una librería que lleva años de desarrollo donde Drupal hace de backend y Next hace de frontend. Si lo montas te pasas el juego de ser web developer 💪

🎨 PLANTILLAS

Starwind UI, componentes para Astro

Una colección de componentes basados en Tailwind CSS y que podrás incorporar a tus proyectos de Astro como código completo y no solo dependencia.

¿Echas de menos recursos de IA práctica?

Cada miércoles más recursos de IA práctica de los que puedas imaginar si te apuntas a Esperando a Eskainet


PD: Lo mejor que he visto en YouTube en mucho tiempo. Sin reventar lambos, sin directos cortaditos y recalentados, sin personas… Solo música, ingenio y una buena historia. Dura 1 minuto 11 segundos y vas a querer más: you know this sound, but not its name.

#357

ㅤㅤ

Y para acabar, si algún día necesitas mi ayuda…

¿Dudas con tu carrera profesional como developer? ¿No encuentras el trabajo que esperabas? ¿Quieres convertirte en creador de contenido para devs?

Te alquilo mi cerebro durante 50 minuts para que te lleves una hoja de ruta personalizada y cargada de dinamita de la buena.

— Reserva una sesión de Consultoría 1 a 1 conmigo

¿No encuentras la motivación para seguir programando? ¿El camino del developer es demasiado solitario? ¿Quieres saber cómo piensa la gente que programa?

La ruta del aprendizaje es un trabajo continuo y el método en la comunidad malandriner es bien sencillo: Poner las manos sobre el teclado

— Únete a la comunidad en Web Reactiva Premium

Si has llegado hasta aquí, suscribirte ya es lo más fácil ;)

·

Discusión sobre este episodio