Creați Slider și prezentări cu Reveal.js

De multe ori când trebuie să facem un glisor sau o prezentare de diapozitive folosim software cum ar fi Powerpoint sau Prezi, în prezent există multe cadre care ne permit să realizăm acest tip de prezentări folosind tehnologia Html5, Jquery și Css 3.

Avantajul este că poate fi vizualizat în orice browser, pe orice sistem de operare și chiar utilizat în aplicații pentru dispozitive mobile.

Reveal este un cadru dezvoltat în Javascript care oferă funcționalități pentru a crea slider și prezentări cu funcții care vă permit să gestionați și să manipulați diapozitive, export PDF, posibilitatea de a controla timpul, navigarea și efectele fiecărui diapozitiv.

Reveal este o bibliotecă gratuită Și are marele avantaj că putem programa, conecta la baze de date sau include în orice aplicație care acceptă Html și Javascript, lucru pe care cel mai popular software nu îl poate face.

Dezvoltarea cu Reveal este ușoară și trebuie să știm doar Html și Js, pentru a începe crearea unei prezentări trebuie să descărcăm biblioteca Reveal.js de pe site-ul oficial.

Apoi dezarhivăm fișierele zip pentru a începe tutorialul. Vom începe cu un Exemplu simplu pentru a testa Reveal.js.

Din directorul pe care l-am dezarhivat, copiem folderele css, js, plugin-uri și lib în folderul nostru Example01. Aceste foldere conțin toate bibliotecile necesare pentru a crea prezentarea noastră.

Apoi vom crea un glisor cu două imagini și text, unde puteți naviga automat sau de la tastatură. Va fi după cum urmează:

Codul sursă este după cum urmează:

 Reveal.js Exemplul 01
Mașină sport


Vizitați site-ul nostru
CONSULTA

Cadrul Reveal ne oferă mai multe teme sau design CSS pe care le putem găsi în folderul CSS și schimbând linia temei, putem schimba designul.

Aplicăm tema bej și vizualizăm cu emulatorul dispozitivului mobil în Firefox și putem vedea că biblioteca este responsabilă de realizarea unui design adaptiv.

Funcționarea glisorului este asigurată de codul Javascript:

Dacă dorim ca glisorul să se deplaseze automat, vom indica timpul de tranziție în milisecunde cu parametrul autoSlide, în caz de a nu-l utiliza atunci trebuie mutat cu săgețile folosind tastatura sau mouse-ul.

Dezvoltatorii web utilizează acest tip de bibliotecă pentru a lăsa deoparte gif.webp, flash și alte formate de animație, acest tip de cadru permite chiar glisorul să fie utilizat pentru SEO, deoarece textul este indexabil. De asemenea, îl putem folosi atât online, cât și offline pentru a afișa prezentarea noastră de pe un pendrive sau mobil, folosind orice browser.

Cadrul Reveal.js constă dintr-un singur fișier JavaScript și două fișiere de foi de stil. Prima foaie de stil, revelează.css definește câteva stiluri comune, în timp ce a doua conține designul unei teme standard, putem adăuga și o a treia foaie de stil cu propriile noastre clase.

Această temă definește aspectul părților importante ale prezentărilor dvs., deoarece există text, imagini și linkuri.

Putem folosi împreună cu Reveal.js alte biblioteci, cum ar fi CSS 3D sau WebGL.

Dezvăluie cadrul Vă permite să utilizați diferiți parametri de plugin și configurare pentru a îmbunătăți experiența utilizatorului. Parametrii de configurare care ne vor interesa cel mai mult sunt:

controaleAcest parametru indică faptul că săgețile de direcție sunt afișate pentru a naviga prin diapozitivele noastre, dacă nu indicăm nimic, apare în mod implicit. Poate lua valoarea adevărată sau falsă.

progresAfișează o bară de progres pe măsură ce prezentarea progresează. Poate lua valoarea adevărată sau falsă.

slideNumberAfișează numărul curent al diapozitivului. Poate lua valoarea adevărată sau falsă.

tastaturăActivați sau dezactivați interacțiunea cu tastatura. Poate lua valoarea adevărată sau falsă.

atingereactivează sau dezactivează utilizarea ecranelor tactile dacă aveți unul. Poate lua valoarea adevărată sau falsă.

buclăindică faptul că atunci când ajunge la final se întoarce la început și continuă fără oprire, dacă punem false se va opri când va ajunge la final.

Poate lua valoarea adevărată sau falsă.

autoSlideeste timpul în milisecunde pentru a comuta automat de la un diapozitiv la altul.

tranzițietipul de tranziție între diapozitive. Poate fi setat la defaul, none, fade, slide, convex, concav sau zoom.

Un exemplu foarte interesant este demo-ul oficial care poate fi folosit pentru practică și, de asemenea, descărcat de pe pagina oficială Reveal.js.

Dacă vrem să adăugăm Glisor vertical trebuie să creăm secțiuni imbricate după cum urmează:

 Diapozitiv vertical 1 Diapozitiv vertical 1.1 Diapozitiv vertical 1.2 

Apoi vom face un Exemplu 02 unde vom include alte caracteristici, cum ar fi fragmentele care sunt liste în html care sunt afișate pe măsură ce o tastă este apăsată, prezentarea progresează

Prezentarea va fi un curs de hacking, cu diapozitive pe computer.

Codul sursă va fi după cum urmează:

 Curs de hacking etic
Aflați securitatea computerului defensiv

Detectarea și controlul vulnerabilității
Testarea penetrării: metode.

Securitate rețea Administrare server Linux Administrare / secțiune Windows Server>

Fragmentele indică faptul că fiecare element din listă va fi afișat pe măsură ce prezentarea progresează, dacă clasa de fragmente nu este indicată, lista va fi afișată în întregime și nu una câte una.

De asemenea, am indicat secțiuni verticale, care sunt sub diapozitive, pentru a afișa alte diapozitive într-o anumită secțiune.

cadru Reveal.js Este una dintre cele mai populare opțiuni pentru crearea de prezentări folosind HTML, deoarece poate fi utilizată pe orice dispozitiv și nu necesită niciun software de proiectare sau programare instalat.

Ne uităm la unele dintre caracteristicile sale de bază în acest articol, dar există multe altele disponibile.

Google experimentează tehnologia WebRtc, o tehnologie pe care am văzut-o în tutorialul WebRTC Comunicare audio și video dintr-un browser și Reveal.js, astfel încât mișcările de diapozitive să poată fi efectuate folosind gesturile mâinilor printr-o cameră web. Calibrând camera web prin WebRtc și cu o simplă mișcare a mâinii în aer putem schimba diapozitivul.

Putem vedea proiectul Google care este în fază beta Google Chrome cu Gestures + Reveal.JS, unde puteți vedea câteva videoclipuri demonstrative care testează tehnologia.

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv