Pull to refresh

Размышления на тему чистоты URL во flash-сайтах

Reading time 6 min
Views 788
Прошли времена, когда Якоб Нильсен ругал флэш, за то, что в нем отсутствует удобная навигация, например возможность присвоить определенной странице определенную ссылку, не работают кнопки “Назад” и “Вперед” и т.д.

Якоб Нильсен, Статья – Flash неприемлем на 99%:

“Посетители сайта двигаются так, как им хочется, тогда, когда им этого хочется. Именно поэтому с Web так удобно работать, несмотря на наличие других недостатков. К сожалению, многие Flash-дизайнеры ограничивают эту свободу пользователей и превращают сайты в презентации, напоминающие скорее телевизионную рекламу, чем интерактивную программу. Невозможно “открутить” ролик назад, кнопка Back не работает”.

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

В Сети на эту тему, информации не так уж и много и на форумах и рассылках часто задают этот вопрос:

FlashGuru, статья — Effective Flash Navigation и у Михаила Антипина, статья — Взаимодействие Flash — JavaScript и навигация по флэш-сайту.

В итоге, навигация на вашем flash-сайте, после прочтения этих уроков, будет иметь следующий вид: http://yoursite.com/#news/2006/08/25

И кроме того будет работать кнопки “Назад” и “Вперед” (У FlashGuru работают только кнопки. Адресная строка не обновляется).

Данная статья немного не об этом – вренее об этом, но здесь я хочу показать, как можно сделать URL более красивым (чистым). URL будет выглядеть примерно так: http://yoursite.com/news/2006/08/25.

Заметили разницу с предыдущим примером? Да, верно отсутствует знак #.
Вроде мелочь, но без #, все рано, согласитесь симпатичнее.

Советую на эту тему прочитать главу из Ководства Артемия Лебедева:
§ 48. Боремся за чистоту URL

Но мой метод не без недостатков, увы:

Кнопок “Назад” и “Вперед” работают, но только при их нажатии происходит полная перезагрузка html-страницы. Реального обновления адресной строки, передавая запросы из Flash, происходить не будет. Зато Flash умеет принимать запросы из адресной строки и на их основе загружать те или иные данные. Но об этом ниже.
  • Ваш сервер должен поддерживать файл .htaccess (и мало того mod_rewrite)
  • Но конечно, есть и достоинства:
  • Неоспоримо – красивый и чистый URL.
  • Поддерживается всеми браузерами и платформами.
  • Способ очень легок в реализации

Попробую объяснить, как это работает и зачем для этого нужен файл .htaccess.

Файл .htaccess (по материалам Wikipedia )

.htaccess — файл дополнительной конфигурации веб-сервера Apache, а также подобных ему серверов. Позволяет задавать большое количество дополнительных параметров и разрешений для работы веб-сервера, такие как парольный доступ к каталогам, переназначение типов файлов и т. д.

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

За подробностями о файле .htaccess вам сюда — en.wikipedia.org/wiki/.htaccess, а также на сайт apache.org

1) Итак, создайте файл .htaccess:

RewriteEngine On
RewriteBase /корневая папка вашего сайта
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . / - корневая папка вашего сайта -/index.php [L]


Не буду вдаваться в подробности о том, как это работает. Вообщем, положив файл .htaccess с выше набранным кодом, в корневую папку вашего сайта, какой бы путь вы не написали в адресной строке, по любому будет загружаться файл index.php, который находится вместе с файлом .htaccess, все в той же корневой папке.

Не обязательно index.php (ваш сервер может и не поддерживать PHP), можно и index.htm и index.html. Главное что бы ваш сервер знал, что если файл index.(n-разрешение), то нужно загрузить ту или иную директорию.

Думаю, что моя идея уже начинает немного прояснятся.

В index.php мы встраиваем swf, неважно как, можно стандартным путем, а можно и с помощью SWFObject (рекомендую). Очень важно указать полный путь к swf:

var so = new SWFObject("main.swf", "main", "100%", "100%", "8", "0x000000", false, "high");so.addVariable("app", getQueryParamValue("app"));
so.addVariable("id", getQueryParamValue("id"));
so.write("flashcontent");


Так, если бы вы указали просто main.swf, то при запросе из адресной строки, скажем http://yoursite.com/eng/portfolio/design/my_first_work/, SWFObject просто бы не нашел main.swf, потому что директорий eng и portfolio и т.д. в реальности не существует.

Теперь как же main.swf узнает, о том что она в директории http://yoursite.com/eng/portfolio/design/my_first_work/?

Есть два способа:
  1. С помощью JavaScript (location.pathname) и flashvars
  2. Непосредственно с помощью ActionScript (_root._url)

Я предпочитаю первый способ.
Схема такая – свойство location.pathname извлекает из URL ту его часть, которая содержит путь. Передает URL, с помощью flashvars – файлу main.swf (можно кстати с помощью JavaScript распарсить location.pathname и каждую переменную отдельно передать main.swf. В моем примере парсировка location.pathname происходит непосредственно в main.swf):

var so = new SWFObject("http://yourserver.com/main.swf", "main", "100%", "100%", "8", "0x000000", false, "high");
so.addVariable("location_pathname", location.pathname);
so.write("flashcontent");


Ну а далее в main.swf, через _root, мы получаем переменную location_pathname, скажем:
_root.location_pathname="/eng/portfolio/design/my_first_work/" и далее идет обычная сериализация строк. Процесс сериализации во многом зависит от структуры вашего сайта. Например, приведу код простенькой функции Location Serializer (это элементарнейший пример):

var location:Object = new Object();
location.pathname = _root.location_pathname
function LocationSerializer(path:String) {
var pathname_str:String = path.substr(1, path.length-2);
var path_arr:Array = pathname_str.split("/");
trace("Language: " path_arr[0]);
trace("Category: " path_arr[1]);
trace("SubCategory: " path_arr[2]);
trace("Id: " path_arr[3]);
}
LocationSerializer (location.pathname);


На основе path_arr[0] и т.д., можно передать запрос на загрузку xml (тут множество решений – можно давать ссылку на обычный статичный xml, либо хранить данные в mysql и выводить xml по запросу).
Что-то типа:

loadXML("project.php?lang="+ path_arr[0]+"&category="+ path_arr[1]+ path_arr[2]+"&id="+ path_arr[3])

Естественно вы скажете — path_arr[0], [1], [n...] вручную создавать не рентабельно. Я согласен, у меня, для своих проектов – есть специальный класс (вернее группа классов), которые этим и занимаются. Но это отдельная тема для разговора.

В этой статье я делюсь общими принципами создания чистых URL для flash-сайтов, так называемых deeplinks. В принципе вот и все.
Надеюсь, что я внятно выложил свою идею – и дал вам повод для размышлений.

А повода для размышлений масса — например:
  1. Что делать, если xml не был загружен? Ага, точно! сгенерировать страницу 404.
  2. Подумать о сериализации. Это достаточно сложный вопрос. Может, на эту тему я еще напишу статью
  3. Как оповестить пользователя о том, что он переместился с главной страницы на /eng/portfolio/design/my_first_work/?

Тут опять-таки два варианта:
  1. Либо грубо открывать страницу с помощью getURL (что повлечет за собой – большой трафик и долгая загрузка main.swf). Очень не советую использовать этот вариант.
  2. Либо создать специальную панель DIRECT LINK, в которой хранится текущий URL сайта. Реализацию такого эффекта можно посмотреть на thefwa.com

Кстати навигация на thefwa.com по функционалу точно такая же как у меня:
http://www.thefwa.com/?app=winners&id=6025
Достоинства моего примера очевидны, если бы его использовали на thefwa.com:
http://www.thefwa.com/winners/6025

Легче набрать, легче прочитать. И вообщем URL более ясный, скажем для секретарши, которая зашла на этот сайт. Кстати у многих возникают вопросу насчет того как сделать http://www.thefwa.com/?app=winners&id=6025. Все элементарно, с помощью того же SWFObject:

var so = new SWFObject("main.swf", "main", "100%", "100%", "8", "0x000000", false, "high");
so.addVariable("app", getQueryParamValue("app"));
so.addVariable("id", getQueryParamValue("id"));
so.write("flashcontent");


Вам стоит почитать статью на русском SWFObject — все о внедрении SWF, детекции версии плеера и ExpressInstall.
Собственно все. Да пусть URL вашего сайта “будет чистым как поцелуй младенца”.

UPDATE: Совтеую воспользовтася данной библиотекой — SWFAddress, которое решает многои проблемы с навигацией (кнопок Назад, Вперед и т.д.).
Tags:
Hubs:
+5
Comments 4
Comments Comments 4

Articles