С Наступающим! 27/12/2008 | Curly Brace
#wishing { you: happy-holidays!important; }
We are responsible for the View Source
#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)
Список поддерживаемых стилевых правил. Спецификация.