SEO и доступность с HTML5 PushState, часть 2: постепенное улучшение с помощью Backbone.js

  1. Прогрессивное улучшение и PushState
  2. Тривиальный пример: скажи мое имя!
  3. Менее тривиальный пример: список пользователей
  4. HTML-шаблоны на стороне сервера и на стороне клиента
  5. Backbone.js и HTML5 PushState
  6. Результат: SEO и доступность

В моем предыдущем посте я представил идею PushState в HTML5. - способ управления URL-адресом браузера без совершения поездки в оба конца на сервер для получения информации по этому URL-адресу. В этом посте я рассмотрю эту информацию и покажу несколько примеров того, как мы можем реализовать PushState с нашими приложениями Backbone.js, обеспечивая поддержку как поисковой оптимизации (SEO), так и лишь немного больше работы, доступности для доступа. с помощью программ чтения с экрана и других вспомогательных технологий.

Прогрессивное улучшение и PushState

PushState позволяет нам лучше реализовывать поисковую оптимизацию (SEO) и доступность на наших сайтах, давая нам точку входа в прогрессивное улучшение наших страниц. Мы можем заставить наши серверы отображать HTML, как если бы мы работали с сайтом, который не имеет расширенной функциональности JavaScript. Затем, когда браузер получит разметку, CSS и JavaScript, мы сможем улучшить взаимодействие с пользователем, предоставив на странице больше функциональных возможностей, чем позволяет только HTML.

Тривиальный пример: скажи мое имя!

Прежде чем мы перейдем к включению PushState с нашим кодом Backbone.js, давайте рассмотрим тривиальный пример прогрессивного улучшения.

Начните с того, что веб-сервер создаст очень простую HTML-форму с одним текстовым полем и кнопкой:

После того, как сервер отобразит это и доставит его в браузер, JavaScript для страницы (в данном случае представление Backbone.js) подберет его и запустит вместе с ним:

Когда я создаю экземпляр представления после загрузки страницы, я предоставляю существующее содержимое формы, которое было отображено сервером, экземпляру представления как «el» представления. Я не вызываю рендеринг и не создаю представление для меня при загрузке первого представления. У меня есть метод рендеринга, доступный после того, как представление запущено и все страницы полностью на javascript. Это позволяет мне повторно визуализировать вид позже, если мне нужно. (Хотя, честно говоря, этот пример не нуждается в методе рендеринга, и его легко можно было бы опустить).

Нажатие кнопки «Скажи мое имя» с включенным JavaScript вызовет окно с предупреждением.

Без javascript он отправлял обратно на сервер, и сервер мог где-то отобразить имя в элемент html.

Менее тривиальный пример: список пользователей

Теперь скажите, что у нас есть список пользователей в теге ul. Этот список отображается сервером, когда браузер делает запрос, и результат выглядит примерно так:

Теперь нам нужно перебрать этот список и прикрепить базовый вид и модель к каждому из элементов `<li>`. Используя атрибут `data-id`, мы можем легко найти модель, из которой создается каждый тег. Затем нам понадобится представление коллекции и представление элемента, которое достаточно умно, чтобы прикрепить к этому HTML.

В этом примере UserListView будет перебирать все теги <li> и прикреплять объект представления с правильной моделью для каждого. Он также устанавливает обработчик события для события `change: name` модели и обновляет отображаемый текст элемента, когда происходит изменение.

Затем, после того как мы все инициализируем и прикрепим к HTML, мы берем первый элемент в коллекции и меняем имя. Затем список обновляется с помощью привязки события:

Затем список обновляется с помощью привязки события:

С этим шаблоном реализации должно быть довольно легко увидеть, как мы можем постепенно улучшить наш сгенерированный сервером HTML с помощью JavaScript-фреймворков, таких как Backbone.js. Тем не менее, есть еще одна проблема, которую нужно затронуть - что произойдет, когда нам потребуется отрендерить один и тот же HTML-код со стороны сервера, а также со стороны клиента?

Мы не хотим дублировать шаблоны HTML, которые использует наш сервер, в нашем внешнем коде HTML и JavaScript. Это стало бы кошмаром для поддержания. К счастью, в наши дни у нас есть очень сложные и гибкие системы шаблонов как в наших серверных, так и в клиентских средах.

HTML-шаблоны на стороне сервера и на стороне клиента

Оглядываясь назад на несколько моих предыдущих постов, мы видим начало того, что нам нужно сделать, чтобы справиться с этой ситуацией. В моем посте Рендеринг Rails частично как шаблон JQuery Я рассмотрел вопрос повторного использования шаблона ERB из приложения Rails в интерфейсном JavaScript с шаблонами jQuery. В этом посте я покажу, как использовать модель Rails и заполнить ее данными, похожими на маркеры jQuery Template:

В этом примере вы можете видеть, что я заполняю атрибут `value` модели данными« $ {value} ». Когда он будет преобразован в HTML через шаблон ERB, он создаст HTML, который можно использовать с шаблонами jQuery.

В дополнение к этой технике двойного рендеринга вы можете захотеть обеспечить некоторое функциональное или модульное тестирование кода приложения Backbone.js. Чтобы справиться с этим с помощью Jasmine-BDD и снова использовать существующие шаблоны в светильниках Jasmine, вы можете объединить двойной рендеринг шаблонов с моим постом на тест-драйв Backbone представлений с помощью шаблонов jQuery ,

Backbone.js и HTML5 PushState

Имея все это в наличии - серверный рендеринг HTML и прогрессивное улучшение для поддержки клиентского JavaScript - мы можем настроить наше приложение Backbone на использование PushState. Для этого нам нужно только включить PushState через функцию `Backbone.history.start`:

Конечно, для использования «истории» Backbone требуется маршрутизатор с хотя бы одним маршрутом. Хотя в этом посте я не показал, как использовать маршрутизатор, в Интернете есть множество примеров использования маршрутизаторов, включая мои собственные сообщения в блоге на backbone.js а также мой учебный курс , Однако после установки маршрутизатора и запуска истории Backbone в браузере его URL-адрес будет обновлен полными URL-адресами вместо фрагментов хэша URL-адреса.

Если мы все настроили правильно, пользователь сможет получить доступ к корню нашего приложения, и Backbone подберет и запустит приложение оттуда. Затем, когда пользователь прошел через приложение и соответствующим образом обновил URL-адрес браузера, он может либо добавить URL-адрес в закладки, скопировать и вставить его, либо просто нажать кнопку обновления в своем браузере. Это приведет к тому, что браузер отправит запрос обратно на сервер для страницы, которую браузер ранее просматривал. После того, как страница отрисована сервером и отправлена ​​в браузер, наш JavaScript включит и расширит функциональность страницы, предоставляя полный доступ к странице для тех браузеров, которые могут ее поддерживать.

Результат: SEO и доступность

Благодаря тому, что серверный HTML-код отображается для нас и доставляется через стандартные URL-адреса, наше приложение намного удобнее, когда речь идет об оптимизации поисковых систем. Мы в большей степени находимся на пути создания доступности в нашем приложении. Сложная часть этого заключается в том, чтобы заставить сервер отображать HTML, который мы хотим, при этом все еще имея браузеры с поддержкой JavaScript, чтобы он хорошо работал. Мы знаем, что решили эту проблему просто с помощью поддержки PushState. Теперь мы можем перейти к остальной части пути доступности, включив необходимые HTML-теги и атрибуты, такие как атрибут «alt» для изображений, атрибут «aria-live» в HTML5 и другие фрагменты информации, которые помогают вспомогательным технологиям и другим инструменты доступности.

Похожие

SEO
... их продуктов недостаточно. Актуальность стала ключом для каждой сферы бизнеса и каждой презентации контента. Уже недостаточно просто рекламировать свои предложения чисто. Релевантность ключевого слова теперь влияет на каждую отрасль, каждую форму представления
SEO SEO SEO
... на профессионала разработана * из WordPress, которая является легко управляемой системой управления контентом"> это Естественный SEO SEO Pack Нацеленность на профессионала разработана * из WordPress, которая является легко управляемой системой управления контентом. Он включает в себя 10-страничный
Joomla SEO
SEO Joomla für Farbdesign Berlin Для SEO Joomla у вас должны быть тонкие чувства. Ибо Joomla иногда ведет себя как настоящая дива, по крайней мере, CMS иногда слишком сильно реагирует, когда что-то не совсем идет по плану, и в результате Google тоже. Farbdesign, опытная берлинская малярная компания, должна была сделать то же самое. Поисковым системам
SEO цены
... SEO цены - как это определить? Различные факторы влияют на ценообразование SEO, и Top One SEO разделил каждый отдельный аспект ценообразования на SEO на эксклюзивную трехуровневую диаграмму, приведенную ниже. Ценообразование Top One SEO основано на оптимизированных ключевых фразах и нескольких списках на первой странице результатов поиска. Помимо этих факторов, дополнительные услуги, предлагаемые нашей командой, от консультаций до построения ссылок, определяют SEO-цены.
Google / SEO
Модератор Мои знания SEO несколько устарели, но здесь: - количество «контента» довольно ограничено (достаточно взглянуть на источник страницы), кроме того, ваша страница начинается с подсказки JavaScript; Я не знаю, применимо ли еще это практическое правило, но я полагаю, что хорошей практикой является перемещение как можно большего количества встроенного JavaScript-кода в конец
Пробиз SEO -
... иске Google отображение оптимизированного фрагмента (рекомендуемого фрагмента) страницы вашего сайта представляет интерес для SEO, оно отображается вверху результатов с заголовком и кликабельной ссылкой на соответствующую страницу"> В поиске Google отображение оптимизированного фрагмента (рекомендуемого фрагмента) страницы вашего сайта представляет интерес для SEO, оно отображается вверху результатов с заголовком и кликабельной ссылкой на соответствующую страницу. В блоке отображается выдержка,
Феникс SEO
... на SEO-фирма с самым высоким рейтингом, вы попали в нужное место. Мы внедряем уникальные стратегии SEO высокого уровня, которые привлекают на ваш сайт квалифицированных клиентов. Имея более чем 20-летний опыт работы в поисковой оптимизации, мы знаем, что нужно для того, чтобы ваш бизнес попал в топ-результаты Google, Yahoo и Bing. У нас также есть команда экспертов по социальным сетям и плате за клик, чтобы удовлетворить ваши потребности в цифровом маркетинге. Вы можете рассчитывать
Как доступность помогает SEO
Попадание на первую страницу результатов Google является святым Граалем для SEO, но многие веб-дизайнеры и маркетологи не осознают, что оптимизация их сайта для доступности поможет достичь их цели. Поисковые системы играют
Офф-страница SEO
SEO Обучение
Мы постарались объяснить преимущества и преимущества работы SEO в каждой из наших статей. Компания и компании, у которых есть веб-сайт, безусловно, должны выполнять эту работу - это самая большая отдача от новых и эффективных клиентов. Это потому, что пользователи, которые ищут сайты, которые выше в поисковых системах, посещают больше. Если мы хотим купить продукт, пользователь хочет купить продукт в поисковых системах. Он посещает веб-сайты, представленные в результатах
Почему SEO
... ился и вырос в Бреде. Два месяца назад я обратился к SEO Online Marketing с вопросом, могу ли я приехать и устроиться на работу с идеей стать специалистом по профессии онлайн-маркетинга. После указания, что я прошел необходимые курсы, мы согласились, что это будет крутой вызов. Таким образом, мне была предоставлена ​​возможность получить опыт работы здесь в будущем в онлайн-маркетинге! Я начал здесь с раздела SEO или поисковой оптимизации. Причина, по которой я заинтересован в вышеупомянутой

Комментарии

Вы просто позволяете своему агентству SEO проходить через их стандартизированный контрольный список действий SEO и надеетесь на лучшее или есть лучший способ использовать свой бюджет?
Вы просто позволяете своему агентству SEO проходить через их стандартизированный контрольный список действий SEO и надеетесь на лучшее или есть лучший способ использовать свой бюджет? Что такое SEO кампания? Есть несколько разных парадигм для SEO. Одним из них является парадигма завершения. Это распространенный метод выполнения SEO: пробежка по контрольному списку. Это тот вид SEO, который вы найдете на крупных сайтах, тысячи и тысячи страниц которых перечислены в поисковых
Тем не менее, это сразу самая сложная часть SEO, потому что как вы заставляете людей размещать ссылку на ваш сайт?
Тем не менее, это сразу самая сложная часть SEO, потому что как вы заставляете людей размещать ссылку на ваш сайт? И как вы планируете эффективную и действенную стратегию построения ссылок на 2015 год? Даниэль Группен из Puurweb спросил 26 экспертов по SEO (включая меня) о своих лучших советах по созданию ссылок и дал им четкий обзор. Прочитайте его интересную статью. Прочитайте статью :
Короче говоря, часть SEO отрывки из видеороликов Google одно из видео, выпущенных месяц назад, было названо «Субдомен или подпапка, что лучше для SEO?
Тем не менее, это сразу самая сложная часть SEO, потому что как вы заставляете людей размещать ссылку на ваш сайт? И как вы планируете эффективную и действенную стратегию построения ссылок на 2015 год? Даниэль Группен из Puurweb спросил 26 экспертов по SEO (включая меня) о своих лучших советах по созданию ссылок и дал им четкий обзор. Прочитайте его интересную статью. Прочитайте статью :
Например, «недорогие и качественные статьи по SEO», «Написание статей по SEO в Вильнюсе», «Сколько стоит статья по SEO?
Например, «недорогие и качественные статьи по SEO», «Написание статей по SEO в Вильнюсе», «Сколько стоит статья по SEO?» Рекомендуемая сумма за страницу: 2% Какова текущая ситуация? Статьи SEO содержат 50% длинных ключевых фраз, 40% точных версий ключевых слов и 10% точных ключевых слов. К сожалению, полные ссылки и зрелые ссылки не имеют много. Это БЛОГИ. Мы должны научиться писать SEO тексты по-другому. Рецепт очень прост. Давайте возьмем статью по SEO на 400-500
Какие методы и факторы необходимо учитывать, чтобы оптимизировать мой сайт с помощью SEO?
Какие методы и факторы необходимо учитывать, чтобы оптимизировать мой сайт с помощью SEO? Первое, что мы должны знать, это то, что есть 2 разных фактора. Мы должны оптимизировать внутри нашего сайта (SEO на странице) и факторы за пределами нашего сайта (SEO OFF PAGE)
Хотите быстро проверить SEO своего сайта или следить за стратегией SEO конкурентов?
Хотите быстро проверить SEO своего сайта или следить за стратегией SEO конкурентов? Есть несколько плагинов, которые помогут вам в этой миссии. Кодировщик выбрал 5, чтобы узнать ниже! Нужен разработчик? Веб - мастер? Редактор? Внесите свой проект бесплатно на Codeur.com, получите около пятнадцати предложений и выберите идеального поставщика. Найти провайдера
Хотите узнать, как наша команда может помочь вашему бизнесу в Нэшвилле увеличить ваши лиды, продажи и доход с помощью SEO?
Хотите узнать, как наша команда может помочь вашему бизнесу в Нэшвилле увеличить ваши лиды, продажи и доход с помощью SEO? Позвоните нам. Мы хотели бы обсудить ваши цели. Работает ли SEO для бизнеса в Нэшвилле? Перейдите в Google и найдите несколько ключевых слов, имеющих отношение к вашей компании. Вы видите свой сайт несколько раз на первой странице результатов поиска? Если
Почему эта часть программного обеспечения SEO так хороша?
Почему эта часть программного обеспечения SEO так хороша? Ответ прост, Cora проверяет 540 различных факторов из 100 лучших результатов поиска по выбранному вами ключевому слову. Анализируя реальные данные для элементов как на странице, так и за ее пределами, можно увидеть, какие элементы коррелируют и, следовательно, являются факторами ранжирования. Кора предоставит вам дорожную карту и покажет, что вы были в дефиците. Отчет также даст вам знать, если вы слишком оптимизированы
Как консультант по SEO помогает вам улучшить SEO?
Как консультант по SEO помогает вам улучшить SEO? Теперь вы знаете немного больше о различных специальностях SEO-консультантов. Однако помните, что можно использовать одного из этих экспертов, чтобы воспользоваться глобальным решением для улучшения SEO вашего сайта . Точно, теперь мы сосредоточимся на различных шагах, которые будут предприняты, чтобы обеспечить вам лучшую видимость в Интернете. Вы обнаружите, что этот сложный процесс, тем не менее, необходим для достижения
Вы ищете эффективное руководство по SEO для привлечения трафика с помощью поиска Google?
Вы ищете эффективное руководство по SEO для привлечения трафика с помощью поиска Google? Ну, задача создания и реализации сильного SEO стратегия действительно может быть сложным. Однако с помощью методического руководства по поисковой оптимизации Google вы можете успешно построить структурированный план SEO. Чтобы упростить его для вас, мы представляем здесь всестороннее руководство для начинающих SEO, которое
Должен ли текст SEO содержать не менее 1000 слов?
Должен ли текст SEO содержать не менее 1000 слов? Может ли короткий пост, содержащий менее 300 слов, быть оцененным поисковой системой как тонкий контент? «Не для машины, для человека, которого вы должны написать». 1-е предложение Google для SEO Снова и снова такие вопросы появляются на форумах SEO или блоггеров. И снова и снова начинаются разговоры о том, что Гугель продиктован добавленной стоимостью и качественным контентом. «Не для машины, для человека, которого вы

Тем не менее, есть еще одна проблема, которую нужно затронуть - что произойдет, когда нам потребуется отрендерить один и тот же HTML-код со стороны сервера, а также со стороны клиента?
SEO цены - как это определить?
Вы просто позволяете своему агентству SEO проходить через их стандартизированный контрольный список действий SEO и надеетесь на лучшее или есть лучший способ использовать свой бюджет?
Что такое SEO кампания?
Тем не менее, это сразу самая сложная часть SEO, потому что как вы заставляете людей размещать ссылку на ваш сайт?
И как вы планируете эффективную и действенную стратегию построения ссылок на 2015 год?
Тем не менее, это сразу самая сложная часть SEO, потому что как вы заставляете людей размещать ссылку на ваш сайт?
И как вы планируете эффективную и действенную стратегию построения ссылок на 2015 год?
Например, «недорогие и качественные статьи по SEO», «Написание статей по SEO в Вильнюсе», «Сколько стоит статья по SEO?
» Рекомендуемая сумма за страницу: 2% Какова текущая ситуация?