Мы разрабатывали этот проект (не считая дизайна) практически полгода, с весны. К сожалению, как это часто бывает с большими и сложными проектами, многое придумывалось и переделывалось прямо на лету; макеты поступали на протяжении всего периода разработки; дизайн существовал в нескольких версиях.

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

По большому счету, я не очень довольна своей работой по этому проекту. Но что сделано, то сделано)

Ну а в общем и целом мы имели около 100 макетов, 350 кб CSS, дикие мегабайты графики и полгода разработки.

P.S. Особую признательность хочу выразить Мите Красовскому и Саше Зыкову — программистам, которые работали над Покупатором вместе со мной. Это самые замечательные программисты, с которыми мне когда-либо доводилось работать :)

Во-первых, новое место работы: после Геталайма я два месяца работала в проекте «Покупатор» (о «Покупаторе» скоро будет большой отдельный пост), а затем тихо и мирно стала подрядчиком интернет-инкубатора InVenture.

Во-вторых, в рамках этого подряда мною и Денисом Егоровым был сделан полный рефакторинг вёрстки проекта http://smlxl.me/. SMLXL.me — это весьма неплохой поисковик по футболкам и другой одежде в магазинах Москвы. Проект активно разрабатывается, придумываются и внедряются новые фичи, расширяется база магазинов и товаров. В общем, хороший проект.

Что же касается самого рефакторинга, не могу сказать, что я довольна результатом на 100%. Мне трудно далась работа с другим верстальщиком, я немного отвыкла координировать и управлять; к тому же, наш уровень немного различался — Денис всё-таки больше программист, нежели html-кодер. Также повлияло на результат наличие уже готовых скриптов и других ресурсов, под которые нужно было подгонять код. Из-за этих факторов на выходе мы получили немного больше каши и мусора, чем хотелось бы. Но, как бы там ни было, стало лучше.

Из приятных впечатлений — с нами на проекте работает постоянный дизайнер, Сергей Сафонов, очень адекватный и весьма неплохо рисующий. Когда дизайнер «под боком», разработка становится сильно проще — все «смутные» места можно сразу же уточнить.

В портфолио этот проект представлен статикой, из которой я убрала весь код Дениса, чтобы не было путаницы (портфолио все-таки мое :) ).

В-третьих, проект Typochat, о котором я уже писала, так и не был нами закончен. Планировалось сделать отдельный интерфейс веб-приложения специально для iPhone, но работа прекратилась. В связи с этим я решила выложить вёрстку Typochat’а для iPhone, она довольно интересная: в ней использованы разные новаторские фичи (CSS3 и webkit-свойства) вроде multiple backgrounds, text-shadows, background scales и другие. Смотреть страницу имеет смысл только в Safari или на iPhone, в остальных браузерах «красиво» не будет. Зато можно обратить пристальное внимание на код!

В следующем выпуске: «Покупатор», как это было и как это есть.

Проект Typochat — это чат, который ориентирован на этакие одноразовые деловые конференции. Вы создаёте «комнату» и приглашаете туда своих коллег на поговорить. Сейчас проект в стадии альфа-тестирования. В планах запуск версии под iPhone, и вот там-то вёрстка самая интересная, но об этом я поговорю на РИТ-2009.

Верстка же самого чата интересна тем, что макет полностью резиновый во все стороны. Тянется шапка, тянется окно чата в ширину и в высоту — и при этом поле отправки сообщения и сайдбар остаются на месте. Такой лэйаут делается при помощи абсолютного позиционирования и полного растягивания блока заданием ему одновременно и right, и left, и top, и bottom. К сожалению, IE наш родной не понимает такого финта, у него может быть только два значения позиционирования. Поэтому для него приходится высчитывать высоту резиновых блоков js-ом. То же касается и минимальных и максимальных ширин. (За помощь в создании лэйаута спасибо Вадиму Макееву).

Как вы можете заметить, страница всегда занимает высоту окна браузера, и не имеет прокрутки. Ну, думаю, всем известно, что это делается при помощи height:100%; overflow:hidden; на HTML и BODY. Сайдбар в данном случае статичен, и некрасиво обрезается, если его высота больше высоты страницы. Чтобы этого не было, js-ом высчитывается, влезают ли все блоки, и если не влезают, нижний блок скрывается целиком.

В этом проекте довольно много блоков со скругленными углами, причем радиус скругления — 1px. Для таких блоков я уже довольно давно использую технику «абсолютных уголков». Создаются элементы для уголков, им задается либо фоновое изображение, либо цвет бэкграунда; родительскому элементу задается position:relative;, уголки абсолютно позиционируются и закрывают блок в нужных местах. У этого метода есть один недостаток: если блок имеет нечетную ширину или высоту, IE неправильно обрабатывает позиционирование, располагая уголок выше или левее, чем нужно. Проблема решается экспрешеном для IE: bottom:expression(parentNode.offsetHeight%2?-1:0); В этом проекте я использовала для уголков элементы I, как наиболее короткие и незначимые (уголков в чате очень много, они в каждой строке), чем вызвала скандал между мной и Вадимом Макеевым, который утверждает, что использование элемента I страшно противоречит семантике документа. Я же все-таки упираю на то, что у элемента I нет семантики кроме одного очень частного случая, и вообще экстра-разметка в семантику документа не входит. Что думаете вы?

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

Доки и готовые решения

1. iphone-universal — Normalized CSS & HTML framework to develop iPhone webdev applications — на самом деле, это во-первых и в единственных — там есть абсолютно все. Можно как использовать библиотеку, так и просто посматривать туда. Но я все-таки перечислю ключевые моменты для удобства.
2. Safari CSS Reference — все поддерживаемые webkit свойства (под каждым указано, какая версия движка поддерживает, в том числе, и движка айфона).
3. CSS3.info — CSS3 в примерах. Thanks to David Storey.
4. CSS3 на W3C — драфт спецификации css3, если уж совсем невмоготу.

Свойства и методы, на которые стоит обратить внимание

1. <meta name=”viewport” content=”width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″/> — задает стандартную ширину экрана и запрещает увеличивать и растягивать сайт (для веб-приложений это обычно необходимо, в отличие от простых сайтов).
2. размер шрифтов — в пикселах; и — ура! — мы можем использовать очень красивые шрифты типа Helvetica (посмотреть полный список поддерживаемых шрифтов).
3. -webkit-box-shadow — создает тень у блока (полное описание свойств, о которых я буду говорить, есть в Safari CSS Reference; не вижу смысла устраивать здесь сеанс копипастинга).
4. -webkit-border-radius — скругляет уголки блоку.
5. -webkit-background-size — позволяет растягивать бэкграунд, например, качественно растягивает сложные градиенты.
6. text-shadow — почему-то дизайнеры любят тексты с тенюшечками; порадуем их.
7. background:url(/i/iphone/1.png) repeat-x, url(/i/iphone/1.png) 3px 0 no-repeat; — а это пример multiple background.
8. помним про псевдоселекторы (псевдоклассы) :last-child, :hth-child(), :after и прочие — не плодим лишних сущностей в html.
9. color:rgba(0,0,0,.80); — задание цвета с альфа-каналом для прозрачности. Работает по всех свойствах, где есть цвет — background, text-shadow и т.п.
10. ну и суперхак — чтобы полностью спрятать поле ввода, традиционно надо убрать ему border и background, однако айфон все равно отрисовывает полю внутреннюю тень, даже при background:none. Лечится это следующим правилом: background:url(about:blank);

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

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

Ну, обнаружила и забыла. А сегодня опять наткнулась на этот идиотский баг и решила все-таки описать находку. Находка печальна — ведь теперь либо придётся обходиться без флотов внутри нумерованного списка, либо клиарить точкой для нормальных браузеров и использовать zoom:1 для IE6.

Upd. Михаил Баранов сообщает нам, что это касается в принципе любого свойства, включающего hasLayout. Можно было догадаться. Что такое hasLayout.

Upd. 2 Panya сообщает нам решение проблемы: display:list-item для LI, и vertical-align:top; им же, чтобы буллит выравнивался по верху. Благодарим!

Вот дайджесты и блоги разработчиков, которые есть у меня в фидах:

• Clagnut
• Molly Holzschlag
• Microformatique
• QuirksBlog
• 456 Berea Street
• Andy Budd
• Eric Meyer
• A List Apart
• Digital Web
• HTML Editor Reviews
• Snook
• Ed Eliot
• DOMScripting
• All in the HEAD
• How To Create
• Microformats
• CSS3 Info
• Vitamin
• Smashing Magazine

Может быть, у вас тоже что-нибудь есть? Кидайте в комменты.

За этот список выражаю благодарность Вадиму pepelsbey Макееву, в незапамятные времена поделившемуся со мной своим opml-листом :)

Итак:

1. Если вы работаете не в Яндексе, не в Гугле, и вообще не в любом подобного размаха проекте, забейте на IE < 6, Opera < 8, Safari < 3, Firefox < 2. Исключив поддержку данных браузеров, вы упростите свою работу и сократите её время. Тем самым вы будете успевать больше, а код ваш будет лучше. Короче, вашему работодателю понравится. И, да — старые браузеры должны умереть.
2. Если дизайнер что-то не доделал или не предусмотрел в макете, а вы не чувствуете себя с Фотошопом на ты, не стесняйтесь послать дизайнеру макет на переделку/доделку, и самого дизайнера послать не стесняйтесь тоже, если он вдруг заартачится. Лучше потратьте время на улучшение верстки, чем на попытку кособоко нарисовать недостающую кнопочку, которую заказчик, скорее всего, все равно завернёт.
3. Если вы евангелист семантической верстки или собираетесь им стать, подумайте хорошенько и выведите логичную концепцию, почему именно вы применяете данную доктрину, и в каких случаях вы готовы от неё отступаться. Четко аргументируйте свою точку зрения. Если у вас нет аргументов, и вы не готовы со спокойной душой отступать от своей идеи, вы фанатик, и в Яндекс вас не возьмут. Зато, возможно, возьмут в W3C.
4. Учитесь всегда, учитесь везде. Пробуйте все новое в отрасли, читайте блоги по веб-разработке, дискутируйте, спрашивайте, убеждайте. Истина рождается в споре. Взаимодействуйте с сообществом, это поможет вам не отстать от жизни.
5. Храните все сделанные вами проекты в статическом варианте. Периодически просматривайте свои работы, думайте, что можно было бы сделать лучше, где можно было бы применить новые технологии, ищите ошибки. Если в какой-то момент вы понимаете, что в последних 10 проектах вам нечего улучшить, вы либо Виталий Харисов, либо остали от отрасли. Не дайте себе деградировать!

Возможно, мои советы покажутся вам фашисткими, но что же делать, да, я фашист.

Роли исполняли:

1. Никита Селицкий
2. Александр Исаков
3. Юрий Дроздов
4. Юрий Артюх
5. Вадим Макеев
6. Владимир Агафонкин
7. Денис
8. Максим Покровский
9. Павел Корнилов
10. Виталий Харисов
11. Марат Таналин
12. Волотко Дмитрий
13. webmolot
14. Александр Макаров
15. alexilin.ru
16. Волотко Дмитрий
17. Павел Ловцевич
18. Павел Коноплицкий
19. Владимир
20. Влад Мержевич
21. Игорь Морозов

Что касается третьей встречи русского крыла Web Standards Group, она превзошла все наши ожидания. Пришло около 70 человек из собиравшихся 120 — огромная явка, мы считаем. На встрече прошли четыре доклада от наших бессменных хедлайнеров Вадима Макеева и Алексея Рыбакова, а также доклад гуру javascript’а Андрея Сумина и рассказ Алексея Николаенкова и его коллеги о Kandy — среде разработки для вебтехнологов. Снимал всё это дело веб-разработчик и гениальный фотограф Вадим Пацев. Причём, благодаря Павлу Ловцевичу и ещё одному молодому человеку, имя которого мне, к сожалению, неизвестно, съёмка была не только фото, но и видео! Как всегда, итогом встречи стала вербовка новых людей в нашу тихую песочницу, ну и, как мне кажется, нам удалось заинтересовать людей веб-стандартами и деятельностью нашей группы в частности. За официальной частью последовали две афтепати для наиболее выносливых. Наши афтепати — это вообще что-то с чем-то. Я считаю, стоит вступать в нашу группу уже хотя бы затем, чтобы посмотреть, как отжигают напару Марат Мамяшев и Алексей Рыбаков. Лично я была в полном восторге.

В общем, встречи WSG Russia ещё обязательно будут, скорее всего, в начале 2008 года в Москве пройдёт следующее собрание. А что касается конференций, то План Бунина на 2008 год действительно велик. Присоединятесь к оффлайновому сообществу веб-разработчиков! Это полезно и весело ;)

Ну и пара фотографий с мероприятий, пока вы совсем не забыли, как я выгляжу:

Это на конфе, фото Серёжи Мезенцева.

А это на встрече WSG. Фото by basic, а лицо у меня такое, потому что накануне мы с Анди изрядно приняли в «Заводных яйцах».

В общем, будьте с нами, будьте как мы, будьте лучше нас! :)

1. «Языки HTML и CSS — официальный учебный курс» Молли Хольцшлаг
2. «Пуленепробиваемый Web-дизайн» Дэн Седерхольм
3. «Мастерская CSS. Профессиональное применение Web-стандартов» Энди Бадд, Камерон Молл, Саймон Коллизон
4. «CSS-каскадные таблицы стилей. Подробное руководство» Эрик А. Мейер (это, по сути, расшифровка спецификации, и поэтому самая сложная книга, но если её осилить, можно стать мега-монстром).

Ну и к вопросу о становлении мега-монстром: учебники — это, конечно, хорошо и полезно. Но ничто так не учит, как собственный опыт. Поэтому смело могу посоветовать: верстайте больше, не бойтесь сложных макетов, экспериментируйте. Только опыт делает из специалиста профессионала ;)

P.S. Вот, кстати, ещё хороший список мест, где начинающий верстальщик может получить информацию. Но на мой взгляд, часть книг, которые там даны, заметно устарела.