Какие существуют кнопки навигации в браузере и для чего они предназначены

Web без мышки

Наверное, все при взгляде на этот экран мысленно переносят обе руки на клавиатуру. Да, тут можно было навигироваться без мышки и это было быстро и хорошо! Многие до сих пор используют подобные менеджеры (Total commander, Far etc).

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

Как же достичь удобства навигации без мышки в вебе?

Большая часть продуктов, которые разрабатывает и внедряет наша компания, выходит на конечного пользователя. Операторы колл-центров, инженеры, менеджеры – все они работают с пользовательским интерфейсом «для внутреннего использования» – B2B интерфейсами. Возможность работы с системой с клавиатуры без использования мыши – важное требование в B2B интерфейсах. Почему?

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

Итак, задача

Анализируем

Табуляция

Табуляция — переход между элементами интерфейса с помощью клавиши tab (shift+tab).

Горячие клавиши

Горячие клавиши (в просторечии хоткеи) — сочетание клавиш, которое вызывает определённую функцию. Это позволяет упростить доступ к основным функциям системы. Всё больше сайтов начинают использовать хоткеи на свои страницах для доступа к самым востребованным функциям, среди них: Habrahabr, яндекс, гугл почта и другие. Но что делать, если функций много, и на каждой странице разные? Просто невозможно будет запомнить все хоткеи, а значит, использование не будет эффективным. Так же есть проблема контекста: когда на странице несколько таблиц и несколько кнопок save, например.

Пространственная навигация

Когда элементы на веб страницах стали позиционировать с помощью css, навигация табом перестала справляться со своей задачей: курсор перескакивал по элементам дизайна в порядке их объявления в html документе, а не в том, в каком их видит пользователь. Тогда некоторые браузеры (Firefox, Opera) реализовали пространственную навигацию. Они позволяли пользователям использовать сочетания shift+стрелки для перемещения между элементами дизайна, причём следующий элемент определялся исходя из его фактического расположения на экране.

Перемещение каретки

Особенность этого подхода в том, что курсор пользователя перемещается не только по элементам форм и ссылкам, а по всему содержимому страницы (как в ворде). Перемещаться можно, как и в пространственном подходе, в четырёх направлениях.

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

Представляем Mouseless

Ключевыми особенностями Mouseless являются:

Принцип работы Mouseless

Страница делится на блоки с помощью привычных CSS селекторов. Блоки могут иметь дочерние блоки. Внутри каждого блока определяется свой набор хоткеев (JSON объект). Хоткеи могут наследоваться внутренними блоками, т.е. у хоткеев появляется область видимости, которым можно управлять (например, хоткей для сохранения один и тот же в разных блоках, но работает по-разному в зависимости от текущего блока).

На рисунке показано разделение на блоки и подблоки.

Конфигурация каждого блока представляет из себя json объект, json объекты для всех блоков образуют конфигурацию страницы.

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

Внутри блока #blockId можно перемещать фокус между ссылками клавишами влево и вправо. gotoPrevElem/gotoNextElem служебные функции, можно так же использовать свои кастомные функции.

На реальных кейсах расширяем базовую библиотеку:

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

Конфигурация блока на примере NavigationTree (раскрывающее дерево):

Теперь можно ходить по дереву стрелками вверх-вниз, открывать-закрывать ветки влево-вправо. Функции openNavTreeNode/closeNavTreeNode были написаны до внедрения Mouseless (были опубликованы как api к дереву).

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

Итого

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

Дополнительным бонусом стало то, что мы покрыли часть рекомендаций W3C “Web Content Accessibility Guidelines” ( www.w3.org/TR/WCAG20 ).

Работа в этом направлении не закончена, будем продолжать, ждём реакцию сообщества.

Источник

Навигационные кнопки

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

Эта панель, наряду с адресной строкой – наш главный «пульт управления». Все кнопки здесь полезны, все – функциональны. Все в них хорошо, кроме одного: Microsoft явно не сумела впихнуть на одну панель все нужные кнопки. Например, кнопки Шрифты и Печать становятся видны и доступны пользователю только тогда, когда Internet Explorer работает в полноэкранном режиме.

Впрочем, как мы уже говорили, большая часть кнопок нам вообще не понадобится (а из Internet Explorer 7 они и вовсе исчезли). А освоить нам нужно только несколько – тех, с которыми мы будем работать всегда.

Часто при просмотре WWW-страниц у вас возникает необходимость вернуться на несколько страничек назад. Что же – держать в памяти адрес каждой просмотренной странички? Ни в коем случае – просто щелкните по кнопке Назад. А кнопка Вперед поможет вам потом совершить обратный переход – так сказать, назад в будущее.

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

Вы думаете, что после просмотра страницы исчезают с вашего компьютера? Как бы не так – они хранятся в особой папке на вашем жестком диске – дисковом кеше. Перед тем как скачать страничку, ленивец-браузер смотрит в свой дисковый кеш: нельзя ли достать ее оттуда? Часто это помогает. Например, нет необходимости каждый раз скачивать графическое оформление странички, но вот что касается содержания. В общем, если вы подозреваете, что ваш браузер водит вас за нос и подсовывает старое, взятое из кеша содержание, – намекните ему, что пора бы и честь знать, нажав на кнопку Обновить. Правда, иногда не помогает и это – ленивый браузер может взять страничку из кеша прокси-сервера, например. В этом случае помогает добавление к адресу URL псевдопараметра «?1». Впрочем, нужда в таких изощренных фокусах возникает крайне редко.

Эта кнопка «отправит» вас на так называемую «стартовую страницу», с которой браузер начинает свое путешествие по WWW. По умолчанию это «приветственная» страница Microsoft. Однако вы сами можете указать браузеру, какую именно страницу вы желаете видеть в качестве «стартовой» (о том, как это сделать, будет рассказано чуть ниже).

На этот раз в открывшемся слева окне появится папка с вашей коллекцией ссылок на интересные страницы. Пока что она пуста – ведь вы еще не начали свою коллекционерскую деятельность в Сети. Но – всему свое время.

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Читайте также

Кнопки

Кнопки При создании формы без кнопок не обойтись: с их помощью можно отправить, очистить или отредактировать форму. В общем, кнопки необходимы. Мы можем создавать разные кнопки, в зависимости от того, что нужно сделать с формой.Чтобы создать обычную кнопку, присваиваем

Кнопки и индикаторы QIP

Кнопки и индикаторы QIP Ну а теперь займемся изучением главного окна программы. Большую его часть занимает контакт-лист, в котором чуть позже появятся имена ваших друзей и знакомых… Но об этом мы поговорим чуть позже.Нижнюю часть этого «небоскреба» оккупировали уже

Меню Кнопки «Office»

Меню Кнопки «Office» Мы уже упоминали в этой главе меню Кнопки «Office» (см. рис. 3.2), и я говорила, что мы оставим его на закуску. Пришло время к нему вернуться.Итак, какие у нас там есть команды.• Создать (Ctrl+N) – открывает новый файл программы PowerPoint.• Открыть (Ctrl+O) – открывает

Кнопки запуска программ

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

12.2.3. Кнопки

12.2.3. Кнопки Для создания кнопки в Ruby/GTK2 предназначен класс Gtk::Button. В простейшем случае мы задаем обработчик события clicked, которое возникает, когда пользователь щелкает по кнопке.Программа в листинге 12.5 позволяет ввести одну строку в текстовое поле и после нажатия кнопки All

Навигационные возможности для связанных таблиц

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

1.15. Добавление кнопок на навигационные панели с помощью UIBsrButtonItem

1.15. Добавление кнопок на навигационные панели с помощью UIBsrButtonItem Постановка задачи Необходимо добавить кнопки на навигационную

Кнопки навигации

Кнопки навигации У карманных компьютеров есть кнопки навигации, позволяющие управлять объектами на экране. Это кнопки со стрелками и кнопка ввода.Чтобы узнать, на какую кнопку нажал пользователь, нужно переопределить событие OnKeyDown. Для создания тестового приложения

Кнопки

Кнопки done: запомнить новые установки.reload file: перезагрузить текущий файл с новыми установками.cancel: отменить новые установки.default: назначить установки по

Кнопки и опции

Кнопки и опции browse: выбрать картинку.alignment: выбор расположения картинки по отношению к окружающему тексту.border: толщина (в пикселах) темной рамки вокруг картинки.hspace/vspace: горизонтальный/вертикальный сдвиг картинки (в пикселях).width/height:– левое серое окно показывает

Использование кнопки Автосумма

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

Полезные кнопки

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

Источник

Начинающим пользователям компьютера

Давайте немного отвлечемся от угроз компьютеру и познакомимся с одной из интересных функций клавиши «F11»: (эф одиннадцать).

Это, наверно, самая используемая мной клавиша из функционального ряда клавиш «F1″…«F12».

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

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

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

Вот в них, да. Функциональные клавиши являются чуть ли не основным инструментом для работы.

Но вернемся к привычным для нас картинкам на нашем мониторе.

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

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

Правда есть одна клавиша, которая практически всегда несет один определенный функционал. Это клавиша «F1»:.

Нажатие этой клавиши или комбинаций с этой клавишей приводит к вызову справки или помощи в любой программе.

Например, независимо от того, какие программы у Вас запущены, комбинация «Win+F1»:+ (технику нажатий клавиш я описывал в уроке «Как без ошибок ввести свой пароль? (Часть 2. Клавиатура)») вызовет справку по операционной системе Windows. Если запущена программа «Paint», то нажатие клавиши «F1» вызовет справку по этой программе. Если запущена игрушка, то клавиша «F1» выведет справку, как играть в данную игрушку.

Если у Вас запущен браузер (как сейчас, когда Вы просматриваете этот урок), то нажатие клавиши «F1» вызовет справку по интернет обозревателю, который Вы в данный момент используете. И т.д. и т.п.

Кстати, интересный факт в подтверждение вышесказанному. Если Вы используете в качестве интернет обозревателя Mozilla Firefox, то клавиша «F1» у Вас не сработает. И вообще никакой горячей клавиши для вызова справки у Mozilla Firefox нет. Видимо, разработчики не посчитали нужным это сделать.

Но так что там с клавишей «F11»:?

Бесспорно, что сейчас самыми используемыми программами являются интернет обозреватели (Google Crome, Opera, Mozilla Firefox и т.п.).

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

Для этого в окно браузера навешивается различный функционал в виде панелей инструментов. Еще их называют тулбары (от английского toolbar).

Показательным браузером в этом отношении является браузер Mozilla Firefox. Вот на этом примере давайте и рассмотрим нашу клавишу.

Многим пользователям нравится использовать в полном объеме тот функционал, который предоставляет Firefox.

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

Этот недостаток решается одним простым нажатием клавиши «F11»:. Окно браузера перейдет из оконного режима в полноэкранный режим.

Повторное нажатие клавиши «F11» вернет все на свои места, т.е. окно браузера перейдет из полноэкранного режима в оконный режим.

Кода я первый раз случайно нажал клавишу «F11», я растерялся. С экрана монитора пропали привычные панель задач и оконный интерфейс браузера. Моя рука невольно потянулась к кнопке «Reset» на системном блоке.

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

Так как же быть, если нет привычных меню, вкладок, окна поиска?

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

Итак, о горячих клавишах.

Прокручивание экрана относительно страницы (скроллинг):

«Space»(пробел): или «Page Down»: — перемещает экран монитора на одну страницу вниз.

«Shift+Space»:+ или «Page Up»: — перемещает экран монитора на одну страницу вверх.

«Home»: — перемещает экран монитора в начало страницы.

«End»: — перемещает экран монитора в конец страницы.

Навигация:

«Alt+Стрелка влево»:+ или «Backspace»: — вернуться на предыдущую просматриваемую страницу.

«Alt+Стрелка вправо»:+ или «Shift+Backspace»:+— пройти вперед на следующую просматриваемую страницу.

Эти клавиши соответствуют кнопкам «Назад» и «Вперед» в окнах браузеров, как показано на рисунке:

«Alt+Home»:+ — открыть домашнюю станицу.

«Ctrl+0»:+ — Восстанавливает исходный масштаб страницы.

Работа с вкладками:

«Ctrl+T»:+ — открыть новую вкладку, а заоодно и окно поиска.

«Ctrl+Tab»:+— переключится на нужную вкладку. Техника нажатия этой комбинации такая же, как я описывал в уроке «Работа с окнами» в разделе «Перелистывание окон».

Где мы были в интернете:

«Ctrl+H»:+ — открыть просмотр истории.

Ну и если все это надоело, то:

«Win+D»:+ — свернуть все окна в панель задач.

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

На этом на сегодня все. Всем удачи и творческих успехов.

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

С уважением ко Всем моим читателям и подписчикам

Источник

1. Знакомство с браузером

Теория:

Первая тема курса посвящена важному элементу, без которого невозможна работа в интернет-пространстве. Этим важным элементом является браузер.

Внимательно посмотрите на рабочий стол Вашего компьютера.

Если есть хоть один такой значок, значит, Вы нашли браузер.

Если Вы не обнаружили ни одного значка, то можете поискать браузер на панели задач. Значок «Пуск», как правило, находится в левом нижнем углу рабочего стола Вашего компьютера.

Адрес сайта вводится в адресную строку панели навигации ①.

Открытие экранной лупы с помощью клавиатуры:

Источник