WYSIWYG: я подглядываю своим маленьким глазом

Аббревиатура WYSIWYG расшифровывается как «что видишь, то и получаешь». Хорошая ли это идея — поверхностно работать над текстами и веб-сайтами и позволить программам самим писать код в фоновом режиме? Мы расскажем о преимуществах и недостатках этой идеи и представим самые популярные HTML-редакторы WYSIWYG.

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

Однако подобные тексты следует рассматривать как код. Без таких программ, как Word, вы бы ввели в текст тег (например, ‘<italic>word</italic>’), который устройство затем интерпретирует и реализует. В нашем примере таким устройством является принтер. Однако преобразование документа Word в файл PDF или отображение документа в браузере также может рассматриваться как выход, например, цифровая публикация. Вопрос о том, является ли HTML-редактор WYSIWYG-редактором или нет, играет важную роль. Но прежде чем перейти к деталям, имеет смысл кратко рассмотреть историю этих редакторов.

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

Одной из первых программ обработки текстов была WordStar, которая была выпущена в 1978 году и до сих пор имеет выдающегося пользователя в лице писателя Джорджа Р.Р. Мартина. Изначально WordStar работал на операционной системе CP/M и имел всего несколько функций. В первой версии писателям все еще приходилось работать с тегами для набора текста. Но общее мнение таково, что программа была первым WYSIWYG-редактором. Можно было использовать в тексте курсив или полужирное форматирование и сразу же увидеть результат на мониторе. Проблема в то время заключалась в том, что компьютерная графика была не очень развита: компьютерные системы не могли отобразить точную репродукцию того, как будет выглядеть текст при печати или публикации.

С ростом возможностей систем PC и Mac текст стал лучше отображаться на мониторе. Но принцип WYSIWYG не ограничивается работой с текстом: редакторы, которые уже отображают результат по мере ввода текста, играют важную роль в создании веб-сайтов. Большинство веб-сайтов написаны на языке разметки гипертекста (HTML). Как и в случае с разметкой и языками программирования в целом, код должен быть сначала скомпилирован, прежде чем результат будет виден.

Поэтому, если вы создаете сайт с помощью HTML, вам необходимо иметь возможность увидеть последующий результат. Именно поэтому HTML-редакторы WYSIWYG становятся все более популярными, поскольку они облегчают эту задачу. Первым в своем роде был WebMagic от Silicom Graphics в 1995 году. В последующие два года к ним добавились известные редакторы FrontPage от Microsoft (сейчас уже не выпускается) и Dreamweaver от Macromedia (сегодня входит в состав Adobe). Спрос на хорошие редакторы высок, но что должна уметь делать программа?

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

• Шрифт: в первые дни существования Интернета возможности шрифта были еще очень ограничены. Кроме Times New Roman, Verdana и Arial, которые были установлены на компьютерах в стандартной комплектации, веб-дизайнерам было доступно не так много шрифтов, и было трудно определить, сможет ли браузер посетителя сайта отобразить их или нет. В наши дни такая проблема практически никогда не возникает. В HTML-редакторах WYSIWYG пользователи могут выбирать из множества шрифтов.
• Стиль шрифта: Это когда текст выделяется, например, курсивом, жирным шрифтом, подчеркиванием, перечеркиванием. В соответствующем WYSIWYG-редакторе, будь то для создания HTML-кода или для обработки текста, пользователям не нужно изменять текст вручную, а можно отредактировать соответствующую часть текста, выделив ее и нажав кнопку.
• Макет: Пространство для печати и белое пространство составляют большую и важную часть внешнего вида веб-сайта. Располагая контент определенным образом, веб-дизайнеры направляют внимание посетителя в нужное место, а также могут придать сайту определенный стиль. Без возможностей WYSIWYG программистам пришлось бы указывать «белое пространство», т.е. область, не заполненную контентом, вплоть до пикселя.
• Структура: Как и печатные тексты, содержание сайта должно быть структурировано, чтобы посетители могли ориентироваться в нем. Заголовки и подзаголовки могут быть добавлены с помощью редакторов WYSIWYG и помогают читателям легче ориентироваться в тексте.
• Таблицы: Веб-контент можно улучшить с помощью списков и таблиц. С помощью программного обеспечения, поддерживающего WYSIWYG, веб-дизайнеры могут вставлять элементы напрямую, и им не придется вводить их в виде кода.
• Медиа: Веб-сайты состоят не только из текста; видео, изображения и другие графические элементы составляют большую часть Всемирной паутины. Для правильного отображения этого контента создатели сайтов должны встраивать их в HTML-код. HTML-редактор WYSIWYG делает это автоматически. В большинстве случаев пользователи могут даже перетаскивать объекты в нужные места.

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

Поначалу редакторы WYSIWYG кажутся идеальным решением: Даже не имея навыков HTML или программирования, можно создавать (веб-) документы на компьютере, пригодные для публикации. Но по разным причинам некоторые пользователи предпочитают использовать редактор типа Notepad++, в котором им приходится вводить код напрямую. Это дает им полный контроль над тем, как будет выглядеть конечный результат. Это справедливо и для HTML: каждый, кто когда-либо был на грани отчаяния при создании письма с помощью Word, поймет, что это значит. Программа берет на себя заботу о форматировании, на которое пользователь обычно может повлиять только после просмотра многочисленных окон и меню.

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

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

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

Неплохо полагаться на WYSIWYG-редактор — даже новички могут создавать свои собственные — пусть и простые — веб-сайты. Эти программы являются наиболее популярными:

Macromedia выпустила Dreamweaver в 1997 году (в то время исключительно для Mac OS). Тем временем софтверный гигант Adobe выкупил Macromedia и продолжает развивать Dreamweaver — так же, как и Flash, другой проект Macromedia. Редактор можно использовать как в режиме WYSIWYG, так и в режиме кода. Оба вида можно отображать рядом, чтобы любые изменения в коде были видны в предварительном просмотре. Предварительный просмотр работает даже в различных браузерах и на мобильных устройствах. Последние могут быть привязаны к проекту с помощью QR-кода. Благодаря встроенной функции публикации пользователи также могут перемещать созданный контент непосредственно на свои серверы и размещать его в Интернете. Dreamweaver является частью Creative Cloud, поэтому на него можно оформить подписку.

С помощью SeaMonkey пользователи получают на свой компьютер полный пакет для работы в Интернете. Помимо браузеров, электронной почты, IRC-клиентов и адресной книги, в SeaMonkey Composer встроен собственный HTML-редактор. Пакет приложений был разработан на основе снятого с производства пакета Mozilla Application Suite, но разработчики по-прежнему поддерживают тесный контакт с Mozilla Foundation. Как и весь пакет, Composer очень прост и поэтому лучше всего подходит для несложных проектов веб-сайтов. Вы можете переключаться между HTML и WYSIWYG видом, но маленькая бесплатная программа не может сделать больше. Этот редактор особенно интересен для пуристов.

KompoZer также был создан из той же среды, что и Mozilla. Как и в SeaMonkey, структура WYSIWYG HTML-редактора очень проста. Пользователи могут переключаться между графическим отображением и исходным кодом. Полезные функции включают помощник по работе с формами, редактор CSS, FTP-менеджер сайтов, позволяющий пользователям загружать свои проекты, и очиститель разметки, который ищет в написанном коде ненужные изменения и проверяет соответствие всего сайта требованиям W3C. Как и SeaMonkey, KompoZer в настоящее время не находится в стадии дальнейшего развития. Проект был опубликован под различными лицензиями с открытым исходным кодом.

Дальнейшее развитие KompoZer называется BlueGriffon и имеет еще больше возможностей. Как и в Dreamweaver, вы можете отображать оба вида параллельно друг другу. Платная версия (есть также более компактная бесплатная версия) также включает в себя редактор ePub. Его можно использовать для создания электронных книг. Начиная с базовой лицензии, пользователи также получают доступ к примерно 2 500 шаблонам, которые облегчают создание собственного сайта.

Brackets распространяется компанией Adobe, но в отличие от Dreamweaver, он имеет открытый исходный код и является бесплатным. Brackets — это в первую очередь текстовый редактор, а не WYSIWYG-редактор. Благодаря функции предварительного просмотра, программа, тем не менее, похожа на программы для графического редактирования. Все изменения отображаются в реальном времени в окне браузера. Единственным недостатком является то, что эта функция работает только в Google Chrome. То, как веб-браузеры отображают веб-сайт, можно проверить только потом. Еще одна полезная функция: Файлы CSS можно открывать и редактировать прямо из кода в соответствующих местах — это ускоряет написание кода, поскольку веб-дизайнерам не приходится переключаться между разными файлами. Эти изменения также отображаются в живом предварительном просмотре. Разработчики уже создали сотни расширений для Brackets. Они включают не только визуальные изменения пользовательского интерфейса, но и полезные инструменты для автоматического завершения или отладки.

Первая версия NetObjects Fusion вышла в 1996 году и была разработана бывшими сотрудниками Apple. Принцип WYSIWYG, представленный в NewObjects, даже больше напоминает настольную издательскую программу, чем типичный HTML-редактор. Пользователи программы используют функцию drag-and-drop для расположения элементов сайта с точностью до пикселя. Поэтому знание HTML не требуется. Однако опытные веб-дизайнеры могут перейти к исходному коду, чтобы вносить изменения непосредственно в HTML-код. Еще одна особенность — вид управления проектом: здесь определяется навигация сайта. Пользователи располагают отдельные подстраницы и ссылки на них в виде древовидной диаграммы. NetObjects Fusion является платной версией и доступна только для Windows. Бесплатная версия — Essentials — предназначена в первую очередь для частных пользователей.

openElement — еще один бесплатный WYSIWYG HTML-редактор. Однако он основан на коде Chromium, который также базируется на браузере Chrome от Google. Опять же, вы можете создать сайт, вставляя и перемещая элементы в графическом представлении. В то время как область редактирования находится в центре, доступные элементы расположены справа в боковой панели. Таким образом, пользователи могут просто перетаскивать нужные объекты в редактор WYSIWYG. Отдельные страницы проекта можно найти в Site Explorer, а при открытии — в виде вкладок над областью редактирования, что позволяет быстро переходить от одной страницы к другой. Веб-дизайнеры также могут просматривать исходный код на каждой подстранице, чтобы вносить изменения прямо там. Программа бесплатна и работает по лицензии с открытым исходным кодом, но пока она доступна только для Windows.

Бесплатный WYSIWYG HTML-редактор RocketCake также не требует знаний HTML или CSS. Его структура похожа на структуру его конкурента openElement: область редактирования находится посередине, список элементов сайта и навигация по файлам — слева и справа. Особенностью программы является то, что она позволяет легко создавать отзывчивые сайты для мобильных устройств. За это отвечает редактор точек разрыва: веб-дизайнеры используют его для определения точек в CSS, в которых макет изменяется при различных размерах дисплея. Конечно, редактировать код можно и непосредственно в RocketCake.

TOWeb от Lauyan Software использует тот же подход WYSIWYG, что и RocketCake. Эти две программы уделяют особое внимание отзывчивому дизайну. Кроме того, TOWeb предлагает простое создание собственного интернет-магазина, а также поддержку в поисковой оптимизации. Для этого программа предоставляет теги alt и meta titles для редактирования, а также генерирует HTML-код, соответствующий стандарту W3C. С помощью функции публикации пользователи могут даже выбрать один из предварительно разработанных хостингов для упрощения загрузки, что должно быть особенно интересно для новичков. TOWeb имеет свою цену, но если вы не против ограничиться одним сайтом, вы можете использовать программу бесплатно. Для каждого последующего проекта (и особенно для решений электронной коммерции) вам придется приобрести одну из трех опций.

Редакторы, в которых код скрыт в фоновом режиме, позволяют полностью сосредоточиться на дизайне. Именно поэтому WYSIWYG-редакторы, будь то текстовые процессоры или HTML-редакторы, интересны пользователям, которые хотят видеть, как будет выглядеть конечный продукт. Эти пользователи чаще всего являются новичками, но такой подход должен быть полезен и для медиадизайнеров. Вместо того чтобы заботиться о тонкостях отдельных рынков, вы можете сосредоточиться на макете и содержании. Однако это имеет некоторые недостатки: Если вы хотите внести изменения, выходящие за рамки дизайнерских функций соответствующего редактора, вы упираетесь в пределы принципа WYSIWYG и все равно вынуждены самостоятельно вносить изменения в исходный код. Только в этом случае пользователь действительно имеет полный контроль над результатом.