Виталий Филатов: заметки с тегом верстка

Делаем сноски на HTML регулярками

Виталий Филатов — Fri, 18 Jul 2025 23:14:09 +0500

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

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

Было бы лучше, если бы примечание вплывало при наведении на знак сноски, как в Обсидиане, но Эгея не поддерживает сноски вообще. Чтобы не лезть в код движка, я делаю их на чистом HTML, без JS и прочих хитростей

Текст статьи жил в Обсидиане, поэтому ссылки и сноски оформлены в маркдауне:

Текст со сноской[^1]
...
[^1]: Текст примечания на отдельной строке

Эти штуки в скобочках предстояло превратить в HTML:

Текст со сноской <sup><a href="all/ai-talks/#t1" name="n1">[1]</a></sup>
...
<a name="t1"></a>
1. Текст примечания <a href="all/ai-talks/#n1">↩︎</a>

Клик на знак сноски прокручивает страницу до тега <А> с именем «t1», а клик по стрелке — на тег <А> с именем «n1». Из-за особенностей движка в адрес ссылки «href=» приходится добавлять часть адреса страницы. Ссылка-якорь с именем примечания стоит на отдельной строке, чтобы окно браузера прокручивалось ровно до начала абзаца.

Чтобы пройтись по всему тексту и поменять маркдаун на HTML, нужно найти повторяющиеся фрагменты и написать на их основе шаблоны поиска и замены. Фрагменты у нас такие:

[^n] — знак сноски в сплошном тексте
[^n]: Какой-то текст — примечание на отдельной строке

Начнём со строки поиска знака сноски.

n — порядковый номер примечания, всего их десять. Значит, нам нужна регулярка, которая будет искать какое-то число от 1 до 10 в квадратных скобках c ^ в любом месте текста. Получится так:

\[\^(\d{1,2})\](?!:)

Квадратные скобки и ^ — служебные символы, поэтому добавляем перед ними обратный слеш. А перед d — чтобы искать не саму букву, а символ любой цифры. В фигурных скобках указываем, что ищем 1 или 2 цифры. Круглые скобки сохраняют фрагмент строки в переменную — скобочную группу. В конце идёт указание, что строка не должна заканчиваться двоеточием. Это не совсем корректно, ведь знак сноски может стоять где угодно. Но для примера нужна регулярка попроще, так что просто убедимся, что в тексте такого нет.

Теперь напишем строку замены:

&thinsp;<sup><a href="all/ai-talks/#t$1" name="n$1">[$1]</a></sup>

Перед знаком ставим   — HTML-код тонкого пробела, чтобы знак сноски не слеплялся со словом слева. $1 — переменная, в которой будет число из знака сноски, от 1 до 10. Единица после $ означает порядковый номер скобочной группы. В этой регулярке она одна, но для обработки примечаний нам потребуются уже две.

Теперь скопируем текст статьи из Обсидиана в Sublime text, откроем режим поиска и замены (Ctrl + H), включим регулярные выражения (Alt + R) и выполним первый набор регулярок.

Найденные регуляркой фрагменты выделены рамкой

Теперь сами примечания. Найдём их в тексте:

\[\^(\d{1,2})\]: (.+?)\n

Первую часть вы уже видели, но теперь мы не исключаем двоеточие. Потом идёт любой текст. Точка означает «любой символ, кроме переноса строки», а «+?» говорит брать символы до первого символа правее. В нашем случае это конец строки \n.

Напишем строку замены:

<a name="t$1"></a>\n$1. $2&nbsp;<a href="all/ai-talks/#n$1">↩︎</a>\n\n

Как видите, порядковый номер сноски $1 удачно стал частью ссылок и порядковым номером примечания, а текст примечания из скобочной группы $2 вставится между номером с точкой и ссылкой на знак сноски.   — знак неразрывного пробела, чтобы стрелка не повисала на следующей строке.

Вставим строки в редактор и выполним замену:

Все сноски превратились в HTML

Результат можно посмотреть в коде статьи.

Где и как учиться регуляркам

Регулярки в JavaScript — приятный сайт на русском

Regular-Expressions.info — сайт про регулярки на английском

RegExr — гибкий отладчик регулярок. Можно устанавливать разные параметры поиска (флаги), смотреть, что попадает в скобочные группы, и тестировать строку замены

Инструкция из одной картинки

Виталий Филатов — Sun, 24 Jul 2022 01:32:59 +0500

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

Сначала разберём, что на плакате не так.

Дизайнер не учёл принципы восприятия и получил формальный ребус

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

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

Сделаем элегантнее: просто покажем как правильно. Пусть человечек кидает мусор в ведро.

Человечек выбирает ведро, делайте как он

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

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

Пара слов о внимании

Чиновники не знают когнитивной психологии и дизайна, поэтому решают задачу формально: привлекают внимание к сообщению об объекте, а не к объекту. Например, освещают знак пешеходного перехода вместо людей на дороге.

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

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

Шрифт Комик Санс лучше сочетается с картинкой и непринуждённым тоном

Выводы такие:

Картинка в инструкции должна показывать нужный сценарий и не требовать пояснений.
Мозг предпочитает картинки: сначала силуэты и цвет, потом буквы.
Без разницы, насколько крупно написано на рычаге выключения реактора, что он важный. Он должен выглядеть рычагом, гасящим звёзды.

Сложный способ нарисовать лабиринт

Виталий Филатов — Fri, 24 Jun 2022 23:52:24 +0500

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

В тексте встречаются вводные Итак, Следовательно и Очевидно. Вы предупреждены.

Контекст

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

По замыслу лабиринты иллюстрируют мысль, что сложное от трудного отличается обязательным поиском пути к результату

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

Задача

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

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

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

Задачу стоит превратить в сложную: вместо непосредственного рисования придумать способ быстро нарисовать два лабиринта в одном стиле.

Поиски и решение

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

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

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

Выделение рамкой требует меньшей точности, чем рисование

Добавим к методу возможности инструмента. В Фигме стенки ячейки можно объединить в группу, загнать нужное количество ячеек в Auto Layout, получить сетку, а потом всё разгруппировать. Ещё можно закомпонентить лабиринт со всеми стенками и работать с его копиями.

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

Абзац с отступом и иконкой в гугл-доках

Виталий Филатов — Sun, 18 Jul 2021 18:39:19 +0500

Иногда в текст нужно добавить примечание с отступом и иконкой. Это проще всего сделать списком с маркером-эмодзи:

Примечание в инструкции к Драйзеру

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

Кликаем правой клавишей по маркеру списка и выбираем «Другие маркеры».

В окне «Вставка специальных символов» ищем эмодзи по категориям или в строке поиска по ключевым словам в названии. Например, bulb (лампочка). Кликаем по нужному значку, он становится маркером списка.

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

Расстояния до основного текста настраиваются в «Формат → Межстрочный интервал → Настройка интервалов». Посмотрите, какие интервалы у обычного абзаца и добавьте примечанию 2—3 пункта сверху и снизу.

Для справки ещё два способа, но не таких удобных.

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

Точные отступы абзацев и строк настраиваются в «Формат → Выравнивание и отступы», но если вы потом замените значок, всё может немного съехать.

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

Учебный проект: интерактивные макеты (часть 4/6)

Виталий Филатов — Fri, 09 Jul 2021 19:04:53 +0500

Четвёртая статья из цикла о моём UX-дипломе в Нетологии. Рассказываю о макетах: с чего начал, как собирал и почему они так выглядят.

Если не читали предыдущие части, начните с первой. Там о курсах Нетологии, учебе и дипломном проекте. Остальные ссылки внизу.

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

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

Принципиальные макеты

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

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

Регистрация и вход → Главная и разделы → Экстренный звонок и вызов мастера → Чат с оператором

Исходники Storyframes в Миро

Макеты в Фигме

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

Для учебного проекта я предположил, что целевая аудитория «Яркого» в массе своей айтишники и темно-серая гамма будет напоминать им среды разработки и Photoshop с DaVinci Resolve. А ещё тёмный фон помогал мне сберечь глаза, поскольку дипломом я занимался по вечерам после работы.

Главный экран приложения

После цвета я выбрал шрифты. Для основного текста взял системный шрифт iOS San Francisco Pro Text, а для кнопок — San Francisco Pro Display. Системные шрифты отлично выглядят и по-хорошему безлики. Для цифровых полей, напротив, взял IBM Plex Mono, чтобы его выразительная форма привлекала внимание к цифрам. Иконки — из бесплатного набора Font Awesome.

Основные шрифтовые стили

Поскольку я всё же писатель, а не дизайнер, я ограничился макетами для Айфона 8. Его экран удачно масштабировался на мой SE. Я поставил на телефон Figma Mirror и рисовал, регулярно проверяя интерфейс в реальном размере.

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

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

Макеты с переходами по событиям. От запуска и онбординга до звонка диспетчеру

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

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

Главный ⇄ Вызов мастера ⇄ Описание проблемы / Подтверждение

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

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

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

Попробуйте «зарегистрироваться», увидите онбординг на главном экране :3

Немного сложностей

Я так гладко рассказываю, потому что прототип давно готов, а диплом сдан. На деле макеты дались тяжелее всего :3

Первый сложный вопрос — сетка. У меня был только Айфон SE, на мокапах он выглядел кирпичом, поэтому я выбрал Айфон 8.

Ширина экрана у SE — 320 пикселей, можно использовать сетку с шагом в 8 пикселей. Получается 40 ячеек-микромодулей, которые бьются на удобное количество столбцов и строк. Можно выровнять шрифт по сетке и навести прочий pixel perfect.

У восьмёрки ширина 375 пикселей. Ни 10, ни 8 пикселей не подходят: базовая сетка обрывается на половине ячейки, колонка с контентом либо слишком узкая, либо с нечётным количеством столбцов, либо ещё что. Приходится добавлять отступы по бокам и терять ценное место.

Путём проб и ошибок подобрал сетку с базовой ячейкой в 5 пикселей, а строки и столбцы сделал с шириной и отступом по 15 пикселей. Строк на экране уместилось нечетное число, но главное — влезло 12 столбцов.

Получилось в меру ровно:

Сетка макета. Всё кратно 5 пикселям

Вторая сложность — новые фичи Фигмы. Дело было в феврале 2021, Фигма обновила библиотеки компонент, настройки Constraints и добавила Auto layout. В роликах на Ютубе всё выглядело здорово: блоки сами выравнивались, можно было сделать типовой компонент, а потом его заполнять текстом и ничего не ломалось. Но с выравниванием я провозился дольше, чем со всем остальным.

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

С экраном звонка оказалась такая же история. Пришлось позвонить и сделать скриншот, а нужное дописать поверх.

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

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

Ссылки

Дипломная работа в гугл-документах

Макеты в Фигме, если хотите посмотреть на бардак в слоях

Все статьи об учебном проекте:

Задачи и результат
Потребности пользователей
Основы ToV
Интерактивные макеты — вы находитесь здесь
UX-исследование
Как ставить задачи UX-писателю

Рерайт: как позвонить в квартиру

Виталий Филатов — Mon, 31 Aug 2020 06:11:31 +0500

Разбираемся в визуальном контрасте, иерархии и сценариях на примере короткой инструкции к домофону.

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

В комплексе три здания с общим адресом и нумерацией квартир. Чтобы позвонить в квартиру с улицы, нужно указать подъезд через #. Остальные домофоны стоят в подъездах.

Определять подъезд по номеру квартиры просто, с этим справится даже детский электронный конструктор. Конкретно этот домофон просто не предусматривает сквозной нумерации квартир в отдельных зданиях, но умеет перенаправлять вызов, как офисная АТС.

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

Собираем проблемы

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

Чтобы проверить структуру, достаточно посмотреть на текст издалека или без очков. Если всё выглядит монотонно, структура плохая.

При беглом взгляде табличка похожа на какое-то объявление администрации

Непонятно, для кого эта инструкция. В заголовке обращаются к жителям, в тексте объясняют, как позвонить консьержу и в квартиру. Есть гипотеза, что после канцелярского обращения «Уважаемые…» включится булщит-фильтр и читатель решит не тратить время.

Таблички часто начинают с крупных «Внимание!» и «Уважаемые…», потому что это работает в устной речи. В письменной речи вниманием управляют заголовки, поэтому лучше писать крупно саму суть: Не паркуйтесь у ворот, скорая не сможет подъехать.

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

Изучаем сценарии

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

Позвонить в квартиру
Вызвать консьержа
Открыть дверь ключом

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

Звонок в квартиру — самый сложный сценарий. Нужно объяснить порядок набора и показать таблицу с делением квартир по подъездам и секциям:

Секции А, Б и В — это строительная маркировка, 2 — вторая очередь строительства. Жители привыкли к номерам секций, поэтому их стоит оставить. Возможно, кто-то так и говорит гостям: 501 квартира в 2В.

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

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

Пишем текст и рисуем

Делим текст на сценарии, выделяем заголовки, собираем номера квартир и подъезды в табличку, рисуем иллюстрации.

Получается так:

Стало и было

Процесс по шагам в Фигмe

Обсуждение в ВК

Как вас подведут картинки из гугл-доков

Виталий Филатов — Mon, 22 Jun 2020 03:04:01 +0500

Никогда не вставляйте в блог, рассылку или базу знаний текст с картинками из гугл-дока. Эти картинки вставляются только по URL, и если исходный документ удалить, картинки тоже пропадут. Сохраняйте исходники и загружайте изображения отдельно. Восстановить их из удалённого документа не получится.

UPD. В письма тоже не вставляйте.

Для начала три истории из моей практики.

Как бывает: в компании всё пишут в гугл-доках. Маркетолог готовит статью с фотографиями, публикует её в корпоративном блоге, через полгода увольняется, а ещё через год кто-то заходит в статью и видит битые ссылки. Фотки приходится искать в архиве, заново обрабатывать и заливать.

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

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

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

Гугл-док это веб-страница, которая хранит текст с оформлением и адреса картинок. Файлы картинок хранятся где-то в недрах Гугла и напрямую недоступны: их нельзя скопировать и вставить, как в Ворде.

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

Результат вставки в Мейлчимп, блог на Ghost и самописный скрипт для чистки гугл-доков. В коде выделен адрес картинки, ведущий куда-то в Гугл

Картинки остаются на месте только пока документ жив. Но если автор удалит документ за ненадобностью, его отключат от корпоративного домена Гугл Сьют или дата-центр Гугла заденет хвостом комета, документ исчезнет, а вместе с ним и картинки. Восстановить их будет невозможно.

При отключении пользователя Гугл Сьют адреса его документов протухают, даже если админ назначит документам нового владельца.

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

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

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

Изображение и его полный адрес на сервере

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

Соблюдайте эти простые советы, и ваш редактор не будет вопить, из-за того, что в иллюстрированной инструкции трёхлетней давности вдруг пропали скриншоты.

Комментарии в ВК

Хтонического ворона в начале статьи нарисовала Ulv Vind. Его зовут Эдгар.

Шаблон инвойса в гугл-таблицах

Виталий Филатов — Thu, 19 Sep 2019 03:32:06 +0500

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

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

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

Исходный шаблон на печати и в сетке:

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

Для начала подберём шрифт, продумаем набор колонок и добавим логотип.

По брендбуку самый близкий шрифт — Verdana. Он есть у всех, у него красивый рисунок и нормальная кириллица. В оригинале был Arial 8pt, Verdana сделаем 9pt, чтоб было крупнее и легче читалось.

Для красоты и порядка шаблону нужно подобие модульной сетки. Оставим по краям пустые строки и столбцы для полей, накидаем таблицу с перечнем и добавим столбцов в середине для выравнивания. Объединять ячейки проще, чем вставлять новые, поэтому пусть будут лишние.

Объединяем ячейки в левом углу и вставляем логотип в режиме заполнения. Изображение автоматически займёт всё доступное пространство и нам не придётся маяться с его размерами при изменении ширины столбцов или строк.

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

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

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

Оригинал и промежуточные варианты. Сложная строка итогов всё ещё на месте

Побеждает вариант в одну колонку без подчёркиваний и заливок редактируемых ячеек.

Совет. Чтобы не окрашивать сетку в белый цвет, отключите её отображение в диалоге настройки печати. Снимите галочку в пункте Форматирование → Показать линии сетки и перейдите на следующий экран. Документ запомнит настройки.

Результат и оригинал:

Остаётся проблема с датой документа. Если указывать дату в американском формате месяц-день-год, до 13 числа возможна путаница. Например, 5.10.2019 и 10-5-2019. Чтобы не путать, даты можно писать через слеш в американском и международном английском форматах:

10-5-2019 / 5-10-2019.

Не так элегантно, но логика сохраняется.

Внутренняя рассылка Девхаба

Виталий Филатов — Fri, 29 Jun 2018 00:29:06 +0500

Я работаю писателем в Девхабе. Вычитываю письма, пишу статьи и документацию, помогаю с вакансиями и веду еженедельную рассылку для команды. Расскажу, зачем рассылка нужна, как устроена, как мы собираем материал и готовим выпуск. В конце пара слов, как сделать свою.

Мы запустили рассылку в ноябре 2017. С тех пор каждый понедельник пишем о новостях компании, напоминаем регламенты, поздравляем именинников, куражимся, шлем котиков и советы о разном. К этому моменту накопилось 34 выпуска. Есть о чем рассказать.

⚠ Рассылка — внутренний документ и попадает под действие NDA. Поэтому выпуск целиком не покажу, только зацензуренные фрагменты.

Задачи рассылки

Девхаберы работают удаленно и живут в пяти часовых поясах от Сибири до Португалии. Менеджеры и разработчики плотно общаются в Слаке, но редко собираются все вместе. Чтобы сотрудники были в курсе происходящего и не теряли связь с коллективом, нужно регулярно сообщать о новостях и событиях в жизни команды. Рассылка помогает делать это централизованно и красиво.

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

Как устроена рассылка

Рассылка проста как гвоздь. Каждый понедельник мы шлем Мейлчимпом письмо с анонсами, объявлениями и новостями за прошлую неделю. Вышедший выпуск копируем в командный Confluence, чтобы работал поиск.

Рассылка задумывалась как легкое чтиво на 6—7 минут утром понедельника, поэтому у выпуска максимально простая структура: от самого важного, что необходимо и полезно знать каждому, до малозначимого.

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

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

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

Крупные материалы, которые трудно сделать за неделю, готовим между выпусками. Это не отвлекает от основной работы, можно спокойно допилить. Например, такой лонгрид с фотками и картами.

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

С апреля решили писать прямой речью от лица редактора, чтобы рассылка стала более личной и несла персональное мнение.

Средний объем выпуска — 800 слов. Стараемся максимально сокращать, чтобы легко читалось за 6 минут.

За объёмом не гонимся. Если новостей мало, выпуск выходит коротким, с парой-тройкой дополнительных забавных фактов и картинок.

Когда материал нельзя разбить на два выпуска, полную версию публикуем в корпоративной базе знаний и даём ссылку. Например, сотрудники стали охотнее рассказывать о своих увлечениях и путешествиях. Материал интересный и полезный, но бывает объемным.

Жизненный цикл выпуска

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

У выпуска двойная нумерация: порядковый номер и номер недели в году. Например, 24 / 2018-16. Это оверкилл, но удобно для хранения картинок в общей облачной папке. Номер год-неделя входит в имя файла, такой разрядности хватит на всё обозримое будущее цивилизации.

Файлы наглядно сортируются в облачном хранилище. Есть шанс что-то найти

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

Параллельно мониторю кучу разных каналов в Телеграме и RSS, читаю командные чаты в Слаке. Важное и интересное добавляю в Избранное, пересылаю себе или вставляю ссылку в черновик. Между делом запрашиваю подробности к новостям, дописываю крупные материалы и занимаюсь основными задачами.

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

Вечером воскресенья дописываю выпуск по комментариям, вычитываю, прогоняю через Орфограммку, доделываю картинки, еще раз прохожу по чек-листу, верстаю и заряжаю выпуск в Мейлчимп.

Утром понедельника копирую выпуск в архив, кидаю ссылку в публичный канал Слака и начинаю собирать материал на новый выпуск. Если пишут про ошибки и опечатки, радуюсь, что кто-то всё это читает, и указываю ошибки в конце выпуска. Это помогает их разбирать и запоминать.

Иногда хаотическая природа мира даёт о себе знать, расписание съезжает и приходится превозмогать. Например, перед отправкой приходят критично важные новости. Участники согласования оказываются на краю мира без связи и присылают комментарии за несколько часов до выхода выпуска. Я сам оказываюсь черте где или на меня нападает жесткая пятничная прокрастинация и выпуск уходит на согласование утром воскресенья.

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

Вёрстка и публикация

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

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

Готовый текст копирую в окно визуального редактора Мейлчимпа, сбрасываю форматирование, вручную расставляю заголовки и оформление, прогоняю через Типограф, заливаю и расставляю картинки. После этого отправляю тестовое письмо, проверяю его по чек-листу, правлю и заряжаю на 10:00 AM по Москве.

Когда Мейлчимп всё благополучно разошлет, останется перенести выпуск в архив Confluence, поправить съехавшую верстку, залить картинки в облако и вставить их в текст.

Копировать картинки в Confluence нельзя, он от этого пухнет и глючит. А оставлять картинки из гугл-дока рискованно: они хранятся где-то в недрах Гугла, пока жив документ. Если документ удалить, картинки пропадут. Не вставляйте картинки из гугл-дока.

Задача по вышедшему выпуску закрывается и заводится следующая.

Благодарности

Рассылка выходит уже 8 месяцев. За это время я съездил в отпуск, пару раз был на больничном, выгорал и восстанавливался, но рассылка не прерывалась. Это было бы невозможно без помощи замечательной команды. Спасибо вам за поддержку и терпение :3

Краткий алгоритм запуска

Статья получилась длинной, поэтому кратенько. Сделать нужно вот что:

Решите, для чего вам нужна внутренняя рассылка, когда она будет выходить, кому и о чем рассказывать.
Заложите бюджет на первые два-три месяца.
Договоритесь, кто будет вычитывать выпуск и давать комментарии по важным новостям.
Найдите редактора. Нужен усидчивый, въедливый и невыгорающий.
Соберите источники новостей и событий: что, когда и у кого можно узнать.
Подберите инструменты и организуйте хранение материалов.
Помоги редактору понять ЦА.
Чаще ссылайтесь в выпусках на базу знаний, соцсети компании, посты в блогах членов команды.
Собирайте любую обратную связь.
Экспериментируйте и боритесь с монотонностью.

Подробную версию шагов читайте в следующем посте.

Будут вопросы, комментарии или захотите поговорить по поводу — пишите на v-fil@ya.ru или заходите на страницу Вконтакта.

Редизайн блога на Эгее

Виталий Филатов — Tue, 28 Feb 2017 03:42:38 +0500

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

О движке

Мой блог работает на Эгее. Это бесплатный, быстрый и аскетичный движок. У него приятный редактор записей, поддиалект разметки markdown и свой типограф, не изменяющий текст.

Эгея — движок на любителя. Она слабо документирована, технической поддержки нет. Случаются проблемы с установкой обновлений. Чтобы поменять внешний вид или добавить своих блоков на страницу, придётся лезть в код. Выбирайте её, если готовы допиливать CSS и PHP.

Антон Жиянов о других движках.

У меня версия 2.4 не обновлялась до 2.5, отваливалась база данных и стили. Я завел чистый блог и вручную перенес в него старую базу данных. Чтобы прикрутить новое оформление, переписал стили и поправил пару PHP-модулей.

Техническую часть не описываю. Если вам интересны подробности, напишите мне.

Что было не так

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

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

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

Шрифт Эгеи — Pt Sans. Это универсальный шрифт московской студии Паратайп. Без засечек, с открытым рисунком и прекрасной кириллицей. Он подходит для заголовков, основного текста и подписей, но лишен запоминающегося характера.

Times New Roman напоминает газету и школьный реферат, Courier — печатную машинку и сайты конца 90-х. А Pt Sans — просто добротный шрифт, который легко читать. Мне же хотелось, чтобы блог напоминал хорошую книгу или научно-популярный журнал. Поэтому работу над образом я начал с поиска новых шрифтов.

Подбор шрифтов

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

В блоге хватит двух шрифтов: для основного текста и для заголовков, подписей, цитат. Шрифты нужны одновременно разные, чтобы был контраст, и похожие по рисунку, чтобы не возникало разнобоя. Два сочетающихся шрифта называются шрифтовой парой.

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

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

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

Выбирали из очень ограниченного набора. По критериям подошли три шрифта с засечками и два без.

Основным выбрали шрифт с засечками, похожий на замечательную Georgia, но не такой популярный. Вариантов нашлось три: Merriweather, Noto и Lora.

Размер и интерлиньяж указаны через косую черту.

От Merriweather отказались из-за рисунка символа, толщины штрихов и минускульных цифр. У минускул нижние элементы свисают со строки. Это наследие старых книжных шрифтов и выглядит архаично.

Noto и Lora похожи по рисунку и ближе к Georgia по настроению. Noto поплотнее, хорошо смотрится на экране. Лично мне Lora понравилась больше, хотя у неё чудаковатые кавычки-ёлочки. Выбрали её.

Для заголовков и подписей рассматривали два варианта: Roboto и Open Sans.

Roboto, Open Sans и сравнение рисунка букв

Roboto — шрифт операционной системы Android. Он универсален, безлик и прочно ассоциируется с телефонами Самсунг. У Roboto хорошая кириллица, но в Виндоус в сверхнасыщенном начертании он отображался с ошибками. Выбрали Open Sans.

Выбор пропорций

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

Без системы пропорций в текстовом наборе будет много случайного.

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

В типографике высота строчной буквы называется x-height.

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

Я веду блог в среднем темпе, абзацами по три-четыре предложения. Оптимальная ёмкость строки — 75 символов. Такой текст читается легко, но неторопливо.

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

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

Я выбрал размер в 20 пикселей. В этом размере у Lora высота строчной буквы — 10 пикселей. Ширина колонки при 72 символах в строке — 750 пикселей. Настраиваем в Фотошопе сетку, рисуем колонку и собираем набор элементов.

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

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

При вёрстке соблюдаем правило близости: чтобы объекты воспринимались вместе, располагаем их рядом. Абзац ближе к своему заголовку, чем к следующему, отступы блоков меньше расстояния до границ экрана.

Готовый набор стилей. В макете с разрешением 72 dpi 1 пункт = 1 пикселю.

У Open Sans буквы чуть уже и крупнее. Чтобы шрифты в основном наборе смотрелись органично и не сбивали ритм, уменьшаем размер текста цитаты на пиксель и увеличиваем разрядку — расстояние между буквами в слове. Заголовки делаем максимально контрастными.

Lora 60/70 и Open Sans 60/70 без разрядки и 56/70 с разрядкой 0,023 em.

Полученный набор стилей переносим в CSS. Подкладываем сетку из макета, открываем отладчик и правим. Затем меняем разрешение экрана и повторяем.

Чтобы перевести разрядку из единиц Фотошопа в em, делим на 1000.
23 = 0,023 em. Другие размеры лучше указывать в пикселях, браузеры непредсказуемо округляют и набор плывёт.

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

Алгоритм

Читаем о базовых гигиенических требованиях, разбираемся в правиле близости и методике подбора шрифтовых пар.
Ищем визуальный стиль. Смотрим похожие по тематике блоги, которые приятно читать. Скриним, накладываем, сравниваем.
Подбираем гармоничную шрифтовую пару. Один для заголовков и подписей, другой — для основного текста. Скачиваем и устанавливаем все шрифты на компьютер.
Выбираем базовую единицу для системы пропорций. Удобно отталкиваться от размера основного текста.
Рисуем сетку с шагом в базовую единицу. Её размер в пикселях или пунктах не важен, нужны только соотношения величин. На Маке рисуем в Скетче, на Виндоусе — в Индизайне или Фотошопе. В Фотошопе удобнее двигать попиксельно.
Сводим все элементы к конечному числу стилей. Оптимально 5—7.
Рисуем набор стилей, подбираем размеры, отступы, межстрочный интервал.
Высчитываем размер базовой единицы, переводим пропорции в конечные значения в пикселях или пунктах. Пиксели точнее.
Переносим в CSS. Подкладываем сетку и добиваемся сходства с макетом.
Тестируем, правим, убираем сетку и публикуем.

Чтение по теме

Гигиенические требования к вёрстке в советах Бюро Горбунова.

Как выбрать шрифт объясняет арт-директор «Медузы» Сергей Сурганов. Очень упрощенно, чтобы начать ориентироваться в вопросе.

О шрифтовых парах в Школе Редимага.

Why website body text should be bigger, and ways to optimize it — почему размер шрифта нужно увеличивать. Доступно и убедительно на простом английском.

Типографика и вёрстка — книга Горбунова по платной подписке. Раз прочесть стоит.

Рерайт №5. Главная страница Орфограммки

Виталий Филатов — Mon, 20 Jun 2016 12:28:15 +0500

Орфограммка — сервис проверки правописания и стилистики. Находит ошибки, которые пропускает Ворд и Гугл-док.

Вот её главная страница в 2016 году:

В 2019 они переделали главную, и большая часть критики к странице уже не применима :3

Формально все на месте. Заголовок объясняет что это, картинка показывает, текст раскрывает подробности, а кнопки предлагают дальнейшие действия.

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

Кнопки

Кнопки стоят в ряд и не подсказывают, какое действие главное: поддержать, посмотреть или проверить.

Действия кнопок разнородны. Если «посмотреть пример» и «проверить» относятся к работе с текстом, то «поддержать проект» — нет.

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

«Поддержать» перенесем в раздел «О нас». Орфограммка платная и давно вышла из возраста стартапа. Если проекту нужна поддержка, расскажем об этом подробнее и в уместном контексте.

Кнопку «Посмотреть пример» тоже уберем. Лучше сделать ссылку на страницу с примерами или поставить вместо картинки видео с работой в программе.

Текст

Почитаем внимательнее.

Орфограммка — это интеллектуальный веб-сервис проверки орфографии, грамматики, пунктуации и стилистики. Всего за несколько секунд она проверит ваш текст на ошибки, подробно расскажет об их происхождении и предложит варианты исправления.
Также она проверяет курсовые и дипломные работы на соответствие требованиям ГОСТа.
Специальное предложение для пользователей сервиса Дневник.ру: скорее прочитать
А ещё у Орфограммки появилась партнёрская программа!

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

Орфограммка проверяет орфографию, грамматику, пунктуацию и стилистику.

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

Орфограммка — сервис, который помогает писать грамотно и красиво. Проверяет орфографию, грамматику, пунктуацию и стилистику.

Не идеально, но жизнь в этом есть. Идем дальше.

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

На картинке 2 минуты, а в тексте несколько секунд. Про две минуты писать не хочется, уберем из текста упоминание времени вообще. Процесс проверки раскроем подробнее:

Выделяет ошибки, объясняет их суть и предлагает варианты исправления.

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

Орфограммка находит опечатки, проверяет имена собственные, названия теорем, открытий и алгоритмов. Проверяет курсовые и дипломные работы на соответствие ГОСТу.

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

Специальное предложение для пользователей сервиса Дневник.ру: скорее прочитать
А ещё у Орфограммки появилась партнёрская программа!

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

Специальное предложение для пользователей Дневника.ру
Партнёрская программа для организаций и предпринимателей.

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

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

Получилось жестко — бам-бам-бам, одни глаголы, — но теперь мы знаем, что Орфограммка умеет.

Картинка

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

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

Дзенская притча о кувшине воды
Новому монастырю требовался наставник. Чтобы выявить самого способного, настоятель собрал монахов, поставил перед ними кувшин с водой и спросил:
— Скажите, что это такое, не называя это кувшином.
Монахи принялись перебирать: чем нельзя назвать кувшин, на что он похож и на что не похож. Пока они гадали, повар молча пнул кувшин и разлил воду.

Наглядная демонстрация хорошо работает.

Вечный календарь Ильи Бирмана, хитрый редактор для кодеров Sublime Text и страница Главреда.

Чтобы показать Орфограммку в работе, пнём кувшин: скормим ей текст с ошибками и покажем, как она его обработает.

Результат

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

Стало и было:

Картинка в натуральную величину.

Чтение по теме

Как ставить ссылки — Максим Ильяхов о гигиене ссылок и привлечении внимания.

Лучший способ убедить читателя — дать ему убедиться самому. Совет Бюро.

Убеждающий веб-дизайн — статья на Хабре.

Плоть и кости дзен: опрокинутый кувшин — оригинальный текст притчи. Выше приведена адаптированная версия.

Как настроить оформление текста в Blogger

Виталий Филатов — Sun, 14 Feb 2016 16:02:17 +0500

Я добрался до вёрстки статей в корпоративном блоге, настроил интерлиньяж и делюсь опытом.

Витторе Карпаччо «Святой Георгий и Дракон», 16 век. Дракон символизирует хаос и уродство корпоративной безблагодатности, а святой Георгий — систему, состоящую из взаимосвязанных компонент: мужика, копья, доспехов и лошади. Дама, взирающая на поединок, символизирует автора статей — юриста Алину. Алина, привет!

Каждый четверг в блоге FreshDoc выходит статья с советами юриста.

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

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

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

Проблема

Блог размещен на веб-сервисе Blogger. Статьи пишут и редактируют в Гугл-доке, а потом вставляют в режиме визуального редактирования. Из-за этого вид статей непредсказуемо разнится:

Визуальный редактор Bloggera примитивен, в нем нельзя создать единый набор стилей. Изменить криво оформленный текст в редакторе не выйдет. Поплывут отступы, изменится расстояние между строками и абзацами. Точно задавать отступы редактор не даёт, это доступно только в режиме правки HTML. Чтобы привести все статьи к единому виду без трудоёмкой правки кода, придётся загнать их в Ворд, отформатировать и скопировать назад. А если позднее дизайн блога изменится, придётся переделывать.

Решение

Чтобы победить хаос и уродство, мало придумать метод. Нужна система.

Текст в блоге размечен HTML-тегами, делящими текст на заголовки, абзацы и списки. Внешний вид этих элементов определяется специальными правилами — таблицами стилей CSS.

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

Таблицу стилей необязательно писать с нуля. Можно оформить текст в Ворде или Гугл-доке, скопировать в Blogger и посмотреть, какими правилами задано оформление в режиме правки HTML.

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

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

Технология

Текст статьи редактируем в специальном шаблоне Ворда со стилями, похожими на стили в блоге. Это помогает понять, где ставить ссылки, чтобы они не разрывались переносом строки, и следить за формой правого края абзаца. Хотя текст выровнен влево, правый край не должен выглядеть рваным и хаотичным (на картинке именно так).

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

Готовый текст преобразовываем в «чистый HTML». Сохраняем разметку абзацев и гиперссылок, но убираем встроенные в теги стили. После этого текст слушается CSS.

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

Копируем текст в Блокнот и размечаем заголовки тегами <H*>. В статье максимум три уровня заголовков. Первый — заголовок статьи, второй — раздела, а третий — строчный, с него начинается абзац. Если в популярной статье больше, её нужно переписать.

Не правьте HTML в Гугл-доке. Он заменяет латинские кавычки спецсимволами, их браузер не понимает.

Теперь организуем логические блоки.

Не переключаясь в режим визуального форматирования, вставляем картинки, помещаем их в контейнер <div class=”el_pic”> </div>. Для картинок прописаны отступы от текста, но можно добавить и других правил. Например, чтобы они растягивались по ширине колонки.

Размечаем фактоиды контейнерами <div class=”el_fact”> </div>. Фактоиды — выводы или цитаты, на которые редактор хочет обратить внимание читателя. Фактоид помогают разбить скучную портянку на небольшие блоки. В такой статье читателю проще ориентироваться, и выше вероятность, что он прочитает её до конца.

Организуем маркированные списки <UL>. Теги списка помещаем внутри тегов <P> и </P>. Логически список — это длинное предложение, для удобства чтения разбитое на строки. Отступ между описательным предложением и элементами списка не нужен. Маркеры списка заменяю на короткое тире и делаю его чуть светлее цвета основного текста. Так маркеры опрятны, помогают читать и не мешают. Для списков с перечнем гиперссылок предусмотрен стиль lnk, с увеличенным расстоянием между пунктами, чтобы по ссылкам было легче попадать курсором или пальцем.

Акронимы типа ОСАГО или ДТП заключаем в теги <acronym></acronym>. Акронимы состоят из заглавных, которые нужно разряжать — увеличивать расстояние между буквами. Такой акроним выглядит красиво и его проще читать. Это едва уловимая деталь добавляет редакторского пафоса.

Помещаем статью в родительский контейнер <div class=”editore”> </div>. Таблица стилей действует только на текст внутри этого контейнера, чтобы правила не ломали стили других элементов страницы. Это называется инкапсуляцией правил оформления.

Вставляем в запись блога в режиме редактирования кода, сохраняем, просматриваем, правим—дотягиваем. Ура! Главное — не переключаться в режим визуального редактирования. Он сломает разметку и придется вставлять подготовленный текст заново.

Вот как выглядит верстка текста из Ворда в сравнении с полученным результатом:

Что еще надо бы сделать

Переделать под новое оформление остальные статьи. На это нужно время, а его нет. По крайне мере, новые материалы будут выходить по технологии.
Сделать блогу нормальный дизайн. Его внешний вид за пределами добра и зла.
Подобрать гармоничную шрифтовую пару. Calibri и Cambria — не самое удачное сочетание.
Доделать CSS. Статья уже выглядит неплохо, но в стилях не хватает системности: гармоничных соотношений между размером шрифта и отступами. Еще не помешает привести единицы размеров к относительным величинам, привязанным к размеру шрифта.
Начать подбирать небанальные картинки и вменяемо их оформлять. Возможно, я доберусь и до них.

Ссылки по теме

Текстовый файл с таблицей стилей — для любопытствующих.

О программе «Типограф».

Convert Word documents to Clean HTML — чистит теги, заменяет <b> на <strong>, а <i> на <em>.

Гигиенические требования к вёрстке в Советах Бюро Горбунова. Редактор не может не уметь верстать, потому что вёрстка — единственная физическая форма текста. Работа редактора — космос.

Сниму квартиру [в вашем доме]

Виталий Филатов — Mon, 12 Oct 2015 16:16:00 +0500

Сегодня разбираем объявление у подъезда. Субъективно и нудно ;-)

Я люблю объявления-расклейки, они отражают состояние культуры визуального дизайна. Никто ведь в здравом уме не закажет текст копирайтеру и не пойдет к дизайнеру, чтобы продать шкаф или пристроить кошку. Риелторы и сетевые продавцы пишут сами. Домоуправление тоже не заморачивается. Главное — чтобы было «нормально», понимание которого формируется в окружении табличек, вывесок, рекламных плакатов, сайтов и баннеров.

Вот некто захотел снять квартиру или комнату, если квартиры не найдет. Открыл Ворд, написал, распечатал и наклеил. Вот что получилось:

Предположим, что это не обманка агентов по недвижимости, и продолжим.

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

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

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

Шрифт Calibri легко читается, буквы выглядят аккуратно благодаря скругленным элементам. Ворд-2007 предлагает этот шрифт по-умолчанию. В таком размере надписи кажутся бледными, но жирное начертание делает рисунок плотнее.

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

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

Исправим найденные ошибки. Недостающую информацию придумаем. Близкие по смыслу блоки разместим рядом.

— А если это агентство? — спросит читатель, дотерпевший до конца. А агентство могло бы честно написать: помогу вам сдать квартиру или комнату.

По теме

Ководство Артемия Лебедева: §19. Прививка от действительности и §136. Теория близости

А еще невероятной красоты электронная книга Артёма Горбунова «Типографика и вёрстка».