Wielokrotnie gdy potrzebujemy zrobić slider lub prezentację slajdową korzystamy z oprogramowania takiego jak Powerpoint czy Prezi, obecnie istnieje wiele frameworków, które pozwalają nam tworzyć tego typu prezentacje w technologii Html5, Jquery i Css 3.
Zaletą jest to, że można go przeglądać w dowolnej przeglądarce, na dowolnym systemie operacyjnym, a nawet używać w aplikacjach na urządzenia mobilne.
Reveal to framework opracowany w języku JavaScript, który zapewnia funkcje do tworzenia sliderów i prezentacji z funkcjami pozwalającymi na zarządzanie i manipulowanie slajdami, eksport PDF, możliwość kontrolowania czasu, nawigacji i efektów każdego slajdu.
Reveal to darmowa biblioteka I ma tę wielką zaletę, że możemy programować, łączyć się z bazami danych lub umieszczać w dowolnej aplikacji obsługującej Html i Javascript, czego nie potrafią najpopularniejsze programy.
Programowanie z Reveal jest łatwe i wystarczy znać Html i Js, aby rozpocząć tworzenie prezentacji musimy pobrać bibliotekę Reveal.js z oficjalnej strony internetowej.
Następnie rozpakujemy pliki zip, aby rozpocząć samouczek. Zaczniemy od Prosty przykład do testowania Reveal.js.
Z katalogu, który rozpakowaliśmy, kopiujemy foldery css, js, plugins i lib do naszego folderu Example01. Te foldery zawierają wszystkie niezbędne biblioteki do stworzenia naszej prezentacji.
Następnie stworzymy slider z dwoma obrazkami i tekstem, gdzie możesz nawigować automatycznie lub za pomocą klawiatury. Będzie to wyglądało następująco:
Kod źródłowy wygląda następująco:
Reveal.js Przykład 01Framework Reveal udostępnia nam kilka motywów lub projektów css, które możemy znaleźć w folderze css, a zmieniając linię motywu możemy zmienić projekt.Samochód sportowy
Odwiedz nasza strone internetowa
KONSULTOWAĆ
Stosujemy motyw Beige i wizualizujemy za pomocą emulatora urządzenia mobilnego w Firefoksie i widzimy, że biblioteka jest odpowiedzialna za stworzenie projektu adaptacyjnego.
Działanie slidera zapewnia kod Javascript:
Jeżeli chcemy, aby suwak przesuwał się automatycznie, czas przejścia w milisekundach wskażemy parametrem autoSlide, w przypadku nieużywania należy go przesunąć strzałkami za pomocą klawiatury lub myszy.
Twórcy stron internetowych używają tego typu bibliotek, aby odłożyć na bok gif.webp, flash i inne formaty animacji, ten rodzaj frameworka pozwala nawet na użycie suwaka do SEO, ponieważ tekst jest indeksowalny. Możemy również wykorzystać go zarówno online, jak i offline, aby pokazać naszą prezentację z pendrive'a lub telefonu komórkowego za pomocą dowolnej przeglądarki.
Framework Reveal.js składa się z jednego pliku JavaScript i dwóch plików arkuszy stylów. Pierwszy arkusz stylów, discover.css, definiuje kilka popularnych stylów, podczas gdy drugi zawiera projekt standardowego motywu, możemy również dodać trzeci arkusz stylów z naszymi własnymi klasami.
Ten motyw definiuje wygląd ważnych części prezentacji, ponieważ zawiera tekst, obrazy i linki.
Możemy używać razem z Reveal.js innych bibliotek, takich jak CSS 3D czy WebGL.
ten Odkryj ramy Umożliwia korzystanie z różnych parametrów wtyczek i konfiguracji w celu poprawy komfortu użytkowania. Parametry konfiguracyjne, które nas najbardziej zainteresują to:
sterownicaTen parametr wskazuje, że wyświetlane są strzałki kierunku do poruszania się po naszych slajdach, jeśli nic nie wskazujemy, pojawia się domyślnie. Może przyjąć wartość prawda lub fałsz.
postępWyświetla pasek postępu w miarę postępu prezentacji. Może przyjąć wartość prawda lub fałsz.
numer slajduPokazuje bieżący numer slajdu. Może przyjąć wartość prawda lub fałsz.
klawiaturaWłącz lub wyłącz interakcję z klawiaturą. Może przyjąć wartość prawda lub fałsz.
dotykaćwłącza lub wyłącza korzystanie z ekranów dotykowych, jeśli taki posiadasz. Może przyjąć wartość prawda lub fałsz.
pętlawskazuje, że gdy osiągnie koniec, wraca do początku i kontynuuje bez zatrzymywania się, jeśli wstawimy false, zatrzyma się, gdy osiągnie koniec.
Może przyjąć wartość prawda lub fałsz.
autoSlajdto czas w milisekundach do automatycznego przełączenia z jednego slajdu na drugi.
przemianarodzaj przejścia między slajdami. Może być ustawiony na domyślny, brak, zanikanie, przesuwanie, wypukłość, wklęsłość lub powiększenie.
Bardzo ciekawym przykładem jest oficjalne demo, które można wykorzystać do ćwiczeń, a także pobrać z oficjalnej strony Reveal.js.
Jeśli chcemy dodać Suwak pionowy musimy utworzyć sekcje zagnieżdżone w następujący sposób:
Prowadnica pionowa 1 Prowadnica pionowa 1.1 Prowadnica pionowa 1.2Następnie zrobimy Przykład02, w którym uwzględnimy inne cechy, takie jak fragmenty, które są listami w html, które są wyświetlane po naciśnięciu klawisza, prezentacja postępuje
Prezentacja będzie kursem hakerskim ze slajdami komputerowymi.
Kod źródłowy będzie wyglądał następująco:
Kurs etycznego hakowaniaNaucz się obronnych zabezpieczeń komputera
- Wykrywanie i kontrola podatności
- Testy penetracyjne: metody.
Zaznaczyliśmy również sekcje pionowe, które są podslajdami, aby pokazać inne slajdy w ramach określonej sekcji.
ten framework Reveal.js Jest to jedna z najpopularniejszych opcji tworzenia prezentacji w HTML, ponieważ może być używana na dowolnym urządzeniu i nie wymaga instalowania żadnego oprogramowania projektowego ani programistycznego.
W tym artykule przyjrzymy się niektórym z jego podstawowych funkcji, ale jest ich o wiele więcej.
Google eksperymentuje z technologią WebRtc, technologią, którą widzieliśmy w samouczku WebRTC Komunikacja audio i wideo z przeglądarki i Reveal.js, dzięki czemu ruchy slajdów można wykonywać za pomocą gestów dłoni za pośrednictwem kamery internetowej. Kalibrując kamerkę poprzez WebRtc i prostym ruchem ręki w powietrzu możemy zmienić suwak.
Możemy zobaczyć projekt Google, który jest w fazie beta Google Chrome z Gestures + Reveal.JS, gdzie można zobaczyć kilka filmów demonstracyjnych, które testują technologię.
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
