Заказчик прислал 14-мегабайтный PSD-файл, содержащий макет всего одной вебстраницы. Открыв его, обнаружил изрядный бардак в структуре: куча из скрытых слоёв, групп, поименованных абы как, каких-то продублированных несколько раз одинаковых слоёв и т.п. С грехом пополам разобрался, что к чему, сверстал. А потом выяснилось, что кое-что было забыто (я просто не смог увидеть это «кое-что»).

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

UPD: Хабралюди, не превращайте, пожалуйста, комментарии в арену для священных войн.

Есть у меня любимый сайт, «Digital-web.com», который хорош ещё и тем, что на его страницах рекламируются интересные мне сетевые «конторы». Среди них есть и объект моего сегодняшнего пристального внимания — «PSD2HTML.com». Фирма занимается тем, что воплощает в XHTML+CSS-коде присланные клиентом макеты. 8 рабочих часов на вёрстку макета, как заявлено.

Мне понравилась раскладка стоимости за вёрстку одного макета. Не могу не рассказать об этом (не сочтите за рекламу).

А мы тут плюшками балуемся. «Хабр», раздел «Работа» (главная, резюме, подраздел). XHTML+CSS. Пробуем, переделываем, снова пробуем. Эдакая разминка для мозга, знаете ли.

Заново написан весь код, внешний вид сохранён по мере возможности. Обкатываем повторяющиеся элементы, встречающиеся так же и в других страницах «Хабра» (например, блочок с кармометром, листалка).

Шрифты масштабируемы теперь и в IE тоже, код довольно легковесен, люб валидатору, ну и всё в таком духе.

Продолжаем заниматься любимым делом Карлсона.

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

CSS рулят, друзья мои.

Для горячих голов: сразу остыньте. Я за стандарты и верстаю валидно. Но я за стандарты совсем не по той же причине, что и вы. Не нравится — проходите мимо, дальше не читайте. Адекватным людям:

Все согласны, что седьмая версия Internet Explorer во многом продвинулась вперед по сравнению с шестой версией браузера, выпущенной пять лет назад. Появилась поддержка RSS, табы, поисковое окошко, изменился интерфейс в стиле новой операционной системы Windows Vista. Однако, веб-разработчиков волнует другое: как обстоят дела с поддержкой веб-стандартов в новом браузере? Об этом недавно рассказывал Крис Вилсон (Chris Wilson), руководитель группы разработки браузера IE. Его слова комментируют независимые эксперты.

Похоже, что у создателей поисковой машины Yahoo сейчас трудное время — различать участки с контентом от навигационных зон на веб-страницах становится всё сложнее. Однако, различение может быть полезным в улучшении качества ранжирования, а также отображении в поисковых результатах более релевантных участков. Yahoo ввела специальный CSS-класс под названием robots-nocontent. Его можно использовать в таких элементах, как <div> или <p>, для извещения поисковому роботу Yahoo, что эта часть страницы не имеет отношения к основному контенту. В соответствующем разделе своего справочника, Yahoo советует использовать этот синтаксис в заголовках, в подвалах, навигационных секциях сайта…

Я, конечно, понимаю заинтересованность команды Yahoo во введении подобного элемента — это действительно может улучшить выдачу результатов. Но мне кажется, что большинство веб-мастеров проигнорируют это нововведение, как раньше произошло с гугловским параметром nofollow. Да и наверняка будут веб-мастера, которые проигнорируют новинку из-за боязни снижения позиции своего сайта в выдаче результатов.

18 мая в конференц-зале «Экстрополис» пройдёт семинар под названием «Семантическая вёрстка», который продолжит серию обучающих семинаров под эгидой прошедшей в апреле конференции РИТ-2007. Проведут семинар докладчики секции «Клиентское программирование»:

• Вадим Макеев (ваш покорный слуга, он же pepelsbey, автор блога http://pepelsbey.net, автор доклада «CSS-менеджмент» на РИТ-2007, участник WSG-Russia)
• Алексей Рыбаков (он же flack, автор блога http://flack.ru, автор нашумевшего доклада «Тестирование верстки» на РИТ-2007, участник WSG-Russia)

Пришло время и я открою главную тайну:

Нет ничего страшного если ваш сайт невалиден из-за 2-3х аттрибутов которые придумали вы сами.

Попробуйте придумать вескую причину почему это утверждение в корне неправильно прежде чем

1. Удвоение полей у плавающих (float) блоках в IE 5-6

Проблема: мы очень часто используем поля (margin) и не реже их применяем к блокам со свойством float, ожидая нужный результат, можно сильно удивиться, когда IE вдруг сдвинет наш блок на большее расстояние, чем предполагалось. Конкретно: ошибка левого поля (margin-left) – при свойстве float c параметром left, ошибка правого поля (margin-right) – при свойстве float c параметром right.

#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
}

Ожидаемый результат (корректный):


Какой же результат мы видим в IE (некорректный):

Сразу отмечаю, что статья из разряда «для самых маленьких». Просто пощу ее, вдруг пригодится кому-нибудь.

Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикруть к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот здесь вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.

Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.

Некоторые партнёры программы Google Adsense начали получать приглашения поучаствовать в бета-тестировании нового сервиса — программы Adsense for mobile. В приглашениях сообщается, что компания Google уже «успешно закончила внутренне тестирование системы» и сейчас готова предложить её публике.

Данная программа предназначена для размещения контекстной текстовой рекламы на мобильных версиях веб-сайтов. Принципиальной особенностью мобильной рекламы, как несложно догадаться, станет масштабное применение модели оплаты за каждый звонок. Собственно, здесь ссылки могут иметь вид “Call: Phone Number”, что вполне логично. Вместо перехода на сайт рекламодателя предлагается сразу ему позвонить. Максимальное количество рекламных модулей на странице — одно.

Алексей Бешенов на своем сайте выложил переводы стандартов W3C и DCMI:

• Ответы на часто задаваемые вопросы по XHTML и HTML.
• Связывание таблиц стилей с документами XML. Версия 1.0.
• Часто задаваемые вопросы по языку математической разметки (MathML).
• Руководство по созданию доступного веб-контента. Версия 1.0. Приёмы CSS.
• Набор элементов метаданных Dublin Core, версия 1.1. Справочное описание.
.

haque.nfshost.com/blog

(поддерживается только firefox 1.5+)

Практически все делается на клиенте — на сервере только серверная логика. Какое-либо генерирование xhtml на сервере отсутствует.

Клиентский софт представляет из себя единственную xhtml-страницу, генерирует она сама себя с помощью xslt. На сервере — dsl для серверной логики (интерпретатор написан на хаскеле), называется haque.

Поддерживаются пользователи, администрирование, модерирование комментариев, markdown.

Строк кода: xhtml — 262, скрипт на самописном dsl (haque) — 76.

Основной вопрос — имеется ли в таком бреде смысл?

XOWML, — новый язык разметки, разработанный в студии Onlyweb. Читается, — хоумл.

Язык имеет единственное предназначение, — дать XHTML верстальщику возможность быстро и эффективно писать валидный XHTML код. Т.е. работает это так: пишешь код в XOWML, нажимаешь сохранить, автоматически появляется .html файл, его можно просматривать в браузере.

Вот первые примеры XOWML:

.BriefDescription{{
.Image{%img src="images/elephant.jpg" width="240" height="181"{}}
.Description{
.Date{10 августа}
%p{В этой плашке пишем краткую аннотацию, о статье.
Это позволит поситителям сайта понимать о чём идёт речь.}
%p{Надо сразу определится и размерами фотографии.
Необходимо жёстко зафиксировать ширину (я предлогаю использовать ту что сейчас)
а высота фото может меняться без ущерба для внешнего вида страницы.
А без фото на внутренних будет плохо — изначально дизайн соориентирован
на получ. инф. и быстрый прогруз.}
%a href="#"{читать полностью...}
}
.Clear{}
}}

Преобразуется в XHTML код:

<div class="BriefDescription"><div class="BriefDescriptionInside0">
<div class="Image"><img src="images/elephant.jpg" width="240" height="181" /></div>
<div class="Description">
<div class="Date">10 августа</div>
<p>В этой плашке пишем краткую аннотацию, о статье.
Это позволит поситителям сайта понимать о чём идёт речь.</p>
<p>Надо сразу определится и размерами фотографии.
Необходимо жёстко зафиксировать ширину (я предлогаю использовать ту что сейчас)
а высота фото может меняться без ущерба для внешнего вида страницы.
А без фото на внутренних будет плохо —
изначально дизайн соориентирован на получ. инф. и быстрый прогруз.</p>
<a href="#">читать полностью...</a>
</div><!-- .Description -->
<div class="Clear"></div>
</div></div>

Немного мысленно порассуждал о расположении различных блоков страницы (меню, контент, строка поиска, пр.)…

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

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

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

Когда верстаешь (X)HTML, порой не знаешь или забываешь о многих фичах, которые стоит использовать. Перечислю те, о которых вечно забываю сам, а зря :)

Хотелось бы опубликовать в веб-разработке, да кармы не хватило, опубликую пока здесь.
По мотивам недавнего обзора HTML5 захотелось рассмотреть основные причины, по которым использование XHTML можно считать нецелесообразным. Указанные причины были собраны из различных источников и добавлены на основании собственного опыта.

Итак, основные причины, почему не стоит использовать XHTML:

1. С точки зрения SEO — в обычном HTML приходится приходится писать меньше кода, а, значит, HTML более оптимизирован под поисковики, нежели XHTML;