Презентации в браузере? Нет проблем.

[freiman]

хм… а зачем создавать велосипед?
во-первых, существует большое количество он-лайн редакторов презентаций, написанных на флэше
во-вторых, есть Google Docs, да и Майкрософт, очевидно, скоро создаст нормальный он-лайн Office
в-третьих, есть PPT2PDF, PPT2Flash конвертеры

Создание презентаций с помощью HTML, CSS и JS — долго и малоэффективно, just for fun, не более.

[Shpankov]

Ну, как сказать. Мне наоборот проще заменить пару слайдов в HTML-презентации, чем возиться с монструозными программами для создания презентаций. Плюс, HTML-ную можно просмотреть хоть на сотовом телефоне ;)

[freiman]

хмм… и текстовыми процессорами вы не пользуетесь — все доки в HTML или LaTeX верстаете? :)

[Shpankov]

Почему? Пользуюсь. Но, кстати, могу сказать, что внутренний документооборот в Opera Software — в HTML-формате.

И ещё, если кто был на встречах с Хоконом Ли, он показывал книгу, свёрстанную только с помощью HTML+CSS ;)

Так что возможности этой технологии не такие уж и маленькие. А если добавить JS, video, canvas… ;)

[freiman]

> А если добавить JS, video, canvas
то получим XML-представление презентаций, как это делается и в OpenOffice, и в MS Office 2007 :)

но почему тогда никто не верстает напрямую в XML, а используют WYSIWYG?

[SovGVD]

потому что большинству проще жмакнуть пару кнопок и пофиг че там программа наделает (а наделает как всегда ужос), чем самому красиво и чисто (чистый код) сверстать всё что нужно.
блокнот наше всё =)))

[malicious]

emacs

[SovGVD]

у меня leafpad =) максимально просто

[shpunsetoy]

«Но, кстати, могу сказать, что внутренний документооборот в Opera Software — в HTML-формате.» ох сомневаюсь… может документы?.. документооборот полюбому в базе…

[Shpankov]

Ну да, естественно. ;)

[daD]

«хмм… и текстовыми процессорами вы не пользуетесь — все доки в HTML или LaTeX верстаете? :)»
Я — да.

[arestov]

не хочу гугл, не хочу микрософт

[freiman]

тогда это уже будет не презентация, а именно веб-приложение.
иначе мы так весь интернет к HTML+CSS презентациям сведем :)

[zerkms]

смысл было создавать публикацию, в которой всё равно никакой информации нет? почему бы просто не сделать ссылку?

[Shpankov]

Хотел сделать ссылку, но решил немного рассказать, в чём суть. Многие просто не знают, что это такое.

[lifestar]

Вот о самой технологии и рассказали бы подробнее

[Shpankov]

Подробнее, чем написал Крис Миллс, не получится ;)
Ссылка в тексте есть. Моя цель — напомнить/заинтересовать/указать, где можно взять информацию.

[nmike]

на мобильном телефоне?

[iZENfire]

>но не всегда презентации, созданные в MS Office корректно отображаются в OOo и наоборот.

Не свисти. Всегда корректно.

[Shpankov]

Я не на пустом месте говорю — седьмой год пользую OOo в Linux. Самый простой косяк — съезжают шрифты. Бывают заковыки и посерьёзней. Конечно, всё это легко исправляется, но я имел в виду именно «по умолчанию» — просто открыть и посмотреть.

[iZENfire]

Седьмой год используешь OOo 1.5? :D

Я использую OOo 3.0 и никаких косяков не встречал.

[Somebody32]

видно мало используешь. очень редко, когда ООо открывает pptx так, чтобы стили править не надо было

[ttim]

Могу скинуть съежающуу презентацию в оо3

[iZENfire]

Давай.

[ttim]

drop.io/presforhabr

[ttim]

6 и 13 слайды к примеру
OpenOffice 3

[iZENfire]

Вот скриншот:


И где там съезд?

[Shpankov]

А ссылка бы на картинку не устроила? ;)

Тут нет редактирования комментов, теперь ветка будет навечно изгажена…

[iZENfire]

Убрал изображение.

Вот ссылка на полный скриншот всего экрана с информацией о версии OOo:
izen.dev.juga.ru/image/FreeBSD-7.1_OpenOffice.org-3.0-Impress_lecture-3.ppt-p13.png

Ни в режиме редактирования, ни в режиме полноэкранной слайд-презентации ничего никуда не уехало и не пропало.

Классический вопрос: «ЧЯДНТ?»

[ttim]

Забавно

www.picamatic.com/view/1710220_screen/

[iZENfire]

«Та самая» неудачная сборка от ИнфраРесурса? ;)

[ttim]

Видимо. Извиняйте за нагоняй на ОО :-)

[YMax]

А что мешает сохранить в .pps или .pdf?

[creogen]

.pps открывается через PowerPoint. Не понимаю, к чему ты это написал.

Кстати сказать, я уже когда-то делал презентацию в HTML. Преподавателю понравилась идея :)

[YMax]

Нет. Он сам по себе. Но лучше в .pdf

[freiman]

PPS не сам по себе, он требует библиотеки MS PowerPoint для просмотра.

[YMax]

Я подозревал об этом ;). Тогда .pdf

[feedbee]

А PDF наверное тоже сам по себе открывается тогда? Очевидно, что для любого формата (даже тектосового) требуется ридер для открытия. В случае PPT это MS PowerPoint, в случае PDF — Adobe Reader, HTML — любой браузер, TXT — любой текстовый редактор/вьювер.

Само по себе ничего не бывает…

[MrTime]

кстати сказать, я вот подумал жене (которая преподаватель) показать презентацию на хтмл… посмотрим понравится ли ей :)

[dmitriev_dmitry]

Потом покажите другой жене (которая маркетолог) и третей (которая обычный пользователь). И, да, не забудьте результат нам рассказать :)

[shpunsetoy]

Берём ксамп+жомла+немеряное колличество стилей и функционала… и получаем презентазию которая плавненько так перетекает на корпоративный сайт… и в дальнейшем используется и по 10 раз одно и тоже делать не приходится… тока эта… я про жомлу так… к примеру просто…

[feedbee]

Все-таки это немного другое. Тут как минимум надо сервер, а значит в большенстве случаев надо интернет. Короче, это просто разные вещи. Вот PPT — конкурент для Opera Show, а сайт — нет.

[shpunsetoy]

… я же сказал… ксамп(xampp он и есть сервер)…
+ Apache 2.2.6
+ MySQL 5.0.45
+ PHP 5.2.4 + PHP 4.4.7 + PEAR
+ PHP-Switch win32 1.0 (please use the «php-switch.bat»)
+ XAMPP Control Version 2.5 from www.nat32.com
+ XAMPP Security 1.0
+ SQLite 2.8.15
+ OpenSSL 0.9.8e
+ phpMyAdmin 2.11.1
+ ADOdb 4.95
+ Mercury Mail Transport System v4.01b
+ FileZilla FTP Server 0.9.23
+ Webalizer 2.01-10
+ Zend Optimizer 3.3.0
+ eAccelerator 0.9.5.2 for PHP 5.2.4

брать тут www.apachefriends.org/en/xampp.html

[feedbee]

Ну правильно, давайте теперь для воспроизведения презентации ставить на машину веб-сервер.

Кстати еще один + презентаций в HTML(+css+js) — то, что клиент для воспроизведения уже стоит на любой машине (любой браузер), правда для Opera Show это не плюс, т.к. там требуется Opera, а она есть не везде.

[oogl]

Первое предложение статьи повергло в шок.

[inoks]

* данное объявление является рекламным.

[freiman]

и да, как с помощью этой технологии сделать диаграмму? например, круговую, с подписями?

[freiman]

это флэш! :)

[TimTowdy]

Хоть SVG, хоть обычными картинками — как угодно.

[freiman]

так, значит, дополнительно к браузеру и блокноту нам требуется графический редактор, чтобы нарисовать диаграммы?
а если необходимо диаграммы анимировать?

[meako]

А че в паверпоинте можно анимировать диаграммы? о_О
И что, если захотим вставить картинку в презентацию, то нам паверпоинт должен служить и графическим редактором?

[freiman]

да, можно.

PowerPoint не должен служить графическим редактором. Но базовые возможности редактирования изображений (повернуть, обрезать, изменить цвет) там есть.
но если для HTML-презентации приходится рисовать диаграмму — в чем вы ее будете рисовать?

[meako]

В том, в чем мне будет удобнее.
Возможно в табличном процессоре, возможно в графическом редакторе может вообще от руки на бумажке нарисую. В любом случае диаграмма будет вставлена картинкой.
Можно еще заглянуть в мир технологий будущего и играться с SVG, которым можно манипулировать при помощи javascript на самой странице. Будет и анимация, и динамика и все что угодно, но требует рабочих затрат.

[egorinsk]

Есть вещь от W3C под названием HTML Slidy ( www.w3.org/Talks/Tools/Slidy/ )— вот такие презентации мне нравятся! Сделано по стандартам, кроссбраузерно, работает даже без JavaScript (многим убогим веб-дизайнерам не мешало бы понять, что не все держат его включенным).

[Kane]

Такой вариант мне нравится больше, да и работает не только в опере.

[Shpankov]

В Opera практически то же самое, только дополненное CSS в более продвинутом виде. В итоге изменять дизайн всех слайдов или отдельных частей становится максимально простым делом. Если не ошибаюсь, норвежцы пытаются убедить W3C использовать именно такой вариант — HTML+CSS.

[barbuza]

280slides.com/

[doobrik]

> Сегодня трудно найти человека, который хотя бы раз в жизни не создавал на компьютере презентацию.
Это ты в газитчиков научился так статьи начинать? Не читай их!
Ах да, как минимум один человек уже нашелся ;—)

[Alik_Kirillovich]

Для кроссбраузерного создания презентаций в Вебе существует специальный xHTML-формат S5.

Его суть состоит в том, что презентация является обычной xHTML страницей. Просто определенный элементы web-страницы помечаются соответствующими CSS-классами: presentation, slide, footer и т.д.

А JavaScript-движек S5 придает xHTML-странице функциональность презентации.

В качестве примера использования S5 можно посмотреть презентацию Ивана Сагалаева с РИТ 2007: «Веб-фреймворк Django».

Если в этой презентации отключить стили или нажать на кнопочку Ø, она снова превратится в обыную web-страницу, которую можно скопировать в Word, распечатать и т.д.

[iderins]

Сударь, а вы пробовали на этой технологии сделать нормальную презентацию? )
Со своим оформлением и необходимыми данными?

Впрочем, я думаю сотрудникам Яндекса не будет больше нужды пользоваться S5 )

[Shpankov]

«а вы пробовали на этой технологии сделать нормальную презентацию?»
Это какую? ;)

Просто интересно услышать критерий «нормальной» презентации…

[iderins]

Alik_Kirillovich говорил, что:

Для кроссбраузерного создания презентаций в Вебе существует специальный xHTML-формат S5.

И именно об этой технологии я и говорил.

Просто интересно услышать критерий «нормальной» презентации…

Гм… это действительно вопрос, что называть нормой =)

Дело в том, что наша компания как раз сейчас и занимается данным вопросом. Мы разработали стандарты презентаций для подготовки всемозможных докладов сотрудниками одной крупной компании.

Вначале мы все шаблоны воплотили в PowerPoint (Win), Keynote (Mac), OpenOffice Imression (Linux & Other).
Последним этапом стоит разработка именно html-презентации для демонстрации в броузере.
И надо признать, что после мониторинга существующих решений (в саму первую очередь это, это и это) мы пришли к выводу, что повторить туже самую презентацию 1 к 1, но уже в html, основываясь на имеющихся решениях, просто невозможно.

И стали разрабатывать свое решение.

А ведь нужно-то совсем немного:

1. — семантичное и простое наполнение данными
2. — одинаковое отображение во всех браузерах, без помощи плагинов (а media-projector поддерживается пока только Opera)
3. — полное соответсвие внешнего вида презентации тому, который был задуман
4. — пропорциональное изменение размеров шрифта к размеру окна
       (по аналогии с обычными презентациями: на любом разрешении они выглядят динаково)
5. — простая и удобная навигация (переходы вперед-назад, вначало-конец, и к выбранному слайду)
6. — автоматическая нумерация
7. — несколько различных шаблонов внутри презентации
       (например: титульная страница, страница содержания, концовка) а у нас 15 шаблонов

[Shpankov]

Я уже ответил на часть необходимых решений ниже.
habrahabr.ru/blogs/opera/48651/#comment_1263069

[iderins]

Да, я видел )
И не нашел, к сожалению, ответов на свои вопросы.

Для нашего случая это никак не подошло.

А пример (http://ilya.homelinux.org/russia/) классный, но к сожалению он «Операзависимый» ))
Мы же страяемся добится «одинакового отображение во всех браузерах, без помощи плагинов».

[Shpankov]

Ну, вот уговорит Opera комитет W3C сделать Opera Show стандартом — будет проще ;)

[iderins]

))))) это не решение текущей проблемы

Впрочем ни одно из обсуждаемых в комментариях вариантов и примеров не является универсальным решением. Ни по задачам, ни по поддерживаемым броузерам.

[enartemy]

Хм… А чего не в корпоративный блог? :-)

Конечно с презентациями в браузере нет проблем. При желании они спокойно реализуются средствами javascript и будут работать в любом браузере.

Вобщем, это конечно интересно, но не думаю, что опера сильно выиграет от этого. Лучше бы расширений для разработчиков добавили, по аналогии с ФФ.

[Shpankov]

«Хм… А чего не в корпоративный блог? :-)»
Там больше оф.информация, а здесь — мои личные «перлы» ;)

[XBR]

видел такое когда Вы выступали на bycamp. очень даже ничего, но если придётся отвлекаться от презентации и показывать что-то ещё будет, имхо, не очень удобно.

[AgaFonOff]

Давно я видел эту хорошую технологию от оперы, но проблема с совместимостью (т.е. требование оперы) были непреодолимы…
И появилось… agafonov.pp.ru/webslider/ — 2005 год. Подзаброшено, правда…

[pepelsbey]

Главная польза всех программ для создания презентаций — это мастер-шаблоны, которые дают:

— Автоматическую нумерацию
— Мгновенное применение предварительно созданных шаблонов
— Любая секретарша может набить в презентацию текст, даже без знания CSS и JS. Просто кликнуть и напечатать.

…ну а также экспорт во что угодно, хоть видео, хоть PDF, хоть тот же HTML. Но это я уже говорю про Keynote.

А ещё месяц назад я делал презентации в Adobe Illustrator ;)

[pepelsbey]

И ещё: я только за, если презентации будут работать на HTML/CSS/JS, но для этого нужно написать клиент, который будет грамотно их собирать. Сейчас тот же Keynote экспортирует довольно сомнительный HTML-код.

[iderins]

Ага, мы с Харисовым еще обсуждали, как научить обычных людей использовать офисные редакторы семантически верно. Заголовки — заголовками, а не шрифтами разных размеров. Абзацы — абзацами, а не переносами. Списки — списками, а не циферками. Центрировать элемент не пробелами, а абзацем со стилем center. И т.д.

Пришли к выводу, что гиблая затея. Только единицы так делают. Например я )))

Но задумка прикольная. Если заполнять документ семантично, а все натройки (размеры, цвета, отступы) держать в стилях — на выходе можно получать почти идеальную XML-структуру документа.

[iderins]

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

Сейчас как раз готовим html-версию )

И кстати решили полностью отказатся от medya=«projector» (и всех новаторств Оперы) и приблуды S5

[pepelsbey]

Ну, доклады я обычно делаю не как сотрудник, а как самостоятельный докладчик.
В общем, Keynote — это пока лучший вариант.

[Shpankov]

media projection — это не «оперное новаторство» а спецификации CSS-2.1. ;)
Никто вас не заставляет использовать абсолютно все возможности — достаточно брать только то, что действительно необходимо.

[iderins]

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

Такие вещи, как навигация между слайдайми, смена шаблонов страниц (если презентация построена на нескольких, а не на одном шаблоне), масштабируемость шрифтов (в PowerPoint и Keynote все шрифты пропорциональны размеру экрана), разделение структуры данных от шаблонов оформления, — приходится решать самостоятельно.

[Shpankov]

«Такие вещи, как навигация между слайдайми, смена шаблонов страниц (если презентация построена на нескольких, а не на одном шаблоне), масштабируемость шрифтов (в PowerPoint и Keynote все шрифты пропорциональны размеру экрана), разделение структуры данных от шаблонов оформления, — приходится решать самостоятельно.»

Не буду сильно спорить, т.к. всё-таки презентации — не моя профессиональная деятельность, но могу вспомнить свой опыт работы с Opera Show.

Навигация между слайдами — это с пропуском сразу нескольких, как я понимаю? Такого не приходилось исполнять. А вперёд-назад — со штатного ноутбучного пульта ДУ (или клавишами). Думаю, при необходимости по сценарию презентации «перескоков» с одного слайда на другой и обратно, в Opera Show можно воспользоваться тем же JavaScript.

Смена шаблонов — всё в CSS. Меняйте, сколько захотите. Хоть каждый слайд со своим шаблоном.

Масштабируемость шрифтов — прекрасно работает. Также — в CSS, примерно вот так выглядит (пресловутые media projection):
@media projection and (min-device-height: 450px) { body {font-size:20px} .slide {height:400px } }
@media projection and (min-device-height: 600px) { body {font-size:30px} .slide {height:550px } }
@media projection and (min-device-height: 800px) { body {font-size:40px} .slide {height:750px } }
@media projection and (min-device-height: 760px) { body {font-size:38px} .slide {height:730px } }
@media projection and (min-device-height: 900px) { body {font-size:45px} .slide {height:850px } }
@media projection and (min-device-height:1000px) { body {font-size:50px} .slide {height:950px } }

Разделение данных и шаблонов — данные в HTML-файле, шаблоны — в CSS.

Или это я перечислил отличия Opera Show от S5?

[MAXH0]

Я не очень понял почему решение только для Оперы.
У нас была подобная проблема по несколько другой причине — на детских научно-практических конференциях перестали принимать работы вся суть которых сводилась к красиво оформленнной призенации в Microsoft PowerPoint. Тогда я и предложил верстать в HTML и помогло.
А вообще господа IT-шники: Даеш CMS для составления презентаций на локальной машине?

[xsash]

покажите для примера полноценную презентацию для оперы, очень интересно посмотреть и расширить свои знания, т.к. часто не хватает возможностей в .ppt/.pptx
но хочется увидеть не пару html страничек, а именно презентацию с графикой, диаграммами, таблицами

[Shpankov]

Могу поделиться вариантом, который использовался в российском университетском туре. Там и картинки, и JavaScript, а также video, canvas, svg. Вот ссылка на архив:
files.myopera.com/Ilya%20Shpan%27kov/files/russia.zip — размер 15 МБ

Также можно попробовать посмотреть в онлайне:
ilya.homelinux.org/russia/

Сразу предупрежу, что в презентации используются примеры, не поддерживаемые в стандартной версии Opera (video и 3D Canvas), поэтому лучше всего установить спец.сборку Opera, которую можно взять отсюда:
labs.opera.com/news/2008/11/25/

P.S. Ради интереса просмотрел презентацию через Opera Mini с мобильного. Кое-что съехало, конечно, но в общем вся информация оказалась вполне доступна и читабельна (зачастую и смотрибельна), при этом наблюдалось ещё и некое форматирование слайдов, позволяющее чётко видеть границы между ними.

[xsash]

opera 9.63 все отлично кроме 3d canvas

интересна реакция на фуллскрин, сначало думал что дизайн ползет

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

спасибо, было интересно

[Shpankov]

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

Думаю, JavaScript может решить эту проблему. Или… Хотя, и средствами CSS можно, уверен.

[maxic]

Странно, что сейчас об этом заговорили.

Знаю людей, которые профессионально занимаются презентациями и уже как минимум лет 7-8 делают их только для браузеров!

[GooRoo]

На университетском туре в Харькове до последнего момента думал, что презентация сделана в PowerPoint или аналогичной программе, и, признаться, меня очень поразил тот факт, что всё сделано на чистом HTML+CSS.

Считаю большим плюсом, что презентации одинаково хорошо будут работать как на десктопе, так и на мобильных девайсах, и думаю, Opera Show сможет получить широкое распространение в будущем (при условии, что W3C примет-таки это за стандарт). Однако случится это не раньше, чем появится какой-нибудь нормальный специализированный WYSIWYG-редактор, ибо созданием презентаций занимаются не только серьезные дяди и тёти в не менее серьезных компаниях. Люди, далекие от веба и от таких «страшных» слов как HTML и CSS, хотят просто в пару кликов добавить несколько слайдов в презентацию, вписать нужный текст, добавить пару эффектов появления этого самого текста и… вуаля — презентация готова.

P.S. Эээх, где был MathML для CSS, когда я сдавал экзамен по вышке… :)) Пришлось все формулы конвертить в картинки, чтобы можно было смотреть на КПК.