23 заметки с тегом

работа

Сайт курса по бэкенду

Сделал сайт курса для разработчиков энтерпрайз-бэкенда. Собрал структуру, написал текст, подготовил картинки и сверстал в Тильде.

Авторы курса — Евгений и Сергей — за десять лет практики собрали все грабли, устали от унылого хаоса в разработке и решили передать свой опыт в формате онлайн-курса. Курсу требовался сайт, который бы объяснял пользу, показывал экспертность авторов и отличался от лендингов с перепродажей чужих лекций. Получилось так: howto.stringconcat.com

Работа над сайтом условно делится на шесть смысловых этапов:

уточнение задачи → сбор и анализ материала → поиск структуры → текстовый макет → подбор иллюстраций → вёрстка

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

Уточнение задачи

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

Исследование

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

Для сайта курса я изучил черновики рекламных писем, заметки по ЦА, сценарий вводного ролика, посмотрел несколько лекций, изучил учебный план, почитал Хабр и Ebanoe.it. Это помогло погрузиться в тему, собрать вопросы для интервью и наметить способы демонстрации полезного действия курса.

Поиск структуры

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

Хорошая структура появляется эволюционным путём

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

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

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

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

Текстовый макет

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

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

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

Как разработать продукт, за который не стыдно

Как поддерживать и развивать проект, не жертвуя сном и здоровьем

Перестать выгорать и начать жить

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

По началу всё идёт хорошо, но потом проект превращается в зиккурат из костылей и противоречий. <...> Никто не знает, как работает ключевой модуль, а кто знал — уже на пенсии, ушёл к конкурентам или умер.

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

Иллюстрации

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

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

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

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

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

Всё по делу: стиль и формат кода, среда разработки, ночная тема, структура проекта на боковой панели и названия вкладок

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

Оригинал и результат. Евгений демонстрирует позитив, спокойную уверенность и открытость

Вёрстка

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

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

Всё, кроме шапки, сделано на типовых блоках Тильды. Шапка — зеро-блок с вариантами под разные устройства.

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

Всё набрано шрифтом Open Sans. У него почти нет характера, открытый рисунок и широкий диапазон жирности. Сейчас я бы сделал заголовки чем-то более выразительным, например, шрифтом IBM Plex.

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

Особый шик — колонки одинаковой высоты:

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

Отзыв из переписки Евгения

14 сентября   верстка   кейс   работа

Вавилонская формула

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

Ситуация

В 2018 Хабр Карьера анонсировала сервис публичных оценок компаний. Сотрудники анонимно оценивают работодателя по 12 критериям, пользователи портала видят усреднённые оценки, а руководство получает обратную связь.

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

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

Больше отзывов → яснее картина происходящего → точнее курс.

Гифки и мемы не годились, хотелось чего-то шуточного, но с понятным посылом. Поэтому я решил нарисовать график роста ясности и отметить на нём текущее положение дел:

12 отзывов проясняют ситуацию только на четверть

Замысел

График задумывался как пародия на популярные бизнес-метрики. Реальной зависимости он не показывал, а просто притягивал внимание и развлекал. Расчёт был запомниться абсурдностью: некая ясность в диапазоне от 0 до 1 и очевидно ускоряющийся её рост с каждым новым голосом. Читатель посмеётся, а позже возможно вспомнит синюю полоску и невольно подумает про отзывы.

Удивлять чем-то неожиданным и запоминающееся — старый рекламный трюк. Например, ВВС США завлекают женщин на контрактную службу детёнышем транспортника C-17:

Большие стёкла кабины, короткие крылья и фюзеляж рефлекторно вызывают умиление

Реализация

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

Известные мне нелинейные функции не годились, и я обратился к приятелю-математику Илье (Илья, привет!) Он выслушал постановку, посмеялся и сотворил нечто из начал анализа:

Натягиваем сову на глобус: Σ — ясность, N — общее количество участников, x — количество полученных оценок

Графику требовалась формула, а формуле — история, которая бы объясняла её абсурдность. Я почитал Википедию, написал фрагмент вымышленной книги «Знаменитые математические формулы» и оформил её как халтурный рип из электронной библиотеки.

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

Результат и выводы

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

В 2018 Хабр Карьера ещё была Моим Кругом

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

Выводы из этой истории:

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

Приходите обсуждать ко мне Вконтакт.

2020   Девхаб   кейс   работа   рассылка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2020   верстка   гугл-доки   работа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2019   верстка   Девхаб   работа

Внутренняя инструкция по Диадоку

UPD. В августе 2019 Диадок поменял состав услуг и перестал выпускать облачную подпись.

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

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

Инструкция по получению подписи

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

Мы рекомендуем удостоверяющий центр СКБ Контур, с ним меньше путаницы и проще подключиться к Диадоку.

Для оформления электронной подписи вам понадобятся:

Паспорт. Разворот с фотографией. Если вы восстанавливаете паспорт, подойдёт временное удостоверение личности. Если у вас нет российского гражданства, подойдёт иностранный паспорт с нотариально заверенным переводом на русский или вид на жительство.

ИНН — свидетельство о постановке на учёт в налоговый орган физического лица.

СНИЛС — страховое свидетельство Пенсионного Фонда. Лицевая сторона.

Заявление на выпуск цифровой подписи. Скачайте его из Личного кабинета Контура, подав заявку на портале удостоверяющего центра СКБ Контур. Весь процесс описан ниже.

Потребуются оригиналы или заверенные копии.

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

Два вида подписи

Контур выпускает два вида цифровых подписей: квалифицированную цифровую подпись и Контур.Сертификат — облачную подпись, работающую только с продуктами Контура.

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

Электронная подпись для физических лиц стоит 1000 ₽ в год. Для записи подписи в реестр потребуется Лицензия КриптоПро, которая входит в стоимость.

Контур.Сертификат хранится в облаке Контура и работает только с их продуктами. Такие подписи оформляют реже, поэтому на сайте Контура о них не написано. Стоит 900 ₽ в год.

⚠ Как физик вы можете подписывать только неформализованные документы: приказы, заявления, договоры и NDA. Для документов с утверждённой государством формой одной цифровой подписи недостаточно, нужна регистрация в системе ЭДО. Для регистрации нужен ОГРН, которого нет у физических лиц. В ЭДО регистрируют только ИП.

Весь процесс по шагам

1. Оформите заявку на электронную подпись для физических лиц на сайте Удостоверяющего центра СКБ Контур. Для выпуска Контур.Сертификата проще позвонить менеджерам — подать заявление на выпуск облачной подписи на сайте нельзя.

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

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

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

Счёт можно оплатить в мобильном банковском приложении, указав в поле Лицевой счёт/Договор номер счёта, а в назначении платежа — номер и дату счёта. Заскриньте чек по операции и отправьте обратным письмом.

3. Заполните заявку на выпуск подписи. Через три часа после оплаты счёта вы получите письмо с инструкцией и ссылкой на Личный кабинет в Контуре. Войдите в Личный кабинет по номеру телефона, загрузите фото или сканы документов, заполните и распечатайте заявление. Оно понадобится при получении печати в сервисном центре.
На сайте Контура есть подробная инструкция по заполнению заявки.

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

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

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

⚠ В офисе сервисного центра вам дадут пустую флешку. Перед использованием подпись нужно выпустить, загрузить на носитель и подключить к Диадоку.

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

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

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

Тарифы и цены Диадока

Новый пользователь Диадока получает промопакет на 50 документов. Считаются только отправленные пользователем документы, которые подписаны получателем. Входящие документы в это число не входят.

Когда промопакет закончится, придётся переходить на платный тариф. Самый подходящий — тариф «Минимальный» на 100 исходящих документов, он стоит 900 ₽ в год.

Облачную подпись я не выпускал, поэтому она описана неполно. Если у вас будут замечания, уточнения или просто заходите обсудить что-нибудь про текст, пишите мне на почту v-fil@ya.ru или в Телеграм @vitalyfilatov.

2019   Девхаб   инструкции   работа

Эмодзи в тексте

Написал про эмодзи в Базу знаний Девхаба.

Эмодзи изображают эмоции, абстрактные понятия, предметы и явления. Они оживляют текст, но использовать их следует разумно ☝

Начнём с главного и очевидного.

Где использовать эмодзи

Не используйте эмодзи в официальных документах: ТЗ, КП, финансовых и юридических документах, письмах с репутационными рисками.

Эмодзи не помешают в письмах клиентам, статьях, вакансиях, мессенджерах.

В соцсетях без эмодзи никак.

Общие рекомендации

Не заменяйте слова значками. Значения эмодзи зависят от ассоциаций читателя, поэтому ими не следует заменять слова там, где нужна точность.

Не делайте так, если пишете по делу

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

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

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

Тираннозавр действительно пишется с двумя н.

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

⚠ Не используйте значки для сглаживания углов при отказах и извинениях.

Эмодзи опасны, если не знать настроения адресата
Восприятие сильно зависит от эмоций и физического состояния, поэтому значки не всегда радуют и задают дружелюбный тон, а в определенных ситуациях могут вызвать ярость и гнев.
Например, заказчик не выспался из-за соседского перфоратора, поругался с домашними, простоял в пробке или заработал изжогу. Шлёт менеджеру асап-правки, а в ответ получает:
— Ок! Сделаем это немедленно *8-)))
Это что, издёвка, что ли? — думает заказчик и закипает.
Не используйте эмодзи и смайлики, если не знаете настроения собеседника.

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

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

Знайте меру. Избыток значков превращают текст в бестолковую пёструю кашу, которую трудно разобрать.

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

Эмодзи и пунктуация

Не ставьте эмодзи перед запятой. Точка после эмодзи не нужна ☝

В конце предложения восклицание можно ставить перед эмодзи.

Некоторые эмодзи стоит отбивать пробелами от слов.

Как добавлять

На Маке эмодзи можно вставить в любое место по ctrl + cmd + space.

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

В Гугл-доке идём в меню Insert → Special characters, там выбираем категорию Emoji и ищем нужный значок в подкатегориях или пишем в строке поиска название.

На Windows 10 — win + ; или win + .

На старой Винде — никак. Скопируйте из гугл-дока, Слака или с Мака коллеги.

Семь главных правил

  1. Не используйте эмодзи в официальных документах.
  2. Не используйте эмодзи для сглаживания углов при отказах и извинениях.
  3. Не заменяйте слова значками.
  4. Выделяйте важные места, оформляйте списки или разделы.
  5. Старайтесь, чтобы эмодзи не повторяли сказанное, а дополняли смысл эмоциями и личным отношением.
  6. Следите за смыслом и уместностью. Когда эмодзи стоят рядом, их хочется прочитать как фразу.
  7. Знайте меру.

Ещё по теме

Инструкция: смайлики в переписке с клиентом — консервативные правила Людмилы Сарычевой.

Сколько эмодзи использовать, чтобы текст оставался читаемым? — Ильяхов отвечает в Советах Бюро.

Гид по эмодзи в СММ от Амплифаера.

Как эмодзи стали универсальным языком общения — большая статья о коммуникативных функциях и негласном кодексе использования от «Теории и практики».

Эмодзипедия — справочник по всем известным эмодзи.

2018   Девхаб   работа

Как запустить внутреннюю рассылку

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

1. Соберите идеи

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

Рассылка — рассказ о компании и коллективе. Старайтесь транслировать новости и объявления в мир читателя, описывая их с позиции практической пользы. Как нужно → как проще и удобнее.

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

2. Заложите бюджет

Решите, сколько вы готовы тратить на рассылку первые два-три месяца. Это поможет подобрать оптимальный объём выпуска и темп работы. Начните с корпоративных новостей и объявлений в 300—400 слов и пару картинок. Длину текста удобно измерять Хрономером или Главредом.

3. Соберите редакцию

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

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

4. Найдите редактора

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

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

5. Соберите источники

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

Если не настроить сбор новостей, редактор превратится в помесь скандального журналиста и следователя. А это совсем немило ;3

6. Организуйте процесс

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

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

7. Познакомьтесь с читателем

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

8. Стройте экосистему

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

9. Собирайте обратную связь

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

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

10. Следите за разнообразием

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

2018   Девхаб   работа   рассылка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2018   верстка   Девхаб   работа   рассылка

Страница Maintenance

В Девхабе регулярно обновляются критичные сервисы: Jira, Confluence, GitLab и Sentry. Когда они недоступны, пользователь попадает на заглушку с кодом ошибки. Чтобы не пугать пользователей, мы сделали страницу, которая информирует и успокаивает.

Кастомная страница об ошибке для nginx Custom nginx мaintenance page

Русская и английская версии

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

Билл из Гравити Фолс официально представляет коварные силы мрака. Был вариант с Дружко, но его знают только в Рунете. Билл ближе англоговорящим пользователям.

К сожалению, подробнее объяснить, что именно не работает, нельзя. Сервер умеет только возвращать статичный html и код ошибки: 500 internal error, 502 service unavailable или 502 bad gateway. Поэтому сообщение написано на все случаи жизни. Админам выводим код, а пользователям объясняем, что делать, если что-то все же сломалось.

2018   UX   Девхаб   работа

Преамбула нового NDA

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

Ситуация

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

Ход решения

Оригинальный текст преамбулы:

Общество с ограниченной ответственностью «Горсвет» в лице Генерального директора Гесера Бориса Игнатьевича, действующего на основании Устава (далее «Сторона-1»), направляет Городецкому Антону Сергеевичу (далее «Сторона-2») настоящее соглашение о неразглашении конфиденциальной информации (далее «Соглашение»).

Юрист предлагает оставить в преамбуле Сторону 1 и Сторону-2, а в следующем абзаце пояснить, кто они такие:

Сторона-1 направляет Стороне-2 настоящее соглашение о неразглашении конфиденциальной информации (далее «Соглашение»).

В качестве Стороны-1 выступает Общество с ограниченной ответственностью «Горсвет» в лице Генерального директора <…>

В качестве Стороны-2 выступает Городецкий Антон Сергеевич.

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

Решаем добавить глаголов настоящего времени в третьем лице. Так мы решаем задачу и добавляем в преамбулу действие сотрудника.

Общество <…>, направляет, а Городецкий Антон Сергеевич (далее «Сторона-2») принимает настоящее соглашение <…>.

Юрист объясняет, что это плохой вариант:

— Не годится: меняется смысл. Компания сначала направляет, сотрудник читает и решает, принимать или нет (способами, указанными далее).

Я ничего не понимаю и предлагаю добавить «и рассматривает»:

<…> а Городецкий Антон Сергеевич (далее «Сторона-2») принимает и рассматривает настоящее соглашение о неразглашении

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

Оставляем только «рассматривает», все встаёт на место.

Результат и вывод

Общество с ограниченной ответственностью «Горсвет» в лице Генерального директора Гесера Бориса Игнатьевича, действующего на основании Устава (далее «Сторона-1»), направляет, а Городецкий Антон Сергеевич (далее «Сторона-2») рассматривает настоящее соглашение о неразглашении конфиденциальной информации (далее «Соглашение»).

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

2018   работа   редактирование
Ctrl + ↓ Ранее
UX