Reveler - презентации на основе HTML

Движок презентаций в вашем браузере и презентации из HTML

Скачать Demo --> Откройте тут

Все делают презентации и очень много кто использует PowerPoint. PowerPoint — это, конечно, полезный инструмент для создания презентаций, но порой бывает крайне неудобным в использовании. Он может замедлять работу при большом количестве слайдов и элементов, а также требует много времени на настройку оформления. Кроме того, он не всегда позволяет создать качественные и оригинальные презентации, которые бы максимально привлекли внимание аудитории. Так же мне не нравится в нем то, что для просмотра презентаций вам как ни странно нужен сам PowerPoint или его аналоги, которые могут открыть *. pptx формат, а этот софт достаточно не дешовое удовольствие и занимает место на жёстком диске, как и сами презентации, которые иногда могут весить очень много и на офециальном сайте Microsoft есть инструкция как его уменьшить😹

Но есть и другие способы создавать презентации, от безумного типа LaTeX до более безобидных вроде Marckdown и Shower или то чем я вдохновлялся это ReavelJS. Мне очень сильно понравился вариант создания презентаций при помощи HTML, но и у этих способов есть свои минуты. Так просто вы не сможете начать писать ваши презентации, вам надо будет скачать стартовый шаблон, настроить лайф сервер и чтобы передеать это комуто вы должны скинуть весь проект целеком и он занимает со всеми зависимостями тоже не мало места.

Я же захотел избавится от этих минусом, хотя бы от некоторых и добавить интересные плюшки, но пока что не все) Для меня самое главное было, чтобы файлы презентации весили как можно меньше, их можно было бы открыть на любом старо-древнем компьютере или даже телефоне (это вполне возможно) и была лёгкая настройка слайдов. Так же как дополнительные плюшки я хотел добавить груперовку слайдов как в ReavelJS и мне очень сильно хотелось дать возможность создавать динамические слайды и выбрал для этого очень легкую, но классную библиотеку или даже можно сказать фреймворк AlpineJS, но об этом я раскажу чуть позже. И так как я люблю халяву Reveler всегда останется обсалютно бесплатным и он работает только на стороне клиента и сервера у него вообще нету, он работает благодаря Vercel, так что я о вас не узнаю вообще ничего😹

• Минимальные усилия для начала написания презентаци
• Минимальный вес файла
• Скорость работы и минимальные требования
  
• Открытие на любом устройстве где есть браузер
• Групировка слайдов
• Динамические слайды
• Создание любых анимаций
• Создание слайдов любого внешнего вида
• Возможность использовать JavaScript для больших возможностей

Мне надо было выполнить все эти пункты и чтобы они работали быстро и на клиенте. Для этого для фронтенда я выбрал UI фреймвок SolidJS и так как, чтобы было удобно писать эти презенатции мне пришлось немного переделать синтаксис HTML под себя и мне надо было переделывать это всё обратно в нужный мне HTML, а на JavaScript это было бы достаточно долго и трудно, я выбрал Rust для всего этого извращенья.

Для стилизации слайдов мой выбор пал на UnoCSS так как благодаря нему можно все стили написать в том же файле, что и сама презентация и ещё это достаточно удобно (как по мне), а с кастомными классами которые улучшают адаптиность это вообще бомба)

Так как я хотел сделать возможность создания динамических слайдов (на которых в тиории возможно повторить Reveler, но это на уровне того, чтобы создавать компьютер на редстоуне в майнкрафте) я выбрал класный фреймвок AlpineJS, для простой динамики он подходит идеально и весит достаточно мало.
Так же вы спокойно можете писать чтонибудь на обычном JavaScript и он будет работать так как вы задумывали.

Так же мне надо было сделать возможность анимаций и в Reveler у вас есть два варианта её создания, это воспользоваться css библиотекой Animate. css и у ваших элементов прописывать название анимаций которые вы хотите или же есть вы хотите сделать какую то очень класную анимацию воспользоватся библиотекой GSAP и создавать вообще всё что вам придет в голову

Ну и на счет легкости создания презентаций. Презентация пишется в одном файле с расширейнием *. vptx ну или же *. html. У презентации есть своя структура построения слайдов, а весь контент и сили пишутся как обычный html, ну есть некоторые отличия, напимер для реактивности на AlpineJS надо использовать x-data атребут, а в Reveler для этого после открывающего тега пишется тег и уже в нем пишется вся логика и данные.

Поле того как вы всё написали и ваша презентация готова, вы можете кому нибудь скинуть этот файл или открыть для просмотра. Для этого просто нужно открыть сайт Reveler нажать на большую кнопку «Открыть презентацию» и либо перекинуть вашу презентацию на страницу, либо нажать на единственную кнопку и выбрать файл. После чего ваша презентация откроется)

Если хотите поподробнее познакомится с тем как писать презентации на Reveler, можете перейти в документацию и почитать, там всё подробно описано