Чтение онлайн

на главную - закладки

Жанры

Я верстальщик. Веб-верстальщик
Шрифт:

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

Но будем откровенны. Изначально мы работали в редакторах исходного кода. Мы это верстальщики, программисты, все, кто работал с кодом. Таким редактором долгое время был, и наверное остался

блокнот, который поставлялся и поставляется до сих пор с операционной системой Windows. Со средой разработки в Linux не все так просто. Там есть Vim – редактор, позволяющий обрабатывать содержимое файлов прямо в режиме консоли.

Если открыть в Vim файл формата html с примером кода, описываемого в главе Теги, то можно увидеть вот это:

Редактор Vim в консоли Windows PowerShell с установленной подсистемой Ubuntu

Никто не знает, как выйти из вима

Сей факт породил тонны шуток и мемов в духе:

На самом деле все просто, достаточно ввести двоеточие и символ q в английской раскладке. Никакой интриги.

Язык не поворачивается назвать Vim IDE, так что я скорее отнесу его к редактору исходного кода. К слову, если блокнотом сейчас никто не пользуется, то Vim более чем здравствует. Если вы начнете использовать Linux систему, или, как я Windows, с установленной подсистемой Ubuntu и будете использовать систему хранения версий, то скорее всего столкнетесь с этим редактором.

Минутка истории

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

Но вернемся к вопросу выбора. Выбор редактора (возьмем в качестве этого термина объединение IDE и редактор исходного кода) очень важен как для верстальщика, так и для программиста.

Я уверен, в первую очередь он должен быть удобным. Для меня удобство – это качественные шрифты и цветовая схема, которая не вырывает мне глаза. Лучшим редактором в плане цветового решения для меня был и остается Notepad++. Там информация отображается на белом фоне, по-умолчанию используется хорошо читаемый шрифт. Но он сильно пасует перед продвинутыми редакторам в плане возможностей, хотя я достаточно часто к нему прибегаю, когда необходимо решить сложные вопросы легким путем.

Полноценная IDE, на которой я остановился на момент написания этой книги – Brackets. Это достаточно удобный редактор для работы над проектами. Когда много файлов, и нужно все их видеть не отходя от кассы, т.е. от редактора. В тот же notepad такую возможность ввели где-то в середине 2018-го года.

Иной раз и при особых задачах пасует и Brackets. Тогда на помощь может прийти WEBStorm. WEBStorm создала компания JetBrains и у них есть еще много

редакторов под разные нужды. В основном эти нужды выражены языками.

В целом можно выделить следующие редакторы:

Notepad – Встроенный редактор Windows. Никакой подсветки, открывается очень быстро, позволяет обнулять стили.

Notepad++ (NPP) – Грубо говоря, расширенный редактор Notepad, позволяет полноценно редактировать код, и мы все когда-то с ним успели поработать.

Sublime – Редактор из Linux, настолько знаменит, что о нем не все знают. В целом, удобная альтернатива Notepad++. Или наоборот!? Рекомендую ознакомиться.

Dreamweaver – Хоррор из прошлого. Некогда запомнился мне инновационной подачей «пишу и вижу», что позволяло сразу видеть, как код написан. Вот только показывал он его как-то по своему, в своей реальности. Лет 7 назад посоветовал бы не связываться с ним, а что он представляет сейчас не знаю.

Brackets – Мощный и удобный редактор для верстальщика. Является неким средним явлением между notepad++ и phpstorm. Можно ставить дополнения и вообще достаточно гибок в настройке.

Visual Studio Code – Я когда-то учил язык C и тестировал знания в редакторе Visual Studio. Так вот с тем, к чему я привык, там эта «облегченная версия» не имеет ничего общего. Удобный расширяемый редактор, который я поставлю на одно место с brackets. По умолчанию умеет работать с Git.

PHPStorm – Ориентирован изначально на работу php-программиста, но отлично подходит и верстальщику. Удобная работа с проектами, некоторые интересные фичи типа редактирования открывающего и закрывающего тега. Но не умеет редактировать много строк сразу, да и тяжелый, как мастодонт. Будет грузится едва ли меньше, чем фотошоп на вашем компьютере. Рекомендую только в том случае, если вы работаете в паре с php-программистом и вам не обойтись без единовременного редактирования кода.

WebStorm – Редактор с упором на javascript проекты. Должен быть удобен для возведения конструкций с использованием фреймворков/библиотек типа Vue, Angular, React.

PyCharm Это уже третий редактор от JetBrains, и он вроде не по теме, но только до того момента, как вы не начинаете работать с, допустим, фреймворком Django. Это уже относится к продвинутому уровню, так что не будем долго останавливаться.

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

Ни в коем случае не используйте для верстки визивиги!

WYSIWYG – это визуальный редактор, работающий по принципу «что видишь, то и получишь». Такой редактор уместен во многих других направлениях, например для сбора презентации в Point, или при составлении текста в Google Docs, но только не в верстке. Уже придумали, но еще не создали такой визивиг, который мог бы вам помочь в жизни.

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

Поделиться:
Популярные книги

Вампиры девичьих грез. Тетралогия. Город над бездной

Борисова Алина Александровна
Вампиры девичьих грез
Фантастика:
фэнтези
6.60
рейтинг книги
Вампиры девичьих грез. Тетралогия. Город над бездной

Хранители миров

Комаров Сергей Евгеньевич
Фантастика:
юмористическая фантастика
5.00
рейтинг книги
Хранители миров

Кодекс Крови. Книга ХIV

Борзых М.
14. РОС: Кодекс Крови
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Кодекс Крови. Книга ХIV

Бастард Императора. Том 5

Орлов Андрей Юрьевич
5. Бастард Императора
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Бастард Императора. Том 5

На границе империй. Том 9. Часть 5

INDIGO
18. Фортуна дама переменчивая
Фантастика:
космическая фантастика
попаданцы
5.00
рейтинг книги
На границе империй. Том 9. Часть 5

Идеальный мир для Лекаря 24

Сапфир Олег
24. Лекарь
Фантастика:
городское фэнтези
попаданцы
5.00
рейтинг книги
Идеальный мир для Лекаря 24

Князь Мещерский

Дроздов Анатолий Федорович
3. Зауряд-врач
Фантастика:
альтернативная история
8.35
рейтинг книги
Князь Мещерский

Новый Рал 7

Северный Лис
7. Рал!
Фантастика:
попаданцы
5.00
рейтинг книги
Новый Рал 7

Полное собрание сочинений. Том 25

Толстой Лев Николаевич
Проза:
классическая проза
5.00
рейтинг книги
Полное собрание сочинений. Том 25

Вечный. Книга IV

Рокотов Алексей
4. Вечный
Фантастика:
боевая фантастика
попаданцы
рпг
5.00
рейтинг книги
Вечный. Книга IV

Семья. Измена. Развод

Высоцкая Мария Николаевна
2. Измены
Любовные романы:
современные любовные романы
5.00
рейтинг книги
Семья. Измена. Развод

Секреты серой Мыши

Страйк Кира
Любовные романы:
любовно-фантастические романы
6.60
рейтинг книги
Секреты серой Мыши

Отверженный III: Вызов

Опсокополос Алексис
3. Отверженный
Фантастика:
фэнтези
альтернативная история
7.73
рейтинг книги
Отверженный III: Вызов

Идеальный мир для Лекаря 3

Сапфир Олег
3. Лекарь
Фантастика:
фэнтези
юмористическое фэнтези
аниме
5.00
рейтинг книги
Идеальный мир для Лекаря 3