С развитием компьютерных языков программирования встал вопрос о потребности систематизировать визуальные данные кода на устройствах вывода информации для увеличения производительности и эффективности труда разработчиков. Сегодня все разработчики, начиная от профессионалов и заканчивая начинающими пользователями, используют специализированную под данную задачу web-редакторы.
HTML-редакторы принято разделять на две категории: с контролем синтаксиса и без. Редакторы со строгим контролем синтаксиса требуют, чтобы пользователь четко соблюдал синтаксис языка HTML. Основное достоинство редакторов такого типа в том, что они способствуют созданию корректного HTML-текста. Впрочем, при попытке открыть документ, содержащий нестандартные теги, такой редактор, вероятнее всего, выдаст сообщение об ошибке. HTML-редакторы без контроля синтаксиса не выполняют проверку корректности документа. Такой редактор никак не отреагирует и на неправильно применяющиеся теги. Достоинство редакторов без контроля синтаксиса заключается в возможности применять нестандартные теги.
Современные редакторы программного кода, переняли свой функционал у визуальных текстовых редакторов, а также у специализированных средств текстовой разработки, прилагаемых к разнообразным компиляторам. От текстовых редакторов и офисных пакетов современные средства разработки web-страниц вобрали всё самое лучшее в сфере представления текстовой и графической информации на экране компьютера и действий с уже исполненным кодом. Иная же часть редакторов кода web-страниц от специализированных редакторов, прилагаемых к компиляторам программ, вобрала в себя большое количество возможностей по подсвечиванию синтаксиса, и подстановки программного кода на различных языках в виде сырого текста. В определенных приложениях гармонично объединяются функции обоих предшественников.
В связи с этим выделяют следующие типы веб-редакторов:
- Текстовые редакторы
- Визуальные редакторы
- Комбинированные редакторы
В иностранных источниках приводится иная классификация веб-редакторов:
- Текстовые редакторы
- Редакторы объектов
- WYSIWYG редакторы
- WYSIWYM редакторы
- Online редакторы
Текстовые редакторы
Текстовые редакторы (редакторы исходного кода) предназначены для работы с HTML и обычно предоставляют выделение синтаксических элементов (выделение цветом для лучшего визуального восприятия).
Текстовые HTML редакторы обычно содержат встроенные функции или интеграцию с внешними инструментами для таких задач, как поиск и контроль версий, проверка ссылок, проверка кода и валидация (проверка, подтверждение соответствия требованиям), чистка кода (удаление выделенных элементов) и форматирование, проверка правописания, подгрузка с помощью FTP или WebDAV и структурирование для проекта.
Текстовые редакторы требуют от пользователя понимания HTML и некоторых других “дизайнерских” технологий: CSS, JavaScript и серверных скриптовых языков. Также они ссылаются на A Simple HTML Editor (ASHE).
Отличительной особенностью текстовых редакторов является то, что редактор показывает только исходный код без отображения готовой страницы.
Редакторы объектов
Некоторые редакторы предлагают альтернативный способ редактирования исходного кода с помощью объектов. Этот способ нагляднее, чем простое выделение синтаксических элементов в текстовом редакторе, но в нем не подразумевается режима WYSIWYG. Некоторые редакторы WYSIWYG имеют опцию выбора окон для редактирования текстовых параметров выбранного объекта. В них можно редактировать как один отдельный элемент исходного кода, так и целую группу элементов выбранного объекта. В таком редакторе есть специальные виджеты (элементы интерфейса) для выбора нужной опции во время редактирования. Adobe GoLive предоставляет схематичный редактор (outline editor), в котором можно разворачивать и сворачивать HTML объекты и параметры, редактировать их и видеть графический вывод редактируемых объектов.
WYSIWYG редакторы
WYSIWYG редакторы (аббр. What You See Is What You Get – «что видишь, то и получишь») предоставляют интерфейс редактирования, который напоминает, как страница будет отображаться в веб-браузере. В общем WYSIWYG подразумевает возможность напрямую управлять макетом документа без необходимости ввода или сохранения команд макета. Для среднего пользователя или начинающего веб-дизайнера WYSIWYG редактор — очень хороший вариант, так как в нем не требуются глубокие знания HTML. WYSIWYG визуализация достигается благодаря встроенному движку, который используется в браузере. Движок значительно улучшается разработчиками редакторов, чтобы была возможность набора текста, вставки, удаления и работы с контентом. Плюс этих редакторов в том, что во время редактирования результат, который будет виден в браузере, всегда перед глазами.
Сложности в работе с WYSIWYG
HTML документ будет выглядеть по-разному на разных платформах и компьютерах по нескольким причинам:
- Разные браузеры и приложения по-разному воспроизводят одну и ту же разметку.
Отображение одной и той же страницы может немного различаться в Internet Explorer и Firefox на экране с широким разрешением, но она будет сильно отличаться в современном Lynx браузере. Она иначе воспроизводится на КПК, мобильных телефонах и на телевизорах, поддерживающих Интернет подключение.
Удобство использования речевого браузера или браузера, созданного по системе Брайля для слепых, или работа с обычным браузером с функцией чтения с экрана будут ставить все новые задачи для кода. Печать страниц разных размеров с разных браузеров и с помощью разных принтеров по всему миру тоже устанавливает свои требования. Если создать качественный современный HTML и CSS код, то не нужно будет делать дополнительные ссылки на «Страницы для печати» и потом управлять двумя версиями сайта. Никаких исключений для страниц, никаких ограничений по размеру и расположению печати, ненужных затрат краски на закрашивание белого фона при печати или расходования бумаги на ненужную печать панели навигации.
- Браузерные и компьютерные графические системы имеют ряд пользовательских настроек.
Разрешение, размер шрифта, цвет, контрастность и так далее могут регулироваться по усмотрению пользователя. Также, многие современные браузеры предоставляют пользователям больше возможностей по настройкам внешнего вида страниц. Все, что может сделать автор — это предложить свой внешний вид.
- Браузерные баги и ошибки ПО для компьютера
Эти ошибки могут не соответствовать современным стандартам. Бесполезно создавать код для веб-страницы среди багов распространенных браузеров. Каждый раз как выходит новая версия того или иного браузера, значительной части Всемирной паутины приходится перекодировать свои страницы, чтобы соответствовать новым исправлениям. Гораздо разумнее для разработки стандартов остаться в стороне от новейших разработок, пока они не утихнут, а затем дождаться когда разработчики браузеров поддержат вашу страницу, а не наоборот. Например, CSS сейчас как раз на пике моды, так как распространенные браузеры предоставляют широкий выбор параметров для основных задач, тогда как многие WYSIWYG и другие редакторы еще не совсем догнали их.
- Один визуальный стиль может представлять несколько семантических смыслов
Семантический смысл извлекается из исходного кода HTML документа. Он очень важен для алгоритма поиска и для разных инструментов доступа. На бумаге можно написать, ссылаясь на контекст и опыт, что жирный текст или курсив (или что-то еще) означает название страницы (title). Но это же различие очень сложно передать в WYSIWYG редакторе. Если просто так написать текст жирным шрифтом в WYSIWYG редакторе, будет сложно объяснить ему, почему этот текст жирный, что это должно означать семантически.
WYSIWYM редакторы
WYSIWYM редакторы (аббр. What You See Is What You Mean – «то, что ты видишь, есть то, что ты имеешь в виду») — это парадигма редактирования документов, возникшая как альтернатива более распространённой парадигме WYSIWYG. Вместо сосредоточения на конфигурации или виде документа, она сохраняет предполагаемое значение каждого элемента. Например, названия страниц, разделов, параграфов и так далее помечены как таковые в редакторе и надлежащим образом отображаются в браузере.
В WYSIWYM редакторе пользователь записывает содержимое в структурированном виде, маркируя содержимое в соответствии с его смыслом, значением в документе, оставив окончательный внешний вид в одном или нескольких отдельных стилях.
Семантическая структура документа должна быть решена до его написания. Кроме того, после указания структуры документа редактору требуется система экспорта структурированного контента для создания окончательного формата документа.
Основным преимуществом этой системы является полное разделение оформления и содержания: пользователи могут структурировать и написать документ сразу, а не многократно изменять его для каждого режима представления, который оставлен для системы экспорта.
Преимущества:
- У пользователя может быть несколько визуальных представлений для одного и того же контента.
- Существенно возрастают возможности автоматического анализа текста по его содержанию.
- Внесение изменений в визуальное представление документа не требует изменения самого документа. Таким образом, значительно сокращается время правок.
В случае веб-интерфейса:
- Безопасность — WYSIWYM исключает атаки вида XSS (внедрение вредоносного кода), не ограничивая пользователя. То есть для того, чтобы разрешить включать в текст статьи видео, пользователю не нужно разрешать весь Flash вообще.
- Кроссбраузерность — то, как будет выглядеть статья, не зависит от познаний пользователя в вёрстке.
- Пользователь может использовать WYSIWYM-редактор для редактирования структурных элементов, например, для редактирования структуры многоуровневого меню.
Онлайн редакторы
Главным преимуществом онлайн веб-редакторов является их доступность. Существует ряд редакторов, которые предназначены для использования на своем сайте (сервере). Они работают в PHP приложениях (например, их можно интегрировать в меню администратора сайта на CMS или в форму для добавления комментариев на сайте).
Соответствие требованиям стандарта W3C
По исследованиям 2011 года, из 350 популярных сайтов (выбранных Alexa index), 94% не справились с проверочными тестами на соответствие разметки и стиля страниц принятым стандартам, или некорректно применили кодировку. Даже те сайты, которые пользовались синтаксически правильными документами, работали не совсем правильно из-за неоправданного применения повторения, или из-за того, что были созданы по устаревшим правилам. Действующие стандарты W3C по использованию CSS вместе с HTML впервые были опубликованы в 1996 году. С тех пор они постоянно пересматривались и уточнялись.
Текущие W3C руководства по HTML и CSS описывают разделение контента (HTML или XHTML) от стиля (CSS). Преимущество здесь в том, что стиль можно применить один раз для всего сайта, не повторяя отдельно на каждую страницу, не говоря уже о каждом HTML элементе. Создатели WYSIWYG редактора постоянно стараются придумать, как лучше представить все эти концепты пользователям, не путая их и не нагружая лишней сложной информацией. Современные WYSIWYG редакторы в какой-то степени справляются с этой задачей, но никто еще не справился окончательно.
Тем не менее, все веб-страницы, созданные для привлечения большого количества пользователей и для поддержания ценности Интерната как такового во всем мире должны использовать современный грамотный код. И не важно, созданы они или отредактированы, с помощью WYSIWYG они создавались или вручную. Нельзя допускать страницы в сеть до тех пор, пока синтаксис HTML и CSS не будет соответствовать требованиям. Перед запуском код необходимо проверить на бесплатных W3C сервисах тестирования (W3C HTML Validator и W3C CSS Validator) или похожих альтернативных тестах, заслуживающих доверия.
Доступность интернет страниц для людей с ограниченными возможностями и проблемами со зрением — это не просто хорошая идея, учитывающая вездесущность и важность Интернета, но и уже признанная законом необходимость. В американском Законе о людях с ограниченными возможностями (Americans with Disabilities Act) и в Законе о дискриминации инвалидов (Disability Discrimination Act) Великобритании уже появились статьи с требованиями, касающимися веб-страниц. Похожие законы есть или появляются и в других странах. Тут еще надо понимать, что сделать доступную страницу — это более сложная задача, чем просто сделать ее грамотно, потому что, чтобы сделать доступной – нужно учесть еще очень много факторов. Хороший дизайн, выполненный с помощью WYSIWYG возможностей или без них, должен все это учитывать.
Какое бы программное обеспечение не использовалось для дизайна, создания или управления страницы, качество исходного HTML будет зависеть от мастерства человека, который с ней работает. Знание HTML, CSS и других языков программирования, также как и знакомство с современными W3C рекомендациями в этой сфере, помогут любому дизайнеру создавать хорошие интернет страницы как с WYSIWYG HTML редактором, так и без него.