Небольшая презентация Дэниэля наглядно иллюстрирует принцип COPE:

Я довольно часто наталкиваюсь на разговоры о семантической разметке в вебе. На мой взгляд, работоспособность любой технологии зависит от того, насколько удобно и понятно её поддержка реализована для конечного пользователя, в данном случае контнет-менеджера. Очень многие современные CMS хотя и не столь явно ориентированы на выдачу HTML (большинство из них может отдавать данные также XML-форматах: RSS, Atom и т.д.), однако подход к хранению информации остаётся достаточно примитивным.

Типичные CMS представляют такой подход к хранению данных: «атомарными» являются поля заголовок и содержимое, в некоторых случаях краткая аннотация, к ним привязан набор дополнительных мета-данных, файлы, теги, категории и т.д. Однако основной массив информации, собственно содержание записи, хранится в виде единой строки, с прописанной структурой, если таковая имеется, и разметкой, семантической в меру знаний контент-менеджера.

Ситуация эта мне кажется не очень правильной. На мой взгляд, CMS должна предоставлять возможность в простом и наглядном режиме создавать новые типы записей, данные в которых хранятся максимально дискретно и представляют собой связки «поле—значение», при этом значением могут быть данные из других записей того же или другого типа. То, что в терминологии стандартных CMS является единым полем «содержимое», также может представлять из себя набор связанных полей.

Схематически это могло бы выглядеть примерно так:

При такой системе мне не приходилось бы как сейчас вручную писать разметку для того, чтобы делать боковые сноски. Я бы настроил CMS таким образом, чтобы к каждому абзацу или секции можно было привязывать примечание, или картинку, или файл, и не создавал в определенной степени привязанные к оформлению теги с классами, а просто заполнял соответствующее поле. В упрощённом и схематичном виде интерфейс мог бы выглядеть примерно так (клик — просмотр увеличенной версии):

Осмысленная структура позволит, как в случае NPR, на лету создавать новые виды представления, легко и просто расширять функционал, строить качественных поиск. На мой взгляд, использование WYSIWYG должно быть минимизировано (в большинстве случае достаточно тегов strong, em, h1-h3, гиперссылок и вставки изображений), а результат работы визуального редактора должен тщательно чиститься. (В плане чистоты и лаконичности мне очень симпатичен WYSIWYG-плагин для jQuery.) Чем дискретней, атомарней данные, тем легче их организовывать, сортировать, повторно использовать, анализировать. Вместо склада текстов можно формировать базы данных, извлекая из них новые смыслы и значения.

Современные фреймворки вроде Symphony, Ruby on Rails или Django, разумеется, предоставляют функционал для построения в кратчайшие сроки CMS с оптимальной структурой хранения данных, однако я пока не встречал удобных инструментов, не требующих навыков программирования для решения типовых задач по созданию специфичных структур данных. Мне кажется, что при нынешнем развитии технологий это вполне посильная задача для очень большого процента случаев.

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

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

Мне не кажется, что описанная Яцеком ситуация идеальна — в лучшем мире пониманием и даже изменением бизнес-процессов клиента занимается всё же не дизайнер, а продюсер (не всегда в России понятная роль) в компании с аналитиками и маркетологами. Однако в ситуации отсутствия бюджетов и соответствующих профессионалов дизайнер может и должен брать на себя большую роль, чем простого оформителя.

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

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

Доступны субтитры на русском языке.

Однако существует и совместимый со стандартами способ подключения шрифтов — через CSS-правило @font-face. Хабрахабр: Прекрасные шрифты посредством @font-face. Нидерландская словолитня Typotheque предлагает пользоваться такой возможностью и утверждает, что работать это будет в 95% современных браузеров, включая Internet Explorer (в расчетах шрифтовики ссылаются на статью со статистикой из Википедии.

Typotheque впервые предлагает специальную лицензию для использования на веб, которая в 5 раз дешевле, чем стандартная. Например, Fedra Sans Std Book по веб-лицензии обойдется всего 18 евро, против 90 за полную. Установить шрифт, приобретенный по веб-лицензии, на свой компьютер нельзя, он подключается непосредственно к сайту через CSS-файл и загружается . При этом действуют ограничения по трафику — 500 мегабайт в месяц. Каждый гигабайт свыше этого объема будет стоит 1 евро. Таким образом, Typotheque не только впервые используют бизнес-модель, связанную с фактической арендой шрифтов, но и выступают в качестве первопроходцев на ниве лицензирования оных для использования в сети.

Протестировать услугу можно совершенно бесплатно в течение месяца, «приобретя» пробную лицензию, а для крупных компаний, которые не устраивает зависимость от стороннего хостинга, предусмотрена серверная лицензия, по которой каждое начертание обойдется в 1500 €. На момент написания этой заметки у Typotheque есть 2 отличных супергарнитуры с поддержкой кириллицы: Fedra и Greta, так что эксперименты можно проводить и с русскоязычными сайтами. К сожалению сайт студии работает последние сутки с перебоями и до магазина достучаться не так-то и просто — но я склонен списывать это на ажиотаж, связанный с запуском сервиса, и надеюсь что скоро проблема будет решена. В любом случае, файлы шрифтов располагаются на распределенный хостинге Amazon, и опасаться за их доступность не стоит.

www.typotheque.com/webfonts

Смотрите также

@font-face или назад в будущее — подробная статья по теме внедрения шрифтов от Павл Ловцевича.

Update

В настоящий момент техника не работает в Google Chrome, несмотря на то, что этот браузер, как и Safari, основан на движке Webkit. В силу неизвестных соображений безопасности поддержка рендеринга сторонних шрифтов в Хроме отключена. Ее можно вручную включить, запустив программу с параметрами –enable-remote-fonts. Update: заработало.

Update 2

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

In Soviet Russia

Действительно, в России стандартом считается верстка, при которой дизайн занимает 100% экрана, независимо от разрешения, в то время как западные сайты чаще всего сделаны по жесткой сетке и зафиксированы по ширине. Артемий Андреевич Лебедев, отец советского веб-дизайна вероятный, изобретатель и ярый поборник резиновой верстки, презрительно называет фиксированные сайты «скриншотами». Практически все сайты Студии имеют пропорциональную верстку, и именно они являлись и являются до сих пор источником идей, вдохновения и технических решений для тысяч дизайнеров, верстальщиков и разработчиков.

И у такого подхода есть очевидные плюсы. Грамотно выполненная резиновая верстка может повысить доступность и качество интерфейса сайта, она адаптируется под различные разрешения и размер окна, максимально эффективно используя рабочее пространство. Однако для некоторых приемов такой верстки неизбежно требуется применение таблиц и Javascript’а, и, как это практикуется в Студии – без какого-либо пиитета к веб-стандартам. Впрочем, с точки зрения бизнеса веб-стандарты хороши тогда, когда позволяют экономить или зарабатывать, а не ограничивают функционал и снижают качество продукта, коим является любой сайт. С этой позиции высказывание Лебедева о том, что лучшей валидатор – это браузер, кажется более чем оправданным.

Следуйте за мной

Многие последовали примеру Студии и начали делать все сайты резиновыми. Однако если работники Лебедева всегда следят за техническим прогрессом и заботятся действительно обо всех типах устройств отображения, а не только тех, что есть в их распоряжении, то большинство отечественных веб-разработчиков до этого не доросли. И потому очень часто приходится встречать сайты, которые на мониторах с диагональю больше 19 дюймов выглядят неприемлемо – катастрофические пропорции (сайт в ширину больше, чем в высоту), непропорционально длинные строки, на которых умещается по два предложения и т.д. Довольно часто попадается «ленивая» резиновая верстка, при которой изменяется только центральная колонка с основным контентом, а боковые колонки зафиксированы намертво.

Довольно трудно, если не невозможно сделать сайт, который смотрелся бы одинаково хорошо при ширине экрана и в 1024 и 1920 пикселей – разница почти в 2 раза. А между тем оба эти разрешения сейчас в ходу и убывать ни одно, ни другое не собирается – с одной стороны, дешевеют широкоформатные мониторы, с другой – появляется все больше нетбуков и прочей портативной техники с разрешениями, о которых веб-дизайнеры начали было забывать. Поэтому очень важно при резиновой верстке зафиксировать максимальную ширину, на которую будет растягивать ваш сайт. Сделать это можно при CSS-свойства помощи max-width, разумеется с отдельными телодвижениями для IE.

Fix my sink

Фиксированная верстка – прямое наследие полиграфической традиции, в которой какие-либо действия без понятия формата и четких размеров носителя невозможны. Как и в случае с печатью, созданный дизайнером макет максимально точно переносит в браузер и не меняется в зависимости от внешних обстоятельств. Фиксированный лэйаут проще внедрять и поддерживать: дизайнеру нет необходимости отрисовывать один и тот же макет в нескольких состояниях, а верстальщику ломать голову и биться над совместимостью. Готовые модульные сетки вроде 960gs позволяют упростить процесс дизайна и верстки сайтов. Дизайн фиксированных сайтов гораздо проще привести к гармоничному состоянию – можно быть уверенным, что блок, у которого высота и ширина равны, не поменяет своих свойств из-за того, что пользователь изменит размер окна. Очень часто гораздо лучше остановиться на фиксированной верстке, чем запускать сайт с непродуманной и не до конца оттестированной «резиной», качественная имплементация которой требует больших ресурсов — временных и, как следствие, денежных.

Из обоих миров

Совмещение приемов фиксированной и резиновой верстки, а также немного Javascript’а могут давать довольно интересные результаты. Например, лэйауты, в которых количество колонок с пропорциональной шириной зависит от доступного пространства (пример). Используя готовые наработки, можно создавать резиновые сайты по стандартам, тратя минимальное время на совместимость и используя техники, привычные по упомянутой выше 960 grid system – умельцы адаптировали ее под резину. К слову, в CSS3 потребность в резиновой верстке учтена – спецификация Flexible Box Layout Module все еще находится в состоянии черновика, однако с синтаксисом уже можно экспериментировать при помощи плагина для jQuery. Спецификация Flexible Box Layout Module на сайте W3C.