Мобильные браузеры - использование сенсора

Рекомендуем прочитать:

Как сделать забор своими руками

Садовые дорожки своими руками

Альпинарий на садовом участке

Как сделать бассейн на даче своими руками

Программы для создания ландшафта

Исходная статья на английском языке:http://quirksmode.org/mobile/advisoryTouch.html

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

События могут быть разделены на три группы:

  • События касания, описывающие конкретные действия пользователя с экраном безотносительно к результату этих действий. Примеры: touchstart, touchmove, touchend (начало, движение, конец касания).
  • События интерфейса, описывающие результат касания. Примеры: click, resize, scroll, contextmenu (клик, масштабирование, прокрутка, контекстное меню).
  • Наследственные события, возникающие, потому что многие сайты зависят от их наличия. Примеры: mouseover, mousedown, mousemove, mouseup (позиция курсора мыши, нажатие, движение мыши, отпуск кнопки мыши).

 

События касания

Верно: iPhone, Android

Отсутствует: Opera, S60 WebKit, Palm, Samsung, Firefox, MicroB, IE, BlackBerry, and NetFront

Все мобильные браузеры ОБЯЗАНЫ поддерживать события касания. Нет никаких исключений. Любой браузер, который к концу 2010 года не будет поддерживать их, выбывает из гонки.

Нужны ли нам отдельные события касания? Да, насколько я понимаю. Касание – новый способ взаимодействия, и для него нужны новые события.

Браузеры должны активно заимствовать модель построения событий касания iPhone. Нет причин не делать этого: она хорошо продумана и уже поддерживается лидерами рынка – iPhone и Android. Информацию о том, как работает эта система, можно найти здесь.

Эти события необходимы для стандартных функций интерфейса, таких как перетаскивание. Для устройств с сенсорным экран вполне естественно перетащить элемент с одного места на другое, и интернет-приложение – не исключение.

Если операционная система поддерживает мультисенсорный экран, браузеры должны также поддерживать события gesturestart, gesturechange и gestureend.

 

События интерфейса

Браузеры должны поддерживать следующие события интерфейса. Я пока не рассматриваю событие масштабирования, так как мне надо его лучше исследовать.

 

Прокрутка

Верно: iPhone, Android, Opera Widget Manager, S60 WebKit, MicroB, BlackBerry

Неверно: Opera

 

Отсутствует: Palm, Samsung, Firefox, IE, NetFront

Браузеры ДОЛЖНЫ выдавать событие прокрутки, когда пользователь ее производит. Довольно-таки очевидно.

Браузеры обычно выдают это событие во время масштабирования, и это нормально. Во время масштабирования всегда происходит прокрутка, так как линейки прокрутки меняют размер. Это и вызывает событие прокрутки.

 

Приближение

Верно: нет

Отсутствует: все

Браузеры ДОЛЖНЫ выдавать событие приближения, когда пользователь его производит любым способом, при помощи двух пальцев, двойного клика, кнопок и еще не изобретенных способов.

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

В настоящий момент некоторые браузеры выдают событие масштабирования при приближении, но не все, и, кроме того, событие масштабирования может иметь другие назначения в мобильном устройстве. Мне следует провести дальнейшие исследования в этой области.

 

Клик

Хорошо: iPhone, Android, Palm, Maemo

Нормально: S60, Windows Mobile, BlackBerry

Плохо: Samsung Linux (H1)

Когда пользователь быстро касается ссылки или другого активного элемента, возникает событие клика. Это относится ко всем браузерам. Проблема – в правильном применении клика.

 

Определение: Событие клика происходит, если действия touchstart и touchend (начало и конец касания) происходят примерно в одном месте.

Вся проблема в этом “примерно”.

Границы, которые браузер устанавливает для движения пальца во время действия touchclick – основное мерило его пригодности к использовании с сенсорным экраном. Пользователи должны иметь небольшую свободу для ошибки, иначе интерфейс просто не будет работать.

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

 

Наследственные события

Полная поддержка: Android, Opera, MicroB, IE

Почти полная поддержка: iPhone, S60 WebKit

Нет mouseover: NetFront, BlackBerry

Нет mousemove: Palm, Samsung, Firefox, BlackBerry, NetFront

 

Модель работы с наследственными событиями мыши для браузеров в общих чертах уже разработана. Теоретически, их поддержка мобильными браузерами не требуется, так как телефоны с сенсорным экраном, очевидно, не имеют мыши. На самом деле, это невозможно, так как миллионы сайтов зависят от этих событий. Это неправильно, но что поделать.

Я предлагаю набор правил, которые в целом следуют установившейся практике:

  • При действии touchclick возникает событие клика, вызывающее наследственные события.
  • Эти события – mouseover, mousemove, mousedown, and mouseup. Они немедленно возникают в этом порядке.
  • Происходит только одно событие mousemove.
  • Если действие touchclick относится к новому элементу, для старого возникает событие mouseout (мышь покинула поле).
  • Нет поддержки события dblclick (двойной клик).
  • Стили :hover (проход курсора мыши над элементом) применяются, когда происходят действия touchstart или touchenter, и убираются, когда происходит touchleave или touchend.

 

На данный момент не все браузеры применяют эту схему. Обратитесь к таблицам совместимости для дальнейшей информации.

Правило для :hover – новое. Мне кажется, в этом есть смысл, хотя на данный момент ни один браузер его не поддерживает.

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

 

Предложения

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

 

Зона касания

Хорошо ли было бы описывать положение пальца не одним пикселем, а целой областью? Ведь на самом деле касание всегда покрывает несколько пикселей, и может быть полезно использовать эту информацию в JavaScript.

Например, ее можно использовать, чтобы определить, какие элементы накрываются при касании, а затем определить, на какой из них хотел нажать пользователь, рассматривая размер области пересечения элементов с пальцем.

Этот трюк особенно удачно сработает на старых системах, поскольку их интерфейс зачастую требует значительной доработки.

Если применять область касания, то должна ли она быть прямоугольной, с координатами вершин, или круговой, с центром и радиусом? По этому поводу я не уверен.

 

События touchenter и touchleave

Могут ли пригодиться события touchenter и touchleave (вход и выход касания)? Они могли бы быть оптимизированными под сенсорный экран копиями mouseenter и mouseleave (но не mouseover и mouseout)

 

 

Я понимаю, что это может изменить текущее положение вещей, когда цель касания сохраняется в независимости от того, покидает ли касание элемент. Мне кажется, это не такая плохая идея. Касание элемента изначально и перемещение на него касания - разные действия.

Эти события не должны приводить к разворачиванию элемента. Разворачивание делает mouseover и mouseout неприменимыми. Нам не следует переносить этот недостаток на новую платформу. Вместо этого нам следует воспользоваться опытом Microsoft и вызывать события touchenter и touchleave только когда касание попадает или исчезает с элемента, на котором оно определено.

Событие touchhold

Наконец, может пригодиться событие touchhold (удержание касания). Оно возникает, когда пользователь касается экрана и удерживает палец на нем. В некоторых браузерах появляются контекстные меню, а в некоторых этого не происходит. Разработчикам может быть интересно эта возможность выведения меню, так как touchhold – наилучшее приближение к правому клику.

Кто будет определять, что составляет touchhold? Для браузеров обязательно понадобятся правила вроде “если за событием touchhold не следует другого события касания в течение нескольких секунд”, но разработчики неизбежно начнут жаловаться, что на данной конкретной платформе надо ждать слишком мало или слишком долго. Имеет ли смысл дать им возможность устанавливать это время?

Из всех предложенных событий touchhold наиболее просто для работы с JavaScript. Описанная здесь логика программируется довольно легко. Так что это событие может быть более интересно для создателей библиотек, чем для продавцов браузеров.

Вернуться на главную страницу

Объявления

Подпишитесь на рассылку новых материалов:

Новые видео

Видео "Альпийская горка своими руками"
03/02/2012

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


Садовые дорожки
02/01/2012

Видео из серии "Удачные советы" рассказывает о том, как произвести мощение садовых дорожек всего за один день. Сегодня дорожка является полноценным элементом формирования ландшафтного дизайна дачного участка, поэтому важно знать различные тонкости при ее мощении. [...]


Программы для проектирования

Наш Сад Кристалл 10.0

Программа "Наш Сад Кристалл 10.0" (Наш Сад Рубин) представляет собой уникальное сочетание полной энциклопедии растений и новейших возможностей проектирования ландшафта. Данная программа – незаменимый помощник, как для дизайнеров- профессионалов, так и для садоводов- любителей. Также она может быть своеобразным учебным пособием для учителей и учащихся дизайнерских школ, институтов и колледжей.


Google SketchUp

Хотя программа Google SketchUp не создавалась специально для дизайна ландшафта и планирования дачных участков, тем не менее ее вполне можно использовать для этой задачи. Вы можете проверить эффекты тени от солнца, просматривая ваш садовый участок в любое время суток. Программа очень проста в использовании: подойдет даже начинающим пользователям.


Интересные книги

Практическая энциклопедия садового дизайнера

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


Ландшафтный дизайн: планы, идеи, советы

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


Объявления

Нас интересует ваше мнение

Используете ли вы программы для моделирования ландшафта?

Статьи о ландшафтном дизайне

Правила по созданию альпинария на дачном участке

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


Как вырастить здоровое растение

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


Устройство дачного забора

Страшные заборы из подручных материалов или угрожающие ограды из колючей проволоки уже уходят в прошлое. Такое «оформление» дачи или сада можно найти теперь только на заброшенных участках из глубинки. Забор в наше время несет не только функцию защиты. У ограды появилась новая задача – эстетическая. Изящный садовый забор станет конечным штрихом в оформлении Вашего участка.


Растения для живой изгороди (продолжение)

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


Объявления

Новые статьи о ландшафтном дизайне

Крыжовник на даче. Свежая и сочная ягода порадует каждого
18/05/2012

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


Основные преимущества капельного орошения участка
16/05/2012

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


Монарда - душистое украшение территории любого сада
14/05/2012

Монарда - растение не только довольно симпатичное, но и полезное. Отвар из монарды можно употреблять как чай или лекарство при болях в желудке и при повышенной температуре. Именно поэтому монарда так популярна среди дачников страны.


Цикламен европейский: выращивание и уход, размножение, особенности
13/05/2012

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