Двери Уют: обучить старого медведя новым фокусам

 UPD: Новый вариант сайта уже работает, старый стал достоянием забвения.


Делалось по заказу агентства Brand-PR.

Был (и есть) сайт.

Задача: не внедряясь в существующее, сделать его живее и френдли.

Поковырял в ухе, выслал следующее:

Вот примерно как может выглядеть главная страница.

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

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

Я на картинке нарисовал ТВ на стене, просто чтобы место занять. Но если у них есть какие-то видеоматериалы, этот ТВ может показывать реальное видео. Или эту фигу можно добавить позже.

Получил отмашку: делать.

Залез внутрь, нашёл там хакерскую адаптацию заброшенной немецкой CMS. Вполне ничего система для небольших и несложных сайтов. Меня она интересовала только в смысле: как внедрить туда свой код?

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

Примерный плагин нашёлся в папках плагинов. Неуклюжая и головоломная, но всё-таки система управления контентом также была осмыслена. Сделал пустой плагин, подключил его, стал думать.

Строка кнопок, как я её нарисовал, не ложилась в логику модуля: желательно было иметь весь довесок в едином div. Поэтому сделал её убираемой.

Выбор случайной двери из каталога был несложным, но пришлось добавить обработчик AJAX-вызовов, подключить туда свою библиотеку SQL (лениво и некогда изучать собственные функции CMS).

По той же причине (лень и некогда) не стал использовать CMS'ный Яваскрипт-фреймворк, а добавил до кучи jQuery, которую - вдоль и поперёк.

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

Потом пришла в голову мысль сделать обратный ход: поиск двери в каталоге (они ведь часто случайные!). Удалось.

Добавляя фишки, добавлял кнопки для них, пока не кончилось место. Пришлось использовать под кнопку даже картину на стене, благо это было в тему.

И сделать загрузку своих фото. И врисовку двери с это фото (двигать, масштабировать).

И запоминать всё-всё это в cookies, включая список из 30 последних дверей.

Так что вполне можно сделать, например, вот так:

или вот так, да включить телевизор:

Где-то тут надо было останавливаться, потому что ― «сбивайте меня палками, я сам не сяду!..», поэтому напоследок сделал ещё пару мелких фишек и отправил сдаваться.

Сдалось очень хорошо. В понедельник (27.06) запланировано к переезду на ПМЖ, а пока можно посмотреть на моём временном.

Мелочь, но весело было.

Осилил Яndex.Карты

Для небольшого, но симпатичного проекта потребовалось сделать отслеживание позиции контейнеров на карте нашей необъятной.

Слава богу, Google Maps были осилены уже больше года назад. API Яндекса мало чем отличается (более удобно, на мой взгляд; но Гугл тоже, кажется, ввёл новое API с тех пор). В общем, разобрался довольно быстро.



Это работающий прототип, ждёт одобрения и/или критики.

Explorer снова побеждён

(Update: сайт под переделкой по причине внезапного озарения, снизошедшего на хозяина). Спущен на воду небольшой персональный сайт местного находкинского гражданина, подавшегося не так давно в киви. Дизайн принадлежит гражданину, от меня требовалась только техническая реализация, оказавшаяся not-so-straightforward.

К рабочим моментам этого сайта относится предыдущий пост «Чья коробка толще» о попытке модифицировать ThickBox для показа произвольного содержимого. В посте я писал, что в итоге почти полностью отказался от использования кода ThickBox в проекте. Так оно и было... пока не обнаружилось, что от версии к версии Invalid Explorer отображает сайт в корне неправильно из-за своей мерзкой манеры игнорировать position:fixed (эти люди ещё говорят о соответствии своих продуктов каким-то там стандартам). Изучая вопрос, я убедился, как сложно и многогранно замазаны все майкрософтовские косяки в коде ThickBox: все решения бага позиционирования, встреченные мною в интернете (все!) были там использованы. Я попытался перенести их в казавшийся готовым сайт и, естественно, увяз. Все мои уловки совершенно не мешали Firefox и ни капли не помогали Invalid Explorer'у. В итоге я тупо выдрал из thikbox.js функцию создания окна просмотра, удалил из неё 3/4 кода (ненужного в этом случае) и прописал вместо этого подгрузку содержимого через AJAX. Удалил эту функцию из текста модифицированного мной thinkbox.js. ThinkBox подмены не заметил и стал обслуживать инородное окно просмотра как своё дитя. Уффф.

Кому интересны детали технической реализации, посмотрите исходник сделанного сайта. Модифицированная функция (на самом деле — две, для двух типов окон) включена в html. AJAX-запросы можно посмотреть монитором Firebug'a. В одном случае через AJAX идёт контент для окна, в другом — только размеры изображения для показа.

Ещё раз: уффф.

Эксплорер — бордель (ну, хорошо: о некоторых странностях кэширования запросов AJAX в IE)

Убил три часа на трудный глюк. AJAX-запрос, возвращающий одну-единственную цифирь, нормально работает в Огнелисе, а в Эксплорере возвращает ноль. Плюясь на отсутствие какой-нибудь вменяемой отладки под IE, по пять раз вычитал код (выловив несколько багов попутно :-)), покамлал так и сяк, в конце концов стал от безысходности имитировать в эксплорере этот запрос из адресной строки. Получил всё тот же чистый, красивый ноль на пустой странице. Чисто рефлекторно (эксплорер же — нельзя верить глазам своим) нажал F5... и увидел божественную семёрку. Млииииииин. Долбаный кэш. AJAX-запрос возвращает все необходимые заголовки, чтобы предотвратить кэширование, да. Но Эксплорер и не выполнял этот запрос! Так и показывал первоначальный ноль, игнорируя всё дальнейшее!

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

&seed=<? echo uniqid(); ?>

всё полечило. Если б не PHP, можно было б воспользоваться яваскриптовским Math.random() или какой-нибудь функцией даты. Просто уже входит в привычку как можно меньше полагаться на браузер, особенно глючный.

Virgo Group: сайт открыт уже совсем

Сайт рекламного агентства «Вирго груп» с этой недели уже совсем-совсем работает. Что-то ещё сменится по форме, где-то улучшится, но вообще — всё. Проект немаленький, рождался долго: только доработка-отладка на ПМЖ заняла, как положено, девять месяцев. Что в этой работе было примечательного, хм... Не уверен, но, по-моему, это был первый сторонний проект, где активно задействовался AJAX. Определённо, это был первый проект, завязанный на Google Maps (все щиты наружной рекламы проставлены на спутниковой карте Находки):



Причём изначально была сделана своя карта, аналогичная (в известной степени) по функционалу GM: там имелся работающий в браузере визуальный редактор расположения объектов, zoom, всё такое прочее. Переключение на GM произошло вынужденно после того, как в ходе работ обладатель авторских прав на карту этих прав лишился; соответственно, и я посоветовал агентству не связываться с жадной до чужих трудов Роскартографией, а воспользоваться готовым, удобным и гораздо более функциональным сервисом от Google, благо грабельки местных сутяжников туда дотянуться — коротковаты. Почему сразу не завязались на GM? Да потому что моя карта практически одинаково работала что через быстрое соединение, что через модем, чего о Гугле не скажешь.

Ну, ладно. Сделали — и сделали. Уф!

Сложные графики в PHP: JpGraph

Отдел маркетоложества несколько дней донимал меня добавлением графиков к неким финансовым данным. Решив наконец избавиться от них путём удовлетворения, я обнаружил, что Graph Drawing Class, уже не раз использованный тут и там, недостаточно хорош. Достаточно хорош оказался JpGraph. Чтобы понять разницу в весовых категориях, достаточно сказать, что первый идёт в одном-единственном файле класса, а второй — в дистрибутиве на 4,4М, и инструментов там — на все случаи жизни, ну разве что не лягушек резать.

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

Идёт с подробным мануалом, справочником API и набором примеров. Где-то с час ушло на разбор, и вот уже маркетоложец получил свой график мечты, именно такой, как надо, и даже немножко лучше:



Мощная штука, хотя для быстрых несложных графичков это, конечно, overkill. На такие случаи лучше старый добрый Graph Drawing Class.

Американка-чат Reloaded

Йессс!

Идея реанимировать «Американку» периодически озаряла умы моих приятелей... озаряла-озаряла, да и озарила наконец. Servac, экс-модератор старой «Американки», решил пожертвовать для этого дела хостинг и трафик (благо всё копеечное).

Я раскопал архивные скрипты и с уважением ощупал их, как старое, но грозное оружие.

Они хороши, но они страшно стары. Чат на фреймах, работающий через Refresh... брр... SMS-доступ был хорош для своего времени, но кому он нужен в эпоху смартфонов? И так далее почти по всем пунктам.

Походив с этими мыслями с неделю (а быстрее и кошки не родятся), я пришёл к выводу, что «Американку» надо переписать с использованием AJAX и DHTML посредством вездесущей баблиотеки Prototype. Потребляемый ею трафик сократится на порядок благодаря тому, что обновления будут передаваться штучно, как в IRC. Удобство возрастёт на столько же. Взять лучшее от IRC, веб-форумов и старой «Американки».

Осталось, как обычно, только сесть да сделать. Вот он, момент зачатия «Американки NG»:

ДДД: Рекламное агентство Virgo Group: сайт

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

Сайт будет с большим (возможно — огромным) количеством контента, при этом едва ли будет состоять более чем из двух-трёх страниц. Всё динамическое. База MySQL, система управления содержанием, обширнейшее задействование AJAX.

Популярная механика: AJAX не так ужасен, часть 2.

После лирической первой части всё-таки решил сформулировать несколько фактов, со знания которых лучше начинать работу с библиотекой Prototype.

1. Всё взаимодействие с сервером происходит всего лишь через две функции: Ajax.Request() и Ajax.Update(). Разница между ними в том, что первая отправляет запрос на сервер, а вторая — ещё и ожидает ответных данных и помещает эти данные как innerHTML в элемент страницы, идентификатор которого ей был передан. Таким образом, для динамического вывода данных в страницу нужно: а) создать элемент-контейнер (<div id="'updatable'"></div>); б) вызвать функцию Ajax.Update('updatable', .... ). Метод вызова (get/post), параметры — всё это и многое другое можно передать в аргументах функции, всё это подробно описано в документации.

2. На любой поименованный элемент страницы всегда можно сослаться через функцию-доллар как $('id'). Никакого шаманства с поиском объекта в зависимости от типа браузера.

3. Содержимое элемента всегда можно адресовать функцией доллар-эф: $F('id'). Так, если есть поле формы с идентификатором 'afield', то текст в этом поле можно получить, вызвав $F('afield'); и установить так же.

4. Этого уже достаточно для работы. Но ещё полезно знать, что функция-доллар позволяет легко устанавливать любой атрибут объекта: $('id').display='visible'; более того, установка самых популярных атрибутов для удобства реализована специальными функциями. Так, для переключения видимости объекта не нужно выяснять, видим ли он в данный момент — просто вызовите $('id').toggle;. Полный список этих дополнительный функций — в документации.

5. Ожидайте подводных камней с кодировками. У меня на тестовом сервере получение данных в фоне проходило нормально, а на production сервере они стали приходить в UTF-8. Проблема решилась отправкой заголовка перед началом вывода данных из скрипта:

header('Content-Type: text/html; charset=windows-1251');

А ещё лучше сразу делать весь проект в UTF-8, потому что оправка заголовка решает только половину проблемы (передачу данных в браузер), а есть и вторая половина — передача на сервер методом post, и здесь так просто не отделаешься.

Пока всё, но этот список я ещё буду пополнять.

Популярная механика: AJAX не так ужасен

Последний год меня преследовало гадкое ощущение, что я свалился с паровоза по имени Веб и бегу следом по насыпи, безнадёжно отставая. Началось всё с Google Mail, потом Google Maps, дальше пошло-поехало, и когда уже Blogger перешёл на фокусы Web 2.0, я сказал: хватит. Хватит ковылять. Или я догоню паровоз, или буду торговать пирожками на глухом полустанке.

Я слышал, что Web 2.0 — это AJAX. Обладание этой главной тайной дало сил двигаться дальше.

AJAX — это в первую очередь Javascript. Я посмотрел скрипты, которыми Google Mail творит свою престидижитацию, и понял, что этого я не осилю никогда. Ну не вышло у меня с Javascript брака по расчёту. Я его не люблю, и это взаимно.

Мне нужно было, чтобы я писал на PHP, а получил AJAX. Я нашёл какие-то полуразработанные библиотеки и понял, что они: а) уж очень полуразработаны; б) в итоге генерируют всё тот же Javascript. И ещё понял, что когда-то уже это проходил. А именно, когда мне предстояло переписать большой сайт с ASP (освоенный благодаря детскому греху по имени VisualBasic) на неведомый мне PHP. В тот раз я пытался найти инструменты, которые это бы сделали за меня. Тогда поиски убедили меня в необходимости изучить-таки PHP, и это оказалось благом. Опыт подсказывал, что не нужно залипушных библиотек, нужно запастись кофе и цитрамоном и понять-таки этот чёртов AJAX.

Google сразу посоветовал обратить внимание на Prototype. Я обратил. Потом обратил ещё раз. Я обращал примерно по часу в день, и заметил, что с утра всё кажется очень просто, а вот под вечер — совершенно безнадёжно. Поэтому на утро 26 котября я запланировал историческое событие — Первое Употребление AJAX.

Сейчас начало двенадцатого. Первое употребление потребовало часа. Только что я нажал в Firefox на ссылку на своей пробной странице и получил несколько строк, означавшие успех: щелчок мышки запустил механизм Ajax.Updater, который на заднем плане обратился к скрипту на PHP, получил данные и вывел их в нужное место. Всего делов-то.

Технически всё действительно просто, но испытал огромные сложности с головой. Ужасно трудно сломать в голове стену в полтора кирпича, по одну сторону которой — неподвижная веб-страница в браузере, по другую — абсолютно подвижный скрипт, порождающий эту страницу на сервере. Всё стало текучим: страница конструирует саму себя, сама обращается к серверу, а скрипт (нет, не так: Скрипт!) разжалован в мальчики на побегушках: поднёс данные, положил, и пшёл вон.

Я мог бы скопировать пример и увидеть его в работе за полминуты. Но нужно было осознать. Разобрать стену.

Теперь скучным языком. Под Web 2.0 главным образом понимается стиль построения документов, когда полностью задействуются возможности Document Object Model. Это значит, что любой элемент в документе может принимать события и создавать их, изменяя себя или другие элементы. Самое смешное, что в этом — ни капли нового. Web 2.0 — это Web 1.0, возможности которого наконец стали использовать.

Это всё равно что проездить на машине год, ни разу не переключившись на третью передачу. Переключись — и машина покажется другой.

Я написал много лирики и мало практических советов. Советов и так в избытке. Присматривающимся к технологии AJAX посоветую начать с библиотеки Prototype, делающей вещи по-настоящему простыми. Там разбираются примеры и даются ссылки на другие примеры. Дерзайте. Возможно, на разбор вашей личной стены вам потребуется не три дня :-)