Una web app per gestire le videoproiezioni di un evento TEDx

Durante quest’anno di pandemia ho avuto occasione di collaborare all’organizzazione di un evento TEDx nel mio paese, Leverano (LE). TEDx è un format americano che consiste in una giornata durante la quale si susseguono sul palco diversi personaggi, ciascuno dei quali porta sul palco uno speech di massimo 20 minuti riguardante scienza, spettacolo, arte, idee innovative, ricerche o un progetti. Alcuni TEDx talks sono diventati celebri con gli anni ed oggi il nome di TED è molto rispettato in tutto il mondo, diventando di fatto un marchio di qualità per i contenuti. E’ nato cosi TEDxLeverano, pensato ed organizzato tra una trentina di amici, ciascuno con il suo ruolo più o meno definito. Nonostante le difficoltà iniziali, l’evento, che si è svolto il 13 Giugno 2021, è stato un successone! 😁

Io mi sono occupato inizialmente della realizzazione della pagina web associata all’evento (della quale parlo in quest’articolo), successivamente sono passato alla parte di produzione tecnica occupandomi di grafica e proiezioni su megaschermo. Oggi vi parlo del progetto che ho realizzato per poter gestire le slide, sviluppato ad hoc per quest’occasione.

Un’app web per le grafiche proiettate

La scaletta dell’evento era divisa in due blocchi intervallati da un break, ciascuno dei quali comprendeva diversi talks. Il mio progetto consiste in un’applicazione per gestire i contenuti inviati al proiettore, come ad esempio slides, sigle, presentazioni, tappi, overlay e video a schermo intero.

Data la mia inesperienza nel settore dei software per la gestione di contenuti visivi, ho optato per la creazione di un progetto web (ambito in cui mi sento confidente) che comprendesse tutte le funzionalità per mandare “in onda” sullo schermo i contenuti dell’evento. Questo per diversi motivi:

• La grafica ottenuta da un’app web può contenere lo stesso layout pubblicato dal sito web. In questo modo ho portato sul megaschermo lo stesso concept grafico realizzato sul sito web con un semplice copia-incolla delle strutture HTML-SVG-CSS senza riscriverle in altri linguaggi o in altri software grafici. Questo mi ha permesso di riutilizzare le mie competenze web in un contesto diverso.
• L’interattività del cambio-slide e le transizioni da una schermata all’altra possono essere tranquillamente affidate ad una buona dose di CSS transitions
• Alcuni motivi grafici piu complessi possono essere sviluppati tramite SVG
• Il “loop” di alcune animazioni è fattibile usando CSS animations con la proprietà infinite o alternate
• L’architettura del progetto consente il riuso dei template grafici (ad esempio sigle diverse con lo stesso layout)
• Per l’interazione e il richiamo delle strutture grafiche, basta implementare poche righe di Javascript programmando lo swich delle schermate alla pressione di un tasto sulla tastiera,
• Si possono eseguire i suoni contemporaneamente al richiamo di una schermata.
• Si possono eseguire video in autoplay e senza controlli tramite semplice tag html “<video>”
• L’app essendo hostata sul computer personale, non necessita di installazione
• le dimensioni dei font su schermo e/o su proiettore si possono regolare “on the fly” con i semplici comandi zoom-in e zoom-out del browser.

Architettura

Ti allego qui uno schema del setup che ho utilizzato per le proiezioni. La web app era avviata in schermo intero su un computer personale, divisa in vari layout ereditati da specifiche viste richiamabili alla pressione di un tasto della tastiera. Facendo un semplice mapping, ad ogni tasto corrisponde un evento proiettato.

Il progetto web

Ecco invece come si presenta il progetto della web app, sviluppata con poche righe di Javascript + PHP.

Il core dell’applicazione si basa su un file index.html che funge da wrapper per tutte le schermate, all’interno del quale vengono ereditati gli stili CSS globali del progetto. La vista desiderata viene caricata tramite questa funzione JS, che ne eredita successivamente anche il singolo CSS allegato:

    function loadHome(layout, param1, param2) {
        (window.event)?.preventDefault();
        document.getElementById("content").classList.add("faded");
        setTimeout(() => {
            document.getElementById("content").classList.remove("faded");
            fetch("screen_" + layout + ".php?param1=" + param1 + "&param2=" + param2)
                .then((response) => response.text())
                .then((html) => {
                    document.getElementById("content").innerHTML = html;
                })
                .catch((error) => {
                    console.warn(error);
                });
        }, 600);
    }

questa è la funzione principale di “load” della singola schermata, caricata con una chiamata Fetch. Il contenuto della schermata viene iniettato all’interno del div con id “content”. Questa funzione viene richiamata piu volte poi sull’evento di onkeyup della tastiera in base alla risorsa grafica voluta, passando eventualmente anche dei parametri param1 e param2.

   document.addEventListener('keyup', (event) => {
        var name = event.key;
        switch (name) {
            case 'a':
                loadHome('tappo');
                break;
            case 's':
                loadHome('partners');
                break;
            case 'd':
                loadHome('innovation');
                break;
            case 'f':
                loadHome('grazie');
                break;
            case 'g':
                loadHome('video', 'video1.mp4');
                break;
            case 'h':
                loadHome('video', 'video2.mp4');
                break;
            case 'q':
                loadHome('art');
                break;
            default:
                break;
        }
    }, false);

Risultato

Ecco un test casalingo del setup e del richiamo delle schermate con transizioni:

Alcune fotografie dell’evento