Динамичные веб-презентации без использования 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.
    Любые полезные замечания и поправки приветствуются!
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 39

      +2
      Ух ты как здорово. Не думал что такое можно делать лишь при помощи html + css.
        0
        Отличная работа, держи плюс!
          0
          Плюс выводит статью на главную :)
            +1
            Автору респект! Самое радостное во всей этой новости, что сделанное в целом вполне применимо, т.е. это не концепт, когда задача состоит в том, чтобы сделать это на css+html любой ценой не считаясь с трудозатратами.
              0
              А как можно посмотреть исходник?
              Пробовал, но показывает видимо лишь небольшую часть — XML
              Самого CSS нигде не видно
                0
                Я дал ссылку на CSS в заметке.
                +1
                Подборка лиц перекрывает возможности CSS с лихвой.
                Один Jacob Zuma чего стоит.
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Вечер и немного ночью посидел… ;)
                    +2
                    Какая-то беда там с определением координат. Поводите мышкой по лбам людей со второй строчки и ниже. :)
                    Chrome 4
                      –3
                      Однако долго пришлось ждать, чтобы увидеть демо…
                      Всё хорошо, но к чему было так извращаться? Результат ведь того не стоит. imho.
                        –3
                        спасибо за минус. Тут полно таких мнений, именно мне надо было влепить. ага. И ещё здесь пожалуйста влепите.
                          –2
                          Успокойся, бро, держи плюсик
                            –3
                            Большое спасибо! Надо выбираться как-то из минусов, а то свой стартап чёрт знает когда опубликую.
                        +1
                        Все таки не дотягивает до решений на флеше. Фотографии увеличиваются не красиво и тормозит… в хроме. Тултип ведет себя по-идиотски, не исчезает, когда я увожу курсор с самбнейла. Показывать большую фотографию, зажимая кнопку — довольно странное решение.
                          0
                          Сейчас это сделано на чистом html+css, можно и полностью скопировать презентацию но для этого нужно использовать javascript
                            +2
                            Ну значит пока нет смысла делать без JS. И то, я хотел бы посмотреть как браузер будет увеличивать картинки в этом случае. На флеше есть supersampling, он и дает плавность увеличения.
                              –2
                              А у Jquery есть анимация, не менее плавная, чем у flash, неужто вы не знали? :)
                                +2
                                en.wikipedia.org/wiki/Supersampling
                                Тут никакой Jquery не поможет, картинку все равно рисует браузер.
                                  –2
                                  кто минус поставил, покажись? Основание есть?
                            –5
                            глючно, некроссбраузерно, топорно…

                              +1
                              В общем то css+html+JS могут потеснить среду flash, но только если появится достойная среда разработки.
                                +1
                                Для меня было открытием, что выгнутая стена (не знаю как правильно её назвать) со страницами в safari 4, сделана при помощи css трансформации.
                                  0
                                  В чём открытие? Даже IE6, которому много-много лет, умеет такое при помощи фильтра Matrix.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Если я ничего не путаю, то да.
                                  +1
                                  эх, а я надеялся, что сортировка сделана автоматически, а не ручным указанием позиций: )
                                    +1
                                    Считаю что выбор реализации зависит от задачи.
                                    Если говорить о создании презентаций, то, как я думаю, флеш выигрывает и вот почему:
                                    1. Эффекты созданные на html+js+css явно было проще сделать на флеш (по временным затратам).
                                    2. Во флеше отпадает вопрос кроссбраузерности и вооще отпадает вопрос использования браузера, флеш запустится где угодно (ну почти).
                                    3. Флеш можно сделать в виде одного файла (или несколько дополнительных, если он флеш подтягиват внешние данные, например, такие как видео). Если презентация будет передана потенциальному клиенту, ему не надо будет копаться в куче файлов и искать этот index.htm
                                    По моему, достаточно и этих трех причин. Аргументов в пользу html вообще не нахожу

                                      0
                                      1) пока нет среды — вы правы, но, думаю, среды для этого появятся. Расставлять спецэффекты на сыром CSS это уже неудобно.
                                      2) Flash иначе работает на мобильных устройствах, какая уж тут кроссбраузерность?
                                      3) HTML тоже можно сделать в виде одного файла, никаких сложностей тут нет. Например, можно использовать data URI.
                                        0
                                        >пока нет среды
                                        Вы имеете ввиду среду разработки, т.е. визуальный редактор? Даже для 3D есть такие штуки, но фильмов, сделанных на них я пока не видел.

                                        > Flash иначе работает на мобильных устройствах, какая уж тут кроссбраузерность?

                                        Речь идет о презентациях. Честно скажу, я еще не видел чтобы презентации в офисах показывали на мобильных телефонах. Это было бы слишком круто. Кроме того, не знаю как на других, но на моей Nokia 5800 флеш плеер ведет себя вполне адекватно.

                                        > HTML… в виде одного файла
                                        Да, конечно
                                          0
                                          Вы имеете ввиду среду разработки, т.е. визуальный редактор? Даже для 3D есть такие штуки, но фильмов, сделанных на них я пока не видел.
                                          Как вы пропустили? На ютубе их много — любительские ролики.

                                          Речь идет о презентациях. Честно скажу, я еще не видел чтобы презентации в офисах показывали на мобильных телефонах. Это было бы слишком круто.
                                          Ну, смотря какой телефон. Мой X7500 имеет VGA-выход. Не слишком распространено, но бывает.
                                            0
                                            Наш спор идет в разных плоскостях. Вы говорите о вещах, возможных теоретически (и я тут с вами полностью согласен), а я о прикладном применении. Презентация потенциальному «хорошему» клиенту подготавливается достаточно кропотливо (во всяком случае в компании, в которой я работаю происходит именно так), надеяться на моб. телефон не приходится, ведь он может: выпасть из кармана (шанс упасть у лептопа горазд ниже), может «сесть» аккумулятор и я на него сяду и раздавлю. На сегодняшний день я бы не поехал к клиенту «попонтоваться» с презентухой в мобиле, даже если у нее есть VGA выход :)
                                              0
                                              Да, я понимаю :) Кстати, мой телефон очень трудно потерять :))) Да и сесть на него, скорее попа треснет :) Он *очень* большой :)

                                              В общем, конечно же, Flash всё ещё намного удобней, но я рад, что браузеры двигаются в сторону его замены. Всё-таки Flash, при всей крутизне, проприетарная штука. Вот нет его на Windows Mobile или на какой-нить PSP очень старая версия и ничего с этим не сделаешь.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        Хабровчане наэффектили видимо
                                          0
                                          Это на MyOpera сегодня подняли свободное пользовательское пространство до 2Гб. :)
                                          Вроде, уже попустило и всё грузится.
                                        0
                                        а вы не могли бы еще куда-нибудь выложить исходники? по ссылке не открывает
                                        0
                                        Навеяло. Вот такое было у Opera давно уже — www.opera.com/browser/tutorials/operashow/

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                        Самое читаемое