Полное погружение в аякс - слушаем музыку и гуляем по сайту одновременно (демо шаблона для 2.*)

2505
Приветствую

Цели:
1. дать возможность пользователям гулять по сайту и слушать музыку, которая не будет прерываться.
2. ускорить загрузку страниц, уменьшив размер трафика с сервера к клиенту


На демо сайте я разместил аудио виджет. Посмотреть как работает можно запустив музыку и переходя на различные страницы сайта.
Работа еще в самом разгаре - не все встроенные скрипты InstantCMS 2.* поддерживаются как надо.


Аякс аяксом, но это никак не влияет на индексацию - для поисковиков ссылки работают как обычно. И кнопки "назад" / "вперед" в браузере работают корректно. Да и ссылки можно отправить друзьям - они откроются как надо. Заголовок страницы так же меняется корректно.


Что-то подобное у меня уже работало еще на версии 1.9. Но там это был только один компонент, а тут уже результат интересней.

Первый шаблон

перейти
Виджет с музыкой по центру.

Второй шаблон

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


PS возможно, вконтакте повторить не получится (в плане прослушивания музыки), но как минимум трафик мы сэкономим и сайт ускорим.
Россия - Финляндия 5:2, скидка на всё 52%. Всех с победой! | Мигратор для InstantCMS 1* -> 2.2.1. Пользователи и все связанные таблицы.
Комментарии (47)
eoleg 2 июня 2014 в 22:24 +3
тогда нужен список а не одна песТня!
А то надоест до чертиков. smile
eoleg 3 июня 2014 в 00:38 +4
Вот интересно, за что же это минусы? Прошу объяснить. smile
Су-27 3 июня 2014 в 00:43 +4
SJen - я только плюсую - идея хороша но проигрыватель после включения хорошо бы запихнуть куда-нибудь в трей или в выпадающем окне сделать - а то по центру и на главном месте...
Су-27 3 июня 2014 в 00:45 +5
А лучше с профиля пользователя запускать, чтобы гуляя по сайту он не мешал
SJen 3 июня 2014 в 05:19 +3
вы же понимаете, что проигрыватель сделан на коленке за полторы минуты и только ради демонстрации))
Конечно, в нем должно быть больше одной песни - это уже другой вопрос.
Олег Васильевич я 3 июня 2014 в 00:45 +1
Спойлер
уже плюсов больше!
eoleg 3 июня 2014 в 00:47 +1
Спойлер
qb 2 июня 2014 в 22:36 +1
Погулял по сайту в принципе работает ровно. Возникла трабла только когда перешел на вкладку с новостями. Я так понимаю именно по этому не сможем гулять как по ВК?
ALreD 2 июня 2014 в 22:46 +1
а какя трабла? Я специально сходил на вкладку новостей, все хорошо...И с картинкой и с музыкой, никаких зависаний или глюков... Может от браузера зависит таки? у меня МАС, Сафари штатный, в других не смотрел
qb 2 июня 2014 в 22:57 +1
Прервалось проигрывание музыки. Смотрел с FF.
qb 2 июня 2014 в 22:58 +1
Поправлюсь. На новостях теперь сработало. Возможно я слишком быстро счелкал вкладки. Теперь на статьях был обрыв.
SJen 3 июня 2014 в 05:21 0
Возможно я слишком быстро счелкал вкладки.

Да, это javascript - скрипты не всегда успевают сделать свое дело. Есть такое - думаю как это побороть
SJen 3 июня 2014 в 08:27 +1
Возможно я слишком быстро счелкал вкладки

С этим я разобрался, быстрый переход по ссылкам не портит картины.
Нил™ 3 июня 2014 в 00:10 +1
правильно я понимаю, это все будет исключительно на уровне шаблона без правок в самой системе?
SJen 3 июня 2014 в 05:23 0
К сожалению без правок системных файлов не обошлось - потому что сам движок хочет работать с аяксом по-своему, а не как нам надо для реализации аяксового сайта. Но они очень незначительны.
Олег Васильевич я 3 июня 2014 в 00:43 0
И идея хороша и реализация уже в первичном варианте приемлемая! (я всё ж надеюсь, что эта запись всего лишь "проба пера")
eoleg 3 июня 2014 в 00:50 0
Как вариант для реализации можно сделать как у Хулигана, он делал отдельное окно с онлайн радио.
SJen 3 июня 2014 в 09:06 +2
Фишка как раз в том, чтобы не вынуждать пользоваться дополнительными окнами, ну и, конечно, ускорить работу сайта, ограничив обновление только нужных блоков при переходе по страницам. Например, нет необходимости обновлять футер если он одинаковый на всех страницах - но можно и обновлять если нужно. У меня сейчас обновляются все позиции виджетов, кроме аудио - это все настраивается в шаблоне.
Def 3 июня 2014 в 10:21 +2
отличное решение!!!
SpideR 3 июня 2014 в 11:24 +3
Молодец SJen! Я уже думал к аяксу никогда не придем.

Не вздумайте забрасывать эту идею. joke
Rainbow 3 июня 2014 в 12:58 +1
Прветствую, а кто минусет.....

Евгений все нормально, ждем Ваших разработок...
AndroS 3 июня 2014 в 15:29 +1
На демо аудиоролики убрали? Кнопка включения записи и перечеркнутый динамик неактивны, потестить не удалось. Опера хромовая на винде 7 x64
SJen 3 июня 2014 в 18:03 0
там другое - опера похоже не поддерживает проигрывания mp3 в теге html5 audio.
Я там не ставил целью выложить кроссбраузерный звук, сейчас придумаю что-нибудь (может онлайн радио выложу)
Крот 5 июня 2014 в 12:16 0
все это конечно хорошо
добавлю свою ложку дегтя -
1) проект obf.fullajax уже 4 года как не поддерживается а браузеры все новее и новее
2) версия icms новая а велосипеды все старые, говорить "работает же" - winxp тоже неплохая чтож все на семерку то переходят
3) по феншую аяксу передавать надо json а не весь html - двиг вроде уже поддерживает, криво правда но все же
- зачем лишний раз грузить слабые виртуальные хостинги

никак не вырастет инстант
Fuze 5 июня 2014 в 13:20 0
3) по феншую аяксу передавать надо json а не весь html - двиг вроде уже поддерживает, криво правда но все же
кто это такой феншуй обозначил)? передавать нужно то, что требуется в конкретном случае.

А по сабжу, это если делать, то делать "из коробки".

проект obf.fullajax уже 4 года как не поддерживается а браузеры все новее и новее
Можно сделать свое решение, например, упрощенно, что-то типа:

Код JAVASCRIPT:
  1. function loadLink (link){
  2. $.get(link, {}, function(data){
  3. $('tag').html(data.html);
  4. window.history.pushState({link: link}, data.title, link);
  5. }, 'json');
  6. return false;
  7. }
  8. $(function() {
  9. $('.pajax').on('click', function (){
  10. return loadLink($(this).attr('href'));
  11. });
  12. $(window).on('popstate', function(e){
  13. return loadLink(e.originalEvent.state.link);
  14. });
  15. });
Крот 5 июня 2014 в 16:32 0
ИМХО здравый смысл

а) получить данные из БД, собрать "шаблон" на сервере, передать весь этот html клиенту
или
б) получить данные из БД, отдать json массив с данными (без шаблона) - шаблон соберется в браузере

а если одновременно сто запросов?
а тысяча?
что быстрее?
SJen 5 июня 2014 в 18:32 0
б) получить данные из БД, отдать json массив с данными (без шаблона)

а шаблон значит хранить будем на клиенте, то есть сначала нужно загрузить весь шаблон - все файлы шаблона каждому посетителю и роботу? - собирать то клиент будет. Или я не понимаю фишку или тут что-то очень замороченное.. Получить данные из БД это лишь малая часть работы по сборке шаблона. Дальше идет применение огромного числа правил, которые реализуются компонентами и настройками доступа.
SJen 5 июня 2014 в 18:35 0
а если одновременно
сто запросов?
а тысяча? что быстрее?

сто запросов при аяксовом обновлении страниц меньше нагрузят сервер, чем сто простых обновлений страницы.
тысяча запросов аналогично будет быстрее с аяксом. Мы же сравниваем нагрузку при прочих равных условиях?
Крот 6 июня 2014 в 01:25 0
Дальше идет применение огромного числа правил, которые реализуются компонентами и настройками доступа.

просто необходимо отделять бизнес-логику от представления, это очень сильно облечает и сопровождение и доработку

а шаблон значит хранить будем на клиенте
да в том же самом html5 есть хранилище данных в браузере
SJen 5 июня 2014 в 15:39 0
Крот:
3) по феншую аяксу передавать надо json а не весь html - двиг вроде уже поддерживает, криво правда но все же

html передается только тот, который надо отобразить на экране, ничего больше. Основная верстка уже есть у клиента и она не подгружается. У меня обновляется позиций 19 виджетов. В реальном проекте будет обновляться позиции три-четыре (большинство виджетов не будут меняться от страницы к странице).

Крот:
1) проект obf.fullajax уже 4 года как не поддерживается а браузеры все новее и новее
Хороший довод. Действительно - у меня на инстанте библиотека не заработала на нескольких компонентах, но ничто не помешало открыть javascript и дописать или поправить устаревшие моменты. Главное же все-равно "руки", а не умение найти кем-то написанное готовое решение)

Крот:
- зачем лишний раз грузить слабые виртуальные хостинги
Не совсем понял - то есть грузить слабые хостинги обновлением целой страницы это нормально, а грузить их обновлением 20-30% страницы это уже плохо?) - скорость работы наоборот возрастает, за счет экономии в количестве операций как на стороне сервера, так и на стороне клиента. Плюс экономия трафика для клиента.

2) версия icms новая а велосипеды все старые, говорить "работает же" - winxp тоже неплохая чтож все на семерку то переходят
Да, версия инстанта вторая, а версия javascript не изменилась.. и html все еще пятый. Приходится работать с тем, что есть..

Fuze:
А по сабжу, это если делать, то делать "из коробки".
то есть в коробке InstantCMS? - для этого не требуется вносить много изменений в системные файлы (я поправил только одну строку) и все делается дополнением к шаблону. Конечно, хочется иметь в коробке уже все-все-все, но эта же будет очень тяжелая коробка))
Крот 5 июня 2014 в 16:35 0
просто нужно чтобы кто-то нарисовал полный ajax шаблон для второй версии Инстанта - в движке вроде все уже есть

пока от html5 я увидел только <header> <nav> и <article> и другие структурные html элементы
maxisoft 5 июня 2014 в 17:24 0
А что в вашем понимании полный ajax шаблон? и что вам еще нужно в html5 кроме разметки? Наверное я туплю уже на старости лет.
Крот 6 июня 2014 в 01:35 0
ну моими словами - это шаблон где все ссылки работают не перегружая страницу
Fuze 5 июня 2014 в 20:11 0
имхо, чтобы не заморачиваться, нужно при т.н. fullajax отдавать готовую страницу с виджетами и т.п., т.е. сам подход сменить. По принципу - одна ссылка = один запрос. Кроме этого, у нас есть вывод контроллера, вывод виджетов. По сути нужно в ответе на один запрос отдавать json с:
1. телом контроллера
2. массивом виджетов по позициям
3. название страницы
4. скрипты
В js же расставлять все на свои места. Кроме этого для виджетов внести настройку "не менять(не загружать) при fullajax".
Вот наверное примерно такой алгоритм имхо.
Smith 5 июня 2014 в 23:26 +2
такими методами к angular прийти не долго))
Крот 6 июня 2014 в 01:33 0
я так думаю, что при простом запросе страницы (как будто по ссылке перешли или поисковик зашел) нужно отдать готовую страницу в html, а все остальные клики по ссылкам перехватывать javascriptoм и отдавать маленькими порциями в json (не html) и собирать страницы в браузере, если же javascript отключен, например тот же поисковик зашел, то происходит обычный переход по ссылке и отдается обычная html страница. И все довольны, и клиенты и гугл с яндексом

хотя поисковики, говорят уже умеют ходить по javascript`У

а чтобы за клоакинг по голове не получить - используются шаблонизаторы, могущие работать как на сервере так и на клиенте
и в html5 уже встроен history api - вполне так полноаяксовый одностраничник можно сделать самому

это моя такая навязчивая идея, извините, если кого обидел своими словами, я не хотел этого
SJen 6 июня 2014 в 14:34 0
второй вариант шаблона на аяксе выложил, ссылку в топик добавил. Посмотреть вживую можно тут.
Второй шаблон на текущий момент более доработанный в плане работы с аяксом.
ice 6 июня 2014 в 15:02 0
здорово!
но есть конфликты с другими скриптами, например когда перелистываешь картинки в галерее :)
SJen 6 июня 2014 в 15:09 +1
ничего, разберемся)
прогресс есть
Су-27 8 июня 2014 в 23:00 0
Дерзай - дорогу осилит идущий hoho
Эй! Я все вижу! Разве можно мой статус тырить без ссылки на меня любимого?
)
Су-27 9 июня 2014 в 22:14 0
Коллега - ничо не тырил laugh
qwest 8 июня 2014 в 23:35 0
Пеовый глючит второй вообще не работает сбрасывается при перелистывании страниц. Браузер IE 9.
SJen 9 июня 2014 в 06:57 0
на втором сайте я отключал аякс на выходные, проверял другие моменты. Но под IE как обычно может не работать, он очень привередливый. Я обычно сначала настраиваю под современные браузеры, а потом допиливаю под ослика.
Raiden 8 апреля 2016 в 14:13 +1
Это когда-нибудь будет реализовано в видео компонента? Очень срочно нужно!
Raiden 8 апреля 2016 в 14:14 +1
В виде*
Capitan 10 июня 2017 в 12:54 0
у когонить остался код?