В анонсе беты 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 («дорогой»), мне нужно задуматься. Я понимаю разницу, но не чувствую её настолько, чтобы просто произносить нужное слово автоматически.

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

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

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

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

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

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

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

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

Это надо прямыми руками нарисовать, конечно. Анальную пробку пик (точёных) подобрать более подходящей формы. Сделать бубновый презерватив узнаваемее, а шлёпалку треф сделать шлёпалкой по попе, а не по ковру. Сердечко вроде и так норм, но хочется превратить в какой-то объект, но при этом не шлёпалку вторую. Что там ещё бывает, наклейки для сосков? (Я просто не в курсе — предпочитаю, когда не заклеены.)

Кстати, словосочетание «анальная пробка» в этом блоге встречается впервые за 15 лет его существования, а вот соски уже встречались.

Антон Жиянов пишет в твиттере:

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

Дело в том, что «знание некоторых принципов легко возмещает незнание некоторых фактов».

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

Нельзя просто сказать «электрон одновременно находится в двух местах» и продолжать решать задачи как ни в чём не бывало. Именно потому, что в этом высказывании есть проблема с логикой, мы вообще вынуждены изучать происходящее явление более подробно и находить формальный аппарат для его описания. Если в мире квантовой физики высказывание «этот электрон находится одновременно в местах A и B» может быть верным, то в этом мире придётся придумать, чем эта ситуация отличается от ситуации «в местах A и B расположены два разных электрона». Так мы постепенно придём к более глубокому, чем обывательские, пониманию слов «электрон» и «место».

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

Пока не научишься логике, за квантовую физику браться рановато.

См. также:

• Логика — одна
• Что делать, если у вас логика не одна

Один из способов улучшить вёрстку — запрямоугольнить всё, что можно.

Вот случайная фотка с моего телефона — какая-то питерская табличка:

Почему она такая уродская? Потому что в ней всё выровнено по центру.

Представьте, что вам в комнате нужно поставить стол. Можно поставить к стенке, а можно и посередине, если это столовая. Если у вас есть один главный объект, его можно смело ставить посередине, и никто не спросит «почему посередине»:

Если кроме стола есть ещё диван, то поставить их оба посередине уже будет трудно. Может, только в очень большой комнате. В вёрстке с этим чуть проще из-за того, что текст обычно имеет форму полосок. Две полоски посередине — нормально:

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

Но всё, пора остановиться. На питерской табличке по центру стоит всё, и это ад:

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

Вы можете сказать: но ведь книжные титулы часто оформляют с центровкой. Да, в классическом стиле титулы порой делали весьма многоэтажными. Вот фотка с курса Игоря Штанга по вёрстке — смотрите как интересно слева:

Или вот книжка из инстаграма «Носков поэта»:

Так можно, но это сложно. Если у вас нет опыта, не используйте выравнивание по центру.

Выравнивайте всё по левому краю:

Так форма текста уже начинает хоть чуть-чуть дружить с форматом.

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

Теперь у нас два прямоугольника.

Слова «туристическая фирма» сейчас кричат громче всех. Прибьём их к своему логотипу. Тогда можно будет чуток увеличить поля:

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

Заметьте, что прямоугольники видны даже несмотря на то, что подчёркнуты только левые углы — форма самой таблички помогает нам достроить прямоугольники в голове. В результате получается такая конструкция:

Это не шедевр вёрстки, просто с прямоугольниками проще сделать аккуратно.

А ещё можно так:

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

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

Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:

Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:

Или кладёт контрастную плашку:

Или делает полупрозрачную плашку, но размывает фотографию под ней:

Это всё костыли: в результате хуже видно и фотку, и текст.

Ставить текст на фотографию можно, когда она специально сделана или подобрана для этого. То есть на ней есть чистые места — голубое небо, тёмная ночь или другой равномерный фон:

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

Здесь нормально читается всё, что выше горизонта в зоне расфокуса:

Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:

Правило: если фотография не подходит для размещения текста на ней, то размещать текст на ней не стоит. Поставьте текст под фотографией. Следствие: если вы не контролируете фотографию (скажем, её загружают пользователи вашего сайта), то ставить на ней текст — плохое решение.

Читайте также секрет дизайнерских правил.

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

Эгея — это движок блога. То есть программа, которая работает на сайте компании и предоставляет ей инструменты для ведения блога, а посетителям показывает заметки и даёт писать комментарии (если это нужно).

Сделайте блог на Эгее частью сайта своей компании.

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

После того, как Эгею установишь, пользователю не нужно ничего знать про серверы, базы данных и ХТМЛ. Нет даже никакой «админки» — всё управление происходит прямо на сайте. Просто тот, кому можно, видит иконки «плюсик» (добавить заметку), «карандашик» (отредактировать заметку) и ещё несколько.

Сейчас, когда я пишу эту заметку, у меня верх страницы выглядит так:

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

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

К разделу блога легко прикрутить аналитику — просто вставляете код в настройке:

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

Напишите мне, если хотите начать пользоваться, но не знаете, как начать.

Расскажите компаниям об Эгее, а мне — о компаниях, которым она, на ваш взгляд, будет полезна.

У некоторых людей есть личная и рабочая почта. Ты им пишешь письмо, а они говорят: «Что-то мне не приходит. Может, ты на рабочую скинул?» Может и на рабочую, чувак. Сходи на работу да проверь. Вот мне делать больше нехрен, как в сложностях твоей жизни разбираться.

Но многие так живут и даже не замечают всего абсурда этой ситуации.