6 заметок с тегом

интерфейс

В яблочной программе Mail есть интересное сочетание клавиш на отправку сообщения — Cmd-Shift-D:

Странный хоткей, не правда ли? Обычно ведь везде и всюду Cmd-Enter, даже в Макоси он местами используется. Но что-то в этой комбинации есть, что-то такое неуловимое, что осознал я буквально вчера.

Гляньте на окно письма (внимание на кнопку в левом верхнем углу):

А теперь на кусочек клавиатуры (внимание на клавиши Shift, Command и D):

А теперь всё вместе:

Та-даааам!

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

Итак, открываем это чудо.

Оно так и называется — «F12». Мне, гадкому маководу, таких вещей не понять, инспектор кода я открываю стабильно по ⌘-Option-I, а до F12 слишком далеко тянуться.

Главное окно — обычный навигатор по коду страницы, ничего особенного, разве что называется он «Проводник DOM». Видимо, у них там свой загон по «проводникам».

Но я хотел поиграть с вами в одну игру. Взгляните на эту прекрасную панельку слева, на которой иконки нарисованы, и попробуйте догадаться, какой инструмент скрывается за каждой из них. Сначала кажется, что первая иконка — это «F12», при нажатии на которую попадёшь куда-нибудь «домой», на главный экран или «Проводник DOM». Но нет, она не нажимается, это просто надпись в левом верхнем углу, поэтому первой иконкой оказывается стрелочка со скобочками, которая уже разоблачена.

Вторая иконка — явно консоль, потому что окошко с треугольной скобкой.

Третья — дебаггер, потому что традиционный зачёркнутый жук.

А вот вайфай-роутер на четвёртой иконке ввёл меня ненадолго в заблуждение. Не сразу догадаешься, что там, собственно, «Сеть»:

Да, обыкновенный анализатор запросов с красивыми разноцветными полосочками и новой для меня колонкой «Инициатор» с капитанскими подсказками:

Кстати, очень прикалывает читать подсказки к иконкам в этом самом «F12». Например, иконка форматирования кода в Хроме подписана лаконично — «Pretty print»:

Аналогичная кнопка в ИЕ имеет более пространную и заставляющую задуматься подпись — «Включить качественную печать»:

Впрочем, вернёмся к проблемам навигации. На очереди иконка с... И вот уже начинаются варианты. Лобовое стекло автомобиля с дворником? Весы? О, точно, спидометр! А что бы он мог значить? Скорость загрузки страницы? Это уже было на вкладке «Сеть». Скорость работы яваскрипта? Профайлер? Да, это должен быть профайлер, нажимаем:

«Отклик пользовательского интерфейса» с одинокой надписью «Start profiling to begin a performance session». Когда я впервые путешествовал по этим дебрям, то как раз искал профайлер и обрадовался, что вот он, родимый. Давай же, дружок, начнём нашу первоманс-сессию, что бы это ни значило!

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

И я никогда бы не подумал, что профайлер — это шестерёнка с часами. Хоть убей, я обошёл всё, кроме этой кнопки, потому что упорно думал, что это какие-то настройки чего-то там. И в последней надежде я нажал на неё:

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

Поехали дальше. Фотоаппарат. Первая ассоциация — это что-то про работу с вебкой. Наверное, я сейчас туда щёлкну, включится камера, и на меня будет смотреть моя рожа. Ну-ка...

Ой, нет. Фотоаппарат — это «Память». Конечно, как я мог забыть об этом сладком слове «снапшот»? Короче, тоже приятная тулза, мониторящая жручесть сайта и позволяющая сделать «моментальный снимок кучи дерьма». Там я мало чего понял, поэтому скриншота кучи нет.

Вот вам для сравнения вкладка «Timeline» из Хрома, где, хоть и плотновато, но более приятно объединены «Память» и «Отклик пользовательского интерфейса»:

И тут мы подходим к самому сладкому — монитору и, видимо, телефону. Только телефон почему-то высотой с монитор, но не будем придираться. Скорее всего, это про адаптив. Или за этой кнопкой скрывается эмулятор виндофона?

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

Вещь очень полезная, но, как и везде в этом окошке, полная неожиданностей. Вот «Режим документов» — это эмуляция ранних версий IE, за одним лишь исключением:

Есть мнение, что в Майкрософте осознали свою ошибку и про IE 6 решили забыть. И чтобы мы тоже забыли. Поэтому, пожалуй, будем отлаживать сайты только под IE 5 и IE 7-11. В общем, божественная логика, потому что со «строкой агента пользователя» («агент пользователя» — это User-Agent, ну ты понял) всё в порядке и даже больше:

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

И напоследок ещё один небольшой урок словесности. Какая бывает ориентация? Я сейчас про экран и печать. Давайте, вспоминайте, их две: портретная и... Что, альбомная? Садись, два. Правильный ответ — «Пейзажная»:

Вот и всё, мы бегло окинули взглядом обитель зверя под названием «F12 Developer Tools», и с навигацией в нём всё очень не то чтобы плохо, но странно. Я пользовался виндой лет десять и не помню, чтобы в ней когда-либо были проблемы с локализацией. Если ставишь русскую винду, то там всё по-русски, и это даже читать можно было без особых напрягов. А в этом IE11 сплошная мешанина из русского языка, калькированного английского и просто английского, где переводчики решили просто не заморачиваться.

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

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

Хром (а от него и Яндекс.Браузер с новой Оперой):

Сафари:

Старая Опера:

Фаерфокс:

И никаких гвоздей. Писать слова на кнопках — это не так плохо.

Хороших вам выходных, пупсики.

14 апреля 2014, 2:00

Айпадовы кавычки

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

Вот как выглядит кавычная клавиатура на айфоне:

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

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

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

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

В общем, брр.

Публикует, например, Валера фотографию и прописывает ей геотег:

Вот ведь незадача, слишком длинное название местоположения: «Международный аэропорт „Байк...» И думай-гадай, что за «Байк». Байконур? Байкер?

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

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

Но, если под рукой нет человеческого десктопного браузера, придётся сделать несколько изящных телодвижений:

  1. Нажимаем на текст метки:
  2. Нажимаем «Открыть в Картах»:
  3. OK:
  4. В верхнем поле искомое название. Нажимаем на него → Выбрать все → Скопировать:
  5. Открываем Заметки, вставляем, наслаждаемся:
19 сентября 2013, 22:24

Главная шиза iOS 7

Смотрю я, например, какой-нибудь ролик на Ютубе:

Затем внезапно хочу почитать Твиттер и открываю переключалку приложений:

Листаю до Твиттера, который справа за Яндекс.Картами:

Открываю его, читаю:

И хочу переключиться, например, на карты, которые были слева. Двойное нажатие кнопки HOME, и:

Карты, которые были слева, оказываются далеко справа. И Ютуб тоже справа, который был далеко слева.

А всё потому, что любое открытое приложение автоматически оказывается рядом с домашним экраном:

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

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

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

13 августа 2013, 13:29

iBooks, примечания, «Назад»

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

Часто сноски реализованы через ссылки, которые кидают пользователя на отдельную страницу в самом последнем разделе книжки:

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

Однако и эта ссылка не всегда присутствует:

То есть читаю я книжку, вижу аббревиатуру CID, автоматически жму на [1], попадаю на примечание, читаю его и хочу вернуться назад. Листаю влево — не, не туда. Жму на цифру в заголовке — не работает.

Тогда я тыкаю по экрану для отображения всех элементов интерфейса iBooks и ищу кнопочку «Назад», которая по всем законам жанра должна располагаться как-то так:

Но ее там нет. Как вернуться? Я ведь уже забыл, с какой страницы сюда пришел. Искать через «Поиск» — тупо. Руками листать — долго.

И лишь недавно я открыл для себя нижнюю часть интерфейса iBooks, настолько же незаметную, насколько полезную. Внимательный читатель наверняка уже нашел заветную ссылку-кнопку, а такой же, как я, может прямо сейчас порадоваться: