Pull to refresh

Comments 91

8. Отсутствие возможности открыть ссылку в отдельном окне/вкладке.

Например, в интернет-магазине невозможность открыть одновременно два товара для сравнения/выбора в двух вкладках. За такое хочется убивать.
Точно, как я мог забыть.
Опубликуйте пожалуйста, как пример проблемы, если посчитаете важным:

Буду говорить о реальном сайте, который делали недавно и еще не совсем довели до конца.
Сайт делали с использованием ajax для загрузки контента. По сути, сайт был как проба этого решения и он не для обычного заказчика, а скорее для друзей.
Попробовали реализовать все, что Вы перечислили в статье, но столкнулись с неприятным фактом.
Что бы реализовать индексацию, открытие в новых окнах, нужно было нормальную сделать смену адреса.
И загвоздка в том, что сайт хоть и работает в IE9 и IE8 вроде, но эти браузеры добавляют решетку после домена, что приводит к множеству проблем.
Мы хоть и частично их обошли, но это ярко выраженный костыль, который порождает другие проблемы, на пример для естественного продвижения сайта.
Потому пришли к решению, что в продакшен, сайт на чистом ajax, кроме визиток, делать еще не совсем корректно.
Сам сайт: www.barberq.ru

P.S. Просьба не судит строго.
А Вконтакте как-то и не знает об этих ваших недостатках ajax сайтов;)
Вообще, у них такая же ситуация, тоже добавляется # в браузере IE.
В старых ie. И это никак не мешает индексации и передаче ссылок между пользователями, кнопкам назад-вперед и всему остальному.
IE 9 еще не так стар, как кажется.
Ссылка vk.com/#/im от ссылки vk.com/im отличается и для поисковика является разной ссылкой.
На сколько я знаю, IE9 подмену url поддерживает, проблема актуальна только для ie8 и меньше. В прочем, я не могу сейчас проверить. Если есть на машине 9я версия, можно зайти на вконтакте и проверить.

Во-вторых, поисковики о хеш ссылках знают: developers.google.com/webmasters/ajax-crawling/docs/specification (ниже в комментариях об этом писали). Достаточно сделать 301 редирект на правильный url и вес ссылки передасться.
На пример у меня, в IE9, в вконтакте нет подмены.
Все ли поисковики знают?
А редирект дает бессмысленное дублирование структуры при индексации, что я и называю костылем!
Если Вы будете статистику собирать по сайту, то придется учитывать этот костыль.
Вы сайт для пользователей делаете или для поисковиков? Редирект делается следствами nginx и какого дублирования тут нет. Поисковики, думаю, не все. Но потерять пару процентов поискового трафика это нормальная цена за повышенное удобство для пользователей. И преимущества достаточно существенные. Пользователи отблагодарят и будут заходить на сайт чаще, многократно компенсируя потерю несколько процентов ссылочной массы для экзотических поисковиков.
Все зависит от проекта, на пример для вконтакте, я думаю индексация отнюдь не самое важное, а для сайта, который собираются продвигать, это проблема.
IE9 и все что осталось за ним, пока не пара процентов, хотя конечно ждем, потому и написал, что «еще не совсем корректно».
Тогда на пример надо будет в nginx или apache добавить переброс HTTP_REFERER для коррекции статистики, только я вот не уверен что это можно на любом виртуальном хостинге, это не проверил.
Это не проблема, если вы собираетесь жертвовать поисковиками, которые застыли в своем развитии в начале двухтысячных и которым пользуется 0.001 процент пользователей. Да и то, жертва условная, там не такая уж и серьезная потеря ссылок идет. О ужас, один из 10000 пользователей не попадет на сайт.

Что там про проброс HTTP_REFFERER не понял. при редиректе он нормально передается браузером без дополнительных действий.

Даже для сайтов, которые получают 90% трафика с поиска, hijax совсем не проблема и оказывает влияние сильно меньшее статистической погрешности (при правильной настройке).
Вы можете дать ссылку на ajax сайт, у которого основной трафик с поиска и его посещаемость более 2000 — 5000 тысяч ip в сутки?

Про HTTP_REFFERER, я имел ввиду, если пользователь нажал на ссылку вида www.example.com/#/primer то он попадет или на дублирующую страницу или исходя из предложенного варианта Вами, сервер перебросит его на страницу без решетки, вот при этом редиректе, надо перебросить HTTP_REFFERER корректно.

Если эти настройки можно произвести, хостинг провайдер дает на это право.
Нет, увы для сайта с 2-5К в сутки hijax это сильно сложно и дорого, как правило там стоит какая-то бесплатная cms или типа того. Даже сайтов с на порядок более выской посещаемостью я не назову кого-то с hijax. Как правило, использование этой технологии начинается на сайтах с 200к+, исключения редкие (в основном случаются когда сайт просто еще не успел набрать эти 200К, но дело к тому идет).

Далее, сайтам, которым главное нагнать побольше трафика с поиска или рекламы, по сути никакой hijax и не нужен, он добавляет удобство постоянным и активным пользователям сайта. И даже если у такого сайта будет много поискового трафика, все равно основным будет трафик прямой (иначе в hijax нет смысла).

Ну и 3, редирект для считалки это обычно часть фреймворка по работе с hijax, и это очень-очень маленькая часть кода в нем. Ничего такого и поисковики это никак не затрагивает.
Увы, я с Вами не соглашусь, это не дорого и это не причина.

Я говорю про естественные ссылки.

Для универсального инструмента, — это костыль, который учитывает эту специфику, которую в дальнейшем надо будет выбросить. И Вы говорили про настройку nginx сперва, а это значит, что до фрэймворка, дело не дойдет.
Ох, ладно, не хочу с вами спорить. Сейчас готовлю проект на full hijax, который будет получать seo траффик и конвертировать его в постоянных посетителей. Если все будет ок, возможно я напишу об этом статью.
И еще, не помню точно, где читал, но было что-то вроде:
Что при верстке сайта, решили выкинуть IE6, но при тестировании, оказалось, что те, кто сидят за этим браузером или имеют возможность купить или именно им нужен этот продукт, который они хотели продавать, потому эти пару процентов, могут оказаться далеко не парой.
Похоже на басню, если речь о 2012 годе или позже.
Как 15% или любое другое число связано с тем, что написано выше (что пользователи IE6 оказались какими-то уникальными покупателями)?
Тестированием связано, суть того что я написал в том, что уверенным быть мало, надо проверять и проверки на реальных ситуациях, могут показывать вовсе иное. Как пример, пользователи IE, это могут быть пользователи, которые или обязаны пользоваться им из-за условий, в которых они или они не способны из-за неопытности и очень окажется, что продукт, заточенный под такой тип людей, будет лучше показывать для IE, а не для продвинутых пользователей, способных поставить, что ни будь посовременней.
Очень бесит в этом плане ASP (или как он там C# .Net Framework), когда на любую страницу переходишь с помощью POST запроса, а не GET.
Может можно сделать и по другому, но наше приложение, написанное уволенной бездарностью, именно так и работает. Нам уже не терпится закончить переписывать все внутренние части и переписать интерфейс.
Это ASP.NET Forms — этому не было альтернативы определённое время. Сейчас в ASP.NETсайты тоже реализуются через MVC.

Довольно неудобная штука согласен.
До сих пор есть легаси проекты, в которых используется ASP.NET пусть и 4ой версии, но все равно старый по сути, как гумно мамонта. И от этого не деться никуда. И все эти постбэки да вынужденный лапша-код просто вымораживают. Но это право заказчика ответить отказом на рекомендации сменить фреймворк.
ASP.NET MVC4 уже намного лучше, особливо с JS фреймворками типа AngularJS.
Непонятно зачем смартфоны вообще перезагружают табы, которые использовались недавно. Заставлять городить localstorage на каждом сайте из-за комментариев — куда более глупо, чем временно дампить страницы на телефон.
По моему проблема напрямую связана с «2. Сброс состояния при закрытии». Или может я не правильно вас понял?
Листаю ленту Хабра и по мере открываю заинтересовавшие меня посты в новых вкладках с помощью кнопки на мышке — так я делал всегда, вплоть до сегодня.

Сегодня зашел, а посты уже так не открываются. Приходиться жать правой кнопкой, копировать ссылку, открывать вкладку, впихивать ссылку и жать кнопку. «Очень удобно».
попробуйте отключить AdBlocker. у меня из-за него бывают такие лаги.
У некоторых есть функция сравнить товары, но, к сожалению, не все ее делают.
Хабр не запоминает состояние :(
Очень бесит, когда во время набора комментария на смартфоне переключаешься в другой таб, чтобы загуглить что-нибудь, или скопировать ссылку, затем возвращаешься в таб с комментарием, а страница полностью перезагружается, и многострочный комментарий потерян. Сохранить текст неотправленного комментария в localStorage и восстановить при загрузке страницы и открытии поля редактирования — 15 минут работы программиста…
Спасибо, 5 минут назад прочёл и вот уже закоммитил! :) Крутая фича :).
Дополню 5: сообщайте не только о идущем процессе, но и о его завершении.

Еще: если какая-то информация используется для построения нескольких блоков на странице, но надо обновлять их все. Один известный банк не сразу допер, что если пользователь нажал кнопку «Обновить остаток» в заголовке конкретного счета, то не мешает полученный остаток обновить и в списке счетов в левой колонке.
Лично меня очень не радует в Gmail отсутствие возможности открыть несколько писем в новых вкладках. Нужно открыть одно, потом вернуться к списку, открыть другое. В Яндексе и Вконтакте это качественно предусмотрено наряду с ajax-вариантом.
Можно открыть в новом окне, вверху справа кнопка. Согласен, немного не то, но тоже что-то.
Да, я тоже долго мучился с этим. В итоге переключился на упрощенную HTML-версию. Она уродливая, но гораздо более удобная.
Спасибо за совет!
P. S. Чтобы переключиться, мне пришлось зайти с отключенным JS, других вариантов не нашёл.
Вроде какое ко мне отношение имеет разработка сайтов на аяксе? Но как можно не плюсануть Гаечку? :)
Секс-идол детства-юношества? ;)
Не знание слов, не освобождает от тестостерона :D
Тогда уж: «Даешь каждому посту на хабре по картинке с Эйприл О'нил». Зачем это надо?
Странно, но в моем детстве-юношестве эта тётя прошла мимо…

Чего-то я от темы топика сильно с торону ухожу, не иначе влияние Гаечки :)
художник что-то с буферами переборщил
UFO just landed and posted this here
UFO just landed and posted this here
Гугл тоже не всегда удобен, их книга телефонных контактов была гораздо удобнее в первой версии
Плюсанул конечно, но рекомендовал бы автору пересмотреть тезисы с позиций (гуглится) кеширование и стек, REST в противопоставление RPC и разновидности MVC вне архитектуры «клиент-сервер» (backbone.js, например).

Из этого же материала можно сделать еще несколько суперинтересных выводов.
Обязательно найдется кто-нибудь, чтобы ляпнуть какой нибудь бред.
Статья не о технологиях разработки, а о том, как сделать так, чтобы ничего не понимающий в технологиях пользователь был доволен конечным приложением.
Вы считаете, что более внимательный учет особенностей применяемой технологии не повлияет на качество приложения?
подгрузка по мере скролла контента (или клика по „подгрузить еще”)

Особо „радует” данная фича, когда хочется быстро найти что-то нажимая Ctrl+F.
Содержимое поста не отвечает названию. В посте в основном хотелки с позиции юзера, а как это все реализовать описано слабовато. Пример — первый пункт.

Решением является бла-бла-бла болдом. Потом: это видно в гмэйл — вот страница такая-то, там вот еще одна. Где это? Тут трудно что ли написать фразу вида: функционал по работе с письмами сгрупирован по урлу такому-то, по которому грузится АДЖАКС ;) только про письма. А так получается: помедитируйте над гмейлом, там все круто. А потом бегите делайте как в яндекс.
Задача поста — это не хотелки юзера, это нормальные адекватные требования, с обоснованием и примерами. Хотелки — это сделать белый текст на белом фоне + «потому что я заказчик!!!».
А не сохранять текст в формах после сабмита, или говенная навигация по аякс-сайту — это кривые руки в команде. Либо разработчика, либо его лени убедить проджекта, что предлагается хрень, типа скроллинга в твиттер-стайле вместо пейджинга, тупо из-за моды.

Как реализовать, статей достаточно. Как мыслить правильно — статей мало. И мыслят адекватно далеко не все, судя по неудобным сайтам.
Задача поста — это не хотелки юзера, это нормальные адекватные требования

Во-первых, требования те — это как раз продукт анализа хотелок.
Во-вторых, адекватные требования — не есть задача поста. Задача поста донести свой взгляд на проблему.
В-третьих, я не спорю, что описанные в посте, кстати говоря базовые, принципы (напр., минимум кликов, переходов и визуальных элементов) адекватные.

Но тогда и пост следовало назвать как-то так: «Основные принципы кошерного AJAX сайта» или «Каким должен быть идеальный АДЖАКС-сайт» и т.п. Ну в крайнем случае «Как(им) надо делать удобный ...» И то не корректным будет.
ну сначала называлось «Почему 95% сайтов на ajax — отстой», и не очень шел рейтинг (50 на 50).

А сейчас вроде по смыслу, и людей устраивает.

Просто поспорить можно с любым заголовком. Ведь главное — чтобы пост был полезным. А если он вызывает баттхерт у кого-то, значит, 1% из испытавших когнитивный диссонанс задумается, и еще одним нормальным аякс-сайтом станет больше.

* задумчиво * И когда уже Гугл сделает Ctrl + Влево/Вправо?
Чтобы заставить задуматься разработчиков, нужно устроить хохлосрач по-делу. В споре рождается истина — хоть и спорное утверждение, но живучее.

и не очень шел рейтинг (50 на 50)

И к чему это? Для чего пост писали?! ЧСВ или мысль донести для?
Донести мысль.

Достало, честно говоря. И написано с поддевкой, чтобы обсуждение пошло.

А рейтинг — если топик уходит в минуса, его видит мало людей, и полезный задуманный эффект не производит.

И потом, мне нужен мануал для своих, как НЕ надо делать с аяксом. Хабр авторитетная площадка для этого, усиливает, так сказать, влияние ссылки «rtfm».
И потом, мне нужен мануал для своих, как НЕ надо делать с аяксом.

«Для своих» рейтинг вашего же поста не станет «козырным джокером». С таким же успехом можно потрудиться и написать диссер на кандидатскую. Для спора в купе поезда прокатит.

Донести мысль.
Достало, честно говоря. И написано с поддевкой, чтобы обсуждение пошло.

Надо было добавить «или все-таки мысль донести». Без издевки спрашивал. По мне так главная мотивация написания поста — сохранить/упорядочить мысли + проверить идею и подискутировать с сообществом. Нередко хорошие идеи подаются в камментах.
Еще при разработке аякс-сайта не забывайте об индексации: Если основной контент (тот который меняется при навигации по меню сайта), подгружается аяксом — поисковики скорее всего не будут этот контент индексировать.

Я использую такое решение: Каждый пункт меню изначально является ссылкой на реальную страничку, т.е. /about /home /settings /news/5 etc.

А при загрузке явоскрипта — клики по этим линкам перехватываются, и с сервера забирается только аякс-контент, а не вся страничка.

Тоесть аякс передает серверу особый параметр: "/news/5?ajax" например. И сервер знает, что нужно генерить не всю страничку, а только соотв. блок.

И все довольны: можно скопировать ссылку и отправить корешу; Роботы тоже пройдутся по ссылкам и получат полный контент страничек, а пользователи при клике на ссылки не будут обновлять всю страницу — они получат только нужный контент.
Такой приём используется в библиотеке PJAX.

Только они отслеживают не сферический GET-параметр ?ajax в вакууме, а HTTP-заголовки, к которым добавляется специальный заголовок (в их случае — HTTP-X-PJAX).
Есть еще много способов намекнуть серверу, что нужен аякс-контент. Главное — суть :)
Поисковики понимают формат
example.com/#!/some_page
И пытаются найти контент по ссылке
example.com/some_page
UFO just landed and posted this here
Во-вторых, распространные шоткаты, такие как Ctrl+влево/вправо для перехода страниц


Это же распространные шоткаты для перехода по словам в полях ввода! И частенько можно натыкаться на плохую реализацию, когда в наборе текста вместо перехода по словам происходит переход на другую страницу.
Причем тут вообще ajax? Описаны какие-то батхерты на нарушение бестпрактик программирования веб-приложений. Еще какие-то ajax сайты придумали. Что за зверь такой…

>>>Эх, было время в 2000х, когда это называлось не аяксом, а DHTML

Это вообще что за бред? Ajax это парадигма общения между сервером и клиентом. А никак не общее название технологий для создания динамических веб-страниц, и название это и сейчас остается актуальным, изменились лишь технологии.
>> За такое хочется убивать.
сначала пытать, а потом убивать
А там нет альтернативы? Или это вопрос к рассмотренному примеру?

Если про пейджинг, у вконтакте есть пейджинг + скролл при просмотре сообщений в теме в группе.
Сложно, но гибрид получился занятный.

Если про кнопку «добавить еще» — уберите ее, делайте скролл-загрузку на автомате. Не заставляйте злиться своих пользователей.

Если же вообще, то пункт гласит — применяйте к месту эффекты и фишки, а не просто «потому что захотелось» или из-за моды и тд
По моему, это очевидные аспекты при разработки качественного приложения. И все до единой проблемы решаемы, точнее это и не проблемы вовсе.

Меня волнует больше то, что у Ajax есть скрытые возможности, но с 2007 года и до сих пор, этого мало кто заметил. Тысячи, да что там десятки тысяч программистов, если не сотни, и сплошь слепцы. Я начинаю сомневаться в подлинности этого мира и существовании всех этих людей…
UFO just landed and posted this here
Какие?

[joking]ХА! Так он прямо и выложил вам на блюдечке идею на миллион долларов зимбабве.[/шуткуя]
UFO just landed and posted this here
Тебе просто досадно от того, что у тебя не хватает мозгов эту возможность увидеть и грамотно применить, поэтому ты переходишь сразу к оскорблениям. Ничего космического)
UFO just landed and posted this here
Очень информативное сообщение, спасибо что зашли)
UFO just landed and posted this here
Спасибо, поржал!!!
Разрядили обстановку AJAX-баталий)))
1. Кнопки «Назад»/«Вперед» — вообще отдельная и занимательная тема. (включающая HTML5 History манипуляции: статья на хабре)

2. Обычно путают понятие «контейнер» и «переменные состояния контейнера», полученное от сервера после AJAX-запроса. И когда эти понятия смешиваются — наступает хаос: не работает так как нужно в определенный момент GUI, происходит произвольное наложение/замена данных в JS-скрипте, затирание переменных и т.д.

Всегда должно быть четкое разделение: внешний контейнер (HTML-страница), внутренние (DIV через AJAX и т.д.) и данные ({«item»:«value»}) и весь механизм отслеживания состояния должен динамически менять ссылку на страницу, чтобы можно было перейти в это состояние, просто открыв ссылку на другом компьютере (передав ссылку любым способом).

Все это должно быть изначально иерархически продумано для каждого типа страниц, с динамической подгрузкой контента посредством AJAX-запросов в зависимости от действий пользователя через GUI.

Также, нужно не забывать сообщать пользователю «строку состояния AJAX» в GUI: ошибки, таймауты, иконку загрузки, и т.д.

Придерживаясь этих простых правил достаточно просто сделать НОРМАЛЬНУЮ и УДОБНУЮ страницу для пользователя.
Вот это точно скользкая тема. Сколько раз натыкался, что кнопка назад на сайте ведет в родительский раздел, но не туда, откуда я пришел. И уж сколько слюней выбрызнуто в споре о том куда должна вести эта кнопка.

По мне так кнопки вперед/назад должны работать точно также, как в браузере (при этом бравда смысл в них теряется). А для переходов по иерархии разделов Bread Crumbs юзать.
:))))
Как вариант, но доставка только необходимых данных без перезагрузки всей страницы — это скорость и экономия трафика!
Фактически html — это GUI серверного приложения, а AJAX-запросы на сервер — это серверные методы, повешенные на клиентское GUI.
Поэтому нет смысла перегружать целиком приложение, чтобы переключить вкладку или отобразить нужные данные с сервера в данной HTML-разметке страницы.
AJAX — технология.
AJAX-сайт — это или HTML-wrapper или не AJAX-сайт.
Иначе, получается, что фреймы — тоже AJAX-сайт…

Логика работы AJAX — везде одинаковая.

Вопрос в манипулировании данным инструментом с неструктурным подходом к реализации и кривыми прямыми руками…
Я так понял имелась в виду ситуация как с flash/silverlight сайтами. Все хорошо в меру.
Ох не там вы проблему ищете!
Ajax тут при чём?
Неудобный сайт можно сделать и на чистом html.
Реальное зло — это веб-студии с конвейером.
Ведь как бывает: приходит заказчик со словами «а я вот видел во вконтактике…». И менеджер соглашается, не спросив разработчика. А потом сроки, тестирование на глазок да по каким-то непонятным сценариям.
Или заказчик приходит и говорит «я продаю десятисантиметровые гвозди, мне нужен сайт», а менеджер чувствует готовность заказчика заплатить, и давай навешивать совершенно ненужные визуальные эффекты. Или не менеджер, а творческий руководитель: «а чего это у нас в портфолио ещё нет сайта с невероятно оригинальным и уникальным эффектом параллакса с подгрузкой гвоздей при скролле и аяксовой отправкой формы заказа?».
Или даже самому разработчику захотелось реализовать какой-нибудь модный эффект без единой мысли о том, нужен ли он тут, а над душой стоит менеджер с какими-то глупостями вроде сроков.
Выглядит похоже на макет? Или даже пиксель в пиксель? Какие претензии? Форма заказа отправляется? На почту приходит? Что ещё надо? Ах, хэш-навигация? Ах, ссылки чтобы открывались в новых вкладках, если их с коммандом нажимать? Ах, индикаторы прогресса? А в ТЗ такое было? Нет!? Свободен! В рамках техподдержки за стотыщмиллионов рублей. Или по допсоглашению. А у нас бизнес тут, а не какие-то игры. А не то, если каждый сайт хорошо будем делать, то разоримся на втором или третьем.
Тут речь больше про методы с применением AJAX-а, нежели чем про скорость кодирования…
Все это понятно, что можно и прошивку в телефон с неоптимизированным GUI засунуть…
Про «весы» Вы верно заметили: «не нужно городить там где не нужно!»
Однако, пользователи привыкли сравнивать визуально при входе на сайт.
А что они могут сравнить?
Достаточно много: дизайн, удобство, кол-во рекламы, скорость загрузки страниц, скорость работы интерфейса, и (все чаще, как раз) «параллаксовые гвозди».
И чем больше видят они этих новых технологий на сайте (скажу кратко: HTML5 во всей красе + JS анимация), тем больше у них возникает интерес к нему вернуться.
Т.е. это своего рода авто-реклама: «сарафанное» радио.
Поэтому, если что-то и городить, то только на титульной: «цепануть необычным» и удержать внимание посетителя.
На внутренних страницах — уже по мере необходимости.
Sign up to leave a comment.

Articles