PowerHTML

веб-ориентированное приложение для создания презентаций

О приложении

PowerHTML – это web-редактор, в котором создаются презентации для просмотра с помощью браузера. Результирующая презентация представляет собой автономный HTML-файл. Один файл, в котором помещены: код HTML и CSS, код Javascript, медиа (изображения, видео, аудио в кодировке base64), содержание встроенных iframe. Всё это в одном файле, что удобно для распространения, контроля, показа в интернете и на локальном компьютере.

Сам редактор также является одним автономным HTML-файлом. Он бесплатен, может работать на сайте в интернете или запускаться по клику на локальном компьютере. Является легким аналогом MS PowerPoint со своими недостатками и преимуществами.

монстр и динозавр

шустрый и универсальный

Слайды и шаблоны

Презентация состоит из слайдов. Пользователь видит слайды, их добавляет, удаляет, меняет местами в левой панели. Если кликнуть мышкой по свободному пространству слайда, то справа, в Инспекторе, можно задать фон слайда: монотонный цвет, градиент или изображение. В Редакторе фона после отметки чекбокса «Применить ко всем слайдам» выбранный фон будет распространен по всем слайдам.

На верхней панели «Главная» есть кнопка [Шаблоны], которая открывает список имеющихся шаблонов – выбранный в нем шаблон создаст новую страницу. Пользователь имеет возможность добавить в это окно свой шаблон от выделенного слайда (шаблон будет сохранен только в экспортированном HTML, но не в редакторе).

Элементы слайда

На слайд можно добавлять большое количество разнообразного контента из меню «Вставка»:

• Текст
• Изображение
• Видео
• Аудио
• iframe
• Таблица
• Кнопка действия
• Диаграмма
• Формула
• QR-код

А также некоторые приколы от разработчика:

• 3D-фигура
• Мем
• Колесо имен
• Игральный кубик
• Обратный таймер

Нажми красный треугольник, чтобы узнать, в какой день недели ты родился на свет...

Редактирование текста

Выделенный блок текста редактируется с помощью инструментов меню «Главная». Кнопки этого меню работают на весть выделенный блок. Это семейство и стиль шрифта, его цвет и тень. Если пользователь желает отформатировать только часть текста в блоке, то ему необходимо это делать в поле «ТЕКСТ» в Инспекторе справа. В этом поле он может использовать все HTML-тэги кроме <script>. При выделенном блоке есть возможность точно отредактировать положение блока на слайде, задать его прозрачность и угол поворота – это делается в Инспекторе справа.

Примеры HTML-тэгов для правки в Инспекторе: Жирный: <b>текст</b>; Ссылка: <a href='http://barius.ru'>сайт</a>; Цвет: <font color='red'>слово</font> Результат: Жирный: текст; Ссылка: сайт; Цвет: слово

Редактирование видео

Не просто можно добавить видосик на слайд. Также имеется возможность его обрезать по времени – это делается по кнопке «Видеоредактор» в Инспекторе. Более удивительные вещи можно провернуть по кнопке «Интерактив» – есть возможность останавливать видео на определенном моменте и показывать пользователю или информационный текст, или задать вопрос с вариантами ответа, то есть, сделать своеобразную викторину или тест. Еще видео можно зациклить, убрать звук, убрать управление видео и запускать его автоматом. P.S. Не рекомендую обрезать видео именно в это редакторе, т.к. после удаления в редакторе лишних для показа фрагментов непоказываемые фрагменты останутся в результирующей Презентации, что значительно увеличит ее вес. Обрезайте видео заранее.

Редактирование аудио

При добавлении аудиофайла его также как и видео можно зациклить, убрать управляющие элементы, запускать при старте слайда. Еще можно сразу в редакторе записать звук со своего микрофона и поместить его на слайд (микрофон работает не во всех браузерах). Есть похожий на видеоредактор свой «Аудиоредактор» с таким же функционалом. Аудио ниже можно проиграть:

На этот слайд еще добавлено аудио-щелчок, которое без управляющих элементов и запускается при открытии слайда.

Вставка iFrame

По моему мнению это ударная фича PowerHTML. Идея iframe состоит в том, что пользователь (или нейросеть) в нем пишет свой полноценный HTML код, включая JS. То есть, размещает на слайде что угодно, что может работать в браузере. Даже по мелочи iframe здорово помогает в дизайне. Например, в редакторе нет возможности создать прямоугольник с градиентной заливкой. Тогда я вывел на слайд iframе, написал в нем простой код блока с градиентом и всё. Также автоматическая нумерация слайдов этой презентации идет через iframe, в который выведен код для считывания номера слайда во время демонстрации.

Топ-10 языков мира в миллионах человек, для которых он родной. Интрерактивная инфографика - кнопки и слайдер работают.

Переходы и анимация

Переходы в презентации – это анимация всего слайда при его появлении на экране. Настройка переходов осуществляется на закладке «Переходы». Виды переходов: Появление, Масштаб, Сдвиг (Слева, Справа, Снизу). Есть поле для задания длительности перехода и кнопка для применения перехода сразу ко всем слайдам.

Анимация – это «оживление» элементов слайда. Также существует несколько простых видов анимации, настройка длительности, задержки, указание триггера старта анимации.

В просматриваемой вами сейчас презентации и переходы, и анимация применены штатными инструментами PowerHTML.

ПЕРЕХОДЫ:

АНИМАЦИЯ:

Понятие проекта

Понятие проекта заключается в том, чтобы презентацию, созданную в PowerHTML, можно было не только просмотреть в интерфейсе редактора, но и сохранить в такой формат, который потом реально загрузить обратно для продолжения редактирования. Итак, кнопка «Сохранить в HTML» создает html-файл с автономной презентацией, а кнопка «Открыть HTML» загружает этот же файл для продолжения редактирования. Вверху слева в редакторе есть поле для названия файла и одновременно для названия страницы, на которой будет просматриваться презентация в браузере.

История создания PowerHTML

Во-первых, первоначальным автором идеи и создателем этого редактора был не я. Во-вторых, программистом был даже не человек. PowerHTML – это результат вайбкодинга, другими словами, человек пишет промпты на человеческом языке, а нейросеть выдает программный код. Я узнал о редакторе из статьи на Хабре. Статья написана от первого лица, от автора этих самых промптов. Автор представляется школьным учителем физики, которому захотелось для своих учеников делать презентации, которые помещаются в один файл и не зависят ни от какого ПО, кроме браузера. Попробовал редактор, он мне понравился. Заметил недоработки, которые восполнил сам уже без привлечения ИИ.

Что я доработал:

• Нумерация слайдов из шаблона «С номером слайда».
• Проверка и очистка неиспользованных в презентации ассетов. Такие ассеты (изображения, видео, аудио) после их удаления в редакторе оставались в экспортированной презентации, колоссально увеличивая ее вес.
• Добавлена кнопка для выравнивания текста по обоим краям (Justify).
• Добавлена кнопка для задания тени тексту.
• Добавлена подсветка кнопок выравнивания текста в зависимости от выравнивания.
• Настроен прозрачный фон в HTML-вставках iframe.
• Разблокирована возможность вставлять в текстах все html-тэги кроме <script> (используйте Инспектор).

Ссылки:

• Моя версия
• Русская версия
• Английская версия

Создано в PowerHTML