Создаем и развиваем сервисы для гиков
262,96
рейтинг
15 июля 2015 в 16:22

Разное → Как красиво оформить публикацию на Хабре tutorial

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

И первый лайфхак – кликабельная картинка до ката, которая ведёт сразу внутрь публикации:



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

Инструменты


Мы не понаслышке знаем людей, которые пишут тексты прямо в форме создания публикации на Хабре. Но несмотря на то, что у нас на сайте есть функция автосохранения (работает через localStorage), писать материалы лучше где-то в другом месте, а после всех правок переносить на Хабр. Самый удобный (в том числе для коллективной работы) вариант – GoogleDocs. Хотя, в целом подойдёт любой текстовый редактор – в том же Pages на планшете очень часто рождаются тёплые ламповые тексты.

Эти варианты предпочтительней как минимум по трём причинам:

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

Текст


На «Хабре» (и на других контентных проектах ТМ) существуют одинаковые формы написания публикаций – обычный редактор с предпросмотром. Для написания используется обычный текст, который можно приукрасить HTML-тегами. Часто (особенно в Песочнице) доводится видеть текст, в который авторы всеми правдами и неправдами пытаются запихать CSS-стили, пишут абзацы с тегом параграфа, прописывают таргеты для ссылок и так далее – всё это лишнее, не следует загрязнять код публикации тем, что не интерпретируется сайтом. Просто попробуйте пару раз поиграться с формой создания публикации, не забывая пользоваться при этом кнопкой предпросмотра, чтобы оценить результаты. Ну а пока несколько советов.

Абзацы


Худшее, что может быть с текстом – это если он вставлен одной сплошной простынёй. Случайный скролл колесом (или неаккуратное касание до планшета) и всё, вы уже потеряли место, где читали. Разбивайте текст на небольшие абзацы, по несколько предложений в каждом.

Абзацы текста можно разделять картинками – это особенно хорошо, если они при этом ещё и уместны.

Заголовки


На сайте как и в HTML-разметке есть 6 уровней заголовков, H1-H6. На самом же деле большинство авторов используют всего несколько – самый крупный (H1), поменьше (H2) и средний (H3) – остальные не очень-то и заголовочные. Используйте их для структурирования текста – самым крупным выделяйте основные разделы, заголовками поменьше – подразделы и т. д. По заголовкам должно быть понятно, что вы начинаете читать – раздел статьи или часть раздела. Не делайте заголовки ради заголовков.

Кстати, заголовки (равно как и обычный текст) также можно красить тегом font color (тегом, а не css-стилем!) – эту фичу особенно полюбили корпоративные клиенты, раскрашивая заголовки в фирменный цвет (например, в этой статье заголовки имеют цвет с логотипа Хабра). Такой вариант хорош тем, что ещё больше выделяет заголовок на фоне чёрно-белой простыни текста.

Пример:

<h4><font color="#cc0000">Irony-заголовок</font></h4>

Результат:

Irony-заголовок


Ссылки


Не вставляйте длинные ссылки прямо в текст публикации – привязывайте их к какому-нибудь слову. Сравните:

Гуглите про НЛО – www.google.ru/?gfe_rd=cr&ei=V_GiVc6KOLCr8wf5zoDgBQ&gws_rd=ssl#newwindow=1&q=%D0%BD%D0%BB%D0%BE

Гуглите про НЛО

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

Спецтеги


Обязательно изучите теги, доступные на сайте – среди них есть много полезных. Например, если вы используете в статье какие-нибудь редкие аббревиатуры, то почему бы не расшифровать их значение с помощью тега abbr? Смотрите, как здорово:

<abbr title="Картинка Для Привлечения Внимания">КДПВ</abbr>

Результат:

КДПВ

Также немногие чувствуют разницу между тегами source и code. Source вставляет блочный элемент с подсветкой синтаксиса, в то время как code вставляет строчный элемент (по сути просто моноширинным шрифтом). Соответственно, нет смысла вставлять несколько строк кода в тег code – он будет некрасиво смотреться, сливаясь с основным текстом. А вот source – наоборот.

Не все знают, что есть поддержка таблиц, в том числе с возможностью объединения рядов и колонок. У таблиц нельзя задавать толщину рамки или цвет фона, но зато внутри них можно использовать изображения и текст со всё тем же форматированием – если подойти ответственно, то получится красиво. Да, кто-то скажет, что можно вставить таблицу и картинкой, но так она не проиндексируется и так в ней будет сложнее что-то поменять.

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

Спойлеры


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

Почему это круто?
Чаще всего это нужно для того, чтобы уместить в одной публикации больше информации, но чтобы сама публикация при этом не казалась раздутой. В спойлерах можно скрывать полезную информацию (например, технические характеристики в обзоре устройства или принцип работы какого-то алгоритма) – те, кому информация нужна, тот сможет посмотреть её, а всем остальным она не будет мозолить глаза. Также это позволяет избежать перекидывания пользователя на внешние сайты (на ту же Википедию), что особенно удобно при чтении публикации с мобильного устройства.


Изображения


Касаемо изображений нужно знать две особенности:

  • Все изображения с Хабрахабра/Geektimes/Мегамозга хранятся на сервисе Habrastorage – специальном ресурсе для хранения картинок. Даже если вы вставляете картинки с внешнего сайта, они всё равно перезальются на Habrastorage – чтобы быть доступными даже спустя годы. Заливайте картинки сразу на сервис – он очень удобен.

  • Все большие изображения автоматически масштабируются средствами CSS – чтобы не разъезжалась вёрстка сайта. То есть вы можете вставить FullHD-скриншот, но на нём, скорее всего, ничего не будет видно – не поленитесь сделать картинку кликабельной, прописав ей ссылку на полную версию изображения.

Подбор КДПВ


Первое изображение, которое используется в публикации – КДПВ, она же Картинка Для Привлечения Внимания или картинка до ката. Как понятно из названия, на эту картинку возложена большая миссия – привлечь внимание потенциального читателя, когда он смотрит ленту публикаций. И именно поэтому эту картинку следует использовать – если её нет, то ваша публикация с большой долей вероятностью «потеряется» при скролле. Согласитесь, вы не раз заходили в публикацию только потому, что вас заинтриговала картинка до ката?

От выбора КДПВ часто зависит дальнейшая судьба публикации, настрой в её комментариях. Нет ничего скучнее логотипа бренда – используйте что-то более яркое и сочное, что будет именно привлекать внимание. Юмор и мемы приветствуются, но всё должно быть в меру – если от какого-то мема все устали и вы сами понимаете, что он не очень-то уместен – ищите другую картинку. Не раз встречались комментарии типа «Зашёл только ради картинки» или «Даже картинка не спасла этот пост».

Наглядные примеры: с сиськами, без сисек.

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

Скриншоты


У Mac-пользователей всё просто – сам Стив Джобс велел использовать сочетание «CMD + Shift + 4 + Space» для того, чтобы сделать красивый скриншот окна с тенью. Для Windows- и Linux-пользователей существует огромное количество всевозможных утилит и способов – на ваше усмотрение.


Скриншот из OS X после нажатия комбинации «CMD + Shift + 4 + Space». Подпись – italic + font color=«99999»

Нюансов же несколько:

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

    <a href="original"><img src="preview"></a>

    Не забудьте подписать в тексте или в подписи, что картинка кликабельна.

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


Картинка без рамки, с align=«center»

Не вставляйте JPEG-скриншоты и PNG-фотографии – без внимания в комментариях это не оставят. Равно как и картинки ужасного качества (более 2 баллов по шкале шакалов) использовать не следует.

Обтекание изображения текстом


Если вы используете в статье небольшую картинку (менее 300-400 пикселей по ширине), то по бокам изображения будут пустые области. Чтобы избавиться от них, можно прописать картинке атрибут align со значением left, center или right – как вам удобней. Чтобы не делать потом несколько переносов строк, используйте атрибут clear.

А ещё изображениям можно задавать атрибуты width и height – специально для перфекционистов, которые хотят до пикселя выровнять в тексте публикации какую-нибудь иконочку.

Прочие советы


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

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

  • Обращайте внимание на отступы. У разных объектов они разные – у заголовков один отступ, у картинки или тега с кодом – другой. Некрасиво, когда в публикации есть лишние переносы строк, а картинки «прилипают» к тексту.

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

  • И самое главное – пользуйтесь предпросмотром. Неоднократно на сайте размещали недописанные публикации, с системными пометками (СОГЛАСОВАТЬ С ИГОРЕМ) или без картинок. В лучшем случае успевали скрыть публикацию в черновики для исправления, в то время как в социальные сети могли уйти нерабочие ссылки; да и статья после публикации не оказывается в самом верху – она оказывается там, где была на момент первого размещения. В худшем случае это смещало фокус обсуждения в комментариях – оно вам надо? Именно поэтому мы рекомендуем готовить материал где-то вовне, но даже с таким подходом следует семь раз отмерять, прежде чем один раз отрезать.

The end


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

Пишите свои рекомендации по оформлению публикаций – самые ценные советы добавим сюда.
Автор: @habrahabr
ТМ
рейтинг 262,96
Создаем и развиваем сервисы для гиков

Комментарии (109)

  • +5
    Предлагаю добавить возможность интеграции в статью сервиса codepen.io, например, blog.codepen.io/documentation/features/embedded-pens), или нечто подобное, главное суть — демо-примеры верстки, стилей, js.
    • +5
      У нас уже есть наработки на этот счёт :)
      • 0
        Понял, спасибо. :-)
      • +7
        Бумбурум, где ты раньше был?)) Стоит добавить куда-то в мануал. С удивлением узнал про цвет. Я просто html не знаю и пользовался только очевидным.
        /me пошёл переверстывать свою новую публикацию…

        З.Ы.
        Мы не понаслышке знаем людей, которые пишут тексты прямо в форме создания публикации на Хабре.

        Это вроде логично.
        • +1
          Мы не понаслышке знаем людей, которые пишут тексты прямо в форме создания публикации на Хабре.
          Это вроде логично.

          Более чем (для меня например). Только из этой статьи узнал про Google Docs, посмотрел и мне абсолютно не понравилось. Ну а про какой-нибудь внешний редактор даже и не думал, зачем плодить совершенно лишние сущности, если всё прямо во встроенном редаторе Хабра можно сделать?
      • +1
        А jsFiddle тоже?
  • +28
    Всё-таки с вашим редактором статей/комментариев что-то не так, если самым удобным инструментом признаётся GoogleDocs, а потом предлагается пользоваться сторонними конвертерами.

    Мешает ли что-то приделать Markdown со split view и предпросмотром в реальном времени?
    • 0
      С моей точки зрения Markdown хорошо подходит для написания небольших статей с минимум оформления. Как только у вас начинается вложенность стилей или нестандартные теги (какой аналог для <video></video> или <spoiler></spoiler> вы предлагаете?) ваша разметка перестанет быть читабельной очень быстро.
      Буквально пару недель назад столкнулся с этой проблемой в форумном движке NodeBB, где Markdown является по сути дефолтным видом разметки. Пришлось писать свой BBCode-плагин, чтобы не городить синтаксические конструкции в духе !>{name}(value)
      • +5
        Markdown изначально разработан так, чтобы позволять вставлять произвольный HTML-код. Если вам нужен <spoiler>, то и пишите его непосредственно:

        Абзац *c разными* [фичами][1] Markdown'а
        
        <spoiler>скрытый абзац, тоже с *фичами* **Markdown'а**</spoiler>
        
        Следующий абзац.
        
        • –1
          И помимо парсера Markdown нам еще нужен парсер кастомных тегов. Да и выглядит это не очень эстетично. Мне кажется лучше уж тогда использовать wysiwyg-редактор.
          • 0
            Парсер кастомного чего-нибудь нужен в любом случае: в виде парсера html-тегов или в виде плагина для Markdown.
          • 0
            В смысле — ещё парсер кастомных тегов? Он уже есть сейчас у хабра. Markdown сам по себе предназначен для работы в виде преобразователя в HTML. Поэтому сделать Markdown-based редактор для хабраразметки, которая есть надмножество HTML, очень просто — надо всего лишь прогнать входной Markdown через преобразователь, и полученный HTML будет полностью совпадать с тем, что сейчас можно написать вручную при создании поста.
            • –5
              Возможно в случае хабра действительно не потребуется много работы. Однако лично мне все равно неприятна идея совмещения Markdown и HTML, видимо слишком сильна привычка единого style-guide'а.
      • 0
        AsciiDoc! Хотя на markdown вполне себе хорошие тексты можно писать. Есть нюансы, но диалектов уже достаточно, что бы найти более подходящий или добавить под задачу и отразить в документации. Ну как минимум, в офлайне можно писать в любом редакторе с подсветкой MD, а статьи с примерами кода, прямо в проекте, к примеру в Qt Creator есть подсветка MD (есть ещё плагин для превью в сплит-вью, но не пробовал).
    • +8
      +1, очень не хватает маркдауна.
      • +3
        Если вдруг его захотите интегрировать, было бы неплохо это сделать удобно — например, не забыть сделать поддержку code fences:

        ```some-language
        code in some language
        ```
        


        преобразуется в

        <source lang="some-language">
        code in some language
        </source>
        
    • +2
      Ну вот, плюсиков собрал, а фидбека нет. Так и скажите, «Маркдауна не будет».
  • +14
    >>> СОГЛАСОВАТЬ С ИГОРЕМ

    У меня такой лайфхак по безопасной подготовке статей.

    Есть у меня 2 старые статьи, которые сначала были опубликованы на сайте, но затем перенесены в черновики. Эти архивные публикации использую для написания новых. При этом не парюсь, что вместо «В черновики» ненароком нажму на «Опубликовать». Так как публикация уже когда-то состоялось, на главную Хабра не согласованный с Игорем шедевр не выпрыгнет. В худшем случае недолго повисит на последней странице в списке моих публикаций, где вряд ли будет кем-то вообще замечен.
  • –7
    Когда открываешь секрет, что картинка ведёт внутрь, уже как то не хочется попадатся на манипуляцию =)

    по этому статью не читал, сорри.
  • +16
    Мы не понаслышке знаем людей, которые пишут тексты прямо в форме создания публикации на Хабре.

    Это как бы естественное желание.

    Но несмотря на то, что у нас на сайте есть функция автосохранения (работает через localStorage)

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

    писать материалы лучше где-то в другом месте

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

    А пока описать механизм в интерфейсе создания статьи, чтобы не вводить пользователей в ступор.
    • 0
      Имелось ввиду другое. Если нажать кнопку «в черновики», то статья сохранится на сервере. Но если вы вдруг пишете «на одном дыхании» (не сохраняя текст в черновики), и потом случайно нажали CTRL+W или CTRL+Q, то… то когда снова откроете форму создания публикации, сайт предложит автосохранение :)

      А то, что у вас была только кнопка «Опубликовать» — скорее всего вы имеете ввиду когда самый первый пост, в песочницу – там действительно возможно только публикация (отправка статьи на модерацию), так как черновиков у RO-пользователей нет. У обычных пользователей есть черновики и они хранятся на сервере.
      • +6
        А то, что у вас была только кнопка «Опубликовать» — скорее всего вы имеете ввиду когда самый первый пост, в песочницу – там действительно возможно только публикация (отправка статьи на модерацию)

        Не первый, но в песочницу.

        так как черновиков у RO-пользователей нет. У обычных пользователей есть черновики и они хранятся на сервере.

        Вот это и странно. Как показала практика, «обычный пользователь», легко становится RO пользователем.
      • +6
        Кстати, а может добавить диалог подтверждения на публикацию финальную? Раз в месяц ткнуть «Да, я уверен» не проблема
  • +3
    Меня всё устраивает в редакторе Хабра, кроме необходимости верстать текст переносами строк (<br>), вместо нормальных семантичных параграфов (<p>). (После прохождения через парсер, параграфы тоже не появляются.)
    • +1
      Не обязательно вставлять тег переноса строк, можно просто Enter-ом делать переносы – они нормально обработаются. В то время как оборачивать абзаца в тег параграфа тоже не надо.
      • 0
        Да, разумеется, я в курсе, что использовать теги переноса строк необязательно.

        Моя претензия, в основном, к выходному тексту, который не разбит на параграфы.
      • +2
        В этом и проблема: ваш язык отличается от HTML. И просто скопипастить html не получится — будут проблемы с абзацами.
    • 0
      У меня есть «странная» публикация (вот эта), в которой хабрапарсер не распознаёт переносы строк, созданные просто нажатием клавиши Enter. Пришлось все абзацы отделять друг от друга удвоенным тегом BR (параграфы проще воспринимаются, если между ними пустая строка). Написал об этом баге в техподдержку, но мне так толком и не пояснили что это было.

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

        То есть, сейчас неряшливость не внешняя, но внутренняя, смысловая, семантическая.
        • 0
          Кодеры просто пошли по пути наименьшего сопротивления. В хабрапарсере программно очень просто заменять переносы строк на тег BR.

          Если же расставлять православный P, то там небольшая дополнительная морока: надо выяснить где начинается и заканчивается абзац и поставить и открывающий тег и закрывающий. Плюс, в одних случаях ставить DIV, в других P, то есть нужно проверять один перенос между абзацами или больше.
          • +2
            Поэтому Маркдаун (почти стандартизованный в диалектах ГитХаба и КоммонМарка) и рулит :-)
      • +1
        Зайдите в редактирование этого поста и уберите там чекбокс «Отключить автоматические переносы строк и создание ссылок» (сразу под формой поста).
        • 0
          Благодарю 0:-)
  • 0
    Могу посоветовать прятать большие картинки под спойлер – это уважение к трафику юзера.
    • +8
      Насколько я знаю, картинки, спрятанные в спойлер, всё равно подгрузятся.
      • +3
        А переделать так, чтобы грузились только при открытии спойлера (ленивая подгрузка) вовсе не сложно.
        • +10
          Только вызовет праведное негодование пользователей, открывающих себе пару статей на планшете «в дорогу».
      • 0
        В приложении изображения грузятся именно после открытия спойлера.
  • 0
    несмотря на то, что у нас на сайте есть функция автосохранения (работает через localStorage)

    Поясните, а каким образом тогда я получаю доступ к недописанной публикации на другом компьютере?
    • 0
      В том-то и дело, что никаким, поэтому если пишете большую статью (не за один подход), то лучше использовать какой-то внешний редактор. Ну или «черновик» (прям на сайте), но было много случаев, когда статью случайно публиковали во время редактирования черновика.
      • 0
        Так в том-то и дело, что как-то я его получал.
        • 0
          Значит, это был «черновик».
        • +1
          Firefox Sync?
          • 0
            Действительно. Прошу пардона.
      • +1
        Как верно уже заметил Meklon — эту проблему легко решить просто введя дополнительный вопрос «Точно опубликовать? ДА/НЕТ».
        Сам все время в черновики пишу, чтобы потом корректору дать на правку.
        • +2
          Ну, собственно, напрашивается… Кстати, было бы круто еще давать возможность открыть публикацию в режиме read-only для конкретного хабраюзера. Предпремьерный показ типа) Очень часто показываю публикации перед финальной отправкой узким специалиистам среди хабровцев. Приходится сохранять в pdf и отправлять через другие каналы.
  • +13
    когда уже TeX появится
    • 0
      Полностью согласен. В немалом из-за его отсутствия я перестал что либо публиковать на хабре.
      • 0
        А он был раньше?
        • 0
          Нет, раньше извращался используя внешние генераторы картинок из TeX начертания формул. Разок другой так над собой поиздеваться можно, но регулярно так что-то писать тоскливо.
    • +6
      Вот да! Маркдаун и LaTeX. Блин, это ведь так просто.

      Казалось бы, крупный IT-блог. Дайте хоть я сам вам что-ли сделаю?
  • +14
    Я читаю Хабр исключительно с iPad, и многие плюшки, связанные с наведением курсора, мне недоступны. Позаботьтесь о планшетах, черти…
    • 0
      Поддерживаю. abbr недоступен с любого iOS-устройства.
      • 0
        На андроиде тоже не работает.
  • +24
    И вот из статьи сразу видны крупные недостатки Хабра:

    > …писать материалы лучше где-то в другом месте, а после всех правок переносить на Хабр.

    На Медиуме осилили свой редактор написать, даже написали про это: medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480. Почему бы не использовать наработки? Есть проекты на Гитхабе: github.com/yabwe/medium-editor. Можно оставить режим text/html для знающих HTML.

    > …пишут абзацы с тегом параграфа…

    Вот это самое странное. Почему не поддерживать тег <p>? Это лучше ужасных двойных <br><br>. Лучше сочетается с отступами заголовков и т.п. Да и вообще стили оформления на хабре не причёсаны.

    > Обращайте внимание на отступы. У разных объектов они разные – у заголовков один отступ, у картинки или тега с кодом – другой. Некрасиво, когда в публикации есть лишние переносы строк, а картинки «прилипают» к тексту.

    Вот как раз такие проблемы можно решить для всех сразу авторасстановкой абзацев <p> с настроенными отступами вместо тех же br'ок.

    > Заголовки

    И сразу вопрос: какие использовать заголовки? h1-h2 крупные. h3? h4? Нет стандартов оформления.

    > …раскрашивая заголовки в фирменный цвет.

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

    > Все изображения с Хабрахабра/Geektimes/Мегамозга хранятся на сервисе Habrastorage – специальном ресурсе для хранения картинок.

    И опять проблемы. Нет, далеко не все. SVG не грузятся. «Загруженный файл не является изображением.» Когда я захочу написать про svgo, придётся искать сторонний сервис. На том же айпаде хабр выглядит как… дешёвый сайт без поддержки ретины.

    > В таком случае скриншот может сливаться с текстом, поэтому не поленитесь сделать изображению рамку, которая будет чётко отделять картинку от текста.

    А можно не мучать Фотошоп (у всех он куплен?), а сделать просто через стиль вроде style=«box-shadow: 0 10px 15px rgba(0,0,.3)». Конечно, Хабр должен поддерживать такой вариант, например, специальный класс.

    > Подпись – italic + font color=«99999»

    Почему бы не использовать стандартный тег figcaption?

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

    Читать красиво оформленные комментарии тоже приятней. Например, мой комментарий мог бы выглядеть гораздо лучше. Oh, wait… Читатели хабра не могут использовать теги. Даже ссылки не работают: habrahabr.ru/info/help/karma
    • +2
      Прекрасные предложения.

      Но если в хабрапарсер реализовать эти нововведения, то во многих старых статьях, с горем пополам адаптированных под нынешние правила, поплывёт оформление.
      • +1
        Можно сделать «Парсер v2», и предоставить выбор пользователю, в каком формате создавать топик.
      • +2
        Ничто не мешает предусмотреть галку «Использовать старое оформление» и при введении нововведения программно включить ее для всех старых статей.
  • +14
    И да, конечно же, Карфаген должен быть разрушен снова прошу добавить в профиль галку «никогда не переключаться в мобильную версию».
    • 0
      Вроде в мобильном браузере должна быть опция «загрузить десктопную версию». Наверное не везде и не так удобно, но всё же.
      • +1
        Я не хочу иметь по «приложению» для каждого сайта который я читаю. У меня уже есть Файрфокс.
        И есть общепринятый стандарт — параметр «показать полную версию сайта», на который мобильная версия Хабра положила болт.
        Простите, накипело.
        • 0
          Так разве в самом ФФ нет такой опции? В мобильном Хроме есть, и она никоим образом не привязана к сайту — браузер просто говорит сайту что он десктоп и загружается полная версия.
          • 0
            Есть. Но Хабр упорно показывает мобильную версию.
  • +3
    — Проблема с языком Хабра в том, что ин ни то ни сё: вроде как подмножество HTML, но переносы строк и абзацы ведут себя совсем по-другому. Я как-то писал пост в markdown, сконвертировал в html. Пришлось потом править все абзацы-переводаы строк.

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

    — С хабрасторажджем и автозаливкой тоже не совсем гладко: SVG не поддерживается, автозаливальщик похоже определяет тип файлов по расширению, из-за чего LATEX-формулы с latex.codecogs.com не загружаются.
  • +1
    Спасибо, отличная статья, многое я уже знал но есть и новые интересные моменты.
    Однако у меня вопрос к автору, а может кто из пользователь подскажет.
    Можно ли в Хабре делать структурированные списки?
    Ну хотя бы с двумя уровнями вложения. Ужасно их не хватает. Я пробовал их реализовать, но у меня не получилось.
    • +1
      Можно
      • Пункт 1
        1. Подпункт 1.1
        2. Подпункт 1.2
      • Пункт 2
      • +1
        Спасибо. Получилось!
    • 0
      Ещё, что в MD, что на хабре, да почти везде, не хватает… списков-определений, что-то вроде:
      * Термин1
      <отступ>начало
      <отступ>следующая строка
      <отступ>ещё одна
      * Термин1
      <отступ>начало
      <отступ>следующая строка
      <отступ>ещё одна
      


      или, хотя бы просто определений.
  • +35
    Куча воды и ни слова про реальные проблемы, которые присутствуют в половине статей. Только жалкая приписка в конце статьи: «Старайтесь соблюдать отступы». Как их, чёрт побери, соблюдать, если параграфы не поддерживаются, а автоматическая расстановка переносов заставляет использовать маловменяемые переносы?

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

    Lorem ipsum
    <pre>Hello world!</pre>
    dolor sit amet

    Получаем:
    Lorem ipsum
    Hello world!

    dolor sit amet
    Ладно, а если так?

    Lorem ipsum
    
    <pre>Hello world!</pre>
    
    dolor sit amet

    Стало ещё хуже:
    Lorem ipsum

    Hello world!


    dolor sit amet
    В конце концов, пересиливая брезгливость, пишешь это:

    Lorem ipsum
    <pre>Hello world!</pre>dolor sit amet

    И получаешь долгожданное:
    Lorem ipsum
    Hello world!
    dolor sit amet

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

    Ну уж а для раскрашивающих заголовки в еле заметные цвета (и это касается расцветки заголовков по умолчанию) приготовлен отдельный котёл в аду. Знайте, что очкарики вас проклинают, «дизайнеры». В 2015-м году они пропагандируют раскрашивание заголовков с помощью тега font, тьфу.

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

    P. S. Писать про форматирование статей и вставлять в UL>LI два BR в конце, чтобы получить нормальный отступ между элементами списка — это просто курам на смех. Я уж молчу про n-dash вместо m-dash в компании с рекомендацией использовать правильную типографику. Срам да и только.
    • +10
      Вот! Наконец-то понимающий человек. Огроменные отступы всюду, которые очень затрудняют чтение для меня. Только что статью написал, намеренно (как всегда делаю) не ставя отступа после параграфа и source, так модератор тут же, за три минуты, разбавил ее до состояния нечитабельности, напичкав переносами строки.

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

        «И они еще борются за звание дома высокой культуры и быта» ©.

        На самом деле ситуация дикая, просто все уже привыкли или смирились. Альтернатив то хабру, по-хорошему, нет. А TM застряли в зоне комфорта. Сколько уже народ просит поддержку формул, а песочницу для фронтенда вроде codepen.io?

        Надеюсь, комментарии к этой публикации как-то повлияют на ситуацию.
        • +2
          Надеюсь, комментарии к этой публикации как-то повлияют на ситуацию.
          Markdown и/или TeX давно просят.
          • 0
            Всё же, лучше TeX не как таковой, а формулы: не издательство чай, что бы вообще вообще всё круто делать, но формулы зело приятны в TeX. Да и трудно сделать схожий HTML выхлоп у LaTeX/TeX и MD — какое-то единство стиля всё равно должно быть.
  • 0
    Небольшая идея для модификации спойлеров: Необходима возможность закрывать спойлер из любого места (плавающая кнопка).
    А то так открываешь спойлер, скроллишь чтоб посмотреть насколько он большой и когда он оказывается слишком большой приходится скроллить назад и закрывать его.
    Далеко за примером ходить не надо: habrahabr.ru/post/262687
    • 0
      А еще было бы удобно обернуть кнопку спойлера в тег <a>, пользователи устройств с сенсорным экраном будут вам благодарны. И, как уже говорили выше, сделать то же самое с тегом <attr>.
    • +2
      Кстати на счёт ссылок на статьи внутри ТМ — давно пора уже их автоматом распознавать и заменять на название статьи, или хотя бы добавлять название в title ссылки, хотя бы.
  • +11
    Сделайте возможность выделить фрагмент с ошибкой, нажать CTRL+Enter и отправлять выделенный фрагмент с ошибкой (как личное сообщение) тому пользователю, чья это статья.
    • 0
      Задумка хорошая, только как правило если ошибки есть, то их несколько. Кроме того, если есть неточности, то можно сразу предлагать на что исправить (впрочем, как и ошибки). Так что можно немного развить эту тему и по ctrl+enter Не сразу отправлять сообщение, а добавлять в черновик в виде списка
      • +1
        Можно предварительно перед отправкой (после нажатия CTRL+Enter) вызывать диалоговое окно с полем для ввода комментария (для ввода предложения по исправлению), и только потом отправка сообщения после закрытия диалогового окна.

        Если ошибка одна, то простительно и как бы не сильно портит впечатление от прочтения.
        Но если их больше двух, то уже возникает недовольство.
  • +6
    Короче, Маркдаун (Гитхаб, Коммонмарк).
  • +2
    Пробовал внутри тега <spoiler> поместить три тега <twitter> (один за другим).

    Дело кончилось тем, что сперва GeekTimes сломался, а затем кто-то (модератор, надо полагать) сменил <twitter> в моём комментарии на простой <a>. Или, вернее сказать, убрал <twitter> и </twitter>, чтобы содержимое воспринималось как простой URL и автопреобразовывалось в гиперссылку (с откусыванием той части URL, которая предшествует доменному имени).

    Поэтому совет: продумывайте работу вложенных тегов, особенно нестандартных.
  • 0
    Предлагаю администрации TM предусмотреть (по примеру Гитхаба) возможность публикации картографических данных в формате GeoJSON (в том числе — с дополнительным оформлением их в формате simplestyle), которые автоматически показывались бы на карте OpenStreetMap (а не Яндекса и не Гугла, ибо они существенно проприетарнее).

    Придумайте для этой цели какой-нибудь нестандартный тег.
    • –1
      Или mapbbcode.
      • 0
        Мне как веборазработчику JSON более привычен и даже более понятен, чем BBCode.

        Например, я знаю, как экранировать кавычку в GeoJSON, если она появится в заголовке геоточки (который и сам также должен быть весь заключён в кавычки в GeoJSON + simplestyle); но не знаю, как экранировать скобку, если она появится в заголовке геоточки (который и сам также должен быть весь заключён в скобки в MapBBCode, если я правильно понял пример его).
  • 0
    «Поэтому будет здорово, если авторы будут применять этот лайфхак (который мы не делаем автоматически, так как до ката может располагаться несколько картинок)»
    А если автоматически вставлять ссылку для последней картинки?
  • +1
    Приятно было осознать после прочтения, что практически всем советам я следую.

    Просьба сделать возможность отцентрировать не только картинку, но и текст, иногда этого очень не хватает, когда надо подписать картинку.
  • +4
    просто копируйте адрес статьи сразу после публикации и привязывайте его к картинке до ката.
    А что если сделать специальную уникальную ссылку на сам пост: <a href="!post">Я ссылка на полную версию поста</a> для того, чтобы не совершать этих свистоплясок (сохранил, скопировал, изменил, сохранил).
  • +6
    Было бы неплохо внедрить LaTeX, например так как это сделано на dxdy. Вставка формул выполняется спецтегом



    Просто при вставке большого количества огромных формул со сторонних ресурсов html-конструкции делают пост при редактировании крайне трудночитаемым. К тому же, так было бы удобно редактировать формулы при написании статьи
  • +5
    >>> А ещё изображениям можно задавать атрибуты width и height – специально для перфекционистов, которые хотят до пикселя выровнять в тексте публикации какую-нибудь иконочку.

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

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

    UPD. А вообще, хотелось бы автоматического добавления этих атрибутов в тег IMG, при загрузке картинки на хабрасторадж.
    • 0
      хотелось бы автоматического добавления этих атрибутов в тег IMG при загрузке картинки на хабрасторадж
      Только если это не сломает автоматическое уменьшение картинки по ширине (до ширины страницы), сейчас действующее для тех картинок, которые шире страницы (для кадров из видео FullHD, например).
  • 0
    Добавлю один хак от себя. Расширение It's All Text! для Firefox позволяет писать пост в вашем любимом редакторе, со всей его мощью автозавершения тегов, шаблонами и прочим. Текст в поле ввода на странице обновляется автоматически при сохранении в редакторе.

    P.S. Аналоги для хромированных браузеров здесь
  • 0
    Спойлер это зло. При сохранении статьи в PDF информация из них не видна. [CTRL+A / C / V] не сработает, если заранее не понажимать на них.
    • 0
      Интересный и неочевидный нюанс, спасибо.
      • 0
        Добавка: версию для печати бы.
        • 0
          Такая версия почти готова для Fx и Safari в режиме «Reader view». Но, как тут уже писали, контенту не хватает тегов <p>. Без этого ридер-вью не появляется. И колонка оказывается узкой, из-за чего на бумаге выйдет или большой шрифт, или надо использовать специальные настройки принтера для печати в 1/2 или 1/4 страницы. Вот ссылки с одного и того же Хабра, но у первой авторы собственноручно вписали теги <p>, отчего появляется кнопка «Reader view».
          habrahabr.ru/post/127049
          А на текущей статье (под которой этот коммент) — не появляется.
          Вот что пишут про режим «Reader view» и важность тегов <p>:
          stackoverflow.com/questions/30661650/how-does-firefox-reader-view-operate-ff-version-38-0-5
  • –2
    Ещё один лайфхак для подготовки статей (и комментариев) — использовать расширение браузера HabrAjax.

    Оно расширяет панель инструментов для вставки тегов в поле ввода. Имеется выбор цвета текста (из палитры в 216 цветов), ввод центрированных или прижатых к правому краю картинок, выбор языка кода не из списка, а из 2 блоков с названиями доступных языков.
          
    Далее, удобная ссылка на Habrastorage в заголовке каждой страницы и ряд настроек, в том числе и экспериментальных, опробовавшихся на протяжении долгого времени.

    Лайфхак бонусом, для комментариев:
       <img src="https://habrastorage.org/...
    

    Чтобы отодвинуть картинку от края особенно в комментарии, где центрирование не работает, используйте &nbsp;
  • 0
    --
  • +10
    <прошлый комментарий был отправлен из-за того, что я случайно задел не ту клавишу, что как-бы намекает>

    У нас на работе пару лет назад поставили что-то на основе Jive для коллаборации, и я внезапно узнал, что бывают действительно удобные веб-редакторы: нетормозящие, сравнительно неглючные, с удобными фишечками типа Copy-Paste картинок из других приложений (я не знаю, как они это делают, но это супер-удобно!) и сравнительно точным переносом форматирования документа из того же MS Word.

    Там тоже есть свои недостатки, но после этого смотреть на форму редактора Хабра — площадки по большей части для программистов и веб-разработчиков — без уныния не могу. В результате я ушел в добровольное R/O на Хабре и пишу по работае там, а «для себя» на WordPress.

    Данная статья сравнима с «как извратиться и сделать на нашем Asm то, что в уже года три как можно сделать двумя строками на <вставьте свой любимый язык здесь>». Пора уже повернуться к юзерам передом, а не рассказывать, какими ухищрениями надо обходить косяки, костыли и еще неизвестно что разработчиков ресурса.
  • 0
    Подпись – italic + font color=«99999»

    Мне кажется, для блока «изображение + подпись» было бы полезно предусмотреть соответствующую псевдоразметку. Например:

    [image]
        [src]http://img.labnol.org/di/jpg_vs_png.png[/src]
        [caption]PNG vs JPEG[caption]
    [/image]
    

    Даже абстрагируясь от странных рекомендаций использовать HTML-разметку представления 15-летней давности (в частности элементы FONT), это поспособствовало бы единообразию оформления разных статей.
    • 0
      Даже не надо ничего нового придумывать — существует стандартный тэг <figcaption>
      • 0
        Преимущество псевдоразметки перед hard-coded-HTML-кодом — в возможности автоматического изменения HTML-кода всех блоков одного типа, например, при изменении дизайна сайта.

        P. S. Не тэг и даже не тег, а элемент. В DOM-дереве тегов нет. ;-)
    • 0
      псевдоразметку
      Ну, нет :( Те же фаберже, только сбоку. Неужели для набора тегов (раз уж мы говорим о разметке, то это теги?) удобно постоянно переключать раскладки?
  • +3
    Дорогой Хабр, обнови, пожалуйста, стрелки для голосования за комментарий. На экранах с высокой плотностью пикселей вроде Retina очень глаз режет
    • +3
      Спасибо, так гораздо лучше :)
      • 0
        Больше никакие значки не желаете обновить? ;)
        А то если они закончатся, это же придётся приступать к настоящим, многолетним проблемам!
        • 0
          Желаю обновить ещё кнопку обновления комментариев сбоку, тоже замылена :) А по многолетним проблемам — думаю ТМ сами расставят приоритеты для задач и хотелок ;)
          • 0
            Ах да, и иконки соц сетей в подвале сайта тоже
          • 0
            И расставляют-таки, кто ж спорит.

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

Самое читаемое Разное