# DevForge — contenido ampliado DevForge diseña y desarrolla sitios comerciales a medida con identidad propia. Servicios: landing pages, sitios multipágina, rediseño visual y frontend de producto. # Maison Néroli > Hacer que una colección de fragancias se explore como una experiencia editorial, no como una cuadrícula de ecommerce. - Servicio demostrado: Diseño web para perfumería de lujo - Tipo: demostración independiente - Sector: Perfumería - Dirección visual: Cold luxury - Interacción: Selector olfativo - Caso: https://devforgeapp.pro/proyectos/maison-neroli - Demo: https://neroli.devforgeapp.pro/ ## Respuesta corta Ocho perfumes, familias olfativas y una narrativa visual que deja al producto ocupar el escenario. ## El reto La propuesta parte de un problema habitual en perfumería: cuando todos los frascos se presentan como fichas equivalentes, desaparece la personalidad de la colección. El reto era crear deseo y orientación sin convertir la página en una tienda saturada. ## Dirección La dirección visual mezcla una base mineral oscura, azul cobalto y tipografía sobria para construir un lujo frío, silencioso y contemporáneo. Cada decisión deja espacio para que la textura del frasco y las familias olfativas sean las protagonistas. ## Experiencia La navegación se organiza como un recorrido editorial: un hero integrado, un strip horizontal para descubrir ocho perfumes y notas agrupadas por familias. Las muestras cromáticas ayudan a reconocer cítrico, iris, madera o ámbar antes de leer toda la descripción. ## Resultado El resultado es una demostración independiente diseñada y desarrollada para mostrar una experiencia comercial completa: identidad, catálogo, responsive, motion y un camino claro hacia la presentación de la colección, sin prometer métricas de un cliente real. ## Decisiones - Un hero integrado donde frasco y propuesta comparten la misma escena. - Un strip editorial para explorar ocho fragancias sin adoptar patrones de tienda genérica. - Notas agrupadas por familia y codificadas con pequeños tonos materiales. ## Capacidades demostradas - Catálogo de ocho fragancias - Navegación suave - Revelados por viewport - Modo claro y oscuro ## Fuentes - [WCAG 2.2 — Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html): Criterio usado para que el selector olfativo y sus controles sigan siendo utilizables en touch. - [Core Web Vitals](https://web.dev/articles/vitals): Referencia para reservar espacio, evitar saltos visuales y medir la experiencia real. Este caso no representa a un cliente real ni atribuye testimonios, disponibilidad o resultados comerciales reales. --- # Fuego Lento > Traducir el tiempo, la brasa y el servicio en una página de restaurante con una reserva clara. - Servicio demostrado: Desarrollo web para restaurantes - Tipo: demostración independiente - Sector: Restaurante - Dirección visual: Editorial costero - Interacción: Carta viva - Caso: https://devforgeapp.pro/proyectos/fuego-lento - Demo: https://fuego.devforgeapp.pro/ ## Respuesta corta Una experiencia gastronómica de alto contraste que conecta carta, proceso y mesa sin perder ritmo. ## El reto Fuego Lento necesita vender una sensación antes que una lista de platos: fuego abierto, producto de temporada y una mesa que se disfruta sin prisa. La interfaz debía conservar ese carácter y, al mismo tiempo, permitir consultar la carta y reservar sin fricción. ## Dirección La dirección combina verde carbón, papel mineral y rojo brasa. El contraste está reservado para acciones y momentos de calor, mientras la tipografía estrecha y los rótulos monoespaciados construyen una voz de cocina editorial, precisa y cercana. ## Experiencia El recorrido conecta el plato destacado con la carta, el proceso de encender, preparar y servir, y un formulario de reserva personalizado. Las transiciones aparecen como brasas: revelados escalonados, cambios térmicos y microinteracciones contenidas. ## Resultado El resultado es una demostración independiente de cómo una página gastronómica puede unir atmósfera y utilidad. La reserva, la información de horarios y la carta viven dentro del mismo sistema visual, sin depender de un widget externo ni inventar resultados comerciales. ## Decisiones - Un hero continuo que integra el plato, el fuego y el mensaje central. - Una carta legible con fotografía contextual y selección visible. - Un formulario de reserva diseñado como parte de la marca, no como widget externo. ## Capacidades demostradas - Carta interactiva - Proceso secuencial - Reserva demostrativa - Transiciones térmicas ## Fuentes - [WAI — Labeling Controls](https://www.w3.org/WAI/tutorials/forms/labels/): Base para que fecha, hora y personas mantengan etiquetas comprensibles en la reserva. - [Responsive Images](https://web.dev/learn/images/responsive-images): Guía aplicada al recorte y carga de platos en distintos anchos de pantalla. Este caso no representa a un cliente real ni atribuye testimonios, disponibilidad o resultados comerciales reales. --- # Cota Estudio > Comunicar criterio de arquitectura y obra sin parecer una galería decorativa. - Servicio demostrado: Sitio web para estudios de arquitectura - Tipo: demostración independiente - Sector: Arquitectura - Dirección visual: Brutalismo editorial - Interacción: Materia activa - Caso: https://devforgeapp.pro/proyectos/cota-estudio - Demo: https://cota.devforgeapp.pro/ ## Respuesta corta Una hoja de obra digital con proyectos jerarquizados, decisiones espaciales y superficies que responden. ## El reto Un estudio de arquitectura no necesita mostrar imágenes aisladas: necesita explicar cómo piensa, qué prioriza y por qué una obra se siente inevitable. El reto era ordenar portfolio, manifiesto y materiales sin caer en un masonry accidental. ## Dirección Cota Estudio usa una retícula visible, blanco cálido, negro de asfalto y un naranja óxido muy medido. El tratamiento brutalista no se apoya únicamente en el color: también aparece en la escala tipográfica, las líneas de construcción y la jerarquía del archivo. ## Experiencia El hero se construye por capas con una fotografía dominante y un plano anclado. Después, los proyectos se presentan con jerarquía editorial; los principios se expanden para explicar decisiones y el selector de superficies permite explorar concreto, madera, piedra y metal. ## Resultado El resultado es una demostración independiente que convierte el criterio espacial en una experiencia navegable. La página muestra cómo una identidad puede sostener fotografía, texto, interacción y responsive sin que el contenido compita consigo mismo. ## Decisiones - El hero se construye por capas con una sola fotografía dominante. - El portfolio usa una jerarquía principal, estudios de escala y un cierre, no masonry accidental. - Los principios se expanden para respaldar el manifiesto con decisiones concretas. ## Capacidades demostradas - Portfolio jerárquico - Principios expandibles - Selector de superficies - Brief de proyecto ## Fuentes - [WAI — Page Structure and Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/): Referencia para que manifiesto, obras, criterios y materiales conserven un orden semántico. - [CSS Grid Layout](https://www.w3.org/TR/css-grid-2/): Especificación que sustenta la retícula editorial y su reorganización responsive. Este caso no representa a un cliente real ni atribuye testimonios, disponibilidad o resultados comerciales reales. --- # Umbral Casa > Presentar propiedades mediante luz, barrio y datos útiles para agendar una visita. - Servicio demostrado: Diseño web para inmobiliarias boutique - Tipo: demostración independiente - Sector: Inmobiliaria - Dirección visual: Modernismo cálido - Interacción: Dossier dinámico - Caso: https://devforgeapp.pro/proyectos/umbral-casa - Demo: https://umbral.devforgeapp.pro/ ## Respuesta corta Un archivo residencial que permite comparar lugares, explorar planos y pasar a una visita sin romper el contexto. ## El reto La decisión inmobiliaria no ocurre solo frente a una fotografía: también depende de cómo se vive el barrio, cómo respira un plano y qué datos permiten imaginar una visita. Umbral Casa debía presentar esa información sin parecer un listado frío de propiedades. ## Dirección La identidad combina verde eucalipto, limewash y terracota. La paleta cálida acompaña la arquitectura y deja que la luz sea un argumento de venta. La composición evita los clichés de portales inmobiliarios y trata cada propiedad como un pequeño dossier. ## Experiencia El selector transforma imagen, ficha, plano y disponibilidad con una transición coordinada. Área, habitaciones y ubicación tienen jerarquía clara; el barrio recibe una sección propia y la galería permite ampliar el contexto antes de agendar una visita. ## Resultado El resultado es una demostración independiente para una inmobiliaria boutique: comparar tres propiedades, leer su información principal y llegar a una solicitud de visita sin perder orientación. No representa un inventario real ni afirma disponibilidad comercial real. ## Decisiones - Los datos se agrupan en capas para que área, ubicación y disponibilidad no compitan. - El cambio de propiedad transforma imagen, plano y ficha mediante una sola transición. - El barrio recibe el mismo peso editorial que la vivienda. ## Capacidades demostradas - Selector de propiedades - Galería expansiva - Plano interactivo - Agenda de visita ## Fuentes - [Schema.org — RealEstateListing](https://schema.org/RealEstateListing): Referencia semántica para separar propiedad, ubicación, disponibilidad y datos del dossier. - [WCAG 2.2 — Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html): Criterio aplicado a selectores, galería y acciones de visita mediante teclado. Este caso no representa a un cliente real ni atribuye testimonios, disponibilidad o resultados comerciales reales. --- # RITO > Mostrar estilo y disponibilidad sin caer en clichés vintage de barbería. - Servicio demostrado: Diseño web para barberías - Tipo: demostración independiente - Sector: Barbería - Dirección visual: Contacto fotográfico - Interacción: Estilos y turnos - Caso: https://devforgeapp.pro/proyectos/rito-barberia - Demo: https://rito.devforgeapp.pro/ ## Respuesta corta Fotografía frontal, servicios con contexto y un recorrido que termina en una reserva directa. ## El reto RITO debía comunicar técnica, personalidad y confianza sin recurrir a rayas vintage, bigotes dibujados o una estética de barbería genérica. La página tenía que mostrar el resultado del corte y también a las personas que lo hacen posible. ## Dirección La dirección usa noche, papel y azul eléctrico para construir una barbería urbana y contemporánea. Las fotografías funcionan como hoja de contactos: retratos cercanos, gestos de trabajo y encuadres que hacen visible la precisión del oficio. ## Experiencia Los cuatro estilos se exploran como una selección completa, no como tarjetas recortadas. Servicios, equipo y disponibilidad se conectan con un flujo de reserva directo; los cambios de imagen, los estados hover y los revelados por viewport aportan ritmo sin convertir la interfaz en un efecto. ## Resultado El resultado es una demostración independiente que muestra una experiencia comercial completa para una barbería: dirección de arte, catálogo de servicios, equipo contextualizado, responsive y reserva. La identidad permite vender una visita sin depender de una plantilla de salón. ## Decisiones - El hero funciona como una portada fotográfica, no como un split desconectado. - Cuatro estilos se presentan completos en una hoja de contactos controlada. - El equipo aparece con función, especialidad y disponibilidad legible. ## Capacidades demostradas - Servicios expandibles - Selector de estilos - Equipo contextualizado - Flujo de reserva ## Fuentes - [WCAG 2.2 — Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html): Referencia para servicios, estilos, perfiles y reserva en pantallas táctiles. - [MDN — prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion): Base para conservar la experiencia sin movimiento cuando el usuario lo solicita. Este caso no representa a un cliente real ni atribuye testimonios, disponibilidad o resultados comerciales reales. --- # Guías # Diseño web a medida vs. plantillas: cuándo conviene cada opción > Criterios para elegir entre una plantilla y una web con identidad propia, según objetivos, presupuesto, contenido, conversión y mantenimiento del negocio. - Categoría: Estrategia web - Actualizada: 2026-08-31 - URL: https://devforgeapp.pro/guias/diseno-web-a-medida-vs-plantillas ## Respuesta corta Una plantilla conviene cuando el objetivo es validar rápido con presupuesto reducido. El diseño a medida conviene cuando la percepción de marca, el recorrido comercial o una interacción particular son parte de la venta. ## La diferencia no es solo visual Una plantilla parte de una estructura ya decidida y adapta contenido, color y tipografía. Un sitio a medida parte del negocio: qué debe entender una persona, qué objeción necesita resolver y qué acción debe poder completar. Eso cambia la arquitectura de información, la jerarquía, las fotografías necesarias y el comportamiento responsive. La identidad deja de ser una capa decorativa y se convierte en una herramienta de orientación. ## Cuándo elegir una plantilla Una plantilla puede ser una decisión correcta para validar una oferta, publicar información temporal o lanzar una primera versión con contenido todavía inestable. - El plazo es más importante que la diferenciación. - El flujo comercial es simple y estándar. - La marca aún no tiene una dirección visual definida. ## Cuándo invertir en una web propia Una solución a medida tiene más sentido cuando el sitio participa directamente en una venta, una presentación o una decisión de confianza. También cuando la oferta no cabe bien en los patrones habituales. - La marca necesita diferenciarse en segundos. - Hay varios tipos de contenido o audiencias. - La experiencia requiere selectores, catálogos, dossiers o reservas propias. - El responsive y el rendimiento forman parte del alcance. ## Fuentes - [W3C — Web Design and Applications](https://www.w3.org/standards/webdesign/) - [web.dev — Learn Performance](https://web.dev/learn/performance/) --- # Animaciones web con identidad sin sacrificar rendimiento > Una guía para usar movimiento con propósito, accesibilidad y un presupuesto técnico claro, sin retrasar contenido ni sacrificar el rendimiento en móvil. - Categoría: Motion - Actualizada: 2026-08-31 - URL: https://devforgeapp.pro/guias/animaciones-web-sin-sacrificar-rendimiento ## Respuesta corta El motion profesional explica cambios, crea jerarquía y conserva contexto. Debe priorizar transform y opacity, respetar prefers-reduced-motion y evitar que las imágenes o scripts retrasen el contenido principal. ## Primero se define la función Una animación puede presentar el protagonista, revelar una secuencia, confirmar una selección o conectar dos estados. Si no cumple ninguna de esas funciones, probablemente es ruido. - Entrada: indica qué mirar primero. - Transición: explica qué cambió. - Respuesta: confirma una acción. - Ritmo: separa momentos sin llenar la pantalla de efectos. ## Un presupuesto de movimiento Transformaciones y opacidad suelen ser más predecibles que animar dimensiones o posiciones que fuerzan el layout. Las animaciones de scroll necesitan límites, y los recursos pesados deben cargarse según su importancia real. ## Accesibilidad y verificación prefers-reduced-motion no significa quitar contenido: significa ofrecer el mismo recorrido sin desplazamientos o parallax innecesarios. La comprobación final debe incluir teclado, móvil real, Core Web Vitals y estados con JavaScript lento. ## Fuentes - [MDN — prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - [web.dev — Animations guide](https://web.dev/learn/css/animations/) --- # Cómo diseñar una web de restaurante que conecte carta y reserva > La información, fotografía y jerarquía necesarias para convertir atmósfera en una reserva clara, con carta, horarios, precios y formulario accesible y claro. - Categoría: Restaurantes - Actualizada: 2026-08-31 - URL: https://devforgeapp.pro/guias/web-para-restaurante-carta-y-reserva ## Respuesta corta Una web de restaurante debe responder qué se come, cuánto cuesta, dónde está, cuándo abre y cómo reservar. La atmósfera visual importa, pero no puede ocultar esa información. ## El primer plato es informativo El hero necesita una imagen reconocible, una propuesta concreta y una acción. Fotografía, nombre del restaurante y reserva deben sentirse parte de la misma escena, no columnas que apenas se tocan. ## La carta debe poder recorrerse Los nombres, descripciones, precios y restricciones alimentarias necesitan contraste y orden. Una fotografía destacada puede acompañar la selección, pero no reemplaza la información del plato. - Categorías visibles y comprensibles. - Precios con una alineación consistente. - Fotos optimizadas y con recorte intencional. - Reserva accesible desde la carta sin perder contexto. ## El formulario también es marca Fecha, hora y número de personas deben tener etiquetas persistentes, estados de foco visibles y mensajes de error concretos. Personalizar el formulario no significa esconder el comportamiento esperado del navegador. ## Fuentes - [WAI — Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/) - [web.dev — Responsive images](https://web.dev/learn/images/responsive-images) --- # Portfolio digital para un estudio de arquitectura > Cómo ordenar proyectos, proceso y materia para comunicar criterio, no solo fotografías, en un portfolio web de arquitectura legible, rápido y responsive. - Categoría: Arquitectura - Actualizada: 2026-08-31 - URL: https://devforgeapp.pro/guias/portfolio-digital-para-arquitectura ## Respuesta corta Un portfolio de arquitectura funciona mejor cuando jerarquiza obras, explica decisiones y conecta cada imagen con lugar, material y uso. Una cuadrícula de fotos sin contexto muestra archivo, pero no criterio. ## La obra principal necesita una razón Elegir un proyecto destacado permite establecer la escala del estudio y contar una historia completa. Los proyectos secundarios pueden demostrar rango sin competir con el caso principal. ## Del manifiesto a las decisiones Frases como orientar, afinar o construir ganan valor cuando se expanden en decisiones observables: recorrido solar, relación con el terreno, materialidad, mantenimiento y uso. ## Una retícula que parece decidida La asimetría editorial necesita proporciones repetibles y alineaciones visibles. En responsive, el orden de lectura debe conservar el vínculo entre nombre, ficha e imagen del proyecto. - Un H1 único y secciones con H2 descriptivos. - Aspect ratios reservados para evitar saltos. - Metadatos legibles junto a cada obra. - Alternativas de texto que describan el espacio, no solo el nombre del archivo. ## Fuentes - [WAI — Page Structure](https://www.w3.org/WAI/tutorials/page-structure/) - [W3C — CSS Grid Layout](https://www.w3.org/TR/css-grid-2/) --- # Qué debe mostrar una web inmobiliaria boutique > Una estructura para presentar propiedad, barrio, plano y visita sin parecer un portal genérico, con datos comparables, contexto y contacto claro por inmueble. - Categoría: Inmobiliaria - Actualizada: 2026-08-31 - URL: https://devforgeapp.pro/guias/web-inmobiliaria-boutique ## Respuesta corta Una inmobiliaria boutique debe jerarquizar precio o área, mostrar la propiedad en contexto y hacer comparables los datos esenciales. El barrio, el plano y la disponibilidad son argumentos de venta, no información secundaria. ## Una ficha con protagonista Cada propiedad necesita un dato dominante según la intención: precio, área o ubicación. Habitaciones, estado y características deben agruparse para no competir en el mismo nivel visual. ## La casa continúa fuera de la puerta El barrio ayuda a imaginar la rutina. Distancias caminables, servicios, sombra, ruido y transporte deben explicarse con texto legible y fuentes verificables cuando se trate de una oferta real. ## Del interés a la visita La galería, el plano y la agenda deben conservar el nombre de la propiedad seleccionada. Una transición coordinada evita que el usuario dude si cambió solo la foto o todo el dossier. - Galería con controles de teclado. - Plano ampliable y descrito. - Disponibilidad actualizada. - Formulario con propiedad y horario visibles. ## Fuentes - [Schema.org — RealEstateListing](https://schema.org/RealEstateListing) - [WCAG 2.2 — Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html) --- # SEO y GEO para demos interactivas con transparencia comercial > Cómo hacer indexable una demo visual mediante HTML, contexto, datos estructurados y fuentes honestas, sin inventar clientes, métricas ni resultados comerciales. - Categoría: SEO / GEO - Actualizada: 2026-08-31 - URL: https://devforgeapp.pro/guias/seo-y-geo-para-demos-interactivas ## Respuesta corta Una demostración independiente puede posicionarse si explica claramente qué servicio muestra, entrega HTML rastreable, usa canonical propio, enlaza fuentes reales y mantiene la misma información en contenido visible, metadata y datos estructurados. ## La transparencia no impide posicionar La transparencia comercial y la indexación son compatibles. El caso debe presentarse como una demostración independiente, describir el problema, las decisiones y el resultado, y evitar clientes, testimonios o métricas inventadas. ## Contenido legible antes de ejecutar JavaScript Los metadatos no reemplazan el contenido. El HTML debe incluir título, resumen y enlaces principales; el canonical debe apuntar a la URL que realmente se desea indexar. Las versiones Markdown pueden ayudar a agentes a leer una representación limpia del mismo contenido. ## GEO se apoya en claridad y evidencia La investigación académica sobre Generative Engine Optimization reportó mejoras de visibilidad en su benchmark al incorporar señales como fuentes y citas. No garantiza posiciones en un motor concreto; sí refuerza una práctica sensata: respuestas directas, entidades claras y afirmaciones verificables. - Un canonical por página. - Schema que coincida con lo visible. - Sitemap y robots accesibles. - Fuentes primarias cerca de las afirmaciones. - Imágenes optimizadas y contenido principal rápido. ## Fuentes - [Princeton — GEO: Generative Engine Optimization](https://collaborate.princeton.edu/en/publications/geo-generative-engine-optimization/) - [Google — Structured data introduction](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) - [llms.txt proposal](https://llmstxt.org/)