mega.genn.org

available in English, too!

Адресная строка — не приговор.
Deep linking у Flash, Silverlight, Ajax и их друзей
19 комментариев

California bridge and Kiev interechange
В Киеве есть ужасная развязка. Съезжая с Южного моста на правый берег, лучше ехать прямо, чтобы, проехав развязку, сориентироваться, куда попал. Или, может быть, следует сразу свернуть направо? Головоломная развязка. Даже если я заранее разбираю все съезды на карте, все равно выезжаю совсем не туда, куда изо всех сил старался попасть. Она кажется мне запутаннее, чем Harbor Freeway Interchange — самая крупная развязка в Калифорнии, фотографией которой и проиллюстрирован этот пост. Для того, чтобы эта красота вызывала иррациональное чувство ужаса, поверх фотографии наложена схема развязки Южного моста.

До недавнего времени флеш-сайты представляли собой подобные развязки. Если требовалось насладиться красотой сайта и работ, то никаких проблем не возникало. Когда же судьба подбрасывала задание добраться до какого-то определенного фрагмента сайта, то без опытного проводника, GPS и запаса провизии на несколько суток нечего было и набирать адрес в строке броузера.

Тяжелая судьба сайтов с динамическим контентом

Потом появились все эти уловки с Аяксом и Сильверлайтом, о чем я писал раньше. Призванные сделать сайты удобнее, они по-прежнему не могли совладать с адресной строкой броузера. Она тупо указывала на ту страницу, с которой началась загрузка. Мало того, адресная строка не хотела принимать никакого участия в вакханалии, творящейся внутри окна до тех пор, пока не перегружалась вся страница. Это ограничение не только мешало сослаться на конкретную страницу, но и не давало посетителю воспользоваться кнопками броузера Back/Next. О том, какой это был удар по пронырам-поисковикам нечего и говорить. Рыщущие агенты не могли проиндексировать динамические страницы и назначить каждому фрагменту свой url. Я думаю, что многие из них сходили с ума.

Bleed.no

В попытках улучшить возможности навигации, разработчики шли на разные уловки. Например, на сайте дизайн-студии Bleed норвежцы используют <iframe /> для того, чтобы сохранялась история похождений по сайту. Сослаться на конкретную работу по-прежнему не удастся, но хотя бы можно вдоволь понажимать на кнопки Back и Next. На genn.org я пытался реализовать все, используя связку modrewrite + php, но сдался перед более изящным приемом.

Эволюция пролинкованности

Нельзя сказать, что предложенное компанией Asual решение революционно. Уже не меньше пары лет все, кто занимался проблемой deep-linking`а динамических страниц, поняли, что надо использовать якоря. Возможно, использование тяжелых чугунных предметов в приложении к разработчикам броузеров помогло бы больше, но речь о других якорях. Anchors — все, что идет после знака диеза в адресе страницы. Они служат для перемещения в пределах одной страницы без послания новых запросов серверу. Например, на страничке Валерки можно щелкнуть на пункт меню, и сайт будет промотан до необходимого места. Эти же якоря должны помогать сослаться у меня в блоге на конкретный комментарий, но я стер что-то лишнее в шаблоне, и оно, в отличие от повествований о ненаучном популярно, не работает ;)

Ребята из Asual собрали все коллективные знания и облекли их в набор скриптов с названием swfaddress. Работу с броузером обеспечивает яваскрипт, а уж к нему обращается или скрипт из Флеша/Флекса, или из Сильверлайта, или вообще из аякс-наворотов. Таки образом, ядро остается прежним, а общаться с ним можно отовсюду, откуда есть возможность достучаться до яваскрипта.

Как пользоваться swfaddress

Использовать swfaddress очень легко. Главное — не переименовывать .js файлы и прописывать их подключение после подключения скриптов для встраивания флеша (например, swfobject). На своем сайте я вообще подключаю swfaddress.js самым последним:

  1. <script src="/js/swfaddress.js" type="text/javascript" />

Использование во флеше с actionscript 2.0 выглядит совсем просто.

Сначала импортируем все необходимое для работы:

  1. import SWFAddress
  2. import SWFAddressEvent

Затем обрабатываем изменения адресной строки:

  1. SWFAddress.onChange = function() {
  2. trace(SWFAddress.getValue()); // выводит текущий URL
  3. }

И в нужных местах (например, при нажатии на кнопку) меняем адресную строку броузера и, при желании, заголовок окна:

  1. SWFAddress.setValue("patapon"); // адрес преобразуется во что-то вида http://yourdomain.com/#/patapon/
  2. SWFAddress.setTitle("Don Dodon Dodon"); // заголовок окна броузера станет «Don Dodon Dodon»

Иногда по непонятным причинам не происходит взаимодействие при обработке полученного от броузера адреса. Я еще не разобрался почему, но мне все равно придется это сделать ;) На странице разработчиков есть примеры для других версий AS, Flex, Silverlight, Ajax и иже с ними. Если возникнут проблемы, то можно спросить в комментариях, и я постараюсь помочь.

Скептикам

Можно легко возразить, что у тех, кто умудрился отключить в приступе паранойи яваскрипт, ничего не сработает. У этих несчастных в лучшем случае половина сайтов работает не так, как задумано разработчиками. Посочувствуем им и перестанем оглядываться ;)

***

Я с радостью использую swfaddress для genn.org и рекомендую его всем. Теперь можно сослаться на любой раздел и любую работу в моем портфолио. Написав благодарность разработчикам, я получил приятное письмо на русском языке и попал в их showcase (где-то в самом-самом низу). Как я понял из номеров телефонов, скрипты написали и собрали вместе болгарские разработчики и разработчицы. Хочется их еще раз поблагодарить.



Комментарии и трекбеки

11.03.08•11:35 Gasique

Спасибо за хелп!
Сейчас будем прикручивать такое и на своем сайте )

21.03.08•12:35 Stas

В IE на твоем сайте это есть не работает.

что-то где-то недоглядел.

22.03.08•08:07 Genn

Пока разобрался спросонья с конструкцией «это есть», проснулся окончательно ;) Спасибо за звоночек — потестируем. Там недоглядеть сложно с точки зрения разработчика, скорее что-то в самих скриптах, на которые я ссылался. Но так даже интереснее ;)

Скажи версию Internet Explorer, пожалуйста.

23.03.08•08:21 Stas

Пардон за конструкцию, но я полагал это очевидно исходя из темы ;-)

Эксплорер 7.чего-то там. то есть последний. Либо он чего-то не передает этим суперскриптам, либо они чего-то пока еще непонимают, но работать нехочет.
Удачи тебе ;)

31.03.08•20:27 ya_frosia

Привет, Дженн :)

В моей Опере 9,02 работало раньше, всегда работало, кажется, я постоянно удивлялся.

А сейчас прочитал пост, полез на главную удивляться, и удивился, потому что не работает. Сломалось :)

Чмоки.

31.03.08•20:39 Genn

Спасибо вам, ребята, за bugtracks. Самое обидное, что я-то нифига не менял. Ужас. Выдастся свободная минутка — обязательно покопаюсь.

18.04.09•23:37 Олег

Как быть с индексацией? Делать текстовое зеркало сайта?

18.04.09•23:40 Олег

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

19.04.09•08:04 Genn

Олег, Flash уже давно индексируется, вроде, а аякс и так текстовый. Ссылки-то есть, какая разница поисковику? Я не озабочен индексацией абсолютно, поскольку считаю ее важность очень надуманной. Ну и, честно говоря, для genn.org мне не важна индексация. Для сайта «лужу-паяю-примусыпочиняю» она может быть и важна, но зачем такие сайты делать на флеше или с обильным использованием аякса — не понятно.

Какой симпатичный шрифт выглядит мутным? Если не сложно, приложи скриншот, пожалуйста.

9.01.10•15:11 Рома

Спамбо за ваш пост.
Я только недавно решил попробовать swfAdress.
Простите, а вы не знаете почему он может не возвращать getValue() ни при каких условиях? (на на старте, ни на событие CHANGE). Все подключено верно. Сперва swfobject.
Перепробовал все варианы — я уж просто головой об стену готов биться.
(тестирую на сервере, и на локальном денвере — не работает)

12.01.10•07:17 Genn

Рома, спасибо за комментарий ;)

У меня такое тоже пару раз случалось, хотелось сделать что-то плохое и компьютеру, и сайту. Ошибку локализовать я не смог, поэтому решил, что это из-за глобального потепления, стер все упоминания swfAddress и сделал все заново. После этого заработало, хотя я ничего нового или измененного не написал. Магия ;) Кстати, флеш я вставляю не swfobject’ом, а так, как флеш сам генерирует при публикации HTML. Посмотрите исходники genn.org, там встроено как раз так. Может быть в этом дело?

13.01.10•18:40 Рома

Спасибо, буду экспериментировать :)

24.01.10•17:26 Степан

У меня не работает в IE 7. Это как-то лечится?

24.01.10•23:35 Genn

Степан, на всех сайтах или на каком-то определенном?

22.03.10•15:03 Сергей

Добрый день
Я столкнулся с траблой поставил я этот SWFaddress и чот нехрена не пашет.. а именно отображение в адресной строке ссылок есть но.. перейти на сайт по этой ссылке невозможно.. нет не какой реакции((

23.03.10•08:37 Genn

Сергей, я чуть выше ответил на этот вопрос Роме, если я правильно понял, что не работает ;)

24.03.10•03:15 Сергей

нет вы немного не так поняли.. если яша проиндексирует сайт и даст ссылку допустим на портфолио.. то по ней некто не сможет перейти.. тока на главную страницу.. вот в этом проблема.. отображается в браузерной строке всё нищь=))
а вот в то что реакции на сами ети адреса нету абсолютно не какой ето другое.. и по етому поводу я хотел посоветовацО =(((

24.03.10•14:41 Genn

Сергей, ну, правильно, флеш не считывает из адресной строки то, что после #. Я переписал все заново и встроил через стандартное встраивание флеша. Помогло ;)

25.03.10•19:34 Сергей

Ну так а в примере то что идет вместе с SWFaddress там всё ето дело пашед=)) вот я и пытаюсь привеньтить так чтобы он реагировал на адресную строку чтобы люди по запросу могли зайти на определённую страницу=))

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

имя и адрес электронной почты — необходимые поля

Комментировать

Свежие твитты

Другие сайты и сети