====== Opera Show — Презентации в Сети как HTML ======

Превратите ваш браузер в дополнительноый инструмент презентации используя Opera Show, впечатляющей возможности браузера Opera. Обучитесь на мастера по Opera Show и сэкономьте работу и нервы, далая презентацию с вашего компьютера!

По сравнению с другими инструментами презентации (такими, как Microsoft PowerPoint), Opera Show имеет некоторые преимущества:

  * Это стандартная возможность маленького и быстрого веб-браузера
  * Она использует HTML в качестве формата документа, который делает файлы небольшими по размеру в отличии от форматов, используемых другими инструментами
  * Она делает публикацию вашей презентации в сети быстрой как бриз
  * По сравнению с другими инструментами презентации, Opera – является недорогим
  * Это не будет раздражать вашу аудиторию навязчивой анимацией

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

Это пособие написано для того, чтобы помочь вам начать пользоваться Opera Show и объяснит и использование и авторскую разработку документов Opera Show. Если у вас есть опыт некоторый работы с другими инструментами презентации, так же элементарные знания по HTML, вы имеете превосходную отправную точку для использования пособия.

Для создания презентации Opera Show без кодирования — перейдите в наш [[http://my.opera.com/community/dev/operashow/|Центр Opera Show]] и испытайте наш он-лайновый Генератор Opera Show.


===== Запуск Opera Show =====

Использовать Opera в качестве инструмента презентации – очень просто. Когда вы нажимаете клавишу ''F11'', Opera переходит в полноэкранный режим – вы не увидите ни полос прокрутки, ни меню, а только сам документ. В зависимости от таблицы стилей, Opera выполнит еще три действия:

  * Текущий документ будет разбит на страницы или "слайды"
  * Содержимое может измениться – некоторые части могут быть скрыты или отображены
  * Примененяются подходящие для презентации шрифты и цвета – как правило, шрифты становятся крупнее

Предполагая, что вы уже просматриваете с помощью Opera, попробуйте нажать ''F11'' прямо сейчас.<sup>[[show#primechanie|1)]]</sup> (Если вы еще не используете браузер Opera, вы можете легко [[http://ru.opera.com/download/|его загрузить]].) Браузер перейдет в полноэкранный режим и вы сможете просмотреть слайды, подходящие для проектора. Если вы уже **находитесь** в полноэкранном режиме, тогда Opera возвратится к нормальному режиму экрана, подходящему для навигации по Сети. Другими словами ''F11'' переключает между полноэкранным режимом и нормальным экраном.

Когда вы находитесь в полноэкранном режиме, вы все еще можете прокручивать документ используя клавиши со стрелками и вы можете переключаться между страницами документа используя клавиши ''PgUp'' и ''PgDn''.

Любой документ может быть просмотрен в полноэкранном режиме. Однако, большинство документов будет выглядеть почти так же, как и в обыкновенном окне браузера; они будут иметь то же содержимое и тот же макет, но показанный на большем холсте. Самое легкое решение для веб-сайтов, не предназначенных для проекционной презентации, состоит, конечно, в объединении функции масштабирования Opera с полноэкранным режимом – увеличение масштаба документа перед нажатием ''F11''. Кроме того, при просмотре в Opera файлов изображений, вы можете нажать ''F11'' для просмотра их на черном фоне в полноэкранном режиме.

Если вы не используете браузер Opera, вы будете в состоянии только прочитать об Opera Show, а не испытать его непосредственно. Однако, документы, разработанные для Opera Show, конечно можно просматривать и как обычные веб-документы в стандартно совместимых браузерах.

Так что же делает некоторые документы – например тот, который вы читаете теперь – значительно отличающимися после нажатия клавиши Show? Это – тема следующего раздела.

===== Таблицы стилей под контролем =====

Для того, чтобы документ стал презентацией Opera Show, Opera нужно сказать, как преобразовать HTML-документ в презентацию. Это делается добавлением таблицы стилей CSS2 в заголовок документа. Если вы писали документы для Сети, вы можете быть знакомыми с понятием таблиц стилей. HTML-документ может содержать ссылку на таблицы стилей или содержать их внутри себя, и они позволяют авторам описать то, как документы должны представляться в Сети.

Первое поколение каскадных таблиц стилей сегодня известны как CSS1. С появлением CSS2 добавлено определенное количество возможностей, среди них — возможность писать таблицы стилей для различных **медиа-типов**. Примеры медиа-типов – это '''screen' ''(предназначенный для обычного цветного экрана компьютера), '''handheld','' '''braille' ''(для устройств обратной связи на основе шрифта Брайля), и '''projection'.'' Opera Show использует последний, так что когда вы нажимаете клавишу ''F11'', браузер Opera просматривает таблицы стилей, написанные специально для проекции. Если находит, эта таблица стилей применяется, и соответственно изменяется презентация.

===== Авторская разработка презентаций Opera Show =====

Для тех, кто не хочет писать собственные презентации на HTML, в дополнение к он-лайновому [[http://my.opera.com/community/dev/operashow/|генератору презентаций Opera Show]] от Opera Software, доступно и программное обеспечение сторонних разработчиков, как, например, созданная программистом Phil Burns программа Quickshow – shareware инструмент для авторской разработки документов Opera Show.

Остальная часть этого пособия – главным образом для тех, кто желают создавать или адаптировать свои собственные презентации Opera Show, что является весьма простым делом, если вы знаете немного о HTML и CSS. Например, HTML-документ, который вы сейчас читаете, ссылается на таблицу стилей, содержащую этот раздел:

<code css>
@media projection {

.screen {
	display:none;
	}

.projection {
	display: block; 
	padding:65px 200px 0px 24px;
	page-break-after: always;
	}

body 	{
	background:#47557b url(operashowbg.jpg) fixed;
	padding:0;
	margin:0;
	font-family:'trebuchet ms',arial,sans-serif;
	font-size:150%;
	color:#fff;
	}
}
</code>

Первая строка говорит о том, что стиль определен для медиа-типа '''projection'.'' Это – вид таблицы стилей, который Opera будет искать в тот момент, когда вы нажимаете ''F11''. Строки, начинающиеся с ".screen" и ".projection", предназначены для скрытия и отображения содержимого страницы – это является более сложным использованием CSS, о котором мы расскажем в этом пособии чуть позже. За этими строками идут настройки шрифтов и цветов, а также окончания страниц. Если вы находите, что строки выше полностью непонятны, до того, как продолжить у вас может появиться желание прочитать больше о HTML и CSS. Просмотрите список предлагаемой литературы, приведенный в конце этого документа.

===== Настройка шрифтов и цветов =====

Изменение шрифтов и цветов – это некоторые из самых распространенных задач таблиц стилей, используемых для этого. Размер шрифта здесь установлен в 150% от нормального размера шрифта. Кроме того, семейство шрифтов установлено в "Trebuchet MS", с родовым шрифтом "sans-serif", который должен заменить "Trebuchet MS", если он не существуют на компьютере пользователя.

Фоновый рисунок определен в первой строке, и '''color' ''устанавливает цвет текста в белый. Все свойства определяются в элементе '''body','' из которого наследуются все остальные видимые элементы HTML. Поэтому, цвет всего текста в документе будет белым, если не указано иначе.


===== Разбивка на страницы =====

Когда вы показываете презентацию, вы перемещаетесь от одной страницы (или "слайда") к другой. Как правило браузер отображает документ с полосой прокрутки, расположенной справа и предназначенной для перемещения текста вверх и вниз. Когда вы нажимаете клавишу "Show"(''F11''), Opera переходит в полноэкранный ражим и пытается разбить документ на страницы. Таблица стилей определяет местоположение разделителей страниц – в нашем примере таблица стилей определяет местоположение разрыва страницы после каждого вхождения '''class="projection"'.'' Таким образом, следующий раздел будет всегда появляться вверху новой страницы.

<code css>

.projection {
	display: block; 
	padding:65px 200px 0px 24px;
	page-break-after: always;
	}

</code>

Вместо использования полосы прокрутки для перемещения в документе вверх и вниз, для навигации в полноэкранном режиме используются клавиши со стрелками и клавиши ''PgDn'' и ''PgUp''.

Элементы заголовков, такие как <h1> и <h2>, должны всегда использоваться в HTML. Некоторые авторы создают заголовки используя тэг '''font' ''и атрибут '''size','' но это не рекомендуется делать, т.к. элемент '''font' ''ничего не говорит о **структуре** документа.

===== Скрытие и отображение содержимого =====

Вы, возможно, обратили внимание на то, что когда вы нажимаете ''F11'' в этом документе, не только изменяется вид документа (шрифты, цвета, разбивка на страницы), но также и содержимое документа. Это – одна из расширенных возможностей CSS, и для большинства авторов не нуждается в создании такого вида документа. Однако, если вы хотите произвести на вашу аудиторию впечатление технологией, которая не отличается от волшебства, то это – для вас.

CSS может легко произвести **преобразования** в документе – таблицы стилей могут, например, скрыть текст, который в противном случае отображался бы. Вот правила, использованные в этом документе:

<code css>
.screen {
	display:none;
	}

.projection {
	display: block; 
	}
</code>

Эти строки делают один класс элементов <div> (которые имеют имя класса "projection") видимым, и скрывают остальные классы элементов (которые имеют имя класса "screen"). Когда Opera возвращается назад к нормальному режиму экрана, применяется противоположный набор правил:

<code css>
@media screen {
	div.projection { display : none }
	div.screen { display : block }
}
</code>

Другими словами, документ, который вы читаете, фактически содержит два документа в одном. Когда вы переключаетесь между полноэкранным и нормальным режимами, Opera переключается из одного документа в другой. Только заголовки остаются идентичными и отображаются всегда.

Не стесняйтесь многократно использовать этот документ и его таблицу стилей как шаблоны для ваших собственных презентаций. Доступна [[http://my.opera.com/community/dev/operashow/|более простая версия]] со встроенной CSS, и без общей таблицы стилей opera.com.

Заставьте ваш проект сверкать!

===== Предлагаемая литература по Opera Show, CSS и HTML =====

  * [[http://tntluoma.com/opera/lover/7/30/|День Третий: OperaShow]] (из "30 дней для того чтобы полюбить Opera").
  * [[http://www.w3.org/markup/|Домашняя страница W3C по HTML]]
  * [[http://www.w3.org/TR/REC-CSS2/intro.html|Рекомендации W3C по CSS2]]
  * [[http://www.w3.org/TR/REC-CSS2/media.html|Рекомендации W3C по медиа-типам в CSS2]]
  * [[http://www.w3.org/TR/REC-CSS2/page.html#page-breaks|W3C об использовании CSS2 для разбивки страниц]]


===== Остальные ссылки на справочную информацию о создании ваших презентаций =====

  * [[http://my.opera.com/community/dev/operashow/|Генератор Opera Show]]
  * [[http://www.philburns.com/quickshow.html|QuickShow]] – shareware инструмент авторской разработки для Opera Show, созданный Phil Burns
  * [[http://validator.w3.org/|W3C's MarkUp Validation Service]] поможет вам удостовериться в том, что ваши таблицы стилей и HTML-файлы выдержат проверку
  * [[http://www.colormatch.dk/">ColorMatch]] поможет вам подобрать цвета, которые приводятся вместе с их шестнадцатиричными кодами


=== Примечание ===

Примечание переводчика. Здесь и далее - данный документ является переводом страницы на русский язык, кроме того он представлен в формате DokuWiki, и соответственно в нем не сохранена разметка оригинального документа. Для знакомства с описанными здесь замечательными возможностями Opera Show, пожалуйста, перейдите на [[http://www.opera.com/support/tutorials/operashow/|оригинал страницы]].

--------------

**Оригинал страницы:** [[http://www.opera.com/support/tutorials/operashow/|Opera Show Tutorial]]

[[http://www.opera.com/|Copyright Opera Software ASA]]. Все права зарезервированы

[[http://www.operafan.net/|OperaFan.net]], 2007. Ermir, неофициальный перевод.