Skapa reglage och presentationer med Reveal.js

Många gånger när vi behöver göra en reglage eller en bildvisning använder vi programvara som Powerpoint eller Prezi, för närvarande finns det många ramar som gör att vi kan göra den här typen av presentationer med hjälp av Html5, Jquery och Css 3 -teknik.

Fördelen är att den kan ses i vilken webbläsare som helst, i vilket operativsystem som helst och till och med användas i applikationer för mobila enheter.

Reveal är ett ramverk utvecklat i Javascript som ger funktioner för att skapa reglage och presentationer med funktioner som låter dig hantera och manipulera bilder, PDF -export, möjlighet att styra tid, navigering och effekter av varje bild.

Reveal är ett gratis bibliotek Och det har den stora fördelen att vi kan programmera, ansluta till databaser eller inkludera i alla applikationer som stöder HTML och Javascript, något som den mest populära programvaran inte kan göra.

Att utveckla med Reveal är enkelt och vi behöver bara känna till Html och Js. För att börja skapa en presentation måste vi ladda ner Reveal.js -biblioteket från den officiella webbplatsen.

Därefter packar vi upp zip -filerna för att starta självstudien. Vi börjar med en Enkelt exempel för att testa Reveal.js.

Från katalogen som vi packade upp kopierar vi css, js, plugins och lib -mappar till vår exempel01 -mapp. Dessa mappar innehåller alla nödvändiga bibliotek för att skapa vår presentation.

Sedan vi skapar ett reglage med två bilder och text, där du kan navigera automatiskt eller med tangentbordet. Det kommer att vara följande:

Källkoden är följande:

 Reveal.js Exempel 01
Sportbil


Besök vår hemsida
RÅDFRÅGA

Reveal -ramverket ger oss flera teman eller css -design som vi kan hitta i css -mappen och genom att ändra temaraden kan vi ändra designen.

Vi tillämpar Beige -temat och visualiserar med den mobila enhetsemulatorn i Firefox och vi kan se att biblioteket ansvarar för en anpassningsbar design.

Reglaget fungerar med Javascript -koden:

Om vi ​​vill att reglaget ska flyttas automatiskt kommer vi att indikera övergångstiden i millisekunder med parametern autoSlide, om den inte används måste den flyttas med pilarna med tangentbordet eller musen.

Webbutvecklare använder den här typen av bibliotek för att lägga åt sidan gif.webp, flash och andra animationsformat, denna typ av ram tillåter till och med att reglaget kan användas för seo eftersom texten kan indexeras. Vi kan också använda den både online och offline för att visa vår presentation från en pendrive eller mobil, med valfri webbläsare.

Reveal.js -ramverket består av en enda JavaScript -fil och två formatmallar. Det första formatmallen, reveal.css definierar några vanliga stilar, medan det andra innehåller utformningen av ett standardtema, kan vi också lägga till ett tredje formatmall med våra egna klasser.

Detta tema definierar utseendet på de viktiga delarna av dina presentationer, eftersom det finns text, bilder och länkar.

Vi kan tillsammans med Reveal.js använda andra bibliotek som CSS 3D eller WebGL.

De Avslöja ramar Låter dig använda olika plugin- och konfigurationsparametrar för att förbättra användarupplevelsen. De konfigurationsparametrar som kommer att intressera oss mest är:

kontrollerDenna parameter indikerar att riktningspilarna visas för att navigera genom våra bilder, om vi inte anger något, visas det som standard. Det kan ta värdet sant eller falskt.

framstegVisar en förloppsindikator när presentationen fortskrider. Det kan ta värdet sant eller falskt.

slideNumberVisar det aktuella bildnumret. Det kan ta värdet sant eller falskt.

tangentbordAktivera eller inaktivera tangentbordsinteraktion. Det kan ta värdet sant eller falskt.

Röraktiverar eller inaktiverar användningen av pekskärmar om du har en. Det kan ta värdet sant eller falskt.

slingaindikerar att när det når slutet återgår det till början och fortsätter utan att stanna, om vi sätter falskt kommer det att sluta när det når slutet.

Det kan ta värdet sant eller falskt.

autoSlideär tiden i millisekunder för att automatiskt växla från en bild till en annan.

övergångtyp av övergång mellan bilder. Den kan ställas in på defaul, none, fade, slide, konvex, konkav eller zoom.

Ett mycket intressant exempel är den officiella demoen som kan användas för träning och även laddas ner från den officiella Reveal.js -sidan.

Om vi ​​vill lägga till Vertikal reglage vi måste skapa kapslade avsnitt enligt följande:

 Vertikal bild 1 Vertikal sub -bild 1.1 Vertikal sub -bild 1.2 

Därefter gör vi ett exempel02 där vi kommer att inkludera andra egenskaper som fragmenten som är listor i html som visas när en tangent trycks in, presentationen fortskrider

Presentationen kommer att vara en Hacking Course, med datorbilder.

Källkoden kommer att vara följande:

 Etisk hackingskurs
Lär dig defensiv datasäkerhet

Sårbarhetsdetektering och kontroll
Penetrationstestning: Metoder.

Nätverkssäkerhet Linux Server Administration Windows Server Administration / avsnitt>

Fragmenten indikerar att varje objekt i listan kommer att visas när presentationen fortskrider, om fragmentklassen inte anges kommer listan att visas i sin helhet och inte en i taget.

Vi har också angett vertikala sektioner, som är sub -diabilder, för att visa andra diabilder inom ett visst avsnitt.

De framework Reveal.js Det är ett av de mest populära alternativen för att skapa presentationer med HTML, eftersom det kan användas på alla enheter och inte kräver någon design- eller programmeringsprogramvara installerad.

Vi tittar på några av dess grundläggande funktioner i den här artikeln, men det finns många fler tillgängliga.

Google experimenterar med WebRtc -teknik, en teknik som vi såg i WebRTC -guiden Ljud- och videokommunikation från en webbläsare och Reveal.js så att bildrörelser kan utföras med hjälp av handrörelser via en webbkamera. Kalibrering av webbkameran via WebRtc och med en enkel rörelse av handen i luften kan vi ändra bilden.

Vi kan se Google -projektet som är i betafas Google Chrome med Gestures + Reveal.JS, där du kan se några demonstrationsvideor som testar tekniken.

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng