Я тут подумала, что скучно просто писать «портфолио обновилось», так что я буду понемногу рассказывать вам о вёрстке новых проектов, а может, расскажу и о старых.

TypochatПроект 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) на “Новое в портфолио: Typochat”

  • Комментарий от Сергей, Апрель 17th, 2009 в 3:51 пп

    Добрый день!
    Согласен c тем, что экстра-разметка и так не несет смысловой нагрузки и может быть представлена элементом I.
    А что Вы думаете по поводу того, как борется с однопиксельным скачком Сергей Чикуенок? (Я бы дал ссылку, но спам-фильтр на меня ругнулся) Мне кажется это более элегантно, чем экспрешн.

  • Комментарий от Engel, Апрель 17th, 2009 в 4:19 пп

    Сергей, я чего-то не могу найти, что вы имеете в виду. Неужели спам-фильтр даже текстом не позволяет ссылки ставить? Странно, у меня столько спамеров так делает :)

  • Комментарий от Сергей, Апрель 17th, 2009 в 4:26 пп

    Вот, Ольга, ссылка на скринкаст http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/

    Вам, наверное, интересней будут примеры http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/rounded-example.zip

  • Комментарий от Сергей, Апрель 17th, 2009 в 4:28 пп

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

  • Комментарий от Engel, Апрель 17th, 2009 в 4:30 пп

    Чего-то я не поняла, как он там борется со скачком. В фиксах ие вижу только png-фикс.

  • Комментарий от Сергей, Апрель 17th, 2009 в 4:35 пп

    Дело не в фиксах, а в том каким образом задается положение уголков. Откройте пример в IE6

  • Комментарий от Engel, Апрель 17th, 2009 в 4:37 пп

    Да, я уже вспомнила :) Техника-взрыв, честно говоря, мне так и не удалось заставить ее нормально работать в боевых условиях, когда блоки флотятся и много влияний.

  • Комментарий от Вадим Макишвили, Апрель 21st, 2009 в 12:52 пп

    Оля, в качестве совета друга. Благодаря этой строке в твоем сервисе могут быть проблемы медленной реакции ИЕ6 на действия пользователя. Тут бы добавить проверку на изменение переменной, а не брать все время родителя и его высоту.
    expression(parentNode.offsetHeight%2?-1:0)

  • Комментарий от Engel, Апрель 21st, 2009 в 1:01 пп

    Спасибо, Вадим, сделаем, мне уже и Виталя мозг промыл :)

  • Комментарий от jay, Август 23rd, 2009 в 1:39 пп

    pidip.com этот правда почти без дизайна, но зато легкий
    вот тут реально минимализм в прямом смысле слова

  • Комментарий от Алексей Копылов, Октябрь 7th, 2009 в 7:19 пп

    Классный чат, мне понравился. Но есть такой вопрос – можете ли вы сделать версию, где не все пользователи имеют права писать в чат? То есть тех, что я приглашаю, те могут писать, а все остальные могут только наблюдать. Вот описание моей задачи, которая появилась при подготовке к Юзабилити-марафону: http://copylove.livejournal.com/59039.html

  • Комментарий от Engel, Октябрь 7th, 2009 в 7:29 пп

    К сожалению, мы не занимаемся дальнейшей разработкой этого проекта.

Оставить комментарий