Персональные инструменты
 

S5 (MediaWiki) — различия между версиями

Материал из CustisWiki

Перейти к: навигация, поиск
м (1 версия)
(Создание собственных стилей)
 
Строка 1: Строка 1:
[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>.
  
 
Нашими усилиями была прикручена к движку MediaWiki в виде расширения, исходные коды которого находятся в нашем SVN.
 
Нашими усилиями была прикручена к движку MediaWiki в виде расширения, исходные коды которого находятся в нашем SVN.
 
 
  
 
== Использование ==
 
== Использование ==
  
S5 предоставляет простой, удобный и быстрый способ порождения презентаций из плоского текста. При этом, естественно, остаются все возможности MediaWiki — Flash-видео, Mindmap’ы, раскраска кода и прочие.
+
S5 предоставляет простой, удобный и быстрый способ порождения презентаций из плоского текста. При этом, естественно, остаются все возможности MediaWiki — Flash-видео, Mindmap’ы, раскраска кода и прочие.
  
 
Чтобы превратить страницу в презентацию, на неё следует добавить блок следующего вида:
 
Чтобы превратить страницу в презентацию, на неё следует добавить блок следующего вида:
Строка 21: Строка 19:
  
 
;style: Имя стиля, используемого для презентации.
 
;style: Имя стиля, используемого для презентации.
;headingmark: Подстрока для отбора заголовков (== Обычных Заголовков MediaWiki любого уровня ==), которые станут слайдами в режиме презентации. Если заголовок включает в себя эту строку — он станет слайдом. Если атрибут headingmark не задан — слайдами станут все заголовки.
+
;headingmark: Подстрока для отбора заголовков (== Обычных Заголовков MediaWiki любого уровня ==), которые станут слайдами в режиме презентации. Если заголовок включает в себя эту строку — он станет слайдом. Если атрибут headingmark не задан — слайдами станут все заголовки.
 
;incmark: Подстрока для отбора слайдов, которые должны отображаться «по шагам».
 
;incmark: Подстрока для отбора слайдов, которые должны отображаться «по шагам».
 
;pagebreak: Специальная последовательность символов, которая при указании где-нибудь посередине текста слайда разбивает слайд на несколько.
 
;pagebreak: Специальная последовательность символов, которая при указании где-нибудь посередине текста слайда разбивает слайд на несколько.
;scaled: Значения true, yes или 1 (в любом регистре букв) данного атрибута включают экспериментальный режим индивидуального масштабирования шрифтов для каждого слайда — S5 будет стараться увеличить или уменьшить размер шрифта так, чтобы слайд вписывался в окно, при переходе к каждому следующему слайду.
+
;scaled: Значения true, yes или 1 (в любом регистре букв) данного атрибута включают экспериментальный режим индивидуального масштабирования шрифтов для каждого слайда — S5 будет стараться увеличить или уменьшить размер шрифта так, чтобы слайд вписывался в окно, при переходе к каждому следующему слайду.
 
;author: Автор презентации (для титульного слайда). Может содержать любой Wiki-код.
 
;author: Автор презентации (для титульного слайда). Может содержать любой Wiki-код.
 
;title: Заголовок презентации. Может содержать любой Wiki-код.
 
;title: Заголовок презентации. Может содержать любой Wiki-код.
Строка 30: Строка 28:
 
;subfooter: Строка, отображаемая внизу каждого слайда. Может содержать любой Wiki-код. Кроме того, внутри неё специальным является слово <tt><nowiki>{{date}}</nowiki></tt>, взамен которого подставляется дата изменения страницы.
 
;subfooter: Строка, отображаемая внизу каждого слайда. Может содержать любой Wiki-код. Кроме того, внутри неё специальным является слово <tt><nowiki>{{date}}</nowiki></tt>, взамен которого подставляется дата изменения страницы.
  
Далее всё не просто, а очень просто — на странице появляется изображение-предпросмотр стиля, при клике по которому откроется новое окно браузера с готовой к показу презентацией. В случае Opera режим презентации включается нажатием F11.
+
Далее всё не просто, а очень просто — на странице появляется изображение-предпросмотр стиля, при клике по которому откроется новое окно браузера с готовой к показу презентацией. В случае Opera режим презентации включается нажатием F11.
  
 
Все заголовки, помеченные '''headingmark''' (например «Слайд: Аннотация»), или даже не помеченные ничем в случае, если '''headingmark''' пустой, будут превращены в слайды.
 
Все заголовки, помеченные '''headingmark''' (например «Слайд: Аннотация»), или даже не помеченные ничем в случае, если '''headingmark''' пустой, будут превращены в слайды.
Строка 40: Строка 38:
 
<tab sep="bar" head="top">
 
<tab sep="bar" head="top">
 
custis|default|blue
 
custis|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/default/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/blue/preview.png
 
</tab>
 
</tab>
 
<tab sep="bar" head="top">
 
<tab sep="bar" head="top">
 
flower|yatil|pixel
 
flower|yatil|pixel
{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/flower/preview.png|{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/yatil/preview.png|{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/pixel/preview.png
+
{{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/flower/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/yatil/preview.png | {{SERVER}}{{SCRIPTPATH}}/extensions/S5SlideShow/pixel/preview.png
 
</tab>
 
</tab>
 +
 +
=== Создание собственных стилей ===
 +
 +
С расширением S5 можно легко создавать собственные стили (скины), используя только вики-страницы. Скин S5 — это просто файл с CSS-стилями для специфических элементов. Если быть точным, каждый скин S5 включает в себя несколько CSS’ок, но для смены скинов менять, по сути, нужно только одну «pretty.css».
 +
 +
CSS стили нужно помещать на страницы с именами вида '''<tt>[[MediaWiki:S5/custis/pretty.css]]</tt>''', здесь '''<tt>custis</tt>''' — имя стиля (замените на своё), а '''<tt>pretty.css</tt>''' — имя CSS’ки. В основном вам нужно менять как раз <tt>pretty.css</tt>, но если внезапно окажется, что какие-то из стандартных стилей тоже нужно поменять — также можно менять '''<tt>core.css</tt>''', '''<tt>base.css</tt>''' и '''<tt>framing.css</tt>'''. Точно так же можно менять и «встроенные» скины — содержимое с вики-страницы имеет приоритет над файлами из дистрибутива расширения.
 +
 +
В CSS-стилях, очевидно, могут использоваться изображения. С ними тоже всё просто — если вы хотите использовать какое-то своё изображение, загрузите файл с ним с обычной [[Special:Upload|страницы загрузки]] (в названии обязательно использовать '''только''' латинские буквы, цифры и символы '.', '-', и '_'), и пропишите в свой CSS в виде '''<tt>url(filename.png)</tt>'''. При генерации стиля эта конструкция будет автоматически заменена на корректный путь к вашему изображению.
 +
 +
После этого, если передать в параметре '''<tt>&lt;slide style=""&gt;</tt>''' имя вашего стиля, именно его вы и увидите в своей презентации.
 +
 +
Ссылки на стили для примера — открывайте, несмотря на то, что они красные, там будут показаны стили скина blue по умолчанию:
 +
* [[MediaWiki:S5/blue/core.css]]
 +
* [[MediaWiki:S5/blue/base.css]]
 +
* [[MediaWiki:S5/blue/framing.css]]
 +
* [[MediaWiki:S5/blue/pretty.css]]
  
 
== Замечания ==
 
== Замечания ==
  
; Дуализм: Есть пара моментов, которые делают S5 в сочетании с MediaWiki уникальной — во-первых, презентации порождаются '''очень просто''', а во-вторых, можно больше не мучаться с примечаниями или поддержанием двух версий презентации — «для показа» и «для самостоятельного чтения». Для самостоятельного чтения можно использовать статью в обычном режиме, так как есть возможность сделать слайдами не все заголовки. Кроме того, конечно, такие презентации разрешают совместную работу, контроль версий и прочее, как и обычные статьи.
+
; Дуализм: Есть пара моментов, которые делают S5 в сочетании с MediaWiki уникальной — во-первых, презентации порождаются '''очень просто''', а во-вторых, можно больше не мучаться с примечаниями или поддержанием двух версий презентации — «для показа» и «для самостоятельного чтения». Для самостоятельного чтения можно использовать статью в обычном режиме, так как есть возможность сделать слайдами не все заголовки. Кроме того, конечно, такие презентации разрешают совместную работу, контроль версий и прочее, как и обычные статьи.
 
; Opera: Как уже было указано выше, для перехода в режим презентации в Opera используется клавиша F11 (разворот на полный экран). В Firefox и Chrome это не обязательно.
 
; Opera: Как уже было указано выше, для перехода в режим презентации в Opera используется клавиша F11 (разворот на полный экран). В Firefox и Chrome это не обязательно.
 
; Панель управления: В правом нижнем углу, если в него переместить курсор, можно увидеть небольшую панель управления презентацией.
 
; Панель управления: В правом нижнем углу, если в него переместить курсор, можно увидеть небольшую панель управления презентацией.
; Выбор стиля: Презентацию можно открыть в любом стиле из доступных, не изменяя текст статьи — для этого к параметрам URL нужно добавить значение <tt>&style=имя</tt> (имя — имя стиля).
+
; Выбор стиля: Презентацию можно открыть в любом стиле из доступных, не изменяя текст статьи — для этого к параметрам URL нужно добавить значение <tt>&style=имя</tt> (имя — имя стиля).
; 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», а «anim over», содержимое элемента будет показываться не просто инкрементально, а по очереди в одном и том же месте. С помощью этого можно делать эффекты, подобные следующим: [http://meyerweb.com/eric/tools/s5/s5-intro.html#slide10 пример анимации] (смотреть только в Firefox/Chrome, так как на сайте автора размещена старая версия S5). ''У автора «на поток» эта технология поставлена не была — сие наша докрутка.''
; Ссылка на слайд: Чтобы дать ссылку на конкретный слайд презентации, можно воспользоваться синтаксисом <tt>#slideN</tt>, где N — номер слайда, начиная с нуля (0 — титульный слайд). Кстати, при обновлении презентации в окне браузера (F5, Ctrl-R) позиция (номер текущего слайда) сохраняется.
+
; Ссылка на слайд: Чтобы дать ссылку на конкретный слайд презентации, можно воспользоваться синтаксисом <tt>#slideN</tt>, где N — номер слайда, начиная с нуля (0 — титульный слайд). Кстати, при обновлении презентации в окне браузера (F5, Ctrl-R) позиция (номер текущего слайда) сохраняется.
  
 
== Пример ==
 
== Пример ==
Строка 70: Строка 84:
 
</slide>
 
</slide>
 
</pre>
 
</pre>
 
 
  
 
== Установка расширения ==
 
== Установка расширения ==

Текущая версия на 15:06, 10 мая 2011

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 различных стилей:

custisdefaultblue
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 по умолчанию:

Замечания

Дуализм
Есть пара моментов, которые делают 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 = '\\\\';

Внимание! Данная статья выбрана для репликации во внешнюю базу знаний компании. Пожалуйста, не допускайте в этой статье публикацию конфиденциальной информации, ведения обсуждений в теле статьи, и более ответственно относитесь к качеству самой статьи — проверяйте орфографию, пишите по-русски, избегайте непроверенной вами информации.