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

31 March, 2010

Fun, XHTML/CSS, Общие

Я показывал ее на недавнем 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>
  6. <section id="slide2">

Каждый 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>

Навигации тоже заданы координаты через 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.

Почитать

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

Fun, XHTML/CSS, Общие

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

burkanov | 1. 31 March, 2010

Очень мило получилось, спасибо.

Ptico | 2. 31 March, 2010

26й слайд очень полезный)

Vladimir | 3. 31 March, 2010

обалденно! А видео с мероприятия можно где-то скачать?
а то слайдов мало :)

Чистяков Денис | 4. 31 March, 2010

Мило, интересно и познавательно как всегда, вот только не понял, что делает иконка IE на 16-ом слайде про круглые углы?
Или вы про IE9, который обещает CSS3?)

akella | 5. 31 March, 2010

Да, про IE9, просто я это проговаривал, к сожалению презентация не очень автономная получилась, но я скорее хотел поделиться ее кодом чем содержанием =)

Vladimir: да, видео выложат со дня на день на сайте Openwebcamp

Ptico может ты про 27-й? ) Мне он по крайней мере кажется полезнее =)

arty | 6. 31 March, 2010

честно говоря, мне больше нравится продвигаемый оперой вариант (http://www.opera.com/browser/tutorials/operashow/), который менее приложение, и более документ. Конечно, в нём нет красивых переходов, зато переключение слайдов работает привычными пробелом и стрелками, заодно можно стандартными home/end оказаться в начале или конце. Вот мой пример такой презентации: http://arty.name/clientside2007/speed.manipulation.slides.xhtml Сразу скажу, что в хроме/сафари он «не работает» только потому, что они не включают для полноэкранного режима media projection, зато этот «баг» демонстрирует graceful degradation.

mikhail | 7. 1 April, 2010

Выглядит впечатляюще, но у меня очень сильно грузило процессор, причем все время. Но, в отличии от флэша, не тормозило ;)

А можно хотя бы вкратце, про что было во время 7-го слайда (со звездой смерти)?

Люба | 8. 1 April, 2010

В хроме (убунту) все слайды слились в один.

Akella | 9. 1 April, 2010

Как раз то о чем я говорил, бедняга не выдерживает ;)

vitex | 10. 1 April, 2010

1 апреля на стартовой по CSS3-му :)))

Nayjest, web-superman | 11. 2 April, 2010

На Украинском форуме интернет-деятелей эта презентация тоже очень доставляла, спасибо. Особенно звезда смерти, коты и демотиватор :)

Разве что, можно было побольше уделить внимания мобильным платформам.

macgera | 12. 2 April, 2010

Прикольно сделано

Nayjest, web-superman | 13. 3 April, 2010

Вот мой отчеткросспост на Хабре). Юрий, вам будет интересно :)

Vladimir | 14. 4 April, 2010

жаль, что видео до сих пор не выложили на Openwebcamp :((

Samter | 15. 4 April, 2010

Довольно прикольно. Хром справился на “Ура”…. а вот опера 10.51 на некоторых поперхнулась. Жаль не скоро всему этому начать жить.

kigorw | 16. 8 April, 2010

тоже сделал описание своей презентации http://www.kigorw.com/articles/talks-engine

alex.kotomanov | 17. 30 April, 2010

Спасибо, очень интересно! Сейчас тоже делаю презентацию на hml5+css3. Так что очень пригодится информация. =)

shaman.sir | 18. 30 April, 2010

Отличная была презентация! Иллюстративная.

akella | 19. 5 May, 2010

Спасибо! :)

Макс | 20. 14 June, 2010

Пасибо за презентацию)) очень познавательно))

Bobi | 21. 20 June, 2010

Хорошая презентация всем спасибо!!!!

Oxygen | 22. 23 June, 2010

Классная презентация! Ах, когда же закончится битва кодеков и HTML5 наконец станет стандартом. Хотя… это меньше, чем полдела, пока жив IE, HTML5 будет оставаться в тени. Ну и с этим IE, всё равно я забацал блог на HTML5 (http://oxygen.ho.ua), правда, он пока пустой.

Лига | 23. 30 August, 2010

Я олдскульный какой-то. Не прельщают меня сабжи.

kem | 24. 23 September, 2010

хорошая презентация, только нехватает перемещения между слайдами по горячим клавишам или я недоглядел ? Вот еще одна презентация на туже тему http://slides.html5rocks.com/

akella | 25. 23 September, 2010

ну да, но сделать это без джаваскрипта достаточно затруднительно было бы :) А у меня все же презентация чисто на css+html, решил принципиально ;)

kem | 26. 23 September, 2010

Ну тогда можно использовать большие CSS кнопки вперед и назад :) или боковую панельку с превьюшками слайдов

akella | 27. 23 September, 2010

Ну так боковая панелька ж и есть :) просто без превьюшек. Хотя превью – интересная идея, можно было бы засунуть туда уменьшенные трансформом версии слайдов.

Насчет стрелок я думал, но их бы пришлось делать для каждого слайда свои – и я решил что запутаюсь с этой навигацией, без скрипта это уже не так просто и интересно было. Я показывал презентацию с пультом, она работала с табуляцией простой

kem | 28. 23 September, 2010

> Хотя превью – интересная идея, можно было бы засунуть туда уменьшенные трансформом версии слайдов.
Да, именно это я и имел в виду.

> Я показывал презентацию с пультом, она работала с табуляцией простой
Кстати это интереская мысль, если сделать у элементов последоватьную индексацию через tab index, то по ним можно будет перемещать по нажатию tab и тогда используя :focus можно сделать навигацию по слайдам

arty | 29. 23 September, 2010

Если делать презентацию, как показано тут: http://www.opera.com/browser/tutorials/operashow/ , то сразу будут работать кнопки пробел, page down и page up

akella | 30. 23 September, 2010

@kem есть куда фантазировать :)

@arty ну да, работать в Опере которая большую часть слайдов наверное до сих пор нормально не показывает, ок :) Но интересно.

arty | 31. 23 September, 2010

снова скажу, что самым безглючным всегда кажется браузер, в котором разрабатываешь: http://blog.arty.name/2009/самый-безглючный-браузер/

arty | 32. 23 September, 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/

akella | 33. 23 September, 2010

Дело не в безглючности ж :) я адекватно смотрю на эти вещи и использую сафари только из-за скорости, под маком Опера медленнее все же. Может зато стабильнее, не знаю.

А дело в том что Опера просто не поддерживала особо трансформаций и особенно анимаций. Потому вся соль презентации терялась.

arty | 34. 23 September, 2010

а, ну если соль была именно в них, то да

Геннадий Уханов | 35. 26 September, 2010

http://p.wlcteam.ru/ — мы как раз тоже закончили движок (тестируем) для презентаций (тоже CSS3 и HTML5), добавив несколько плюшек, таких как поддержку режима projection в Опере и режима notes

akella | 36. 26 September, 2010

Forbidden
You don’t have permission to access / on this server.

=(

Геннадий Уханов | 37. 27 September, 2010

Сорри, случайно дал не ту ссылку — http://p.wlcteam.ru/1/

Оставить комментарий