Crea Slider e Presentazioni con Reveal.js

Molte volte quando abbiamo bisogno di fare uno slider o una presentazione di diapositive utilizziamo software come Powerpoint o Prezi, attualmente ci sono molti framework che ci permettono di fare questo tipo di presentazioni utilizzando la tecnologia Html5, Jquery e Css 3.

Il vantaggio è che può essere visualizzato in qualsiasi browser, su qualsiasi sistema operativo e persino utilizzato nelle applicazioni per dispositivi mobili.

Reveal è un framework sviluppato in Javascript che fornisce funzionalità per creare slider e presentazioni con funzionalità che consentono di gestire e manipolare le diapositive, esportazione PDF, possibilità di controllare il tempo, la navigazione e gli effetti di ogni diapositiva.

Reveal è una libreria gratuita E ha il grande vantaggio che possiamo programmare, connetterci a database o includere in qualsiasi applicazione che supporti Html e Javascript, cosa che il software più popolare non può fare.

Sviluppare con Reveal è facile e dobbiamo solo conoscere Html e Js, per iniziare a creare una presentazione dobbiamo scaricare la libreria Reveal.js dal sito ufficiale.

Quindi decomprimiamo i file zip per avviare il tutorial. Inizieremo con un Semplice esempio per testare Reveal.js.

Dalla directory che abbiamo decompresso, copiamo le cartelle css, js, plugin e lib nella nostra cartella Example01. Queste cartelle contengono tutte le librerie necessarie per creare la nostra presentazione.

Quindi creeremo uno slider con due immagini e testo, dove puoi navigare automaticamente o tramite tastiera. Sarà il seguente:

Il codice sorgente è il seguente:

 Reveal.js Esempio 01
Auto sportiva


Visita il nostro sito web
CONSULTARE

Il framework Reveal ci fornisce diversi temi o design css che possiamo trovare nella cartella css e cambiando la linea del tema, possiamo cambiare il design.

Applichiamo il tema Beige e visualizziamo con l'emulatore del dispositivo mobile in Firefox e possiamo vedere che la libreria è incaricata di creare un design adattivo.

Il funzionamento dello slider è fornito dal codice Javascript:

Se vogliamo che lo slider si muova in automatico, indicheremo il tempo di transizione in millisecondi con il parametro autoSlide, in caso di non utilizzo dovrà essere spostato con le frecce utilizzando la tastiera o il mouse.

Gli sviluppatori Web utilizzano questo tipo di libreria per mettere da parte gif.webp, flash e altri formati di animazione, questo tipo di framework consente anche di utilizzare lo slider per il seo poiché il testo è indicizzabile. Possiamo anche usarlo sia online che offline per mostrare la nostra presentazione da una pendrive o da un cellulare, utilizzando qualsiasi browser.

Il framework Reveal.js è costituito da un singolo file JavaScript e due file di fogli di stile. Il primo foglio di stile, reveal.css definisce alcuni stili comuni, mentre il secondo contiene il design di un tema standard, possiamo anche aggiungere un terzo foglio di stile con le nostre classi.

Questo tema definisce l'aspetto delle parti importanti delle presentazioni, in quanto sono presenti testo, immagini e collegamenti.

Possiamo utilizzare insieme a Reveal.js altre librerie come CSS 3D o WebGL.

Il Rivela quadro Consente di utilizzare vari plug-in e parametri di configurazione per migliorare l'esperienza dell'utente. I parametri di configurazione che più ci interesseranno sono:

controlliQuesto parametro indica che le frecce di direzione vengono mostrate per navigare tra le nostre diapositive, se non indichiamo nulla, appare per impostazione predefinita. Può assumere il valore vero o falso.

progressoVisualizza una barra di avanzamento man mano che la presentazione avanza. Può assumere il valore vero o falso.

numero diapositivaMostra il numero della diapositiva corrente. Può assumere il valore vero o falso.

tastieraAbilita o disabilita l'interazione con la tastiera. Può assumere il valore vero o falso.

toccoabilita o disabilita l'uso dei touch screen se ne hai uno. Può assumere il valore vero o falso.

ciclo continuoindica che quando raggiunge la fine ritorna all'inizio e continua senza fermarsi, se mettiamo false si fermerà quando raggiunge la fine.

Può assumere il valore vero o falso.

scorrimento automaticoè il tempo in millisecondi per passare automaticamente da una diapositiva all'altra.

transizionetipo di transizione tra le diapositive. Può essere impostato su predefinito, nessuno, dissolvenza, scorrimento, convesso, concavo o zoom.

Un esempio molto interessante è la demo ufficiale che può essere utilizzata per esercitarsi e scaricata anche dalla pagina ufficiale di Reveal.js.

Se vogliamo aggiungere Cursore verticale dobbiamo creare sezioni annidate come segue:

 Diapositiva verticale 1 Diapositiva secondaria verticale 1.1 Diapositiva secondaria verticale 1.2 

Successivamente faremo un Esempio02 in cui includeremo altre caratteristiche come i frammenti che sono elenchi in html che vengono mostrati quando viene premuto un tasto, la presentazione procede

La presentazione sarà un corso di Hacking, con diapositive al computer.

Il codice sorgente sarà il seguente:

 Corso di hacking etico
Impara la sicurezza informatica difensiva

Rilevamento e controllo delle vulnerabilità
Test di penetrazione: metodi.

Sicurezza di rete Amministrazione server Linux Amministrazione server Windows / sezione>

I frammenti indicano che ogni elemento dell'elenco verrà mostrato man mano che la presentazione procede, se la classe del frammento non è indicata l'elenco verrà mostrato nella sua interezza e non uno alla volta.

Abbiamo anche indicato le sezioni verticali, che sono sottodiapositive, per mostrare altre diapositive all'interno di una determinata sezione.

Il framework Reveal.js È una delle opzioni più popolari per la creazione di presentazioni utilizzando HTML, in quanto può essere utilizzata su qualsiasi dispositivo e non richiede l'installazione di alcun software di progettazione o programmazione.

Esaminiamo alcune delle sue funzionalità di base in questo articolo, ma ce ne sono molte altre disponibili.

Google sta sperimentando la tecnologia WebRtc, una tecnologia che abbiamo visto nel tutorial WebRTC Comunicazione audio e video da un browser e Reveal.js in modo che i movimenti delle diapositive possano essere eseguiti utilizzando i gesti delle mani attraverso una webcam. Calibrando la webcam tramite WebRtc e con un semplice movimento della mano in aria possiamo cambiare il vetrino.

Possiamo vedere il progetto Google che è in fase beta Google Chrome con Gestures + Reveal.JS, dove puoi vedere alcuni video dimostrativi che testano la tecnologia.

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo