Дорогие коллеги, спешу вас уведомить, что этот бложек закрывается, а я переезжаю в Tumblr: http://tachisis.tumblr.com/
Там будут куда более мелкоформатные заметочки, зато, наверное, чаще.
Спасибо за внимание.
-
-
Мой тимлид Стас Туговиков опубликовал вчера крайне полезную информацию о верстке html-писем из нашей внутренней вики. На Хабре и в ru_webdev в комментариях — еще некоторое количество хаков и уточнений.
-
Ну вот, спустя полгода после запуска у меня наконец дошли руки написать о Покупаторе.
Мы разрабатывали этот проект (не считая дизайна) практически полгода, с весны. К сожалению, как это часто бывает с большими и сложными проектами, многое придумывалось и переделывалось прямо на лету; макеты поступали на протяжении всего периода разработки; дизайн существовал в нескольких версиях.В проекте были сложные тяжелые интерфейсы и много javascript, а также была необходима полная графическая поддержка IE6 (ну я уже потом кое-где на это забивала, но все же). Поэтому многие инновационные вещи типа спрайтов в проекте используются не в полную силу; много экстра-разметки; кое-где используются таблицы.
По большому счету, я не очень довольна своей работой по этому проекту. Но что сделано, то сделано)
Ну а в общем и целом мы имели около 100 макетов, 350 кб CSS, дикие мегабайты графики и полгода разработки.
P.S. Особую признательность хочу выразить Мите Красовскому и Саше Зыкову — программистам, которые работали над Покупатором вместе со мной. Это самые замечательные программисты, с которыми мне когда-либо доводилось работать :)
- ~ Разработчик
- ~ Комментарии (5)
- ~
-
Сегодня я в очередной раз обновила портфолио; что же изменилось?
Во-первых, новое место работы: после Геталайма я два месяца работала в проекте «Покупатор» (о «Покупаторе» скоро будет большой отдельный пост), а затем тихо и мирно стала подрядчиком интернет-инкубатора InVenture.
Во-вторых, в рамках этого подряда мною и Денисом Егоровым был сделан полный рефакторинг вёрстки проекта http://smlxl.me/. SMLXL.me — это весьма неплохой поисковик по футболкам и другой одежде в магазинах Москвы. Проект активно разрабатывается, придумываются и внедряются новые фичи, расширяется база магазинов и товаров. В общем, хороший проект.
Что же касается самого рефакторинга, не могу сказать, что я довольна результатом на 100%. Мне трудно далась работа с другим верстальщиком, я немного отвыкла координировать и управлять; к тому же, наш уровень немного различался — Денис всё-таки больше программист, нежели html-кодер. Также повлияло на результат наличие уже готовых скриптов и других ресурсов, под которые нужно было подгонять код. Из-за этих факторов на выходе мы получили немного больше каши и мусора, чем хотелось бы. Но, как бы там ни было, стало лучше.
Из приятных впечатлений — с нами на проекте работает постоянный дизайнер, Сергей Сафонов, очень адекватный и весьма неплохо рисующий. Когда дизайнер «под боком», разработка становится сильно проще — все «смутные» места можно сразу же уточнить.
В портфолио этот проект представлен статикой, из которой я убрала весь код Дениса, чтобы не было путаницы (портфолио все-таки мое :) ).
В-третьих, проект Typochat, о котором я уже писала, так и не был нами закончен. Планировалось сделать отдельный интерфейс веб-приложения специально для iPhone, но работа прекратилась. В связи с этим я решила выложить вёрстку Typochat’а для iPhone, она довольно интересная: в ней использованы разные новаторские фичи (CSS3 и webkit-свойства) вроде multiple backgrounds, text-shadows, background scales и другие. Смотреть страницу имеет смысл только в Safari или на iPhone, в остальных браузерах «красиво» не будет. Зато можно обратить пристальное внимание на код!
В следующем выпуске: «Покупатор», как это было и как это есть.
- ~ Разработчик
- ~ 1 комментарий
- ~
-
Я тут подумала, что скучно просто писать «портфолио обновилось», так что я буду понемногу рассказывать вам о вёрстке новых проектов, а может, расскажу и о старых.
Проект 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 нет семантики кроме одного очень частного случая, и вообще экстра-разметка в семантику документа не входит. Что думаете вы?
В проекте использованы спрайты для иконок, уголков, бэкграундов и кнопок. Конечно, абсолютно все в один файл упихать не удается, но в целом техника работает хорошо.
- ~ Разработчик
- ~ Комментарии (12)
- ~