Вчера ко мне обратился представитель проекта dev.by с предложением дать небольшую оценку верстки представленного на суд общественности нового варианта главной страницы главного белорусского портала tut.by для написания какого-то масштабного материала о главной новости Байнета 22 декабря 2009 года. В твиттере я уже поплевалася на эту тему, теперь могу аргументировать свое мнение. Сразу оговорюсь, что я не буду касаться оценки аспектов дизайна и usability проекта, которые не имеют прямого отношения к верстке, хотя и поэтим моментам у меня есть свое мнение.

В целом, новую верстку tut.by можно охарактеризовать как «WTF»? Портал, претендующий на звание местного Яндекса выкатывает вот такое, простите, технологически ущербное убожество. Подобное качество работы для такого уровня проекта просто недопустимо. Среди основных отрицательных качеств кода можно отметить отсутствие его «чистоты», неграмотное применение технологий, применение устаревших технологий, а также отсутствие качественной оптимизации верстки.

В моем понимании «качественной верстки» подразумевается наличие ряда критериев, среди которых наиболее важными будут:

1. разделение структуры документа, его стилистического оформления и его поведения;
2. использование (x)HTML-тэгов в соответствии с их прямым семантическим назначением;
3. минимизация структурных (x)HTML-тэгов по отношению к контенту документа;
4. использование актуальных методов, приемов и технологий;
5. оптимизация (x)HTML, CSS, JS и изображений;
6. ну и валидация как инструмент, а не самоцель.

Рассмотрим подробнее доступные исходники главной страницы new.tut.by и выясним, за что верстальщика проекта можно лишить премии.

Разделение структуры документа, его стилистического оформления и его поведения

Первое, что бросается в глаза это наличие inline-стилей CSS прямо в коде XHTML.

<input type="submit" name="send" value="Ответить" style="border-left:3px solid #13A833; height:16px !important;" />

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

Помимо инлайновых стилей верстальщик не постеснялся использовать многочисленные инлайновые JS в обработчиках событий.

<a href="http://radio.tut.by/player/index.html" title="Радио ТУТ" target="_blank" onclick="return !window.open(this.href,'','width=520,height=175,menubar=0,resizable=0,scrollbars=0,status=0,titlebar=0,toolbar=0,top=10,left=10')">

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

Использование (x)HTML-тэгов в соответствии с их прямым семантическим назначением

Чем руководствовался верстальщик, выбрав таблицы для имитации табов (закладок) в соответствующих блоках сайта, я не знаю. По-моему, войны div vs. table уже давно завершились и применять их сегодня по непрямому назначению могут вынудить лишь крайние обстоятельства. Лично я с момента перехода на с табличной верстки на семантическую ни разу не столкнулся с необходимостью оформления какого-либо элемента страницы через таблицы, если только этот элемент не является непосредственно таблицей. Хотя, Виталий Харисов и Андрей Сумин утверждают, что есть еще ситуации, когда раскладка страницы для крупных проектов все еще должна выполняться таблицами, в разумном количестве конечно.

Но городить огород с таблицами ради создания табов просто нелепо.

<td width="14%">
	<div>
		<div>
			<a href="javascript:function(){return false;}" onclick="javascript:return false;">Поиск</a>
		</div>
	</div>
</td>

Добавьте еще к этому <table> и <tr>.

А вот за задание вертикальных отступов с помощью тэга переноса строки <br />я бы вообще отбивал руки и лишал бы возможности заниматься этим видом деятельности в судебном порядке. Полюбуйтесь, пожалуйста.

<a href="tvset/7.html">ВС</a>
<br/><br/>
<span>23:45</span>  Фильм-концерт.. <a href="http://tvset.tut.by/18_channel.html">Ностальгия</a><br/>

Минимизация структурных (x)HTML-тэгов по отношению к контенту документа

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

В этой категории можно перечислить упомянутые уже ранее ошибки:

1. inline-стили и скрипты, которые могут быть вынесены в отдельный файл и будут кэшироваться;
2. применение CSS, который снова же кэшируется, для задания стилистического оформления, в частности вертикальных отступов;
3. применение неуместных тэгов при верстке блока, которые увеличивают общее количество разметки. Например, в табах вместо таблиц можно было бы использовать либо <div> либо <ul> и обойтись меньшим количеством «оберток».

Сюда еще можно отнести нелепую декларацию XML в коде.

<?xml version="1.0" encoding="UTF-8"?>

Эта конструкция является не только излишней, но еще и вредной. Ведь именно она переводит IE6 в quirksmode и вынуждает писать большее количество CSS кода для этого морально устаревшего браузера, доля которого по статистике liveinternet.ru в Байнете на сегодня уже менее 10-ти процентов. Эти потуги тем более непонятны, в случае, когда мы выходе мы имеем не настоящий XHTML с MIME-type application/xhtml+xml, а HTML в строгости синтаксиса XML с MIME-type text/html и разбираем его html-парсером в браузере.

Клиринг блоков задается устаревшим методом при помощи пустого <div> с CSS-свойством «clear: both;».

<div class="clear"></div><hr />

Сегодня существует более удобный способ для достижения клиринга, который я активно применяю и всем настоятельно рекомендую. Он не нуждается в дополнительной разметке, только чистый CSS.

Оптимизация (x)HTML, CSS, JS и изображений

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

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

Вся графика на сайте могла быть оптимизирована путем применения технологии CSS Sprites (слияния множество изображений в одно), что снова позволило бы сэкономить на http-запросах. Также графика должна быть оптимизирована за счет прогона ее по специальным утилитам, уменьшающим размер конечного изображения, путем очистки файлов от служебной информации.

Общие замечания по мелочам

1. Активное применение свойства !important в CSS, что значительно ухудшает поддержку кода.
2. Активное использование однопиксельного изображения для неизвестных мне целей.

   <img alt="" src="http://img.tut.by/i/tr.gif"/>

3. Неиспользование тэгов списков там, где это было бы уместно.
4. Неправильное применение элемента <fieldset> в форме авторизации.
5. Необоснованный перенос кнопки сабмита формы авторизации в начало кода, нарушая тем самым порядок фокуса ввода и отсутствие попытки исправить это с помощью атрибута tabindex.
6. Оборачивание кнопки сабмита все той же формы авторизации в <div> для непонятных целей и пр.

Вот так кратенько мы пробежались по основным негативным моментам новой верстки портала tut.by. Более детально изучать верстку нет ни времени ни желания.

Помните, так верстать нельзя! На смертном одре всем мы будем отвечать за грехи свои! =)

Этот материл не является попыткой пнуть, упавшего. Мне хотелось бы, чтобы руководство крупнейшего интернет-проекта помнило о том, что tut.by является лицом всего национального сегмента сети Интернет. На них смотрят, на них ориентируются, по ним оценивают.

Юрий Анатольевич, пожалуйста, наймите квалифицированного верстальщика (программиста, проектировщика, дизайнера и пр.) и сделайте Байнет чуточку лучше.

P.S. Как уже выяснилось, мнения спросили также у Юры Шиляева и Паши Коноплицкого. Видимо, это только вершина айсберга и бить проект собрались больно авторы статьи.

Ссылки по теме

1. Twitter realtime results for #newtutby
2. О новом TUT.by
3. Мнения специалистов об обновленном TUT.by

28 ноября мы наконец-то провели мероприятие под названием Web Standards Days. К сожалению, практически сразу я заболел, поэтом отчет получился запоздавшим. И все же я хочу рассказать немного о том, что предшествовало этому мероприятию, о подготовке к его проведению и том, как же оно в итоге прошло.

А давайте в следующий раз встретимся в Минске!

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

Однако в 2008 году как-то не сложилось. Были РИТ, UA WEB, WebHiTech, но не было встречи, подобной питерской. Лишь в конце года на ByCamp 2008 я познакомился с единственным на тот момент представителем Opera Software в России Ильей Шпаньковым и предварительно выяснил  интерес компании к поддержке подобных мероприятий.

Дело сдвинулось с мертвой точки

Весной 2009 года, я снова поднял тему проведения встречи в Минске, все подтвердили свой интерес к ней. А переход «нашего» человека под крыло Opera только упростил процесс поддержки проведения мероприятия.

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

После участия в WUD2009 в Минске у меня родилась идея с вручением книг самым активным участникам нашего мероприятия. А почему нет, собственно говоря? Остаток нашего бюджета как-раз покрывал эти расходы и книги были закуплены. Хочу выразить благодарность Николаю Мациевскому, который в общую копилку бесплатно добавил 5 своих книг. В итоге, самые удачливые участники мероприятия получили экземпляры следующих книги:

Явление Христа народу

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

Голова шла кругом из-за всей подготовительной суматохи, все-таки впервые организовывал подобное мероприятие. Я очень волновался за то, чтобы все прошло ровно и без накладок. Только перед началом мероприятия я понял, что выступать первым при таком волнении было не самой удачной идеей. Поэтому решил немного успокоится и поменяться временем выступления с кем-нибудь из докладчиков. Меня выручил Андрей Сумин, за что большое ему человеческое спасибо!

Встречу мы открывали с Вадимом Макеевым. После краткого вступления, в котором пару слов было сказано о сообществе «Веб-стандарты» и о самом мероприятии, был дан старт.

Переверстать всё и в срок. Андрей Сумин

Андрей рассказал удивительную историю редизайна проекта hh.ru. Удивительное заключалось в том, что о факте редизайна пользователи и даже некоторые сотрудники проекта узнали только с обновлением главной страницы, настолько незаметным был этот процесс для окружающих. В основе верстки лежит известная техника «независимых блоков» Виталия Харисова, которая, по словам Андрея, превращает работу верстальщика из ремесла в производство. Также публике был представлен интересный подход к оценки готовности верстки проекта, путем использования таблицы с уникальной подсветкой страниц сайта в зависимости от степени их готовности.

Ошибка. Осознание, примирение, извлечение пользы. Вадим Макишвили

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

Веб-шрифты vs. Шрифты для веба. Вадим Макеев

Вадим Макеев коснулся новой темы, которая в последнее время приобрела большую популярность. О ней я также писал достаточно развернутый материал ранее. Главной новостью стало то, что в Opera достаточно лояльно и позитивно отнеслись к новому формату шрифтов WOFF детищу Mozilla Foundation. Если еще подтянется дружная пара Webkit’овцев (Safari и Chrome), то несомненно именно этот формат станет стандартом отрасли.

HTML5. Будем знакомы! Павел Ловцевич

Сразу после обеденного перерыва настал и мой черед выступать. Для своего доклада я выбрал достаточно широкую тему, охватить все аспекты которой в рамках получаса крайне проблематично. Время поджимало, поэтому мне пришлось несколько поверхностно излагать материал. Многие тонкости, оставшиеся за кадром, будут доступны для ознакомления в опубликованной версии доклада несколько позднее. Главная мысль состоит в том, что HTML5 это неизбежное будущее и часть этого стандарта можно с успехом использовать уже прямо сейчас.

WebHiTech. Итоги 2009 и планы 2010. Артемий Ломов

Артемий впервые представил технологический конкурс вебсайтов WebHiTech, членом жюри которого я являюсь второй год подряд, белорусской публике. Были подведены краткие итоги конкурса в 2009 году, который закончился совсем недавно, представлена некоторая статистическая информация. Посетители Web Standards Days были приглашены к участию в конкурсе в будущем году.

VML, SVG, Canvas: что дальше? Николай Мациевский

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

Некоторые проблемы применения современных веб-технологий. Константин Ефимов

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

Послесловие

После завершения мероприятия толпа из примерно 25 человек двинулась в паб MIXX для продолжения неформального общения, часть из которой через некоторое время внезапно оказалась в бассейне. =)

Я считаю, что мероприятие прошло замечательно, что подтверждают отзывы участников, хотя и не без накладок. Мы набили пару шишек и в следующий раз готовы провести мероприятие еще лучше. А следующее мероприятие состоится… завтра, 8 декабря в Москве. Это будет объединенное мероприятие WebHiTech Party, в рамках которого совместно пройдут открытая встреча (мини-конференция) сообщества веб-стандартистов Рунета и церемония награждения победителей конкурса WebHiTech. Подробности на официальном сайте конкурса.

На Web Standards Days произошло много встреч. Разработчики, знакомые друг с другом лишь в онлайне, смогли пожать руки. Было много деловых обменов контактами. Люди уходили домой уставшие, но довольные, а некоторые еще и не с пустыми руками. Не это ли показатель успеха?

Хочется верить, что наш мероприятие хоть немного всколыхнуло застоявшийся Байнет. Web Standards Days однозначно продолжит свою поступь по просторам СНГ. Со своей стороны мы приложим все усилия, чтобы оно проходило несколько раз в год в разных городах на постсоветском пространстве. Если у вас есть какие-либо мысли или пожелания по улучшению мероприятия, обязательно присылайте их на wst@web-standards.ru.

P.S. Тексты докладов, презентации, а также видео-версии в ближайшее время будут доступны на официальном сайте webstandardsdays.ru.

Ссылки по теме:

1. Официальный сайт мероприятия.
2. Web Standards Days, 28 ноября, Минск. Отчет Юрия Артюха.
3. Отчёт о Web Standards Days в Минске. Централизовано от Вадима Макеева.
4. В Минске состоялась конференция Web Standards Days. Отчет от Артемия Ломова.
5. Лирическая заметка о WSD’09 в Минске. Отчет от Вячеслава Олиянчука.
6. Web Standards Days в Минске. Отчет Андрея Головненва.
7. Фотоотчет на официальном аккаунте сообщества на Яндекс.Фотки.
8. Фотоотчет от Михаила Баранова.
9. Фотоотчет от Сергея Мордовича.

В прошедшую субботу посетил конференцию WUD 2009 в Минске. Забегая вперед скажу, что она была для меня достаточно полезной и интересной.

Прибыл на место немного опоздав и на прямо входе в лицей БГУ, в котором проходила конференция, встретился с Игорем Морозовым, с которым давно все собирался в оффлайне познакомиться. В зал мы зашли во время доклада прямо во время доклада Паши Коноплицкого, который рассказывал аудитории общие вводные аспекты в понятие юзабилити и о том, какую практическую пользу оно несет.

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

Потом был Сергей Мордович. О чем он говорил, мало кто понял, даже сидевший рядом со мной Макс Гулевич. Макс конечно пошутил, но в каждой шутке есть доля правды. Я не понимаю, о каком юзабилити можно вести речь, когда ты выступаешь перед русскоязычной аудиторией с достаточно серьезной темой и при этом демонстрируешь слайды на английском языке. Надеюсь, в следующий раз Сергей учтет, что мы в Беларуси все-таки находимся. Самым интересным в его докладе для меня было появление Гулевича у микрофона, который «зажигал» так зажигал весь вечер. =)

После некоторого перерыва перед аудиторией выступила Ирина Мордович с докладом о практике проектирования приложений для iPhone. Спасибо Вам, Ирина за ваш прекрасный белорусский язык, очень неожиданно и крайне приятно. Вялiкi дзякуй! Именно из доклада Ирины я убедился в том, что проектирование в Visio сегодня это каменный век, а также узнал особенности и возможности редактора Adobe Fireworks для проектировщика.

Геннадий Драгун запомнился, к сожалению не сильно, так как Макс Гулевич постоянно все происходящее вокруг комментировал и не давал мне перерыва между взрывами (умеренными) моего смеха. =)

Хедлайнером фестиваля конференции стал Юра Шиляев. Он мало касался непосредственно темы юзабилити в своем докладе, а говорил о простых вещах, о мироустройстве на примитивных примерах, которые наглядно демонстрировали то, как устроен бизнес в этом мире. Доклад был хорошим, он мне даже понравился. =)

Вот как-то так и прошел для меня Всемирный День Юзабилити. А как он прошел для Вас?

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

Конкурс проводится в трех номинациях:

• лучшее дизайнерское решение;
• лучшие потребительские качества;
• лучшее использование технологий.

Прием заявок в текущем году уже завершен. Если Вы не успели, придется подождать до следующего года. А пока вести с фронта.

В этом году был несколько изменен регламент конкурса, в частности сокращен срок подачи заявок (61 день в этом году, против 176 дней в прошлом), что позволило отборочному комитету не «замылить» глаза при рассмотрении права проектов на участие в конкурсе. Была принята к рассмотрению 231 заявка против 286 годом ранее, а число номинантов составило 95 против 141. Существенное уменьшение числа номинантов связано с более строгим отбором в этом году.

30-го октября был закончен прием заявок на участие в конкурсе, и уже со 2-го ноября стартовал первый тур судейства, смысл которого заключается в выставлении оценок проектам членами жюри по 100-балльной шкале. Первый тур должен был продлиться две недели и завершиться в эти выходные 15-го ноября. Однако по некоторым причинам он продлен на три дня до среды 18 ноября. Во втором туре жюри будет оценивать финалистов с целью определения победителей и призеров конкурса.

Торжественная церемония награждения предварительно запланирована на 8-ое декабря в СДК МАИ в объединенном формате, совместно с открытой встречей российского крыла WSG.

Несколько слов об особенностях конкурса в этом году устами его идейного отца-основателя Артемия Ломова:

Вызывает удивление тот факт, что в нынешнем году распределение проектов-участников по номинациям крайне неравномерно. С огромным отрывом лидирует номинация «Лучшее дизайнерское решение», в которой зарегистрировано 47 участников. Это почти половина всех номинантов. На втором месте — номинация «Лучшие потребительские качества» с 27 участниками. Наконец, в главной для нашего конкурса номинации — «Лучшее использование технологий» — всего 21 номинант. К слову, в прошлом году ситуация складывалась прямо противоположным образом: технологическая номинация оказалась наиболее популярной. Итоговое распределение проектов по номинациям было таким: 46/40/55.

Свой выбор я уже сделал, а всем номинантам желаю удачи в конкурсе!

Подготовка к Web Standards Days уверенно идет по плану. С момента анонса прошло почти две недели. За это время было получено более 220 заявок на участие в мероприятии. Спешите зарегистрироваться в качестве участника. На сегодня осталось около 80-ти свободных мест, т.к. конференц-зал гостиницы «Беларусь» рассчитан 300 человек.

К нашему мероприятию присоединился проект hh.ru, который выступает в качестве информационного партнера. Сейчас ведутся переговоры по вопросу обеспечения участников мероприятия свободным доступом в сеть интернет с помощью Wi-Fi.

За три недели до начала мероприятия мы расширяем программу. С докладом выступит руководитель группы верстки компании HeadHunter Андрей Сумин. Тема доклада и его время в программе мероприятия будут уточнены позднее. А помимо Николая Мациевского, среди участников ожидается соавтор «Реактивных веб-сайтов» Евгений Степанищев.

Мы хотим поблагодарить всех, кто помог и помогает донести новость о предстоящем Web Standards Days до веб-разработчиков всего русскоязычного сегмента сети Интернет: всех наших партнеров, проекты it.tut.by, electroname.com, dev.by, а также десятки разработчиков, осветивших тему тему в блогосфере.

Отдельно хотим отметить удивительный по своей подаче анонс Web Standards Days в блоге Вячеслава Олиянчука «О Минске, стандартах и просветлении».

Благодарим всех за поддержку и ждем Вас 28 ноября 2009 года в Минске на Web Standards Days!

Вы все еще не соблюдаете веб-стандарты? Тогда мы идем к Вам!

Первая открытая встреча объединения разработчиков «Веб-стандарты», проходившая поздней осенью 2007 года в Санкт-Петербурге, завершилась абсолютным успехом. Поэтому было принято решение о расширении географии деятельности объединения и об организации серии подобных мероприятий в России, а также на Украине и в Беларуси.

Исполняя принятое решение, объединение разработчиков «Веб-стандарты» представляет новый формат мероприятий под названием «Web Standards Days». Первая встреча состоится 28 ноября 2009 года в Минске в конференц-зале гостиницы «Беларусь» по адресу ул. Сторожевская, 15.

Главной целью первой и последующих встреч является качественное образование и обмен опытом в области веб-разработки. Подобный формат не подразумевает продвижение каких-либо отдельных коммерческих интересов и технологий — нас объединяет идея построения единого открытого веба.

Для бесплатной регистрации отправьте по адресу wst@web-standards.ru ваши имя и фамилию, а также, при желании, несколько слов о себе — будем знакомы! Кстати, количество мест ограничено — если они начнут кончаться, мы об этом предупредим.

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

Мы приглашаем всех заинтересованных специалистов принять участие в дискуссии о развитии веб-стандартов и применении их на практике. Среди докладчиков и участников встречи будут присутствовать представители следующих компаний: Opera Software, Яндекс, Суп Фабрик, WEBO Software, LOVATA Group.

После завершения мероприятия все желающие приглашаются к неформальному общению между докладчиками и участниками. Время и место будет уточнено.

Партнёрами события выступят компании Opera Software и LOVATA Group, которые окажут спонсорскую и организационную поддержку, а также проект IT-JOB.by, который обеспечит фото и видео съемку мероприятия.

Подробная программа встречи:

10:30–11:00 — Регистрация учатников
11:00–11:15 — Открытие. Вступительная речь
11:15–12:15 — HTML и CSS. Будущее сегодня! Павел Ловцевич
12:15–12:30 — Перерыв
12:30–13:30 — Ошибка. Осознание, примирение, извлечение пользы. Вадим Макишвили
13:30–14:30 — Обед
14:30–15:30 — Веб-шрифты vs. Шрифты для веба. Вадим Макеев
15:30–15:45 — Перерыв
15:45–16:15 — WebHiTech. Итоги 2009 и планы 2010. Артемий Ломов
16:15–16:45 — VML, SVG, Canvas: что дальше? Николай Мациевский
16:45–17:00 — Закрытие

Впервые а Минске пройдет конференция, посвященная Всемирному дню юзабилити. Целью мероприятия организаторы озвучивают необходимость привлечения внимания к теме проектирования интерфейсов, юзабилити и методологии user centered design.

Конференция состоится 14 ноября 2009 года в Минске, в помещении главного корпуса БГУ в актовом зале лицея БГУ (ул. Ульяновская 8).

Программа

1. Павел Коноплицкий «Сложный путь к юзабилити»
2. Вадим Скротский «Редизайн Oz.by. Разбор кейса»
3. Сергей Мордович «Persuasive design»
4. Ирина Мордович «Практыка стварэння прататыпаў прыкладанняў для платформы iPhone»
5. Геннадий Драгун «Общение в работе проектировщика интерфейсов»
6. Юрий Шиляев «Сколько стоит удобный дизайн или почему так мало желающих его купить?»

Организатор Павел Коноплицкий о мероприятии:

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

От лица организаторов — сообщества Usability.by и БГУ (механико-математический факультет) — приглашаем всех желающих посетить конференцию WUD 2009.

Участие в конференции бесплатное. Для этого необходимо зарегистрироваться на сайте мероприятия.

Место и время проведения

Минск, пр. Независимости 4 (главный корпус БГУ), ауд. 433 ул. Ульяновская 8, актовый зал лицея БГУ.
11:30 – регистрация участников конференции, 12:00 – начало конференции.
Справки по тел. 226-55-39, БГУ, кафедра ЧМиП
Официальный сайт мероприятия wud.usability.by.

P.S. Я уже зарегистрировался, буду рад увидеться со всеми.

Вторая половина 2009 года ознаменовалась возвращением позабытой на долгое время техники внедрения шрифтов в страницы сайтов, с помощью свойства CSS @font-face, которое было предложено в спецификации CSS2 разработчикам браузеров еще в мае 1998 года!

Первая реализация данного свойства состоялась и того раньше, в 1997 году, когда компания Microsoft выпустила на рынок браузер IE4, позволявший встраивать на вебстраницы шрифты с помощью нового CSS-свойства @font-face, которое позже и было внесено в спецификацию CSS2, в новом формате Embedded OpenType (EOT), специально разработанном для применения в сети интернет. Особенностью формата было наличие компрессии файла и механизма защиты от нелегального копирования с помощью прописывания в корневую строку (RootString) записи со списком доменов, на которых допускается использование шрифта.

Однако, техника внедрения шрифтов по ряду причин провалилась:

1. доминировавший в то время Netscape сделал свой выбор в пользу иного формата TruDoc;
2. EOT не был стандартом и шрифты для него попросту отсутствовали;
3. шрифты в формате EOT были сложнее в разработке;
4. механизм защиты от нелегального использования не способствовал популяризации формата;
5. медленный коммутируемый доступ в сеть накладывал существенные ограничения на размер вебстраницы и скорость ее загрузки.

В целом техника оказалась несколько преждевременной и долгое время оставалась невостребованной. А когда в ней назрела необходимость, браузеры IE потеряли львиную долю рынка в пользу альтернативных программных продуктов, которые при всех своих плюсах все еще не могли предложить удобного инструмента для решения этой тривиальной задачи, кроме обходных техник, таких как sIFR, Cufón, Typeface.js, Facelift и пр.

Лед тронулся в 2007 году, когда разработчики Webkit заявили о внедрении техники @font-face в новую версию движка, выбрав при этом для поддержки свободные форматы шрифтов TTF и OTF. Производители браузеров последовали этому примеру в течение последующих лет, выпустив Safari 3, Firefox 3.5, Opera 10 с поддержкой @font-face.

В свою очередь, компания Microsoft в 2008 выступила с инициативой продвижения EOT, как открытого стандарта. И в преддверии 2009 года состоялось собрание W3C, на котором присутствовали представители компаний Bitstream, Microsoft, Mozilla, Opera, W3C, Nokia, Monotype и Inventive Designers. Целью встречи было обсуждение сложившейся ситуации со шрифтами для использования во всемирной паутине. Был выдвинут ряд предложений по созданию специальной Рабочей группы по шрифтам (Font WG) и возможное создание нового контейнера для шрифтов.

Назад в будущее

Сегодня свойство @font-face поддерживает большинство актуальных версий браузеров: IE6-8, Firefox 3.5, Opera 10, Safari 3-4 и Chrome 3. Браузер Google Chrome, основанный на движке WebKit, который также используется в Safari, тоже имеет поддержку @font-face. Однако она пока отключена по соображениям безопасности. Для того, чтобы активировать поддержку этого свойства вручную, нужно инициировать запуск браузера с ключом —enable-remote-fonts. Включение же @font-face по умолчанию обещается разработчиками после решения всех проблем с безопасностью. Планируется это к релизу версии Chrome 4.0 в конце года. Но для Вас я открою один секрет. Версия 3.0 замечательно работает со шрифтами в формате svg! По крайней мере у меня это работает на билде 3.0.195.27 под Windows.

Перечисленные выше браузеры поддерживают использование шрифтов TrueType Font (.ttf) и OpenType Font (.otf), за исключением IE, который, как я сообщал ранее, имеет нативную поддержку исключительно собственного открытого формата Embedded OpenType (.eot). Самой большой проблемой использования EOT является малая распространенность шрифтов в этом формате. Поэтому разработчикам придется научиться конвертировать шрифты TTF и OTF в EOT. Впрочем, это не будет составлять большой сложности, о чем я расскажу далее.

EOT vs. …WOFF?

Совсем недавно, 20 октября 2009 года, Mozilla анонсировала поддержку нового формата Web Open Font Format (WOFF) в браузере Firefox, начиная с версии 3.6, выход которой запланирован на ноябрь этого года. Что же представляет из себя новый формат? WOFF является контейнером шрифтов форматов OpenType, Open Font Format или TrueType, специально разработанным для нужд вебразработчиков. К его преимуществам можно отнести компрессию файла и возможность внесения мета-информации, например, об авторах или определения допустимых рамок использования шрифтов, но без DRM. В планах Mozilla продвигать этот формат в качестве вебстандарта. Подробнее о WOFF на русском языке Вы можете прочитать в переводной статье «Web Open Font Format в Firefox 3.6″.

Несите ваши денежки

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

Золтан Гаврилюк (Zoltan Hawryluk) в своей статье @font-face in Depth представляет список сайтов, на которых опубликованы коллекции шрифтов, лицензия которых допускает их свободное использование в т.ч. и в сети интернет, который с моими дополнениями вы найдете в конце статьи.

Недавно на ранке появилось совершенно уникальное предложение по приобретению и дальнейшему использованию шрифтов в сети интернет. Студия дизайна Typotheque предложила новый тип лицензии Web fonts, согласно которой каждый может приобрести любой шрифт из каталога студии всего за 20% от его стоимости. Главным условием является то, что Вы не можете скачать сам шрифт в виде бинарного файла. Вы получаете возможность подключения приобретенной гарнитуры к вебсайту с помощью запроса соответствующего файла непосредственно с сервера студии. Под каждую лицензию выделяется 500 Мб месячного трафика (~25000 загрузок), а трафик сверх лимита оплачивается по 1 Евро за 1 Гб.

При этом Вы вообще освобождаетесь  от применения @font-face самостоятельно. Все что нужно будет сделать, это подключить к документу дополнительный файл со стилями, который сгенерирует для Вас система при покупке шрифта.

Typotheque Web Font Service demo from Typotheque on Vimeo.

Полемика на тему, начинать изучать с нее For & against standardizing font embeddin.

Конвертация шрифта

Прежде чем приступить к практическому внедрению шрифтов в страницы, мы должны позаботиться об их кроссбраузерной совместимости, т.е. научиться конвертировать доступные шрифты. На мой взгляд, самым простым способом для этого является онлайн-сервис TTF to EOT Font Converter. Который, как видно из названия пока работает только со шрифтами TTF. Конвертация проходит в два шага: вы загружаете TTF-шрифт, Вы скачиваете EOT-шрифт.

Но еще лучшим решением, на мой взгляд (спасибо за наводку Юрию Артюху), является сервис @font-face Kit Generator, который позволяет одним махом получить архив с набором из оригинального TTF/OTF шрифта, шрифта EOT, шрифта SVG и даже шрифта WOFF! А если Вам этого показалось мало, то Вы получите еще и готовый пример HTML+CSS для вставки шрифта на вебстраницу, а также возможность некоторой оптимизации на этапе конвертации (разложение шрифта, очистка обводов, автокоррекция глифов).

Компания Microsoft предлагает свой инструмент для конвертации шрифтов под названием Web Embedding Fonts Tool (WEFT), который по сообщениям в сети склонен к некорректной конвертации шрифтов и некорректно работе в целом на платформах Win Vista и WIn7. WEFT работает только с TTF. С подробной инструкцией на английском языке Вы можете ознакомиться здесь.

Пользователи Mac могут воспользоваться для этих целей программой FontForge, которая также существует в консольной версии под Win и под Nix системы. Подробное руководство по работе с программой на английском языке от Джонатана Снука (Jonathan Snook) Вы можете посмотреть в его скринкасте Screencast: Converting OTF or TTF to EOT.

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

Внедрение шрифта на страницу

Перейдем непосредственно к работе со свойством @font-face, подробное описание которого на английском языке Вы найдете в спецификации CSS3.

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

@font-face {
 	font-family: 'Fertigo Pro Regular';
 	src: url('Fertigo Pro Regular');
 }

Как видим ничего сложного. Кроме объявленны параметров, мы можем указать формат загружаемого шрифта, сделать запрос на его наличие в системе у пользователя, а также задачть стилистически параметры отображения. Представляю Вашему вниманию наиболее оптимальный кроссбраузерный код внедрения шрифта на страницу через свойство @font-face, предложенный Полом Айришем (Paul Irish), на примере свободно распространяемого шрифта Fertigo Pro Regular.

@font-face {
	font-family: 'Fertigo Pro Regular';
	src: url('Fertigo_PRO.eot');
	src: local('Fertigo Pro Regular'),
             local('FertigoPro-Regular'),
             url('Fertigo_PRO.woff') format('woff'),
             url('Fertigo_PRO.svg#FertigoPro-Regular') format('svg'),
             url('Fertigo_PRO.otf') format('opentype');
}

Эта наиболее компактный вариант, позволяющий не выносить ссылки на разные форматы шрифтов в отдельные блоки кода или помещать EOT-шрифты в Conditional Comments. Кстати, по непонятной пока для меня причине из-за строки №4 Opera 10 отказалась применять шрифт и вывела весь текст единым кеглем и степенью насыщенности. Попробую зарепортить в багтрекер норвежцам.

Рассмотрим его детально. Первым делом мы объявляем семейство шрифтов Fertigo Pro Regular. Затем указываем источник со шрифтом в формате EOT для браузеров IE. Далее мы обращаемся к остальным браузерам с запросом на наличие локально установленного шрифта, если таковой отсутствует, браузеру предлагается его скачать. WOFF мы предлагаем для Firefox 3.6+, SVG для Opera 9.x и iPhone, а OTF для всех остальных браузеров.

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

Затем мы просто указываем семейство Fertigo Pro Regular для любого блока нашего документа или всей страницы в целом:

body { font-family: 'Fertigo Pro Regular', Verdana, sans-serif; }

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

Некоторые гарнитуры поставляются не в одном файле. Например, Droid Sans имеет отдельную полужирную версию в отдельном файле. Подключать ее мы будем следующим образом:

@font-face {
	font-family: 'Droid Sans';
	src: url('DroidSans.eot');
	src: local('Droid Sans'),
	     local('Droid Sans'),
	     url('DroidSans.ttf') format('truetype');
}
@font-face {
	font-family: 'Droid Sans';
	src: local('Droid Sans Bold'),
	     local('Droid Sans-Bold'),
	     url('DroidSans-Bold.ttf') format('truetype');
	font-weight: bold;
}

Второе правило предназначено только для альтернативных браузеров, т.к. EOT версия Droid Sans включает в себя болдовую версию шрифта. @font-face позволяет указывать до 8-ми различных начертаний шрифта.

Рендеринг шрифтов

Рассмотрим некоторые детали внедренного шрифта Fertigo Pro Regular посредством @font-face. Для теста воспользуемся следующими браузерами (в порядке убывания на изображении): Firefox 3.5, Safari 4.0, Chrome 3.0, Opera 10, IE6, IE7, IE8. Браузеры Firefox, Safari и Opera отображают шрифт OTF, Chrome отображает SVG, а все семейство IE — EOT. Тест рендеринга проводился только на платформе Windows. IE был в каждой из систем браузером по умолчанию.

Пример рендеринга в браузерах внедряемого шрифта

Я могу оценивать рендеринг шрифта лишь поверхностно, т.к. я не являюсь специалистом по типографике. Как можно заметить не вооруженным глазом, Firefox склонен к уменьшать толщину элементов некоторых символов, делать их более округлыми, а также местами грубо без видимого сглаживания отрисовывать края символов. Safari и Opera, на мой взгляд, являются эталоном отображения в рассматриваемом случае. А вот IE несколько портит шрифты, конвертированные из OpenType, изменяя вид и толщину глифов. Плавность линий Safari безусловно обеспечивает включенный ClearType, а вот Opera и без него отлично справилась.

Здесь Вы можете посмотреть пример страницы с внедренными шрифтами, а в конце статьи здесь скачать архив этого примера.

Оптимизация шрифтов

Внедрять шрифты следует с осторожностью, помня о том, что многие из них могут быть достаточно объемными. Вакорин Никита приводит следующие данные в своей статье Внедрение шрифтов — EOT и @font-face:

Например, каждое из четырёх стандартных начертаний (нормальный, полужирный, полужирный курсив, курсив) всем известного шрифт Arial, весит от 500 до 800 килобайт. Если использовать на сайте все 4 стиля начертания, то получится более двух мегабайт. Очень приличный объём. Но это мелочи по сравнению с объёмом шрифта Arial Unicode MS — больше 20 мегабайт!

Как видим объемы данных приличные и с этим необходимо что-то делать. Со слов Никиты, ему удалось достичь компрессии в 2,5 раза при конвертации шрифтов из TTF в EOT, что даже превышает компрессию ZIP, RAR и GZIP! Но опять же этот формат доступен только для семейства браузеров IE.

Другой путь оптимизации это разложение шрифта (font subsetting). С его помощью Вы можете удалить все символы, которые вы не планируете использовать. Например unicode-шрифты могут содержать помимо латиницы кирилицу или даже символы японского письма. Поэтому, знаяя язык и тематику будущего сайта, Вы можете заранее исключить из него все иноязычные или специальные символы. Для этих целей Вы можете использовать программы FontForge или WEFT.

Пример оптимизации разложением от Никиты Вакорина:

Оригинал всё того же шрифта arial.ttf (766 килобайт) после разложения на кириллицу с помощью WEFT стал весить 77 килобайт. Разница очевидна.

Еще один пример от Юрия Артюха:

Благодаря удалению только таких символов, файл для шрифта Myriad у меня уменьшился с 96 килобайт, до 40.

У меня же при конвертации шрифта Fertigo Pro Regular с помощью сервиса @font-face Kit Generator результыты компрессии из OTF в EOT, WOFF и SVF получились следующими.

Сравнение размера шрифтов разных форматов

Надо сказать, что у формата WOFF получился отличный старт. Посмотрим, как будет этот формат развиваться в будущем.

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

Спецификация CSS3 также позволяет нам выбрать диапазон используемых символов, например:

@font-face {
	font-family: 'Droid Sans';
	src: url(DroidSans.ttf);
	unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

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

The unicode-range descriptor serves as a hint for user agents when deciding whether or not to download a font resource.

Однако первоисточник не прояснил этот вопрос для меня.

Ну еще одним способом оптимизации является сжатие файла шрифтов в GZIP на сервере перед отправкой браузерe. Об этом очень подробно в своих статьях на английском языке Gzip your @font-face files и @font-face gzipping — take II рассказывает Стоян Стефанов (Stoyan Stefanov).

Выводы

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

Все еще остаются открытыми некоторые вопросы применения шрифтов в сети интернет. В частности, вопрос с единым форматом, на который претендует ветеран EOT и молодой выскочка WOFF. Но это в принципе не является проблемой и препятствием для повсеместного распространения вебшрифтов. Пока же позиция Microsoft выглядит наиболее сильной с учетом поддержки Adobe и Monotype.

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

Также хочу обратить внимание читателя на проект webfonts.info, который представляет из себя wiki, посвященную вопросам шрифтам в вебе.

Ссылки по теме

Статьи на русском:

1. Внедрение шрифтов — EOT и @font-face
2. font-face оживление
3. Web Open Font Format в Firefox 3.6
4. Прекрасные шрифты посредством @font-face
5. Внедрение нестандартных шрифтов посредством @font-face

Статьи на английском:

1. Bulletproof @font-face syntax
2. @font-face in Dept
3. CSS3 @font-face is not as ready as you would think
4. @font-face
5. Becoming a Font Embedding Master
6. For & against standardizing font embedding
7. webfonts.info
8. font-face.com
9. @font-face Browser Support & Tutorial

Конвертация шрифтов и оптимизация:

1. @font-face Kit Generator
2. TTF to EOT Font Converter
3. TTF2EOT
4. FontForge
5. Embedding Fonts with WEFT
6. Screencast: Converting OTF or TTF to EOT
7. SVG Font Converter
8. Gzip your @font-face files
9. @font-face gzipping — take II

Коллекции свободных шрифтов:

1. Kernest.com
2. 40+ Excellent Freefonts For Professional Design
3. fontsquirrel.com
4. larabiefonts.com
5. Fonts available for @font-face embedding
6. The League of Moveable Type
7. 21 Awesome @font-face Embeddable Typefaces
8. 20 New High Quality Free Fonts

Здравствуйте, меня зовут Павел Ловцевич. Я вебразработчик из Минска. В сети многие меня знают по нику Zigzag или Zigzag McQuack. А кто не знает, ну что же? Будем знакомы!

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

Да, раньше я уже успел попробовать себя в качестве автора блога, как тематического профессионального, так и личного. Однако случилось так, что личный блог трансформировался в твиттер, долгое время остававшийся для меня темной лошадкой, @zigzag_mcquack. А профессиональный, рассчитанный на несколько авторов, заглох сам по себе.

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

О чем я собираюсь писать? Да все о том же: XHTML, HTML, CSS, jQuery, W3C, Firefox, Chrome, Opera, Safari, Internet Explorer. Также я являюсь частым гостем на различных конференциях, посвященных тематике вебразработок, поэтому всегда буду рад поделиться впечатлениями от мероприятий со своими читателями.

В добрый путь, как говорится!