Det finns många olika sätt att skapa bilder för en presentation på Linux. Du kan använda OpenOffice, LibreOffice eller till och med Microsoft Office (via Wine). Din färdiga presentation kommer att vara antingen en .odp (OpenDocument format) eller .ppt (Powerpoint format) -fil som du använder via ovan nämnda sviter (eller en tittarapp) för att ge din presentation. Utan rätt programvara installerad kan presentationen inte ses. Skulle det inte vara bra om du kunde skapa en presentation som körs i en webbläsare, en presentation byggd med hjälp av HTML, Javascript och CSS? Tack vare impress.js kan du!

impress.js är ett kraftfullt CSS- och Javascript-presentationsramverk. Det ger alla bibliotek och CSS-filer som behövs för att skapa komplexa och visuellt inspirerande presentationer med hjälp av HTML. Men ett varningstecken innan vi fortsätter, använder impress.js i dess råa form handlar om att skapa filer med hjälp av textredigerare och manuellt skriva HTML. Det finns ingen fancy GUI här, ingen WYSIWYG.

Obs! Träningen som visas här är gjord på en Linux-plattform, men stegen är desamma oavsett vilken OS-plattform du använder. Impress.js är ett webbaserat skript och är kompatibelt med en plattform.

För att börja ladda ner, ladda ner impress.js från github. Det enklaste sättet är att köra följande kommando från kommandoraden:

 wget https://github.com/bartaz/impress.js/archive/master.zip

Och unzip det:

 Unzip master.zip

Inne i mappen "impress.js-master" finns det två undermappar - CSS och JS, som innehåller respektive CSS respektive Javascript-filer. Du behöver verkligen inte dyka in i Javascript-mappen, men CSS-mappen innehåller demo-CSS-filen som du kanske vill ändra för dina egna presentationer. Du hittar också ett exempel på impress.js-presentationen i index.html-filen. Med Nautilus öppnar du mappen "impress.js-master" och dubbelklickar på index.html. Det här öppnar din standardwebbläsare (förhoppningsvis, antingen Firefox eller Chrome) och starta presentationen.

Så här bygger du en enkel presentation baserat på exemplet CSS-fil ("css / impress-demo.css") som levereras med impress.js. Skapa en HTML-fil med en textredigerare. Du kanske vill använda en textredigerare som gEdit, eller du kan skapa den med nano på kommandoraden så här:

 nano demo1.html

Lägg in följande kod i filen och spara och avsluta sedan (CTRL-X).

 Allt om impress.js Allt om impress.js impress.js är en kraftfull CSS- och Javascript-presentationsram. Allt om impress.js Det ger alla bibliotek och CSS-filer som behövs för att skapa komplexa och visuellt inspirerande presentationer med HTML All om impress.js Läs mer på http://bartaz.github.io/impress.js impress (). Init ();

Alla HTML-filer är indelade i sektioner som börjar med en öppnings tagg (t.ex.) och stängs med samma tagg men med ett extra snedstreck (t.ex.). Inom avsnittet "" definierar "" taggen vilken CSS-fil som ska användas (dvs. css / impress-demo.css). När du blir mer avancerad med impress.js måste du skapa en egen CSS-fil.

I avsnittet finns en sektion med iden "imponera". Det är här impress.js räknar med att hitta bilderna. Varje bildskiva kallas ett "steg" och måste använda klassen "steg". I exemplet ovan finns tre bilder, var och en markerad av a med klassen "stegglid".

Varje bild har en data-x- och data-y-attribut som definierar objektglasets position. Y-värdet förblir detsamma för de tre bilderna, men x-värdet ändras. Den börjar med -1000 och flyttar sedan till 0 och slutligen 1000. Resultatet är att bilderna flyttas från vänster till höger när presentationen fortskrider. Genom att ändra x- och y-värdena kan du få bilderna att övergå i vilken riktning du vill.

I slutet av HTML-filen finns två rader som laddar impress.js-skriptet och sedan initierar impress.js-biblioteket (t.ex. impress (). Init).

För att testa filen dubbelklickar du på demo1.html från Nautilus.

impress.js-övergångar kan också innefatta rotation. Lägg till den här bilden i din presentation:

 Allt om impress.js Rotation!

Datatrotationsattributet berättar impress.js för att rotera visningsporten med 90 grader under övergången. Värdet är absolut, så en annan bild med värdet 90 kommer inte att rotera om den tidigare bilden hade en datadrotation på 90. Testa den nya presentationen i din webbläsare.

Ett annat intressant attribut är dataskala (dvs. zoom). Detta kan ge din presentation en 3D-stil genom att zooma in och ut ur duken när presentationen fortskrider.

För att se zoom-effekten lägger du till följande bild i din presentation:

 Zoom, plus det här ser inte ut som en bild

Det finns några saker som är värda att notera om den här sista bilden. För det första utelämnas klassen "glid". Detta innebär att objektglaset kommer att presenteras utan den vita bakgrunden som definieras i exemplet CSS-filen. För det andra noterar du värdena för datatrotation och dataskalan. Data-rotera attributet tar lerretet tillbaka till 0 grader (från 90 graders rotation i föregående bild). Dataskalans attribut gör att impress.js utför en zoom under övergången. För att se hur det ser ut, testa presentationen i din webbläsare.

Nu när du har behärskat några enkla bilder kan du läsa igenom index.html och "css / impress-demo.css" för att se hur demoen är konstruerad. Index.html-filen har omfattande kommentarer för att vägleda dig genom de olika elementen och klasserna.

Om du har några frågor om ovanstående exempel, använd kommentarfältet nedan och vi kommer se om vi kan hjälpa till.