Entrabas con un codigo
Cada usuario recibia un codigo de 4 letras. Ese ingreso activaba una ruta propia: alias, nombre completo, expediente, textos y preguntas pensadas para esa persona.
SECCION 02
Que era code.eztram.co
No fue una web convencional. Fue una experiencia construida con HTML, CSS y JavaScript, apoyada por backend para validar codigos y cargar datos personales que transformaban la secuencia para cada persona.
No habia navegacion libre
La experiencia estaba coreografiada: validacion, archivo inicial, dialogos escritos, preguntas, video final, cierre emocional y creditos tipo pelicula.
Una pieza intima y tecnica
Terminal, archivo, memorial y cine. Todo convivio en una interfaz oscura, precisa y emocional, mas cercana a un expediente vivo que a una landing page.
SECCION 03
Preview / recreacion visual
Esta demo no usa el backend real, pero reproduce el espiritu del sistema: ingreso, respuesta del archivo, expediente y fragmentos de la secuencia.
ACCESS GATE
AWAITING CODE
Sistema en espera. La recreacion autoriza codigos de muestra: AMIR, EZTR, CODE.
session: demo-memory
intent: archivo vivo
state: idle
ARCHIVO.HTML / EXPEDIENTE INICIAL
UNLOCKED
SECCION 04
El flujo completo
La experiencia estaba pensada como una sola respiracion narrativa. No habia menu ni saltos libres: cada etapa empujaba a la siguiente.
Pantalla de ingreso
El usuario escribia su codigo de 4 letras.
Validacion del codigo
Backend y reglas de estado determinaban si podia entrar.
sessionStorage
Los datos utiles se guardaban para sostener la experiencia sin perder identidad.
Redireccion a archivo.html
El acceso habilitado derivaba al expediente inicial.
Expediente inicial
Alias, nombre, foto y contexto abrien la fase documental.
Textos y dialogos
La narrativa seguia con bloques escritos, timings y typing.
Preguntas
Habia preguntas personalizadas que alteraban el tono de la experiencia.
Video final embebido
El ritual audiovisual llegaba como pieza culminante.
Cierre emocional
La energia bajaba hacia un epilogo mas intimo.
Creditos cinematograficos
Scroll vertical, logos y links como after-movie.
Codigo marcado como visto
El sistema registraba el final de la experiencia.
SECCION 05
Features del sistema
No eran adornos. Cada feature existia para sostener la idea de una experiencia unica por persona, administrable y controlada de punta a punta.
Codigos personalizados
El sistema giraba sobre codigos de 4 letras que funcionaban como llave, identidad y punto de control.
Experiencia individual
Cada codigo podia arrastrar alias, full name, textos antes y despues del cuestionario y preguntas propias.
Expediente editable
El panel permitia definir el archivo inicial por codigo, con datos y tono especifico.
Fotos por usuario
Se resolvian imagenes personalizadas con tolerancia a multiples extensiones y nombres.
Admin root
Una interfaz sencilla concentraba login root, estados, edicion, resets y defaults.
Estados del codigo
Habilitado, ingresado y visto daban trazabilidad a cada paso del ritual.
Reset y copy defaults
Se podia limpiar un codigo, reiniciar visto o copiar configuraciones base para acelerar ediciones.
sessionStorage
Funcionaba como memoria temporal para sostener datos personalizados entre pantallas y guards.
Proteccion de acceso directo
`archivo.html` comprobaba contexto valido para evitar entradas no autorizadas.
Audio inmersivo
Hum, typing, confirm, glitch, rising, prefinale y finale marcaban ritmo y atmosfera.
Typing animation
La aparicion del texto no solo informaba: administraba tension y expectativa.
Fase de expediente
Antes de la narrativa completa habia una primera impresion documental: una forma de situar emocionalmente al usuario.
Video y creditos
La salida era cinematografica, con video embebido, transicion delicada y cierre con creditos.
Codigo publico AMIR
Existia un comportamiento especial para el codigo publico, util para acceso controlado y demos.
Desktop y movil
Se cuidaron layouts, scroll, botones y tiempos para conservar el impacto en distintas pantallas.
SECCION 06
La logica real detras del sitio
Debajo del tono artistico habia una arquitectura simple pero muy pensada: estados, persistencia corta, guardas y administracion precisa del contenido.
RUTA BASE
INDEX -> ARCHIVO
- `index` recibia el codigo y lanzaba la validacion.
- La respuesta permitia poblar `sessionStorage` con identidad, textos y estado.
- `archivo.html` exigia esa memoria previa; sin ella devolvia unauthorized.
- El expediente consumia esos datos para construir nombre, alias, fotos y bloques.
- El panel admin alimentaba overrides, defaults y preguntas personalizadas.
- La foto se resolvia probando nombres y extensiones tolerantes.
- Al final el sistema marcaba el codigo como visto para cerrar el circuito.
Guard de acceso
La proteccion no dependia del usuario entendiendo la experiencia: el frontend exigia contexto valido antes de mostrar `archivo.html`, reduciendo accesos directos y estados rotos.
Datos personalizados
Los textos guardados en `sessionStorage` no eran ornamentales. Eran la materia prima que hacia que cada trayecto se sintiera escrito para una sola persona.
Resolver imagenes
La foto por usuario fue una mini logica en si misma: nombres alternativos, extensiones distintas y sensibilidad de mayusculas podian romper la ilusion si no se contemplaban.
Estados y cierres
El admin no solo editaba texto; gobernaba vida del codigo, reseteos y el marcado final que confirmaba que la secuencia habia sido recorrida.
SECCION 07
YouTube y el video final
El video no aparecia como un embed cualquiera. Era el ultimo acto del recorrido, el momento en que la experiencia cambiaba de lectura a vision.
Integracion inteligente, no reproductor propio
Cada codigo podia apuntar a un video distinto. La solucion consistio en aceptar URLs diversas y convertirlas a formato embed, incluyendo variantes como `shorts`, `youtu.be` o enlaces ya listos para iframe.
El boton SIGUIENTE tenia timing
No podia aparecer antes ni sentirse torpe. Hubo que cuidar el momento exacto en que la interfaz habilitaba continuar, para que el video se sintiera parte del ritual y no un bloque externo pegado al final.
Salida controlada del iframe
La transicion hacia el cierre exigia cortar visual y audio al abandonar el video. Ese borde entre iframe y epilogo fue tan importante como el embed mismo.
Memoria tecnica-creativa
El video cerraba sentido: confirmaba que todo lo previo conducia hacia un ultimo gesto audiovisual, personalizado y narrativamente medido.
SECCION 08
Audio y atmosfera
El sonido no adornaba la interfaz: la respiraba. Fue una capa narrativa completa, afinada entre tension, intimidad, inmersion y catarsis.
Hum
Un fondo casi fantasma que sostenia el clima de archivo activo.
Typing
El mas problematico y el mas sensible: ritmo, latencia, acumulacion y sincronizacion real con el texto.
Confirm
Pequeno gesto de afirmacion al validar o desbloquear etapas.
Glitch
Interferencia medida para cortes, alertas o cambios de fase.
Rising / prefinale
Construian la subida emocional antes del ultimo tramo.
Finale
La pieza de salida, pensada para abrazar creditos y epilogo.
Problemas reales de plataforma
Android, iPhone y Windows no respondian igual. iPhone fue especialmente duro con autoplay, lag y timing, obligando a refinar activaciones y cortes.
Afinar tambien era disenar
Buena parte del trabajo consistio en domar la tecnica para que el audio pareciera inevitable: sin metralla, sin desfases y sin traicionar la delicadeza del recorrido.
SECCION 09
Retos y aprendizajes
Esta experiencia tambien fue una bitacora de incidencias. Cada falla podia romper el tono, bloquear el flujo o sacar al usuario del ritual.
Lag en iPhone
El render y el audio no siempre llegaban a tiempo. Importaba porque destruia la inmersion. Se mitigaba simplificando timings, activaciones y peso percibido.
Typing desfasado
Cuando el sonido quedaba atras o se disparaba de mas, la escena perdia precision. Se ajustaron colas y disparos para evitar metralla sonora.
Fotos que no cargaban
Mayusculas, extensiones y nombres inconsistentes rompian la ficha personal. Se agrego tolerancia a varias variantes.
Botones invisibles
En ciertos layouts o estados, continuar podia no verse. Eso bloqueaba toda la secuencia. Se revisaron contrastes, z-index y cortes responsivos.
Scroll roto en movil
Los tramos largos necesitaban una fisica clara. Se ajustaron contenedores y alturas para evitar pantallas atrapadas.
Creditos ausentes
Si el final no aparecia, la obra quedaba sin exhalacion. Se corrigieron disparadores y transiciones de cierre.
Hum o video sonando de mas
El audio residual podia arruinar el epilogo. Se reforzaron pausas, limpiezas y salidas al cambiar de fase.
Errores JS y unauthorized
Una excepcion podia partir todo. El guard y la persistencia tenian que ser robustos para no dejar al usuario fuera o en estados imposibles.
Cache y hard refresh
Versiones viejas podian arrastrar comportamientos muertos. El aprendizaje fue convivir con cache real y pensar reinicios limpios.
SECCION 10
El panel admin
Detras de la experiencia habia una consola de control austera y poderosa: suficiente para gobernar el contenido sin perder velocidad operativa.
ROOT PANEL
ADMIN ACTIVE
root login
alias / full name
textos previos y posteriores
preguntas / expediente / foto
reset visto / reset total / copy defaults
Control centralizado
El admin reunia login root, lista de codigos, estados y todas las herramientas necesarias para editar la experiencia sin tocar manualmente cada flujo.
Operacion sencilla
El valor estaba en la simpleza: editar textos, expediente y preguntas; resetear visto o por completo; copiar defaults y mantener consistencia sin perder personalizacion.
SECCION 11
Creditos y cierre
El final del sitio no cortaba en seco. Descendia hacia unos creditos tipo pelicula, con logos, links y una sensacion de after-movie lenta y precisa.
finale / running
CODE.EZTRAM.CO
epilogo audiovisual
creditos verticales
logos EZ / AMR
barra vertical
links a Instagram
corte final / negro
SECCION 12
Conclusion / memoria
Code.eztram.co fue una experiencia web artistica y tecnica: personalizada, secuencial, intima y profundamente iterada. Esta pagina no intenta copiarla al milimetro; existe para recordar su forma, su logica y el cuidado extremo con el que fue construida.
No fue solo un sitio. Fue un archivo vivo, una pieza emocional y una maquinaria delicada donde cada detalle importaba.
Volver al inicio del archivo