PROGETTAZIONE E SVILUPPO DI UN AMBIENTE CANVAS WEB-BASED PER LA GENERAZIONE SEMPLIFICATA DI PAGINE WEB

This thesis describes the design and development process of an interactive page editor, aimed at the creation and customization of web pages in a visual way, without the need for prior programming knowledge. The implementation of the project is primarily based on the JavaScript language, supported by modern frameworks and libraries to ensure a smooth user experience and a modular architecture. In particular, React was used for state and user interface management, while Craft.js enabled the integration of drag-and-drop functionality for the dynamic placement of components. The Material UI library was employed to build the various interface elements, contributing to a consistent and customizable design. The thesis analyzes in detail the main challenges faced during the development of the web app, including layout management, saving and loading the page state through component serialization mechanisms in HTML format, and adapting the drag-and-drop functionality to the different available layouts. Special attention was also given to the customization options of the components themselves, in order to provide a flexible tool that can be adapted to the user's needs. The goal of the project is to provide an intuitive and modular platform that allows the user to compose their web page using a block-based system, while ensuring both creative freedom and ease of use. The result is an editor that is accessible even to non-technical users, capable of combining ease of interaction with expressive potential.

La presente tesi descrive il processo di progettazione e sviluppo di un page editor interattivo, pensato per la creazione e personalizzazione di pagine web in modo visuale, senza la necessità di conoscenze pregresse in ambito di programmazione. L’implementazione del progetto si basa principalmente sul linguaggio JavaScript, affiancato da framework e librerie moderni per garantire un’esperienza utente fluida e un’architettura modulare. In particolare, React è stato utilizzato per la gestione dello stato e dell’interfaccia utente, mentre Craft.js ha permesso l’integrazione di funzionalità di drag-and-drop per il posizionamento dinamico dei componenti. La libreria Material UI è stata impiegata per la costruzione dei vari elementi dell’interfaccia, contribuendo a un design coerente e personalizzabile. La tesi analizza in dettaglio le principali sfide affrontate durante lo sviluppo della web app, tra cui la gestione del layout, il salvataggio e il caricamento dello stato della pagina attraverso meccanismi di serializzazione dei componenti in formato HTML, e l’adattamento delle funzionalità di drag-and-drop ai diversi tipi di layout disponibili. Particolare attenzione è stata dedicata anche alla possibilità di personalizzazione dei componenti stessi, al fine di offrire uno strumento flessibile e adattabile alle esigenze dell’utente. L’obiettivo del progetto è fornire una piattaforma intuitiva e modulare che consenta all’utente di comporre la propria pagina web mediante un sistema a blocchi, garantendo al tempo stesso ampia libertà creativa e semplicità d’uso. Il risultato è un editor accessibile anche a utenti non tecnici, capace di unire semplicità d’interazione e potenzialità espressive. traduci in inglese