Не могу обойти вниманием уникальное для рунета явление — WebHiTech — первый технологический конкурс, ориентированный на веб-стандарты. Вы только вчитайтесь в это заявление:

Миссия конкурса WebHiTech — посильное содействие повышению культуры веб-разработки в Рунете посредством популяризации уважительного отношения веб-разработчиков к духу и букве актуальных рекомендаций Консорциума W3C.

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

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

Комментарии: 6

Найсбокс

2 мая 2008

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

И ладно бы, если дизайнеру понравилось поле поиска со скруглёнными краями из Mac OS X. Другое дело, когда он берётся за кнопку «Обзор», выпадающие списки или чекбоксы с радиобатонами — остаётся только молча сжать кулаки. И не потому, что это долго и сложно делать… Скорее потому, что тем самым дизайнер заставляет пользователя думать «боже, что это за хрень такая?» — он прячет то, к чему пользователь привык в своей системе или браузере. А это может привести к тому, что он, потратив время на попытку разобраться в интерфейсе, может плюнуть на все и уйти.

Но бывает, что очень надо. Поэтому предлагаю вам одно из решений проблемы с чекбоксами и радиобатонами, прототип которого я использовал в проекте «Магазин одной футболки» для Livejournal.

Найсбокс — для того, чтобы увидеть решение в действии, нажмите «Nice!».

Суть метода заключается в том, что мы, во-первых, оборачиваем наши контролы прямо в <label>:

  1. <legend>Оркестра</legend>
  2. <ul>
  3. <li>
  4. <label for="first-1">
  5. <input type="radio" name="first" id="first-1" />
  6. Представляет
  7. </label>
  8. </li>
  9. </ul>

Читать дальше…

Комментарии: 10

По материалам доклада «Семантическая вёрстка» на конференциях ClientSide 2007 и UA Web 2008.

Современный взгляд на организацию кода

Продолжение. Начало — «Семантическая вёрстка. Часть первая»

Второй уровень семантики: именование элементов

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

Имя элемента характеризует его функциональность или содержимое: упорядоченный список (первый уровень семантики) комментариев (второй уровень семантики).

  1. <ol id="comments">
  2. <li>Первый</li>
  3. <li>Второй</li>
  4. </ol>

Согласно спецификации, id — это имя уникального элемента, в большей степени подходит для создания структурной разметки документа:

  1. <body>
  2. <div id="header"> … </div>
  3. <div id="content"> … </div>
  4. <div id="footer"> … </div>
  5. </body>

Читать дальше…

Комментарии: 19

CSS-фреймворки

23 апреля 2008

Вашему вниманию предлагается видеозапись доклада «CSS-фреймворки», прозвучавшего на конференции РИТ-2008. Обзорный доклад-размышление о практической пользе CSS-фреймворков.

Для лучшего понимания некоторых моментов, не попавших в кадр, доступна сама презентация: CSS-фреймворки (PDF, 237 КБ), а также версия видео для iPod/iPhone: CSS-фреймворки (H.264, 66 МБ)

Комментарии: 25

По материалам доклада «Семантическая вёрстка» на конференциях ClientSide 2007 и UA Web 2008.

Современный взгляд на организацию кода

Начало. Продолжение — «Семантическая вёрстка. Часть вторая».

Прежде всего, давайте договоримся: семантическая вёрстка — это не гербалайф. Она не поможет вам в одночасье научиться верстать в восемь раз быстрее, IE6 вдруг не перестанет бажить, да и волосы не станут гладкими и шелковистыми, скорее наоборот. Более того, использование данного подхода потребует от вас бóльших умственных усилий. Как на освоение методики, так и в работе с ней.

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

Семантика?

Семантика (фр. sémantique от греч. σημαντικός — обозначающий)

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

Читать дальше…

Комментарии: 34