[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-quickly":3,"expertises:{\"sort\":\"order\",\"perPage\":100,\"is_main\":1}":20,"blog:{\"perPage\":4}":61},{"id":4,"order":5,"title":6,"slug":7,"publishedAt":8,"shortDescription":9,"previewImageUrl":10,"tags":11,"fullDescription":16,"ogImageUrl":10,"metaTitle":17,"metaDescription":18,"createdAt":19,"updatedAt":19},183,500,"Срочно... в вёрстку!","quickly","2014-11-21","Процесс вёрстки — важный этап при создании сайта. В нашей Студии ему уделяется не меньше внимания, чем программированию или дизайну. В этой статье хотелось бы рассказать об инструментах, которым мы отдаем предпочтение, и поделиться опытом автоматизации некоторых этапов вёрстки.","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fnews\u002F183\u002Fpreview\u002F45d6644f65bda196b4ffd8014d8eacd811d446a7.jpg",[12],{"id":13,"name":14,"slug":15},26,"Процесс","process","Процесс вёрстки — важный этап при создании сайта. В нашей Студии ему уделяется не меньше внимания, чем программированию или дизайну. В этой статье хотелось бы рассказать об инструментах, которым мы отдаем предпочтение, и поделиться опытом автоматизации некоторых этапов вёрстки.\u003C!--more-->\n\n\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Ffiles\u002F5d834e66011e1d5a8c82c6533029fc76db49d2a2.jpg\" alt=\"\" \u002F>\u003C\u002Ffigure>\n\u003Ch3>Пара слов об организации процесса\u003C\u002Fh3>\nМы стремимся выстроить производство таким образом, чтобы на выходе получить интернет-проект, трудозатраты на который были бы оптимальны, при этом он соответствовал стандартам качества и решал все поставленные задачи. Для этого соблюдается несколько важных правил.\n\nУ нас чётко разделены зоны ответственности между верстальщиками и программистами. Это ускоряет поиск ошибок, если они вдруг возникают, и минимизирует время их исправления.\n\nВ процессе производства отдельно располагаются html-версии и рабочие копии проекта. Такой подход позволяет избежать путаницы в головах разработчиков и разграничить ответственность.\n\nВёрстка всегда должна поддерживаться в актуальном состоянии. Всё, что видно на сайте (фронтенд), обязательно воспроизводится в html-шаблонах: все состояния элементов, все сообщения об ошибках и т.д. Это даёт возможность ввести еще один уровень тестирования. Проводится проверка на соответствие html-шаблона дизайн-макету, что позволяет выявить на ранней стадии возможные проблемы с интерфейсом пользователя (UI) без привлечения к работе программистов, которые отвечают только за бэкенд.\n\u003Ch3>Инструментарий\u003C\u002Fh3>\nОтдельно стоит сказать и о наших «рабочих лошадках».\n\nОсновным редактором выступает \u003Cb>Webstorm IDE\u003C\u002Fb>. В процессе вёрстки достаточно часто используется функция TODO, которая обеспечивает взаимодействие и общение между людьми, работающими над одним проектом. Подход не новый, но очень удобный. Все дефекты и узкие места отмечаются маркером TODO. Кроме этого, с помощью него можно оставить комментарий, который будет доступен другим коллегам по цеху. Это позволяет избежать ошибок или поделить работу.\n\nВ последних версиях Webstorm IDE появилась вкладка terminal — это консоль, из которой удобно работать с различными npm (\u003Ca href=\"http:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FNpm_%28software%29\" target=\"_blank\" rel=\"nofollow\">node packaged modules\u003C\u002Fa>). С её помощью без лишних движений можно загружать новые файлы в проект.\n\n\u003Cfigure class=\"img-shadow\">\u003Cimg src=\"https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Ffiles\u002F5b6021cd9d7848b8ca03a4cb0de4c6b49ee9815d.jpg\" alt=\"\" \u002F> \u003Cfigcaption>Интерфейс Webstorm IDE\u003C\u002Ffigcaption>\u003C\u002Ffigure>При вёрстке у нас в Студии чаще всего используется связка: \u003Cb>GIT + Grunt (Gulp) + Bower\u003C\u002Fb>. К такому решению мы пришли, исходя из собственного опыта. Данные продукты оптимальны и удобным при работе. Каждая программа — это инструмент, подходящий для решения конкретной задачи.\n\nGrunt — это система сборки проектов, которая применяется для соединения файлов и их минификации (простой подход уменьшения размеров css\u002Fjs\u002Fhtml-файлов), а также оптимизации изображений и многого другого.\n\nBower — пакетный менеджер, который позволяет быстро устанавливать необходимые библиотеки, плагины и поддерживать их в актуальном состоянии. Он работает как со сторонними файлами, так и с локальными «пакетами». Программа обеспечивает работу с хранилищем плагинов и даёт возможность их быстрого обновления в проектах.\n\nВ своей работе мы всегда применяем систему контроля версий. Свой выбор мы когда-то остановили на GIT, это современное решение неплохо поддерживается. GIT обладает полезными функциями, которых нет в SVN или Mercurial, например, возможностью делать локальные коммиты и отдельные ветки, а также индексацией изменений до сохранения.\n\n\u003Cfigure class=\"img-shadow\">\u003Cimg src=\"https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Ffiles\u002F587c85fdbc2c5be2b48ac90656ae4ca45993624e.jpg\" alt=\"\" \u002F> \u003Cfigcaption>Рабочее поле Grunt\u003C\u002Ffigcaption>\u003C\u002Ffigure>Еще один удобный инструмент — Less. Это препроцессор, позволяющий сократить написание css-кода, увеличив при этом его модульность, расширяемость, повторное использование и качество в целом. Чтобы избежать путаницы внутри Студии, для удобства введен единый регламент по расположению и наименованию less-файлов, миксинов (т.е. директив, которые позволяют определять множественные правила на основе аргументов).\n\u003Ch3>А что еще?\u003C\u002Fh3>\nВ процессе вёрстки не стоит забывать о шаблонизации, порой это может значительно сэкономить время. Если в проекте присутствуют повторяющиеся элементы, то применение шаблонов позволит сократить работу над вёрсткой и получить результат быстрее. Для шаблонизации мы обычно применяем Smarty.\n\nДругим полезным помощником может стать Google Chrome. Это не только браузер, но и отличный инструмент разработки. Наиболее часто используемые там функции: profiling, emulation, timeline, console, rendering, отладка скриптов — breakpoints. Схожие возможности есть и у других браузеров, но Google Chrome показался нам наиболее удобным.\n\nЧтобы облегчить работу команде Студии, мы сделали Sitemap. Однажды нам надоело блуждать в недрах проекта и путаться, поэтому и была создана интерактивная карта шаблонов сайта. Она необходима для быстрых переходов между шаблонами, их поиска во время демонстрации или тестирования вёрстки. Крепится карта специальным javascript к шаблонам, не влияет на вёрстку и не мешает программистам. Вызывается с помощью заданной клавиши. Просто и удобно.\n\n\u003Cfigure class=\"img-shadow\">\u003Cimg src=\"https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Ffiles\u002F04ec2d479502d18bdbb54e0a5ba2ed45d22ad2fe.jpg\" alt=\"\" \u002F> \u003Cfigcaption>Интерактивная карта шаблонов сайта\u003C\u002Ffigcaption>\u003C\u002Ffigure>Тему тестирования мы уже затрагивали в недавнем материале о \u003Ca href=\"\u002Fblog\u002Fcross-browser\u002F\">кроссбраузерности\u003C\u002Fa>, этот этап у нас строится по формуле: виртуальная машина + BrowserStack + те устройства, которые есть под рукой.\n\nКонечно, выбор рабочих инструментов — это всегда субъективные предпочтения. Каждый день на рынке программного обеспечения появляются всё новые и новые продукты. Мы стремимся быть в тренде и постоянно тестируем новинки. Возможно, наш инструментарий в ближайшее время пополнится чем-то ещё.","Срочно... в вёрстку! — SVK.Digital","Рассказали об инструментах для верстки и поделились опытом автоматизации этапов вёрстки","2026-05-15 07:37:57",{"currentPage":21,"lastPage":21,"perPage":22,"from":21,"to":23,"total":23,"nextPageUrl":24,"previousPageUrl":24,"items":25},1,20,5,null,[26,33,40,47,54],{"id":27,"title":28,"shortDescription":29,"imageUrl":30,"url":31,"slug":32},43,"Заказная разработка","\u003Cdiv class=\"service-content\">\r\n\u003Cul>\r\n\u003Cli style=\"font-size: 12pt;\">\u003Cspan style=\"font-size: 12pt;\">• Разработка веб-приложений\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli style=\"font-size: 12pt;\">\u003Cspan style=\"font-size: 12pt;\">• Разработка мобильных приложений\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli style=\"font-size: 12pt;\">\u003Cspan style=\"font-size: 12pt;\">• Разработка продуктов и стартапов (MVP)\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\u003C\u002Fdiv>","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fexpertises\u002F43\u002Fmain\u002F9b536e910e22b0c053432f4058d5594ca6f79874.jpg","\u002Fservices\u002Fcustom-development\u002F","custom-development",{"id":34,"title":35,"shortDescription":36,"imageUrl":37,"url":38,"slug":39},52,"ИИ-разработка","\u003Cp dir=\"ltr\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">Внедрение ИИ в работу компаний и предприятий\u003C\u002Fspan>\u003C\u002Fp>\r\n\u003Cul>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Автоматизация рутинных процессов\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• LLM и RAG-системы (корпоративный GPT, чат-боты)\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• ML (обучаемые модели)\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Компьютерное зрение\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Генеративные интерфейсы\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\u003Cp> \u003C\u002Fp>","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fexpertises\u002F52\u002Fmain\u002Fb245231d8506ae3ea4c77015c36c3b25499952f1.png","\u002Fservices\u002Fai\u002F","ai",{"id":41,"title":42,"shortDescription":43,"imageUrl":44,"url":45,"slug":46},41,"Интеграция и автоматизация","\u003Cdiv class=\"service-content\">\r\n\u003Cp>\u003Cspan style=\"font-size: 12pt;\">Кастомная разработка\u003C\u002Fspan>\u003C\u002Fp>\r\n\u003Cul>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Автоматизированных систем управления\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Личных кабинетов\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Учетных систем\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• CRM\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• ERP\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\u003Cp> \u003C\u002Fp>\r\n\u003Cp>\u003Cspan style=\"font-size: 12pt;\">Внедрение PIM-систем\u003C\u002Fspan>\u003C\u002Fp>\r\n\u003Cul>\r\n\u003Cli>\u003Cspan style=\"font-size: 12pt;\">• На базе PIMcore\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\u003Cp dir=\"ltr\" role=\"presentation\"> \u003C\u002Fp>\r\n\u003Cp dir=\"ltr\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">Автоматизация бизнеса\u003C\u002Fspan>\u003C\u002Fp>\r\n\u003Cul>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• На базе заказной разработки\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Заказная разработка + точечное внедрение ИИ\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\u003Cp> \u003C\u002Fp>\r\n\u003C\u002Fdiv>","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fexpertises\u002F41\u002Fmain\u002F7f0f8a036ec2c365f2099d796f774c2a0053a63d.png","\u002Fservices\u002Fintegration-automation\u002F","integration-automation",{"id":48,"title":49,"shortDescription":50,"imageUrl":51,"url":52,"slug":53},53,"Аренда выделенных команд","\u003Cul>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Поддержка и развитие веб-сервисов\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Создание веб-сервисов “с нуля”\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\u003Cp> \u003C\u002Fp>","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fexpertises\u002F53\u002Fmain\u002F3c00e6bbc3263141bc54ea51b816e383fcc49506.png","\u002Fservices\u002Fit-outsourcing\u002F","it-outsourcing",{"id":55,"title":56,"shortDescription":57,"imageUrl":58,"url":59,"slug":60},44,"ИТ-консалтинг","\u003Cul>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Аудит и оптимизация инхаус-команд\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• Продуктовый консалтинг\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003Cli dir=\"ltr\" style=\"font-size: 12pt;\" role=\"presentation\">\u003Cspan style=\"font-size: 12pt;\">• HR в сфере диджитал\u003C\u002Fspan>\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\u003Cp> \u003C\u002Fp>","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fexpertises\u002F44\u002Fmain\u002F53c7eb07fb9f9d3b8f2184b6026cd9fcae15a875.png","\u002Fservices\u002Fit-consulting\u002F","it-consulting",{"currentPage":21,"lastPage":62,"perPage":63,"from":21,"to":63,"total":64,"nextPageUrl":65,"previousPageUrl":24,"items":66},32,4,126,"https:\u002F\u002Fapi.internet-design.ru\u002Fapi\u002Fblog?perPage=4&page=2",[67,75,83,91],{"id":68,"order":21,"title":69,"slug":70,"publishedAt":71,"shortDescription":72,"previewImageUrl":73,"tags":74},250,"ИИ в рекрутинге: почему HR'ы остаются риском для системы","hr-ai-recruiter-risks","2026-06-11","\u003Cp>Где HR-команды чаще всего ошибаются при работе с корпоративным ИИ, почему из-за этого даже сильное решение начинает работать против компании и как выстроить процесс так, чтобы ИИ усиливал рекрутера\u003C\u002Fp>","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fblogs\u002F250\u002Fpreview\u002F6d0df821c17246e568682f625a2bf0bec711e543.jpg",[],{"id":76,"order":21,"title":77,"slug":78,"publishedAt":79,"shortDescription":80,"previewImageUrl":81,"tags":82},247,"Штрафы за авторизацию через Google и Apple ID: кому грозят и что делать","google-apple-auth-fines","2026-06-10","\u003Ch2> \u003C\u002Fh2>","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fblogs\u002F247\u002Fpreview\u002Feb4d7ec37a740ed468a633cbdcd24c4cc27e2ad7.png",[],{"id":84,"order":21,"title":85,"slug":86,"publishedAt":87,"shortDescription":88,"previewImageUrl":89,"tags":90},249,"Как вернуть под контроль теневой ИИ в клинике","shadow-ai-medicine","2026-06-04","","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fblogs\u002F249\u002Fpreview\u002F2e43161fed61bca56c185e893c694c63987808b1.jpg",[],{"id":92,"order":21,"title":93,"slug":94,"publishedAt":95,"shortDescription":88,"previewImageUrl":96,"tags":97},244,"Избегаем дорогих архитектурных ошибок в разработке сложных веб-приложений","expensive-architectural-mistakes","2026-04-30","https:\u002F\u002Fa2a7be71-be8a-4951-a3b2-e244e2e9ee45.selstorage.ru\u002Fnews\u002F244\u002Fpreview\u002Ffda0d684985e23ed3c225c3a0a1446356fd52473.jpg",[98],{"id":99,"name":100,"slug":101},30,"Школа заказчика","customers"]