Izradite klizač i prezentacije s Reveal.js

Mnogo puta kada moramo napraviti klizač ili slajd prezentaciju koristimo softver kao što su Powerpoint ili Prezi, trenutno postoji mnogo okvira koji nam omogućuju izradu ove vrste prezentacija pomoću tehnologije Html5, Jquery i Css 3.

Prednost je što se može vidjeti u bilo kojem pregledniku, na bilo kojem operativnom sustavu, pa čak i koristiti u aplikacijama za mobilne uređaje.

Reveal je okvir razvijen u Javascriptu koji pruža funkcionalnosti za stvaranje klizača i prezentacija sa značajkama koje vam omogućuju upravljanje i upravljanje slajdovima, izvoz PDF -a, mogućnost kontrole vremena, navigacije i učinaka svakog slajda.

Reveal je besplatna knjižnica I ima veliku prednost što možemo programirati, povezati se s bazama podataka ili uključiti u bilo koju aplikaciju koja podržava HTML i Javascript, nešto što najpopularniji softver ne može učiniti.

Razvoj s programom Reveal jednostavan je i moramo znati samo HTML i Js. Za početak izrade prezentacije moramo preuzeti biblioteku Reveal.js sa službene web stranice.

Zatim otpakiramo zip datoteke za početak vodiča. Počet ćemo s a Jednostavan primjer za testiranje Reveal.js.

Iz direktorija koji smo raspakirali kopiramo css, js, dodatke i mape lib u našu mapu Example01. Ove mape sadrže sve potrebne knjižnice za izradu naše prezentacije.

Zatim izradit ćemo klizač s dvije slike i tekstom, gdje se možete kretati automatski ili tipkovnicom. Bit će sljedeće:

Izvorni kod je sljedeći:

 Reveal.js Primjer 01
Sportski auto


Posjetite našu web stranicu
SAVJETOVATI

Okvir Reveal pruža nam nekoliko tema ili css dizajna koje možemo pronaći u css mapi, a promjenom linije teme možemo promijeniti dizajn.

Primjenjujemo bež temu i vizualiziramo pomoću emulatora mobilnih uređaja u Firefoxu i možemo vidjeti da je knjižnica zadužena za izradu prilagodljivog dizajna.

Rad klizača omogućen je Javascript kodom:

Ako želimo da se klizač automatski pomiče, označit ćemo vrijeme prijelaza u milisekundama s parametrom autoSlide, u slučaju da ga ne koristimo, mora se pomicati strelicama pomoću tipkovnice ili miša.

Web programeri koriste ovu vrstu biblioteke za odbacivanje gif.webp, flash i drugih formata animacije, ova vrsta okvira čak dopušta korištenje klizača za seo budući da je tekst indeksibilan. Također ga možemo koristiti i na mreži i izvan mreže za prikazivanje naše prezentacije s pogona ili mobilnog uređaja pomoću bilo kojeg preglednika.

Okvir Reveal.js sastoji se od jedne JavaScript datoteke i dvije datoteke stilske tablice. Prva tablica stilova, opens.css definira neke uobičajene stilove, dok druga sadrži dizajn standardne teme, možemo dodati i treću tablicu stilova s ​​vlastitim razredima.

Ova tema definira izgled važnih dijelova vaših prezentacija jer postoje tekst, slike i veze.

Zajedno s Reveal.js možemo koristiti i druge knjižnice, poput CSS 3D ili WebGL.

The Otkrij okvir Omogućuje vam korištenje različitih dodataka i konfiguracijskih parametara za poboljšanje korisničkog iskustva. Konfiguracijski parametri koji će nas najviše zanimati su:

kontroleOvaj parametar pokazuje da se strelice smjera prikazuju za kretanje kroz naše slajdove, ako ništa ne označimo, prikazuje se prema zadanim postavkama. Može uzeti vrijednost true ili false.

napredakPrikazuje traku napretka kako prezentacija napreduje. Može uzeti vrijednost true ili false.

slideNumberPrikazuje trenutni broj slajda. Može uzeti vrijednost true ili false.

tipkovnicaOmogućite ili onemogućite interakciju tipkovnice. Može uzeti vrijednost true ili false.

dodiromogućuje ili onemogućuje korištenje zaslona osjetljivih na dodir ako ih imate. Može uzeti vrijednost true ili false.

petljaoznačava da kad dođe do kraja vraća se na početak i nastavlja bez zaustavljanja, ako stavimo false, zaustavit će se kad dođe do kraja.

Može uzeti vrijednost true ili false.

autoSlideje vrijeme u milisekundama za automatsko prebacivanje s jednog slajda na drugi.

tranzicijavrsta prijelaza između slajdova. Može se postaviti na zadano, bez, blijeđenje, klizanje, konveksno, konkavno ili zumiranje.

Vrlo zanimljiv primjer je službeni demo koji se može koristiti za vježbu i također ga preuzeti sa službene stranice Reveal.js.

Ako želimo dodati Okomiti klizač moramo stvoriti ugniježđene odjeljke na sljedeći način:

 Okomiti klizač 1 Okomiti klizač 1,1 Okomiti klizač 1,2 

Zatim ćemo napraviti Primjer02 gdje ćemo uključiti druge karakteristike, poput fragmenata koji su popisi u html -u koji se prikazuju pritiskom tipke, prezentacija napreduje

Prezentacija će biti tečaj hakiranja s računalnim slajdovima.

Izvorni kod bit će sljedeći:

 Tečaj etičkog hakiranja
Naučite obrambenu računalnu sigurnost

Otkrivanje i kontrola ranjivosti
Ispitivanje prodora: Metode.

Mrežna sigurnost Linux poslužitelj Administracija Windows poslužitelj Administracija / odjeljak>

Fragmenti označavaju da će se svaka stavka na popisu prikazivati ​​kako prezentacija napreduje, ako klasa fragmenata nije naznačena, popis će biti prikazan u cijelosti, a ne jedan po jedan.

Također smo naznačili okomite dijelove, koji su pod slajdovi, za prikaz drugih slajdova unutar određenog odjeljka.

The framework Reveal.js To je jedna od najpopularnijih opcija za izradu prezentacija pomoću HTML -a jer se može koristiti na bilo kojem uređaju i ne zahtijeva instaliran nikakav dizajn ili softver za programiranje.

U ovom članku razmatramo neke od njegovih osnovnih značajki, ali dostupno ih je još mnogo.

Google eksperimentira s WebRtc tehnologijom, tehnologijom koju smo vidjeli u udžbeniku WebRTC Audio i video komunikacija iz preglednika i Reveal.js tako da se pokreti klizanja mogu izvoditi pokretima ruku kroz web kameru. Kalibriranjem web kamere putem WebRtc -a i jednostavnim pokretom ruke u zraku možemo promijeniti klizač.

Možemo vidjeti Googleov projekt koji je u beta fazi Google Chrome s Gestures + Reveal.JS, gdje možete vidjeti neke demonstracijske videozapise koji testiraju tehnologiju.

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod