Има много различни начини за създаване на слайдове за презентация на Linux. Можете да използвате OpenOffice, LibreOffice или дори Microsoft Office (чрез Wine). Изпълнената ви презентация ще бъде формат .odp (формат OpenDocument) или .ppt (формат Powerpoint), който използвате чрез споменатите по-горе пакети (или приложение за зрители), за да дадете презентацията си. Без инсталиран правилният софтуер представянето не може да се види. Не би ли било чудесно да създадете презентация, която се изпълнява в уеб браузър, презентация, изградена чрез HTML, Javascript и CSS? Благодарение на impress.js, можете!

impress.js е мощна рамка за представяне на CSS и Javascript. Той предоставя всички библиотеки и CSS файлове, необходими за създаване на сложни и визуално вдъхновяващи презентации, използващи HTML. Но предупредителната дума преди да продължим, като използваме impress.js в неговата сурова форма, е всичко за създаването на файлове с помощта на текстови редактори и ръчното писане на HTML. Тук няма фантазия GUI, без WYSIWYG.

Забележка : Въпреки че тук показаният урок се извършва на платформа Linux, стъпките са еднакви, независимо от платформата на OS, която използвате. Impress.js е уеб базиран скрипт и е съвместим с платформата.

За да започнете, изтеглете impress.js от github. Най-простият начин е да изпълните следната команда от командния ред:

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

И разархивирайте го:

 unzip master.zip

В папката "impress.js-master" има две под-папки - CSS и JS, които съдържат съответно CSS и Javascript файловете impress.js. Наистина не е нужно да се впускате в папката Javascript, но папката CSS съдържа демонстрационния CSS файл, който може да искате да промените за вашите собствени презентации. Също така ще намерите примерно представяне на impression.js в index.html файла. Използвайки Nautilus, отворете папката "impress.js-master" и кликнете два пъти върху index.html. Това ще отвори вашия уеб браузър по подразбиране (надявам се, или Firefox или Chrome) и да започне представянето.

Ето как да създадете проста презентация, базирана на примерния CSS файл ("css / impress-demo.css"), доставен с impress.js. Създайте HTML файл с помощта на текстов редактор. Може да искате да използвате текстов редактор като gEdit или можете да го създадете с помощта на нано на командния ред така:

 nano demo1.html

Поставете следния код във файла, след което го запишете и излезете (CTRL-X).

 Всичко за impress.js Всичко за impress.js impress.js е мощна рамка за представяне на CSS и Javascript. Всичко за impress.js Предоставя всички библиотеки и CSS файлове, необходими за създаване на сложни и визуално вдъхновяващи презентации, използващи HTML Всичко за impress.js Научете повече в http://bartaz.github.io/impress.js impress () init ();

Всички HTML файлове са разделени на секции, които започват с тагове за отваряне (напр.) И се затварят със същия етикет, но с добавена наклонена черта (напр.). В секцията "" се определя кой CSS файл да се използва (т.е. css / impress - demo.css). Щом станете по-напреднали с impress.js, ще трябва да създадете свой собствен CSS файл.

В секцията има раздел с идентификатор за "впечатление". Тук там impress.js очаква да намери слайдовете. Всеки слайд се нарича "стъпка" и трябва да използва класа "стъпка". В горния пример има три слайда, всеки от които е означен с a с класа "step slide".

Всеки слайд има атрибут данни-х и данни-y, който определя позицията на слайдове. Стойността y остава същата за трите слайда, но стойността на x се променя. Започва с -1000 и след това се премества на 0 и накрая 1000. Резултатът е, че слайдовете ще се движат от ляво на дясно, докато презентацията напредва. Чрез промяната на стойностите x и y можете да превключите слайдовете в желаната посока.

В края на HTML файла има две линии, които зареждат скрипта impress.js и след това инициализират библиотеката impress.js (напр. Impress () .init).

За да тествате файла, кликнете двукратно върху demo1.html в рамките на Nautilus.

превключванията на impress.js могат да включват и ротация. Добавете този слайд към презентацията си:

 Всичко за impress.js Ротация!

Атрибутът "Данни-въртене" указва на impress.js да завърта екранния прозорец на 90 градуса по време на прехода. Стойността е абсолютна, така че друг плъзгач със стойност 90 няма да се върти, ако предишният слайд има ротация на данни от 90. Тествайте новата презентация във вашия уеб браузър.

Друг интересен атрибут е мащаба на данните (т.е. увеличение). Това може да даде на вашата презентация 3D стил чрез мащабиране и излизане от платното, докато презентацията напредва.

За да видите ефекта за мащабиране, добавете следния слайд към презентацията си:

 Увеличете мащаба, плюс това не прилича на слайд

Има няколко неща, които си заслужава да се отбележат в последния слайд. Първо той пропуска класа "слайд". Това означава, че слайдът ще бъде представен без белия фон, както е дефинирано в примерния CSS файл. Второ, забележете стойностите на данните-въртене и мащаба на данните. Атрибутът "Data-rotate" връща платното обратно на 0 градуса (от 90 градуса въртене в предния слайд). Атрибутът за мащаба на данни прави impress.js да извърши увеличение по време на прехода. За да видите какво изглежда, тествайте презентацията във вашия браузър.

Сега, когато сте усвоили няколко прости слайда, опитайте да прочетете index.html и "css / impress-demo.css", за да видите как е направена демонстрацията. Файлът index.html има обилни коментари, за да ви води през различните елементи и класове.

Ако имате някакви въпроси относно посочените по-горе примери, моля, използвайте секцията за коментари по-долу и ще видим дали можем да помогнем.