Difference between revisions of "S5SlideShow/ru"
(→Установка расширения) |
(→Стили) |
||
Line 51: | Line 51: | ||
== Стили == | == Стили == | ||
− | У нас доступно | + | У нас доступно 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"> |
Revision as of 14:44, 20 May 2013
S5 или просто S5 — кроссбраузерная система быстрого создания презентаций на чистом HTML+JavaScript. Название происходит от Simple Standards-based Slide Show System — 5 раз «S», или S5.
S5SlideShow — расширение MediaWiki.
- Назначение: Быстрое, простое и удобное порождение ВикиПрезентаций с помощью S5 прямо из вики-страниц.
- Репозиторий: https://github.com/mediawiki4intranet/S5SlideShow
- Домашняя страница: http://wiki.4intra.net/S5SlideShow, S5SlideShow на mediawiki.org
- Лицензия: GPLv3.0+
- Дата создания: 2010-02-09
- Оценка расширения: Вероятно полезное (4)
Включение в сборку Mediawiki4Intranet:
- Дата включения: 2010-02-09
- Включённая версия: последняя
- Состояние доработок: Создано в рамках MediaWiki4Intranet
Пример презентации: User:StasFomin/VideoKnowHow.
Contents
Использование
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 пустой, будут превращены в слайды.
Стили
У нас доступно 7 различных стилей:
custis | nobook | default | blue |
---|---|---|---|
flower | yatil | pixel |
---|---|---|
Создание собственных стилей
С расширением 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 по умолчанию:
- MediaWiki:S5/blue/core.css
- MediaWiki:S5/blue/base.css
- MediaWiki:S5/blue/framing.css
- MediaWiki:S5/blue/pretty.css
Вы можете использовать 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», а «anim over», содержимое элемента будет показываться не просто инкрементально, а по очереди в одном и том же месте. С помощью этого можно делать эффекты, подобные следующим: пример анимации (смотреть только в Firefox/Chrome, так как на сайте автора размещена старая версия S5). У автора «на поток» эта технология поставлена не была — сие наша докрутка.
- Ссылка на слайд
- Чтобы дать ссылку на конкретный слайд презентации, можно воспользоваться синтаксисом #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 не указан $egS5SlideHeadingMark = ''; // маркер инкрементального слайда по умолчанию $egS5SlideIncMark = '(step)';
Изменения
- 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 заменить поддержку загрузки текста из сессии поддержкой «сохранения, не выходя из редактирования»