Frontender Magazine

WYSIWTF

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

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

Но сейчас мы знаем, что среда распространения и распространяемое сообщение связаны так тесно, что не могут быть без труда разделены. Графические дизайнеры выступают против идеи о том, что оформление может быть финальным этапом, потому что дизайн влияет на смысл. Чем более опытными в общении мы становимся, тем больше мы понимаем, что отделение содержания от представления — это отвлекающий финт индустриального века, попытка стандартизировать и сегментировать задачи, которые тесно связаны.

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

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

Как должны инструменты управления контентом способствовать тому, чтобы авторы обращали внимание на его значение и структуру? Какое количество средств управления представлением и стилизацией контента в CMS правильное? И как должны развиваться эти инструменты, если мы ломаем концепцию веб-страницы и публикуем контент на множестве платформ? Давайте посмотрим на 3 инструмента, которые находятся на стыке содержания и представления.

Кнопка предварительного просмотра

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

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

Но мы не можем просто избавиться от нее. На самом деле, просмотр контента в контексте становится еще более важным, так как наш контент теперь живет на различных устройствах и платформах. Вместо того, чтобы вскинуть руки и сказать: «предварительный просмотр не нужен», — настало время придумать лучший подход к предварительному просмотру.

Одна издательская компания, которую я знаю, создала собственный интерфейс предварительного просмотра, который показывает редакторам, как материал будет выглядеть в браузере настольного комьютера, в мобильных браузерах и в приложении. Разве не прекрасно? Совсем нет. На самом деле материал будет просмотрен в гораздо большем количестве контекстов, чем эти 3. Но это ведь лучше, чем ничего? Конечно.

Визуальные редакторы (WYSIWYG)

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

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

Какое количество инструментов форматирования следует предоставить авторам? Это сложный вопрос, потому что он приводит нас к спору о том, что является оформлением, а что семантикой. Даже такие простые вещи, как добавление полужирного или наклонного начертания, заставляют нас задуматься о том, просто стилизуем ли мы текст или добавляем семантическое значение (например, если речь идет о названии книги или о предупреждающем сообщении).

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

Но мысль о том, что каждый фрагмент контента является полем в базе данных (с отдельным полем ввода в CMS), быстро сводится к абсурду. Так можно с ума сойти. Настоящее решение не потребует отказа от больших объемов текста, но заменит панель визуального редактора семантической разметкой. Вместо того, чтобы вводить весь текст в отдельные поля, авторы оборачивают текст в теги, описывая, чем он является. Для заголовка книги не требуется отдельного поля, если мы можем обернуть его в соответствующие теги.

Определение того, что должно стать полем, а что необходимо оборачивать в теги, требует более плотного взаимодействия между авторами контента, архитекторами CMS и фронтэнд-разработчиками. Настало время начать обсуждать этот вопрос.

Инлайновое редактирование

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

Инлайновое редактирование текста позволяет авторам непосредственно управлять содержанием внутри интерфейса, без разделения между экраном редактирования и отображением. Medium предлагает интерфейс редактирования, который идентичен представлению сайта в браузере настольного компьютера, а инлайновое редактирование добавлено в ядро Drupal 8.

Один из вопросов, которые мне часто задают, это «Как мне заставить авторов контента понять, почему так важно структурировать его и добавлять в него метаданные?» Это, я полагаю, один из фундаментальных вызовов, бросаемых нам вебом, в частности, когда мы адаптируемся к многоплатформенному будущему. Инлайновое редактирование подталкивает создателей контента к концентрации на визуальном представлении в настольном интерфейсе. Как раз в тот момент, когда нам нужно, чтобы создатели контента думали о внутренней структуре, мы продвигаем инструменты, которые затрудняют понимание связи содержания и представления.

Джеф Итон (Jeff Eaton) хорошо резюмирует проблему в своей публикации под названием Инлайновое редактирование и цена дырявой абстракции:

Интерфейсы редактирования, которые мы предлагаем пользоваелям, передают им важные сообщения, хотим мы этого или нет. Они интуитивно понятны, как ручка на двери или кнопки на телефоне. Если основной интерфейс редактирования, который мы предоставляем, аналогичен дизайну, который видят посетители сайта, мы говорим: «Эта страница — это то, чем ты управляешь! То, что ты на ней видишь, и есть действительное представление твоего контента.»

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

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

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом редакторам Антону Немцеву в skype ravencry, Константину Гупалову в skype cosmik_soul или в skype matmuchrapna доброму Владимиру Старкову.

Karen McGrane
Автор:
Karen McGrane
Сaйт:
http://karenmcgrane.com/
Twitter:
@karenmcgrane
about.me:
karenmcgrane
LinkedIn:
kmcgrane
Сергей Смольников
Переводчик:
Сергей Смольников
Мой Круг:
http://sergey-smolnikov.moikrug.ru/
Twitter:
@smolnikov
GitHub:
smolnikov