Прошли времена, когда Якоб Нильсен ругал флэш, за то, что в нем отсутствует удобная навигация, например возможность присвоить определенной странице определенную ссылку, не работают кнопки “Назад” и “Вперед” и т.д.
Якоб Нильсен, Статья – 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 вам сюда — en.wikipedia.org/wiki/.htaccess, а также на сайт apache.org
1) Итак, создайте файл
Не буду вдаваться в подробности о том, как это работает. Вообщем, положив файл
Не обязательно index.php (ваш сервер может и не поддерживать PHP), можно и index.htm и index.html. Главное что бы ваш сервер знал, что если файл index.(n-разрешение), то нужно загрузить ту или иную директорию.
Думаю, что моя идея уже начинает немного прояснятся.
В index.php мы встраиваем swf, неважно как, можно стандартным путем, а можно и с помощью SWFObject (рекомендую). Очень важно указать полный путь к swf:
Так, если бы вы указали просто 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/?
Есть два способа:
Я предпочитаю первый способ.
Схема такая – свойство
Ну а далее в main.swf, через
На основе
Что-то типа:
Естественно вы скажете —
В этой статье я делюсь общими принципами создания чистых URL для flash-сайтов, так называемых deeplinks. В принципе вот и все.
Надеюсь, что я внятно выложил свою идею – и дал вам повод для размышлений.
А повода для размышлений масса — например:
Тут опять-таки два варианта:
Кстати навигация на 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:
Вам стоит почитать статью на русском SWFObject — все о внедрении SWF, детекции версии плеера и ExpressInstall.
Собственно все. Да пусть URL вашего сайта “будет чистым как поцелуй младенца”.
UPDATE: Совтеую воспользовтася данной библиотекой — SWFAddress, которое решает многои проблемы с навигацией (кнопок Назад, Вперед и т.д.).
Якоб Нильсен, Статья – 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/?
Есть два способа:
- С помощью JavaScript (
location.pathname
) иflashvars
- Непосредственно с помощью 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. В принципе вот и все.
Надеюсь, что я внятно выложил свою идею – и дал вам повод для размышлений.
А повода для размышлений масса — например:
- Что делать, если xml не был загружен? Ага, точно! сгенерировать страницу 404.
- Подумать о сериализации. Это достаточно сложный вопрос. Может, на эту тему я еще напишу статью
- Как оповестить пользователя о том, что он переместился с главной страницы на /eng/portfolio/design/my_first_work/?
Тут опять-таки два варианта:
- Либо грубо открывать страницу с помощью
getURL
(что повлечет за собой – большой трафик и долгая загрузка main.swf). Очень не советую использовать этот вариант. - Либо создать специальную панель 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, которое решает многои проблемы с навигацией (кнопок Назад, Вперед и т.д.).