Пять причин использовать jQuery Mobile

От автора: по мере распространения сенсорных экранов на телефонах, «таблетках» и лэптопах, мы столкнулись со срочной необходимостью построения вебсайтов с поддержкой сенсорного ввода. Кроме того, владельцам вебсайтов нужно обеспечить просмотр своего контента в постоянно увеличивающемся количестве различных устройств. Вот где на сцене появляется jQuery Mobile. Каркас jQuery Mobile способен улучшать вебсайты, добавляя формы с поддержкой сенсорного ввода, более эффективную загрузку страниц и расширенную поддержку устройствам, используя принцип прогрессивного улучшения.

Долгое время я был ярым защитником jQuery, но сразу же не был уверен в том, что нужен именно подход jQuery Mobile. Я решил узнать о нем больше, поговорив с создателями jQuery Mobile Скоттом Джелом (Scott Jehl) и Тоддом Паркером (Todd Parker) из Filament Group. Я спросил их, почему jQuery Mobile ведет себя именно так, а не иначе, и в качестве результата извлек пять основных вещей, которые проделывает jQuery Mobile, чтобы помочь нам строить сенсорные вебсайты, работающие в широком диапазоне браузеров и устройств:

Давайте рассмотрим внимательнее каждую из этих пяти причин:

1. Широкое покрытие браузеров и устройств

«Не разрушайте Сеть» — мантра jQuery Mobile. Web торжественно обещал, что кто угодно, где угодно в мире сможет получить доступ к контенту, введя URL или щелкнув по ссылке.

jQuery Mobile – единственный значительный фреймворк пользовательского интерфейса, который непосредственно гарантирует, что любой человек может получить доступ к содержимому через URL или ссылку. jQuery Mobile охватывает концепции сети и работает вместе с ней, а не против нее. Он выбирает прогрессивное улучшение там, где оно доставляет основной HTML к тем устройствам, которые не могут управляться с CSS и Ajax’ом, а затем улучшает те устройства, которые их поддерживают.

2. Input-ы и виджеты UI с поддержкой сенсорного ввода

Если вы пытались попасть по чекбоксу в форме с плохой поддержкой сенсорного ввода, то знаете, как неудобно увеличивать или уменьшать ее, чтобы наконец добраться до плохо созданных элементов формы. Вам нужно гарантировать хорошую работу ваших элементов формы и виджетов пользовательского интерфейса с сенсорами. Сенсорные экраны сейчас в лэптопах и десктопах, поэтому делать вебсайты, не предназначенные выдерживать атаки выходящих на рынок новых сенсорных устройств, совершенно непростительно. jQuery Mobile предназначен в первую очередь для сенсоров (но при этом отлично работает с мышью), так что у вас получатся великолепные крупные мишени для касания пальцами, элементы формы и виджеты пользовательского интерфейса.

jQuery Mobile автоматически улучшает ваши формы, чтобы те хорошо взаимодействовали с сенсорным вводом. Чекбоксы обернуты в очень большие метки и создают хорошую область касания, поэтому дотронуться до нужного чекбокса легко. Текстовые области проблематичны в мобильных устройствах, стоит лишь вам промахнуться мимо предназначенного текстового пространства (у вас двупальцевая прокрутка для просмотра контента в прокручиваемой текстовой области), поэтому jQuery Mobile автоматически увеличивает текстовые области, чтобы пользователь мог в любое время и легко увидеть введенное содержимое.

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

У jQuery Mobile также есть виджеты, такие как постоянные панели инструментов, кнопки, диалоги и – мой личный любимчик – новый выскакивающий виджет, который дает вам возможность отобразить во всплывающем окне любой вид контента оттуда, где вы его запускаете. Это подходит для отображения внутристраничных форм, диалогов, фотографий, карт и видео и.т.д. С каждой новой версией jQuery Mobile добавляются новые виджеты, все они поддерживают сенсорный ввод и работают в мириадах устройств и браузеров.

3. Готовый адаптивный веб-дизайн

Всегда можно было разрабатывать адаптивные вебсайты вдобавок к jQuery Mobile, потому что это рамка mobile-first … а НЕ mobile only. И в версии 1.3 jQuery mobile еще больше внимания уделяется свойствам адаптивного веб-дизайна.

Новый виджет-панель

Знаете такие меню, которые выскальзывают сбоку? Популяризованный мобильным приложением Facebook’а*, этот шаблон пользовательского интерфейса очень хорошо знаком большинству пользователей мобильных устройств. Посмотрите панели в действии.

Адаптивные таблицы

Таблицы на более узких экранах могут переключаться к сложенному в «стопку» типу отображения метки/даты. jQuery Mobile вызывает повторную заливку такой таблицы.

Адаптивная сетка

Сетка jQuery Mobile состоит из блоков простой сетки, которые можно сложить один на другой при просмотре с маленького экрана.

4. Браузерный движок и шаблоны тем

jQuery Mobile смотрит на ваши атрибуты data-* в HTML и улучшает их поведение и стили. Например, при применении к неупорядоченным спискам data-role=”listview”, классы CSS автоматически внедряются в ваши списки так, что те выглядят подвижными. А если внутри элементов списка есть ссылка, он добавит стрелку-указатель, чтобы показать, что можно сделать переход к новой странице, дотронувшись до этого конкретного элемента.

Атрибуты data-* дают вам базовое форматирование и структуру, но в jQuery Mobile все опционально, а классы CSS расширяемы, так что темой по умолчанию вы не ограничены.

Первое, что нужно сделать для модифицирования приложения под собственные запросы – начать с jQuery Mobile Themeroller. Создать собственную расцветку темы так просто, взяв и перетащив цвета из цветовой палитры прямо в тот элемент, которому вы назначаете стили. У Themeroller’а имеется интегрированный инструмент Adobe Kuler, в котором можно выбирать самые рейтинговые цветовые схемы.

В предыдущем примере я встроил тему ‘A’ и ‘B’. К jQuery Mobile прилагается возможность рекурсивно применять к элементам свои темы с помощью атрибута data-theme . Если бы мне нужно было по умолчанию использовать на странице тему ‘A’, а в форме – тему ‘B’, я просто применил бы data-theme=”b” к элементам формы, и все элементы внутри формы автоматически приняли бы стили темы ‘B’.

5. Модель страничной навигации Ajax

Вместо полной перезагрузки страницы jQuery Mobile ищет ссылки, связанные с доменом, на котором вы находитесь, и извлекает новый контент страницы с помощью Ajax’а. Когда пользователь щелкает ссылку, содержимое новой страницы загружается в новый div, а затем переходит в текущую область просмотра.

Скажем, вы находитесь на index.html, а затем щелкаете ссылку на page.html, и у ссылки на page.html следующая разметка:

Обратите внимание: Здесь не требуется атрибут data-transition, это – просто демоверсия смены анимации перехода страницы к скольжению вместо постепенного угасания перехода по умолчанию. В jQuery mobile встроено множество других переходов страницы от простого угасания к более сложному перетеканию.

Если используемый вами браузер поддерживает HTML5 pushstate, URL-адрес в окне вашего браузера будет обновлен до yourdomain.com/page.html, как только новая страница закончит выскальзывать. Кроме того, во время загрузки новой страницы демонстрируется вращающийся индикатор загрузки, чтобы дать понять пользователю, что ссылка была удачно нажата.
Основное преимущества этого способа загрузки страниц состоит в том, что вам не нужно заново инициализировать все запросы JavaScript и CSS при загрузке второй страницы. Даже если эти объекты загружаются из кэша, в мобильных устройствах экономится время их исполнения.

В случае загрузки первой страницы с помощью jQuery Mobile все ваши скрипты и стили уже инициализированы в вашем устройстве, поэтому не нужно заново проделывать эту работу при загрузке новой страницы. Единственное, что нужно для ее визуализации – новый фрагмент HTML. Применяя этот метод загрузки страницы, вы добьетесь более быстрых последующих страничных запросов, критичных для отличного впечатления мобильных пользователей от вашего сайта.

Прочесть подробнее о модели постраничной навигации jQuery Mobile можно здесь.

Подсказка: загружайте новые страницы сразу же (без индикатора загрузки)

Есть пара способов загрузки новых страниц еще быстрее … мгновенно. Первый способ – если вы знаете, что пользователь, скорее всего, посетит следующей определенную страницу, то можно добавить в ссылки атрибут данных prefetch, чтобы jQuery Mobile загружал их после загрузки текущей страницы.

Так новая страница тихонько загрузится в фоне после загрузки окна.

Другой метод – изменить структуру страницы и вставить страницы в текущую страницу. Однако будьте с ним осторожнее, потому что таким образом увеличится исходная загрузка и не будет прямого доступа через URL. Но с помощью создания отдельных div’ов с уникальными id и страницей с ролевым именем данных (мультистраничная структура) ваши новые страницы будут загружаться мгновенно, как только вы щелкнете на ссылку. Только убедитесь, что эти страницы находятся на том же уровне DOM, что и ваша главная страница.

Затем сделайте ссылку на вставленную страницу с помощью знака «решетки» и ее id в своей текущей странице.

Так загрузится содержимое страницы внутри div’а с id newpage.
При помощи этих двух методов весь контент страницы будет доступен сразу же и не потребуется показывать индикатор загрузки.

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

Доставим по Сети все

jQuery Mobile – пример Сети, оправдывающей свое обещание сделать так, чтобы все могли получить одинаковый доступ к бесплатному и публичному контенту, выложенному в Сети, вне зависимости от того, какими устройствами пользуются. Он предназначен не только для мобильных устройств, это модель ‘mobile-first’, НЕ ‘mobile-only’, поэтому может применяться в качестве основы адаптивного веб-дизайна. Все эти великолепные сенсорные input-ы форм и виджеты могут полностью меняться на основе темы и отлично работают вне зависимости от устройства (мобильное или десктоп).

Для получения информации и уточнения каждого из перечисленных пунктов, смотрите мою беседу на YouTube’е под названием ‘jQuery Mobile, доставим по Сети ВСЕ (jQuery Mobile, Web Delivery for ALL’).

Автор: Marc Grabanski

Источник: //www.netmagazine.com/

Редакция: Команда webformyself.

* Признана экстремистской организацией и запрещена в Российской Федерации.

Комментарии Вконтакте: