Презентация про CSS3 и HTML5 на них же

31 Mar, 2010

Я показывал ее на недавнем Openwebcamp. Презентация на CSS3 и HTML5 без джаваскрипта. Как надо работает только в Safari и Хроме, но вы уже привыкли, да?

Предыстория

Началось с того что мне нужно было сделать доклад об использовании новых технологий. Делать его в Powerpoint и потом все время говорить «Ну вы это легко проверите в своём браузере» мне не нравилось, и я решил сделать презентацию целиком на этих эффектах. Вот что получилось. То что получилось устроить все без Javascript — случайность. Приятная.

Сразу о поддержке браузеров

Это всего лишь презентация, и я c самого начала не преследовал цель полной кроссбраузерности. Мне было важно чтобы она работала в моем Сафари. Однако, в Опере и Фаерфоксе она будет работать, просто в некоторых местах коряво, а кое-где очень коряво. В Хроме она работает отлично, но иногда по непонятным мне причинам хром делает что-то вроде «Я устал от твоего CSS3» и опускает руки. Редко. Вобщем Сафари и Хром наш выбор сегодня.

Презентация

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

о том как это сделано

Структура кода примерно такая:
  1. <body>
  2. <section id="slide1">
  3. <h1>CSS3 и HTML5</h1>
  4. <p>Openwebcamp, Киев, 2010</p>
  5. </section>
  7. <section id="slide2">
  8. ...
Каждый section — отдельный слайд. Всем им задан:
  1. section{
  2. position:absolute;
  3. top:0;left:0;
  4. height:100%;
  5. opacity:0;/*по умолчанию все слайды скрыты*/
  6. }
То есть они отображены все на одном месте, на весь экран, с прозрачностью 0. Кроме этого, в файле содержится навигация, просто список ссылок на все эти слайды-section:
  1. <ul>
  2. <li><a tabindex="100" href="#slide1">slide1</a></li>
  3. ...
Навигации тоже заданы координаты через position:absolute;. tabindex тут не просто так, позднее станет ясно зачем он мне.

Но как же я переключаю слайды? Это делается с помощью псевдокласса :target.

Этот селектор указывает на блоки, которые являются «адресом» внутренней ссылки. То есть при blabla.html#slide21, для блока у которого id="slide21" сработает :target.

Результат в CSS выглядит так:

  1. section:target{
  2. opacity:1;
  3. }
То есть при клике на любую ссылку из навигации, слайд на который она ссылается станет видимым. Известное свойство transition позволит нам сделать это плавно:
  1. section{
  2. transition:all 1s linear;
  3. }
Таким образом вместо того чтобы отобразить слайд моментально, он будет плавно появляться. Более того, я добавил еще пару эффектов, такой например:
  1. .effect-slideleft{
  2. left:-100%;
  3. opacity:1;
  4. transition:all 1s ease-in-out;
  5. }
Это значит по умолчанию слайд будет смещен влево от экрана, а при клике плавно изменит положение. (opacity:1 значит что прозрачность не будет анимироваться). А вот эффект кручения-исчезновения в центр:
  1. .effect-rotate{
  2. transform:rotate(360deg) scale(.01) translate(50%, 50%);
  3. transition:all 1s ease-in-out;
  4. }
Подробнее об играх с transform можно почитать в моем же посте

Как переключать слайды пультом?

Я написал небольшой applescript, который по нажатию Apple Remote табулировался по ссылкам навигации (вот зачем tabindex), и по нажатию на пульте «Play» — кликал на них. Это единственная часть которую по понятным причинам трудно реализовать совсем без скрипта.

Хотя у меня была идея построить все на -webkit-transition-delay (расписать в CSS появление каждого слайда по времени). Но тогда даже я сам считал бы себя психом.
Если кому-то интересно итоговый скрипт выглядел примерно так (табулирование + enter):

  1. on nextElement()
  2. simulate keycode 48 with option
  3. simulate keycode 76
  4. end nextElement
Это я позаимствовал из Sofa Control.

Почитать

Буду рад услышать ваши мысли про эту затею. Надеюсь она вдохновит кого-то на что-нибудь еще клёвое :)

37 комментариев к “Презентация про CSS3 и HTML5 на них же”

1.burkanov | 31 Mar, 2010
Очень мило получилось, спасибо.
2.Ptico | 31 Mar, 2010
26й слайд очень полезный)
3.Vladimir | 31 Mar, 2010
обалденно! А видео с мероприятия можно где-то скачать? а то слайдов мало :)
4.Чистяков Денис | 31 Mar, 2010
Мило, интересно и познавательно как всегда, вот только не понял, что делает иконка IE на 16-ом слайде про круглые углы? Или вы про IE9, который обещает CSS3?)
5.kigorw | 08 Apr, 2010
тоже сделал описание своей презентации http://www.kigorw.com/articles/talks-engine
6.Samter | 04 Apr, 2010
Довольно прикольно. Хром справился на "Ура".... а вот опера 10.51 на некоторых поперхнулась. Жаль не скоро всему этому начать жить.
7.macgera | 02 Apr, 2010
Прикольно сделано
8.vitex | 01 Apr, 2010
1 апреля на стартовой по CSS3-му :)))
9.Akella | 01 Apr, 2010
Как раз то о чем я говорил, бедняга не выдерживает ;)
10.Люба | 01 Apr, 2010
В хроме (убунту) все слайды слились в один.
11.Nayjest, web-superman | 03 Apr, 2010
Вот мой отчет (и кросспост на Хабре). Юрий, вам будет интересно :)
12.Nayjest, web-superman | 02 Apr, 2010
На Украинском форуме интернет-деятелей эта презентация тоже очень доставляла, спасибо. Особенно звезда смерти, коты и демотиватор :) Разве что, можно было побольше уделить внимания мобильным платформам.
13.mikhail | 01 Apr, 2010
Выглядит впечатляюще, но у меня очень сильно грузило процессор, причем все время. Но, в отличии от флэша, не тормозило ;) А можно хотя бы вкратце, про что было во время 7-го слайда (со звездой смерти)?
14.arty | 31 Mar, 2010
честно говоря, мне больше нравится продвигаемый оперой вариант (http://www.opera.com/browser/tutorials/operashow/), который менее приложение, и более документ. Конечно, в нём нет красивых переходов, зато переключение слайдов работает привычными пробелом и стрелками, заодно можно стандартными home/end оказаться в начале или конце. Вот мой пример такой презентации: http://arty.name/clientside2007/speed.manipulation.slides.xhtml Сразу скажу, что в хроме/сафари он «не работает» только потому, что они не включают для полноэкранного режима media projection, зато этот «баг» демонстрирует graceful degradation.
15.Vladimir | 04 Apr, 2010
жаль, что видео до сих пор не выложили на Openwebcamp :((
16.akella | 31 Mar, 2010
Да, про IE9, просто я это проговаривал, к сожалению презентация не очень автономная получилась, но я скорее хотел поделиться ее кодом чем содержанием =) Vladimir: да, видео выложат со дня на день на сайте Openwebcamp Ptico может ты про 27-й? ) Мне он по крайней мере кажется полезнее =)
17.Bobi | 20 Jun, 2010
Хорошая презентация всем спасибо!!!!
18.alex.kotomanov | 30 Apr, 2010
Спасибо, очень интересно! Сейчас тоже делаю презентацию на hml5+css3. Так что очень пригодится информация. =)
19.shaman.sir | 30 Apr, 2010
Отличная была презентация! Иллюстративная.
20.akella | 05 May, 2010
Спасибо! :)
21.Макс | 14 Jun, 2010
Пасибо за презентацию)) очень познавательно))
22.Oxygen | 23 Jun, 2010
Классная презентация! Ах, когда же закончится битва кодеков и HTML5 наконец станет стандартом. Хотя... это меньше, чем полдела, пока жив IE, HTML5 будет оставаться в тени. Ну и с этим IE, всё равно я забацал блог на HTML5 (http://oxygen.ho.ua), правда, он пока пустой.
23.Лига | 30 Aug, 2010
Я олдскульный какой-то. Не прельщают меня сабжи.
24.kem | 23 Sep, 2010
хорошая презентация, только нехватает перемещения между слайдами по горячим клавишам или я недоглядел ? Вот еще одна презентация на туже тему http://slides.html5rocks.com/
25.akella | 23 Sep, 2010
ну да, но сделать это без джаваскрипта достаточно затруднительно было бы :) А у меня все же презентация чисто на css+html, решил принципиально ;)
26.kem | 23 Sep, 2010
Ну тогда можно использовать большие CSS кнопки вперед и назад :) или боковую панельку с превьюшками слайдов
27.akella | 23 Sep, 2010
Ну так боковая панелька ж и есть :) просто без превьюшек. Хотя превью - интересная идея, можно было бы засунуть туда уменьшенные трансформом версии слайдов. Насчет стрелок я думал, но их бы пришлось делать для каждого слайда свои - и я решил что запутаюсь с этой навигацией, без скрипта это уже не так просто и интересно было. Я показывал презентацию с пультом, она работала с табуляцией простой
28.kem | 23 Sep, 2010
> Хотя превью - интересная идея, можно было бы засунуть туда уменьшенные трансформом версии слайдов. Да, именно это я и имел в виду. > Я показывал презентацию с пультом, она работала с табуляцией простой Кстати это интереская мысль, если сделать у элементов последоватьную индексацию через tab index, то по ним можно будет перемещать по нажатию tab и тогда используя :focus можно сделать навигацию по слайдам
29.arty | 23 Sep, 2010
Если делать презентацию, как показано тут: http://www.opera.com/browser/tutorials/operashow/ , то сразу будут работать кнопки пробел, page down и page up
30.akella | 23 Sep, 2010
@kem есть куда фантазировать :) @arty ну да, работать в Опере которая большую часть слайдов наверное до сих пор нормально не показывает, ок :) Но интересно.
31.arty | 23 Sep, 2010
снова скажу, что самым безглючным всегда кажется браузер, в котором разрабатываешь: http://blog.arty.name/2009/самый-безглючный-браузер/
32.arty | 23 Sep, 2010
ага, парсер ссылок хромает http://blog.arty.name/2009/%D1%81%D0%B0%D0%BC%D1%8B%D0%B9-%D0%B1%D0%B5%D0%B7%D0%B3%D0%BB%D1%8E%D1%87%D0%BD%D1%8B%D0%B9-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80/
33.akella | 23 Sep, 2010
Дело не в безглючности ж :) я адекватно смотрю на эти вещи и использую сафари только из-за скорости, под маком Опера медленнее все же. Может зато стабильнее, не знаю. А дело в том что Опера просто не поддерживала особо трансформаций и особенно анимаций. Потому вся соль презентации терялась.
34.arty | 23 Sep, 2010
а, ну если соль была именно в них, то да
35.Геннадий Уханов | 26 Sep, 2010
http://p.wlcteam.ru/ — мы как раз тоже закончили движок (тестируем) для презентаций (тоже CSS3 и HTML5), добавив несколько плюшек, таких как поддержку режима projection в Опере и режима notes
36.akella | 26 Sep, 2010
Forbidden You don't have permission to access / on this server.
=(
37.Геннадий Уханов | 27 Sep, 2010
Сорри, случайно дал не ту ссылку — http://p.wlcteam.ru/1/