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

+49
3.05K
Приветствую

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


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


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


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

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

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

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

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


PS возможно, вконтакте повторить не получится (в плане прослушивания музыки), но как минимум трафик мы сэкономим и сайт ускорим.
+3
eoleg eoleg 8 лет назад #
тогда нужен список а не одна песТня!
А то надоест до чертиков. smile
+4
eoleg eoleg 8 лет назад #
Вот интересно, за что же это минусы? Прошу объяснить. smile
+4
Су-27 Су-27 8 лет назад #
SJen - я только плюсую - идея хороша но проигрыватель после включения хорошо бы запихнуть куда-нибудь в трей или в выпадающем окне сделать - а то по центру и на главном месте...
+5
Су-27 Су-27 8 лет назад #
А лучше с профиля пользователя запускать, чтобы гуляя по сайту он не мешал
+3
SJen SJen 8 лет назад #
вы же понимаете, что проигрыватель сделан на коленке за полторы минуты и только ради демонстрации))
Конечно, в нем должно быть больше одной песни - это уже другой вопрос.
+1
Олег Васильевич я Олег Васильевич я 8 лет назад #
Спойлер
уже плюсов больше!
+1
eoleg eoleg 8 лет назад #
Спойлер
+1
qb qb 8 лет назад #
Погулял по сайту в принципе работает ровно. Возникла трабла только когда перешел на вкладку с новостями. Я так понимаю именно по этому не сможем гулять как по ВК?
+1
ALreD ALreD 8 лет назад #
а какя трабла? Я специально сходил на вкладку новостей, все хорошо...И с картинкой и с музыкой, никаких зависаний или глюков... Может от браузера зависит таки? у меня МАС, Сафари штатный, в других не смотрел
+1
qb qb 8 лет назад #
Прервалось проигрывание музыки. Смотрел с FF.
+1
qb qb 8 лет назад #
Поправлюсь. На новостях теперь сработало. Возможно я слишком быстро счелкал вкладки. Теперь на статьях был обрыв.
0
SJen SJen 8 лет назад #
Возможно я слишком быстро счелкал вкладки.

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

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

Не вздумайте забрасывать эту идею. joke
+1
RSN RSN 8 лет назад #
Прветствую, а кто минусет.....

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

никак не вырастет инстант
0
Fuze Fuze 8 лет назад #
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. });
0
Крот Крот 8 лет назад #
ИМХО здравый смысл

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

а если одновременно сто запросов?
а тысяча?
что быстрее?
0
SJen SJen 8 лет назад #
б) получить данные из БД, отдать json массив с данными (без шаблона)

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

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

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

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

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

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

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

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

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

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

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

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

это моя такая навязчивая идея, извините, если кого обидел своими словами, я не хотел этого
0
SJen SJen 8 лет назад #
второй вариант шаблона на аяксе выложил, ссылку в топик добавил. Посмотреть вживую можно тут.
Второй шаблон на текущий момент более доработанный в плане работы с аяксом.
0
ice ice 8 лет назад #
здорово!
но есть конфликты с другими скриптами, например когда перелистываешь картинки в галерее :)
+1
SJen SJen 8 лет назад #
ничего, разберемся)
прогресс есть
0
Су-27 Су-27 8 лет назад #
Дерзай - дорогу осилит идущий hoho
+2
Странник Странник 8 лет назад #
Эй! Я все вижу! Разве можно мой статус тырить без ссылки на меня любимого?
)
0
Су-27 Су-27 8 лет назад #
Коллега - ничо не тырил laugh
0
qwest qwest 8 лет назад #
Пеовый глючит второй вообще не работает сбрасывается при перелистывании страниц. Браузер IE 9.
0
SJen SJen 8 лет назад #
на втором сайте я отключал аякс на выходные, проверял другие моменты. Но под IE как обычно может не работать, он очень привередливый. Я обычно сначала настраиваю под современные браузеры, а потом допиливаю под ослика.
+1
Raiden Raiden 6 лет назад #
Это когда-нибудь будет реализовано в видео компонента? Очень срочно нужно!
+1
Raiden Raiden 6 лет назад #
В виде*
0
Capitan Capitan 5 лет назад #
у когонить остался код?

Еще от автора

Обновление компонента "Мне нравится"
Приветствую. Закончил версию с исправлением ошибок и багов, всем пользователям обновление выслано на электронку.
Обновление компонента  "Каталог дополнений в админку"
Приветствую. Обновление самого популярного аддона из официального каталога дополнений.
Обновленный парсер Яндекс.Карт
Приветствую Изменения довольно значительны, поэтому имеет смысл оформить их отдельным постом.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.