Лента новостей

Кредит под залог недвижимости
Необходимость в займе финансовых средств может возникнуть как у частного лица, так и предприятия. Сегодня кредитование не является особенной проблемой и, например, получить кредит под залог недвижимости

Недвижимость
Наша великая Родина богата прекрасными населенными пунктами и городами с удивительной архитектурой и комфортными условиями жизни. Конечно, очень привлекательна в этом плане Новосибирск, который расположен

Недвижимость новая рига
Хотите почувствовать себя королями? Хотя нет, так наверное могут жить только боги недвижимость новая рига. Элитный поселок с замечательной архитектурой, открытым спа, бассейнами, фонтанами. Все находиться

Инвестиции в недвижимость Европы: тенденции 2017 года
Для инвесторов: обзор ключевых рынков европейской недвижимости в 2017 году. Недвижимость в Германии Доля недвижимости Германии в ВВП страны сегодня составляет 9,8%. Недвижимость в Германии отличалась

Дешевая Польская недвижимость
Если по какой-то причине мы решили продать квартиру, безусловно, мы хотим, чтобы это сделать как можно скорее и по лучшей цене. Тем не менее, для этого можно, мы должны быть готовы. Ничто не остановит

«Недвижимость» / Госкорпорации отказано в эффективности
По результатам проверки Счетной палатой деятельности Фонда содействия реформированию жилищно-коммунального хозяйства ( Фонд ЖКХ), площадь аварийного жилья в стране выросла на 1,6 млн. квадратных метров

Лизинг недвижимости
Обычно компании берут аванс - 10-20 % со ставкой удорожания 6-8 %, иногда 10-12% в год на срок от 2 до 10 лет, предлагая различные варианты графиков лизинговых платежей. занимаются примерно десяток компаний

Специалист по недвижимости
Наша компания стремиться дать широкие возможности, удобство в работе без лишних трат всем участникам рынка недвижимости Крыма. Аренда квартир, комнат, коттеджей, продажа в Санкт-Петербурге Гильдия риэлторов

Коммерческие помещения | Жилье, недвижимость > Коммерческие помещения | Киев | SLANET
class="top_line"> id="topnav"> class="subcolumns" id="logonav"> id="nav demo" class="hlist"> id="topnav"> id="header_tab"> id="content"> class="c75l"> class="c25r"> class="subcolumns"> class="c75l">

Юрист по недвижимости
При осуществлении такой юридически сложной и трудоемкой сделки, как покупка или продажа квартиры или участка земли, достаточно часто возникает необходимость обращения за специализированной юридической

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 и другие фрагменты информации, которые помогают вспомогательным технологиям и другим инструменты доступности.

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