Готова Эгея 2.7 (сборка v3239) с трансляцией на центральный сервер, большими улучшениями в темах, клавиатурным управлением в редакторе и другими штуками. Эта заметка в основном повторяет анонс беты, чтобы всё было в одном месте.

Проект «Холборн»: трансляция заметок на центральный сервер

Заметки, которые вы пишете в 2.7, отображаются в разделе «Блоги» на сайте движка:

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

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

Не бойтесь сделать опечатку — изменения тоже мгновенно приходят в «Блоги». Это же не Фейсбук вам. И если вы удалите заметку, она удалится и из «Блогов».

Новые темы и темы на основе переменных

В новой версии встроено несколько тем, например:

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

Все новые темы сделаны на основе «Простой», но не перекрытием её стилей, а через переменные:

Это тема «Дуглас», выглядит так:

Теперь делать новые темы, отличающиеся только цветами, шрифтами и полями стало намного проще: клонируете папку с нравящейся темой и ставите другие значения переменных в ЦСС.

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

Ещё в своих темах стало проще сделать собственную расцветку для подсветки синтаксиса. Про то, как это сделать, отдельно расскажу.

В ИЕ работает полифилл для ЦСС-переменных (спасибо, Игорь Адаменко).

Предпросмотр тем

В «Настройке» рядом с выбором тем появилась новая ссылка «Предпросмотр»:

По этой ссылке открывается специальная страница, на которой собраны основные элементы, из которых состоит блог, и дизайн которых полезно бы проверить. Она собственным текстом объясняет, на что стоит обратить внимание:

Откройте, например, предпросмотр темы моего блога.

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

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

Встраиваемость в сайты (для платных пользователей)

Появилась специальная тема «Встраиваемая» (Embeddable). Это тема, в ЦССе которой определяются только специфические для Эгеи внутренности — заметки, комментарии, теги, элементы навигации — но не обёртка и вид стандартных тегов ХТМЛ.

Если подключить к Эгее ЦСС от вашего основного сайта и добавить ХТМЛ вашей шапки и подвала в тему «Встраиваемая», Эгея волшебным образом будет выглядеть как страница вашего сайта (у меня теперь работает именно так, а раньше приходилось использовать сто костылей).

См. подробнее в заметке: Как встроить Эгею 2.7 в свой сайт.

Абзацы с классами

Любая самостоятельная строка, начинающаяся с .something, превращается в абзац с классом something. Пишете:

.loud Какой-то громкий текст

Получаете (увидите только в браузере):

Какой-то громкий текст

Ну, это у меня. У вас может выглядеть иначе.

Вы можете легко определить свои классы для каких-то особенных элементов текста. Важно понимать, что это просто ЦСС-класс, и он не сработает в РССе. Поэтому когда используете такое, убеждайтесь, что текст не теряет смысла без выделения. Именно поэтому, кстати, это абзац, а не див.

В самой Эгее и всех новых темах определены стили для .lead (подзаголовок или въезд), .loud (как выше) и .foot (сноска или примечание).

Вот это как раз примечание.

Клавиатура в редакторе

Игорь Адаменко, который сделал клёвое автосохранение в 2.6, реализовал для редактора 2.7 ещё одну отличную фичу — клавиатурное управление. Так быстрее. Работают такие сочетания (как в Гугль-доке):

Это работает и в заметках, и в комментариях, и в тегах, и в описании блога. В Виндоусе вместо ⌘ работает Ctrl.

Ссылки на твиты

В дополнение к видосами на Ютюбе и Вимео, Эгея теперь умеет вставлять твиты просто по урлу. Вы пишете в редакторе ссылку на твит:

https://twitter.com/omelekhin/status/902835411034271744

Получаете сам твит:

Спасибо Илье Гельману за это.

В РССе ссылки на твиты отображаются как просто ссылки на твиты.

Соцпакет

Если у тега есть собственные картинки (загруженные в редакторе тега), то они все попадают в качестве картинок для соцсетей ко всем заметкам с этим тегом. Удобно во всяких рубриках типа «Что почитать на выходных» обложки делать.

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

Добавилась поддержка шаринга в Вотсапп (спасибо Илье Гельману).

Поиск

Как вы помните, с версии 2.6 в Эгее новый поиск на базе движка «Роза». Теперь используется новая версия, которая ещё лучше рассчитывает релевантность.

Кроме того, поиск теперь корректно индексирует слова с нерусскими и неанглийскими буквами (например, украинскими, белорусскими). За это всё спасибо Роману Парпалаку.

Ссылка на теги переехала внутрь поля поиска. И вообще, поле поиска сильно переделалось и теперь легче встраивается в другие дизайны и лучше работает на мобильных (спасибо, Игорь Адаменко). Поле поиска теперь есть на всех страницах, и админское меню не сдвигает его, а наоборот, идёт левее.

Остальное

Улучшена фильтрация спама в комментариях (спасибо Ивану Щолокову).

Теперь вдобавок к РСС поддерживается джейсон-фид — новый стандарт для подписки. Читайте об РССе и джейсон-фиде. Помимо ленты всего блога и ленты по тегу, доступна «лента» из любой одной заметки, например — этой. Если зачем-то нужно вытащить смысловые куски заметки, не нужно пытаться парсить ХТМЛ. У меня это используется для моих трансляций в раздел «Блоги».

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

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

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

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

Если на вашем сервере установлено ПХП-расширение zip, то внизу в настройке появится ссылка на скачивание последнего бекапа. Это я сделал для сервиса, но никому не будет лишним.

Ещё Серёга Чикин нарисовал клёвую иконку-лимончик, которая теперь показывается в подвале (посмотрите у меня, например).

Технические детали

Лайкли, Жуэль и ХайлайтЖС обновились.

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

Где скачать

Свежий дистрибутив — на сайте движка.

Если вы пользуетесь платной версией и хотите платную 2.7, напишите мне.

Тёма пишет: «Любая реклама — пропаганда». Для его мысли это окей, но на самом деле это не так. Люди часто путают рекламу и пропаганду, например, сравнивают ролики «заплати налоги и спи спокойно» с рекламой Айфона.

Какая разница? Капитальная.

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

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

Итак. Если у вас есть выбор, то перед вами реклама. Если нет — пропаганда.

Если улица называется существительным, ей не нужно слово улица:

• Охотный ряд, а не «улица Охотный Ряд»,
• Кузнецкий мост, а не «улица Кузнецкий Мост»,
• Большая Якиманка, а не «улица Большая Якиманка».

Если вам не режет слух «улица Арбат», то с вашим слухом что-то не так. Чтобы почувствовать, как это звучит, попробуйте добавить ещё родовых слов: дорога «Улица „Арбат“».

То же в других местах: Пикадилли — это просто Пикадилли, Унтер-ден-линден — это просто Унтер-ден-линден, Бродвей — это просто Бродвей, а Елисейские поля — это просто Елисейские поля.

Если улица называется прилагательным, то слово «улица» нужно ставить после названия:

• Гороховая улица, а не «улица Гороховая»,
• Садовая улица, а не «улица Садовая»,
• Большая Морская улица, а не «улица Большая Морская».

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

Проектировщики часто ставят в формах поле «Имя», а на вопрос «зачем?» отвечают: «Чтобы можно было обратиться к клиенту по имени».

Приятно же, когда к тебе обращаются по имени. Приходишь в кофе-бар, а тебе: «Привет, Илья» — и делают флетвайт, не спрашивая про сахар и сироп. Чувство, что другим на тебя не наплевать, согревает. Хочется ходить в такой кофе-бар. Обращение по имени помогает удержать клиентов.

Да нихрена! В Старбаксе тоже обращаются по имени. У тебя его спрашивают, переспрашивают, потом пишут на стаканчике, и потом кричат. Это такой стандарт. Всем плевать, как тебя зовут. Обращение по имени не влияет на удержание клиентов.

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

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

Одна из тупейших вещей — что бассейны и сауны в отелях обычно закрываются в восемь вечера, а то и раньше. Если я приехал в другой город, то днём-то уж всяко я не в отеле сижу. А когда прихожу к ночи уставший от дел и прогулок, как раз хочется погреться перед сном — но тут уж хрен мне, а не сауна.

См. также другие отельные тупизмы:

• одеяльный,
• полотенечный,
• розеточный.

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

Два цвета ни к чему:

Три кегля ни к чему:

Особенно плохо, когда разные кегли встречаются в одной строке:

Выделять цифры ни к чему. Нужно было просто вынести «Заправить» за скобку:

Два кегля, да ещё и едва отличаются — почти, но не совсем:

Клинический случай:

Простое правило: одно предложение — один стиль.

В анонсе беты 2.7 я обещал рассказать, как встраивать её в существующие сайты. Понадобится платная версия движка.

Задача: сделать, чтобы Эгея использовала стили, шапку и подвал от вашего сайта, а внутри была сама собой.

Вам нужно сделать свою тему оформления на базе «Встраиваемой». Зайдите в папку themes и сделайте копию папки embeddable. Назовите как-нибудь нормально.

1. Откройте файл theme-info.php и раскомментируйте в нём все строчки. Пролучится примерно так (это мой):

<?php return array (

  'display_name' => 'Минвайл',
  'max_image_width' => '1200',
  'meta_viewport' => 'width=device-width, initial-scale=1',
  'global_styles' => '../css/main.css',

); ?>

Самая важная тут с точки зрения нашей задачи — строчка global_styles. Тут нужно указать путь к стилям вашего сайта относительно папки Эгеи (а не этого файла).

2. Зайдите в настройку Эгеи и выберите свою тему.

3. В templates/layout.tmpl.php добавьте вёрстку шапки и подвала вашего сайта, то есть заверните содержимое блога в ту же обёртку, что на основном сайте.

Готово!

Всё будет выглядеть как настоящее, потому что к этой странице подцепляются те же стили, что и к другим страницам сайта. А внутренности Эгеи не разваливаются, потому что она также подцепляет ещё и собственные стили. Но делает это избирательно: она не подцепляет стили стандартных ХТМЛ-элементов и поля вокруг страницы. Поэтому эти части выглядят родными.

Если вам нужно перекрыть какие-то стили, используйте файл styles/overrides.css. Изначально он пустой.

Если вы используете систему сборки, то имеет смысл «запечь» стили «Встраиваемой» и ваши перекрытия в основной ЦСС-файл. Перенесите из папки вашей темы styles/main.css и styles/overrides.css куда-то в папку исходников стилей. Это нужно, чтобы Эгея перестала их подцеплять из папки темы. И заимпортируйте в общие стили сайта, например, с помощью СЦССа:

@import 'aegea-embeddable-styles/main';
@import 'aegea-embeddable-styles/override';

Так вы будете подключать один ЦСС-файл, а не три.

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

Но повелительное наклонение само по себе нейтрально. В интерфейсе электронного киоска:

Вставьте купюры

В обращении на «мы» уже чувствуется пассивная агрессия и совковое хамство. На турникетах московского метро:

Проходим слева

А в обращении в прошедшем времени слышится угроза физической расправой при непослушании. В тёмном дворе:

Мобилу сейчас же отдал!

Если даёте инструкцию, используйте повелительное наклонение. Оно вполне уместно, а если инструкция прошеная — то и вовсе дружелюбно.

Один из признаков хорошего владения языком — бессознательный выбор наиболее точного из синонимов.

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

Так же я не думаю, говоря по-английски, когда сказать fast, а когда — quick («быстрый»); когда comfortable, а когда — convenient («удобный»).

А вот чтобы выбрать наиболее подходящее из слов expensive и costly («дорогой»), мне нужно задуматься. Я понимаю разницу, но не чувствую её настолько, чтобы просто произносить нужное слово автоматически.

Есть такой элемент интерфейса — аккордеон. Это когда в вертикальном списке есть распахивающиеся секции:

Из работы студента школы дизайнеров

Этот элемент очень неудобен.

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

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

На телефоне, где экран маленький, с аккордеоном особенно тяжело. Недаром такого элемента нет среди стандартных элементов интерфейса Эпла и ни в одном их приложении.

Не используйте аккордеон.