Наша кошка сначала боялась пылесоса,
а потом ничего… втянулась.
Анекдот из «Любимых»

Я никогда даже предположить не могла, что увлекусь версткой сайтов.
Зимой 2011 года я была поглощена мыслями о риэлтерском бизнесе и маркетинговой стратегией продвижения прибалтийской недвижимости на московский и петербургский рынки. Как в одиночку проникнуть в эту сферу со своим практически никому не известным и дорогим товаром, я не знала. Пройдя массу тренингов по эффективным продажам, я прекрасно понимала, что работа предстоит колоссальная. Нескольких объявлений на риэлтерских площадках будет явно недостаточно. И максимум, чего я добьюсь, будут бесконечные разговоры с людьми, которым кажется, что они всерьез интересуются зарубежной недвижимостью. А я вежлива, буду до последнего надеяться, что человек собирает информацию о предмете с серьезными намерениями, и не оборву разговор на одиннадцатой минуте.
Чтобы избежать бесполезной траты времени и сразу отсеять тех «псевдопокупателей», которым нужно просто поболтать, я решила написать несколько статей. И мысль о собственном сайте логично вытекла из пустой кофейной чашки, которой я подбадривала себя в процессе творческой деятельности.
О сайтах я не знала ничего.
Нет, я не дура, и никакой «женской» боязни техники у меня нет. Просто… до сей поры я обходилась текстовыми редакторами и почтовыми программами. Этого было достаточно, чтобы жить, не чувствуя никаких ограничений. Но статьи надо было где-то публиковать, чтобы прицепить к объявлению о продаже квартиры в Риге ссылку на информационный источник.

Прослышав, что мне нужен свой сайт, мой друг Вова решил познакомить меня со своим другом, который как раз и специализировался в данной сфере деятельности. Но идти к мастеру с пустыми руками не хотелось, ибо сама я терпеть не могу клиентов в стиле «сделайте мне то, не знаю что, только чтобы было красиво и недорого». Ничтоже сумняшеся, я набрала в Яндексе «как сделать сайт» и несколько часов просматривала выпавшие по запросу страницы. Выбрав какую-то торговую площадку, по-моему tiu.ru, я зарегистрировалась там, кое-как оформила страницу с магазином и вывесила свои статьи.
Придя к Мите, так звали того самого друга, который по замыслу Вовы должен был мне помочь с сайтом, я показала свою работу и, разумеется, выслушала длинный список критических замечаний. Под конец его тирады мне стало обидно до слез, потому что я полночи перед встречей не спала, а меняла фоны, шапки и подбирала фотографии получше.
- Знаешь, ты так меня разделал, будто я – дипломированный специалист. А я только вчера вечером набрала первый в жизни запрос «как сделать сайт», - выговорила я, с трудом сдерживая желание вцепиться Мите в морду.
- Если ты сделала это за одну ночь на коленке, то ты просто гениальна! Это я тебе как профессионал говорю,– нимало не смутившись, ответил Митя.
Зря он это сказал.
Сейчас я не могу вспомнить точно в какой именно момент мне пришла в голову идея делать сайт самой, потому что с Митей мы обсуждали вопрос, чего я хочу от сайта как заказчик. Он предполагал, что я изучу то, что есть в бескрайних просторах интернета, и принесу ему какие-то наработки из того, что мне понравилось и что хотелось бы иметь у себя. Но ответить на законный вопрос «чего вы хотите от своего ресурса» я тоже не могла. Чтобы сформулировать точку зрения по заданной теме, надо хоть понимать, чего вообще можно хотеть. В разговоре Митя обмолвился, что 90% сайтов, существующих в сети – полное дерьмо, и я попросила его показать мне те, который он считает достойными внимания. Несколько часов подряд мы ходили от кухни, где пили кофе и курили, до комнаты, где стоял компьютер, и вот где-то на этом маршруте, я вдруг стиснула зубы, заиграла желваками и сказала, что хочу все делать сама.
И вы меня стреляйте, я не знаю, по каким каналам эта мысль поднялась у меня из глубины души. Вслух я выдала идею, что мне надо знать, как редактировать статьи и менять фотографии, чтобы не звонить по каждому чиху разработчику, но это было лишь частью правды, лишь верхушкой айсберга. Да, да, того самого айсберга, разбившего борт корабля «Титаник».

Вернувшись домой, я ходила по квартире из угла в угол, как зверь по клетке, пытаясь успокоиться. Пару ночей проведя перед компьютером, я поняла только то, что для сайта нужен движок, фотошоп и локальный сервер. Понятия «домен», «провайдер», «хостинг» - так и остались для меня филькиной грамотой. Отчаявшись продвинуться дальше, я настучала Мите в скайп вопрос: «С чего нужно начать?» Он ответил, что с регистрации уникального доменного имени. И чтобы я думать забыла про ресурсы типа narod.ru или то же tiu.ru, ибо, цитирую дословно: «Доменное имя второго или даже третьего порядка – это несерьезно». Минут двадцать покурив в потолок, я придумала доменное имя и выкупила его в ту же ночь, потому что Митя сказал, что с этим тянуть не стоит. Звонкие имена быстро занимают другие пользователи.
Через несколько дней я задала ему вопрос о следующем шаге. И получила весьма исчерпывающий ответ:
- Без фотошопа не обойтись, так что придется изучать. Бери сразу последнюю версию и только на английском. Работать с русифицированными программами – дурной тон. А для верстки лучше всего подходит редактор dreamweawer. Только на нем ты сможешь сделать все так, как захочешь. Ни один готовый шаблон для сайта ты под себя полностью не подгонишь.
Слово «фотошоп» показалось мне более знакомым, чем все остальное, поэтому я начала с него. Нашла в интернете какие-то уроки и принялась практиковаться. «Кисти», «маски», «слои», «паттерны», «градиенты» - я плавала во всем этом, как… двоечница у доски. Но возможности цифровой графики очаровали до звона в ушах. Поняв, что фотошоп неисчерпаем, я решила остановиться, потому что уже все, что я пыталась копировать из предложенных в интернете уроках, явно превосходило надобность для сайта. Как тыкать пипеткой в картинку, чтобы получить код цвета, я поняла. Как накладывать обрезки рисунков друг на друга, чтобы получались коллажи, тоже.

Самоучитель по dreamweawer оказался логичнее и стройнее, чем уроки фотошопа. И едва поняв разницу между «дивом» и «тэгом», я бросила выполнять задания из учебника и принялась верстать пробные html-страницы уже по своему вкусу. Это – первый вариант главной страницы сайта latzeme.su.

site1 1

Мне хотелось, чтобы при наведении мышки салфетки съезжали и открывали ссылки на другие страницы. Я вообще была полна тогда идей, почерпнутых в основном из компьютерных квестов. То мне хотелось, чтобы с верхнего края шапки свисал какой-нибудь комнатный цветок, у которого тихонько шевелятся листья. То мне хотелось, чтобы по подвалу периодически пробегала маленькая мышка. Но анимация оказалась на тот момент неподъемной задачей. Упершись рогом, я сделала один анимированный баннер, где подпрыгивал синий шарик на белом фоне, и поняла, что до цветков и мышек еще слишком далеко. Но свой первый коллаж я так и оставила шапкой сайта.

site1 2

Окно с подоконником, вид из окна, цветок, коробочка и кот собраны из разных рисунков. И, пожалуй, это до сих пор моя самая сложная работа в фотошопе, не считая зеленого яблока. Но с яблоком все просто – была пошаговая инструкция, которую я просто терпеливо выполнила, а с подоконником я возилась самостоятельно. Вырезать нужные части рисунка не так сложно, как кажется. Труднее подогнать оттенки цветов, чтобы весь коллаж был в одной гамме, но и это возможно. А вот свет и тень пришлось рисовать вручную.

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

site2 1

site2 2

site2 3

В учебниках я вычитала, что сначала дизайн сайта делается в фотошопе. Кстати, до сих пор не могу понять, зачем? Жутко неудобно на практике. То, что в фотошопе ложится красиво, для реального сайта надо обрезать или растягивать. В момент сотворения этого варианта главной страницы и обложек разделов я заболела гобеленами. Мне страшно хотелось сделать нечто похожее на комнату в ретро-стиле. И еще я открыла для себя рамки, которые наловчилась клепать в бесконечном количестве вариантов. Весь latzeme.su до сих пор в рамках по любому поводу.

Стыдно ли мне смотреть сегодня на эти эскизы? Нет. Как не стыдно рассматривать свои школьные и студенческие фотографии. Может быть, кто-то и рождается опытным дизайнером, я не знаю. Лично я росла и взрослела, проходя этапы рамок, сердечек, цветочков и шоколадок. Мне нужны были страницы для публикации своих статей, и на большее я не замахивалась. Впрочем, в сеть вышел третий вариант. Тот, который существует и по сей день. Да, скорее всего, я его буду, как говорят специалисты: «натягивать на движок», и что-то в дизайне придется изменить, поэтому пока он такой, как есть, я его фотографирую на память…

site3 1

site3 2

Мысль делать чуть разные оформления для каждого раздела посетила меня сразу, как только я поняла, что если верстать сайт без движка на чистом html, то каждую страницу надо делать отдельно и возможности творить превосходят все ожидания. Я спросила у Мити, как интернет-сообщество относится к такому оформлению, и он ответил, что некие вариации возможны при сохранении целостности общей концепции.
А потом я поняла, что «Титаник» получил пробоину, несовместимую с плавучестью и… стремительно тонет, прощаясь с жизнью в бизнес-формате. Написав несколько статей о дайвинге по просьбе своего приятеля, я решила оформить их в другом стиле, задумав сделать сайт для личных целей, куда можно будет повесить свои рассказы и фотографии, не укладывающиеся в рамки торговли зарубежной недвижимостью. Сидя в Дахабе на балконе дрянной и грязной гостиницы с выщербленным кафелем и муравьями, я наверстала первые страницы того, что впоследствии станет брендом «Майрин Ратман».

site4 1

Вернувшись в Москву, я зарегистрировала домен mairin.ru, который, несмотря на хлесткое название, оказался свободен, и сделала оформление для основных материалов. Жить в сети этому макету осталось недолго, так как на движок он почти «натянут», мне осталось доделать лишь мелкие технические детали в шаблоне, и… то, что прожило в интернете три с половиной года, оказавшись той шлюпкой, на которой я уплывала от места катастрофы, в скором времени станет лишь воспоминанием. Делая новый шаблон, я старалась сохранить все, что было мною создано раньше, но… взросление не остановишь. Так что, вот каким mairin.ru был при рождении.

site4 2

Вертикальное меню состояло всего из четырех пунктов: «Длинные дуги на заточенных кантах», «Погружение в реальность» - это дайверский блок, «Сталкинг в сумерках Европы» со ссылкой на latzeme.su. После долгих раздумий, я решалась напечатать «Стихи о стихиях», а то три кнопки выглядели совсем жалко. Четыре все-таки чуть солиднее. И дальше он потихоньку рос и ширился, пока мне не припала охота сделать интернет-магазин. Я снова обратилась к Мите за советом, помня, что до сих пор ему удавалось парой фраз остановить мою панику и направить мою бурную активность в нужное русло.
- Возьми магазин на Джумле, - посоветовал друг, - один из самых удачных бесплатных вариантов. Да, придется кое-что изучить, но не думаю, что тебе будет трудно, учитывая то, что ты уже сделала.
И этот человек три года назад отговаривал меня от движка? – удивилась я, обдумывая совет. – И этот человек говорил, что стандартный шаблон ты никогда не подгонишь под себя так, чтобы тебя все устраивало. Он мне что, предлагает научиться шаблоны для Джумлы самостоятельно делать?
Единственное, что меня реально беспокоило в сложившейся ситуации, так это то, сумею ли я сохранить все в дизайне, что уже было сделано. За три года я так привыкла к облику mairin.ru, что ничего кардинально менять не хотелось. В мозг мне засела дикая идея: сделать шаблон для Джумлы с возможностью подключения разных css-стилей, кто понимает, о чем речь, так же поймет всю мою амбициозность. Полазав по форумам в поисках грамотного совета, я не нашла ничего, кроме фразы «придется менять код шаблона». И это не просто html-код, это уже переменные php. Логически я понимала, что мне надо задать сценарий выбора из массива данных запрошенной переменной, но вот как это сделать…

И понеслись безумные ночи с красными глазами. Сначала я решила распотрошить уже готовый шаблон и подрисовать там все по-своему. Увы, результат меня не удовлетворил. Потом я наваляла свой, простенький. И снова не то. Мозги у меня кипели так, как не нагревались и во время почти одновременного изучения фотошопа и дримвивера. Я отползала от компьютера к кровати, когда переставала соображать, и не могла заснуть, потому что до конца успокоиться тоже не получалось. Поспав часа три-четыре, я открывала глаза и как сомнамбула снова брела к монитору. Наконец мне удалось сделать шаблон аналогичный старому, но, увы, пока без сменных каскадных стилей. Поняв, что с размаху проблема не пробивается, я отвлеклась на верстку текстовых материалов. Я закатала в новый формат все, что было на старом сайте, когда у меня упал локальный сервер.
Никогда не смогла бы быть профессиональным программистом, - думала я, тупо глядя в экран. – Слишком нервная работа! Просыпаешься с идеей, что вот так должно точно получиться. Встаешь к компу, в чем лежала на кровати, пишешь код, запускаешь сайт и… оно не работает. И беда не в том, что злые духи мешают тебе жить, или разработчики движка сделали некачественный продукт, а в том, что ты где-то пропустила запятую или точку лишнюю поставила. Но для того, чтобы найти, где именно, надо ясно понимать, что ты написала в тех двадцати строчках. А те двадцать строчек частично списаны из разных источников и где-то между собой конфликтуют. И еще три дня уйдет на то, чтобы понять, в чем проблема. Потом сайт заработает, и выяснится, что то, что казалось тебе гениальным решением, на практике выглядит… не очень.

В общем, локальный сервер упал и умер, и у меня в голове тут же закружились крамольные мысли, что придется все начинать сначала. Но снести своей рукой то, на что я потратила два месяца, и просто переставить локальный сервер заново, духа не хватило, поэтому я пригласила в гости Митю. И… он снес всю базу данных. Случайно.
- По второму разу обычно лучше получается, - заметил он, когда мы в гробовом молчании махнули по стакану травяного ликера за упокой снесенной без возможности восстановления базы.
Я нервно хихикнула, но еще через пару месяцев поняла, что он снова оказался прав. Кипящие мозги перестали булькать и заработали ровно, сценарий выборки нужной переменной получился сам собой. И вместо двенадцати разных у меня теперь один шаблон с двенадцатью сменными стилями. Впрочем, скорее всего, для магазина нужно будет сделать отдельный шаблон, но что мне теперь такие мелочи? А что будет дальше – не знаю. Идея с анимацией все равно рано или поздно проточит себе дорожку в жизнь. И будут качаться на легком ветру листья цветка, стоящего на подоконнике, и по подвалу побежит маленькая мышка, и капли воды медленно потекут по стеклянной рамке. Но что это будет за проект, пока сокрыто от меня в тумане вероятностей будущего…

Искренне Ваша,
Mairin Ratman

9 марта 2015 года,
Москва