Срочно... в вёрстку!

Срочно... в вёрстку!

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

Пара слов об организации процесса

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

Инструментарий

Отдельно стоит сказать и о наших «рабочих лошадках». Основным редактором выступает Webstorm IDE. В процессе вёрстки достаточно часто используется функция TODO, которая обеспечивает взаимодействие и общение между людьми, работающими над одним проектом. Подход не новый, но очень удобный. Все дефекты и узкие места отмечаются маркером TODO. Кроме этого, с помощью него можно оставить комментарий, который будет доступен другим коллегам по цеху. Это позволяет избежать ошибок или поделить работу. В последних версиях Webstorm IDE появилась вкладка terminal — это консоль, из которой удобно работать с различными npm (node packaged modules). С её помощью без лишних движений можно загружать новые файлы в проект.
Интерфейс Webstorm IDE
При вёрстке у нас в Студии чаще всего используется связка: GIT + Grunt (Gulp) + Bower. К такому решению мы пришли, исходя из собственного опыта. Данные продукты оптимальны и удобным при работе. Каждая программа — это инструмент, подходящий для решения конкретной задачи. Grunt — это система сборки проектов, которая применяется для соединения файлов и их минификации (простой подход уменьшения размеров css/js/html-файлов), а также оптимизации изображений и многого другого. Bower — пакетный менеджер, который позволяет быстро устанавливать необходимые библиотеки, плагины и поддерживать их в актуальном состоянии. Он работает как со сторонними файлами, так и с локальными «пакетами». Программа обеспечивает работу с хранилищем плагинов и даёт возможность их быстрого обновления в проектах. В своей работе мы всегда применяем систему контроля версий. Свой выбор мы когда-то остановили на GIT, это современное решение неплохо поддерживается. GIT обладает полезными функциями, которых нет в SVN или Mercurial, например, возможностью делать локальные коммиты и отдельные ветки, а также индексацией изменений до сохранения.
Рабочее поле Grunt
Еще один удобный инструмент — Less. Это препроцессор, позволяющий сократить написание css-кода, увеличив при этом его модульность, расширяемость, повторное использование и качество в целом. Чтобы избежать путаницы внутри Студии, для удобства введен единый регламент по расположению и наименованию less-файлов, миксинов (т.е. директив, которые позволяют определять множественные правила на основе аргументов).

А что еще?

В процессе вёрстки не стоит забывать о шаблонизации, порой это может значительно сэкономить время. Если в проекте присутствуют повторяющиеся элементы, то применение шаблонов позволит сократить работу над вёрсткой и получить результат быстрее. Для шаблонизации мы обычно применяем Smarty. Другим полезным помощником может стать Google Chrome. Это не только браузер, но и отличный инструмент разработки. Наиболее часто используемые там функции: profiling, emulation, timeline, console, rendering, отладка скриптов — breakpoints. Схожие возможности есть и у других браузеров, но Google Chrome показался нам наиболее удобным. Чтобы облегчить работу команде Студии, мы сделали Sitemap. Однажды нам надоело блуждать в недрах проекта и путаться, поэтому и была создана интерактивная карта шаблонов сайта. Она необходима для быстрых переходов между шаблонами, их поиска во время демонстрации или тестирования вёрстки. Крепится карта специальным javascript к шаблонам, не влияет на вёрстку и не мешает программистам. Вызывается с помощью заданной клавиши. Просто и удобно.
Интерактивная карта шаблонов сайта
Тему тестирования мы уже затрагивали в недавнем материале о кроссбраузерности, этот этап у нас строится по формуле: виртуальная машина + BrowserStack + те устройства, которые есть под рукой. Конечно, выбор рабочих инструментов — это всегда субъективные предпочтения. Каждый день на рынке программного обеспечения появляются всё новые и новые продукты. Мы стремимся быть в тренде и постоянно тестируем новинки. Возможно, наш инструментарий в ближайшее время пополнится чем-то ещё.



  • Как самостоятельно настроить учет данных о рекламных расходах в Google Analytics с точностью до копейки

    Если вы тратите деньги на рекламу в интернет, можете ли вы с точностью до копейки сказать, сколько потратили за сегодня или за прошлую неделю? А сколько переходов получили за эти деньги? Или к каким продажам это привело?

    Мы в своих проектах такой учет ведем. И сегодня генеральный директор агентства интернет-маркетинга «Топ Спот», входящего в нашу группу компаний, Дмитрий Губанов написал специально для vc.ru колонку с практическими советами о том, как автоматизировать учет данных о рекламных расходах в Google Analytics.

  • Итоги уходящего года

    2015 год подходит к концу, и мы по традиции подводим итоги и вспоминаем всё, чего достигли за это время. А достижений было немало!

  • Как победить в схватке за кадры с лидерами индустрии?

    Издание Cossa.Ru опубликовало статью Валерия Комягина о том, как противостоять хантингу со стороны IT-гигантов. В издании вышла редакционная версия материала. Мы, в свою очередь, публикуем «режиссерскую версию» текста, не подверженную цензуре.

  • Мы в десятке лучших разработчиков интернет-магазинов Москвы

    Мы в десятке лучших разработчиков интернет-магазинов Москвы

  • Перестаньте делать обычные сайты. Адаптив — это не страшно

    Перестаньте делать обычные сайты. Адаптив — это не страшно

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

  • Тэглайн 2015: +22 позиции в рейтинге ведущих digital production России

    Тэглайн 2015: +22 позиции в рейтинге ведущих digital production России

    Крупнейшее аналитическое агентство Тэглайн опубликовало рейтинг ведущих разработчиков Рунета. В этому году мы поднялись сразу на 22 позиции и заняли итоговое 71 место.

  • Презентация к докладу «Ключевые показатели digital-производства»

    Все говорят, что в студийном бизнесе важно следить за показателями эффективности. Но никто не говорит, за какими именно. На РИФ+КИБ 2015 мы рассказали о личном опыте внедрения базового управленческого учета. Публикуем презентацию к этом докладу.

  • Эволюция: из маленькой веб-студии в опытного интегратора

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

  • Сказ о том, как старый год провожали

    Однажды решили добры молодцы и красны девицы Студии Комягина праздник себе устроить. Да не простой, а корпоративный новогодний. Стали снедь собирать да в путь-дорогу собираться.

  • Как это было: новый логотип и фирменный стиль Студии

    Как это было: новый логотип и фирменный стиль Студии

    В этом году Студии исполнилось 15 лет. Всё это время мы прожили с логотипом, придуманным в 2002 году первым арт-директором и совладельцем компании Олегом Нагурским. Настало время его поменять.

  • Третий лишний?

    Третий лишний?

    Рассказ о том, как сделать интеграцию со сторонними сервисами менее болезненной.

  • Стратегическое партнёрство с Caparol

    2014 год для нашей компании становится знаковым сразу по нескольким причинам. В этом году Студии исполнилось 15 лет. Для веб-разработчика, с учётом молодости самой индустрии, это солидный возраст. Когда мы начинали в 1999 году, Рунету было всего 5 лет, а веб-студий по стране насчитывалось не больше сотни.

  • Интервью SeoPult

    Интервью SeoPult

    25 сентября состоялись съемки интервью Вaлерия Комягина для SeoPult.TV. Публикуем видеозапись передачи.

  • Браузеры в браузере

    Браузеры в браузере

    В процессе верстки шаблонов сайта всегда встает проблема кроссбраузерности. Да и некорректное отображение страницы в IE8 или в Chrome на iPad стало волновать уже практически каждого заказчика. В этой статье хотелось бы поделиться инструментом, который помогает нам в Студии тестировать шаблоны в разных операционных системах и браузерах быстро и легко.

  • Еженедельные планерки...

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

  • Как выбрать подрядчика для создания сайта? Часть 2

    Две недели назад я начал описывать процесс подбора подрядчика для создания сайта. Несмотря на все многообразие компаний, занимающихся веб-разработкой, заказчику этот выбор обычно дается довольно трудно. Цены, подход к процессу, качество — все это сильно зависит от каждой конкретной компании. Сегодня я хотел бы продолжить и дать еще несколько рекомендаций, которые, на мой взгляд, смогут помочь вам определиться. Итак...

  • «Цель» Элияху Голдратта

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

  • Как выбрать подрядчика для создания сайта? Часть 1

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

  • Первый опыт на Yii

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

  • Мобильное приложение хоккейного клуба «Динамо» доступно в App Store

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

  • V Russian Digital Week, день первый

    В эти дни в Digital October проходит мероприятие под названием «V Russian Digital Week», которое, как написано на сайте мероприятия, «определяет вектор развития российской digital-индустрии на ближайшие годы». Мы почитали темы докладов, подумали и решили съездить в качестве слушателей. Первый день под названием «digital&design» был посвящен, собственно, digital и дизайну.

  • Сайт коллекционного журнала «WinX Club — Волшебная комната»

    Вчера вышел наш новый проект — сайт коллекционного журнала «WinX Club — Волшебная комната». Проект получился маленький, но аккуратный. Примечательно то, что собран он был в рекордные просто сроки даже с учетом необходимости согласования материалов не только с представителями заказчика — наших старых друзей из издательства «Эгмонт-Россия», но и с представителями правообладателя — итальянской компанией Rainbow S.r.I. Собственно, не без удовольствия и гордости, представляем вашему вниманию проект. Будем рады критике, похвалам, восторженным возгласам ... Тухлым помидорам рады, конечно же, не будем, но обещаем воспринять, как это положено настоящим профессионалам... с гневной истерикой :-)

  • Еженедельные планерки...

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