Основа

Разработка сайтов, а точнее, отдельный её этап - вёрстка - процесс увлекательный, интересный и трудоёмкий. Верстальщик должен не только знать и понимать методологию вёрстки, но и уметь пользоваться программным обеспечением, различными инструментами, онлайн-сервисами. Навыки использования программ, а зачастую и просто знание того, что такой инструмент существуют - сильно упрощает жизнь специалиста. Здесь я бы хотел поделиться теми инструментами, которыми пользуюсь лично я в разработке, которые мне удобны и с которыми умею и люблю работать. Т.е. чистой воды субъективизм и вкусовщина ;)

Хостинг

Верстать сайты можно разными способами. Кто-то работает на локальном хостинге, затем переносит сайт на хостинг клиента и привязывает к нему домен. Лично я предпочитаю работать с "живым" хостингом и демонстрировать работу клиенту в режиме онлайн. Я пользуюсь хостинг-провайдером REG.RU, пользуюсь более двух лет и меня в нём всё устраивает. Во-первых, цена - стоимость тарифа, достаточного для того, чтобы начать разработку - Host-0, на текущий день составляет 172 российских рубля в месяц, при оплате на год. К тарифу Host-0 можно привязать до 5 доменов, неограниченное количество баз данных и псевдонимов. Во-вторых, скидки - их очень много буквально за каждое действие.

Что касается вопросов техподдержки - многие вопросы можно решить онлайн в рабочее время посредством help-чата или телефонного звонка. Более глобальные вопросы решаются через обращение в течение 1-3 рабочих дней.

К хостингу я привязал домен, который приобрел специально для разработки сайтов. К домену я создаю поддомены вида 1.site.ru и на поддомене верстаю сайт. Эту ссылку я с первого дня работы над проектом предоставляю клиенту, рассказываю, как правильно обновлять браузер, чтобы видеть последние изменения и верстаю сайт прямо на нём.

Хостинг reg.ru

Есть одна особенность, которую нужно учитывать при работе с поддоменами. Если сайт предполагает наличие системы управления содержимым (CMS) и верстальщику нужно помимо верстки сделать натяжку на CMS, то нужно учитывать, что CMS 1С-Битрикс с трудом устанавливается на поддомен. Я устанавливаю ее на основной домен для разработки и по окончании проекта, удаляю её для последующей разработки. Все остальные CMS, с которыми я работаю (WordPress, OpenCart, ModX), без труда разворачиваются на поддоменах.

Редактор

Редактор кода - это программа, которая необходима для работы над сайтом. Можно пользоваться и обычным блокнотом - есть и такие "хардкорщики".

Одним из самых известных редакторов, является notepad++. Распространяется под лицензией GNU GPL 2, т.е. является свободным и бесплатным. Скачать можно с официального сайта. Поддерживает подсветку синтаксиса, написано много плагинов и дополнений, расширяющих функционал. Последний релиз - 7.5.1 от 30.08.2017.

Редактор notepad++

Я в работе использую редактор Atom от GitHub Inc. - самого известного веб-сервиса для хостинга IT-проектов. Atom - свободный редактор, распространяется под GPL-совместимой лицензией MIT. Ссылка на официальный сайт. Поддерживает все языки, необходимые для разработки сайтов, гибко настраивается за счет огромного количества плагинов, можно менять внешний вид, создавать собственные темы и разрабатывать плагины. Одним из самых полезных плагинов к редактору Atom, которыми я постоянно пользуюсь, является Remote FTP. Он позволяет установить FTP-соединение с сайтом и вносить изменения в верстку "на лету".

Редактор Atom

Помимо notepad++ и Atom, существуют множество других редакторов кода, есть более простые, есть более профессиональные и сложные. Информации о них очень много в открытом доступе, каждый может выбрать себе наиболее удобный инструмент.

Браузеры и эмуляторы

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

- Google Chrome - 76.1% пользователей

- Firefox - 12.1% пользователей

- IE/Edge - 4.1% пользователей

- Safari - 3.3% пользователей

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

Касательно браузерных движков: я верстаю в первую очередь под webkit и blink (ответвление webkit). На webkit работает Safari, на blink - Chrome, Opera, Яндекс.Браузер. Далее, нужно проверить отображение сайта в браузере Firefox, он работает на движке gecko. После этого IE/Edge, причем тут будет больше всего доработок и проверять лучше как в Internet Explorer, так и в Edge, поскольку IE работает на старом движке trident, а Edge использует новый движок с одноименным названием, который хоть и является ответвлением trident, но может отображать веб-страницы по-разному. Пока IE до конца не умер, приходится с ним считаться.

Все браузеры, кроме Safari, можно установить на Windows. Проверить отображение сайта в Safari лучше всего на макбуке, но не всегда есть такая возможность. В этом случае на помощь приходит онлайн-сервис BrowserStack. Это эмулятор различных браузеров, удаленно можно проверить отображение сайта на различных устройствах в разных браузерах, в том числе мобильных. После регистрации аккаунта у Вас будет 30 минут бесплатного просмотра сайтов. По окончании которых можно завести другой аккаут, он привязывается только к почте. Естественно, количество устройств во время бесплатного периода, ограничено, но их достаточно, чтобы проверить корректность верстки.

Эмулятор BrowserStack

Работа с графикой

Верстка сайта производится по макетам сайтов, которые разработаны веб-дизайнером. Чаще всего, веб-дизайнеры используют две программы, в которых создают макеты сайтов. Это Adobe Photoshop и Adobe Illustrator. Эти программы необходимы верстальщику для того, чтобы открыть в них макеты и работать с ними. Содержиммое макета разбито по слоям и верстальщику необходимо в точности ретранслировать макет для отображения в браузере.

Adobe Photoshop также позволяет скопировать стили слоя в виде css селетора со свойствами. Останется только удалить лишние стили и проверить соответствие в конечном отображении в браузере.

Adobe Photoshop

Adobe Illustrator изначально - редактор векторной графики. И если элементы дизайна созданы в этой программе, их можно экспортировать в векторный формат - svg. Использование векторной графики на сайте - очень правильный подход, поскольку сайт будет загружаться намного быстрее, чем при использовании растровых форматов изображений - jpg, png, gif и других.

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

Все три продукта Photoshop, Illustrator, Corel - являются коммерческим программным обеспечением, поэтому их придется либо покупать, либо искать пиратские версии на торрентах. Тут уж каждый выбирает для себя, как ему удобнее ;)

Использование векторной графики на сайте - вообще очень хорошая и современная техника. Иногда нужно найти изображения, если макет недоработан или еще по каким-то другим причинам. Для этого будет полезным использовать иконочные шрифты либо бесплатные векторные изображения. Одним из самых популярных иконочных шрифтов является шрифт FontAwesome. Инструкция по подключению и использованию, представлена на официальном сайте. Шрифт входит в сборку фреймворка Bootstrap.

Иконочный шрифт Font Awesome

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

Работа со шрифтами

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

1. Шрифт находится в свободном доступе, я его нахожу на сайте Google Fonts и подключаю его через этот сервис.

2. Шрифта нет на Google Fonts, тогда его нужно найти в интернете, купить/скачать и сделать конвертацию во все нужные форматы. Замечательный сервис для конвертации шрифтов - это Font Squirrel. Простой, понятный, мощный.

Генератор шрифтов Font Squirrel

Загрузка файлов

Загрузку файлов сайта можно производить несколькими способами. Большие архивы я загружаю через панель управления хостингом, на REG.RU можно выбрать одну панель управления из трех, я пользуюсь ISP Manager. Небольшие файлы закачиваю через FTP-клиент FileZilla. Распространяется бесплатно по лицензии GNU GPL. Очень прост и удобен в использовании.

FTP-клиент FileZilla

Проверка верстки

Верстку сайта я проверяю в двух сервисах. Первый - это валидатор кода от Консорциума Всемирной паутины W3C. Второй - это проверка скорости загрузки сайта с помощью инструментов PageSpeed Tools от Google. И тем и другим важно уметь пользоваться и стремиться повысить показатели сайта до максимально возможных.

Итог

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

Юрий Скачко

25.11.2017