Блог · Родиона · Ерошека

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

Работа длилась около месяца, с разной интенсивностью, но последние 3 дня мы с утра до ночи только Выходным и занимались. Это первая версия, которую не стыдно показать, и про которую не стыдно рассказать, к тому же, в процессе мы многому научились, поэтому я решил написать длинный и исчерпывающий пост о разных аспектах разработки этого проекта. Надеюсь, кому-то это будет интересно.

Дизайн

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

Так что первостепенная задача состояла в том, чтобы сделать интерфейс более доступным, при этом расширив функционал. Над этим мы работали долго и упорно. У меня ушло 20 минут на то, чтобы отобрать десяток разных картинок из всего процесса и раскидать их в Индизайне:

Когда мы остановились на определённом варианте, я отрисовал иконки и всякую, как выражаются в Бюро, интерфейсную фурнитуру:

И вот что у нас получилось:

Скриншоты я вставил для понта, лучше перейти на сайт и посмотреть на всё живьём. Между разными типами записей (заведения, советы, события) появились разделители, краткое описание стало ёмким, все заведения обзавелись отдельными статическими страницами — короче, всё стало понятнее и информативнее. Для того чтобы объяснить, что же это всё-таки за сайт, мы нарисовали промо-блок, который в будущем превратится в полноценный тур по сайту:

Вёрстка

Статья про media queries на Хабре.

Вёрстка, ясное дело, блочная, резиновая, более-менее семантичная. Всё хорошо работает в современных браузерах и ИЕ7. Благодаря media queries, вёрстка тянется от 320 до 1600 пикселей и сайт отлично себя чувствует на экране широкоформатного монитора, планшетника, телефона или в айфрейме приложения Вконтакте:

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

Джаваскрипт

Из библиотек используется jQuery для манипуляций с DOM, хороший шаблонизатор EJS и fancybox. Дальше самописное ядро и набор хелперов, каждый класс в своём файле; данные берутся с сервера в json, фильтруются по параметрам, которые задаёт пользователь (в этой версии только теги, дальше будет время работы, плюшки типа вайфая и т.д.) и рендерятся. Очень упростил отладку мой самописный callstack, с помощью которого я всегда вижу очередь запущенных функций, к какому классу они принадлежат, с какими аргументами были вызваны, и кто их вызвал:

Я далеко не профи в javascript-программировании, поэтому допустил несколько ошибок в проектировании, которые понял достаточно поздно, так что исправлять придётся уже в следующих версиях:

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

Карта

Режим карты на сайте — наша гордость. После сравнения Google Maps с Яндекс.Картами, я переписал почти готовый код, написанный под API Яндекса, под API Гугла. Я не в курсе на счёт Яндекса, но если пользоваться последней версией API Гугла, то карты работают под iOs и Android.

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

Что происходит на сервере?

Серверная часть написана на php с использованием Codeigniter. Помимо основных задач, серверная часть выполняет еще много полезных вещей:

• Типографит тексты, которые пишут наши редакторы. Лебедевский типограф обращается к серверу и поэтому когда он падает, падает и наш сайт. Было такое всего один раз, но осадок остался, поэтому мы перешли на типограф Евгения Муравьёва — он хороший, гибкий, выполняется на сервере и никуда наружу не стучится, к тому же он умеет делать классные штуки, например, размечать ссылки, обрамлять текст параграфами и следить за пробелами до и после знаков препинания.
• Обрезает и шарпит картинки
• Кроном раз в час считает лайки Вконтаке для всех записей (нужно для ранжирования).
• Генерирует sitemap.xml с ссылками на статические страницы.

Оптимизация

Предыдущая версия очень медленно работала, поэтому мы сделали многое, чтобы в этот раз всё летало:

• Саша избавился от join'ов в запросах и это стало основным фактором ускорения. Время, необходимое на выдачу json'a уменьшилось приблизительно в 1000 раз.
• Настроили gzip сжатие для всего, что выдаётся php. Еще не настроили gzip для статики.
• Графику для сайта — в спрайты, насколько это возможно.
• Все js- и css-файлы готовятся для продакшена с помощью RequireJs — остаётся всего три файла: цсс-ка, jquery+requireJs и все наши классы и функции в одном js-файле.

Вот и всё

Я не считаю, что мы перевернули горы, но результат мне уже начинает нравится. Дальше в планах у нас улучшение механизма ранжирования, расписание сеансов в кино, умный поиск и, естественно, информация, информация, информация =)

В работе нам много помогали советами Саша Раковец и Саша Зайцев, за что им большое спасибо =)

Хочу замечания, комментарии, напутствующие слова, возмущения — всякого =)

Permalink | Leave a comment  »

Запись в блоге на Постероусе

Сегодня впервые в жизни сознательно сравнил карты Гугла и Яндекса. Первое, что бросается в глаза: у Гугла цвета намного приятнее. При чём, если рассматривать картинки сами по себе, то вроде разница и небольшая (думается: ну и что, у Яндекса, вон, веселее зато), а вот если взглянуть на карту в контексте какого-то интерфейса, то очевидно, какой вариант выглядит чище, сдержанней.

Сами по себе

В контексте

Давайте посмотрим поближе. Гугл обходится без противной обводки вокруг букв, улицы у него закругляются аккуратно, будто под лекало, а не ломано, как у Яндекса. К тому же, у Гугла на каждой улице указано направление движения.

Если вы знаете, чем Яндекс.Карты лучше, расскажите.

Permalink | Leave a comment  »

Запись в блоге на Постероусе

Привет! Меня зовут Родион, я живу в Днепропетровске, занимаюсь дизайном и фронтэнд-разработкой. Как такового актуального портфолио у меня нету (сайты-скриншоты на фриланс.ру не в счёт), но посмотреть можно сайт бюро «Ноябрь», в котором я работаю — во всех проектах я участвовал как дизайнер, в некоторых еще и как верстальщик.

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

Раньше я время от времени писал в ЖЖ обо всём на свете. А теперь вот появилось желание вести блог с профессиональным уклоном. Надеюсь, энтузиазма хватит надолго =)

Permalink | Leave a comment  »

Запись в блоге на Постероусе

 Читаю «Серьёзное творческое мышление» Эдварда де Боно. Наткнулся на такую вот штуку:

«Приятель показывает вам три перевёрнутые чашки. Под одной из них находится шоколадка, под двумя другими — камешки. Вас просят сделать выбор. Когда вы указываете пальцем на чашку, приятель поднимает одну из двух оставшихся. Под ней лежит камешек. Измените ли вы теперь ваш выбор в пользу второй опрокинутой чашки или останетесь при своём первоначальном решении? Логика утверждает, что теперь у вас равные шансы найти шоколадку под одной из чашек — так что изменять свой выбор бессмысленно. Но иное восприятие, подкреплённое логикой, покажет, что в двух случаях из трёх человек изменит выбор. Почему?»

Автор не объясняет почему, предлагая читателю самостоятельно поразмыслить над этим вопросом. Впервые я об этой задачке услышал, когда смотрел классный фильм «21». Там был похожий кейс и говорилось, что изменить выбор в такой ситуации — это правильное решение.

Я, если честно, не понимаю почему, надеюсь кто-то сможет мне объяснить, а?

Я уверен, что каждый когда-либо задавался вопросом, где в Днепропетровске подают ароматный кофе с горчинкой, куда забежать сытно и недорого перекусить, в какую тренажёрку записаться, какие рок-концерты пройдут на выходных, что нового в кинотеатрах, или какую книжку прочитать. Вопросов — сотни, а ответы найти тяжело.

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

По-моему, ХХ столетие — кладезь чудесных произведений архитектуры, музыки, кино, литературы. Просто золотое время

Сделал дизайн приложения под iPhone для конкурса i-Free Innovations. Прогоосуйте за меня, если не сложно, ребятки =) Нужно зайти по ссылке и кликнуть на кнопочке «LIKE» внизу страницы. И тогда я выиграю милый айПадик =)

У всех бывают скучные часы ожидания, когда друзья разбрелись, вечером запланирована встреча, а сейчас заняться нечем. С предлагаемым приложением в такие моменты достаточно будет достать свой смартфон и объявить окружающим, что вы скучаете, предложить вариант времяпрепровождения и дождаться своего спасителя. Либо самостоятельно посмотреть список «скучающих» неподалёку от себя и присоединиться к кому-нибудь из них.


После запуска приложение даёт возможность предложить окружающим один из ваших предыдущих вариантов времяпрепровождения…

( Еще скриншоты и пояснения )

Сьогодні виповнилось 2 місяці з того моменту, як я кинув.

На початку серпня я захворів і, відповідно, цілими днями валявся вдома. Вдома я курив лише вночі, коли всі позасинають, навулиці =) А коли хворів, я засинав рано. Тобто дня три—чотири я не палив суто з технічних причин =) Робити мені було нічого, я сів читати Карра, прочитав два рази для певності =) Книжка мені сподобалась.

Але сама ідея, сама суть того, що я кину палити мене лякала. Я все ще уявляв себе у різних ситуаціях, мені здавалось, що жити, бути в ті моменти неможливо без сигарети. Найважливіше — розірвати шаблони. Наприклад, перша ранкова сигарета, сигарета після ситного обіду, сигарета з кавою, сигарета на перерві, сигарета під час серйозної розмови, — це все шаблони, їх набагато більше, їх треба розривати. Тобто декілька разів не закурити в цій ситуації. Далі буде легше. Єдине, що мені погано вдається розірвати — це алкоголь і сигарети. Випивши хоч трохи, одразу хочеться курити. Час від часу я не втримуюсь =)

Мені здавалось, що я багато втрачу. Насправді — нічого не втратив. Сигарети не приносять абсолютно нічого. Такий кайф це розуміти. Вже тижні за два—три я помітив, як неприємно пахне від курців, як неприємно сидіти в накуреному приміщенні, скільки відмазок для себе придумують люди, які курять.

Але я нікого не закликаю і не агітую кидати, бо знаю, що курці нікого не слухають у питаннях паління. Я ж не слухав =)

Стаття «Гранты: как бесплатно получить образование за рубежом» на Lookatme

Все більше про це задумуюсь. Розкажіть, хто що знає =) Можливо, якісь ґранти, success-історії про друзів та друзів друзів. Коротше все на світі розповідайте =)

Нещодавно в Менсхелсі була стаття про навчання за кордоном, можу відсканити, якщо цікаво.