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

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

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

Подробнее можно почитать на сайте конкурса. Дерзайте и успехов!

И настало время двигаться вперед и эксперементировать по-крупному. Я обновил тему сайта, но не только визуально, но и перевел ее на HTML5, с вкраплениями CSS3. Естественно, не учитывая IE )

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

Если вы загорелись попробовать поработать с HTML5, то почитать об этом можно здесь и здесь. А в ближайшее время и я напишу статью по теме.

Ждите новостей ;)

Задумка Дина, это не менее чем покусительство на лавры XSLT, CSS и Jquery вместе взятых. Конкретики пока что совсем мало, но и этого при минимальном воображении хватает.

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

1. Быстрое решение:

.ie8only { color /*\**/: #fff\9 }

Работает только в Standards Mode

2. Более разумный подход к вопросу:

В файле стилей для IE, подключеном через условный комментарий создаем такую структуру:

html>/**/body #id { property: value; }

Почему именно в отдельном файле? Потому что такую конструкцию прочтут все современные браузеры, включая IE8. Нужно помнить, что в таком случае все остальные хаки, предназначеные для IE6/7, должны быть прописаны через их собственные специфичные хаки (тогда IE8 ничего не заподозрит):

• IE 6 — * html
• IE 7 — *+html

Это детище мелкомягких, срок выдержки которого поболее чем у лучших коньяков, не желает становиться лучше с годами (видимо надо было хранить в дубовых бочках). И нам, веб-разработчикам, приходится с этим мириться. Количество версий Интернет Эксплорера, которые надо поддерживать – растет, и эпопея эта затянулась. Со времени выхода 7-ой и 8-ой версии Интернет Эксплорера появилось несколько утилит, позволяющих тестировать верстку в нескольких версиях IE одновременно.

Вот скромный список вариантов “борьбы” с Интернет Эксплорером:

• Multiple IE
• IE Tester
• IE Collection
• Виртуальные машины
• Выйти на пенсию

А теперь немного подробнее:

Multiple IE. Живет это зверь здесь. Вернее жил. На данный момент проект закрыт и не поддерживается, но утилита доступна для скачивания и более-менее функцию свою выполняет. Тем не менее я решил отказаться от ее использования из-за того что она стала “привирать” а иногда откровенно глючить. Кроме того, появились более удачные “конкуренты”.

IE Tester. Ребята из DebugBar пошли дальше и создали утилиту, позволяющую иметь одновременно установленными 5.5, 6, 7 и 8 версии Интернет Эксплорера одновременно, с собственными javascript-движками. Причем выполнено это все в виде одного браузера, в каждой отдельной вкладке которого можно открыть нужную вам версию IE. Программа работает как в ХРюне, так и в Висте. Интерфейс правда немного подкачал, ибо выглядит как китайский MS Office 2007, но это не главное.

По большому счету, на этом можно было бы и остановиться, но. При ежедневном ее использовании на Windows XP, были обнаружены некоторые странности:

• Иногда не подхватываются стили из файла, вынесенного с помощью условных комментариев.
• Иногда вкладка с IE6 просто тихо умирает и не реагирует.
• Несколько раз замечены несоответствия отрисовки страницы в IE Tester и в IE6, установленном нативно.

Причем дома, на Windows Vista, таких проблем замечено не было. Вам решать. Двигаемся дальше.

IE Collection. Об этой утилите я узнал совершенно случайно недавно, в контексте беседы о разработке под IE. В ней на выбор предоставлены фактически ВСЕ версии IE:

• Internet Explorer 1.0 (4.40.308)
• Internet Explorer 1.5 (0.1.0.10)
• Internet Explorer 2.01 (2.01.046)
• Internet Explorer 3.0 (3.0.1152)
• Internet Explorer 4.01 (4.72.3110.0)
• Internet Explorer 5.01 (5.00.3314.2100)
• Internet Explorer 5.5 (5.51.4807.2300)
• Internet Explorer 6.0 (6.00.2800.1106)
• Internet Explorer 6.0 (6.00.2900.2180)
• Internet Explorer 7.0 (7.00.5730.13)
• Internet Explorer 8.0 (8.00.6001.18702)

Даже если принять во внимание, что первые шесть позиций в списке нужны только эстетствующим bdsm-щикам, а седьмая Яндексоидам, то все остальные очень нам подойдут. И все это чудо, начиная с 4-ой версии должно работать стабильно во всех ОСях Майкрософт, начиная с XP. На сайте есть таблица совместимости. Вроде бы “кричали женщины Ура и в воздух чепчики бросали”, но. Опять но. При попытке установить все это добро на Висту, инсталятор отказался выдать мне 7 и 8 версии IE. Ну 8 у меня и так есть, обойдусь. А вот с 7-ой как быть? Буду проверять с чем конфликтует.

Вот для таких “проблемных” как я, умные люди придумали виртуальные машины:

• Internet Explorer Application Compatibility VPC Image – мелкомягкое изделие, срок действия которого заканчивается 30 Апреля :) Не спрашивайте меня почему. Посмотрим какие цифры там будут стоять 1-ого Мая. Работает через Virtual PC, естественно на ХР и Висте.
• Virtualbox – кросс-платформенное решение, полноценная виртуальная машина, со всеми вытекающими. Из минусов – при отсутствии готовых образов придется создавать свои, с установкой и сексом.
• VMware Player – дублировать предыдущий абзац не буду. Читайте выше.

Я с виртуальными машинами работать не люблю. Не люблю и все тут. При открытом Фотошопе, полной кошелке браузеров, редакторе, файловом менеджере и еще каком нибудь плеере в фоне еще открыть две виртуальные машины? Увольте. Видимо мне пора на пенсию :) А вы сами решайте.

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

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

В общем, если вы хотите получить бесплатный профессиональный аудит в сфере дизайна и проектирования интерфейсов — смело заполняйте заявку. Полезно будет не только несведущим, но и людям “в теме”. Рекомендую.

Ярослав, с почином и спасибо!

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

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

В последнее время, многие редакторы и CMS’ки автоматически проставляют DOCTYPE для документа, что само по себе является прорывом, но к сожалению этого недостаточно, так как зачастую это именно Transitional схема. Начинающие разработчики не уделяют этому должного внимания, а зачастую вобще не подозревают что у них есть выбор.

Перед тем как перейти к самой сути вопроса давайте вспомним что такое Transitional схема. Она была создана как переходная, для облегчения перехода от HTML3.2 к HTML4, сохраняя унаследованые элементы и атрибуты.

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

Современная веб-разработка зиждется на трех китах – разметка (html/xhtml/xml), оформление (css) и функционал с эффектами (javascript). Причем акцент здесь приходится на четкое разделение между ними. Разметка является логическим разделением документа на семантические, смысловые составляющие. Стилевые правила, вынесеные в отдельный файл(ы), отвечают за оформление документа относительно устройств отображения. Скрипты, отвечающие за взаимодействие между документом и пользователем, а так же за эффекты, также вынесены в отдельные файлы. Смешение всех этих компонентов в одном документе считается моветоном и заметно усложняет жизнь веб-разработчика и порядочно увеличивает время загрузки и отображения документа браузером.

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

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

А что же собственно делать?Использовать Strict DTD — строгую, однозначную схему валидации документа, которая как раз создана для того чтобы отделить содержимое от стилей и скриптов. Как это сделать? Очень просто. В следующем вашем проекте просто поменяйте DOCTYPE на один из этих:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Кстати, W3C однозначно рекомендует использовать Strict.

“This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.”

Чего вы лишаетесь, переходя на строгую схему валидации:

Список запрещеных элементов: applet, basefont, center, dir, font, iframe, isindex, menu, noframes, s, strike, u

Список запрещеных атрибутов:

• Атрибут alink запрещен для body
• Атрибут background запрещен для body
• Атрибут bgcolor запрещен для body, table, td, th, tr
• Атрибут border запрещен для img, object, но может быть использован в < em>table
• Атрибут clear запрещен для br
• Атрибут language запрещен для script
• Атрибут link запрещен для body
• Атрибут name запрещен для form, img, но может быть использован в a, button, input, map, meta, object, param, select, textarea
• Атрибут noshade запрещен для hr
• Атрибут nowrap запрещен для td, th
• Атрибут start запрещен для ol
• Атрибут target запрещен для a, area, base, form, link
• Атрибут text запрещен для body
• Атрибут type запрещен для li, ol, ul, но может быть использован в a, button, input, link, object, param, script, style
• Атрибут value запрещен для li, но может быть использован в button, input, option, param
• Атрибут vlink запрещен для body

Структурные изменения: элементы a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var и текст не могут быть дочерними для blockquote, body, form, noscript. Другими словами – элементы blockquote, body, form, noscript могут иметь только блочные элементы в дочерних элементах первого уровня.

Отказ от атрибута target=”_blank” для ссылок. Во-первых, указывать пользователю на то, как и где открывать ссылку — не красиво. Во-вторых, если необходимо, это можно сделать простым способом и продвинутым.

Что вы приобретаете?

• Хорошо структурированую разметку
• Четкое отделение содержимого от оформления
• Возможность более быстрой и легкой работы и поддержки кода
• Дисциплину в написании кода
• Респект и уважуху ;)

Когда стоит использвать Transitional? Тут есть два основных момента. Переходная схема хороша, когда вы работаете с большим количеством чужого кода, поменять который не представляется возможным. Хороший пример — большинство CMS. В большинстве случаев невозможно изменить их код, не залезая в ядро, что автоматически исключает возможность обновлений.

Второй момент — использование iframe. Если вы используете в своих проектах iframe, то он не оставляет вам выбора. Используте Transitional.

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

Собрался с духом и установил Internet Explorer 8 beta 2. Обновление прошло гладко, никаких запросов на проверку оригинальной версии Висты и тд.

После рестарта было немного непонятно куда тыкать, так как иконка и надпись к ней не изменились. Но все установилось, версия поменялась. Решился я на этот шаг из-за того, что с тех пор как я вынуждено перелез на Висту, я пользуюсь отличной программой под названием IE Tester, которая в разных табах рендерит веб-документы в той версии IE, в которой попросишь, начиная с IE5.5 и заканчивая IE8 beta1.

Впечатления от IE8 двоякие. Как собственно и от всех продуктов семейства Мелкомягких. Вроде бы все работает в Standards Compliance Mode, поддержка CSS 2.1, интересные утилитки, такие как Developer Tools, Accellerators, Web-Slices и тд, но сыро. Скоропалительных выводов делать не стоит, но создается ощущение что где-то тебя имеют.

А основывается оно вот начем. Во-первых, на части моих проектов, которые вылизаны и оттестированы везде где только можно, настойчиво выдается подозрительная ошибка “Permission denied” в первой строке и скрипты не отрабатывают. Лаконично, но малоинформативно. Во-вторых, CSS как-то подозрительно нестабилен. Где-то есть поддержка :first-letter, где-то нет. Тоже самое с :before и :after. Обычный div, с указаным min-width, не превышающим ширину экрана выдает горизонтальный скролл пока не укажешь ему max-width: 99.8%… Чудеса.

Все это конечно только поверхностное рассмотрение, да еще и beta-версии, которые по традиции в Microsoft называют вместо alpha. Есть и приятные моменты. Большинство ежедневных плясок с бубном можно будет забыть, более качественная поддержка стандартов налицо. Встроенные Developer Tools, с дебаггером, работой со стилями и тд — очень не плохо. CSS-хаки для предыдущих версий IE игнорируются, что есть гуд. На данный момент не обнаружены CSS-хаки для IE8, но Conditional Comments никто не отменял :)

С Conditonal Comments есть небольшая проблема — когда в IE8 включен Compatibility Mode (IE8 предлагает включить его при любой возможности, но вы можете включить его вручную), то веб-документы рендерятся как в IE7, но Conditional Comments в данной ситуации все равно остаются как для IE8. То есть, если файл стилей для IE7 у вас подключен через четкое указание версии, то IE8 его не увидит даже в Compatibility Mode.

Для тех из вас, кто уже хочет потрогать очередное детище Мелкомягких за вымя, я приготовил небольшую шпаргалку по Conditional Comments, которая поможет решить вышеописанную проблему и некоторые другие:

<!--[if IE 8]> Вызов файла стилей/код/стили < ![endif]--> - если Интернет Эксплорер 8
<!--[if !(IE 8)]> Вызов файла стилей/код/стили < ![endif]--> - если не Интернет Эксплорер 8
<!--[if lt IE 8]> Вызов файла стилей/код/стили < ![endif]--> - если меньше чем Интернет Эксплорер 8 (lt = lower than)
<!--[if gt IE 7]> Вызов файла стилей/код/стили < ![endif]--> - если больше чем Интернет Эксплорер 7 (gt = grater than)
<!--[if lte IE 7]> Вызов файла стилей/код/стили < ![endif]--> - если Интернет Эксплорер 7 и ниже (lte = lower than or equal)
<!--[if (IE 7)|(IE 8)]> Вызов файла стилей/код/стили < ![endif]--> - если Интернет Эксплорер 7 или 8
<!--[if (gte IE 6)&(lte IE 8)]> Вызов файла стилей/код/стили < ![endif]--> - если Интернет Эксплорер между 6 и 8 включительно
<!--[if !IE]> --> Вызов файла стилей/код/стили <!-- <![endif]--> - если любой браузер, исключая Интернет Эксплорер

Вот собственно и все что я успел заметить во время первого знакомства с IE8. Надеюсь что к релизу замеченные недочеты и ляпы будут исправлены и мы наконец-то получим браузер, способный брать качеством, а не количеством. Аминь.

Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием “Полосатые таблицы“

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

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

Существует простое, кроссбраузерное решение, основаное только на HTML/CSS. А именно colgroup. Решение это совсем не ново, но почему-то незаслужено забыто многими разработчиками. Перейдем прямиком к разметке:

<table>
		<caption>Столбцы / колонки:</caption>
		<colgroup>
			<col />
			<col class="alt" />
			<col />
			<col class="alt" />
			<col />
		</colgroup>
		<tr>
			<th>FF2/3</th>
			<th>IE6/7</th>
			<th>Opera</th>
			<th>Safari</th>
			<th>Other</th>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
	</table>

Чем этот код отличается от обычной разметки таблицы? Наличием тегов colgroup и col. Собственно colgroup является родительским контейнером для элементов col, которые и определяют нужные нам столбцы. Достаточно указать тому или иному столбцу класс и вуаля — у нас есть колонки, выделенные по вашему вкусу.

Вот так выглядит CSS:

table {
border: 1px solid #333;
border-collapse: collapse;
}
th, td {
padding: 2em;
text-align: center;
border-spacing: 1em;
}
th {
background: #ddd;
color: #fff;
}
/*Стиль для столбца*/
col.alt {
background: #ddf;
}

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

Проверено в FF2/3, IE6/7, Opera 9.5, Safari|(Win)

Список поддерживаемых стилевых правил. Спецификация.