В последние месяцы я пытался сделать как можно больше своей работы и творческого результата открытыми и совместными. Так как большая часть моего вывода — это код и разметка, это было относительно просто.
Тем не менее, я делаю много презентаций об открытой культуре, и мне показалось немного лицемерным, что я предоставлял их через закрытое, не совместное программное обеспечение.
В то время как MS Powerpoint завоевала конкуренцию со стороны таких приложений, как Keynote и Prezi, все они по-прежнему закрыты и работают только в формате полу-сотрудничества. Важно отметить, что все они являются «тупиковыми» форматами, то есть файл powerpoint, это просто файл powerpoint, его нельзя легко повторно использовать или интерпретировать как часть чего-либо еще. Что я имею в виду под этим станет яснее позже.
Я знал, что есть варианты для создания более «открытой» презентации, обычно основанной на браузере, которая использует JavaScript и CSS для воссоздания внешнего вида, эффектов и эффектов этих традиционных инструментов презентации.
В дополнение к простому воссозданию моих существующих презентаций (из PowerPoint и Keynote) в одном, более открытом формате, у меня были и другие требования, которые меня устраивали.
Каковы были мои мотивы?
Напишите один раз, измените назначение несколько раз
Я хочу иметь возможность писать один и тот же контент для поста в блоге, презентации и некоторых других целей и иметь возможность отображать их в разных случаях использования.
Shareability
Часто, когда я выступаю на конференции, организаторы впоследствии просят слайд-колоду. Для некоторых может быть достаточно ссылки, но для других они хотят отдельный файл, такой как PDF. Это позволяет загружать презентации в такие службы, как Slideshare, где я получаю много информации о своих презентациях.
привлекательность
Мне нравится создавать презентации с полноэкранными изображениями, четким, читабельным текстом и другими увлекательными сюжетами, чтобы люди их замечали. Фреймворк, который поддерживает только небольшие изображения и текст, меня не интересует.
Мои рамки выбора
На самом деле я нашел меньше фреймворков, чем ожидал, и остановился на Reveal.JS, так как он отвечал моим требованиям, а также предлагал некоторые другие функции, которые я даже не рассматривал, такие как представление докладчика и заметки.
Стоит отметить, что большинство из этих платформ предназначены для тех, кто обладает техническими знаниями. Некоторые предлагают коммерческие инструменты для перетаскивания, но чтобы использовать их истинный потенциал, вам потребуются глубокие знания CSS, HTML и (возможно) JavaScript.
Создание вашей презентации
На базовом уровне это простой процесс, и у нас уже есть хорошее представление о SitePoint .
В HTML-файле раскрытия по умолчанию вы найдете <div class="slides">section С помощью раскрытия вы можете создавать «вложенные» слайды или вертикальные слайды, которые позволяют создавать логические разделы в вашей презентации. Они создаются путем вложения дополнительных тегов sectionsection
После этого слайды представляют собой просто HTML с некоторыми пользовательскими тегами и параметрами, уникальными для Reveal. Если вы можете кодировать HTML, вы можете создать презентацию, а если нет, Reveal предлагает коммерческий продукт для вас, сервис slides.com .
Итак, в оставшейся части этой статьи я собираюсь предположить, что вы можете управлять кодированием некоторых основных слайдов и показать вам советы и приемы, которые я изучил в процессе переноса презентаций в Reveal.
Полноэкранные изображения
Добавьте следующий класс в ваш раздел / слайд div
<section data-background="imagefile">
Затем вы можете наложить другое содержимое поверх этого изображения, как обычно. Есть много вариантов того, как изображение должно отображаться, и помните о некоторых параметрах загрузки, которые могут вам понадобиться, чтобы предотвратить прогрессивную загрузку изображения при переключении экранов.
Левая и Правая панели
Часто в Powerpoint и Keynote шаблоны имеют левую и правую панели с двумя различными наборами контента, например, с изображением и текстом. В то время как некоторые скажут, что использование такого рода макетов противоречит более гибким принципам разработки, я думаю, что иногда это все еще необходимо. Это легко скопировать с некоторыми основными CSS:
.left-align {
float:left;
width:50%;
}
.right-align {
float:right;
width:50%;
}
.panel {
text-align:left;
}
.panel img {
width:100%;
}
Мы создаем общий класс panel Мы создаем два класса, чтобы установить float и width, и сделать так, чтобы любые изображения на панели заполняли на 100% шириной. Все вышеперечисленное на личный вкус и соответствует моим потребностям, но вы поняли.
Растяжение изображения
Независимо от того, заполняете ли вы весь слайд или одну из панелей, которые мы создали выше, нам иногда нужно, чтобы изображение занимало пространство, которое оно занимает пропорционально. Это достигается путем добавления класса stretch
Код
Подсветка кода — одна из выдающихся возможностей раскрытия, но я все еще нахожу это ограниченным и настроил это. Это связано с тем, что он использует pre
Я обнаружил, что могу получить больше контроля с помощью этого фрагмента CSS:
.reveal code {
white-space: pre-line;
text-align: left;
}
А затем используйте   HTML-сущность tab для управления отступами табуляции так, как я хочу, т.е.
docker run -d -p 4200:4200 -p 4300:4300
 --volume /data:/data
 --env CRATE_HEAP_SIZE=8g
 crate crate
  -Des.path.data="/data/data1,/data/data2"
  -Des.multicast.enabled=false
  -Des.network.publish_host=$PRIVATE_IP
  -Des.discovery.zen.ping.unicast.hosts=$HOSTS
Я хотел бы предложить, чтобы вы установили класс кода для этого более детального контроля того, как он будет отображаться, то есть для вышеупомянутого я бы использовал <code data-trim class="bash">
Последствия
Анимации и эффекты ограничиваются переходами между слайдами, анимированным фоном и «фрагментами», элементами слайдов, которые могут отображаться постепенно. Некоторые могут посчитать это немного творчески ограничивающим, но мы все знаем, что анимация презентации чаще перестарается, чем наоборот.
Использование Markdown
В своем вступлении я упомянул, что хотел бы иметь возможность написать свой текст один раз, а затем повторно использовать его для нескольких целей. С загрузкой уценки Reveal и некоторым планированием это (в основном) возможно.
Чтобы использовать файл Markdown в качестве источника ваших слайдов, вы используете следующий код вместо создания последовательности разделов:
<section data-markdown="index.md"
data-separator="\n\n\n"
data-separator-vertical="\n### "
data-separator-notes="^Note:"
data-charset="iso-8859-15">
</section>
Важными параметрами выше являются значения разделителя. Они позволяют определить, как структура файла Markdown влияет на конструкцию слайда, и именно здесь планирование вступает в игру.
В приведенном выше примере я определил три новые строки, чтобы определить начало нового слайда и заголовок уровня 3, который будет вертикальным слайдом. Это позволяет мне иметь достаточно хорошо структурированный файл уценки для нескольких целей.
Представляя
Докладчик отмечает
Мне нравится создавать презентации с большим количеством изображений, оставляя как можно больше текста для меня, а не для чтения людьми. Это означает, что мне нужны заметки и я ценю вид докладчика, который есть во всех программах для презентаций.
Reveal обеспечивает то же самое, открывая отдельное окно браузера, когда вы нажимаете клавишу « s ». Это окно содержит заметки докладчика для текущего слайда, следующего слайда, таймера и дополнительного набора элементов управления.
В некоторых отношениях для презентаций, которые включают демонстрации, раскрытие лучше, чем «обычные» приложения, поскольку вам не нужно постоянно переключаться с полноэкранных приложений или находить потерянные окна терминала или окна кода на расширенных рабочих столах. Все можно расположить там, где и когда вам это нужно.
Обзор и полноэкранный режим
Быстрое нажатие клавиши « Esc » или « o » приведет к уменьшению обзора всех слайдов в вашей презентации, отлично подходит для поиска определенного слайда или, возможно, для имитации prezi. Нажатие « F » переведет вашу презентацию в полноэкранный режим, что означает, что вам не нужно полагаться на браузер для этого, поскольку это может быть противоречивым.
Продолжая презентацию
API
Любое другое программное обеспечение для презентации поставляется с API ?
Этот API-интерфейс позволяет вам использовать самые разные интересные возможности во время презентации. Одним из простых примеров может быть прямая трансляция ссылки на текущий слайд. Другой может быть фиксация кода, который вы отображаете на экране, в репозитории, а затем отправка его по окончании презентации. Буквально создание демо для людей на месте.
Возможности практически безграничны, и если вы хотите получить еще больше мета, раскрыть себя можно с помощью API.
Плагины
Если вам понадобится дополнительная функциональность, имеется ограниченное количество доступных плагинов , но так как это всего лишь JavaScript, вы всегда можете создать свой собственный.
экспорт
Чтобы вписаться в мою стратегию «Пиши один раз, перепрофилировать несколько раз», экспорт является важным фактором. Встроенный экспорт PDF в Reveal немного разочаровывает, полагаясь исключительно на специальную таблицу стилей и диалоговое окно печати браузера, что еще хуже, это только Chrome / Chromium.
Существуют и другие доступные варианты, такие как использование WKHTMLtoPDF или Markdown to PDF через Pandoc и Latex , но их лучше сохранить для другой статьи.
Придерживаясь опции показа по умолчанию, она проста в использовании. Добавьте print-pdf? Print-pdf, и презентация будет визуализирована с использованием таблицы стилей pdf ( css / print / pdf.css ), и вы затем положитесь на диалог печати для экспорта в PDF. Вы обнаружите, что таблица стилей по умолчанию нуждается в некоторой настройке, и я не уверен, почему это будет работать только в Chrome, если он просто использует системный диалог печати.
Другой вариант — это проект DeckTape, который является экспортером PDF для каркасов HTML-презентаций. Я еще не пробовал, но потребуется больше настроек.
Вывод
Раскрытие и другие подобные фреймворки не станут полной заменой PowerPoint / Keynote для всех, но если вы захотите попробовать что-то другое, чтобы открыть себя для новых возможностей, с ними легко начать.
Я новичок в использовании таких платформ, но с энтузиазмом изучаю их полный потенциал для интеграции и оптимизации рабочих процессов. Мне бы очень хотелось, чтобы советы, приемы и методы, которые вы использовали, чтобы достичь того же.