< The Webmakers Lounge />

#wishing { you: happy-holidays!important; }

Не так давно, мой товарищ Ярослав Бирзул открыл очень интересный, и я бы даже сказал, где-то уникальный сервис. А именно — рецензирование сайтов/макетов в аспектах юзабилити и дизайна на профессиональной основе. Причем, что характерно, абсолютно безвозмездно. Единственное что от вас требуется — правильно заполнить форму заявки.

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

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

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

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

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

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

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

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

Прочитать остальную часть записи »

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

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

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

Прочитать остальную часть записи »

Давно мы о таблицах не говорили. Да и что о них говорить? Их оформлять надо. Табличное представление информации является одним из важных инструментов донесения данных до пользователя и несомненно должно быть удобным и легким для восприятия.

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

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

Сейчас это конечно уже в прошлом, существуют решения с использованием 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)

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