pSlidy – slajdy w przeglądarce internetowej

 

Zapewne część z niewidomych czytelników spotyka się czasem z koniecznością przygotowania prezentacji w postaci slajdów. Niemal wszyscy starają się przygotować ją w Microsoft PowerPoint, który jest programem całkiem dobrym, ale dostępnym już umiarkowanie. Do tego zbyt mało mamy informacji zwrotnej, by wiedzieć, czy prezentacja wygląda dobrze. Można jednak przygotować prezentację w HTML i wyświetlać ją w przeglądarce internetowej, a wielkością czcionek sterować na bieżąco. Przedstawiam Państwu Slidy – slajdy oparte o HTML, arkusze stylów CSS i język skryptowy JavaScript.

Prawie jak w PowerPoint

Prezentacja przygotowana w standardzie Slidy składa się z jednego pliku HTML, który zawiera wszystkie elementy tekstowe zawarte w prezentacji. W nagłówku linkowane są dwa niezbędne elementy zewnętrzne: arkusz stylów CSS i skrypt JavaScript, które odpowiadają za wyświetlanie i nawigację w prezentacji. W prezentacji można osadzać wszystkie te elementy, które obsługuje przeglądarka internetowa, na przykład grafiki, animacje i filmy. W środku plik HTML jest niemal takim samym plikiem, jak każdy inny, chociaż zawiera pewne dodatkowe klasy, pozwalające na modyfikowanie zachowań niektórych elementów.

Po wyświetleniu mamy do dyspozycji kilka skrótów klawiaturowych:

• spacja przesuwa nas do kolejnego slajdu lub warstwy w danym slajdzie,
• klawisze “s” i “b” pozwalają na zmniejszanie i powiększanie czcionek,
• klawisz “f” pozwala na włączenie lub wyłączenie stopki slajdu,
• klawisz “c” wyświetla automatycznie wygenerowany spis treści prezentacji,
• klawisz “a” przełącza na wyświetlanie wszystkich slajdów,
• strzałki w lewo i prawo przesuwają prezentację do przodu i w tył.

Wprawdzie niektóre z tych skrótów kolidują ze skrótami czytników ekranu i trzeba pamiętać o ich przepuszczaniu, jednak najważniejszy, to znaczy spacja do puszczenia kolejnego slajdu, działa. Trzeba jedynie pamiętać, by punkt uwagi nie obejmował elementu aktywnego, na przykład łącza.

Przygotowanie prezentacji

Do przygotowania prezentacji możemy wykorzystać opisywany wcześniej język Markdown i konwerter Pandoc. Podczas pisania kodu prezentacji trzeba jedynie pamiętać, by każdy slajd zaczynał się od nagłówka poziomu pierwszego, to znaczy od tytułu poprzedzonego pojedyńczym krzyżykiem “#”. Jeżeli nie potrzebujemy tytułów dla slajdów, to sam krzyżyk też wystarczy.

Po przygotowaniu zawartości wystarczy wydać polecenie:

pandoc -s -t slidy -o prezentacja.html prezentacja.md

Po chwili otrzymamy gotowy do użycia plik HTML, po otwarciu którego wyświetli się prezentacja. Może się zdarzyć, że tekst paska wyświetlanego na dole slajdów będzie po angielsku (Help, Content) i wówczas należy wyedytować plik HTML i odnaleźć w nim ciąg lang=”en” i zamienić go na lang=”pl”. W ten sposób zdefiniowany zostanie język dokumentu, więc i pasek będzie przetłumaczony na język polski.

Komputer, na którym wyświetlana jest prezentacja, powinien mieć dostęp do sieci, ponieważ pliki CSS i JavaScript są pobierane z Internetu. Jeżeli nie będzie go miał, to prezentacja wyświetli się w postaci zwykłego dokumentu internetowego z domyślnym formatowaniem. Jest jednak sposób na rozwiązanie tego problemu, polegający na umieszczeniu obu zewnętrznych plików na dysku komputera. Aby wszystko zadziałało zgodnie z naszymi oczekiwaniami, do linii poleceń trzeba dodać jeszcze jeden odpowiadający za tę operację parametr: “–self-contained”. Całe polecenie wygląda wówczas następująco:

pandoc -s --self-contained -t slidy -o prezentacja.html prezentacja.md

Możliwości i ograniczenia

Slidy ma możliwości i ograniczenia związane ze standardem HTML. Z jednej strony – wyświetli się na każdej przeglądarce, chyba że będzie to wyjątkowo stare rozwiązanie. Pozwala na wygodne i proste osadzanie grafik, formatowanie tekstu, kolorowanie i podobne zabiegi za pomocą stylów zawartych w kodzie. Z drugiej jednak osadzanie innych multimediów, na przykład filmów, może być trudne i nie zawsze działać prawidłowo.

Jeżeli jednak prezentacja składa się z tekstu i grafiki, nie powinna nastręczać żadnych problemów. Co więcej – edytując kod HTML i nadając elementom pewne dodatkowe atrybuty, możemy osiągnąć ciekawe efekty wizualne. Na przykład, dodając do listy numerowanej lub punktowanej klasę “incremental”, możemy wyświetlać spacją kolejne elementy, które będą się pojawiać magicznie na ekranie.

<ul> 

<li>pierwszy element</li> 

<lidrugi element,</li> 

<li>trzeci element</li> 

</ul>

Korzystając z Pandoc, kod listy mamy już wygenerowany i musimy tylko dopisać w odpowiednim miejscu klasę “incremental”, by osiągnąć efekt. W podobny sposób możemy zaprojektować zmieniające się grafiki, budując pozorną animację. Zmieniające się wykresy w prezentacji mogą wyglądać bardzo efektownie.

Warto pamiętać

Podczas tworzenia, testowania i wyświetlania prezentacji Slidy trzeba pamiętać o dwóch ważnych rzeczach.

Po pierwsze – przeglądarka Internet Explorer blokuje wykonywanie skryptów, gdy plik uruchamiany jest z komputera, a nie wprost z Internetu. To zabezpieczenie można wyłączać czasowo lub na stałe, ale trzeba o tym pamiętać. Inne przeglądarki nie mają tej przypadłości, a ja szczególnie polecam przeglądarkę Firefox. Prezentacje działają doskonale także w Google Chrome, Operze i Safari. Dla prezentacji otwieranych w sieci równie dobry jest MS Internet Explorer.

Drugi problem może się pojawić podczas samodzielnej prezentacji. Na jednej z konferencji pokazywałem prezentację i dopiero po jej zakończeniu ktoś mnie poinformował, że tekst był napisany malutkimi literkami w lewym górnym rogu ekranu. Po sprawdzeniu okazało się, że w przeglądarce były wyłączone style, więc wszystko było wyświetlane w wielkościach i kolorach domyślnych. Dlatego zawsze warto odpytać czytnik ekranu, jakiej wielkości czcionki są wyświetlane. Wielkości powyżej 20 punktów oznaczają, że style są obsługiwane. Dokładnie ten sam efekt braku obsługi stylów pojawi się w sytuacji, gdy zabraknie nam połączenia z Internetem, a lokalnie nie mamy zapisanego arkusza stylów i skryptu JS. Dlatego na samodzielne prezentacje sugeruję jednak stosowanie wersji “self contained”.

Przykładowa prezentacja

Aby nie być gołosłownym, odsyłam do prezentacji w formacie Slidy o Slidy. Pokazuje ona nie tylko możliwości Slidy, ale także bogatszą instrukcję obsługi niż ten tekst. Niestety – dostępna jest tylko po angielsku i wymaga przynajmniej podstawowej wiedzy na temat języka HTML i arkuszy stylów. Za to można w niej znaleźć informacje na temat modyfikowania kolorów, czcionek i osadzania logotypów oraz wiele innych przydatnych informacji.

Nie tylko Slidy

Slidy nie jest jedynym rozwiązaniem dla tworzenia prezentacji w HTML. Innymi obsługiwanymi przez konwerter Pandoc są:

• Slideous,
• DZSlides – oparty o HTML5 i CSS 3, co daje duże możliwości konfiguracyjne i osadzania mediów,
• reveal.js, – oferowany wraz z edytorem online,
• S5 HTML slides. – system zbliżony do Slidy i częściowo z nim kompatybilny.

Każde z tych rozwiązań ma swoje wady i zalety, więc warto się nimi zainteresować. Na początek polecam jednak Slidy ze względu na jego prostotę i kompatybilność z wieloma przeglądarkami internetowymi oraz z czytnikami ekranu. Dzięki obsłudze atrybutu ALT można grafikom i innym obiektom przyporządkować teksty alternatywne. Wreszcie – takie prezentacje są bardzo małe i lekkie, a od użytkowników nie wymagają posiadania specjalnego oprogramowania, na przykład programu PowerPoint. Zapraszam zatem Czytelników do tworzenia i dzielenia się prezentacjami w Internecie.