Хочу немного рассказать про технологию FullAjax и ее применении на сайте под ICMS. Глубоко в теорию уходить не буду, расскажу в общих чертах. Кому будет интересны подробности — спрашивайте в комментах.
Плюсы использования:
1. ускорение загрузки страницы у посетителей за счет того, что обновляется только нужная часть страницы (например, центральный блок с контентом).
2. уменьшение нагрузки на сервер по той же причине — уменьшается объем того, что нужно формировать. Вместо вывода шапки, сайдбаров, центра и футера можно вывести только центр (остальное остается как есть и не меняется)
3. В отличии от простого аякса (метод ajax в библиотеке jquery и другие) меняется адрес страницы. То есть на любом этапе блуждания по сайту — вы можете копировать URL из адресной строки и послать другу — у него все откроется и он попадет на ту же самую страницу.
4. Работает кнопка "Назад" в браузере. А вот, например, при переходе с одной страницы на другую при просмотре "ленты активности" или комментариев кнопка "Назад" вводит посетителя в заблуждения — уводя совсем не туда, где он был до этого (то есть на предыдущей странице).
5. Никаких минусов в плане индексации поисковиками — сайт индексируется так же, как и без внедрения этой технологии.
На IE не подключаю fullajax — не могу пока побороть некоторые проблемы. Так что пользователи этого "чудо" браузера открывают все на новой странице.
Пример работы сайта, который работает на fullajax+ICMS -
Откройте, погуляйте по статьям, понажимайте кнопку "Назад". Важно: компонент "Пользователи" работает без fullajax — то есть все, что связано с пользователями(профиль, личные сообщения и тд) открывается в новой странице. Но в перспективе весь сайт будет полностью аяксовый.
И очень кратко про подключение:
1. подключить файл библиотеки obf.fullajax.js (закинул его в свои файлы если интересно)
2. выполнить скрипт (реальный пример и немного комментариев)
Комментарии очень кратко: Выполнять fullajax для всех страниц (url:['/']), методом post передавать параметр ax=1 (для того, чтобы в шаблоне понять открывается он аяксом или нет). Загружать контент в div с id = cmsbody. Заменять в адресе конструкцию по умолчанию(:ax:ID-Tab-Object:) на более читаемый "ajax". Страницы {'/login','/registration','/logout','/users'} всегда открывать в новом окне, без аякса.
Разработчики — Руслан Синицкий и Александр Лозовюк
Еще несколько ссылок по теме(статьи от разработчиков на хабрахабре):
Прямые ссылки на AJAX веб-сайтах – наша технология Fullajax Direct Link.
Fly AJAX — пишите меньше, имейте больше.
Полный AJAX. Теория и Примеры. Фишки и Фичи
PS Я не имею никакого отношения к разработчиками и просто использую данную библиотеку у себя на проектах.
Плюсы использования:
1. ускорение загрузки страницы у посетителей за счет того, что обновляется только нужная часть страницы (например, центральный блок с контентом).
2. уменьшение нагрузки на сервер по той же причине — уменьшается объем того, что нужно формировать. Вместо вывода шапки, сайдбаров, центра и футера можно вывести только центр (остальное остается как есть и не меняется)
3. В отличии от простого аякса (метод ajax в библиотеке jquery и другие) меняется адрес страницы. То есть на любом этапе блуждания по сайту — вы можете копировать URL из адресной строки и послать другу — у него все откроется и он попадет на ту же самую страницу.
4. Работает кнопка "Назад" в браузере. А вот, например, при переходе с одной страницы на другую при просмотре "ленты активности" или комментариев кнопка "Назад" вводит посетителя в заблуждения — уводя совсем не туда, где он был до этого (то есть на предыдущей странице).
5. Никаких минусов в плане индексации поисковиками — сайт индексируется так же, как и без внедрения этой технологии.
На IE не подключаю fullajax — не могу пока побороть некоторые проблемы. Так что пользователи этого "чудо" браузера открывают все на новой странице.
Пример работы сайта, который работает на fullajax+ICMS -
Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст
Откройте, погуляйте по статьям, понажимайте кнопку "Назад". Важно: компонент "Пользователи" работает без fullajax — то есть все, что связано с пользователями(профиль, личные сообщения и тд) открывается в новой странице. Но в перспективе весь сайт будет полностью аяксовый.
И очень кратко про подключение:
1. подключить файл библиотеки obf.fullajax.js (закинул его в свои файлы если интересно)
2. выполнить скрипт (реальный пример и немного комментариев)
Разработчики — Руслан Синицкий и Александр Лозовюк
Еще несколько ссылок по теме(статьи от разработчиков на хабрахабре):
Прямые ссылки на AJAX веб-сайтах – наша технология Fullajax Direct Link.
Fly AJAX — пишите меньше, имейте больше.
Полный AJAX. Теория и Примеры. Фишки и Фичи
PS Я не имею никакого отношения к разработчиками и просто использую данную библиотеку у себя на проектах.
закинул в свои файлы
Сейчас все работает как надо, то есть как обычно
нужно прописать еще нужный блок
SRAX.Model2Blocks['ID-Tab-Object'] = {'cmsbody':'cmsbody'};Ну и надо править файл шаблона - чтобы fullajax знал, что именно вам нужно загружать - я про
Было бы здорово
Первым делом подумал, что не будет индексироваться поисковиками. Но оказывается, индексируется. Это хорошо.
Демо посмотрел. Всё работает. В демо структура сайта не очень сложная и обновляется, как я понял, только блок cmsbody. Но у многих сайтов структура посложнее и есть, например, модули, которые выводятся только на определенных страницах. И конечно же, возможные конфликты js, которые будут неизбежны. Это я к тому, что полностью перевести icms на fullajax без проблем, наверно, не получится. Нужно будет затачивать индивидуально под каждый проект или компонент.
Автору большое спасибо. Он показал, как это использовать. И кто-то может применить у себя.
Каким бы скромным он был, такой вклад в ICMS стоит большой благодарности.
У меня сейчас реализовано по-простому, потому что раньше я использовал fullajax на сайте wordpress - а структура wp не идет ни в какое сравнение с ICMS:) Оптимизировать же ICMS я только начал, это долгий и сложный путь..
Помнится, чтобы объяснить что такое пинг систем, и для чего он нужен, ушло уйма времени тут (=
Из WP очень бы хотелось видеть кэшер, который наверняка уже переписали под инстант (; отложенный постинг
Сервер где то в германии
пинг 80-100 ms
Обычно все зарубежное открывается у меня во всяком случае с тормозами
Этот же сайт как будто у меня на компе стоит.
Жалко что компонент универсальный нельзя сделать.
+
1 SRAX.Filter.add({id:'ID-Tab-Object', url:['/'],method:'post',params:'ax=1'});
2 SRAX.Model2Blocks['ID-Tab-Object'] = {'cmsbody':'cmsbody'};
3 SRAX.linkEqual[':ax:ID-Tab-Object:'] = 'ajax';
4 SRAX.Filter.add({url: ['/login','/registration','/logout','/users'], type:'nowrap'});
5 SRAX.directLink();
Счастливые обладатели firefox и firebug могут посмотреть, что у меня на сайте возвращается если нажать на любой рецепт. (Закладка "Сеть", вкладка "XHR" - то есть загрузки по аяксу)
При отключенном JS (а именно так просматривают сайты поисковики), на вашем сайте исчезает "Наше меню". Хотя на сколько я догадываюсь это не имеет отношения к данному скрипту.
Обернул <div id="cmsbody"><?php cmsBody(); ?></div>
Ссылки надо как-то изменять? Или еще что-то?
Чтобы можно было хотя бы компонент content сделать.
<?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } $noax = $_POST['ax'] != 1; // если $noax=1, значит обычная загрузка страницы (НЕ fullajax) if ($noax==1){ //если простая загрузка - выводим, если аякс - не выводим шапку, сайдбары и тд ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">; <html xmlns="http://www.w3.org/1999/xhtml">; <head> <!-- HEAD !--> <?php cmsPrintHead(); ?> <script src="/templates/_default_/js/obf.fullajax.js" type="text/javascript"></script> <script type="text/javascript"> SRAX.Filter.add({id:'ID-Tab-Object', url:['/'],method:'post',params:'ax=1'}); SRAX.Model2Blocks['ID-Tab-Object'] = {'cmsbody':'cmsbody'}; SRAX.linkEqual[':ax:ID-Tab-Object:'] = 'ajax'; SRAX.directLink(); </script> <!--тут подключаем все остальные скрипты и стили--> </head> <body> <div id="wrapper"> <div id="page"> <!--тут какие-то блоки, модули и тд. то есть то, что при нашем вариенте фулаякса обновляться не будет--> <div id="cmsbody"> <?php } ?> <?php if ($noax!=1){ echo'<!-- :ax:cmsbody:begin: //-->'; //если аякс - выводим начало блока и контент (он загрузится в div c id = cmsbody) }?> <?php cmsBody(); ?> <?php cmsModule('main'); ?> <?php if ($noax!=1){ echo'<!-- :ax:cmsbody:end: //-->';//если аякс - выводим конец блока }?> <?php if ($noax==1){ //если обычная загрузка страницы - выводим футер ?> </div> </div> <div id="footer"></div> </div> </body> </html> <?php } ?>Я же не говорил, что все просто)
Это не тривиальная задача.
<option value="_self" <?php if (@$mod['target']=='_self') { echo 'selected'; }?>>В этом же окне (self)</option><option value="" <?php if (@$mod['target']=='') { echo 'selected'; }?>>В этом же окне (self)</option>[Но я же выложил пример файла шаблона, в котором все готово для работы этой технологии. Что-то более конкретное сложно написать..
1. Скачал и закинул скрипт /templates/_default_/js/obf.fullajax.js
2. Прописал в head
<!-- HEAD !--> <script src="/templates/_default_/js/obf.fullajax.js" type="text/javascript"></script> <script type="text/javascript"> SRAX.Filter.add({id:'ID-Tab-Object', url:['/'],method:'post',params:'ax=1'}); SRAX.Model2Blocks['ID-Tab-Object'] = {'cmsbody':'cmsbody'}; SRAX.linkEqual[':ax:ID-Tab-Object:'] = 'ajax'; SRAX.directLink(); </script><div id="cmsbody"> <?php } ?> <?php if ($noax!=1){ echo'<!-- :ax:cmsbody:begin: //-->'; //если аякс - выводим начало блока и контент (он загрузится в div c id = cmsbody) }?> <?php cmsBody(); ?> <?php cmsModule('main'); ?> <?php if ($noax!=1){ echo'<!-- :ax:cmsbody:end: //-->';//если аякс - выводим конец блока }?> <?php if ($noax==1){ //если обычная загрузка страницы - выводим футер ?> </div> </div><?php }
?>
http://instantcms.ru/users/files/download1912.html
с ним удобней т.к. тут в коде вылезает фигни много всякой.
Ща сам пробую, черт и почему раньше никто не предлогал, ведь реально быстрей бегает
1. Табы в профилях упали. Причем при нажатии, например на "клубы"
Пишет: Error 404 : /blogs#upr_clubs Not Found
Ну тут ясно конфликт подключений
2. Теги под статьями перестали быть кликабельными (на печенюги тегов нет, по этому проверил у себя) думаю у других кто теги выводит тоже не работают.
не забывайте, что вы подгружаете только контент - без скриптов. Скрипты то все в <head> - а мы этот блок исключили из обновления.
Но это не значит, что нельзя грузить скрипты - можно. Это требует более тонкой настройки)
Я у себя еще не перевел все на fullajax. Есть еще что оптимизировать.
Реально ссылка http://www.pechenuka.ru/recipes/category/varene
Получаем при переходе http://www.pechenuka.ru/#ajax/recipes/category/varene
Как на это смотрят поисковики?
Вы же не думаете, что Яндекс тоже через аякс сайты просматривает) У роботов отключено javascript. Они видят нормальные адреса, без решеток
хорошо было бы услышать окончательный вердикт сео-профи
Но вам разве посещаемость ресурса не говорит о том, что уж в seo то у него точно проблем нет?
Нужно как я подумал сделать для основного меню и конкретно компонента статей, а не зоны контента.
Как понял если прописывать для всего контента то это надо переписать уйму кода для всех компонентов, которые будут еще выдавать куча ошибок. Проще остановиться только на каталоге статей и основном меню
Как Вы думаете правильно?
вот для примера
Я сейчас заканчиваю одной интересную штуку, потом можно будет подумать. Все-равно себе планирую расширить эту технологию еще на один компонент.
также можно подгрузить этот скрипт
http://code.google.com/p/fullajax/downloads/detail?name=srax.fx.v0.1.beta.b4.zip&can=2&q=
и в код скрипта добавить
SRAX.Effect.add({id: 'ID-Tab-Object', start:function(id, request){ SRAX.Fx('cmsbody').opacity({end:0.1, d:0.1, cb:request}) }, end:function(){ SRAX.Fx('cmsbody').opacity({end:1, d:0.8}) } });На самом деле можно одновременно подгружать много различных блоков. А не один 'cmsbody' как в моем примере. Можно обновлять, скажем, еще и меню пользователя. Или сайдбар.
Но для нормальной интеграции на рабочий сайт придется потрудиться, готового решения я не написал. Может доберусь, если есть интерес. У меня пока другие приоритеты)
То есть в самом конце страницы
только тег + стили (стили для того, чтобы указать где должна показываться gif анимашка)
попробуй из 2-х подгружаемых файлов obf.srax.fx.js и srax.fx.js
оставить только подгрузку obf.srax.fx.js
у меня только эта библиотека подгружена и все гуд
посмотрите код или киньте сюда (php код в шаблоне, ДО этой строки). Вы там выводите этот символ, что-то лишнее стоит..
<?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } $inUser = cmsUser::getInstance(); $inCore = cmsCore::getInstance(); $mod_count['top'] = cmsCountModules('top'); $mod_count['sidebar'] = cmsCountModules('sidebar'); $noax = $_POST['ax'] != 1; // если $noax=1, значит обычная загрузка страницы (НЕ fullajax) if ($noax==1){ //если простая загрузка - выводим, если аякс - не выводим шапку, сайдбары и тд ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">; <html xmlns="http://www.w3.org/1999/xhtml">; <head>Нужна просто нормальная фотогалерея
<script type="text/javascript"> $('body,html').animate({scrollTop:0},500); </script><?php if ($noax!=1){ echo'<!-- :ax:cmsbody:end: //-->';//если аякс - выводим конец блока }?>0 - до какого уровня поднимать относительно верха страницы. Например можно не показывать шапку если вместо нуля указать число равное высоте шапки.
Или поднять можно не до самого верха или на определенную высоту, а до верха какого-нибудь элемента если его указать вместо body,html, например .content
SRAX.Effect.add({id:'ID-Tab-Object', //'ID-Tab-Object' start: function(id, request){ }, end: function(id){ $(document).ready(function(){ $("a.recipecluetip").cluetip({splitTitle: "|"}); }); } })Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, [no address given] and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Я понял, что это меня культурно послали все вернуть назад как было... :((((((((
И не забывайте про закрывающие фигурные скобки.
переходит по всем страничкам в аяксе, скрипты кешируются, реально стало быстрее работать
только вот нужно будет убрать все addheadjs и addheadcss - не работают они)
может кто знает где документацию полную по fullajax можно взять?