S5 или просто S5 — кроссбраузерная система быстрого создания презентаций на чистом HTML+JavaScript. Название происходит от Simple Standards-based Slide Show System — 5 раз «S», или S5.
Нашими усилиями была прикручена к движку MediaWiki в виде расширения, исходные коды которого находятся в нашем SVN.
Использование
S5 предоставляет простой, удобный и быстрый способ порождения презентаций из плоского текста. При этом, естественно, остаются все возможности MediaWiki — Flash-видео, Mindmap’ы, раскраска кода и прочие.
Чтобы превратить страницу в презентацию, на неё следует добавить блок следующего вида:
<slide атрибут="значение" [атрибут="значение" ...]>
;атрибут: Значение
[;атрибут: Значение ...]
</slide>
Атрибуты могут задаваться как в XML-like атрибутах тега <slide>, так и в виде списка определений внутри тега <slide>, и включают в себя:
- style
- Имя стиля, используемого для презентации.
- headingmark
- Подстрока для отбора заголовков (== Обычных Заголовков MediaWiki любого уровня ==), которые станут слайдами в режиме презентации. Если заголовок включает в себя эту строку — он станет слайдом. Если атрибут headingmark не задан — слайдами станут все заголовки.
- incmark
- Подстрока для отбора слайдов, которые должны отображаться «по шагам».
- pagebreak
- Специальная последовательность символов, которая при указании где-нибудь посередине текста слайда разбивает слайд на несколько.
- scaled
- Значения true, yes или 1 (в любом регистре букв) данного атрибута включают экспериментальный режим индивидуального масштабирования шрифтов для каждого слайда — S5 будет стараться увеличить или уменьшить размер шрифта так, чтобы слайд вписывался в окно, при переходе к каждому следующему слайду.
- author
- Автор презентации (для титульного слайда). Может содержать любой Wiki-код.
- title
- Заголовок презентации. Может содержать любой Wiki-код.
- subtitle
- Подзаголовок (для титульного слайда). Может содержать любой Wiki-код.
- subfooter
- Строка, отображаемая внизу каждого слайда. Может содержать любой Wiki-код. Кроме того, внутри неё специальным является слово {{date}}, взамен которого подставляется дата изменения страницы.
Далее всё не просто, а очень просто — на странице появляется изображение-предпросмотр стиля, при клике по которому откроется новое окно браузера с готовой к показу презентацией. В случае Opera режим презентации включается нажатием F11.
Все заголовки, помеченные headingmark (например «Слайд: Аннотация»), или даже не помеченные ничем в случае, если headingmark пустой, будут превращены в слайды.
Стили
У нас доступно 6 различных стилей:
| custis | default | blue |
|---|
 |
| flower | yatil | pixel |
|---|
 |
Замечания
- Дуализм
- Есть пара моментов, которые делают S5 в сочетании с MediaWiki уникальной — во-первых, презентации порождаются очень просто, а во-вторых, можно больше не мучаться с примечаниями или поддержанием двух версий презентации — «для показа» и «для самостоятельного чтения». Для самостоятельного чтения можно использовать статью в обычном режиме, так как есть возможность сделать слайдами не все заголовки. Кроме того, конечно, такие презентации разрешают совместную работу, контроль версий и прочее, как и обычные статьи.
- Opera
- Как уже было указано выше, для перехода в режим презентации в Opera используется клавиша F11 (разворот на полный экран). В Firefox и Chrome это не обязательно.
- Панель управления
- В правом нижнем углу, если в него переместить курсор, можно увидеть небольшую панель управления презентацией.
- Выбор стиля
- Презентацию можно открыть в любом стиле из доступных, не изменяя текст статьи — для этого к параметрам URL нужно добавить значение &style=имя (имя — имя стиля).
- WISYWIM
- Можно использовать автоматический предпросмотр при редактировании статьи с презентацией — отметьте флажок «слайды» под полем редактирования текста статьи, выберите желаемый интервал обновления и отметьте флажок «Автопредпросмотр». Откроется новая вкладка или окно браузера, которое можно разместить, к примеру, на втором мониторе, и редактировать статьи в «почти WISYWIM» (What You See Is What You Mean) режиме.
- Инкрементальное отображение
- К нему есть 3 пути.
Первый: В рамках одного «инкрементального» слайда (помеченного incmark) все списки — и маркированные, и нумерованные — будут показываться попунктно.
Второй: На любых, не обязательно помеченных incmark слайдах можно размещать HTML-элемент с классом «anim» (например <div class="anim"><div>п.1</div><div>п.2</div></div> и т. п.), и его содержимое будет показано по шагам.
Третий: отдельный элемент можно пометить class="incremental" и он станет отдельным дополнительным «шагом» показа.
- Покадровые «анимации»
- Если пометить что-нибудь не просто «anim», а «anim over», содержимое элемента будет показываться не просто инкрементально, а по очереди в одном и том же месте. С помощью этого можно делать эффекты, подобные следующим: пример анимации (смотреть только в Firefox/Chrome, так как на сайте автора размещена старая версия S5). У автора «на поток» эта технология поставлена не была — сие наша докрутка.
- Ссылка на слайд
- Чтобы дать ссылку на конкретный слайд презентации, можно воспользоваться синтаксисом #slideN, где N — номер слайда, начиная с нуля (0 — титульный слайд). Кстати, при обновлении презентации в окне браузера (F5, Ctrl-R) позиция (номер текущего слайда) сохраняется.
Пример
Пример описания (можно использовать как «рыбу»-заготовку для copy-paste):
<slide style="custis" headingmark="Слайд:" incmark="(по шагам)" scaled="true">
;author: Олег Клинчаев
;title: Многопоточность в Java (начало)
;subtitle: Многопоточность в Java (начало)
;subfooter: {{date}}
</slide>
Установка расширения
Установка максимально проста. Достаточно извлечь исходные коды в директорию /extensions/S5SlideShow (именно такую, иначе нужно менять пути в коде) и добавить в LocalSettings.php строчку:
require_once "/extensions/S5SlideShow/S5SlideShow.php";
Также, если очень хочется, можно прописать немножко конфигурации:
// маркер заголовка-слайда по умолчанию, в случае, если атрибут headingmark не указан
$egS5SlideHeadingMark = '';
// маркер инкрементального слайда по умолчанию
$egS5SlideIncMark = '(step)';
// маркер разрыва слайда по умолчанию (pagebreak)
$egS5SlidePageBreak = '\\\\';
