Det er mange forskjellige måter å lage lysbilder for en presentasjon på Linux. Du kan bruke OpenOffice, LibreOffice eller til og med Microsoft Office (via Vin). Din fullførte presentasjon vil enten være en .odp (OpenDocument format) eller .ppt (Powerpoint format) -fil, som du bruker via suiter som er nevnt ovenfor (eller en seerapp) for å gi presentasjonen. Uten riktig programvare installert, kan presentasjonen ikke vises. Ville det ikke vært bra hvis du kunne lage en presentasjon som kjører i en nettleser, en presentasjon som ble bygget med HTML, Javascript og CSS? Takket være impress.js, kan du!

impress.js er et kraftig CSS- og Javascript-presentasjonsramme. Det gir alle biblioteker og CSS-filer som trengs for å lage komplekse og visuelt inspirerende presentasjoner ved hjelp av HTML. Men et advarselsvarsel før vi fortsetter, bruker impress.js i sin raske form handler om å lage filer ved hjelp av tekstredigerere og manuelt å skrive HTML. Det er ingen fancy GUI her, ingen WYSIWYG.

Merk : Selv om opplæringen vist her er gjort på en Linux-plattform, er trinnene de samme uansett hvilken OS-plattform du bruker. Impress.js er et nettbasert script og er kompatibel med kryssplattform.

For å starte, last ned impress.js fra github. Den enkleste måten er å kjøre følgende kommando fra kommandolinjen:

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

Og pakke ut den:

 pakke ut master.zip

I mappen "impress.js-master" er det to undermapper - CSS og JS, som inneholder henholdsvis impress.js CSS og Javascript-filer. Du trenger virkelig ikke å dykke inn i Javascript-mappen, men CSS-mappen inneholder demo CSS-filen som du kanskje vil endre for dine egne presentasjoner. Du vil også finne et eksempel på impress.js-presentasjon i index.html-filen. Bruk Nautilus, åpne mappen "impress.js-master" og dobbeltklikk på index.html. Dette åpner standard nettleseren din (forhåpentligvis, enten Firefox eller Chrome) og starter presentasjonen.

Slik bygger du en enkel presentasjon basert på eksempel CSS-filen ("css / impress-demo.css") som leveres med impress.js. Opprett en HTML-fil ved hjelp av en tekstredigerer. Du vil kanskje bruke en tekstredigerer som gEdit, eller du kan opprette den ved hjelp av nano på kommandolinjen som denne:

 nano demo1.html

Sett inn følgende kode i filen, og lagre og avslutte (CTRL-X).

 Alt om impress.js Alt om impress.js impress.js er et kraftig CSS- og Javascript-presentasjonsramme. Alt om impress.js Det gir alle bibliotekene og CSS-filene som trengs for å lage komplekse og visuelt inspirerende presentasjoner ved hjelp av HTML All om impress.js Finn ut mer på http://bartaz.github.io/impress.js impress (). Init ();

Alle HTML-filer er delt inn i seksjoner som starter med en åpningstegn (f.eks.) Og lukker med samme tag, men med et ekstra skråstrek (f.eks.). Innenfor "" -delen definerer "" -koden hvilken CSS-fil som skal brukes (dvs. css / impress-demo.css). Når du blir mer avansert med impress.js, må du opprette din egen CSS-fil.

I seksjonen er det en del med iden "imponere". Det er her impress.js forventer å finne lysbildene. Hvert lysbilde kalles et "trinn" og må bruke klassen "trinn". I eksemplet ovenfor er det tre lysbilder, hver markert med a med klassen "Step slide".

Hvert lysbilde har en data-x og data-y-attributt som definerer lysbildesposisjonen. Y-verdien forblir den samme for de tre lysbildene, men x-verdien endres. Den starter med -1000 og flyttes deretter til 0 og til slutt 1000. Resultatet er at lysbildene vil bevege seg fra venstre til høyre når presentasjonen utvikler seg. Ved å endre x- og y-verdiene kan du få lysbildene til overgang i hvilken som helst retning du vil.

På slutten av HTML-filen er to linjer som laster inn impress.js-skriptet og deretter initialiserer impress.js-biblioteket (f.eks. Impress (). Init).

For å teste filen, dobbeltklikk på demo1.html fra Nautilus.

impress.js-overganger kan også inkludere rotasjon. Legg til dette lysbildet i presentasjonen din:

 Alt om impress.js Rotasjon!

Data-rotereattributtet forteller impress.js for å rotere visningsporten med 90 grader under overgangen. Verdien er absolutt, slik at en annen lysbilde med verdien på 90 ikke vil rotere hvis den forrige lysbildet hadde en dataspredning på 90. Test den nye presentasjonen i nettleseren din.

En annen interessant egenskap er dataskala (dvs. zoom). Dette kan gi presentasjonen din en 3D-stil ved å zoome inn og ut av lerretet etter hvert som presentasjonen utvikler seg.

For å se zoomeffekten, legg til følgende lysbilde i presentasjonen din:

 Zoom, pluss dette ser ikke ut som et lysbilde

Det er noen ting verdt å merke seg om denne siste lysbilde. Først unnlater det "lysbildet" -klassen. Dette betyr at lysbildet vil bli presentert uten den hvite bakgrunnen som definert i eksempel CSS-filen. For det andre, noter verdiene for data-rotere og dataskala. Datatrykkattributtet bringer lerretet tilbake til 0 grader (fra 90 graders rotasjon i forrige lysbilde). Dataskalaattributtet gjør at impress.js utfører en zoom under overgangen. For å se hvordan det ser ut, test presentasjonen i nettleseren din.

Nå som du har mestret noen få enkle lysbilder, kan du prøve å lese gjennom index.html og "css / impress-demo.css" for å se hvordan demoen er konstruert. Indeksen.html-filen har rikelig med kommentarer for å veilede deg gjennom de ulike elementene og klassene.

Hvis du har spørsmål om eksemplene ovenfor, vennligst bruk kommentarene nedenfor og vi vil se om vi kan hjelpe.