Мой тимлид Стас Туговиков опубликовал вчера крайне полезную информацию о верстке 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)
- ~
-
Если однажды дизайнер принесет вам на блюдечке невероятно красивый, сияющий, округлый web-application для IPhone, эта шпаргалка и google помогут вам не ударить в грязь лицом.Доки и готовые решения
- iphone-universal — Normalized CSS & HTML framework to develop iPhone webdev applications — на самом деле, это во-первых и в единственных — там есть абсолютно все. Можно как использовать библиотеку, так и просто посматривать туда. Но я все-таки перечислю ключевые моменты для удобства.
- Safari CSS Reference — все поддерживаемые webkit свойства (под каждым указано, какая версия движка поддерживает, в том числе, и движка айфона).
- CSS3.info — CSS3 в примерах. Thanks to David Storey.
- CSS3 на W3C — драфт спецификации css3, если уж совсем невмоготу.
Свойства и методы, на которые стоит обратить внимание
- <meta name=”viewport” content=”width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″/> — задает стандартную ширину экрана и запрещает увеличивать и растягивать сайт (для веб-приложений это обычно необходимо, в отличие от простых сайтов).
- размер шрифтов — в пикселах; и — ура! — мы можем использовать очень красивые шрифты типа Helvetica (посмотреть полный список поддерживаемых шрифтов).
- -webkit-box-shadow — создает тень у блока (полное описание свойств, о которых я буду говорить, есть в Safari CSS Reference; не вижу смысла устраивать здесь сеанс копипастинга).
- -webkit-border-radius — скругляет уголки блоку.
- -webkit-background-size — позволяет растягивать бэкграунд, например, качественно растягивает сложные градиенты.
- text-shadow — почему-то дизайнеры любят тексты с тенюшечками; порадуем их.
- background:url(/i/iphone/1.png) repeat-x, url(/i/iphone/1.png) 3px 0 no-repeat; — а это пример multiple background.
- помним про псевдоселекторы (псевдоклассы) :last-child, :hth-child(), :after и прочие — не плодим лишних сущностей в html.
- color:rgba(0,0,0,.80); — задание цвета с альфа-каналом для прозрачности. Работает по всех свойствах, где есть цвет — background, text-shadow и т.п.
- ну и суперхак — чтобы полностью спрятать поле ввода, традиционно надо убрать ему border и background, однако айфон все равно отрисовывает полю внутреннюю тень, даже при background:none. Лечится это следующим правилом: background:url(about:blank);
Как показала моя личная практика, этих свойств вполне достаточно, чтобы реализовать все то сияние, которое намечтал себе дизайнер. Кстати, я использовала в этой верстке reset.css, было и удобно, и обошлось без неожиданностей, так что можете использовать тоже.
С благодарностью Вадиму Макееву, который помогал разбираться в этом мне.
- ~ Разработчик
- ~ Комментарии (7)
- ~
