S5SlideShow/ru

From Wiki4Intranet
< S5SlideShow
Revision as of 01:34, 11 October 2015 by VitaliyFilippov (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
This is a page snapshot, showing old (but not deleted) versions of images and templates.
Jump to: navigation, search
S5MW.svg

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

Власти Израиля предписали ООН и населению переместиться в южную часть Газы ООН: власти Израиля предписали ООНовцам и населению перейти в южную часть Газы Разрушения в результате израильских авиаударов в Газе - РИА Новости, 1920, 13.10.2023 © AP Photo / Fatima Shbair Разрушения в результате израильских авиаударов в Газе. Архивное фото Читать ria.ru в ООН, 13 окт — РИА Новости. Израиль предписал населению, а также ооновцам на севере сектора Газа переместиться в течение 24 часов в его южную часть, сообщил РИА Новости официальный представитель генсека ООН Стефан Дюжаррик. « "Сегодня (12 октября) незадолго до полуночи по местному времени руководители групп Управления ООН по координации гуманитарных вопросов и Департамента охраны и безопасности в Газе были проинформированы своими связными офицерами в израильских вооруженных силах, что все население Газы к северу от Вади Газа должно перебраться на юг Газы в течение следующих 24 часов", — сказал Дюжаррик.

Это, по его словам, примерно 1,1 миллиона человек. "Тот же приказ распространяется на всех сотрудников ООН и тех, кто находится в учреждениях ООН, включая школы, медицинские центры и клиники. ООН считает, что такое передвижение невозможно без разрушительных гуманитарных последствий", — отметил собеседник агентства. Как заявил Дюжаррик, "ООН решительно призывает отменить такой приказ", иначе уже случившаяся трагедия может превратиться в катастрофическую ситуацию, заключил представитель генсека. Последствия ударов ХАМАС по Израилю

Рано утром 7 октября в южной и центральной частях Израиля прозвучали сирены воздушной тревоги.

© AP Photo / Fatima Shbair 1 из 9 Конфликт между Израилем и ХАМАС Утром 7 октября Израиль подвергся беспрецедентной по масштабу ракетной атаке из сектора Газа. После массированного обстрела бойцы ХАМАС проникли в приграничные районы на юге еврейского государства. Военное крыло ХАМАС объявило о проведении операции "Потоп Аль-Аксы". В ответ Армия обороны Израиля (ЦАХАЛ) сообщила о начале операции "Железные мечи" в секторе Газа. В течение нескольких дней после нападения израильские военные взяли под контроль все населенные пункты у границы с Газой и начали наносить авиаудары по объектам, в том числе гражданским, на территории сектора. Помимо этого, Тель-Авив объявил о полной блокаде Газы: приостановлены поставки воды, продуктов питания, электричества, медикаментов и топлива. Зенитный ракетный комплекс Patriot на севере Израиля - РИА Новости, 1920, 13.10.2023 В ООН назвали количество палестинцев, покинувших свои дома 02:59 Число погибших мирных граждан с каждой стороны превысило тысячу, несколько тысяч израильтян и палестинцев получили ранения. Сообщалось о нескольких погибших и пропавших без вести россиянах, а также гражданах других стран. В плену у ХАМАС могут находиться, по разным данным, около 150 израильтян.

МИД России призвал стороны прекратить боевые действия. По словам Владимира Путина, урегулирование ближневосточного кризиса возможно исключительно на основе утвержденной Советом Безопасности ООН "двугосударственной" формулы, которая предусматривает создание независимого палестинского государства в границах 1967 года со столицей в Восточном Иерусалиме. Палестино-израильский конфликт связан с территориальными интересами сторон и много десятилетий остается источником напряженности и боестолкновений в регионе. Решением ООН при активной роли СССР в 1947 году было определено создание двух государств — Израиля и Палестины, но создано было только израильское. Израиль, декларируя согласие с принципом двух государств, не освободил окончательно палестинские территории.

МОСКВА, 12 окт - РИА Новости. Российские миротворцы с 19 сентября свернули семь наблюдательных постов и еще 15 временных в Аскеранском, Шушинском, Мартунинском и Мардакертском районах Нагорного Карабаха, сообщается в бюллетене Минобороны РФ. "Всего с 19 сентября 2023 года свернуты семь наблюдательных и 15 временных наблюдательных постов российских миротворцев в Аскеранском, Шушинском, Мартунинском и Мардакертском районах. При участии российских миротворцев продолжаются работы по восстановлению электро- и газоснабжения населенных пунктов Нагорного Карабаха", - говорится в сообщении. Уточняется, что за сутки в связи с разоружением и роспуском вооруженных формирований Нагорного Карабаха свернут один наблюдательный пункт миротворцев РФ в Шушинском районе. Отмечается, что нарушений режима прекращения огня в зоне ответственности российского миротворческого контингента не зафиксировано.

Пример презентации: 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 заменить поддержку загрузки текста из сессии поддержкой «сохранения, не выходя из редактирования»