EnglishENEspañolES
Trabajo

Caso de estudio · Sin fines de lucro · Servicios sociales · 2026

In Safe CompanyUna puerta segura para sobrevivientes.

Cuatro sitios web se convirtieron en una sola plataforma bilingüe, diseñada para la seguridad en cada clic.

Página de inicio de In Safe Company con la barra de líneas de ayuda y cuatro tarjetas de ruta
La página de inicio en español en un teléfono

Una organización sin fines de lucro del área metropolitana de Atlanta, que acompaña a sobrevivientes de violencia doméstica y agresión sexual desde 1986, estaba cambiando de nombre. Su historia estaba repartida en cuatro sitios web distintos. Diseñé y desarrollé el único sitio que los reemplazó, con ayuda al alcance de dos o tres clics, una versión completa en español y una Salida Rápida concebida como una función de seguridad.

Cliente
In Safe Company, Decatur, Georgia
Función
Diseñador y desarrollador principal, de principio a fin
Plataforma
WordPress multisitio, Elementor 4, PHP y JavaScript a medida, Kinsta
Plazo
Inicio el 10 de agosto, en línea el 13 de octubre de 2026
Idiomas
Inglés y español latinoamericano
Descargar el caso de estudio PDF Resumen de una página PDF Visitar insafecompany.org

Dos formas de leer este caso. Cada capítulo empieza en lenguaje sencillo: qué cambió y para quién. Los lectores técnicos pueden abrir Bajo el capó para ver la ingeniería.

4 → 1sitios web heredados unificados en uno
30+páginas, en inglés y en español
13widgets y plugins a medida
9 semanasdesde el inicio hasta el sitio en línea
448frases de crisis señaladas para revisión humana
0enlaces internos con redirecciones o rotos tras la auditoría de lanzamiento

El reto

Una organización de confianza cambiaba de nombre tras décadas de servicio, y sus programas estaban dispersos en cuatro sitios web. Las personas en crisis tenían que descifrar menús para encontrar ayuda.

El enfoque

Una plataforma WordPress a medida, diseñada en torno a la seguridad: una barra permanente con las líneas de ayuda, una Salida Rápida reforzada, rutas en lenguaje sencillo y un sitio completo en español.

El resultado

En línea el 13 de octubre de 2026, durante el Mes de Concientización sobre la Violencia Doméstica, con donaciones, eventos, un pódcast e historias de sobrevivientes que el personal gestiona por su cuenta.

Estrategia

Cuatro sitios, una sola puerta

La organización cambiaba de nombre tras décadas de servicio. Su sitio principal, su campamento de verano, su centro de visitas supervisadas y una página provisional para el nuevo nombre vivían cada uno en un dominio distinto.

Antes de diseñar nada, archivé cada página de los cuatro sitios para que no se perdiera nada, y luego presenté a la dirección cuatro propuestas de diseño funcionales en lugar de maquetas estáticas. La que aprobaron se convirtió en la referencia de cada componente del proyecto.

  • Un archivo con búsqueda de cada página, foto y publicación anteriores
  • Cuatro propuestas de diseño con nombre propio, cada una un prototipo funcional
  • Una bienvenida única que informa del nuevo nombre a quienes regresan
Bajo el capóPara lectores técnicos
  • Rastreo de wrcdv.org, camppeaceatl.org, niasvisitation.org e insafecompany.org para obtener una copia sin conexión y un sitio de archivo privado con árbol de páginas, búsqueda de texto completo, galerías de imágenes y tablas de enlaces.
  • Redacción de un documento de decisión entre WordPress y Wix; el cliente eligió WordPress a medida por la propiedad del sitio y su capacidad de ampliación.
  • Cuatro propuestas de diseño (Good Company, Atmosphere, Civic, Dawn) construidas como prototipos en vivo con Next.js, Tailwind y Framer Motion, desplegados en Vercel para compararlos lado a lado.
  • Protección del nuevo dominio con una página de espera de marca que incluía ambas líneas de ayuda, Salida Rápida y captación de correos hasta el lanzamiento.
Next.jsTailwindFramer MotionVercelArchivo de contenidos
Fig. 1.1El cambio de nombre, contado una sola vez. Quienes regresan ven cómo el logotipo anterior se transforma en el nuevo.
Fig. 1.2Nuestra historia continúa el legado en lugar de empezar de cero.

Orientación

Ayuda en dos o tres clics

Nadie en crisis debería tener que descifrar un menú. La página de inicio hace una sola pregunta sencilla, “¿Qué le trae aquí hoy?”, y ofrece cuatro respuestas: Necesito ayuda, Quiero ayudar a alguien, Quiero ser voluntario, Quiero donar.

Al elegir una, la parte superior de la página se convierte en un recorrido guiado, y cada opción indica cuántos clics faltan. Las dos líneas de ayuda de 24 horas permanecen en pantalla en todo momento.

  • Una pregunta, cuatro respuestas sencillas
  • Cada destino a tres clics como máximo
  • Líneas de ayuda y opción en español visibles antes que todo lo demás
Bajo el capóPara lectores técnicos
  • Widget de Elementor a medida (isc-hero) que combina la portada de marca con un motor de rutas. El contenido es un repetidor plano de claves y claves padre, con hasta tres niveles de profundidad, para que el personal edite el árbol sin código.
  • El editor señala claves padre rotas, tarjetas sin salida y tarjetas anidadas en exceso.
  • La tecla Esc nunca retrocede por la ruta; está reservada para la Salida Rápida. La ruta urgente oculta la barra de progreso.
  • Cada ruta es un enlace real, por lo que la portada funciona sin JavaScript. Diez interruptores para fotos, video, movimiento y etiquetas.
  • Los megamenús muestran ambas líneas de ayuda antes que cualquier enlace. La cabecera ofrece cuatro estilos de menú móvil y cambia automáticamente al menú móvil si la fila de escritorio se queda sin espacio.
Widget de Elementor a medidaPHPVanilla JSMejora progresiva
Fig. 2.1Llegada: una pregunta, cuatro rutas y una barra de progreso que indica que ya lleva un tercio del camino.
Fig. 2.2Recorrido: el mensaje de marca se repliega y la ruta toma el protagonismo; cada tarjeta muestra sus clics restantes.
Fig. 2.3En el teléfono, las cuatro rutas se apilan. No hay que deslizar para encontrar ayuda.

Sistema de diseño

Una portada construida como sistema

Cada franja de la página de inicio es un componente propio que el personal puede editar sin llamar a un desarrollador: la historia del nuevo nombre, las cifras de impacto, los programas, los próximos eventos y la franja de donación.

Como cada pieza se construyó en lugar de tomarse prestada, una actualización del tema no puede romperla sin que nadie lo note.

  • Las cifras de impacto se animan una sola vez, y los valores reales siempre están en la página
  • Programas, eventos y promociones se actualizan desde el contenido que el personal ya gestiona
  • Una promoción de temporada puede retirarse sola en una fecha fijada
Bajo el capóPara lectores técnicos
  • Plugins independientes para la cabecera, la portada, las tarjetas de opciones, las cifras de impacto y los programas, que comparten una misma categoría de Elementor y cargan las fuentes de marca una sola vez.
  • Un “escudo de tema” aísla los estilos de cada widget para que las reglas globales de botones del tema nunca puedan forzar mayúsculas ni texto en una sola línea.
  • Las cifras muestran sus valores finales en el HTML para buscadores, lectores de pantalla, visitantes sin JavaScript y con movimiento reducido; el ancho queda reservado para que nada se desplace durante la animación.
  • Cada widget se probó a 1440, 1024, 768, 390 y 360 px sin desbordamiento horizontal, con y sin un tema simulado.
Elementor 4Theme BuilderIntersectionObserverCompatibilidad con movimiento reducido
Fig. 3.1La franja de la historia, con un video que no carga nada hasta que se pulsa.
Fig. 3.2Las cifras de impacto se animan cuando el 40% de la franja está a la vista.
Fig. 3.3Programas: una cuadrícula de 3, 2 y 1 columnas, con tarjetas enlazadas que los lectores de pantalla anuncian una sola vez.
Fig. 3.4Eventos en vivo desde el plugin de calendario, y una tarjeta promocional que se oculta después de una fecha fijada.

Ingeniería de seguridad

Salida Rápida, concebida como función de seguridad

Muchas personas leen desde un teléfono o una computadora que otra persona vigila. Un toque en Salida Rápida, o la tecla Esc, reemplaza el sitio por una página del clima al instante.

La mayoría de los botones de salida se quedan ahí. Este además elimina la visita del botón Atrás de la pestaña, borra todo lo que el sitio haya guardado y sigue protegiendo a la persona si alguien pulsa Atrás o Adelante más tarde.

  • Siempre visible, en cada página y en cualquier tamaño de pantalla
  • Atrás lleva a lo que estaba abierto antes del sitio
  • Se explica una sola vez con un aviso discreto, respaldado por una guía honesta para navegar con seguridad
Bajo el capóPara lectores técnicos
  • Secuencia de salida: cuenta las entradas de este sitio en la pestaña con la Navigation API, retrocede hasta la primera página de la visita, la reemplaza por weather.gov y luego borra localStorage, sessionStorage, IndexedDB, Cache Storage y los service workers; el servidor responde con Clear-Site-Data.
  • Cada visita recibe un identificador guardado en sus entradas del historial. Tras una salida, cualquiera de esas páginas a la que se llegue con Atrás o Adelante se oculta antes de pintarse y vuelve a salir, protegida por una comprobación que se ejecuta antes de que cargue el título de la página.
  • Se eligió weather.gov porque no tiene aplicación: en iPhone, google.com y weather.com derivan a sus aplicaciones y dejan atrás la pestaña original.
  • Cinco versiones en cinco días, cada una a partir de un hallazgo en dispositivos reales: 1.0.4 marcado de posición, 1.0.7 salida en la misma pestaña, 1.0.8 sin derivación a aplicaciones más una red de seguridad de 4 segundos, 1.0.9 sin entrada provisional, 1.0.10 las páginas desconocidas rebotan tras una salida.
  • Verificado en Safari 26.3 (Mac), iPhone, Chrome, WebKit y emulación de Android. La misma señal detiene el audio del pódcast, cierra los diálogos de video y borra todos los formularios.
Navigation APIHistory APIClear-Site-DataGestión de bfcache
Fig. 4.1Se explica una vez: un aviso único presenta el botón y la tecla Esc.
Fig. 4.2Honesto sobre los límites: una guía de lo que ningún sitio web puede borrar.
Fig. 4.3Salida Rápida aparece junto a Cerrar en el menú móvil, y de nuevo al final.

Contenido informado por el trauma

Escrito para el día más difícil

Cada página de ayuda sigue un mismo patrón sereno: primero una forma de llamar, lenguaje sencillo, un aviso amable antes del contenido delicado y una tarjeta que mantiene las líneas de ayuda a su lado mientras lee.

Las páginas largas incluyen una guía “En esta página” que acompaña la lectura, para que nadie se pierda en un plan de seguridad.

  • Una franja para llamar 24/7 abre cada página de ayuda
  • Avisos de contenido antes de los videos y los temas difíciles
  • Los videos no cargan nada de YouTube hasta que alguien pulsa reproducir
Bajo el capóPara lectores técnicos
  • Guía de lectura en 20 páginas largas: una cuadrícula centrada de 1264 px con una columna de 352 px, generada a partir de los h2 visibles de la página cuando hay tres o más; fija solo cuando cabe en la ventana; aria-current en la sección activa; desactivada por debajo de 1100 px.
  • Las fachadas de video muestran el primer fotograma de cada video, alojado en el propio servidor como WebP bajo un velo ciruela suave. Cero solicitudes a YouTube o ytimg antes de reproducir, verificado en cada página.
  • Textos de los programas tomados de los documentos del cliente, con cada página publicada cotejada con ellos palabra por palabra.
  • Texto atenuado elevado de #a08f8f (3.07:1, insuficiente) a #7f6b6b (4.98:1 sobre blanco, 4.52:1 sobre crema).
Contraste WCAGMedios que cargan al pulsarNavegación fijaControl de calidad de contenidos
Fig. 5.1Primero llamar, luego leer.
Fig. 5.2La guía de lectura sigue su avance y termina con ambas líneas de ayuda.
Fig. 5.3Ayude a alguien que le importa.
Fig. 5.4Consejería y grupos de apoyo.
Fig. 5.5El mismo patrón sereno en un teléfono.

Plugin a medida · ISC Español

Usted tiene apoyo. Un sitio completo en español

Las personas hispanohablantes tienen acceso a todo el sitio. Cada página, menú, formulario, evento y episodio del pódcast tiene su versión en español, accesible desde un selector en la parte superior de cada página.

El selector nunca redirige a nadie ni guarda la preferencia de idioma en el dispositivo, algo importante en un teléfono que otra persona podría revisar.

  • Español latinoamericano neutro, con el trato respetuoso de usted
  • 448 frases relacionadas con crisis señaladas para la revisión de una persona nativa
  • Ningún servicio de traducción externo tiene acceso al contenido
Bajo el capóPara lectores técnicos
  • Plugin a medida (isc-i18n). Cada página tiene su gemela en /es/ más la misma ruta; el idioma vive solo en la URL, y Kinsta almacena en caché cada idioma como una página independiente.
  • Las páginas se construyen una sola vez en inglés. En /es/ el HTML final se traduce en unos 9 ms por página, incluidos los textos alternativos, las etiquetas ARIA, las metaetiquetas y las de Open Graph, el JSON-LD y las configuraciones JSON de los propios widgets.
  • El texto que los scripts generan después (calendario, reproductor de pódcast, formularios) se traduce en el navegador a partir de un diccionario estático.
  • 43 páginas y 14 episodios del pódcast verificados en /es/; hreflang en/es/x-default en cada página; un mapa del sitio en español integrado en el índice de Yoast.
  • Una cola de administración recoge cualquier texto en inglés que siga visible cuando un editor navega por /es/; se rechazan las traducciones a las que les faltan marcadores de posición.
Motor de i18n a medidahreflangJSON-LDCaché en el borde por idioma
Fig. 6.1/es/get-help/: llámenos a cualquier hora.
Fig. 6.2Las donaciones también funcionan en español, incluido el panel de PayPal.
Fig. 6.3Usted tiene apoyo.

Plugin a medida · ISC Giving

Cada donación, trazada hasta la contabilidad

Las personas donantes pueden aportar con tarjeta o PayPal. Elijan lo que elijan, la campaña seleccionada, cualquier homenaje a un ser querido y si cubrieron las comisiones viajan con la donación hasta la base de datos de donantes y el sistema contable.

La página destaca primero lo que logra cada aporte, como una noche de atención en la línea de ayuda o un día de comidas en la casa refugio.

  • Montos de donación vinculados a horas reales de ayuda
  • Opciones de donación mensual, en homenaje y de cubrir las comisiones
  • Nadie recibe agradecimiento por una donación que luego no se concreta
Bajo el capóPara lectores técnicos
  • Levitate sigue siendo el sistema de registro de donantes, con pagos a través de la propia cuenta de Stripe de la organización mediante Stripe Checkout; Google Pay habilitado junto con tarjetas, Apple Pay y Link.
  • Un plugin a medida ajusta el iframe de Levitate para permitir la Payment Request API (de modo que los monederos digitales funcionen dentro del embebido) y le asigna un título nuevo para los lectores de pantalla.
  • El panel de PayPal carga el SDK solo al abrirse, por privacidad y velocidad. La campaña, el homenaje y la elección de comisiones se codifican en cada pedido para que Zapier los registre en Levitate y en la clase correcta de QuickBooks.
  • Los pagos bancarios diferidos se retienen a propósito para que no se emita ningún recibo fiscal por una donación que sea rechazada.
  • Diagnóstico que respeta la privacidad: un registro con límite de frecuencia de los últimos 100 eventos de pago, sin nombres, correos, personas homenajeadas ni direcciones IP, más un interruptor de lanzamiento Desactivado / Solo administradores / Todos para nuevos métodos de pago.
Stripe CheckoutPayPal JS SDKLevitateZapierQuickBooks
Fig. 7.1El impacto de cada aporte, desde el principio.
Fig. 7.2El panel de PayPal replica el formulario principal, con el total en tiempo real.
Fig. 7.3Pensado para donar desde el teléfono.

Plugin a medida · ISC Events

Un motor de calendario y una sala llena de luz

Los grupos de apoyo semanales, los eventos de recaudación y los eventos comunitarios provienen de un mismo calendario que cualquiera puede añadir a su propio teléfono.

En los grupos que se reúnen en una casa refugio, la dirección no aparece en ningún lugar. Tras la 35.ª Vigilia Anual con Velas, la página del evento se convirtió en una galería de 58 fotografías, diseñada como luz en una sala a oscuras.

  • Vistas de lista y de mes, filtros y opción de añadir al calendario
  • Ubicaciones privadas protegidas en cada lugar donde aparece el evento
  • Una galería cinematográfica de la vigilia a los pocos días del evento
Bajo el capóPara lectores técnicos
  • Tipo de contenido personalizado (custom post type) con un verdadero motor de recurrencia: semanal, mensual por fecha o por día de la semana, excepciones y reglas de fin, todo a salvo de los cambios de horario de verano. Probado con fuzzing contra 3,000 reglas aleatorias con 0 discrepancias.
  • El modo de ubicación privada elimina la dirección, el mapa y el enlace en línea dentro de una sola función; verificadas cero filtraciones en la página, el calendario, la REST API, el ICS de cada evento, el feed de suscripción y el JSON-LD.
  • Endpoints REST, feeds ICS suscribibles plegados a 75 octetos, datos Event de schema.org, vistas de lista y de mes con container queries.
  • Galería de la vigilia: filas justificadas dimensionadas según la proporción de cada foto, apariciones graduales con IntersectionObserver, un visor <dialog> que nunca añade entradas al historial (por seguridad de la Salida Rápida) y etiquetas en español según el idioma de la página.
  • axe-core: 0 infracciones en las vistas de lista, mes, teléfono y evento.
Tipos de contenido personalizadosRecurrencia estilo RRULEICSREST APIaxe-core
Fig. 8.1Grupos de apoyo recurrentes con un panel de detalles.
Fig. 8.2Una portada de ocho fotos con efecto Ken Burns y control de pausa.
Fig. 8.358 fotos en tres capítulos, sin rostros recortados.
Fig. 8.4La vigilia en un teléfono.

Plugins a medida · Pódcast e Historias

Voces sobrevivientes, en un escenario cuidado

El pódcast SISTERs Stories ahora se escucha en el propio sitio, con su propio reproductor. No se recuerda nada de lo que alguien escuchó, y la pantalla de bloqueo del teléfono solo dice “Audio.”

Los videos de sobrevivientes van precedidos de un aviso amable y se reproducen en una ventana que desaparece en cuanto se pulsa Salida Rápida.

  • Tres temporadas, actualizadas automáticamente desde el feed del programa
  • Un reproductor discreto con un minirreproductor acoplado
  • Avisos de contenido antes de cada episodio y video
Bajo el capóPara lectores técnicos
  • Tipo de contenido personalizado sincronizado con el feed RSS del programa dos veces al día, emparejado por GUID. Los campos que provienen del feed se actualizan; las ediciones del personal nunca se sobrescriben; las subidas repetidas se detectan y se ocultan; los episodios que salen del feed se marcan, no se eliminan.
  • Reproductor de audio propio sobre un único elemento de audio compartido: tarjetas, reproductores en línea y un minirreproductor acoplado se mantienen sincronizados; saltos de -15/+30, velocidad de 1-2x y un control deslizante ARIA con búsqueda por teclado.
  • Detención total con Salida Rápida: pausa, elimina la fuente, limpia la Media Session y oculta el reproductor acoplado. Pantalla de bloqueo discreta por defecto. No se guarda la posición de escucha en ningún lugar.
  • Las URL antiguas del pódcast del sitio anterior redirigen con 301 a las nuevas páginas de episodio. JSON-LD PodcastEpisode en cada episodio.
  • Historias de sobrevivientes: un diálogo en la página que existe solo mientras está abierto; el plugin vuelve a consultar YouTube cada 12 horas y cambia una tarjeta a reproducción en el sitio cuando se permite la inserción.
Sincronización RSSMedia Session APIWP-Cronyoutube-nocookie
Fig. 9.1SISTERs Stories, en el sitio.
Fig. 9.2Páginas de episodio con un aviso de contenido sobre cada reproductor.
Fig. 9.3El pódcast en un teléfono.

Voluntariado y aliados

Buena voluntad, encaminada al siguiente paso

Ser voluntario aquí implica una verificación de antecedentes y una capacitación, así que el sitio muestra primero todo el camino. Dos preguntas rápidas orientan a cada persona hacia la mejor forma de ayudar, desde unas pocas horas hasta un turno semanal fijo.

Se agradece a los aliados exactamente como la organización lo pidió, y cada formulario de solicitud llega a la persona indicada del equipo sin guardar nada en el sitio.

  • Ocho formas de ayudar, filtradas con dos preguntas
  • Seis pasos reales desde la solicitud hasta el primer turno
  • Formularios que no dejan rastro
Bajo el capóPara lectores técnicos
  • Plugin Volunteer Pathway: cinco widgets de Elementor (rutas, camino, funciones, solicitud y consulta) con enlaces directos para cada ruta.
  • Formularios seguros: honeypot, token de tiempo firmado con HMAC (mínimo 3 segundos, máximo 7 días), límite de 6 envíos por hora por IP cifrada con hash. No se guarda nada salvo que falle el envío por correo; en ese caso, una copia privada se elimina automáticamente a los 30 días.
  • Cada formulario se borra con la Salida Rápida, al ocultarse la página y al restaurarse desde la caché de avance y retroceso. Los formularios de ayuda piden un único medio de contacto seguro y si es seguro dejar un mensaje de voz.
  • Muro de aliados reproducido textualmente a partir del documento del cliente: 23 logotipos, 10 nombres enlazados y 5 nombres en texto, con los logotipos tomados del sitio de cada organización.
Formularios a medidaTokens HMACLimitación de frecuenciaPestañas accesibles
Fig. 10.1Encuentre su lugar.
Fig. 10.2Todo el camino, en pestañas navegables con teclado.
Fig. 10.3Voluntariado, en un teléfono.

Calidad y lanzamiento

Medido, y luego lanzado con calma

Antes del lanzamiento se revisó cada página en escritorio, tableta y teléfono, se comprobó cada enlace, y el propio lanzamiento siguió un plan escrito con una vía de regreso de dos minutos que nunca hizo falta.

Desde el lanzamiento, el trabajo ha continuado: nueva fotografía, la galería de la vigilia y el correo configurado para que lleguen todos los formularios y recibos.

  • Cero enlaces rotos o cadenas de redirección en el lanzamiento
  • Descripciones para buscadores redactadas a mano para las 34 páginas de la auditoría
  • Una reversión probada, nunca utilizada
Bajo el capóPara lectores técnicos
  • Revisión SEO: 106 enlaces internos reescritos a sus URL definitivas (nuevo rastreo: 36 URL, todas 200, cero redirecciones, cero 404); descripciones redactadas a mano en 34 páginas; schema de organización sin fines de lucro con las líneas de crisis integrado en el grafo de Yoast; seis solicitudes de fuentes consolidadas en una.
  • Guía operativa de lanzamiento: primero copia de seguridad con nombre, propiedad del dominio y SSL verificados; DNS trasladado con TTL de 60 segundos y registros de correo intactos; dominio principal cambiado con búsqueda y reemplazo y configuración multisitio por SSH; prueba de humo de líneas de ayuda, Salida Rápida, ambos idiomas, donaciones y formularios.
  • Cada página publicada revisada a 1440, 1024 y 390 px en busca de desbordamiento horizontal.
  • Tras el lanzamiento: correo de Microsoft 365 configurado para el nuevo dominio, para que las notificaciones de formularios y los recibos de donación lleguen con fiabilidad.
Yoast SEOKinstaDNSGuías operativasMicrosoft 365
Fig. 11.1Escríbanos con seguridad: un formulario que pide una única forma segura de responder.
Fig. 11.2Franja de donación, suscripción por correo y ambas líneas de ayuda en cada página.

Lléveselo

La historia completa, en papel.

El caso de estudio completo y un resumen de una página, diseñados para imprimir, compartir con una junta directiva o adjuntar a una propuesta.

Descargar el caso de estudio PDF Resumen de una página PDF