Зеленый двор, покосившиеся скамейки, ключи в руке, дверь подъезда с проплешинами краски, тёмные перила неопределенного цвета, соседская копейка на газоне, заводские трубы на горизонте. Хочешь того или нет, а проведя все детство в городе металлургов, ты обращаешь внимание на мелкие, никому не заметные детали.

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

Не зря человек называл периоды своей истории именами металлов. Металл — враг, друг и помощник на протяжении последних нескольких веков — уже давно получил если не право иметь душу, то хотя бы право уставать: слишком много людей, назначений и форм. В отличие от человеческой, его усталость фатальна: рельсы заменят на новые, а грузовик останется гнить в кустах. Однако в этом медленном и тягучем старении есть какая-то красота и романтика: трещины складываются в причудливые узоры, ржавчина больше походит на мазки краской. Кажется, вещи оживают. Увы, этого так и никто и не заметит.

Послезавтра, 8 сентября состоится открытие моей первой (хочется верить, и не последней) персональной выставки. Она продлится с 8 по 22 сентября. Выставка входит в блок «Перспектива», который проводится при партнерстве Яркого Мира и Петербургских Фотомастерских. Ее (а также и другие выставки) можно найти на Стачек 5. Полный список выставок блока (поверьте, там будет на что посмотреть) можно на сайте Петербургских Фотомастерских.

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

С живыми людьми все иначе: высказался не подумав – лишился нескольких онлайн друзей. Вот и приходится быть политкорректным, молчать о том, что просто бросается в глаза. Например, про современный тренд – про уличных “фотографов”.

За последние полтора года я, кое-как занимаясь фотографией, накопил немало наблюдений о людях с камерами. Мысленно я поделил их на четыре группы: “туристы”, “аватарщики”, “пленочники” и “профи”.

“Туристов” в Петербурге немало. Носятся по городу с мыльницами наперевес и фотографируются на фоне всего, что им кажется красивым. А как иначе? Времени мало, а надо привезти на родину сотню-другую свежих фотографий. Ну и ничего, что горизонт не горизонтальный, вспышка “в лоб” и человек всегда строго по центру. Важна не фотография, а прецедент. “Вот я у Исакиевского, а вот на стрелке Васильевского” – будут рассказывать они охающей родне. Что, думаете, вы не такие? Посмотрю на вас, когда окажетесь проездом в каком-нибудь Париже или Барселоне. Фотографии будут не лучше :).

“Аватарщиков” легко узнать на улице по неестественным позам, скопированных из глянцевых журналов или новых клипов любимых поп-групп. Город они знают, а потому места выбирают потише да посимпатичнее. Девушки пытаются показать максимум своих прелестей, молодые люди демонстрируют свою мускулатуру или делают сурово-серьезные лица, если этой мускулатуры нет. Они делают все, чтобы удивить своих онлайн друзей новой аватаркой или фотографиями в альбоме “Я”, “Любимая я”, “Я и вы” или “Просто так )))))” (название альбома зависит от интеллекта и от самолюбия модели).

Уверен, если какой-нибудь Canon, Nikon или Sony начнут делать ультрадешевые камеры с возможностью тут же загружать фотографию в качестве аватара, они озолотятся. Стоить будет дешево, продаваться будет в больших количествах и не придется тратиться на хорошие комплектующие: в Контакте и Фейсбуке ширина аватары не больше 200 пикселей, подойдет и устаревшая матрица.

Если же фирмы-производители не последуют моему совету и будут продолжать выпускать любительские зеркалки, то вырастет “поголовье” других фотографов –  ”профи”. Выделить “профи” из толпы очень просто: Canon 450D под мышкой или на шее (я клевый, у меня зеркалка!), стандартный “китовый” объектив (смотрите, у меня вооот такой объектив!) и линза не прикрыта крышкой (меня видно издалека!). “Профи” не берегут свою технику и редко обрабатывают фотографии. То, что они фотографируют, никак не сгодится для фотовыставки, но вполне сойдет для наполнения очередного альбома в социальной сети.

Советские Зениты, которые долго пылились на антресолях, сейчас переживают второе рождение благодаря “пленочникам”. Сначала эти люди выстраиваются в очереди за пленкой, потом стоят в тех же очередях, чтобы сдать снимки в проявку и печать, и, несмотря на то, что что добрая половина их снимков оказывается испорчена, они все равно радуются полученным кадрам. Романтика? Пожалуй. Мода? Да, и она тоже.

Так, хорошо, а в какую категорию попали настоящие фотографы?

Правильно, ни в какую: они сами по себе. Настоящие фотографы сдувают пылинки со своих, пусть даже и очень дешевых, камер, проводят ночи за обработкой фотографий и экономят на еде, чтобы купить новый Карл Цейс. То ли из врожденной скрытности, то ли из скромности они редко показывают кому-то свои снимки. В отличие от всех остальных, для них важен не только результат, но и процесс, сколько бы времени он не занял. Таких фотографов всегда было меньшинство и, я надеюсь, так будет и дальше. В противном случае фотография окончательно перейдет из разряда искусства в разряд ширпотреба.

В течение последних нескольких месяцев мы занимались разработкой проекта EazyDays – удобной системы управления проектами, ориентированной на небольшие и средние организации. Свет в конце туннеля наконец-то забрезжил: мы разыскиваем компании, которые поучаствуют в бетатестировании нашего детища.

Что такое EazyDays?

EazyDays – система управления проектами. Мы перепробовали немало подобных сервисов и убедились в том, что сможем сделать лучше и удобнее.

Монструозная JIRA оказалась слишком сложной и запутанной,  Teamer – слишком простым и малофункциональным, а Мегаплан показался дороговат. Мы решили избавить свою систему от этих недостатков.

Что внутри?

Основная структурная единица EazyDays – проект. В проекте находятся задачи или заметки, которые могут быть организованы иерархически. Каждой задаче может быть присвоен приоритет (неважная, обычная, срочная), даты начала и окончания и набор файлов, относящийся к конкретной задаче.

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

К каждой задаче могут быть написаны свои комментарии с приклепленными файлами. Комментарии тоже могут быть древовидными.

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

А вот так, например, выглядит редактирование задачи:

Всех пользователей мы поделили на три группы: администраторы (могут делать все, в том числе добавлять новых пользователей), простые пользователи (участвуют в разных проектах и задачах, пишут комментарии и видят все проекты) и клиенты (видят только свои проекты и не могут попасть туда, где они не являются участниками).

EazyDays удовлетворит любого, даже самого требовательного пользователя. Для самых общительных мы добавили поля для указания ICQ, Jabber, Twitter-аккаунтов, телефона и почты, а для самых привередливых – разнообразные режимы сортировки задач.

Ну и поиск, конечно же, предусмотрели, куда без него?

Что еще не реализовано?

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

Окей, а как мне это попробовать?

Попробовать EazyDays просто: напишите письмо на eazydays@1adw.com или мне в твиттер. Если EazyDays вам понравится, мы сделаем вам отдельный поддомен для вашей компании. Например, vasya-pupkin.eazydays.ru.

А еще у вас будут бонусы как только будет готова полная версия :).

Сначала о том, что накипело: я нашел в себе силы, справился с ленью и переверстал-таки свой блог. Верстать под WordPress оказалось весьма сомнительным удовольствием. Ни тебе XSLT, ни вообще какого-то языка шаблонов: голый PHP с весьма странными функциями вроде the_tags() и the_content() (Капитан Очевидность легко подскажет их назначение). Стандартные темы, которые я взял для примера, оказались перегружены лишними кусками html-кода и их пришлось серьезно перерабатывать (проще говоря, делать с нуля). В общем, одни огорчения.

Я бы еще поворчал на тему верстки под WordPress, но в заголовке статьи нет про него ни слова :). Что ж…

Верстать под iPhone? Проще некуда

Все более-менее активные интернет-пользователи давно обзавелись или собираются купить в ближайшее время айфоны или Android-телефоны. Увы, обычные сайты совершенно не предназначены для мобильных устройств: и на экран они не умещаются, и кнопки слишком мелкие, и картинок для дорогого EDGE/3G многовато. Приходится делать более компактные и менее функциональные версии сайтов. Естественно, верстка под умные мобильники чуть-чуть отличается.

Есть два пути сделать айфон версию сайта (господа фанаты Android, я вас тоже имею в виду :) ):

1. написать все с нуля;
2. воспользоваться готовым фреймворком и сымитировать интерфейс нативного приложения.

Написать с нуля будет несложно. Вам понадобятся специальные мета теги (например, чтобы избавиться от дурацкого масштабирования) и капелька представлений об удобстве и юзабилити. Для погружения в верстку вполне сойдет вот эта презентация (осторожно, PDF!).

Дальше поможет только опыт (и, надеюсь, мои статьи о html-верстке). Спустя короткое время вы выясните, что onclick и onmouseover, onmousemove и onmouseout работают несколько не так, как вы ожидаете (по сути в айфоне нет клика, есть только наведение мышью). Eще через короткое время вы узнаете, что, чтобы сделать полноэкранный сайт, вам понадобится не только специальный метатег, но и AJAX (иначе новая страница будет открываться в браузере с элементами управления, а не на весь экран). Вас определенно порадуют фишки современного браузера и отсуствие Internet Explorer как такового :).

К фишкам современных браузеров, конечно, стоит отнести и HTML5 и CSS3 (правда, зачастую с префиксами -webkit ) и довольно быстрый JS. Стоит, правда, оговориться, что так было не всегда и первые версии прошивок для iPhone не имели многих возможностей, хотя… кого это сейчас волнует?

Однако иногда нужно сделать сайт, который будет в точности повторять нативное приложение (например, чтобы не писать приложение на Objective C для iTunes Store). Конечно, такое решение будет не совсем верным: правильно сымитировать интерфейс вам не удастся. Почему? Сейчас расскажу.

“Лучшие” фреймворки для верстки

О библиотеках для верстки под айфон не написал только ленивый. Говорят, основная цель этих фреймворков – минимизировать вашу возню с дизайном и созданием контролов и эффектов, похожих на настоящие “айфоновские”: они сами принесут с собой CSS и JavaScript, которые будут эмулировать поведение элементов интерфейса на веб-странице. Они также избавят вас от возни с AJAX и прочей вебдванольностью. Поиск в Google даст целую кучу фреймворков и каждый из них будет, по мнению разработчиков, самым удобным, самым быстрым и самым гибким.

Когда я начинал работать над  iPhone-версией нашего сериального стартапа, я прошелся по всему списку фреймворков и попробовал каждый из них. Ровно неделю я потратил на то, чтобы поковыряться в начинках этих фреймворков, отправить один багрепорт и сверстать таки сайт без их использования. О причинах такого странного решения чуть позже. Сейчас давайте поговорим о каждом в отдельности.

1. jQtouch

По первым двум буквам несложно догадаться, что он имеет какое-то отношение к jQuery. Так и есть. Это плагин для знаменитого jQuery. Как и почти все плагины для jQuery он удобен, красив и монструозен: его интерфейс заслуживает высших оценок, но… обманывать пользователя и вынуждать загрузить 60 килобайт ради пары чекбоксов, мне кажется, будет подло. Подождать 20-30 секунд тоже захочет не каждый.

Несмотря на всю красоту и кажущееся удобство, я отказался от него: нам не нужен был сайт, сжирающий весь трафик разом.

2. IUI

Это минималистичная библиотека, которая состоит из пары JS и CSS файлов и набора картинок. Она приносит с собой стандартные поля ввода, чекбоксы и кнопочки в стиле iPhone. Создатели не напирали на кроссбраузерную совместимость (напомню, в iPhone и в Android используется один и тот же Webkit) и поступили правильно: код достаточно хорош, компактен, им приятно пользоваться. На этой библиотеке я, наверное, и остановился, если бы не баги в работе с AJAX. Одну ошибку удалось-таки исправить (не отправлявшаяся форма), с остальными я мириться не смог и, плюнув на почти готовый сайт, взялся переделывать все с нуля.

3. UiUIKit

Справедливости ради, стоило начинать именно с этого фреймворка, однако именно этим фреймворком я и заканчивал свои “исследования”. Это набор CSS и HTML, который несет в себе вполне неплохие примеры пользовательского интерфейса в iPhone. Пожалуй, это все, что можно про него сказать: нет смысла использовать чужой CSS и HTML, добавлять ему типично айфоновское поведение и укрощать те баги, которые будут периодически лезть из всех щелей (верстка чужая, и баги будут точно).

Конечно же, были и другие фреймворки, эмулирующие поведение айфона. Увы, они все равно эмулировали его: подтормаживали, загружали непонятно что из интернета и не всегда были настолько smooth and sexy, насколько бывают iPhone-приложения.

Попробовав немало сайтов (в частности, айфон вариант Facebook), я окончательно убедился, что двигаюсь в неверном направлении и за вечер смастерил вполне неплохой сайт для iPhone, написав весь код с нуля.

И?

И я твердо уяснил для себя, что пока нет ни одного нормального CSS-фреймворка под iPhone, который сгодится для эмуляции интерфейса. Следовательно, не нужно подражать нативным приложениям. Надо всего лишь делать свои iPhone-сайты удобными и понятными.

Вот и появилась первая девелоперская версия Internet Explorer 9. Новинки вроде CSS3, HTML5, SVG  давайте оставим в стороне: мы и так все знаем, что это круто, а потому обсуждать не будем. Браузер явно быстрее, красивее, да и вообще лучше предыдущих версий и спорить на этот счет я не собираюсь. Скажу даже так: девятую версию IE (даже несмотря свою нелюбовь к “ослику”) я ждал давно. Ждал, правда, со страхом.

Думаю, любой человек, который имеет отношение к верстке меня поймет: выход нового IE не означает, что интернет станет лучше. Конечно же, это достижение, гигантский скачок вперед (выберите любую хвалебную фразу из статей об IE9 и вставьте сюда). Давайте однако прикинем как изменится рынок браузеров. Сейчас Internet Explorer по разным данным занимает 35-45% рынка (15-20% – IE8, 15-20% – IE7, 10% – IE6). Существует три версии одного и того же браузера!

Firefox, Opera, Chrome и Safari живут в разных версиях и, в отличие от Internet Explorer, количество старых версий пренебрежимо мало. Система обновления делает свое черное дело: рано или поздно вы согласитесь с предложенным обновлением и перейдете на более новую версию (или вообще не заметите, как это обновление произошло).

C Internet Explorer все сложнее: пользователи часто отключают обновления, пользуются пиратскими версиями ОС или сами по какой-то причине “сидят” на старых браузерах. Из-за этого свежие версии IE появляются не у всех (по этой причине их сейчас три). Конечно, было бы лучше обновлять IE с помощью встроенной в него (а не в ОС) системы обновления, однако что-то подсказывает, что этого не произойдет.

Что будет дальше? Мне кажется, что через год расклад не изменится. В лучшем случае будет три версии IE: 7, 8 и 9. В худшем – шестая не умрет и продолжит жить.

Чем же это грозит? Мы, господа разработчики, все равно не сможем игнорировать старые Internet Explorer-ы и будем вынуждены писать разный код для разных браузеров. Мы будем продолжать ругать IE и плеваться в сторону если не шестой, то седьмой версии…

Черт побери! IE9, я тебя боюсь!

UMI.CMS – возможно, меньшее из зол, с которым мне доводилось встречаться. Сомневаюсь, что стоит обсуждать ее достоинства и недостатки (о ее достоинствах немало написано на официальном сайте, а недостатки при желании можно найти самому). Стоит, правда, отметить сложность ее переноса и хранения: базу практически не перенести вручную, а копирование файлов или поштучный коммит (не будем же мы коммитить все!) вызывает у многих нервный тик. Если с базой дело обстоит сложнее, то правильный коммит и перенос сайта можно обеспечить. С помощью shell-скрипта, например.

Правильный shell-скрипт должен выполнять две вещи

• добавлять в svn ignore те файлы, которые относятся к системным и коммитить которые нет смысла (могут “затереться” при обновлении);
• выполнять svn add для тех файлов, которые будут полезны.

Пошевелив мозгами, я составил список ненужных файлов (системные файлы, неизменяемые шаблоны, некоторые конфигурационные файлы, скрипты, стили и картинки) и написал вот этот скрипт :

svn add -N ../web/
svn propset svn:ignore 'cache
dev
docs
dtd
errors
install
images_install
man
manifest
packages
pwindows
scriptaculous
smu
static
tinymce
updates
xmldb
xsl
autothumbs.php
cacheControl.php
captcha.php
clusterCacheSync.php
compile.php
config.php
cron.php
def_macroses.php
edit_old_addresses.php
errors.php
index.php
gw.php
index.php
install.php
instcli.php
instunpack.php
lib.php
mysql.php
releaseStreams.php
sbots.php
security.php
standalone.php
static_banner.php
streams.php
system.php
readme.txt
whatsnew.txt
*.ucp
*.log
debug' ../web/
svn add -N ../web/css/
svn propset svn:ignore 'cms' ../web/css/
svn add -N ../web/js/
svn propset svn:ignore 'client
cms
smc
script.js
multiupload.js
lLib.js
guest.js
eazy.php
cross-domain.php
cssread.php
cifi.js' ../web/js/
svn add -N ../web/images/
svn propset svn:ignore 'icons
cms' ../web/images/
svn add -N ../web/styles/
svn propset svn:ignore 'common' ../web/styles/
svn add -N ../web/styles/skins/
svn propset svn:ignore '_picasa' ../web/styles/skins/
svn add -N ../web/styles/skins/full/
svn propset svn:ignore 'js
css
common
calendar
images
main.xsl
empty.xsl
common.xsl' ../web/styles/skins/full/
svn add -N ../web/styles/skins/mac/
svn propset svn:ignore 'js
css
common
calendar
images
main.xsl
empty.xsl
common.xsl' ../web/styles/skins/mac/
svn add -N ../web/styles/skins/simple/
svn propset svn:ignore 'js
css
common
calendar
images
main.xsl
empty.xsl
common.xsl' ../web/styles/skins/simple/
svn add -N ../web/classes/
svn propset svn:ignore 'RSS
backupModel
baseXmlConfig
cacheEngines
cifi
componentInstaller
cron
csv
dataModel
drivers
eventsModel
exceptions
garbageCollector
hierarchyModel
languageMorph
logger
manifest
matches
moduleInstaller
patterns
permissionsModel
ranges
searchModel
streams
systemCore
translit
umiBasket
umiCaptcha
umiConversion
umiDate
umiDirectory
umiDistr
umiFile
umiFilter
umiImportRelations
umiMail
umiMessages
umiModuleDataExporter
umiModuleDataImporter
umiOpenSSL
umiPagenum
umiSubscriber
umiXmlExporter
umiXmlImporter
xmlTranslator
xslTemplater' ../web/classes/
svn add -N ../web/classes/modules/
svn propset svn:ignore 'autoupdate
backup
config
data
seo
stat
webo
system.php
iDef_module.php
iBaseModuleAdmin.php
forms.php
def_module.php
core.php
baseModuleAdmin.php' ../web/classes/modules/

Алгоритм работы с этим скриптом следующий:

1. Создать проект в SVN
2. Счекаутить пустой проект в папку
3. Положить скрипт в папку (пока не трогать, пригодится позже).
4. Создать папку web в корне проекта (это будет наш DOCUMENT_ROOT) и установить туда UMI.CMS.
5. Выполнить скрипт
6. Закоммитить проект

Для выполнения shell-скриптов под Windows сгодится стандартная поставка cygwin с пакетом svn правильной версии.

Так и не найдя золотую середину, я решил поступить проще: рассказать о паре-тройке интересных сайтов, пришедших на ум первыми, и предложить пользователям расширить мой список в комментариях. Интересные ссылки и пиар в разумных масштабах приветствуются.

Ах да! Вот и сам список:

1. http://pepelsbey.net/ – сайт Вадима Макеева, евангелиста компании Opera, очень активного твиттерянина да и вообще интересного человека. В твиттере и блоге он пишет, как правило, о верстке, новых стандартах, конференциях по веб-разработке. Не забывает он однако написать и про клубы, которые посещает с завидным постоянством.

2. http://kip.ru – сайт Петра Диденко, бывшего евангелиста компании Microsoft (ныне безработный, я не думаю, что надолго), не менее активного твиттерянина. Тематика широка: раньше – браузерные войны, теперь – IT в общем и крупные корпорации в частности. В общем, мастхэв, мастрид и мастфоллоу.

3. http://chikuyonok.ru/ . Верстаете и не знаете, кто такой Сергей Чикуенок? Не вините себя, просто бейте себя ржавыми цепями по лицу (с) Bender. Как показывает практика, все самые интересные методы в верстке придумывает почему-то именно этот человек. Прочитайте пару хотя бы пару сатей, например, вот это. А еще лучше – прочитайте всё разом.

4. http://html5doctor.com/ . Название говорит само за себя, поэтому обойдемся без помощи К. О. ;)

5. http://clubs.ya.ru/yacf/ . Клуб в Я.ру, в котором ведется активное обсуждение фреймворка от Яндекс.

На ум приходят еще как минимум полтора десятка разных ресурсов, однако я умолкаю: надо и читателям слово дать ;).

Вот короткий список, не заслуживающий даже того, чтобы убрать его под кат:

1. Исправлена явная ошибка в именах метатегов (раньше вместо name было написано http-equiv, которую я исправлял при деплойменте проектов)
2. Все 0px (под давлением хабраобщественности ;) ) заменены на обычный ноль.
3. Число значений в margin сокращено (10px 20px 10px 20px -> 10px 20px)
4. Исправлен недочет в margin у заголовков и hr (пиксели преобразованы в em)

Проект по прежнему находится вот тут: http://code.google.com/p/thick-as-brick/

Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.

Однако как быть с сайтом, для которого надо сверстать пару-тройку типичных страниц? Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов. Что делать?

Чтобы решить эту высосанную из пальца нетривиальную задачу я написал простейший шаблон для верстки, который сильно облегчил мне работу над проектами. Шаблон примитивен и прост (потому так и зовется), на звание фреймворка ни в коем случае не претендует (минус в карму тому, кто обзовет его фреймворком! ;) ). Он несет в себе заранее объявленные CSS-классы для работы с меню, списками, формами, ресеты основных тегов (вроде сброса отступов у форм и правильных отступов у <p>) и еще кое-какие полезные для меня вкусности.

Для самых нетерпеливых я дам ссылку на проект в Google Code, а самым любопытным, я расскажу, что Thick As Brick состоит из:

• html-файла index.htm
  Этот файл содержит в себе ссылки на стили и яваскрипты, пустые метатеги и проверку наличия/отстутствия яваскрипта (более подробно о последнем пункте можно почитать в блоге у Виталия Харисова);
• css-файла css/common.css
  Файл содержит минимальный набор ресетов (для body,  a img, form, p и заголовков) и базовый набор классов (.no-margin, .no-float, .pseudo-link, ul.news, ul.menu, ul.tiles, table.reset, ul.reset и т. д.). Предполагается, что верстальщик не будет менять этот файл, а будет редактировать css/custom.css, речь о котором пойдет ниже
• css-файла css/common-ie6.css
  Файл отвечает за совместимость самых общих классов с нашим любимым IE6
• css-файла css/custom.css
  Файл несет в себе те стили, что можно менять в процессе работы над конкретным проектом (исходный custom.css пуст и содержит только комментарии ;) ).
• css-файла css/custom-ie6.css
  Этот стилевой файл также обеспечивает совместимость css/custom.css с  IE6.
• js-файла js/script.js
  Пустой js-файл. Для дальнейшего “дописывания”
• однопиксельного gif-а images/common/x.gif
  Файл пригождается в особо редких случаях

Скачать шаблон можно отсюда в архиве или заэсвэнить свежую версию (архив и версия в SVN идентичны).

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

В 2005-м году Тим О’Рейли сформулировал понятие Веб 2.0. Простые пользователи понимают “вебдванольность” скорее как наличие AJAX и всплывающих окошек а-ля Fancybox или Thickbox (хотя это только малая часть большого понятия). Что ж, не будем их разочаровывать.

В этой статье речь пойдет о том, как правильно:
1. подменять адреса ссылок, чтобы одновременно работали и javascript-обработчики и ссылки открывались в новом окне;
2. как выполнять правильную подмену ссылок для Fancybox.
А еще мы посмотрим живой пример, который вполне успешно работает на нашем сайте с сериалами

Ссылки, onclick и href

Кажется, в статье о стандартах в верстке я уже рассказывал о том, как правильно должны открываться ссылки, однако я повторюсь. Предположим, что вы делаете полностью ajax-овый сайт, где фрагменты страниц подгружаются по клику на ссылку. На ссылку навешен обработчик onclick, который отвечает за ajax-овый обмен с сервером. Если у пользователя отключен JavaScript или он попытался открыть ссылку в новом окне, то откроется тот адрес, что находится в параметре href, если все работает корректно, выполнится onclick. Таким образом, чтобы обеспечить правильную работу ссылки надо указывать и href, и onclick.

Я не думаю, что эта техника заслуживает дальнейшего описания (его несложно найти в интернете), а потому предлагаю сразу же перейти к Fancybox.

Fancybox и вебдванольность

Fancybox — замечательное средство для просмотра изображений и документов в псевдоокнах на сайте. Fancybox представляет собой плагин для jQuery со своими стилями и изображениями (его CSS однако не выдерживает никакой критики ;) ). Fancybox берет на себя создание iframe для документов, AJAX-обработку для обмена с сервером и создает теги img в слое, отображающемся поверх всего контента. Аналогов Fancybox-у очень много (чего только стоят Thickbox, Lightbox, Darkbox и проч.), однако этот плагин мне нравится больше всего (а потому говорить мы будем только о нем ;) ).

Fancybox избавлен от багов в IE, работает стабильнее многих аналогов, хотя и несколько ограничен по своему функционалу. Достоинства перевесили недостатки и Fancybox стал нашим “корпоративным стандартом”. В недавнем проекте (myshows.ru) мы решили использовать именно его.

Итак, передо мной была поставлена цель — сделать так, чтобы ссылка открывалась как в Fancybox (подгружалась ajax-ом), так и в новом окне (правда, уже в другом дизайне). Проблема состояла в том, что Fancybox “умеет” открывать только те адреса, которые указаны в href ссылки и не может быть вызван в onclick для конкретного адреса. Таким образом, мы не можем обеспечить работу нескольких адресов

Здесь, конечно, стоит сделать паузу. В этой статье мы не собираемся “допилить” существующий jQuery-плагин, мы заставляем работать его правильно не меняя его исходный код

Решений проблемы я видел несколько:
1. Использовать onclick и href (недостаки этого метода описаны выше)
2. Заменить все href ссылок, которые есть на странице на ajax-овые адреса. В этом случае ссылка будет открываться в неправильном дизайне.
3. При событии onclick вызывать fancybox, а после вызова удалять его. Недостаток тут только один: fancybox не предусматривает вызов его не по событию.
4. Использовать события callbackOnStart и callbackOnClose, подменяя href ссылки только при открытии fancybox, а при закрытии возвращая его на место.

На последнем варианте я и остановился. Код, выполняющий подмену ссылок выглядит следующим образом:

function setFancyLinks (selector) {
	$(selector).each (function () {
		var _this = this;
		var oldUrl = this.href.toString();
		var newUrl = oldUrl;
		var width = null;
		var height = null;
		for (i=0; i< fancyLinks.length; i++) {
			if (oldUrl.indexOf(fancyLinks[i].oldLink)!=-1) {
				if ( fancyLinks[i].useAfter ) {
					newUrl = this.href.replace( fancyLinks[i].oldLink, fancyLinks[i].newLink )
				} else {
					newUrl = fancyLinks[i].newLink;
				}
 
				width = fancyLinks[i].width?fancyLinks[i].width:null;
				height = fancyLinks[i].height?fancyLinks[i].height:null;
				break;
			}
		}
	$(this).fancybox({showCloseButton: false
		, hideOnContentClick: false
		, frameWidth: width?width:420
		, frameHeight: height?height:300
		, overlayColor: '#000000'
		, showCloseButton: true
		, callbackOnStart: function () {
			_this.href = newUrl;
		}
		, callbackOnClose: function () {
			_this.href = oldUrl;
		}
		, callbackOnShow: function () {
			setFancyLinks('#fancy_div a.fancylink');
		}
		});
	});
}

Все подменяемые ссылки хранятся в массиве fancyLinks:

var fancyLinks = new Array (
{
	oldLink:   root + 'registration'
	, newLink:   root + 'int/controls/registration'
	, widht:  420
	, height:  300
});

Для большего удобства я добавил размеры в fancyLinks (разное количество контента => разные значения ширины и высоты).

Рабочий пример всего этого можно увидеть вот тут (вот так выглядит обычная страница регистрации, а вот так — фрагмент страницы, который отдается ajax-ом).

Зачем?

Зачем же написан этот большой пост? Ну, во-первых, для того, чтобы показать, насколько крут fancybox. Во-вторых, продемонстрировать наш замечательный сериальный сайт. И, наконец, в третьих, чтобы показать, как эту проблему можно решить: авось кто столкнется с такой штукой ;)