Der er mange forskellige måder at oprette dias på til en præsentation på Linux. Du kan bruge OpenOffice, LibreOffice eller endda Microsoft Office (via Vin). Din færdige præsentation vil enten være en .odp (OpenDocument format) eller .ppt (Powerpoint format) fil, som du bruger via de ovennævnte suiter (eller en seerapp) for at give din præsentation. Uden den rigtige software installeret, kan præsentationen ikke ses. Ville det ikke være godt, hvis du kunne oprette en præsentation, der kører i en webbrowser, en præsentation bygget ved hjælp af HTML, Javascript og CSS? Takket være impress.js kan du!

impress.js er en kraftfuld CSS og Javascript præsentation ramme. Det giver alle de biblioteker og CSS-filer, der er nødvendige for at skabe komplekse og visuelt inspirerende præsentationer ved hjælp af HTML. Men et advarselsord, inden vi fortsætter, bruger impress.js i sin råform handler om at skabe filer ved hjælp af tekstredigerere og manuelt at skrive HTML. Der er ingen fancy GUI her, ingen WYSIWYG.

Bemærk : Selv om den vejledning, der vises her, er lavet på en Linux-platform, er trinene det samme uanset hvilken OS-platform du bruger. Impress.js er et webbaseret script og er kompatibel på tværs af platforme.

For at starte download download impress.js fra github. Den nemmeste måde er at køre følgende kommando fra kommandolinjen:

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

Og pak det ud:

 Unzip master.zip

Inde i mappen "impress.js-master" er der to undermapper - CSS og JS, der indeholder henholdsvis impress.js CSS og Javascript-filer. Du behøver virkelig ikke at dykke i Javascript-mappen, men CSS-mappen indeholder demo-CSS-filen, som du måske vil ændre til dine egne præsentationer. Du vil også finde et eksempel impress.js præsentation i filen index.html. Ved hjælp af Nautilus skal du åbne mappen "impress.js-master" og dobbeltklikke på index.html. Dette åbner din standardwebbrowser (forhåbentlig enten Firefox eller Chrome) og starter præsentationen.

Sådan bygger du en simpel præsentation baseret på eksemplet CSS-fil ("css / impress-demo.css"), der leveres med impress.js. Opret en HTML-fil ved hjælp af en teksteditor. Du vil måske bruge en teksteditor som gEdit, eller du kan oprette den ved hjælp af nano på kommandolinjen som denne:

 nano demo1.html

Indsæt følgende kode i filen, og gem derefter og afslut (CTRL-X).

 Alt om impress.js Alt om impress.js impress.js er en kraftfuld CSS og Javascript præsentation ramme. Alt om impress.js Det giver alle de biblioteker og CSS-filer, der er nødvendige for at oprette komplekse og visuelt inspirerende præsentationer ved hjælp af HTML All om impress.js Få mere at vide på http://bartaz.github.io/impress.js impress (). Init ();

Alle HTML-filer er opdelt i sektioner, der starter med et åbent tag (f.eks.) Og lukker med samme tag, men med et tilføjet skråstreg (f.eks.). Inde i "" sektionen definerer "" taggen hvilken CSS-fil der skal bruges (dvs. css / impress-demo.css). Da du bliver mere avanceret med impress.js, skal du oprette din egen CSS-fil.

I afsnittet er der en sektion med id'et "imponere". Det er her, hvor impress.js forventer at finde diasene. Hvert dias benævnes et "trin" og skal bruge klassen "trin". I eksemplet ovenfor er der tre dias, hver markeret med a med klassen "step slide".

Hvert dias har en data-x og data-y-attribut, der definerer diaspositionen. Y-værdien forbliver den samme for de tre dias, men x-værdien ændres. Det starter med -1000 og derefter flyttes til 0 og endelig 1000. Resultatet er, at diasene vil bevæge sig fra venstre mod højre som præsentationen skrider frem. Ved at ændre x og y værdierne kan du få diasene til overgang i enhver retning, du kan lide.

I slutningen af ​​HTML-filen er der to linjer, der indlæser impress.js-scriptet og derefter initialiserer impress.js-biblioteket (f.eks. Impress (). Init).

For at teste filen skal du dobbeltklikke på demo1.html fra Nautilus.

impress.js-overgange kan også omfatte rotation. Tilføj dette dias til din præsentation:

 Alt om impress.js Rotation!

Data-rotationsattributten fortæller impress.js at rotere visningsporten med 90 grader under overgangen. Værdien er absolut, så en anden dias med en værdi på 90 vil ikke rotere, hvis den forrige dias havde en datadrotation på 90. Test den nye præsentation i din webbrowser.

En anden interessant egenskab er dataskala (dvs. zoom). Dette kan give din præsentation en 3D-stil ved at zoome ind og ud af lærredet, når præsentationen skrider frem.

For at se zoom-effekten skal du tilføje følgende dias til din præsentation:

 Zoom, plus dette ser ikke ud som et dias

Der er et par ting værd at bemærke om dette sidste billede. Først udelades det "slide" -klassen. Dette betyder at diaset vil blive præsenteret uden den hvide baggrund som defineret i eksemplet CSS-fil. For det andet bemærk værdierne for datastyring og dataskala. Data-rotationsattributten bringer lærredet tilbage til 0 grader (fra 90 graders rotation i forrige dias). Dataskalaattributten gør impression.js udført en zoom under overgangen. For at se, hvordan det ser ud, test præsentationen i din browser.

Nu hvor du har mestret nogle få enkle dias, kan du prøve at læse indeks.html og "css / impress-demo.css" for at se, hvordan demoen er konstrueret. Index.html-filen har rigelige kommentarer til at guide dig gennem de forskellige elementer og klasser.

Hvis du har spørgsmål om eksemplerne ovenfor, kan du bruge kommentarafsnittet nedenfor, og vi vil se, om vi kan hjælpe.