Sincronizza diapositive di presentazione basate sul Web con Impress.js e Impressr [Quicktip]

Ho tenuto discorsi sullo sviluppo Web e WordPress in alcune università e scuole e un problema comune che mi viene in mente durante una presentazione è che il pubblico vicino al retro della folla difficilmente può vedere le mie diapositive. Ci ho pensato: come posso rendere più chiare le diapositive della presentazione, ma mantenere l'oratore e i partecipanti sulla stessa pagina?

Ho trovato una soluzione che consente al pubblico di guardare le diapositive della presentazione sul proprio dispositivo e un modo per sincronizzare i contenuti delle diapositive sui propri dispositivi, con quello che voglio passare mentre sono sul palco. Ecco come farlo.

Creare le diapositive

Per fare ciò, invece di Keynote o PowerPoint, dobbiamo invece creare la diapositiva con Impress.js.

Impress.js ti consente di creare diapositive di presentazione basate sul Web e include effetti di animazione più impressionanti di quelli che puoi trovare su Keynote o PowerPoint. In effetti, se sei una persona esperta di CSS3, puoi creare la tua animazione personalizzata (prova la demo qui).

"Ma cosa succede se non capisco CSS, JavaScript e HTML?"

Quindi, puoi utilizzare Strut, un'applicazione basata sul Web per creare le tue diapositive Impress.js con la GUI . L'app è ancora in beta al momento, ma funziona bene. È possibile inserire testo, immagini o video trascinandoli, come Keynote o PowerPoint. Puoi anche cambiare lo sfondo, i colori, la famiglia di caratteri e le sue dimensioni.

Dopo aver creato le diapositive della presentazione, puoi fare clic sul grande pulsante verde sul lato destro che dice Impress . Quindi premere Comando + S (Ctrl + S in Windows) per salvare le diapositive.

Sincronizzazione di diapositive

Ora faremo sincronizzare le diapositive. L'idea di usare Impress.js per costruire le diapositive è di consentire l'accesso alle diapositive su laptop o dispositivi mobili. Il pubblico può anche avere una visione ravvicinata e persino interagire con le diapositive. Mentre scorri tra le diapositive, le modifiche apportate alle diapositive (come il passaggio alla diapositiva successiva) si rifletteranno sui loro dispositivi in ​​tempo reale.

Per fare ciò, hai bisogno di una libreria JavaScript chiamata Impressr.js. Questa biblioteca è stata pubblicata due anni fa. Anche così funziona ancora bene ed è molto facile da usare. Scarica la libreria, quindi aggiungi il seguente all'interno del tag head .

Quindi, aggiungere quanto segue per inizializzare Impressr.

 $ ("# slide-container"). impressionR ({proxyName: 'presentation'}); 

Assicurati di selezionare l'elemento corretto che avvolge immediatamente le diapositive. L'opzione proxyName può essere impostata su qualsiasi cosa purché sia ​​una stringa (testo normale).

Ora la diapositiva dovrebbe sincronizzarsi in tempo reale su ogni dispositivo con la tua presentazione aperta. Si noti che tutti i dispositivi richiedono di essere connessi alla stessa rete . Per testarlo, puoi aprire la diapositiva in due diversi browser. Qui, ad esempio, ho aperto la diapositiva in Chrome e Firefox.

Puoi anche provarlo su dispositivi mobili.

Apri Browser e client di posta elettronica a tua scelta con Bumpr

Mac: per quelli di noi che utilizzano più browser e client di posta elettronica, arriva un momento in cui lo scambio di clienti e browser può rivelarsi estremamente scomodo.Tuttavia, se si esegue un macOS, i problemi di hopping del browser / client possono essere risolti con una singola app denominata " Bumpr " .D

(Consigli tecnici e di design)

10 migliori strumenti video per rendere facilmente video avvincenti

Un'immagine parla più forte delle parole, ma ciò che parla ancora più forte di un'immagine è un video avvincente. Sia che tu abbia bisogno di creare video animati per organizzare la tua attività o di realizzare un montaggio video per giocare al matrimonio del tuo amico, non è necessario assumere un professionista purché siano disponibili strumenti di creazione di video interessanti.Esisto

(Consigli tecnici e di design)