Много пъти, когато трябва да направим плъзгач или слайд презентация, използваме софтуер като Powerpoint или Prezi, в момента има много рамки, които ни позволяват да правим този тип презентации, използвайки Html5, Jquery и Css 3 технология.
Предимството е, че може да се гледа във всеки браузър, във всяка операционна система и дори да се използва в приложения за мобилни устройства.
Reveal е рамка, разработена в Javascript, която предоставя функционалности за създаване на плъзгачи и презентации с функции, които ви позволяват да управлявате и манипулирате слайдове, експортиране на PDF, възможност за контрол на времето, навигация и ефекти на всеки слайд.
Reveal е безплатна библиотека И има голямото предимство, че можем да програмираме, да се свързваме с бази данни или да включваме във всяко приложение, което поддържа Html и Javascript, нещо, което най -популярният софтуер не може да направи.
Разработването с Reveal е лесно и трябва само да познаваме Html и Js, за да започнем да създаваме презентация, трябва да изтеглим библиотеката Reveal.js от официалния уебсайт.
След това разархивираме zip файловете, за да стартираме урока. Ще започнем с а Прост пример за тестване на Reveal.js.
От директорията, която разархивирахме, копираме папките css, js, плъгини и lib в нашата папка Example01. Тези папки съдържат всички необходими библиотеки за създаване на нашата презентация.
Тогава ще създадем плъзгач с две изображения и текст, където можете да се придвижвате автоматично или чрез клавиатура. Ще бъде както следва:
Изходният код е следният:
Reveal.js Пример 01Рамката Reveal ни предоставя няколко теми или css дизайн, които можем да намерим в папката css и като променим тематичния ред, можем да променим дизайна.Спортна кола
Посетете нашият уеб сайт
КОНСУЛТИРАЙТЕ се
Прилагаме бежовата тема и визуализираме с емулатора на мобилни устройства във Firefox и можем да видим, че библиотеката отговаря за създаването на адаптивен дизайн.
Работата на плъзгача се осигурява от кода на Javascript:
Ако искаме плъзгачът да се движи автоматично, ще посочим времето за преход в милисекунди с параметъра autoSlide, в случай че не го използваме, тогава той трябва да се премести със стрелките с помощта на клавиатурата или мишката.
Уеб разработчиците използват този тип библиотека, за да оставят настрана gif.webp, flash и други анимационни формати, този тип рамка дори позволява плъзгача да се използва за seo, тъй като текстът е индексируем. Можем също така да го използваме както онлайн, така и офлайн, за да показваме нашата презентация от флаш диск или мобилен, използвайки всеки браузър.
Рамката Reveal.js се състои от един файл JavaScript и два файла със стилове. Първата таблица със стилове, разкрива.css дефинира някои общи стилове, докато втората съдържа дизайна на стандартна тема, можем да добавим и трета таблица със собствени класове.
Тази тема определя вида на важните части на вашите презентации, тъй като има текст, изображения и връзки.
Можем да използваме заедно с Reveal.js други библиотеки като CSS 3D или WebGL.
The Разкрийте рамката Позволява ви да използвате различни приставки и конфигурационни параметри за подобряване на потребителското изживяване. Конфигурационните параметри, които най -много ни интересуват, са:
контролиТози параметър показва, че стрелките за посоката са показани за навигация през нашите слайдове, ако не посочим нищо, той се появява по подразбиране. Тя може да приеме стойността true или false.
напредъкПоказва лентата за напредък с напредването на презентацията. Тя може да приеме стойността true или false.
slideNumberПоказва номера на текущия слайд. Тя може да приеме стойността true или false.
клавиатураАктивирайте или деактивирайте клавиатурното взаимодействие. Тя може да приеме стойността true или false.
докосванеразрешава или забранява използването на сензорни екрани, ако имате такъв. Тя може да приеме стойността true или false.
цикълпоказва, че когато достигне края, се връща в началото и продължава без спиране, ако сложим false, ще спре, когато достигне края.
Тя може да приеме стойността true или false.
autoSlideе времето в милисекунди за автоматично превключване от един слайд на друг.
преходвид преход между слайдове. Може да бъде зададено по подразбиране, без, избледняване, плъзгане, изпъкнало, вдлъбване или увеличение.
Много интересен пример е официалното демо, което може да се използва за практика и също така да се изтегли от официалната страница Reveal.js.
Ако искаме да добавим Вертикален плъзгач трябва да създадем вложени секции, както следва:
Вертикален слайд 1 Вертикален подслайд 1.1 Вертикален подплъзък 1.2След това ще направим Пример02, където ще включим други характеристики, като например фрагментите, които са списъци в html, които се показват при натискане на клавиш, презентацията напредва
Презентацията ще бъде курс по хакерство, с компютърни слайдове.
Изходният код ще бъде както следва:
Курс по етично хакерствоНаучете защитна компютърна сигурност
- Откриване и контрол на уязвимости
- Тестване на проникване: Методи.
Също така сме посочили вертикални секции, които са подслайдове, за да се показват други слайдове в рамките на определен раздел.
The framework Reveal.js Това е една от най -популярните опции за създаване на презентации с помощта на HTML, тъй като може да се използва на всяко устройство и не изисква инсталиран софтуер за дизайн или програмиране.
Ние разглеждаме някои от основните му характеристики в тази статия, но има много повече на разположение.
Google експериментира с технологията WebRtc, технология, която видяхме в урока за WebRTC Аудио и видео комуникация от браузър и Reveal.js, така че движенията на слайдове да могат да се извършват с жестове на ръцете през уеб камера. Калибриране на уеб камерата чрез WebRtc и с просто движение на ръката във въздуха можем да променим слайда.
Можем да видим проекта на Google, който е в бета фаза Google Chrome с Gestures + Reveal.JS, където можете да видите някои демонстрационни видеоклипове, които тестват технологията.
Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
