Принцип wysiwyg означает что
Как расшифровывается аббревиатура WYSIWYG
В этой статье пойдет речь о том, каким образом расшифровывается аббревиатура, выглядящая как WYSIWYG. Часто пользователи и начинающие разработчики приложений встречаются с этим замысловатым словом на английском языке. Кнопку с таким названием можно найти в различных редакторах или программах
Расшифровка замысловатой аббревиатуры WYSIWIG
Хорошо демонстрирует технологию WYSIWYG сфера веб-программирования. Если вам хотя бы раз в жизни доводилось создавать текст для сайта или веб-страницы, вы, вероятно, уже сталкивались с ней. Практически все современные редакторы HTML-кода имеют такую кнопку. При нажатии на неё, редактор отображает все в том виде, в котором текст с кодом будет виден пользователям. Таким образом разработчик может оценить конечный результат того, что делает при помощи кода или других средств.
История появления технологии
Когда еще не было этой функции, разработчики могли увидеть результат только после компиляции. Это процесс, при котором компьютер обрабатывает код и выполняет все инструкции документа, подготавливая программу к использованию. Для создания форматированных документов применялись редакторы, в которых был доступен только язык разметки. В редакторе нужно было ввести коды или теги, которые «рисовали» кнопки, определяли цвет текста, его шрифт, расстановку и т. д.
Даже спустя некоторое время в 1980-х годах домашние компьютеры были не в силах использовать технологию под аббревиатурой WYSIWYG из-за недостаточного количества ресурсов на борту. Её продолжали применять только на мощных станциях при разработке ПО.
Где встречается функция WYSIWYG
Руководствуясь расшифровкой букв WYSIWYG, можно понять, что мы пользуемся приложениями с данной функцией в повседневной жизни. И даже, возможно, не подозреваем об этом. Например:
На сайтах редакторы применяются для поддержки разных уровней знаний веб-разработки. А также для более быстрого создания HTML-страницы. Но в то же время редактор позволяет получить доступ на более низком уровне. Чтобы в любой момент разработчик смог править код на уровне HTML, PHP или JavaScript.
Другие названия интерфейса редактора
Но это уже из разряда сугубо разговорных искажений замысловатых букв WYSIWYG. Если вам интересно испробовать на своём ПК такой редактор, вы можете обратить внимание на следующие:
В статье мы разобрали, каким образом расшифровывается аббревиатура, имеющая вид WYSIWYG. А также в каких областях применяется популярный редактор.
WYSIWYG HTML редактор в браузере. Часть 2
Это вторая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.
Команды редактирования
Код, как минимум в IE, несколько старомоден. Во множестве команд используется ужасный тег font:
Генерируемая разметка не является валидным XHTML и как правило даже валидным HTML кодом.
Opera генерирует код сходный с IE (нет, не полностью), используя тег font и так далее.
Safari генерирует форматирование используя span’ы и инлайн CSS. Достоинство подхода Safari в том, что он по крайней мере является валидным HTML 4.01 Strict.
Mozilla поддерживает 2 режима работы — она либо генерирует презентационные теги как IE/Opera или же стилизирует контейнеры как Safari.
Если вы уверены, что вам нужен валидный HTML код, то вам стоит чистить генерированный редактором код на стороне сервера, что бы из этого безобразия получить валидный (X)HTML. (Ну, вам это в любом случае стоит делать, что бы избежать XSS-атак).
Горячие сочетания клавиш
Множество команд доступно через горячие сочетания клавиш, например Ctrl/Cmd + B для полужирного начертания, Ctrl/Cmd + Z для отмены последнего действия и т.д. Но эти сочетания могут различаться в зависимости от локализации браузера.
Назначенные сочетания клавиш изменить нельзя, но их можно перезаписать с помощью скрипта перехватывающего события клавиатуры.
API редактора
Возможно, вы захотите сделать панель управления, что бы позволить пользователю использовать команды редактирования. Это можно сделать с использованием API редактора. Это API не похоже на обычное API DOM, на самом деле это скриптовая адаптация интерфейса IOleCommandTarget, который является COM интерфейсом используемым Microsoft для синхронизации панели управления и редактирования документа.
API находится в объекте document и состоит из метода execCommand и нескольких методов с префиксом «query» которые возвращает информацию о команде.
Все методы принимают ID команды в качестве первого аргумента, это строка, содержащая имя команды. Собственно, методы:
ExecCommand
Выполняет команду применительно к текущему выделению. Некоторые команды переключаются между состояниями в зависимости от контекста. Например, если вы применяете команду «Bold» к выделению, которое уже имеет полужирное начертание, то выделение будет отображено в нормальном начертании. Некоторые команды тредуют аргументов, например forecolor требует в качестве аргумента код цвета.
Некоторые команды вызывают модальные диалоги — например, команда link вызовет диалог, который предложит ввести URL. Диалоги нельзя изменить, но возможно заменить их. Например:
Что есть что:
command: Строка; имя команды.
useDialog: Булев тип; Показывать ли встроенный диалог (Не все команды могут вызывать диалоги).
value: Значение, принимаемое командой. Не все команды принимают значения; Если вызывает диалог, то значение береться из него.
result: true если команда выполнена, false если отменена пользователем (закрытием диалога) или команда не может быть выполнена.
Если выделения нет (только курсор), команды форматирования текста применяются по разному, в зависимости от браузера. Если курсор внутри слова, IE применит форматирование к слову; остальные браузеры применят его к следующему символу, который будет набран, если курсор не будет перемещен назад.
QueryCommands
Query-команды имеет смысл использовать для определения состояния кнопок на панели управления в зависимости от текущего выделения и положения курсора.
QueryCommandEnabled
Определяет возможно ли выполнение команды применительно к текущему выделению. Например «unlink» можно применить только в том случае, если курсор находится внутри ссылки. Если выделение содержит область недоступную для редактирования, то никакие команды выполнятся не будут.
QueryCommandState
Показывает была ли команда применена к выделению, тоесть если выделение имеет полужирное начертание, то QueryCommandState вернет true для команды bold.
QueryCommandValue
Возвращает значение некой команды для выделения. Значение соответствует тому, которое было задано при использовании execCommand, тоесть, например для ForeColor это будет код цвета (в виде строки) для текущего выделения.
Формат будет отличаться в разных браузерах. Например, ForeColor возвращает шестнадцатеричное значение в IE (такое как #ff0000), а другие вернут RGB выражение, такое как Rgb(255,0,0).
Некоторые значения вариируются в зависимости от локализации браузера, например значение для FormatBlock в IE вернет имя для параграфа на языке локализации интерфейса баузера.
Команды, для которых значений нет, например bold, просто вернут false. (API содержит два дополнительных метода, queryCommandSupported и queryCommandIndeterminate, но они слишком глючные, что бы хоть как то их использовать.)
Range и Selection API
Встроенные команды полезны, но невозможно изменить их поведение или добавить нестандартную реализацию. Используя Range и Selection API вы можете использовать произвольные HTML трансформации, которые можно использовать для реализации нестандартных команд.
Проблема в том, что любые трансформации затрагивающие DOM разрушают стек undo, который используется для реализации команд UnDo/ReDo. Это не слишком хорошо, но может быть приемлемой ценой за нестандартные команды.
Range/selection API имеют два основных класса:
Range — непрерывный диапазон символов документа. Диапазон может перекрывать границы элементов. У диапазона есть стартовая и конечная точки. Если стартовая точка совпадает с конечной, то диапазон называется вырожденным.
Selection — представляет текущее пользовательское выделение в документе. Выделение содержит один подсвеченный диапазон. Если диапазон выделения вырожден, то он отображается как курсор. (Диапазоны и выделения могут быть использованы вне элементов в режиме редактирования. Вы можете создать выделение в документе, доступном только для чтения. Такое выделение, впрочем, не может быть вырожденным, так как курсор показывается только когда элемент в режиме редактирования.)
Эти принципы идентичны во всех браузерах, но сами API отличаются по реализации в IE и всех остальных браузерах. IE использует собственное проприетарное решение для range м selection API, остальные браузеры используют W3C DOM Range API в комбинации с нестанжартизированным selection API.
Основное отличие в том, что в IE содержимое диапазона доступно как строка с HTML разметкой. В W3C DOM Range API, содержимое диапазона доступно как дерево узлов DOM.
Пример диапазона
Что бы показать различные подходы, ниже приведена команда, которая применяет тег «code» к текущему выделению.
В IE (editWindow это ссылка на frame в designMode):
Выделение элементов управления
IE поддерживает выделение элементов управления, которое отличает от обычного выделения диапазона. Выделение элемента управления происходит, когда вы кликаете на объект, такой, как изображение, элемент управления формы или рамку таблицы.
В IE возможно выделение более, чем одного элемента одновременно с использование комбинации ctrl+клик. Остальные браузеры не поддерживают концепцию выделения элементов управления; в остальных браузерах выделение это всегда текстовый диапазон.
Выводы
Статья рассматривает основные принципы редактирования данных в браузере. Часть вторая статьи показывает множество примеров применения вышеописанных API.
От переводчика: если это интересно не только мне, то я переведу и вторую статью.
СОДЕРЖАНИЕ
Имея в виду
Современное программное обеспечение отлично справляется с оптимизацией экрана для определенного типа вывода. Например, текстовый процессор оптимизирован для вывода на обычный принтер. Программное обеспечение часто имитирует разрешение принтера, чтобы максимально приблизиться к WYSIWYG. Однако не это главная привлекательность WYSIWYG, а именно способность пользователя визуализировать то, что они производят.
Во многих ситуациях тонкие различия между тем, что видит пользователь, и тем, что получает пользователь, не важны. Фактически, приложения могут предлагать несколько режимов WYSIWYG с разным уровнем «реализма», включая
История
Эти приложения обычно использовали произвольный язык разметки для определения кодов / тегов. У каждой программы был свой особый способ форматирования документа, и переход от одного текстового процессора к другому был трудным и длительным процессом.
Использование тегов разметки и кодов остается популярным сегодня в некоторых приложениях из-за их способности хранить сложную информацию форматирования. Однако, когда теги становятся видимыми в редакторе, они занимают место в неформатированном тексте и в результате могут нарушить желаемый макет и поток.
Bravo был выпущен коммерчески, и программное обеспечение, в конечном итоге включенное в Xerox Star, можно рассматривать как его прямой потомок.
Этимология
Что касается вычислений, есть несколько утверждений относительно первого использования фразы:
Критика
Поскольку разработчикам приложений WYSIWYG обычно приходится учитывать множество различных устройств вывода, каждое из которых имеет разные возможности, существует ряд проблем, которые необходимо решать в каждой реализации. Это можно рассматривать как компромисс между несколькими целями дизайна, поэтому приложения, использующие разные решения, могут подходить для разных целей.
Обычно цели разработки WYSIWYG-приложения могут включать следующее:
Однако, как правило, невозможно достичь всех этих целей одновременно, и основная проблема, которую необходимо преодолеть, заключается в изменении разрешения на выходе. По состоянию на 2016 год мониторы обычно имеют разрешение от 102 до 125 пикселей на дюйм, в то время как принтеры обычно имеют разрешение от 240 до 1440 пикселей на дюйм. В некоторых принтерах разрешение по горизонтали отличается от разрешения по вертикали. Это становится проблемой при попытке разложить текст; потому что старые технологии вывода требуют, чтобы интервал между символами составлял целое число пикселей (поскольку ошибки округления приводят к тому, что для одного и того же текста требуется разное количество места в разных разрешениях).
Решения для этого включают следующее:
Другие проблемы, с которыми сталкивались в прошлом, включают различия в шрифтах, используемых принтером и на экране дисплея (в значительной степени решаемые за счет использования технологий загружаемых шрифтов, таких как TrueType ), а также различия в цветовых профилях между устройствами (в основном решаемые принтером. драйверы с хорошей программой преобразования цветовой модели).
Вариации
Многие вариации используются только для того, чтобы проиллюстрировать точку зрения или пошутить, и имеют очень ограниченное реальное применение. Некоторые из предложенных включают следующее:
Редактор WYSIWYG: Я вижу, что вы видите
WYSIWYG является аббревиатурой выражения «То, что вы видите, это то, что вы получаете».
Принцип, который разделяет разные редакторы: действительно ли это хорошая идея работать с текстами и сайтом только в интерфейсе редактора, позволяя программе самостоятельно писать соответствующий код в фоновом режиме?
В этой статье мы хотим рассказать вам о преимуществах и недостатках этой концепции и познакомить вас с самыми успешными редакторами HTML WYSIWYG.
Что именно означает WYSIWYG
Эта путаница букв означает, что текст в конечном результате будет выглядеть точно так, как видно в редакторе; большинство пользователей, которые знают только Word или программы для создания и редактирования текстов, с трудом понимали бы что-то другое. И на самом деле в случае Word и другого подобного программного обеспечения это просто редактор: текст, символы, полужирный, разделение абзацев, который будет выглядеть так же, как вы их видите, как вы их разрабатываете: если вы хотите выделить конкретное слово курсивом, достаточно выделить его и нажать на соответствующую кнопку.
В действительности такие тексты следует рассматривать как результат кодов. Без программы Word, вы должны написать в своем тексте соответствующий код (например, « Word »), который затем интерпретируется и применяется терминалом, который в нашем случае является принтер. Однако преобразование документа Word в файл PDF или отображение документа в браузере также можно рассматривать как вывод цифровой публикации. Для редакторов HTML выбор WYSIWYG имеет большое значение. Прежде чем вдаваться в подробности, мы должны кратко проиллюстрировать историю этих редакторов.
История редакторов WYSIWYG
До эпохи компьютеров все было WYSIWYG, поскольку компиляция не нужна: если вы пишете на листе бумаги или используете пишущую машинку, вы получаете окончательный результат без посредников. Только при разработке компьютеров и программ для записи возникает необходимость разобраться, что написано на экране и что должно появляться при печати. Перфорированные карты вскоре достигли пределов программирования, поэтому разработчикам программного обеспечения пришлось искать еще одно решение для вставки кодов: текстового редактора. Поэтому первые программы обработки текстов состояли из редакторов для программистов. Однако строки символов, включенные в эти программы, не были разработаны с целью их доработки в качестве документов.
Одной из первых программ обработки текстов был WordStar, который появился в 1978 году и который до сих пор является выдающимся редактором. Первоначально WordStar полагался на операционную систему CP / M и имел несколько функций. В первой версии писателям приходилось работать с маркерами для набора печати; согласно общему мнению, это первый редактор WYSIWYG. С помощью этого редактора можно было выделить курсив или полужирный шрифт с результатом, отображаемым непосредственно на мониторе. Однако, надо учитывать тот факт, что то время компьютеры были не очень продвинуты с точки зрения графики, и это было проблематичным : они еще не могли отображать аутентичный образ, который возникает в результате вывода на монитор.
По мере развития компьютеров тексты стали выглядеть лучше в их графических аспектах. Но WYSIWYG не останавливается на обработке текстов: редакторы играют важную роль, особенно для создания веб-сайтов, показывая результат, как только вводятся символы. Большинство интернет-страниц написано с использованием языка гипертекстовой разметки (HTML). Как и в случае разметки и языков программирования, прежде чем результат станет видимым, необходимо скомпилировать код.
Кто создает сайт с использованием HTML, должен иметь в виду следующий вывод: редакторы HTML и WYSIWYG просто облегчают работу. Первым в своем роде редактором для сайтов, является WebMagic, выпущенный в 1995 году компанией Silicon Graphics. В течение следующих двух лет появились знаменитые редакторы Microsoft FrontPage (больше не доступны на рынке) и Dreamweaver от Macromedia (теперь часть Adobe). Спрос на хорошие редакторы широк, но что должно делать такое программное обеспечение?
Функции редакторов HTML и WYSIWYG
Редактор создания веб-сайта WYSIWYG должен позволить пользователям без глубоких знаний HTML создавать веб-страницы. Фактически, в этих программах пользователям не нужно вручную вводить код и использовать программные функции, которые создают код HTML в фоновом режиме.
Шрифт : на момент основания Интернета возможности использовать разные типы шрифтов были очень ограниченными. Beyond Times New Roman, Verdana и Arial, были установлены по умолчанию на большинстве компьютеров и веб-дизайнеры не могли вводить другие символы. Сегодня эта проблема стала не актуальной. С помощью редактора WYSIWYG пользователи могут выбирать из многих шрифтов.
Типовые шрифты : примеры этих символов выделены курсивом, полужирным шрифтом, подчеркиванием, зачеркиванием. С соответствующим редактором WYSIWYG пользователям не нужно верстать эти элементы, независимо от того, является ли это HTML-кодом или текстовой обработкой.
Макет : цвет композиции и белые пространства являются важной частью появления веб-сайта. Поместив контент в одном месте, а не в другое, программисты обращают внимание посетителей и задают конкретный стиль сайту. Без возможностей WYSIWYG программисты должны выбирать поэтапное пустое пространство, то есть пространство, которое не заполнено каким-либо контентом.
Структурирование : как и для печатных текстов, для веб-сайта содержимое должно быть структурировано на странице, чтобы посетитель мог легко оперировать с ними. Через титры и субтитры, которые можно легко установить в редакторах WYSIWYG, читатели легче ориентируются в тексте.
Таблицы : со списками и таблицами можно дополнительно улучшить содержимое. С помощью программного обеспечения, поддерживающего WYSIWYG, веб-дизайнеры могут напрямую вставлять элементы, не прибегая к кодам.
Также полезно иметь возможность перейти от одного представления WYSIWYG к редактору с кодом, поскольку программы имеют ограничения и могут без причины появиться не всегда понятные ошибки.
Недостатки концепции WYSIWYG
Редакторы WYSIWYG, кажутся идеальным решением: вы можете создавать документы, даже веб страницы, подходящие для публикации без знания HTML или программирования. Однако по некоторым причинам, многие пользователи предпочитают полагаться на редактор, например Notepad ++, где нужно вводить код напрямую, потому что это позволяет полностью контролировать конечный результат.
Используя HTML или другие языки разметки, пользователи точно видят, что происходит с текстом. По этой причине многими при создании текстов для печатных документов или файлов PDF используется пакет программного обеспечения TeX macrolingu или LaTeX на основе TeX.
Первоначально разработанный для научной работы, TeX позволяет поддерживать точные спецификации форматирования и лучше интегрировать математические и научные формулы в тексте.
В этом случае обнаруживается конкретная проблема: с WYSIWYG не гарантируется, что результат будет виден точно так же, как веб-дизайнер видит на мониторе, поскольку в World Wide Web нет ни одного конечного результата: разные системы и браузеры отображают контент по-разному, не считая мобильных устройств, которые имеют другой способ представления контента. По этой причине обещание «То, что вы видите, это то, что вы получаете», по крайней мере для веб-сайтов, бессмысленно, и веб-дизайнеры обычно тестируют свои сайты в разных системах, прежде чем размещать выходные данные в Интернете.
Редакторы WYSIWYG создают код HTML в фоновом режиме, но мы не можем знать точно, что этот код отвечает профессиональным требованиям. В прошлом веб-дизайнеры неоднократно жаловались, что эти программы производят излишне избыточные или дефектные исходные коды, что приводит к длительному времени загрузки и сообщениям об ошибках.
Информация
Новый редактор построен на принципе WYSIWYG. Эта аббревиатура расшифровывается как What You See Is What You Get — Что видишь то и получишь. То есть вы редактируете публикацию сразу в том виде, в каком её увидят ваши читатели. Потребность в использовании тегов отпала — форматировать текст можно на лету.
Создание публикации в новом редакторе разделено на два этапа. На первом вы пишете текст поста, на втором определяете его настройки отображения в ленте.
Создание публикации
Когда вы заходите на страницу создания нового поста (например, через иконку «карандаш» в верхнем правом углу), сразу открывается чистый лист редактора. Всё, что вы разместите на этом экране, увидят читатели, открывшие публикацию из ленты.
Сначала заголовок поста — не более 120 символов.
Ниже сам редактор — ставьте курсор под заголовком и начинайте вводить текст. Для форматирования можно использовать любой из удобных способов:
Выделить текст — появится всплывающее меню с кнопками:
Использовать стандартные горячие клавиши, например:
⌘/CTRL + B — выделение текста жирным
⌘/CTRL + U — подчёркнутый текст
⌘/CTRL + I — курсив
⌘/CTRL + K — привязка ссылки к тексту
⌘/CTRL + Z — отмена действия
Вставлять дополнительные элементы также можно несколькими способами:
через кнопку « + » с левой стороны редактора
через клавишу « / » на клавиатуре
Любой из этих вариантов вызовет всплывающее меню вставки элементов, о которых чуть ниже.
Элементы могут быть не только блочными, но и строчными — через клавишу «/» внутри строки можно вставить небольшое изображение или формулу.
Ну или можно сразу вставить markdown-код из внешнего редактора, должно сработать.
Меню с блочными элементами
Просто выберите нужный элемент в появившемся меню и он вставится. Можно пользоваться только клавиатурой: жмём « / » → появляется меню → начинаем вводить « та… » → выбирается « Таблица ». Или набираем на клавиатуре « /ци », жмём Enter → вставляется цитата.
Заголовок. Размер заголовка можно поменять в меню настроек блока (троеточие справа).
Цитата. Вставляет блок с вертикальной чертой слева.
Маркированный список. Может быть разных уровней вложенности.
Медиаэлемент. Пункт для вставки в статью информации с внешних ресурсов: твиты, записи из соцсетей, ролики с YouTube, сниппеты с Codepen и т. д.
Изображение. Загрузка картинок с вашего устройства. Из настроек — можно расположить по левому краю, добавить рамку или подпись.
Разделитель. Выровненная по центру полоска, можно использовать для отделения одного раздела от другого.
Таблица. По умолчанию вставляется таблица 3х3, но можно добавлять как строки, так и столбцы — соответствующие кнопки появятся при нажатии на таблицу. Главное не переусердствовать: всего-всего уместить в таблицу не получится, поэтому следите за тем, чтобы содержимое таблицы было удобно считывать пользователям разных устройств. Ячейки таблицы можно объединять/разделять, а их содержимое — расположить по центру или правому/левому краю.
Код. Вставка блока с кодом, который будет обрамлён в рамку, а строки будут пронумерованы. Опционально можно выбрать язык для подсветки синтаксиса.
Формула. Ввод математических формул в Tex-формате.
Спойлер. Вставка разворачиваемого блока, внутри которого обычно прячут какую-то дополнительную информацию (текст, ссылки, длинный код) — для вставки доступны все перечисленные выше элементы. Опционально можно задать заголовок спойлера.
Якорь. Элемент, который может быть полезен для составления оглавления. Вставьте якорь в нужном месте поста и присвойте ему имя, а в другом месте сделайте ссылку на него.
Со временем список элементов может меняться.Каждый описанный выше элемент является блоком, который можно двигать вверх-вниз или удалять.
Важно: в новом редакторе нет понятия «кат», то есть элемента, разделяющего пост на вступление (выводимое в ленте) и основное содержимое. Текст вводной части поста (для ленты) настраивается на втором экране редактора и может отличаться от текста в начале самого поста.
Важно: в редакторе имеется автосохранение — оно сохраняет в localStorage браузера весь тот материал, который вы вставили в редактор. То есть если вы случайно закроете вкладку с редактором, всегда можно открыть её заново и восстановить текст.
Но если вы откроете форму редактора в другом браузере (например, с другого устройства), текст не восстановится. Чтобы иметь возможность править пост из разных браузеров на разных устройствах, нужно сохранить черновик публикации (чтобы ей присвоился ID).
Если вы готовите статью во внешнем редакторе
Написать большую статью на одном дыхании бывает сложно, почти всегда это занимает немало времени — возможно, вместо формы на Хабре вы захотите использовать удобный вам текстовый редактор. А если статью нужно предварительно согласовать с кем-то, то совершенно точно есть смысл подготовить материал где-нибудь в GoogleDocs.
Если вы пишете статью в обычном текстовом редакторе, то можете сразу форматировать текст markdown-разметкой — потом просто скопируйте всё и вставьте в форму редактора. Он автоматически преобразует разметку в нужный результат.
Если вы пишете статью в Google Docs или ворде, то можете выделить там весь текст (с картинками) и вставить в форму создания поста — должно подхватиться всё форматирование (включая заголовки) и даже картинки.
Но в обоих случаях убедитесь, что всё корректно перенеслось и загрузилось. Если что-то не работает — пишите в форму обратной связи.
Размещение
Когда вы допишете текст, отформатируете его (заголовки-шрифты-ссылки) и вставите все необходимые медиаэлементы (изображения, видео) ещё раз проверьте публикацию — именно в таком виде её увидят все читатели.
А дальше останется всего ничего: нажмите кнопку «Готово к публикации» и на втором экране редактора укажите «системные» настройки. Среди них:
Тип публикации. «Статья» или «Новость». Первый вариант подходит для больших материалов — выбрав его, вы подтверждаете, что являетесь автором текста и рейтинг поста зачислится вашему профилю в полном объёме. Второй вариант подходит для небольших материалов, которые имеют признаки «новостей» (некая информация, актуальная здесь и сейчас).
Язык публикации. Укажите язык, на котором написана публикация — чтобы статью видели те пользователи сайта, которым ваша статья подойдёт по языковым настройкам.
Хабы. Выберите в выпадающем меню один или несколько (до пяти) хабов, в которые вы планируете разместить свой пост. Вместо одного из хабов можно выбрать блог компании — укажите, если он есть (тогда рейтинг за пост пойдёт в зачёт и вашей компании).
Ключевые слова. Ещё одно обязательное поле, где через запятую укажите до 10 ключевых слов по теме вашего материала. Через запятую, без #. Подберите такие слова, по которым ваш пост смог бы найти кто-то посторонний. Эти ключевые слова будут в самом конце вашей публикации.
Переводы и обучающие материалы. Если вы готовите перевод, то следует нажать чекбокс «Переведённый материал» — тогда дополнительно потребуется указать автора оригинала и ссылку на него, а в зачёт пойдёт лишь половина рейтинга. У опубликованной статьи под заголовком будет пометка «Перевод» со ссылкой на первоисточник — чтобы свести к минимуму риск претензий от автора. А если ваша статья носит обучающий характер, то нажмите чекбокс «Tutorial». Тогда после публикации под заголовком появится одноимённый значок.
Отображение публикации в ленте
В этом разделе редактора настраивается внешний вид той части, которая будет видна в лентах пользователей — на главной странице, внутри хаба и т. д. Здесь свободы действий чуть меньше, но зато вступительные части публикаций стали выглядеть в одном формате.
Желательно загрузить обложку поста (картинка в формате jpg, gif или png, рекомендуемый размер 780×440), а также ввести текст вводной части (до 2 тысяч символов).
Важно: изображение (обложка) и содержимое вводной части поста (выводимое в ленте) может отличаться от того вступления, которое будет видеть пользователь на странице самой публикации. Это даёт дополнительную свободу действий, но иногда может мешать — в таком случае используйте первые абзацы своей статьи (по умолчанию эта часть будет подгружаться автоматически). У вводного текста также есть возможности форматирования, но вставить видеоролик или несколько картинок не получится.
Текст кнопки «Читать далее» можно оставить по умолчанию, но при необходимости его также можно поменять.
Если пост нужно выпустить в определённое время, воспользуйтесь функцией запланированной публикации — выберите желаемые дату и время.
Всё, финишная прямая с тремя вариантами: можно вернуться к редактированию поста, сохранить его в черновики или опубликовать. В первом случае вы вернётесь на первый экран редактора, во втором — пост сохранится у вас в профиле с присвоением ID, а в последнем случае он сразу окажется на сайте и его начнут читать пользователи Хабра.
Не забывайте следить за комментариями и отвечать на них в случае необходимости. Советы по работе с обратной связью мы уже давали.
Если остались вопросы по работе редактора или появились предложения — можете смело отправлять их в форму обратной связи.