Как стать автором
Обновить

Динамичные веб-презентации без использования Flash

Разработка веб-сайтов *
Недельку назад Крис Миллс (Opera Software) сказал, что он «планирует серию статей показывающую, что возможно делать „флешеподобные“ вещи, используя только открытые веб-стандарты». Мне показалось это интересным, и, когда я наткнулся на небольшую флеш-презентацию фото-портфолио в журнале Ньюйоркер, то решил проиллюстрировать идею Криса, переделав презентацию. Мне показалось, что с применением JavaScript это будет сделать довольно легко, и я решил не искать лёгких путей, и сделать презентацию только используя возможности CSS. Так же мне было интересно попробовать на практике вкусные новинки CSS3, такие как переходы (transitions).
Если вы хотите просто просмотреть демонстрацию (вторая ссылка), то вам понадобится один из этих браузеров:
  • лучше всего, на данный момент: Google Chrome 4 или Apple Safari 4
  • Firefox 3.7 (полуношные сборки)
  • Opera 10 Mobile (Presto 2.3) или, если вы инсайдер, то Opera (Presto 2.4)
Так же прошу извинить за глупый экран параноидальной MyOpera, требующий подтверждения, что вы действительно хотите посмотреть файл. Обещаю не нанести вам или вашему компьютеру вред. :)

В общем, я начал с изучения флеш-ролика. К счастью оказалось, что его создатели разделили данные (XML и изображения) и презентацию (Flash). Так что любой может легко сделать свою имплементацию.
На локально сохранённый XML я навесил небольшой XSL, который генерирует HTML, необходимый для презентации, — с этим было всё просто и понятно.
Вот, наиболее интересная часть полученной HTML-структуры:
<div id="name">
 <div id="country">
  <div id="age">
   <div id</font>="gender">
    <div id="tenure">
     <p id="menu">Order by:
      <a href="#name" id="menu-name">Name</a>
      <a href="#country" id="menu-country">Country</a>
      <a href="#age" id="menu-age">Age</a>
      <a href="#gender" id="menu-gender">Gender</a>
      <a href="#tenure" id="menu-tenure">Tenure</a>
     </p>
     <ul> <!-- фоточки -->
      <li>...</li>
      <li>...</li>
      ...
     </ul>
    </div>
   </div>
  </div>
 </div>
</div>

* This source code was highlighted with Source Code Highlighter.


Теперь осталась очередь за CSS. В двух словах: используя псевдо-класс :target я получил возможность переключать сортировку фотографий, используя CSS3 переходы (transitions) я смог показать «визуальную сортировку» и плавные эффекты переходов, появлений и пропаданий. Для показа больших фотографий я решил воспользоваться псевдо-классом :active, — пользователю будет необходимо зажать кнопку мыши над интересующей его фотографией. Так же я использовал RGBA и box-shadow.
Вот пример того ужаса, который необходимо писать сейчас для каждого браузера, т.к. официально стандарт ещё в процессе разработки:
-webkit-transition-property: opacity;
-webkit-transition-duration: .6s;
-webkit-transition-delay: .6s;
-moz-transition-property: opacity;
-moz-transition-duration: .6s;
-moz-transition-delay: .6s;
-o-transition-property: opacity;
-o-transition-duration: .6s;
-o-transition-delay: .6s;

Как только модуль переходов станет рекомендацией, надо будет добавить строчку без производителе-зависимой приставки.
Вот, в общем-то и всё. Создавая эту демонстрацию я не ставил цели скопировать всю функциональность оригинала, но, как я уже говорил, что это видится мне 100% возможным с использованием JavaScript и какой-то технологии для проигрывания аудио-файлов. Так же с помощью JavaScript можно поддержать пользователей IE.
Я тестировал эту демонстрацию в Google Chrome 4, Apple Safari 4, и Mozilla Firefox 3.7. Firefox имеет некоторые проблемы с переходами. Я добавил приставки -o- к некоторым правилам, так, что можно будет потестировать в Opera.
Любые полезные замечания и поправки приветствуются!
Теги:
Хабы:
Всего голосов 57: ↑51 и ↓6 +45
Просмотры 1.7K
Комментарии Комментарии 39