26.04.2008

Вращение автомобиля на сайте ZAZ Sens

Не вдаваясь в подробности реализации, хочу поделиться парой идей, лежащих в основе вращения автомобиля на сайте ZAZ Sens.

1. Для каждого цвета все восемь ракурсов автомобиля собраны в одном файле JPG. Вот, например, файл для цвета «Зеленый мох»:

Почему я решил объединить все ракурсы в один общий файл? Во-первых, размер общего файла получается меньше. Во-вторых, меньше обращений на сервер. И, наконец, JavaScript-код для прелоада и управления одним файлом проще, чем для прелоада и управления восемью.

Эта картинка стоит бэкграундом у дивчика размером с один ракурс автомобиля. При вращении меняется background-position у дивчика и показывается соответствующий ракурс:

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

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

var oImage = document.createElement('img');
oImage.onload = function(){ /* включаем зеленый цвет */ });
oImage.src = '/f/1/car-sea-green.jpg';

Таким образом цвета включаются по мере загрузки цветовых файлов.

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

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

25.04.2008

Три составляюшие веба

В порядке важности:

  1. Доступность (accessibility)
  2. Удобство (usability)
  3. Дизайн (design and aesthetics)

Именно в таком порядке. Каждая последующая составляющая основывается на предыдущей.

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

Также бессмысленно рисовать красивые иконки и кнопки, делать закругления и прочие модные дизайнерские штуки, если сайт недоступный и/или неудобный. Алан Купер в своей книге The Inmates Are Running the Asylum очень метко назвал это painting the corpse.

22.04.2008

Government web standards

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

Амазон каюк

Американский Амазон отменил дешевые доставки (Standard Shipping и Expedited Shipping) для России. В списке европейских стран напротив России появилась надпись Priority Only. Даже в Албанию отправляют обычной почтой, а в Россию теперь только самой дорогой курьерской доставкой.

Если раньше за доставку трех книг суммарной стоимостью 60 $ нужно было заплатить примерно 20 $ (Expedited Shipping), то теперь извольте отвалить все 50 $.

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

Решил попробовать британский Амазон. Они пока еще доставляют обычной почтой (Air Mail), но сами книги стоят дороже. Те самые три книги стоят 40 £ + доставка 14 £ = 54 £ = 107 $. Те же яйца.

13.04.2008

Скоро рассвет, выхода нет

Зашел я как-то в Одноклассники, поотвечал на сообщения, собрался выйти и привычным жестом потянулся в правую верхнюю часть окна чтобы нажать на ссылку «Выход». У меня уже отложилось где-то в голове, что для того, чтобы выйти, нужно нажать на последнюю ссылку на оранжевой плашке вверху.

Нажимаю и попадаю в раздел «Помощь». Что за черт? Какая еще помощь? Вчитываюсь в названия ссылок.

Хм, последняя ссылка в меню — «Помощь», а «Выхода» вообще нет. Туда, сюда — нет выхода. Что за ерунда?

Через какое-то время до меня доходит, что виной всему увеличенный размер шрифта в моем Фаерфоксе. Это меню сверстано таким «удивительным» образом, что при увеличении размера шрифта невлезающие пункты меню (им сказано float: left;) переносятся на вторую строчку и сливаются с фоном (ссылкам задан белый цвет).

При выделении ссылка проявляется.

При дальнейшем увеличении размера шрифта пропадают и остальные ссылки — «Помощь» и так далее.

В IE размер шрифта, конечно, зафиксировали.

Позор джунглей.

03.04.2008

Виза ВТБ24



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

Я много раз заказывал на Амазоне и все мои карточки работали безотказно. Однако, недавно Амазон отказался проглотить платеж по карте Виза банка ВТБ24. Пробую второй раз, третий — хуй вам.

Стал гуглить на тему возможных проблем. Выснилось, что с недавнего времени ВТБ24 стал требовать передачу CVC (CVV) кода. Позвонил в ВТБ24, спросил, дескать, что за нахрен. Мне ответили, что запрос CVV кода увеличивает секьюрность карты, и что об этом было уведомление на сайте банка. Видимо сотрудники ВТБ24 считают, что все владельцы карт прямо каждое утро начинают с чтения новостей ВТБ24, настолько они важные и интересные.

Написал в Амазон. Ответили:

I’m sorry, but our ordering system is not set up to accept the CVV2 security code associated with credit cards. I hope this will not prevent you from receiving your order. Some issuing banks do have stricter requirements for internet purchases. If your bank requires that the CVV2 code be submitted, unfortunately we can’t accommodate that request and you will need to use a different credit card or payment method.

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

02.04.2008

PSD2HTML

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

Вот, например, PSD2HTML. Особенно у них порадовала форма заказа с кучей опций.

И что поразительно: делают быстро и за какие-то копейки. PSD2HTML обещает порезать макет в течении 1 рабочего дня примерно за 150 долл. Поискал в блогах и на форумах — кто пользовался их услугами пишут, что на выходе качественный xhtml/css-код. Блять, уволить надо половину наших кодеров и пользовать PSD2HTML :-)

Вообще интересно было бы скормить в такую контору макет от нашего студийного дизайнера и посмотреть не подавятся ли :-)

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