Difference between revisions of "S5SlideShow/ru"

From Wiki4Intranet
Jump to: navigation, search
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[File:S5MW.svg|300px|right]]
 +
 
[http://meyerweb.com/eric/tools/s5/ S<sup>5</sup> или просто S5] — кроссбраузерная система быстрого создания презентаций на чистом HTML+JavaScript. Название происходит от Simple Standards-based Slide Show System — 5 раз «S», или S<sup>5</sup>.
 
[http://meyerweb.com/eric/tools/s5/ S<sup>5</sup> или просто S5] — кроссбраузерная система быстрого создания презентаций на чистом HTML+JavaScript. Название происходит от Simple Standards-based Slide Show System — 5 раз «S», или S<sup>5</sup>.
  
[[S5SlideShow]] — расширение MediaWiki, позволяющее просто, быстро и удобно создавать презентации с помощью S5 на вики-страницах.
+
{{ExtensionFromInfo|lang=ru|name=S5SlideShow}}
 
+
Исходные коды находятся в Google Code по адресу:
+
* http://code.google.com/p/mediawiki4intranet/source/browse?r=mw4i-ext#hg%2Fextensions%2FS5SlideShow
+
* (TBZ2-архив, версия от 2011-05-10): http://mediawiki4intranet.googlecode.com/files/S5SlideShow-2011-05-10.tar.bz2
+
 
+
Страница расширения на mediawiki.org: [[mediawikiwiki:Extension:S5SlideShow|Extension:S5SlideShow]].
+
  
 
Пример презентации: [[User:StasFomin/VideoKnowHow]].
 
Пример презентации: [[User:StasFomin/VideoKnowHow]].
Line 18: Line 14:
  
 
<pre>
 
<pre>
<slide атрибут="значение" [атрибут="значение" ...]>
+
<slideshow атрибут="значение" [атрибут="значение" ...]>
 
;атрибут: Значение
 
;атрибут: Значение
 
[;атрибут: Значение ...]
 
[;атрибут: Значение ...]
</slide>
+
</slideshow>
 
</pre>
 
</pre>
  
 
Атрибуты могут задаваться как в XML-like атрибутах тега <tt>&lt;slide&gt;</tt>, так и в виде списка определений внутри тега <tt>&lt;slide&gt;</tt>, и включают в себя:
 
Атрибуты могут задаваться как в XML-like атрибутах тега <tt>&lt;slide&gt;</tt>, так и в виде списка определений внутри тега <tt>&lt;slide&gt;</tt>, и включают в себя:
  
;style: Имя стиля, используемого для презентации.
+
{| class="wikitable" style="width:100%;"
;headingmark: Подстрока для отбора заголовков (== Обычных Заголовков MediaWiki любого уровня ==), которые станут слайдами в режиме презентации. Если заголовок включает в себя эту строку — он станет слайдом. Если атрибут headingmark не задан — слайдами станут все заголовки.
+
!style="width:15%;"|Атрибут
;incmark: Подстрока для отбора слайдов, которые должны отображаться «по шагам».
+
!Описание
;pagebreak: Специальная последовательность символов, которая при указании где-нибудь посередине текста слайда разбивает слайд на несколько.
+
|-
;scaled: Значения true, yes или 1 (в любом регистре букв) данного атрибута включают экспериментальный режим индивидуального масштабирования шрифтов для каждого слайда — S5 будет стараться увеличить или уменьшить размер шрифта так, чтобы слайд вписывался в окно, при переходе к каждому следующему слайду.
+
|style || Имя стиля, используемого для презентации. Встроенные стили — blue, default, custis, flower, yatil, pixel.
;author: Автор презентации (для титульного слайда). Может содержать любой Wiki-код.
+
|-
;title: Заголовок презентации. Может содержать любой Wiki-код.
+
|headingmark || Подстрока для отбора заголовков (== Обычных Заголовков MediaWiki любого уровня ==), которые станут слайдами в режиме презентации. Если заголовок включает в себя эту строку — он станет слайдом. Если атрибут headingmark не задан — будет использовано значение по умолчанию из конфигурации при установке. Если headingmark пуст, то ни один подзаголовок не будет слайдом, для генерации слайдов будет использован только тег &lt;slides&gt;
;subtitle: Подзаголовок (для титульного слайда). Может содержать любой Wiki-код.
+
|-
;subfooter: Строка, отображаемая внизу каждого слайда. Может содержать любой Wiki-код. Кроме того, внутри неё специальным является слово <tt><nowiki>{{date}}</nowiki></tt>, взамен которого подставляется дата изменения страницы.
+
|incmark || Подстрока для отбора слайдов, списки внутри которых должны отображаться «по шагам».
 +
|-
 +
|centermark || Подстрока для отбора слайдов, содержимое которых нужно центрировать несмотря на наличие заголовка.
 +
|-
 +
|scaled || Значения true, yes или 1 (в любом регистре букв) данного атрибута включают режим индивидуального масштабирования содержимого каждого слайда. Масштабируется размер шрифта и изображения, включая SVG-изображения. Также есть экспериментальный режим CSS3-машстабирования любых html-элементов с css-классом «scaled», но с ним возможны глюки.
 +
|-
 +
|author || Автор презентации (для титульного слайда). Может содержать любой Wiki-код.
 +
|-
 +
|title || Заголовок презентации. Может содержать любой Wiki-код.
 +
|-
 +
|subtitle || Подзаголовок (для титульного слайда). Может содержать любой Wiki-код.
 +
|-
 +
|subfooter || Строка, отображаемая внизу каждого слайда. Может содержать любой Wiki-код. Кроме того, внутри неё специальным является слово <tt><nowiki>{{date}}</nowiki></tt>, взамен которого подставляется дата изменения страницы.
 +
|}
  
 
Далее всё не просто, а очень просто — на странице появляется изображение-предпросмотр стиля, при клике по которому откроется новое окно браузера с готовой к показу презентацией. В случае Opera режим презентации включается нажатием F11.
 
Далее всё не просто, а очень просто — на странице появляется изображение-предпросмотр стиля, при клике по которому откроется новое окно браузера с готовой к показу презентацией. В случае Opera режим презентации включается нажатием F11.
  
 
Все заголовки, помеченные '''headingmark''' (например «Слайд: Аннотация»), или даже не помеченные ничем в случае, если '''headingmark''' пустой, будут превращены в слайды.
 
Все заголовки, помеченные '''headingmark''' (например «Слайд: Аннотация»), или даже не помеченные ничем в случае, если '''headingmark''' пустой, будут превращены в слайды.
 +
 +
=== Печать и PDF-экспорт ===
 +
 +
Для пущей интероперабельности S5 поддерживает печать и экспорт в PDF. Интерактив на печати и в PDF, естественно, невозможен — печатается только статическое содержимое. Списки, показываемые «по шагам», отобразятся целиком; анимации и медиавозможности типа просматриваемых Flash-апплетом MindMap’ов (см. расширение [[MMHandler]]), а также вставленные видеоролики, не отобразятся вообще.
 +
 +
Однако это же не значит, что печать бесполезна — поэтому её поддержка в S5 есть. Итак, для печати:
 +
* Лучше использовать Firefox. Можно Chrome, но не будет фоновых изображений, а также CSS3- и SVG-градиентов (допустимо для печати, но не очень хорошо для PDF-экспорта).
 +
* Находясь в режиме презентации, подведите мышку в правый нижний угол экрана и нажмите первую иконку (с принтером).
 +
* Введите желаемый размер бумаги (по умолчанию А4, то есть, 297x210 мм), нажмите ОК и подождите перезагрузки страницы.
 +
После полной загрузки страницы:
 +
* Выберите '''Файл &rarr; Печать'''.
 +
* Обязательно установите идентичный выбранному размер бумаги и масштаб 100 %.
 +
* В настройках печати Firefox очистите колонтитулы (header/footer), и по желанию — выберите флажками печать фоновых цветов и изображений («Print Background Colors», «Print Background Images»).
 +
* Для PDF-экспорта выберите PDF-принтер. В Linux оный есть всегда, в Шиндошс его нужно устанавливать отдельно ([http://pages.cs.wisc.edu/~ghost/ Ghostscript]).
 +
* Собственно, нажмите «печать».
  
 
== Стили ==
 
== Стили ==
  
У нас доступно 6 различных стилей:
+
У нас доступно 7 различных стилей:
  
 
<tab sep="bar" head="top">
 
<tab sep="bar" head="top">
custis|default|blue
+
custis|nobook|default|blue
{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/custis/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/default/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/blue/preview.png
+
{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/custis/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/nobook/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/default/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/blue/preview.png
 
</tab>
 
</tab>
 
<tab sep="bar" head="top">
 
<tab sep="bar" head="top">
Line 68: Line 92:
 
* [[MediaWiki:S5/blue/framing.css]]
 
* [[MediaWiki:S5/blue/framing.css]]
 
* [[MediaWiki:S5/blue/pretty.css]]
 
* [[MediaWiki:S5/blue/pretty.css]]
 +
 +
{{note}} Вы можете использовать [[MediaWiki:S5/custis/pretty.css|pretty.css]] из стиля custis как базу для своего первого скина — просто замените логотип :)
 +
 +
Вы также можете загрузить картинку для предпросмотра вашего нового скина — используйте имя файла типа [[Media:S5-devconf-preview.png]], где «devconf» — имя стиля. Картинка будет автоматически масштабирована до нужного размера (~200px).
  
 
== Замечания ==
 
== Замечания ==
Line 77: Line 105:
 
; WISYWIM: Можно использовать автоматический предпросмотр при редактировании статьи с презентацией — отметьте флажок «слайды» под полем редактирования текста статьи, выберите желаемый интервал обновления и отметьте флажок «Автопредпросмотр». Откроется новая вкладка или окно браузера, которое можно разместить, к примеру, на втором мониторе, и редактировать статьи в «почти WISYWIM» (What You See Is What You Mean) режиме.
 
; WISYWIM: Можно использовать автоматический предпросмотр при редактировании статьи с презентацией — отметьте флажок «слайды» под полем редактирования текста статьи, выберите желаемый интервал обновления и отметьте флажок «Автопредпросмотр». Откроется новая вкладка или окно браузера, которое можно разместить, к примеру, на втором мониторе, и редактировать статьи в «почти WISYWIM» (What You See Is What You Mean) режиме.
 
; Инкрементальное отображение: К нему есть 3 пути.<br />'''Первый''': В рамках одного «инкрементального» слайда (помеченного '''incmark''') все списки — и маркированные, и нумерованные — будут показываться попунктно.<br />'''Второй''': На любых, не обязательно помеченных '''incmark''' слайдах можно размещать HTML-элемент с классом «anim» (например <tt><nowiki><div class="anim"><div>п.1</div><div>п.2</div></div></nowiki></tt> и т. п.), и его содержимое будет показано по шагам.<br />'''Третий''': отдельный элемент можно пометить <tt><nowiki>class="incremental"</nowiki></tt> и он станет отдельным дополнительным «шагом» показа.
 
; Инкрементальное отображение: К нему есть 3 пути.<br />'''Первый''': В рамках одного «инкрементального» слайда (помеченного '''incmark''') все списки — и маркированные, и нумерованные — будут показываться попунктно.<br />'''Второй''': На любых, не обязательно помеченных '''incmark''' слайдах можно размещать HTML-элемент с классом «anim» (например <tt><nowiki><div class="anim"><div>п.1</div><div>п.2</div></div></nowiki></tt> и т. п.), и его содержимое будет показано по шагам.<br />'''Третий''': отдельный элемент можно пометить <tt><nowiki>class="incremental"</nowiki></tt> и он станет отдельным дополнительным «шагом» показа.
; Покадровые «анимации»: Если пометить что-нибудь не просто «anim», а «anim over», содержимое элемента будет показываться не просто инкрементально, а по очереди в одном и том же месте. С помощью этого можно делать эффекты, подобные следующим: [http://meyerweb.com/eric/tools/s5/s5-intro.html#slide10 пример анимации] (смотреть только в Firefox/Chrome, так как на сайте автора размещена старая версия S5). ''У автора «на поток» эта технология поставлена не была — сие наша докрутка.''
+
; Покадровые «анимации»: Если пометить что-нибудь классом «anim over», содержимое элемента будет показываться не просто инкрементально, а по очереди в одном и том же месте. Пример использования: [[S5SlideShow/anim-over|тестовая презентация]].
 
; Ссылка на слайд: Чтобы дать ссылку на конкретный слайд презентации, можно воспользоваться синтаксисом <tt>#slideN</tt>, где N — номер слайда, начиная с нуля (0 — титульный слайд). Кстати, при обновлении презентации в окне браузера (F5, Ctrl-R) позиция (номер текущего слайда) сохраняется.
 
; Ссылка на слайд: Чтобы дать ссылку на конкретный слайд презентации, можно воспользоваться синтаксисом <tt>#slideN</tt>, где N — номер слайда, начиная с нуля (0 — титульный слайд). Кстати, при обновлении презентации в окне браузера (F5, Ctrl-R) позиция (номер текущего слайда) сохраняется.
  
Line 85: Line 113:
  
 
<pre>
 
<pre>
<slide style="custis" headingmark="Слайд:" incmark="(по шагам)" scaled="true">
+
<slideshow style="custis" headingmark="Слайд:" incmark="(по шагам)" scaled="true">
 
;author: Олег Клинчаев
 
;author: Олег Клинчаев
 
;title: Многопоточность в Java (начало)
 
;title: Многопоточность в Java (начало)
 
;subtitle: Многопоточность в Java (начало)
 
;subtitle: Многопоточность в Java (начало)
 
;subfooter: {{date}}
 
;subfooter: {{date}}
</slide>
+
</slideshow>
 
</pre>
 
</pre>
  
Line 97: Line 125:
 
Установка максимально проста. Достаточно извлечь исходные коды в директорию <tt>/extensions/S5SlideShow</tt> (именно такую, иначе нужно менять пути в коде) и добавить в LocalSettings.php строчку:
 
Установка максимально проста. Достаточно извлечь исходные коды в директорию <tt>/extensions/S5SlideShow</tt> (именно такую, иначе нужно менять пути в коде) и добавить в LocalSettings.php строчку:
 
<code-php>
 
<code-php>
require_once "/extensions/S5SlideShow/S5SlideShow.php";
+
require_once "$IP/extensions/S5SlideShow/S5SlideShow.php";
 
</code-php>
 
</code-php>
  
Line 103: Line 131:
 
<code-php>
 
<code-php>
 
// маркер заголовка-слайда по умолчанию, в случае, если атрибут headingmark не указан
 
// маркер заголовка-слайда по умолчанию, в случае, если атрибут headingmark не указан
$egS5SlideHeadingMark = '';
+
// false = не превращать в слайды ничего, "" = превращать в слайды все подзаголовки
 +
$egS5SlideHeadingMark = false;
 
// маркер инкрементального слайда по умолчанию
 
// маркер инкрементального слайда по умолчанию
 
$egS5SlideIncMark = '(step)';
 
$egS5SlideIncMark = '(step)';
// маркер разрыва слайда по умолчанию (pagebreak)
 
$egS5SlidePageBreak = '\\\\';
 
 
</code-php>
 
</code-php>
 +
 +
== Изменения ==
 +
 +
* 2015-10-10: Отныне подзаголовки не включаются на слайды. Если кому-то требуется старое поведение — милости просим ставить issue на гитхабе.
 +
* 2015-10-03: Добавлена поддержка MediaWiki 1.25.
 +
* 2014-05-28: Добавлена возможность превращать в слайды все секции статьи — при headingmark, равным пустой строке.
 +
* 2013-11-06: Исправлена работа <nowiki><tt>class="anim over"</tt></nowiki>, а именно — масштабирование слайдов с анимациями и отображение в печатном режиме и режиме статьи (теперь показывается только последний кадр).
 +
* 2013-09-30: Отображение полей описания тега slideshow в виде definition list’а.
 +
* 2013-05-21: Добавлена возможность печати / PDF-экспорта (авто-масштабированных презентаций).
 +
* 2013-05-15: Исправлено масштабирование SVG на изначально открытом слайде в Chrome.
 +
* 2013-05-15: Добавлен учёт переполнения ширины при автоматическом масштабировании (раньше учитывалась только высота содержимого слайда).
 +
* 2013-05-07: В репозиторий добавлен стиль 'nobook'.
 +
* 2012-08-08: Проверка использования DOM PHP-расширения и DOM-препроцессора, без которых расширение не работает.
 +
* 2012-01-19: Плавное переключение слайдов с помощью CSS3-анимаций.
 +
* 2011-11-01: Убраны все предупреждения под E_STRICT. Убраны уязвимости под register_globals. Режим центрирования слайдов с заголовками (centermark).
 +
* 2011-09-19: Хак парсера для лучшего качества изображений в презентации ($egS5BrowserScaleHack). Картинки, вставленные с заданной шириной, будут масштабироваться браузером, а не MediaWiki.
 +
* 2011-09-12: Исправлены ошибки масштабирования SVG.
 +
* 2011-06-17: Добавлена возможность загрузки предпросмотра собственных стилей как файлов.
 +
* 2011-06-15: CSS классы «noslide» и «slideonly», чтобы скрывать/показывать элементы в режиме статьи/презентации.
 +
* 2011-06-10: Исправлена ошибка в «incmark».
 +
* 2011-06-06: Теперь S5 учитывает статьи-перенаправлениям в режиме презентации.
 +
* 2011-05-29: Рефакторинг — полностью новый движок разбора статей, тег &lt;slide> переименован в &lt;slideshow>, сильно улучшенное масштабирование (+картинки +SVG +CSS3), которое всегда масштабирует картинки с сохранением отношения к размеру шрифта. Также добавлен экспериментальный режим задания слайдов через тег &lt;slides&gt; — такие слайды показываются как «живые миниатюры» в режиме статьи. Опция «pagebreak» удалена.
 +
* 2011-05-10: Возможность создавать собственные стили через вики-статьи.
 +
 +
== TODO ==
 +
 +
* FIXME убрать хардкод путей extensions/S5SlideShow/
 +
* TODO кэшировать CSS-стили
 +
* TODO заменить поддержку загрузки текста из сессии поддержкой «сохранения, не выходя из редактирования»
  
 
[[Category:MediaWiki]]
 
[[Category:MediaWiki]]
 
[[en:S5/en]]
 
[[en:S5/en]]

Latest revision as of 01:34, 11 October 2015

S5MW.svg

S5 или просто S5 — кроссбраузерная система быстрого создания презентаций на чистом HTML+JavaScript. Название происходит от Simple Standards-based Slide Show System — 5 раз «S», или S5.

S5SlideShow — расширение MediaWiki.

Включение в сборку Mediawiki4Intranet:

  • Дата включения: 2010-02-09
  • Включённая версия: последняя
  • Состояние доработок: Создано в рамках MediaWiki4Intranet

Пример презентации: User:StasFomin/VideoKnowHow.

Использование

S5 предоставляет простой, удобный и быстрый способ порождения презентаций из плоского текста. При этом, естественно, остаются все возможности MediaWiki — Flash-видео, Mindmap’ы, раскраска кода и прочие.

Чтобы превратить страницу в презентацию, на неё следует добавить блок следующего вида:

<slideshow атрибут="значение" [атрибут="значение" ...]>
;атрибут: Значение
[;атрибут: Значение ...]
</slideshow>

Атрибуты могут задаваться как в XML-like атрибутах тега <slide>, так и в виде списка определений внутри тега <slide>, и включают в себя:

Атрибут Описание
style Имя стиля, используемого для презентации. Встроенные стили — blue, default, custis, flower, yatil, pixel.
headingmark Подстрока для отбора заголовков (== Обычных Заголовков MediaWiki любого уровня ==), которые станут слайдами в режиме презентации. Если заголовок включает в себя эту строку — он станет слайдом. Если атрибут headingmark не задан — будет использовано значение по умолчанию из конфигурации при установке. Если headingmark пуст, то ни один подзаголовок не будет слайдом, для генерации слайдов будет использован только тег <slides>
incmark Подстрока для отбора слайдов, списки внутри которых должны отображаться «по шагам».
centermark Подстрока для отбора слайдов, содержимое которых нужно центрировать несмотря на наличие заголовка.
scaled Значения true, yes или 1 (в любом регистре букв) данного атрибута включают режим индивидуального масштабирования содержимого каждого слайда. Масштабируется размер шрифта и изображения, включая SVG-изображения. Также есть экспериментальный режим CSS3-машстабирования любых html-элементов с css-классом «scaled», но с ним возможны глюки.
author Автор презентации (для титульного слайда). Может содержать любой Wiki-код.
title Заголовок презентации. Может содержать любой Wiki-код.
subtitle Подзаголовок (для титульного слайда). Может содержать любой Wiki-код.
subfooter Строка, отображаемая внизу каждого слайда. Может содержать любой Wiki-код. Кроме того, внутри неё специальным является слово {{date}}, взамен которого подставляется дата изменения страницы.

Далее всё не просто, а очень просто — на странице появляется изображение-предпросмотр стиля, при клике по которому откроется новое окно браузера с готовой к показу презентацией. В случае Opera режим презентации включается нажатием F11.

Все заголовки, помеченные headingmark (например «Слайд: Аннотация»), или даже не помеченные ничем в случае, если headingmark пустой, будут превращены в слайды.

Печать и PDF-экспорт

Для пущей интероперабельности S5 поддерживает печать и экспорт в PDF. Интерактив на печати и в PDF, естественно, невозможен — печатается только статическое содержимое. Списки, показываемые «по шагам», отобразятся целиком; анимации и медиавозможности типа просматриваемых Flash-апплетом MindMap’ов (см. расширение MMHandler), а также вставленные видеоролики, не отобразятся вообще.

Однако это же не значит, что печать бесполезна — поэтому её поддержка в S5 есть. Итак, для печати:

  • Лучше использовать Firefox. Можно Chrome, но не будет фоновых изображений, а также CSS3- и SVG-градиентов (допустимо для печати, но не очень хорошо для PDF-экспорта).
  • Находясь в режиме презентации, подведите мышку в правый нижний угол экрана и нажмите первую иконку (с принтером).
  • Введите желаемый размер бумаги (по умолчанию А4, то есть, 297x210 мм), нажмите ОК и подождите перезагрузки страницы.

После полной загрузки страницы:

  • Выберите Файл → Печать.
  • Обязательно установите идентичный выбранному размер бумаги и масштаб 100 %.
  • В настройках печати Firefox очистите колонтитулы (header/footer), и по желанию — выберите флажками печать фоновых цветов и изображений («Print Background Colors», «Print Background Images»).
  • Для PDF-экспорта выберите PDF-принтер. В Linux оный есть всегда, в Шиндошс его нужно устанавливать отдельно (Ghostscript).
  • Собственно, нажмите «печать».

Стили

У нас доступно 7 различных стилей:

custisnobookdefaultblue
preview.png preview.png preview.png preview.png
floweryatilpixel
preview.png preview.png preview.png

Создание собственных стилей

С расширением S5 можно легко создавать собственные стили (скины), используя только вики-страницы. Скин S5 — это просто файл с CSS-стилями для специфических элементов. Если быть точным, каждый скин S5 включает в себя несколько CSS’ок, но для смены скинов менять, по сути, нужно только одну «pretty.css».

CSS стили нужно помещать на страницы с именами вида MediaWiki:S5/custis/pretty.css, здесь custis — имя стиля (замените на своё), а pretty.css — имя CSS’ки. В основном вам нужно менять как раз pretty.css, но если внезапно окажется, что какие-то из стандартных стилей тоже нужно поменять — также можно менять core.css, base.css и framing.css. Точно так же можно менять и «встроенные» скины — содержимое с вики-страницы имеет приоритет над файлами из дистрибутива расширения.

В CSS-стилях, очевидно, могут использоваться изображения. С ними тоже всё просто — если вы хотите использовать какое-то своё изображение, загрузите файл с ним с обычной страницы загрузки (в названии обязательно использовать только латинские буквы, цифры и символы '.', '-', и '_'), и пропишите в свой CSS в виде url(filename.png). При генерации стиля эта конструкция будет автоматически заменена на корректный путь к вашему изображению.

После этого, если передать в параметре <slide style=""> имя вашего стиля, именно его вы и увидите в своей презентации.

Ссылки на стили для примера — открывайте, несмотря на то, что они красные, там будут показаны стили скина blue по умолчанию:

Note.svg Вы можете использовать pretty.css из стиля custis как базу для своего первого скина — просто замените логотип :)

Вы также можете загрузить картинку для предпросмотра вашего нового скина — используйте имя файла типа Media:S5-devconf-preview.png, где «devconf» — имя стиля. Картинка будет автоматически масштабирована до нужного размера (~200px).

Замечания

Дуализм
Есть пара моментов, которые делают S5 в сочетании с MediaWiki уникальной — во-первых, презентации порождаются очень просто, а во-вторых, можно больше не мучаться с примечаниями или поддержанием двух версий презентации — «для показа» и «для самостоятельного чтения». Для самостоятельного чтения можно использовать статью в обычном режиме, так как есть возможность сделать слайдами не все заголовки. Кроме того, конечно, такие презентации разрешают совместную работу, контроль версий и прочее, как и обычные статьи.
Opera
Как уже было указано выше, для перехода в режим презентации в Opera используется клавиша F11 (разворот на полный экран). В Firefox и Chrome это не обязательно.
Панель управления
В правом нижнем углу, если в него переместить курсор, можно увидеть небольшую панель управления презентацией.
Выбор стиля
Презентацию можно открыть в любом стиле из доступных, не изменяя текст статьи — для этого к параметрам URL нужно добавить значение &s5skin=имя (имя — имя стиля).
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 over», содержимое элемента будет показываться не просто инкрементально, а по очереди в одном и том же месте. Пример использования: тестовая презентация.
Ссылка на слайд
Чтобы дать ссылку на конкретный слайд презентации, можно воспользоваться синтаксисом #slideN, где N — номер слайда, начиная с нуля (0 — титульный слайд). Кстати, при обновлении презентации в окне браузера (F5, Ctrl-R) позиция (номер текущего слайда) сохраняется.

Пример

Пример описания (можно использовать как «рыбу»-заготовку для copy-paste):

<slideshow style="custis" headingmark="Слайд:" incmark="(по шагам)" scaled="true">
;author: Олег Клинчаев
;title: Многопоточность в Java (начало)
;subtitle: Многопоточность в Java (начало)
;subfooter: {{date}}
</slideshow>

Установка расширения

Установка максимально проста. Достаточно извлечь исходные коды в директорию /extensions/S5SlideShow (именно такую, иначе нужно менять пути в коде) и добавить в LocalSettings.php строчку:

require_once "$IP/extensions/S5SlideShow/S5SlideShow.php";

Также, если очень хочется, можно прописать немножко конфигурации (но это необязательно):

// маркер заголовка-слайда по умолчанию, в случае, если атрибут headingmark не указан
// false = не превращать в слайды ничего, "" = превращать в слайды все подзаголовки
$egS5SlideHeadingMark = false;
// маркер инкрементального слайда по умолчанию
$egS5SlideIncMark = '(step)';

Изменения

  • 2015-10-10: Отныне подзаголовки не включаются на слайды. Если кому-то требуется старое поведение — милости просим ставить issue на гитхабе.
  • 2015-10-03: Добавлена поддержка MediaWiki 1.25.
  • 2014-05-28: Добавлена возможность превращать в слайды все секции статьи — при headingmark, равным пустой строке.
  • 2013-11-06: Исправлена работа <tt>class="anim over"</tt>, а именно — масштабирование слайдов с анимациями и отображение в печатном режиме и режиме статьи (теперь показывается только последний кадр).
  • 2013-09-30: Отображение полей описания тега slideshow в виде definition list’а.
  • 2013-05-21: Добавлена возможность печати / PDF-экспорта (авто-масштабированных презентаций).
  • 2013-05-15: Исправлено масштабирование SVG на изначально открытом слайде в Chrome.
  • 2013-05-15: Добавлен учёт переполнения ширины при автоматическом масштабировании (раньше учитывалась только высота содержимого слайда).
  • 2013-05-07: В репозиторий добавлен стиль 'nobook'.
  • 2012-08-08: Проверка использования DOM PHP-расширения и DOM-препроцессора, без которых расширение не работает.
  • 2012-01-19: Плавное переключение слайдов с помощью CSS3-анимаций.
  • 2011-11-01: Убраны все предупреждения под E_STRICT. Убраны уязвимости под register_globals. Режим центрирования слайдов с заголовками (centermark).
  • 2011-09-19: Хак парсера для лучшего качества изображений в презентации ($egS5BrowserScaleHack). Картинки, вставленные с заданной шириной, будут масштабироваться браузером, а не MediaWiki.
  • 2011-09-12: Исправлены ошибки масштабирования SVG.
  • 2011-06-17: Добавлена возможность загрузки предпросмотра собственных стилей как файлов.
  • 2011-06-15: CSS классы «noslide» и «slideonly», чтобы скрывать/показывать элементы в режиме статьи/презентации.
  • 2011-06-10: Исправлена ошибка в «incmark».
  • 2011-06-06: Теперь S5 учитывает статьи-перенаправлениям в режиме презентации.
  • 2011-05-29: Рефакторинг — полностью новый движок разбора статей, тег <slide> переименован в <slideshow>, сильно улучшенное масштабирование (+картинки +SVG +CSS3), которое всегда масштабирует картинки с сохранением отношения к размеру шрифта. Также добавлен экспериментальный режим задания слайдов через тег <slides> — такие слайды показываются как «живые миниатюры» в режиме статьи. Опция «pagebreak» удалена.
  • 2011-05-10: Возможность создавать собственные стили через вики-статьи.

TODO

  • FIXME убрать хардкод путей extensions/S5SlideShow/
  • TODO кэшировать CSS-стили
  • TODO заменить поддержку загрузки текста из сессии поддержкой «сохранения, не выходя из редактирования»