Парадоксы разметки
19 Май 2008И вроде пытаемся верстать семантически верно, и в голове почти сложилась чёткая картина того, как нужно размечать элементы — какие несут смысл, а о каких стоит забыть в силу их презентационной природы.
И тут приходят сомнения…
К примеру, нужно вам сверстать вводную часть книги, где речь идёт о принятых условных обозначениях:
В основном тексте книги для удобства будут встречаться следующие обозначения: особенно важные моменты мы будем обозначать полужирным выделением, цитаты будут обозначены курсивом, фрагменты кода моноширинным шрифтом, а текст из предыдущих изданий будет выводиться перечёркнутым.
Наша задача состоит в том, чтобы продемонстрировать на соответствующих словах примеры подобного выделения. Как же сходу разметит подобную информацию любитель правильной вёрстки? Примерно вот так:
В основном тексте книги для удобства будут встречаться следующиеобозначения: особенно важные моменты мы будем обозначать<strong>полужирным</strong> выделением, цитаты будут обозначены<cite>курсивом</cite>, фрагменты кода <code>моноширинным</code>шрифтом, а текст из предыдущих изданийбудет выводиться <del>перечёркнутым</del>.
А теперь давайте подумаем. Разметка документа при помощи семантических элементов предполагает выбор элемента в соответствии с его содержимым. И о чём же говорят нам эти слова: «полужирный, курсив, моноширинный, перечёркнутый»? Ну уж никак не о важности, цитировании, коде и версионности. Очевидно, что только о представлении, демонстрируя, как должны выглядеть соответствующие фрагменты текста. Давайте будем честны, текст стоит разметить вот так:
В основном тексте книги для удобства будут встречаться следующиеобозначения: особенно важные моменты мы будем обозначать<b>полужирным</b> выделением, цитаты будут обозначены<i>курсивом</i>, фрагменты кода <tt>моноширинным</tt>шрифтом, а текст из предыдущих изданийбудет выводиться <s>перечёркнутым</s>.
Только вот проблема — кое-какие из упомянутых элементов помечены как нежелательные. А ведь мы с вами только что создали семантически верный фрагмент документа. И что же делать? Честно говоря, не уверен. Знаю одно — сомневаться полезно, это пробуждает мысль от сна слепой уверенности.
А как думаете вы?
Высокотехнологично
7 Май 2008Не могу обойти вниманием уникальное для рунета явление — WebHiTech — первый технологический конкурс, ориентированный на веб-стандарты. Вы только вчитайтесь в это заявление:
Миссия конкурса WebHiTech — посильное содействие повышению культуры веб-разработки в Рунете посредством популяризации уважительного отношения веб-разработчиков к духу и букве актуальных рекомендаций Консорциума W3C.
Весьма серьёзные условия участия сайта в конкурсе, а также состав жюри дают мне уверенность в том, что эти заявления о миссии не останутся просто словами, и мы с вами, в кои-то веки, увидим по-настоящему интересный конкурс, а как результат — лучшие с технологической точки зрения сайты рунета среди победителей.
Срок приёма заявок на участие — с 3 апреля по 25 сентября 2008 года включительно. Времени более чем достаточно. Причём скажу вам, как инсайдер, что уровень заявок на данный момент таков, что у любого мало-мальски приличного сайта сейчас есть шансы если и не на победу, то как минимум на хорошее место в общем рейтинге конкурса.
Найсбокс
2 Май 2008Вспоминая про вечный конфликт дизайнера и верстальщика, нельзя не упомянуть такую интересную тему, как отрисовка элементов форм в стиле сайта или, говоря по-птичьи, кастомные контролы. Мне вообще придётся много говорить не по-человечьи, поскольку адекватных эквивалентов некоторым терминам в русском языке пока не существует.
И ладно бы, если дизайнеру понравилось поле поиска со скруглёнными краями из Mac OS X. Другое дело, когда он берётся за кнопку «Обзор», выпадающие списки или чекбоксы с радиобатонами — остаётся только молча сжать кулаки. И не потому, что это долго и сложно делать… Скорее потому, что тем самым дизайнер заставляет пользователя думать «боже, что это за хрень такая?» — он прячет то, к чему пользователь привык в своей системе или браузере. А это может привести к тому, что он, потратив время на попытку разобраться в интерфейсе, может плюнуть на все и уйти.
Но бывает, что очень надо. Поэтому предлагаю вам одно из решений проблемы с чекбоксами и радиобатонами, прототип которого я использовал в проекте «Магазин одной футболки» для Livejournal.
Найсбокс — для того, чтобы увидеть решение в действии, нажмите «Nice!».
Суть метода заключается в том, что мы, во-первых, оборачиваем наши контролы прямо в <label>:
<legend>Оркестра</legend><ul><li><label for="first-1"><input type="radio" name="first" id="first-1" />Представляет</label></li></ul>
Семантическая вёрстка. Часть вторая
24 Апрель 2008По материалам доклада «Семантическая вёрстка» на конференциях ClientSide 2007 и UA Web 2008.
Современный взгляд на организацию кода
Продолжение. Начало — «Семантическая вёрстка. Часть первая»
Второй уровень семантики: именование элементов
Для создания второго смыслового уровня документа у нас есть два способа именования элементов: id и class. Каждый имеет свои особенности, в силу которых формируются типичные ситуации применения каждого из них.
Имя элемента характеризует его функциональность или содержимое: упорядоченный список (первый уровень семантики) комментариев (второй уровень семантики).
<ol id="comments"><li>Первый</li><li>Второй</li></ol>
Согласно спецификации, id — это имя уникального элемента, в большей степени подходит для создания структурной разметки документа:
<body><div id="header"> … </div><div id="content"> … </div><div id="footer"> … </div></body>
CSS-фреймворки
23 Апрель 2008Вашему вниманию предлагается видеозапись доклада «CSS-фреймворки», прозвучавшего на конференции РИТ-2008. Обзорный доклад-размышление о практической пользе CSS-фреймворков.
Для лучшего понимания некоторых моментов, не попавших в кадр, доступна сама презентация: CSS-фреймворки (PDF, 237 КБ), а также версия видео для iPod/iPhone: CSS-фреймворки (H.264, 66 МБ)