Редактор WYSIWYG: Я вижу, что вы видите

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

Что именно означает WYSIWYG?

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

 

В действительности такие тексты следует рассматривать как результат кодов . Без такой программы, как Word, вы должны написать в своем тексте соответствующий код (например, «<italic> Word </ italic>»), который затем интерпретируется и применяется при завершении текста терминалом, который в нашем случае является принтер. Однако преобразование документа 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, которые были установлены по умолчанию на большинстве компьютеров, веб-дизайнеры не могли вводить другие символы. В конце концов, нельзя предположить, что браузеры посетителей сайта могли их просматривать. Тем временем эта проблема стала гораздо менее актуальной. С помощью редактора HTML и WYSIWYG пользователи могут выбирать из многих символов.

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

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

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

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

  • Медиа : веб-сайты - это не только тексты: видео, изображения и другие графические элементы занимают значительную часть World Wide Web. Чтобы отобразить этот тип контента, вам необходимо настроить соответствующий HTML-код. Но редактор HTML и WYSIWYG позаботился об этом автоматически, и в большинстве случаев пользователи могут размещать контент в том месте, которое они хотят с помощью drag & drop.

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

Редактор WYSIWYG

Недостатки концепции WYSIWYG

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

 

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

 

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

 

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

Если вы хотите создать свой собственный веб-сайт и использовать редактор WYSIWYG для этой цели, вам будет полезно использовать базовые знания HTML

Редактор WYSIWYG для HTML

Однако не рекомендуется полагаться только на редактор WYSIWYG. Начинающие могут сразу создавать свои собственные веб-сайты, только если они просты. Вот самые популярные программы:

Dreamweaver

Macromedia представила Dreamweaver на рынок уже в 1997 году ( исключительно для Mac OS). Между тем, программный гигант Adobe приобрел Macromedia и продолжает разрабатывать Dreamweaver и Flash. Этот редактор можно использовать как в режиме WYSIWYG, так и с кодами, и два режима могут отображаться одновременно, поэтому вы можете непосредственно видеть в предварительном просмотре эффекты изменений кода и наоборот.


Предварительный просмотр работает с различными браузерами, а также на мобильных устройствах; они могут быть подключены к проекту благодаря QR-коду. Благодаря интегрированной функции публикации пользователи могут перемещать контент, созданный непосредственно на своих серверах, тем самым помещая их в Интернет. Dreamweaver является частью Creative Cloud.

Композитор SeaMonkey

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

KompoZer

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

BlueGriffon

Разработка KompoZer называется BlueGriffon и имеет больше возможностей. Здесь также, как и в Dreamweaver, вы можете иметь оба представления параллельно . В платной версии (есть также бесплатная, меньшая версия) есть также редактор EPUB, и вы можете создавать электронные книги. Уже из базовой лицензии у пользователя имеется около 2500 шаблонов, которые облегчают строительство их сайта.

Brackets

Brackets продается Adobe, но в отличие от Dreamweaver он доступен с открытым исходным кодом и бесплатно. Это прежде всего текстовый редактор, а не редактор WYSIWYG. С функцией предварительного просмотра программа имеет тенденцию запускать программное обеспечение для обработки графики . Все изменения отображаются в режиме реального времени в окне браузера. Единственным недостатком является то, что он работает только с Google Chrome, поэтому неизвестно, как другие браузеры представляют веб-сайт.

 

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

NetObjects Fusion

Первая версия NetObjects Fusion появилась в 1996 году, разработанная сотрудниками Apple. Принцип WYSIWYG, охваченный NetObjects, более напоминает программу для публикации на рабочем столе, чем обычный HTML-редактор. Программное обеспечение позволяет пользователям создавать элементы веб-сайта по пикселям с помощью drag & drop, поэтому нет необходимости знать HTML, у опытных веб-дизайнеров всегда есть возможность перейти к исходному тексту, чтобы вносить изменения непосредственно с кодом HTML.

 

Дополнительной особенностью является визуализация управления проектами, где вы принимаете решение о навигации по сайту. Пользователи сортируют отдельные подстраницы и их ссылки в виде древовидной диаграммы. NetObjects Fusion оплачивается и предоставляется только для Windows. Бесплатная версия Essentials в основном предназначена для частных пользователей.

OpenElement

OpenElement - это дополнительный WYSIWYG и бесплатный HTML-редактор на основе кода Chromium, например браузера Google Chrome. В этом случае так же построение веб-сайта происходит путем вставки и перемещения элементов на графическом дисплее; область обработки находится посередине, а доступные элементы находятся в боковом списке справа. Таким образом, пользователи могут просто перетаскивать нужные объекты в редактор WYSIWYG.

 

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

RocketCake

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

TOWeb

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

Выводы: почему редакторы WYSIWYG?

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

 

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