Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Як робити комп’ютерні презентації?

with 14 comments

В цій публікації мова піде про те як робити презентації за допомогою інструментів HTML та JavaScript, і націлена вона більше на розробників. Якщо вас цікавить загальний процес – читайте новішу публікацію: Як зробити презентацію краще?

Деякі речі, як наприклад вставляти гарно підсвічений код в звичайних програмах для створення презентацій робити дуже важко. Я рився і рився в цьому безмежному павутинні, аж поки не наткнувся на пораду “роби скріншоти ide”. Порада непогана. Папка з картинками – назручніший формат презентації для демонстрації (правда не для наступного редагування), бо може демонструватись будь-яким пристроєм, аж до DVD-плеєра, з мобільним телефоном включно. Я навіть таким чином зробив презентацію прямо на захисті курсової. І ніхто навіть не здогадався що я вдома її взагалі не робив :).

Потім я подумав про txt2tags, html, та переходи між слайдами за посиланням. А якщо додати JavaScript? Коли я про це подумав, то наткнувся на http://www.zackgrossbart.com/hackito/present/. Скрипти в документі – хороша ідея. ПЗ для його відтворення ніби поставляється разом з ним. Ну, і я почав робити свою презентацію.

Скачав SyntaxHighlighter. Слайди змінювались. Потім я прочитав коментарі до статті на яку наткнувся, то знайшов HTML Slidy. Про цей формат можна прочитати на Енетрях.

Потім я знайшов Simple Standards-based Slide Show System, систему яка базується на Opera Show. S5 навіть має свою статтю на вікіпедії. Я трохи поморочився з S5, бо там багато стилів, і навіть змусив ці стилі дружити з SyntaxHighlighterom. Гррр, CSS!!! Експериментальними методами я вияснив, що такий стиль

.slide div
{
	font-size:70%;
}

, який здається означає що всі div-и які знаходяться всередині класу slide мають зменшити шрифт відносно батьківського на 70% (div-и генерує SyntaxHighlighter) допомагає зробити так:

Слайд у S5

Хоча для класів що генерує SyntaxHighlighter був свій стиль, в якому було написано:

	font-size:1em;

що таке 1em, я дотепер зрозуміти не можу, бо його зміна зовсім ні на що не впливала.

А ще через деякий час, я наткнувся на групу Free Web Slide Show Alternatives – S5, S6, S9, Slidy, FullerScreen, Codex, and Friends. І виявив, що S5 переробли з JQuery на S6, S9 – взагалі платформа для створення презентацій на Ruby за допомогою wiki-синтаксису.

Але найбільше мені не давала спокою краса презентації HTML5, але з їхніми стилями я так і не зміг боротись. Вони робили розмір шрифту в коді таким, що в слайд важко було помістити хоч чотити рядки, що було зовсім неприйнятно.

Але переривши те що познаходили люди з групи, я знайшов практично ідеальну систему для презентацій. Slippy. Її переваги:

  1. Анімація при зміні слайдів
  2. Кожен слайд має свою адресу в адресному рядку (перехід прямо до конкретного слайду)
  3. Вбудований SyntaxHighlighter
  4. Вбудована кнопка яка дозволяє виконати намальований прямо в презентації JavaScript код. Гляньте сюди.
  5. Slippy може робити так:
    Перегляд всіх слайдів у slippy.

Ну, а загальними перевагами всього вищепереліченого є:

  1. Семантична розмітка.
  2. Перегляд на будь-якому комп’ютері що має браузер. Однаково. Ніякий OO.o не сплутає кодування.
  3. Можна публікувати в вебі, без допомоги всяких там slideshare etc…

P.S. Мало не забув. Для математиків: TEX для HTML тут. Рендериться з Javascript на клієнтській стороні, тому теж можна причепити до презентації.

P.P.S. Взагалі то тут ні слова не було про те, як же все таки їх робити. Вибачаюсь. Можете почитати на цю тему уривки з “Мистецтва комп’ютерної презентації” В.П.Шевченка. (Такий собі Стів Джобс нашого факультету) Хоча там читати багато і не зручно. Краще просто робіть презентацію, і не пишіть того що можна сказати словами. Краще вставте картинку. Хіба щоб не забути. Але тоді не читайте слайди вголос. Ну ви зрозуміли…

Advertisements

Written by bunyk

Серпень 26, 2010 at 12:30

Оприлюднено в Інструменти, Розмітка

Tagged with , ,

Відповідей: 14

Subscribe to comments with RSS.

  1. якщо не секрет, а навіщо тобі презентації? ти до курсача вже літом готуєшся? =)

    вфтиіе

    Серпень 26, 2010 at 17:14

    • Довго пояснювати, тому секрет. Коли дороблю, я про це розкажу. Ну, і так, звісно, готуюсь.

      bunyk

      Серпень 26, 2010 at 17:38

  2. Любая нормальная ide должна иметь Export2Html с подсветкой, так что все-таки проще будет всем тем, что перечислено в первом абзаце)

    jtimv

    Серпень 27, 2010 at 18:42

    • :TOhtml
      :w

      ulidtko

      Серпень 28, 2010 at 15:09

    • Тим не менш, навіть якщо ти маєш вже відформатований, та підсвічений код, wysiwyg редактори з можуть спортити тобі життя, невідомо для чого змінивши шрифт. Хоча може вони не люблять лише мене.

      bunyk

      Серпень 30, 2010 at 21:10

  3. 1em — це ширина літери M, одна з еталонних величин у типографії.

    ulidtko

    Серпень 28, 2010 at 15:11

  4. Хороший пост, правильний підхід. Сам колись мав таку ідею 😉 (з’явилась теж під впливом презентації html5), але втілювати не пробував.

    ulidtko

    Серпень 28, 2010 at 15:14

  5. Як без досвіду кодінгу створити презентацію не Сліппі. Погуляв сайтом розробника і гітхабом, але ніде не знайшов інструкції “для тих хто в танку”. Хелп! 🙂

    zorelit

    Листопад 24, 2010 at 14:04

    • Треба скачати і розпакувати архів:
      https://github.com/Seldaek/slippy/zipball/master

      А потім знайти там файл 2010_якась_дата_Example.html, і скопіювати його в цій же папці, під назвою, яку буде мати ваша презентація. Відкрити його в текстовому редакторі, і знайти перший тег <div class="html">. Це перший слайд. Видаляєте все з середини, і пишете своє… Потім переходите до другого слайду. І так вставляючи теги

      додаєте в презентацію слайди. А після цього відкриваєте ваш html файл в браузері, натискаєте F11, і змінюєте слайди стандартними клавішами (вперед – назад, чи пробіл…).

      bunyk

      Листопад 24, 2010 at 15:54

  6. Чи для цього потрібно пройти туторіал по пхп як мінімум?

    zorelit

    Листопад 24, 2010 at 14:06

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

      Якщо хочете вчитись програмувати – вчіть Python. Він такий же простий як пхп, чи навіть як шкільний Pascal, і застосовуєтсья майже всюди, від вебу, до комп’ютерних ігор…

      bunyk

      Листопад 24, 2010 at 15:58

    • пхп для slippy не потрібен, лише знання хтмл та верстки.

      ulidtko

      Листопад 24, 2010 at 19:35

  7. […] блог дуже часто знаходять за запитом “Як робити презентації?”, і судячи з середньої оцінки для тої публікації, […]


Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: