Lo que ocurre
detrás.
Dos casos principales sobre edición visual e integración de datos. Un tercero, más acotado, muestra la separación entre cifrado y autorización.
Explorar los casos ↘Un mismo documento, tres representaciones.
Frame conecta un árbol de componentes editable, su representación visual y el código exportado. Los cambios en una de estas capas no deberían alterar el resultado en las otras.
Documento editable
Árbol de nodos y propiedades que definen los componentes y su composición.
Canvas y responsive
Interacción, medidas y vistas que representan el estado editable.
Generación de código
Convertir el documento en una página exportable y contrastarla con el canvas.
- Al redimensionar elementos o moverlos entre contenedores pueden aparecer desplazamientos y cambios de tamaño inesperados. El canvas y el código exportado también pueden interpretar un mismo diseño de forma diferente.
- Separar el estado y la estructura de nodos del documento de su representación en el canvas y de su transformación a código. Revisar tamaños, posiciones y comportamiento responsive en ambas salidas.
- El editor ya conecta la manipulación de nodos, las vistas responsive y la generación de páginas exportables. Verifico la equivalencia entre el documento, el canvas y el resultado generado.
La implementación de Frame es privada; la exposición técnica se centra en el modelo de documento, las transformaciones y la fidelidad entre representaciones.
export function DemoBlockRenderer({
block,
selectedId,
onSelect,
assetUrls = {},
editorInteraction,
}: {
block: DemoBlock;
selectedId?: string;
onSelect?: (blockId: string) => void;
assetUrls?: Record<string, string>;
editorInteraction?: DemoEditorInteraction;
}) {
const base = block.style;
const tablet = {
...base,
padding: Math.min(base.padding, 36),
gridColumns: Math.min(base.gridColumns, 2),
...block.responsive.tablet,
};
const mobile = {
...tablet,
padding: Math.min(tablet.padding, 24),
gridColumns: 1,
...block.responsive.mobile,
};
const automaticText = automaticTextStyle(block);
const childLayoutDisplay = block.type === "Grid" ? "grid" : "flex";
const style = {
...responsiveVariables("base", base, automaticText, childLayoutDisplay),
...responsiveVariables("tablet", tablet, automaticText, childLayoutDisplay),
...responsiveVariables("mobile", mobile, automaticText, childLayoutDisplay),
} as CSSProperties;De una fuente de datos externa a una herramienta de consulta.
El panel reúne convocatorias de financiación europea y permite examinarlas, filtrarlas y exportar resultados.
API externa
Consultar convocatorias de financiación europea.
Tratamiento de datos
Normalizar y categorizar los campos relevantes.
Exploración
Facilitar búsqueda, filtros, exportación y persistencia selectiva.
- Una fuente externa puede ofrecer información abundante y heterogénea. Para que sirva en una aplicación hay que consultar los datos, normalizarlos, presentar campos coherentes y proporcionar formas de encontrar registros relevantes.
- Resolver la consulta en una API Node/Express y presentar los resultados en una interfaz con búsqueda, filtros y paginación. Complementar el flujo con persistencia PostgreSQL para empresas y niveles de interés.
- La aplicación integra una API externa de convocatorias, ofrece filtros y exportación CSV/Excel e incorpora persistencia para empresas e intereses. Enlaces al código público disponibles a continuación.
Código público: las rutas de consulta, interfaz y persistencia pueden contrastarse en los archivos enlazados. La clasificación se basa en reglas, no en un modelo de IA.
Cifrar información no sustituye autorizar su acceso.
Una aplicación de notas necesita distinguir entre proteger contenido y restringir qué registros puede consultar cada usuario.
Cliente
Cifrar el contenido de la nota en el navegador.
Autenticación API
Identificar al usuario y delimitar sus operaciones.
PostgreSQL
Consultar registros limitados al usuario correspondiente.
- El cifrado y la autorización actúan en capas diferentes. El contenido podría estar cifrado y aun así existir un fallo de acceso a los registros de otro usuario.
- Mantener el cifrado del contenido en el cliente y asociar las consultas de la API al usuario autenticado.
- Las operaciones de lectura, actualización y borrado utilizan el identificador del usuario para limitar los registros relevantes.
Caso más pequeño: repositorio público con rutas de notas y lógica de cifrado en cliente. Es una implementación de aprendizaje, no una auditoría de seguridad.
Podemos hablar de software, datos e ideas.
Si mi perfil encaja con un proyecto o quieres conocer mejor alguna de las decisiones detrás de mi trabajo, puedes escribirme o consultar mis repositorios públicos.