Самое важное, что есть на сайте — это публикации. Практика показывает, что можно разместить почти любой формат: небольшой анонс и лонгрид-обзор, интервью, фотоотчёт, трансляцию события, урок и многое-многое другое. Довольно часто успех публикации зависит и от её оформления. Приятно оформленный материал читать одно удовольствие. Ознакомьтесь, пожалуйста, с полезными советами по оформлению материала.
Несмотря на то, что у нас на сайте есть функция автосохранения (работает через localStorage), писать материалы лучше где-то в другом месте, а после всех правок переносить на сайт. Один из самых удобных, в том числе для коллективной работы — это всем известный GoogleDocs. Хотя, в целом подойдёт любой текстовый редактор.
Эти варианты предпочтительнее как минимум по трём причинам:
— Они не зависят от LocalStorage и текст случайно никуда не пропадёт, также он доступен с любого устройства;
— Над текстом можно работать длительное время, доводя его до совершенства;
— Наличие опций по оформлению текста позволяют видеть статью такой, какая она будет; для последующего переноса материала можно использовать конвертеры, например, этот.
На сайте существуют одинаковые формы написания публикации — обычный редактор с предпросмотром. Для написания используется обычный текст, который можно снабдить HTML-тегами. Часто (особенно в Песочнице) доводится видеть текст, в который авторы всеми правдами и неправдами пытаются использовать CSS-стили, пишут абзацы с тегом параграфа, прописывают таргеты для ссылок и так далее — всё это лишнее, не следует «загрязнять» код публикации тем, что не интерпретируется сайтом. Просто попробуйте пару раз поиграться с формой создания публикации, не забывая пользоваться при этом кнопкой предпросмотра, чтобы оценить результаты. Ну а пока несколько советов.
Не стоит вставлять тексты одной сплошной простынёй. Случайный скролл колесом (или неаккуратное касание до планшета) и всё, вы уже потеряли место, где читали. Разбивайте текст на небольшие абзацы, по несколько предложений в каждом.
Абзацы текста можно разделять картинками. Это особенно хорошо, если они при этом ещё и уместны.
На сайте как и в HTML-разметке доступно 3 уровня заголовков: самый крупный (H1), поменьше (H2) и средний (H3). Используйте их для структурирования текста: самым крупным выделяйте основные разделы, заголовками поменьше — подразделы и т. д. По заголовкам должно быть понятно, что предстоит прочесть — раздел статьи или часть раздела. Не делайте заголовки ради заголовков.
Кстати, заголовки (равно как и обычный текст) также можно красить тегом font color (тегом, а не css-стилем!). Этот подход к оформлению особенно полюбили корпоративные клиенты, раскрашивая заголовки в фирменный цвет. Такой вариант хорош тем, что ещё больше выделяет заголовок на фоне чёрно-белой простыни текста.
Пример:
<h4><font color="#cc0000">Irony-заголовок</font></h4>
Результат:
Irony-заголовок
Не вставляйте длинные ссылки прямо в текст публикации. Привязывайте их к какому-нибудь слову.
Вставляйте ссылки на используемые в статье материалы (публикации на Хабре, статьи в Википедии и т.д.)
Изучите теги, доступные на сайте. Среди них есть много полезных. Например, если вы используете в статье какие-нибудь редкие аббревиатуры, то почему бы не расшифровать их значение с помощью тега abbr?
Пример:
<abbr title="Картинка Для Привлечения Внимания">КДПВ</abbr>
Результат:
КДПВ
Обращайте внимание на разницу между тегами source и code. Source вставляет блочный элемент с подсветкой синтаксиса, в то время как code вставляет строчный элемент (по сути просто моноширинным шрифтом). Соответственно, нет смысла вставлять несколько строк кода в тег code — он будет некрасиво смотреться, сливаясь с основным текстом. А вот source — наоборот.
Не все знают, что есть поддержка таблиц, в том числе с возможностью объединения рядов и колонок. У таблиц нельзя задавать толщину рамки или цвет фона, но зато внутри них можно использовать изображения и текст со всё тем же форматированием. Если подойти ответственно, то получится красиво. Можно вставить таблицу и картинкой, но так она не проиндексируется и так в ней будет сложнее что-то поменять.
Есть много других тегов: для упоминания других пользователей (чтобы они это заметили у себя в трекере), для вставки интерактивных twitter-карточек и т.д. Тег «Спойлер» используется для того, чтобы скрыть в публикации некую информацию, но при этом чтобы она была доступна после клика.
Все изображения с Хабра хранятся на сервисе Habrastorage — специальном ресурсе для хранения картинок. Даже если вы вставляете картинки с внешнего сайта, они всё равно перезальются на Habrastorage, чтобы быть доступными даже спустя годы. Заливайте картинки сразу на сервис — он очень удобен.
Все большие изображения автоматически масштабируются средствами CSS, чтобы не разъезжалась вёрстка сайта. То есть вы можете вставить FullHD-скриншот, но на нём, скорее всего, ничего не будет видно — не поленитесь сделать картинку кликабельной, прописав ей ссылку на полную версию изображения.
От выбора КДПВ (картинки для привлечения внимания) часто зависит дальнейшая судьба публикации, настрой в её комментариях. Нет ничего скучнее логотипа бренда; используйте что-то более яркое и сочное, что будет привлекать внимание. Юмор и мемы приветствуются, но всё должно быть в меру. Если от какого-то мема все устали и вы сами понимаете, что он не очень-то уместен, тогда лучше ищите другую картинку.
При создании цикла публикаций есть смысл использовать одну и ту же картинку до ката. Тогда те, кому понравилась предыдущая публикация из цикла с большой вероятностью зайдут и в новую часть.
У Mac-пользователей всё просто. Сам Стив Джобс велел использовать сочетание «CMD + Shift + 4 + Space» для того, чтобы сделать красивый скриншот окна с тенью. Для Windows- и Linux-пользователей существует огромное количество всевозможных утилит и способов на любой вкус.
Скриншот из OS X после нажатия комбинации «CMD + Shift + 4 + Space»
Нюансов же несколько:
Если скриншот получается очень большим, то, скорее всего, он не влезет целиком в публикацию. В таком случае его проще сделать кликабельным, чтобы по клику на миниатюру картинки открывался полноценный скриншот. Это делается конструкцией:
<a href="original"><img src="preview"></a>
Не забудьте подписать в тексте или в подписи, что картинка кликабельна.
Не вставляйте JPEG-скриншоты и PNG-фотографии, без внимания в комментариях это не оставят. Равно как и картинки ужасного качества использовать не следует.
Если вы используете в статье небольшую картинку (менее 300-400 пикселей по ширине), то по бокам изображения будут пустые области. Чтобы избавиться от них, можно прописать картинке атрибут align со значением left, center или right. Чтобы не делать потом несколько переносов строк, используйте атрибут clear.
А ещё изображениям можно задавать атрибуты width и height.
При написании публикаций и комментариев на сайте можно использовать HTML или Markdown на выбор. Важно заметить, что мы поддерживаем «Habrahabr Flavored Markdown» (сокращенно HFM) — он расширяет традиционный Markdown несколькими существенными отличиями.
Да, если вы не знакомы с Markdown, стоит взглянуть на основы Markdown-разметки.