(Spanish) Deja de escribir código como una víctima

Gabriel Segura — Wed, 14 Oct 2026 03:12:26 +0000

Deja de escribir código como una víctima: adopta la mentalidad de un hacker ético

La mayoría de los desarrolladores ven la seguridad como un trámite que hay que cumplir antes del lanzamiento. En cambio, los hackers éticos deberían considerar la seguridad como un principio fundamental de diseño al crear sistemas que sean capaces de defenderse.

Adoptar la mentalidad de un hacker ético no significa pasar las noches en sudaderas con capucha y máscaras de encaje, con Kali Linux en tu computadora portátil, buscando vulnerabilidades de día cero para venderlas en la web oscura. Significa desarrollar una paranoia saludable y el instinto de cuestionar cada característica bien diseñada desde el punto de vista de un atacante.

Cuando un desarrollador promedio observa el punto final del perfil de usuario, ve una característica. Cuando un hacker ético observa el mismo punto final, ve una vulnerabilidad de «referencia directa a objeto insegura» que puede ser explotada en cualquier momento si la aplicación no verifica que la variable ID en la URL pertenezca al usuario actual.

En el mundo de DevSecOps, no hay presupuesto para una prueba de penetración de terceros al final del sprint. Tenemos que pensar como pentesters y «desplazarnos hacia la izquierda» para diseñar de manera proactiva nuestro código de modo que sea resistente a los ataques.

Así es como puedes empezar de inmediato: revisa la siguiente solicitud de incorporación de cambios (Pull Request) en tu fila de revisión de código con la mirada de un posible atacante. Por cada método o función que veas, intenta imaginar cómo lo aprovecharías. ¿Sería posible eludir la autorización en esta parte del código? ¿Se puede utilizar este método de API con fines maliciosos?

¿Qué pasaría si recibiera una entrada inesperada, como 10 MB de JSON o un entero negativo que se suponía que debía ser positivo? ¿Se agotaría el tiempo de espera de la conexión a la base de datos, dejando potencialmente a la aplicación en un estado inconsistente? ¿Estás seguro de que estos datos de información de identificación personal (PII) están debidamente enmascarados para que no puedan utilizarse con fines no autorizados, como el robo de identidad? Al hacerte estas preguntas, no solo haces que tu código sea más seguro. Te conviertes, al mismo tiempo, en un mejor desarrollador y en un mejor profesional de la seguridad.

La seguridad consiste en diseñar la arquitectura de tal manera que, incluso si el atacante logra entrar, no pueda alcanzar sus objetivos. Esto significa que debes pensar en las formas en que tu código puede fallar y asegurarte de que lo haga de manera controlada. Debes utilizar la limitación de tasa para prevenir ataques de denegación de servicio y sanitizar todas las entradas de los usuarios para evitar cosas como la inyección de SQL y las vulnerabilidades XSS. Pero el aspecto más importante para defender tu aplicación es asumir que el perímetro siempre está comprometido y construir tus defensas en torno a esta idea.

(Spanish) Flujo de trabajo rápido para sitios web

Gabriel Segura — Sun, 11 Oct 2026 21:44:15 +0000

Creo sitios web para clientes en 90 minutos con IA; así es como lo hago

90 minutos es el tiempo que dedico a crear sitios web. El martes de la semana pasada, la clienta me preguntó si podía diseñar una página de destino para su taller de cerámica. Quería que estuviera lista y en funcionamiento para el viernes. El yo de antes se habría quedado pegado a su silla de oficina y habría mirado sin expresión alguna a Figma durante tres días, hasta que se me acumulara tanta inseguridad que empezara a discutir conmigo mismo sobre las combinaciones de fuentes. El nuevo yo cerró Figma y ejecutó un proceso de cinco pasos con IA que logró que el sitio estuviera publicado antes de la cocción en el horno del viernes por la noche. Así es como lo hice.

Descargué mis ideas en Claude

Abrí Claude y comencé a escribir un párrafo desordenado sobre la solicitud de mi amiga: «Mi amiga vende tazas y jarrones de cerámica hechos a mano en Portland, con un estilo rústico y minimalista. Quiere una página de inicio, una página de tienda que enlace con Etsy, una sección de “Acerca de” y un formulario de contacto. Odia el desorden; imagina una mezcla de wabi-sabi con una galería moderna».
Claude me devolvió un mapa del sitio de cuatro páginas, una estructura de navegación sugerida y un borrador para cada sección. No me limité a aceptar sus propuestas: taché dos secciones y le pedí que reescribiera el titular principal de tres maneras diferentes antes de elegir el que menos sonara a robot. La indicación concreta que más me ayudó fue pedirle que «reescribiera este texto principal como si un amigo tranquilo le estuviera describiendo el taller a un desconocido en una cafetería». De repente, la sección cobró vida.

Crear el esqueleto en Framer

En Framer, abrí un lienzo en blanco y utilicé su generador de diseño con IA. Escribí: «Sitio de portafolio minimalista para un artista cerámico, tonos neutros cálidos, espacios en blanco generosos, una imagen principal, cuadrícula de productos de tres columnas». En unos cuarenta segundos, Framer había diseñado un sitio web responsivo completo en mi lienzo.
No estaba mal, pero la cuadrícula de productos tenía un espaciado demasiado apretado y el pie de página tenía cuatro columnas cuando solo necesitaba dos. Afortunadamente, reorganizar los bloques en Framer toma solo unos segundos. Arrastré, redimensioné y eliminé elementos hasta lograr un nuevo diseño: la IA me había dado el 80 % de la estructura que necesitaba y dediqué quince minutos a los últimos ajustes del 20 % restante.

Generar las imágenes

Mi amiga tenía buenas fotos de sus tazas tomadas con el celular, pero no tenía una foto principal. En Midjourney, describí: «Foto desde arriba de tazones de cerámica hechos a mano sobre un mantel de lino, luz suave de la mañana, tonos cálidos de terracota, poca profundidad de campo, estilo editorial». Generé cuatro imágenes, elegí una y luego la amplié. Para los íconos pequeños utilicé el generador de íconos con IA de Canva en lugar de buscar en bibliotecas de íconos.
Me tomó veinticinco minutos generar las imágenes que necesitaba, incluyendo una repetición porque el primer lote de Midjourney hizo que las piezas de cerámica se vieran como ceniceros.

Configurar la funcionalidad

En el CMS integrado de Framer, creé una colección de productos y pegué los enlaces de Etsy de mi amiga. Subí seis fotos de productos y configuré el botón «Tienda» para que se abriera en una nueva pestaña. El formulario de contacto era un componente nativo de Framer: lo arrastré y lo vinculé al correo electrónico de mi amigo. Para el SEO, volví a pegar la meta descripción de cada página en Claude y le pregunté: «¿Tienen menos de 155 caracteres e incluyen “cerámica artesanal Madrid”?». Marcó dos que eran demasiado largas. Las corregí en treinta segundos.

Revisión final y publicación

Revisé la vista previa en celular, corregí un título que se superponía a un botón, realicé una prueba de Lighthouse (94 puntos) y presioné «Publicar». Framer me proporcionó una URL activa y se la envié a mi amigo con un mensaje de texto que simplemente decía: «Ya estás en Internet».

¿Qué significa esto realmente?

La IA no diseñó este sitio web por mí. Eliminó todas las tareas en las que normalmente me quedaría atascado: escribir ante una página en blanco, la parálisis a la hora de decidir el diseño y la búsqueda de imágenes. Yo tomé todas las decisiones estéticas, pero la IA me dio opciones a la velocidad del pensamiento.

DEV Community: Gabriel Segura

(Spanish) Deja de escribir código como una víctima

(Spanish) Flujo de trabajo rápido para sitios web