progetti nephila deascuola

Nephila per De Agostini Scuola

Abbiamo accompagnato De Agostini Scuola nella creazione del suo ecosistema digitale: Deascuola.it

Il Cliente - De Agostini Scuola

De Agostini Scuola fa parte di De Agostini Editore, uno dei principali gruppi editoriali internazionali, il cui obiettivo è aiutare gli insegnanti e le famiglie a formare gli studenti di oggi e contribuire così alla società di domani. L’offerta editoriale di DeA Scuola spazia dalla Scuola Primaria all’Università, con proposte e cataloghi in tutte le aree disciplinari.

DeA Scuola e il suo sogno digitale

DeA Scuola è arrivata da noi con un desiderio, quello di creare un ecosistema digitale capace di raccogliere in un’unica solida struttura tutto l’universo De Agostini Scuola: l’ecosistema Deascuola.it. Non un semplice sito web ma un insieme di siti e piattaforme per facilitare in modo innovativo la fruizione dei contenuti per gli utenti di DeA Scuola.

Una sfida complessa in cui ha avuto un ruolo decisivo l’ambiente collaborativo del progetto, che ha visto cooperare il reparto digitale di DeA Scuola con partner esterni, e questi tra di loro. Deascuola.it è a tutti gli effetti un progetto che è nato passo dopo passo, in modo incrementale e si è evoluto insieme ai suoi partner, ognuno dei quali ha contribuito portando il proprio valore aggiunto.

Un desiderio, un ambiente di collaborazione, e infine dei requisiti tecnici, non troppo specifici, se non l’utilizzo di Django. Una fase delicata, quella della scelta delle tecnologie, in cui abbiamo affiancato DeA Scuola per decidere insieme le migliori soluzioni.


Perché abbiamo accettato la sfida?

Di fronte a questo quadro abbiamo scelto di dire sì, e di accettare questa prova sia di complessità tecnologica che di obiettivi. Affrontare le difficoltà, farle dialogare e riuscire a creare un prodotto nuovo e innovativo è il nostro modo di crescere con l’obiettivo di gestire progetti sempre più complessi e sfidanti.


Perché ci siamo scelti?

Ci siamo scelti perché DeA Scuola per il suo ecosistema digitale ha deciso di adottare cometecnologia di base Django, e noi siamo sviluppatori Django da ormai più di dieci anni. Una struttura così complessa ha bisogno di una tecnologia solida per stare in piedi, e Django è stata la soluzione più convincente.

La nostra metodologia di lavoro è un altro dei motivi per cui ci siamo scelti. Lavoriamo in Agile e questo ha permesso, a noi e a DeA Scuola, di lavorare in modo incrementale e iterativo, implementando un elemento di progetto alla volta e definendo le specifiche tecniche in corso d’opera.


Cosa abbiamo fatto per DeA Scuola

Un sistema di navigazione personalizzata

Per Deascuola.it abbiamo realizzato un sistema di navigazione personalizzata in base ai suoi utenti: docenti, famiglie e studenti. La navigazione varia in base al ruolo dell’utente che naviga il sito offrendo sia contenuti che funzionalità diverse in base agli interessi specifici. Su Deascuola.it lo studente non vede quello che vede il docente e viceversa, e tutto ciò che è risorsa digitale è calibrato sulle esigenze dei singoli utenti.

Homepage di Deascuola.it
Sezione Docenti Primaria di Deascuola.it

Scopri i dettagli tecnici

Creare un sistema di navigazione personalizzata richiede molta energia a livello backend; energie che abbiamo investito per creare una soluzione applicativa adeguata. Su deascuola.it, l’utente può registrarsi come insegnante, genitore o studente e sono queste classi di utenti che ci permettono di identificarlo e personalizzare interfaccia e funzionalità a seconda dei vari ruoli. Non solo, per la personalizzazione degli acquisti e del download dei materiali abbiamo dovuto gestire la corretta interazione con i servizi esterni su cui si basano queste funzionalità, tenendo conto delle tecnologie di scambio dati che utilizzano (REST API).

Abbiamo dovuto prevedere ogni casistica, compresa quella in cui sul sito arrivino nuovi utenti. La soluzione è stata chiara: creare un percorso di navigazione personalizzato anche per loro. Una soluzione che ci ha posto davanti a una sfida, quella di creare un header generico da mostrare solo su alcune specifiche pagine. Si tratta di un’implementazione che unisce sviluppo backend e frontend ma che il nostro team ha saputo affrontare efficacemente, non senza qualche rompicapo di codice a cui far fronte.

Affrontate e superate queste implementazioni, abbiamo dovuto trovare un modo per consentire alle redazioni De Agostini di lavorare autonomamente sui contenuti e sulla loro visualizzazione per classe di utenti; abbiamo optato per django CMS che permette agli editor di aggiornare i contenuti e scegliere per quali utenti renderli accessibili.

django CMS per l’editing dei contenuti

Un ecosistema digitale ha bisogno di essere popolato da contenuti sempre freschi e aggiornati. Abbiamo fornito a DeA Scuola un backoffice dall’interfaccia semplice ed intuitiva, cucito ad hoc sulle loro specifiche esigenze editoriali, da cui aggiornare in autonomia e in modo efficiente le risorse digitali.

Scopri i dettagli tecnici

Per permettere a DeA Scuola un editing dei contenuti efficace ed efficiente, e di agire direttamente sulla visualizzazione dei contenuti, abbiamo dovuto lavorare molto su django CMS, in modo da modellarlo sulle loro specifiche esigenze. Molte delle nostre energie sono state assorbite dalla riscrittura del codice di una parte essenziale di django CMS stesso per adattarlo alla struttura per classi di utenti, e quindi alla navigazione personalizzata.

Con l’obiettivo di facilitare il lavoro delle redazioni De Agostini abbiamo calibrato l’implementazione di tutte queste funzionalità sulle loro specifiche esigenze editoriali, in modo che riflettessero il loro naturale processo di editing. La necessità di dare loro la maggiore libertà possibile nella modifica dei contenuti, ad esempio si è tradotta in un processo di aggiornamento dei contenuti che avviene in uno specifico ambiente di pre-produzione, le cui modifiche vengono poi aggiornate sul sito online solo in un secondo momento, a modifiche ultimate e su conferma di De Agostini Scuola. È stata una feature sudatissima, dati i tanti modi diversi e fantasiosi in cui la sincronizzazione tra i due database può fallire, ma che abbiamo fronteggiato sempre pronti a gestire ogni piccolo imprevisto di backend.

E ancora, al bisogno di replicare i contenuti delle pagine CMS in modo fedele al Design System - ma anche ad elementi in esso non presenti - abbiamo risposto con l’implementazione di tutta una serie di plugin django CMS diversi tra loro e volti a riprodurre ogni tipo di elemento di design presente nel Design System, come questo:

Un contenuto riprodotto con un plugin django CMS

Una delle soluzioni che abbiamo implementato e ha agevolato maggiormente il lavoro delle redazioni De Agostini Scuola è l’aggiornamento automatico delle pagine che prevedono gli stessi contenuti per ogni classe di utente; in pratica, alla modifica di una sola pagina CMS corrisponde l’aggiornamento di ben tre pagine CMS. Un’ottimizzazione del lavoro non banale per chi ogni giorno deve aggiornare i contenuti di un sistema digitale complesso come Deascuola.it.

Una efficace sincronizzazione con i servizi esterni

Deascuola.it è un ecosistema digitale innovativo che offre numerosi servizi, contenuti e strumenti al suo pubblico con l’obiettivo di creare un’esperienza utente ottimale. Parliamo, ad esempio del motore di ricerca interno, dell’acquisto degli e-book o l’autenticazione centralizzata.

Per offrire queste funzionalità, l’infrastruttura del sito deve costantemente scambiare dati con i servizi esterni di cui si serve: in alcuni casi, riceve i dati e in altri deve recuperarli. Abbiamo impiegato, e impieghiamo ogni giorno, le nostre energie di sviluppo backend affinché infrastruttura e servizi siano costantemente allineati e l’utente navighi Deascuola.it senza intoppi.

Scopri i dettagli tecnici

Questa area di progetto abbraccia tutto il lavoro che abbiamo svolto sulle REST API per lo scambio di informazioni tra l’infrastruttura e i suoi servizi esterni. Entriamo nel dettaglio per scoprire tutte le integrazioni che abbiamo sviluppato.

Integrazione con il catalogo editoriale De Agostini Scuola

Su questa integrazione si basa il sistema di navigazione del sito (Menu Node), oltre che l’aggiornamento dei contenuti che avviene quotidianamente. Abbiamo lavorato sull’interazione dell’infrastruttura con il sistema interno di gestione catalografica di De Agostini Scuola e implementato una procedura che permette alla redazione di inviare automaticamente e in tempo reale le modifiche al sito direttamente dal software interno. Per l’invio dei dati dal sistema di gestione del catalogo interno al sito Deascuola.it ci siamo basati sul meccanismo di Amazon Lambda mentre per il resto abbiamo scritto codice ad-hoc.

Integrazione con il sistema di Single Sign On (SSO)

Anche per l’autenticazione centralizzata abbiamo dovuto gestire le interazioni con un sistema esterno di Single Sign On (SSO), implementato da terze parti. L’autenticazione SSO è stata creata per uniformare tutti i servizi di Deascuola.it e facilitare la vita dell’utente che con una sola registrazione può accedere a tutto l’universo digitale DeA Scuola. Per supportare questa funzionalità abbiamo sviluppato l’integrazione per Django del sistema SSO e creato codice ad hoc che implementiamo in tutte le piattaforme digitali De Agostini Scuola che usano Django, come Lettere e Didattica e Deaformazione.it.

Attivazione degli ebook e gestione delle licenze

Per licenze, intendiamo l’attivazione degli ebook o di altre risorse digitali associate ai libri di testo acquistati dagli utenti, utile a sbloccarne la fruizione. È una funzionalità che segue logiche di backend piuttosto complesse a causa dell’associazione utente, libro e risorsa che non avviene su Deascuola.it stesso ma su un sistema esterno. Da questo deriva una pesante interazione di sistemi che devono essere costantemente mantenuti sincronizzati affinché gli utenti visualizzino nella propria area personale ciò che si aspettano di vedere, ossia i contenuti che hanno acquistato e le risorse associate ad un proprio libro.

Un menu di navigazione generato dal catalogo editoriale DeA Scuola

Abbiamo generato i menu di navigazione a partire dal catalogo editoriale di DeA Scuola, il vero e proprio fulcro delle risorse digitali e dei servizi di Deascuola.it. Grazie all’implementazione del sistema dei Menu Node, gli editor di DeA Scuola possono associare a una pagina CMS una precisa area del catalogo così che l’utente cliccando sulla voce “Narrativa italiana” possa visualizzare tutti i libri che nel catalogo sono associati a quella categoria. Tutto è a portata di menu!

Le sezioni Famiglie e Studenti di Deascuola.it sono interamente costruite con il sistema Menu Node mentre l’area Docenti richiama totalmente il catalogo.

Scopri i dettagli tecnici

Per portare a casa questa implementazione, a livello di sviluppo abbiamo dovuto superare la tradizionale gestione dei menu in django CMS e riscriverla per permettere alla piattaforma di gestione dei contenuti di interagire con dati che le redazioni De Agostini Scuola possono gestire dall’interfaccia di amministrazione: è in questo modo che gli editor possono fare le dovute associazioni tra catalogo e pagine CMS. Non solo, per richiamare i contenuti giusti alle rispettive voci di menu abbiamo dovuto operare sulle view di Django e riscriverne la gestione. Grazie a questa implementazione la piattaforma ha fatto un ulteriore salto di qualità consentendo agli editor una gestione dei contenuti ancora più libera e indipendente.

Un frontend basato sul Design System

Per sviluppare l’area frontend di Deascuola.it ci siamo basati su uno strumento innovativo come il Design System: un insieme di regole, linee guida e veri e propri blocchi di codiceche definiscono il design complessivo di un ecosistema digitale. Si tratta di un “linguaggio” condiviso e unificato che riflette l’identità del brand Deascuola.it e su cui dovranno basarsi tutti i futuri spazi web e servizi che verranno inclusi nell’ecosistema.

Dettagli di design su Deascuola.it
Deascuola.it - Dettaglio pulsante

Scopri i dettagli tecnici

Il Design System è un insieme di regole e linee guida(spazi, colori, bordi e fonts) - blocchi di codice ed elementi grafici - che definiscono il design complessivo di un ecosistema digitale, con l’obiettivo di creare una brand identity coerente, tenendo conto della multicanalità con cui al giorno d’oggi l’utente si muove nel web. Data la complessità di Deascuola.it, definire a monte il design della piattaforma e creare un “linguaggio” condiviso e unificato è stato un passaggio fondamentale, soprattutto in ottica di una sempre maggiore espansione ed evoluzione dell’ecosistema: Deascuola.it accoglierà nuovi spazi web e servizi che dovranno essere coerenti e riconoscibili.

Elementi di design su Deascuola.it

Il Design System di Deascuola.it è stato sviluppato da un’agenzia specializzata esterna (Sketchin) ed è stato realizzato con Vue.js, unframework scritto in linguaggio Javascript, che noi abbiamo suggerito in quanto flessibile, di semplice utilizzo e perché permette una integrazione più naturale con Django.

Sebbene il Design System sia stato sviluppato da terze parti, abbiamo dovuto, durante lo sviluppo del progetto, lavorarci sopra per integrarlo con nuovi elementi - avendo cura di mantenere l’armonia d’insieme -, correggerlo dove necessario e rifattorizzarlo per mantenere il codice chiaro ed evitare il rischio di possibili bug.

I vantaggi per DeA Scuola e per l’utente

  • Un sistema di editing dei contenuti cucito ad hoc sulle proprie esigenze;
  • Un sistema di navigazione di contenuti e funzionalità personalizzata;
  • Un ecosistema che offre funzionalità e strumenti innovativi;
  • Un Design System a cui rimanere fedeli e che rispecchia la brand identity di DeA Scuola;
  • Un’infrastruttura di backend solida su cui poter fare affidamento.

Ci siamo distinti perché…

Abbiamo sfruttato le potenzialità di django CMS per modellarlo sulla base delle esigenze del cliente. Abbiamo riscritto una parte essenziale del software per adattarlo al sistema di navigazione personalizzato, e adattato le sue funzionalità per l’inserimento dei contenuti sullo specifico workflow di editing di DeA Scuola;

Lo sviluppo backend è l’area della programmazione in cui riusciamo a dare il meglio. Abbiamo messo a frutto le nostre competenze per la gestione dell’infrastruttura e delle sue interazioni con i servizi remoti e garantire solidità al sistema digitale Deascuola.it;

Ci siamo presi cura del Design System. Lo abbiamo migliorato, corretto e integrato.

Il sogno digitale di Deascuola.it è in costante divenire. L’ecosistema digitale di DeA Scuola accoglierà nuovi ambienti web e offrirà sempre più servizi e noi stiamo lavorando in questa direzione insieme a De Agostini Scuola.