Технологический конкурс сайтов

pic

Закончился первый технологический конкурс сайтов, проходящий при поддержке «Центра регистрации доменов» RU-CENTER. Автор идеи конкурса, главный идеолог и пропагандист грамотного сайтостроения, автор книг и онлайновых колонок, председатель Оргкомитета конкурса Артемий Ломов.

Материалы о конкурсе можно посмотреть на сайте конкурса http://webhitech.ru/

pic

На РИФе-2008, в центре Председатель оргкомитета конкурса Артемий Ломов. Слева член жюри конкурса Андрей Удалов, директор по качеству и партнер компании «Группа Махаон», занимающейся разработкой сайтов с 1995 года. Справа член жюри конкурса Александр Венедюхин — главный редактор проекта компании RU-CENTER «Энциклопедия сайтостроения». Автор научно-популярных статей в печатных и интернет-изданиях. Ведущий научно-технического блога dxdt.ru

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

Однако цель – это декларируемый идеал. На самом же деле количество сайтов, отвечающих стандартам Консорциума W3C и требованиям удобства работы с содержанием довольно мало.
Для всех веб-разработчиков будет интересно рассмотреть требования, предъявляемые к номинантам. Это хорошие ориентиры для юзабилистов, верстальщиков, программистов, постановщиков задач, а также для членов жюри всяких конкурсов и фестивалей. То, что все это сформулировано и выложено компактно – уже представляет собой определенную ценность.
К участию в конкурсе допускаются общедоступные информационные сайты, ориентированные на русскоговорящую аудиторию. Портрет идеального, с точки зрения оргкомитета, информационного сайта, имеющего все шансы победить на конкурсе WebHiTech в любой из номинаций, таков.

• Страницы сайта оформлены в духе разумного, функционального минимализма, производят безусловно позитивное эстетическое впечатление и воспринимаются как завершенные и целостные композиции.
• Все страницы сайта оформлены в едином стиле. Сайт создает целостное впечатление.
• Страницы сайта рационально используют площадь окна браузера. Оргкомитет конкурса отстаивает убеждение, что «резиновая» верстка при прочих равных условиях предпочтительнее фиксированной по ширине.
• Область основного содержания использует максимально возможную (без ущерба для других функциональных областей) площадь на пространстве страниц. Безусловное предпочтение отдается сайтам, на которых нет бесполезных для посетителей элементов, таких, как нетематическая реклама и т. д.
• Система навигации сайта интуитивно понятна, информативна и всячески способствует экономии времени и сил посетителей. Ссылка, ведущая на текущую страницу, считается грубейшим недочетом. Наличие полнотекстового поиска по всему контенту сайта приветствуется.
• Посетитель может легко изменить размер шрифта на странице штатными средствами привычного ему браузера (даже если речь идет об IE).
• Текстовое содержание сайта, а также альтернативные текстовые комментарии к графическим изображениям и другим объектам, являющимся частью контента, полностью доступны пользователям консольных и речевых браузеров, устаревших версий графических браузеров, пользователям, привыкшим отключать графику.
• Важная для пользователей функциональность всех сервисов сайта сохраняется при отключенных JavaScript, Flash, ActiveX и т. д. в браузере.
• HTML-разметка отвечает исключительно за логическое структурирование контента, тогда как управление его представлением (внешним видом, особенностями воспроизведения программами синтеза речи и т. п.) полностью возложено на CSS. Предпочтительно использование внешних листов стилей, загрузка которых не требуется с каждой вновь открываемой страницей.
• HTML-код страниц соответствует идеалам семантической верстки. (Заголовки размечены тегами <h1>…</h6> в соответствии с естественной иерархией, но никак не <font>; абзацы — тегом <p>, но не <br>, таблицы используются только по прямому назначению и т. п.)
• Контент сайта легко индексируется поисковыми машинами, переход поискового робота между страницами сайта не затруднен никакими технологическими ограничениями (например, навигацией, реализованной на основе JavaScript).
• На сайте предусмотрены автоматически генерируемые, прозрачные для пользователя (т. е. не требующие от него никаких действий) версии представления контента для вывода страниц на печать и для просмотра их на экранах карманных компьютеров.
• Страницы сайта отображаются без существенных различий во всех сколько-либо распространенных на текущий момент графических браузерах: IE 6—7, Opera 8—9, Firefox 1—3, Safari 3.
• Код разметки обнаруживает полное соответствие спецификации XHTML 1.0 Strict (менее желательно — HTML 4.01 Strict) или XHTML 1.1. Код листов стилей полностью соответствует спецификации CSS2.
• Текст на страницах сайта вселяет уверенность, что его автор (редактор) в совершенстве владеет русским языком и правилами набора.
• Иллюстративная графика и фотоматериалы, размещенные на сайте, не вызывают сомнений в художественных талантах и технических навыках их авторов.
• Любая страница сайта загружается не более 10 секунд даже в том случае, если для доступа в Интернет посетителем используется модемное соединение со скоростью 28 800 бит/с.

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

Конкурс проводится в следующих номинациях.
Лучшее дизайнерское решение.
При оценке работ, заявленных в данную номинацию, наибольшее внимание уделяется дизайну сайта в понимании искусства композиции, художественного оформления. Цель данной номинации — показать миру, что сайты, сверстанные с применением блочной модели CSS и созданные по правилам семантической разметки, уж точно ничем не хуже, а во многих случаях и гораздо лучше с точки зрения эстетического восприятия, нежели проекты, использующие сомнительное наследие консервативной школы табличной верстки и пренебрежения спецификациями технологий.
Лучшие потребительские качества.
При голосовании в данной номинации предпочтения жюри отдаются проектам, отличающимся высоким уровнем пригодности к использованию (usability) и доступности контента (accessibility) для максимально широкого круга потенциальных пользователей. Оценивается скорость загрузки страниц, комфортность восприятия информации, продуманность системы навигации по сайту, доступность контента в условиях использования устаревших версий браузеров и портативных устройств, доступность всех сервисов сайта при отключенных JavaScript, ActiveX, Flash и пр., наличие и качество реализации альтернативных версий представления контента (для вывода на печать, для карманных компьютеров и т. п.).
Лучшее использование технологий.
Наибольшие шансы на победу в данной номинации имеют проекты, страницы которых: не содержат ошибок валидации в HTML- и CSS-коде; в максимальной степени соответствуют принципу разделения содержания и представления на уровне конечного кода веб-страниц, отправляемого сервером клиенту; выполнены в лучших традициях семантической верстки; эффективно используют микроформаты; в общем, являются красноречивой иллюстрацией продуктивного использования современных веб-стандартов.

Прием заявок на конкурс WebHiTech проводился с 3 апреля по 25 сентября 2008 года включительно, всего было получено 286 заявок.

В результате сложной и напряженной работы жюри конкурса WebHiTech определило победителей, призеров и финалистов, а также обладателей специальных поощрительных призов.

Номинация «Лучшее дизайнерское решение»
I место. Коттеджный поселок «Ясная поляна»

pic

II место. Сиренити

pic

III место. Optimism.Ru

pic

III место. Бизнес-центр «Гедон»

pic

Финалист. PokrovBlog

pic

Номинация «Лучшие потребительские качества»
I место. ZForms
II место. X-tyres
II место. Еврогараж
III место. Карта точек Wi-Fi по городам России
Финалист. Национальный кинопортал Фильм.Ру

Номинация «Лучшее использование технологий»
I место. Клуб «Пинтагон»

pic

II место. Fastcoder — портал для JavaScript-программистов
III место. Большой толковый словарь
Финалист. Веб-студия «Арт-Лайн»
Финалист. Строительная компания «Фирма „Культбытстрой“»

Специальные призы
Поощрительный приз. LiveInternet — сервис поиска (за стремление к совершенству для одного из крупнейших ресурсов Рунета)
Поощрительный приз. Аргументы и факты (за стремление к совершенству для одного из крупнейших ресурсов Рунета)

pic

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

Артемий Ломов выступил на только что завершившейся конференции UserExperience-2008 с докладом «Обобщение опыта отбора заявок на конкурс WebHiTech. Вопросы юзабилити и технологий», посвященным, главным образом, типичным ошибкам, допускаемым разработчиками веб-сайтов. Доклад вызвал живой интерес среди слушателей, его можно использовать как своего рода учебник. Текст доклада выложен на сайте конкурса. Учитывая важность для всех веб-строителей положений доклада, приведу цитату из него.

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

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

Ошибки проектирования систем навигации
• Система навигации сайта неинформативна: пользователь, попав случайно на внутреннюю страницу сайта, не понимает, где именно в структуре сайта он находится.
• Ссылки вне магистрального меню навигации не подчеркиваются или не выделяются другим очевидным образом.
• Просмотренные и непросмотренные ссылки вне магистрального меню навигации не различаются по цвету или различаются так, что сразу неочевидно, какая ссылка является просмотренной, а какая — нет.
• На страницах присутствуют ссылки-«петли», т. е. ссылки, ведущие на ту же самую страницу.
• На внутренних страницах сайта нет ссылок на главную страницу.
• Логотип или визуал, размещенный в «шапке» сайта, на внутренних страницах не используется в качестве ссылки на главную страницу.
• Для работы меню навигации или других сервисов сайта необходимо наличие поддержки JavaScript, Flash, ActiveX и других технологий, отличных от (X)HTML, в браузере.
• Некоторые ссылки принудительно открываются в новых окнах. Используются технологические приемы, нарушающие работу кнопки «Назад» в браузере.
• Содержимое статусной строки браузера принудительно изменяется клиентскими скриптами сайта.
• В составе навигационных инструментов сайта имеются ссылки а-ля «Версия для печати», «Версия для КПК» и т. д. Версии одной и той же статьи для различных устройств обладают различными URL.
• Название пунктов меню навигации не совпадает с заголовками страниц, соответствующих данным пунктам меню.
• Недостаточное внимание уделяется элементам <title>…</title> на страницах.

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

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

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

Orphus system