Er zijn veel verschillende manieren om dia's te maken voor een presentatie op Linux. U kunt OpenOffice, LibreOffice of zelfs Microsoft Office (via Wine) gebruiken. Uw voltooide presentatie is een .odp-bestand (OpenDocument-formaat) of .ppt (PowerPoint-indeling) dat u gebruikt via de hierboven genoemde suites (of een viewer-app) om uw presentatie te geven. Zonder de juiste software geïnstalleerd, kan de presentatie niet worden bekeken. Zou het niet geweldig zijn als je een presentatie zou kunnen maken die in een webbrowser draait, een presentatie gebouwd met HTML, Javascript en CSS? Dankzij impress.js kan dat!

impress.js is een krachtig framework voor CSS en Javascript-presentaties. Het biedt alle bibliotheken en CSS-bestanden die nodig zijn om complexe en visueel inspirerende presentaties te maken met HTML. Maar een waarschuwing voordat we verder gaan, het gebruik van impress.js in zijn onbewerkte vorm gaat helemaal over het maken van bestanden met teksteditors en het handmatig schrijven van de HTML. Er is hier geen mooie GUI, geen WYSIWYG.

Opmerking : hoewel de hier getoonde handleiding op een Linux-platform wordt uitgevoerd, zijn de stappen hetzelfde, ongeacht het OS-platform dat u gebruikt. Impress.js is een webgebaseerd script en is compatibel met verschillende platforms.

Download om te beginnen impress.js van github. De eenvoudigste manier is om de volgende opdracht vanaf de opdrachtregel uit te voeren:

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

En pak het uit:

 unzip master.zip

In de map "impress.js-master" bevinden zich twee sub-mappen: CSS en JS, die respectievelijk de CSS-bestanden impress.js en Javascript bevatten. Je hoeft echt niet in de Javascript-map te duiken, maar de CSS-map bevat het demo-CSS-bestand dat je misschien zou willen aanpassen voor je eigen presentaties. U vindt ook een voorbeeld impress.js-presentatie in het index.html-bestand. Gebruik Nautilus, open de map "impress.js-master" en dubbelklik op index.html. Dit opent je standaard webbrowser (hopelijk Firefox of Chrome) en start de presentatie.

Hier leest u hoe u een eenvoudige presentatie maakt op basis van het voorbeeld-CSS-bestand ("css / impress-demo.css") dat met impress.js wordt geleverd. Maak een HTML-bestand met behulp van een teksteditor. Misschien wil je een teksteditor zoals gEdit gebruiken, of je kunt het op de commandoregel zo maken met behulp van nano:

 nano demo1.html

Voeg de volgende code in het bestand in en sla op en sluit af (CTRL-X).

 Alles over impress.js Alles over impress.js impress.js is een krachtig CSS en Javascript presentatie framework. Alles over impress.js Het biedt alle bibliotheken en CSS-bestanden die nodig zijn om complexe en visueel inspirerende presentaties te maken met behulp van HTML. Alles over impress.js Meer informatie op http://bartaz.github.io/impress.js impress (). Init ();

Alle HTML-bestanden zijn verdeeld in secties die beginnen met een openingstag (bijv.) En sluiten met dezelfde tag maar met een toegevoegde schuine streep (bijv.). In de sectie "" definieert de tag "" welk CSS-bestand moet worden gebruikt (bijv. Css / impress-demo.css). Naarmate u geavanceerder wordt met impress.js, moet u uw eigen CSS-bestand maken.

In de sectie is er een sectie met de ID van "impressie". Hier verwacht impress.js de dia's te vinden. Elke dia wordt een 'stap' genoemd en moet de 'stap' van de klasse gebruiken. In het bovenstaande voorbeeld zijn er drie dia's, elk gemarkeerd met a met de klasse 'stapslede'.

Elke dia heeft een kenmerk data-x en data-y dat de positie van de dia definieert. De y-waarde blijft hetzelfde voor de drie dia's, maar de x-waarde verandert. Het begint met -1000 en gaat dan naar 0 en tenslotte naar 1000. Het resultaat is dat de dia's van links naar rechts bewegen naarmate de presentatie vordert. Door de x- en y-waarden te wijzigen, kunt u de dia's in elke gewenste richting laten overgaan.

Aan het einde van het HTML-bestand staan ​​twee regels die het impress.js-script laden en vervolgens de impress.js-bibliotheek initialiseren (bijvoorbeeld impress (). Init).

Om het bestand te testen, dubbelklikt u op demo1.html vanuit Nautilus.

impress.js-overgangen kunnen ook rotatie omvatten. Voeg deze dia toe aan uw presentatie:

 Alles over impress.js Rotation!

Het kenmerk data-rotate vertelt impress.js om het kijkvenster tijdens de overgang 90 graden te draaien. De waarde is absoluut, dus een andere dia met de waarde 90 roteert niet als de vorige dia een gegevensrotatie van 90 heeft. Test de nieuwe presentatie in uw webbrowser.

Een ander interessant kenmerk is dataschaal (bijv. Zoom). Dit kan uw presentatie een 3D-stijl geven door in en uit te zoomen op het canvas terwijl de presentatie vordert.

Om het zoomeffect te zien, voegt u de volgende dia toe aan uw presentatie:

 Zoom, plus dit lijkt niet op een dia

Er zijn een paar dingen die de moeite waard zijn om op te noemen over deze laatste dia. Eerst wordt de klasse "slide" weggelaten. Dit betekent dat de dia wordt weergegeven zonder de witte achtergrond zoals gedefinieerd in het voorbeeld CSS-bestand. Ten tweede, noteer de waarden van data-rotate en dataschaal. Het data-rotate attribuut brengt het canvas terug naar 0 graden (van de 90 graden rotatie in de vorige dia). Met het kenmerk voor de gegevensschaal maakt impress.js een zoombewerking tijdens de overgang. Om te zien hoe het eruit ziet, test u de presentatie in uw browser.

Nu je een paar eenvoudige dia's onder de knie hebt, kun je proberen door index.html en "css / impress-demo.css" te lezen om te zien hoe de demo is opgebouwd. Het index.html-bestand bevat uitgebreide opmerkingen om u door de verschillende elementen en klassen te leiden.

Als u vragen heeft over de bovenstaande voorbeelden, gebruikt u de opmerkingen hieronder en we zullen zien of we u kunnen helpen.