Как-то я читал свой курс о пользовательском интерфейсе в Интеркоме в Дублине. Тогда ещё можно было собираться по несколько человек в одной комнате. Вот небольшой фрагмент темы «Листание и прокрутка», где показываю, как работает моя книга «Пользовательский интерфейс»:
Запись вели для внутреинтеркомовского использования, так что она на уровне «смотреть можно».
Кое-что вы уже видели в общем впечатлении, например крышу:
Типичный автобус с относительно плоским передом, но нелепо торчащим бамбером:
Длинный и вроде более современный вариант:
На бампер вот так крепятся велики:
Вид сбоку:
Типичный автобус с очень выпуклым передом и приподнятостями спереди и сзади:
Автобус кланяется остановке:
Об этом написано у двери:
Внутри — верёвка для запроса остановки:
Схемка на остановке:
Остановка впритык с дорогой:
Ещё есть модные остановочные платформы для некоей части особых маршрутов «Линк»:
Платформа отделена от тротуара велодорожкой:
Схемы и расписания:
Название такой остановки похоже на название в метро:
А это какой-то музейный экспонат:
Фотографии из поездки в октябре 2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Чикаго!
Ещё автобусы:
Ещё Чикаго:
У выделенного текста есть не только начало и конец, но и якорь: то, с какой стороны я начал выделять. Это нигде не отображается, но операционная система его устанавливает и учитывает.
Если вы выделите текст движением слева направо, у выделения будет якорь слева. Дальнейшие хождения стрелками с зажатым Шифтом будут влиять на правый конец текста, а левый вы никак не измените. И наоборот, если вы выделите текст движением справа налево, то якорь встанет справа, и Шифт-стрелками вы уже будете изменять положение левого края выделения. Это работает, даже если изначально выделить текст мышкой — попробуйте сами. Если просто выделить даблкликом, якорь будет слева.
На старых версиях Макоса якоря хреново работали в списках. Скажем, если в Файндере ткнуть в файл, а потом Шифт-ткнуть в файл, находящийся выше по списку, то после этого Шифт-стрелки всё равно изменяли нижний конец выделенного диапазона файлов, а не верхний. Это ужасно бесило. Потом починили и стало работать по-людски. В тексте, сколько помню, работало правильно.
Но и в тексте на Маке до сих пор есть глюк: анду всегда сбрасывает якорь на левый. По крайней мере, в Мохаве. Выделите какой-нибудь текст справа налево, попробуйте поизменять выделение Шифт-стрелками — всё будет работать нормально, будет меняться левый край. Потом удалите текст и верните через ⌘Z. Теперь Шифт-стрелки изменяют правый край выделения! Какого чёрта, Эпл?
Принято восхвалять Эпл за их внимание к деталям, но такой мелкой интерфейсной неряшливости у них полно, и всегда было полно. Кстати, о существовании у выделения якорей я не задумывался, пока пользовался Виндой, потому что там это всегда работало безупречно.
См. ещё про выделение текста:
У меня неделя новостей Эгеи, как видите: вышла версия 2.9, обновился сервис.
Вдобавок к этому обновился ещё и сайт Эгеи. Наконец-то сайт нормально работает на мобиле!
Эгея умеет хорошо и без ущерба для функциональности адаптироваться под мобилу ещё с далёкой версии 2.5 (за что спасибо Илье Страйкову). Но сайт Эгеи все эти годы был чисто десктопным — никак не доходили руки его заадаптивить (за вёрстку сайта, кстати, тоже спасибо Илье Страйкову).
Помимо того, что отсутствие адаптивности сайта было неудобно само по себе, это создавало у людей впечатление, что Эгея тоже не умеет адаптивиться. Там даже были скриншоты того, как Эгея выглядит на мобиле, но кто ж до них докрутит, когда сам сайт не влезает в телефон?
Заадаптивила сайт Нина Папченя, за что ей большое спасибо. Нина сделала всё хирургически точно. Сначала аккуратно зарефакторила вёрстку, чтобы было удобно адаптивить разные типы модулей независимо друг от друга, а потом уже шаг за шагом заадаптивила их от самых простых до интерактивных штук на главной. В тех местах, где нужно было придумать другой дизайн этажа для мобилы, я его делал, но в большинстве случаев было достаточно на словах обсудить, как что перекомпонуется.
Ещё в связи с выходом Эгеи 2.9 обновилась страница фич Эгеи.
Разработчики софта для мобильных камер творят чудеса, чтобы преодолеть ограничения физики и выжать всё из миниатюрной оптики, но реальной преградой для получения качественных снимков в большинстве случаев давно уже является криворукость фотографа.
Большинство людей фотографируют ужасно: держат телефон вертикально, но и то не совсем ровно; смотрят на объект с максимально кривого ракурса; оставляют в кадре остаток ноги проходящего мимо человека, при этом отрезают кусок ноги того, кого снимают. Всё это снимается в цифровом зуме против солнца заляпанной камерой.
Поскольку людей не исправить, то даже эти проблемы придётся исправлять софтом. Но как?
Думаю, через несколько лет будет работать так: фоткаешь Эйфелеву башню, телефон по геолокации и данным с матрицы понимает, что ты сфоткал именно её, и показывает тебе её фотку с похожего ракурса, сделанную прямыми руками. А если ты сфоткал подругу на её фоне, то он узнаёт подругу, находит в её соцсетях максимально подходящую хорошую фотку и автоматически вфотошопливает её как надо.
Короче, данные с матрицы твоего телефона вообще не будут использоваться для получения финального изображения; они нужны только, чтобы телефон понял, что ты имел в виду, а потом уже синтезировал эту фотку с помощью нейросетей и чего там ещё бывает.
Добавлено 2 июня 2023: Прогноз сбылся.
Как вы, возможно, знаете, Эгею можно использовать как сервис — прикрутить к своему домену с нашего сервера. Сегодня мы там обновились до свежей Эгеи 2.9.
Это значит, что благодаря новым фичам сервис Эгеи стал ещё и подкаст-платформой! Отчасти повторю то, что писал про новую Эгею.
Нужно завести какой-то тег, который будет стоять у выпусков подкаста, в отличие от простых заметок. Например, тег «подкаст». Даже если планируете сделать подкаст основным контентом, имеет смысл оставить себе возможность написать просто текстовую заметку, не являющуюся выпуском подкаста. Даже в Ютюбе можно писать просто текстовые заметки. Короче, делать без тега не рекомендую.
Для публикации выпуска, пишите новую заметку и загружайте в неё мп3-файл с выпуском. Текст заметки станет описанием выпуска. Вот, например, начало моей заметки «Порядок слоёв»:
В этом выпуске рассказываю, о том, почему слои в графических программах нужно читать и располагать снизу вверх...
А вот как она выглядит выпуск подкаста в каталоге Айтюнса:
Когда опубликуете первую заметку и впервые используете в ней тег, перейдите по тегу и в карандашике пропишите ему нормальное название в урле (например, «podcast»). Заполните поля «Заголовок страницы» и «Описание» — они станут названием и описанием подкаста.
У меня это выглядит так (на описание пока забил):
Чтобы сделать обложку подкаста, перетащите картинку в эту же форму. Её можно использовать в тексте описания тега, как картинку в любой заметке, а можно и просто оставить приатаченной снизу. Эгея не проверяет, что это за картинка, так что убедитесь сами, что она квадратная и соответствует требованиям каталога Айтюнса.
Если вы не загрузите картинку, то в качестве обложки подкаста будет отдана квадратная середина картинки, которая загружена в качестве фотки в «Настройке», о которой ещё несколько слов ниже.
В итоге выпуски подкаста, как любые заметки по тегу, будут жить на его странице с урлом ваш-блог/tags/podcast/. Главное — не забывайте ставить тег всем выпускам.
Урл ваш-блог/tags/podcast/rss/ можно скормить любому подкастному приложению, и оно будет скачивать и играть выпуски. Этот же урл можно отдать Эплу, чтобы добавить подкаст в каталог Айтюнса.
Для каталога Айтюнса может быть ещё нужно указать категорию и наличие ненормативной лексики в подкасте. Для этого используются специальные айтюнсовские теги, которые выглядят, например,так:
<itunes:category text="Arts">
<itunes:category text="Design" />
</itunes:category>
<itunes:category text="Society & Culture">
<itunes:category text="Personal Journals" />
</itunes:category>
<itunes:category text="Technology" />
<itunes:explicit>no</itunes:explicit>Пока нет интерфейса для их настройки, так что если вы хотите их добавить, просто напишите мне.
Длинный выпуск подкаста может быть полезно разметить по темам. Это хорошо бы сделать на уровне самого мп3-файла, чтобы работала навигация в подкастных приложениях, но это не касается Эгеи. А вот в Эгее вы можете добавить навигацию для тех, кто слушает выпуск прямо в браузере.
Пример такой навигации — в недавней заметке о промомиксе «Аудио Санто». Пока играет микс, в плейлисте ниже подсвечен трек. В редакторе используется такой синтаксис:
uploaded-podcast-file.mp3 Название выпуска
0:00:00 0:02:44 Приветствие
0:02:45 0:14:34 Ответы на вопросы слушателей
0:14:35 0:46:09 Обсуждение судьбы хомячков
0:46:10 0:49:14 ПрощаниеКаждая строка имеет вид: от, пробел, до, два пробела, подпись. Надо писать сразу после строки с именем файла.
Теперь если залить фотку в «Настройке», она же станет фавыконкой вместо одинакового для всех лимончика. Чтобы это сработало, фотку надо будет перезалить, конечно. И браузерам обычно надо время, чтобы допереть, что фавыконка поменялась. Эта же фотка теперь будет отдаваться в качестве обложки заметок, у которых нет картинок, и в качестве обложки подкаста, если у тега подкаста нет своей картинки.
Ещё добавилась поддержка тёмного режима, вход через ВК и менюшки.
Подробное описание новой версии публиковал на днях.
Подключайтесь к сервису Эгеи!
Спасибо Глебу Гончарову за помощь с обновлением.
Я вам показывал уже нью-йоркские автобусы, теперь начал разгребать метро. Там сотни фоток, но я начну с обзорной заметки, а когда-нибудь потом углублюсь в детали.
Типичный вход — просто тёмно-зелёная лестница в тротуаре:
Под названием станции написано направление — аптаун и Бронкс. Если тебе в даунтаун, вход по другую сторону Бродвея.
Нетипичный вход — огромный вестибюль на 42-й улице и Бродвее:
У нью-йоркского метро есть логотип, но его мало кто видел. Настоящий идентификатор — чёрная навигационная полоска с цветными кругами:
Или даже с одним кругом. Красота и польза:
Удивительно гибкая система: кроме крупного названия можно написать любую информацию о станции или входе. Несмотря на разнородность информации — где-то пишут про направление поездов, где-то про лифт, где-то про наличие касс, где-то про режим работы — выглядит аккуратно и системно. Это дизайн.
Над пристёгнутым великом — тактильная версия вывески:
Внутри висят схемы автобусов и метро, карта окрестностей и список планируемых ремонтов:
Форма турникета помогает понять, с какой стороны проходить — не приходится писать «проходите слева». Это тоже дизайн:
Типичная платформа. Ни фресок, ни барельефов, только металлоконструкции:
Когда станции называются коротко, подписывать их можно на квадратиках. Не заблудишься.
Над путём висит информация о движении поездов:
Снова: информация разнородная, но выглядит всё чётко.
Здесь вот пишут, где можно будет пересесть на поезда E, M, 7:
Есть переход к платформам в аптаун:
Очень красивые поезда с американским флагом и номером:
См. также автобусы.
Внутри поезда. Схема линии висит поперёк вагона:
Вывеска с названием станции:
Много где сохранились старые названия, выложенные плиточкой:
Табличенька:
Красивый инфосос:
Адские турникеты на выход:
Фотографии из поездки в октябре 2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Нью-Йорк!
Ещё Нью-Йорк:
Ещё метро:
Готова Эгея 2.9 (сборка v3553) со значительной переписью старья под капотом, фоткой в «Настройке», тёмным режимом, входом через ВК, менюшками и подкастами (для платных пользователей). Эта заметка повторяет анонс беты, но с меньшим занудством. Хотите подробнее — читайте анонс беты.
2.9 — необычный релиз, такой «Снежный барс» среди Эгей. Я стремился к наведению порядка под капотом во многих местах движка, так что новых фич не очень много. См. заметки про альфу, альфу 2, альфу 3, альфу 4, бету и бету-2.
Перелопачивание коснулось всего взаимодействия с базой, логирования, подготовки данных для генерации страниц, фронтенда, инсталятора.
С последней беты фичи, связанные с подкастами, стали доступны только в платной версии, а также улучшилась совместимость с ПХП 7.4. Теперь в качестве обложки подкаста используется обложка страницы тега, используемого для подкаста, и только если её нет — фотография автора блога.
Теперь можно отсюда управлять картинкой блога, которая показывается в кружке рядом с названием слева сверху:
Можно перетащить файл, а можно ткнуть в большой кружок, и тогда появится обычный диалог выбора файла. Как и в предыдущих версиях, фотографию можно перетащить и напрямую в маленький кружок в углу (но если ткнуть в маленький кружок, перейдёшь на главную).
Эта фотка теперь автоматически используется в качестве фавыконки и эпл-тач-иконки.
Ещё Эгея теперь хранит загруженную аватарку в полном размере и отдаёт её в качестве обложки заметок, у которых нет других картинок (раньше отдавала малюсенький файл, который увеличивался и разблюривался в соцсетях).
В темах «Простая» и «Акут» появилась поддержка системного тёмного режима. То есть при переключении тёмного режима в ОС, блоги с этими темами будут тоже переключаться в тёмный режим. Если такое поведение вам не нужно, снимите галку «Поддерживать Тёмный режим»:
На этом скриншоте ещё видно новую галку «Показывать счётчики просмотров». Счётчики появились в 2.8, но их не все полюбили; теперь можно выключить.
В тёмных темах оформления подкручены цвета подсветки кода. Иконки, изображающие отстутствие фотографии у комментатора, теперь красятся подходящим к выбранной теме оформления цветом, в том числе, с учётом поддержки тёмного режима (раньше всегда были чёрными). В предпросмотре тем оформления теперь показываются этажи «Популярное» и «Теги» (в конце страницы).
Ещё в подвал «Настройки» вернулась ссылка на открытые сессии. Для меня самого загадка, зачем и при каких обстоятельствах я её убирал. Ещё там могли не показываться айпи-адреса при определённой конфигурации сервера, теперь показываются.
При изменении настройки соединения с базой теперь выводятся конкретные сообщения об ошибке, а не просто «перепроверьте параметры».
Появились выпадающие меню управления комментариями:
И загруженными картинками:
В менюшке картинки теперь видны имя и размер файла — информативность! Ещё теперь если вдруг файл с картинкой пропал с сервера, в качестве его превьюшки будет показан аккуратный перечёркнутый квадрат, а не что там браузер показывает, когда не смог загрузить картинку.
Благодаря большой переписи слоя общения с базой данных, если с доступом к базе возникли проблемы, Эгея больше не сыпет гору бессмысленных ошибок на страницу, а показывает аккуратный лимон:
Ошибки при этом пишутся в лог, причём туда попадает информация о том, из какого места в коде какой именно запрос в базу делался и для чего. Если очень хочется, можно включить многословный режим, чтобы Эгея выводила это прямо на страницу.
Благодаря большому рефакторингу фронтенда, Эгея теперь умеет выводить аккуратные сообщения об ошибках при неудаче с аджакс-запросами:
Информативные подробности ошибки при этом попадают в консоль браузера, так что отлаживать такие проблемы станет проще. Раньше в случае неудачи с аджакс-запросом Эгея могла просто молчать или выводить какой-нибудь восклицательный знак где-то в незаметном месте.
Также стало проще включить ведение лога. Если вы мне пожалуетесь на необъяснимый баг, я смогу быстрее получить от вас лог и попытаться понять, в чём дело. (Поддержки движка по-прежнему нет, так что в общем случае помочь я вам не смогу.)
Практически всё, что касается фронтенда (включая настройку аватарки, новые менюшки, эти сообщения об ошибках и исправление кучи багов) сделал Женя Лазарев — мегаспасибо Жене!
Теперь Эгею можно использовать для подкастов, правда поддержка этого сделана на уровне прожиточного минимума. В коде РССа теперь вставляются теги enclosure с аудиозаписями, если они использованы в заметке, и добавлены разные ещё теги, которые нужны для подкастов: язык, автор, описание. На обычную работу РСС это не влияет.
Чтобы сделать подкаст на Эгее, нужно завести какой-то тег, который будет стоять у всех заметок-выпусков. В каждую такую заметку должен быть загружен мп3-файл с выпуском. Например, вы выбрали тег «подкаст». В редакторе тега пропишите тегу нормальное название в урле (например, «podcast») и заполните поля «Заголовок страницы» и «Описание» — они станут названием и описанием подкаста.
У меня это выглядит так (на описание пока забил):
Теперь выпуски подкаста, как любые заметки по тегу, живут на его странице с урлом ваш-блог/tags/podcast/, а урл ваш-блог/tags/podcast/rss/ можно скормить любому подкастному приложению, и оно будет скачивать и играть выпуски. Этот же урл можно отдать Эплу, чтобы добавить подкаст в каталог Айтюнса.
В качестве обложки подкаста будет использоваться обложка страницы этого тега (просто перетащите картинку в редактор, не обязательно использовать её в тексте описания тега). Эгея не проверяет, что это за картинка, так что убедитесь сами, что она квадратная и соответствует требованиям каталога Айтюнса. Если такой картинки нет, то в качестве обложки подкаста в каталоге будет отдана квадратная середина картинки, которая загружена в качестве фотки в «Настройке».
Другие подкастные поля для Айтюса вроде категории и наличия ненормативной лексики теперь можно настроить в конфиге через атрибуты rss_itunes_categories_xml (сюда надо прям XML-код атрибутов в формате Айтюнса) и rss_itunes_explicit (yes или no). Эти параметры — глобальные для блога. Если вы хотите публиковать несколько подкастов на разных тегах, вы не сможете прописать им разные значения этих атрибутов.
У меня прописано так:
$_config['rss_itunes_categories_xml'] = (
'<itunes:category text="Arts">'. "\r\n".
'<itunes:category text="Design" />'. "\r\n".
'</itunes:category>'. "\r\n".
'<itunes:category text="Society & Culture">'. "\r\n".
'<itunes:category text="Personal Journals" />'. "\r\n".
'</itunes:category>'. "\r\n".
'<itunes:category text="Technology" />'. "\r\n"
);
$_config['rss_itunes_explicit'] = 'no';В результате в Айтюнсе мой видеоблог-подкаст выглядит так:
Вместо обычного аудиоплеера Жуэль с Эгеей теперь идёт продвинутый Жуэль Про. Это значит, что вы можете теперь пользоваться его контролами. Скажем, вы выложили подкаст и хотите обратить внимание читателей на конкретный фрагмент, как я делал недавно в заметке о подкасте про многозадачность на Айпаде:
В редакторе заметки это выглядит так:
[play] http://traffic.libsyn.com/atpfm/atp363.mp3 363: The Floor is Lava
<span class="e2-audio-seek jouele-control" data-href="http://traffic.libsyn.com/atpfm/atp363.mp3" data-type="seek" data-range="1:24:55...1:31:24">Разговор про Айпад начинается с 1:24:55</span>. Особенно здорово...Как видите, приходится использовать АПИ Жуэля Про впрямую, в том числе, прописывать полный путь к файлу в атрибуте data-href. Класс .e2-audio-seek я определил в Эгее и использую, чтобы такие ссылки на места в аудиотреках выглядели как кликабельными и подсвечивались, когда эти фрагменты звучат.
Кроме того, появился упрощённый синтаксис для разметки частей длинного аудио, например диджейского микса или подкаста. Пример того, что с этим можно сделать — в недавней заметке о промомиксе «Аудио Санто». Пока играет микс, в плейлисте ниже подсвечен трек:
В редакторе заметки это выглядит так:
[play] http://promodj.com/download/6921656/ Ilya Birman: Audio Santo (Studio Mix)
0:00:00 0:02:44 Analog Pussy: Spooky Loops
0:02:45 0:04:34 Logic Bomb: Skrock
0:04:35 0:06:09 Krumelur: Understatement
...Каждая строка имеет вид: от, пробел, до, два пробела, подпись. Тут важно, чтобы такие строчки с диапазонами и подписями шли без отступа после самого элемента [play]. Тогда Эгея поймёт, что это его разметка, и вам не придётся вручную описывать контролы Жуэля Про и верстать эту таблицу.
Добавилась возможность представляться в комментариях через «Вконтакте» (спасибо Виктору Корейше):
«Роза» научилась английскому словоизменению (спасибо Роману Парпалаку). Кажется, меньше вероятность того, что поиск забудет проиндексировать некоторые заметки (был едва уловимый баг, попытался исправить).
Нисден стал поддерживать прямое указание языка программирования в коде: <code lang="php"> (спасибо Жене Степанищеву).
При редактировании тега теперь можно указать заголовок страницы этого тега. Я уже выше упоминал поле «Заголовок страницы» в связи с подкастами. Это новое поле в Эгее 2.9. По умолчанию в заголовке страницы тега написано что-то вроде «8 заметок с тегом кино». Теперь можно изменить, например, на «Обзоры кинофильмов», сохранив при этом сам тег «кино».
Мелочи:
Ещё появилась беспилотная инсталляция, но это я для себя просто пишу, чтобы не забыть.
Отредактируйте и сохраните любую заметку или черновик (на всякий случай; это гарантирует, что сделается актуальный бекап базы).
Замените файл .htaccess в корне, папку /system/ и все подпапки в /themes/ (то есть уберите старые, положите новые, а не дозалейте в старые новые файлы).
Имейте в виду, что переделалось всё логирование. Вместо user/log.txt теперь в папке user/logs/ пишутся разные логи, так что если у движка не будет прав, чтобы создать эту папку и файлы в ней, логов не будет. Если у вас всё правильно установлено, таких проблем быть не должно, потому что у Эгеи должны быть полные права на запись всего внутри её собственной папки, но это повод вам перепроверить.
Если вы делали свою тему оформления, посмотрите, что изменилось в комплектной, и аккуратно повторите эти изменения у себя. Также изменились названия некоторых параметров конфига, добавились новые (ваш user/config.php может частично утратить актуальность; сверяйтесь с system/config.php);
Свежий дистрибутив — на сайте движка.
Если вы пользуетесь платной версией и хотите платную 2.9, напишите мне.
О предыдущей версии: 2.8
Я вам показывал уже нью-йоркские автобусы. В Америке не только автобусы не имеют ничего общего с европейскими, но и всевозможные грузовики.
Они очень нарядные и гордятся собой:
Разрисованы:
«Либерти» — ну а что ещё должно быть написано на американском мусоровозе?
Ну что-то другое может быть:
Ещё один Мак:
Какой-то вдруг современный мусоровоз:
Хирургического вида:
Просто фура. Фрайтлайнер:
Петербильт. Знаете такого производителя автомобилей?
Ещё Маки. Не знаю, водовоз это или ассенизатор:
Какая-то откачивался, видимо. Фрайтлайнер:
Просто грузовик. Мак:
Самосвал вбок. Кенворт:
Самосвал назад. Мак:
У американских самосвалов невиданная на Руси особенность: верх закрывается отдельной натягивающейся тряпкой, чтобы пыль не летела, видимо. У Петербильта (слева) она убрана, а у Кенворта (справа) — закрыта:
Бетономешалка:
Эвакуатор:
Типичная американская почтовая машина:
Ну и, конечно, пожарная:
Фотографии из поездки в октябре 2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Нью-Йорк!
Ещё Нью-Йорк:
Моя любимая рубрика.
Красивый симметричный дизайн:
Тесно:
Парные знаки:
К зелёным табличкам с официальными названиями улиц иногда добавляются коричневые с какими-то народными названиями или чем-то в таком духе:
Это пешеходные таблички, а автомобильные содержат ещё одну строчку с координатами, о которой я рассказывал в заметке «Пять станций метро „Вестерн“»:
Какая-то неведома сила мешает людям писать 0 E и они пишут 1 E:
Фотографии из поездки в октябре 2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Чикаго!
Ещё Чикаго:
Ещё уличные таблички: