Direkt zum Inhalt springen

17.05.2017 | Ralf Hettinger

Microsito TYPO3: "Divertimento creativo"

Per la nuova edizione 2016/2017 dell'opuscolo Gutes Aufwachsen mit Medien - Ein Netz für Kinder (Crescere bene con i media - Una rete per bambini) del Ministero Federale per la Famiglia, gli Anziani, le Donne e la Gioventù, abbiamo progettato e sviluppato il microsito Kreativer Spielspaß (Divertimento creativo) per i bambini dai 4 ai 10 .

Il progetto è stato commissionato dal nostro cliente jugendschutz.netche ha creato l'opuscolo e ne ha supervisionato il contenuto.

Al microsito:
www.surfen-ohne-risiko.net/kreativ

Storia del progetto

Agosto 2016

Il progetto inizia con una sessione di brainstorming dei partecipanti coinvolti. A parte l'idea del cliente, ancora piuttosto astratta in termini di contenuti, di poter rendere accessibili le offerte creative online per i bambini in un sistema di catalogo online, per ora si conosce solo la data approssimativa della messa in funzione: La nuova edizione dell'opuscolo "Crescere bene con i media - una rete per i bambini" del Ministero federale per la Famiglia, gli Anziani, le Donne e la Gioventù sarà pubblicata al più tardi a novembre 2016. Dal momento che il microsito verrà citato nel documento, deve essere già online. 

I requisiti del quadro sono

  • Adesione alla guida di stile dell 'iniziativa "Crescere bene con i media".
  • Accesso ludico e strutturato per i gruppi target genitori ed educatori, ma non troppo ludico.
  • Presentazione attraente su tutti i dispositivi, in particolare sugli smartphone.

In stretta collaborazione con il nostro partner di design Kontext Kommunikation, sviluppiamo i concetti di base per la guida dell'utente e il funzionamento. Dopo l'approvazione del cliente, creiamo i wireframe. Questi passano attraverso un ciclo di correzione e vengono rilasciati dal cliente. Il partner di progettazione inizia a progettare il layout secondo le nostre specifiche alla fine di agosto.


Settembre 2016

Il progetto prende forma. Importante per ridurre al minimo i risultati inattesi: Il cliente ci fornisce dati reali per i contenuti, in modo da non dover lavorare con contenuti di esempio nel layout. Le icone sono state create secondo l'IC dell'iniziativa Gutes Aufwachsen mit Medien. I colori, le forme, i caratteri e le immagini dei contenuti sono organizzati.

Parallelamente, inizia lo sviluppo: il backend del sistema TYPO3 esistente di Surfen ohne Risiko, in cui sarà tecnicamente collocato il microsito, viene completato per la manutenzione dei dati e inizialmente riempito per i test. I prototipi front-end per la guida utente insolita del concetto di navigazione da tavolo sono programmati per escludere le incertezze sulla fattibilità.


Ottobre 2016

Il layout viene rilasciato. L'implementazione del singolo frontend può ora iniziare in modo mirato. Durante l'implementazione, vengono concordati con il cliente i dettagli finali relativi alla funzione del filtro. 


Novembre 2016

L'8 novembre 2016, il microsito preliminare viene completato e il contenuto riempito al punto che siamo soddisfatti. Dopo un breve test, anche il cliente trova il risultato buono. Viene effettuato un beta test: Il cliente inoltra il microsito preliminare a persone selezionate per il test. Il feedback è generalmente molto positivo.

Vengono individuati e corretti alcuni errori finali e vengono inserite tecnicamente alcune nuove funzionalità suggerite dai collaudatori. Dato che nelle ultime settimane abbiamo anche familiarizzato con gli obiettivi di contenuto del cliente, forniamo anche un supporto editoriale con l'obiettivo di rispettare le scadenze: ci scambiamo le singole immagini e i testi per ottenere un quadro generale coerente in termini di contenuti.

Il microsito sarà online il 29.11.2016.

Servizi

  • Concetto:
    • Tradurre l'idea di contenuto in concetti operativi innovativi (navigazione delle pagine e funzione di ricerca)
    • Creazione di wireframe
  • Coordinamento:
    • Impostazione e monitoraggio del calendario
    • Coordinamento del partner di progettazione
    • Coordinamento con il team editoriale del cliente
    • Accompagnamento delle correzioni e delle approvazioni
  • Implementazione tecnica:
    • Creazione di un backend editoriale nel sistema TYPO3 esistente
    • Implementazione dell'output con estensione TYPO3 programmata individualmente e basata su Extbase (filtri, elenchi, pagine di dettaglio)
    • Programmazione jQuery nel frontend. Concentrarsi sull'usabilità tecnica (ad es. funzioni di filtro) e sulle prestazioni (ad es. ricarica della pagina AJAX).
    • Realizzazione di un layout completamente scalabile: design web reattivo che si adatta fluidamente alla rispettiva larghezza ealtezza .
    • Parole d'ordine:
      SVG-Sprite, AJAX, Extbase, CSS inline above-the-fold, tipografia a dimensione Viewport, Design reattivo verticale