HTML + Верстка

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

Целевая аудитория — начинающие верстальщики и фронтенд-разработчики.

Добрый день! Сегодняшняя статья даст вам узнать об удобных инструментах при работе с макетами и выбрать подходящий для себя.

Как правило, большинство шаблонов это PSD файлы. И мы, работая с ними в известном для всех Adobe Photoshop, ощущаем его недостатки. Но есть ряд программ, которые облегчают работу с макетами. Мы рассмотрим с вами 4 инструментa для совместной работы дизайнеров и фронтенд-разработчиков. Давайте познакомимся с ними!

Что это за инструменты и как они работают

Это Avocode, Zeplin, Sympli и Marsy. Они нацелены на перевод макета из Photoshop или Sketch в код. Нужно только загрузить макет дизайна и инструменты сделают свою работу.

Эти инструменты позволяют:

•  Изучать дизайн, подготовленный в Photoshop или Sketch

•  Экспортировать ресурсные файлы для любых элементов

•  Получать все необходимые элементы дизайна

Avocode

Этот инструмент ориентирован в большей степени на веб-разработку.

Прежде чем начать использовать Avocode, нужно зарегистрироваться и получить аккаунт. Avocode не предоставляет бесплатных аккаунтов под один-два проекта, и на знакомство с продуктом у вас будет только 7 дней триального периода. Дальше нужно будет оплатить месячный или годовой тариф, для команды или одного человека.

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

И так, когда мы впервые открываем наш макет в Avocode мы видим схожесть с уже знакомым Adobe Photoshop.

Советую посмотреть видео о Avocode, в нем рассматриваются основные инструменты этого сервиса:

Плюсы:

•  Удобный и лаконичный интерфейс, с множеством функций и продуманных деталей

•  Поддерживает большое количество расширений файлов

•  Avocode можно использовать на всех основных платформах (Mac, Windows, Linux)

•  Поддерживает веб и мобильные проекты (iOS и Android)

Минусы:

•  Нет бесплатного плана, после семидневного пробного периода нужно оформлять платный тариф

Zeplin

Zeplin — еще один инструмент для фронтенд-разработчиков.

Для начала работы регистрируемся на сайте. После регистрации предложат посмотреть базовый курс работы с инструментом. У Zeplin, как и у Avocode есть веб и десктопная версии.

Zeplin не дает загружать файлы на прямую. Для того чтобы начать работать с нашим макетом нам нужно скачать плагин для Photoshop или Sketch. На сайте можно его скачать. Zeplin подробно нам объясняет как установить плагин и впоследствии загрузить макет.

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

У этого сервиса есть большое количество расширений под разные ситуации:

Инструмент имеет возможность бесплатного тарифного плана, но он ограничен лишь одним проектом. Чтобы расширить возможности использования Zeplin предлагает несколько платных подписок.

Плюсы:

•  Минималистичный интерфейс. Ничего лишнего!

•  Поддерживает веб и мобильные проекты (iOS и Android)

•  Бесплатный тариф

Минусы:

•  Нет интеграции с IDE, и разработчикам нужно вручную переносить все ресурсы из Zeplin в IDE XCode и Android Studio

•  Для загрузки файла нужно скачивать плагин

Sympli

Sympli — это платформа для совместной работы дизайнеров и фронтенд-разработчиков. Включают процессы передачи макетов Photoshop или Sketch, а также импорт дизайна в Android Studio и Xcode. Этот инструмент сильно ускоряет разработку.

Первое, что вы увидите на сайте, будет блок How it works — она расскажет, что нужно знать чтобы работать с этим инструментом. Теперь вы должны зарегистрироваться и создать новый проект.

В Symli как и в Zeplin нужно установить плагин для Photoshop или Sketch. Все загруженные макеты появляются в «облаке».

По сравнению с Avocode и Zeplin плагин Sympli для Sketch позволяет экспортировать скрытые ресурсы.

Sympli автоматически сохраняет все цвета и шрифты, которые используются в проекте. Он сам группирует их, а позже эти цвета и шрифты можно использовать в других проектах. Такая функциональность носит название Brandbooks. Эта функциональность полезна, если есть несколько проектов для одного бренда.

Sympli также позволяет выгружать все ресурсы в формате Bitmap или Vector.

Огромная разница Avocode и Zeplin в том, что Sympli предоставляет плагины к студиям разработки Android Studio и Xcode.

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

Плюсы:

•  Пользователям не нужно устанавливать отдельное приложение на локальную машину. Все, что нужно, доступно в многофункциональном веб-приложении

•  Поддерживает веб и мобильные проекты (iOS и Android)

•  Расширения для XCode и Android Studio позволяют транслировать дизайн прямиком в код

•  Дополнительный набор полезных функций, таких как Brandbooks

Минусы:

•  Замудрённый интерфейс

•  Для загрузки макета необходимо установить плагин

Marsy

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

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

У Marsy есть бесплатный тариф, но в нем доступна работа только над одним проектом. Из всех предложенных у этого инструмента платные подписки стоят в районе 100-200 рублей в месяц.

Советую посмотреть видео о Marcy, в нем рассматриваются основные инструменты этого сервиса:

Плюсы:

•  бесплатный тариф

•  загрузка макета на прямую

•  выбор языка (rus/eng)

Минусы:

•  неудобный интерфейс

•  работа только с форматом PSD

•  функционал сильно ограничен

Советы по выбору сервиса

Avocode отлично подходит для веб-разработки.

Стоит обратить внимание на Sympli, если вам нужна интеграция с XCode или Android Studio. Также рассматривайте этот инструмент, если вы работаете большой командой.

Стоит рассмотреть Zeplin или Marsy, если у вас относительно небольшой проект, функциональности этих сервисов хватает для этого.

Думаю, что Marsy стоит использовать, если вы только учитесь, у вас ограниченный бюджет, вы используете только PSD макеты и у вас нет необходимости в большом разнообразии инструментов. Marsy очень прост в использовании и русифицирован, но лично я всё равно отдавала бы предпочтение Zeplin из этих двух.

Заключение

Все рассмотренные сервисы предлагают хорошие инструменты для работы с макетами. Avocode, Zeplin, Sympli и Marsy отлично вписываются в процесс передачи дизайна в разработку.

Используйте только лучшие инструменты, чтобы переводить дизайн в код без потери сил и времени!

Поддержи автора и подпишись на мой youtube и telegram

Datalist

<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.

Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.

<form action="">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
</form>

Fieldset

<fieldset> - существует для группировки <input> внутри тега <form>, а также помогает удобно управлять группой полей.

<form action="#">
<h3>Registration form</h3>
<fieldset>
<div>
<label for="name_input">First name:</label>
<input id="name_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_input">Surname:</label>
<input id="surname_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<div>
<label for="email_input">Email:</label>
<input id="email_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_input">Password:</label>
<input id="password_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>

У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>.

name - задает общее имя для группы

disabled - делает группу недоступной для редактирования

form - если <fieldset> лежит вне тега <form> то этот атрибут позволит вам связать их.

<form action="" id="example_form">
<h3>Example form</h3>
<label>
<input type="text" placeholder="Some example input">
</label>
</form>
<fieldset form="example_form">
<div>
<label for="name_2_input">First name:</label>
<input id="name_2_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_2_input">Surname:</label>
<input id="surname_2_input" type="text" placeholder="Surname">
</div>
</fieldset>

Legend

<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>

Button

<button> - Парный тег, который предназначен для создания кнопки, имеет схожие атрибуты с тегом <input>. Может использовать как внутри <form> заменяя собой <input type="button">, так и просто как отдельный элемент на странице.

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
</fieldset>
</form>

Файлы с урока

P.S. Подпишись на мой youtube и telegram канал чтобы регулярно получать новый контент.

Вес селектора - так как у нас в CSS есть огромное количество способов обращения к элементу по селектору, а селектор мы придумываем сами, внутри браузер разделяет их по весу, и отдает приоритет тем стилям вес селектора которых 'тяжелее'.

Селекторы по весу:

1. inline стили (те которые мы пишем внутри атрибута style для тега)

2. #id (селектор id)

3. .class (селектор class и любых других атрибутов кроме id)

4. <tagName> (название тега)

Так как мы можем комбинировать селекторы то и их вес тоже будет складываться.

Пример #1

Пытаемся изменить цвет текста у которого уже написаны inline стили

#p1 {
color: red;
}

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

Аналогично будет происходить если мы будем пробовать обратится по классу, тегу или каким-то другим образом.

.p1 {
color: red;
}

[title="p1"] {
color: red;
}

Пример #2

Работаем с элементов #p2 у которого нет inline стилей.

Задам ему цвет через селектор id.

#p2 {
color: deeppink;
}

Пробуем изменить стили через селектор class

.p2 {
color: blueviolet;
}

и другие селекторы

[title="p2"] {
color: blueviolet;
}
p {
color: blueviolet;
}

Как видим цвет элемента не изменился, а остался таким как был задан в селекторе через id это происходит потому что id имеет больше вес чем остальные селекторы, а на текущем элементе нет никаких inline стилей которые могли бы изменять его цвет.

Пример #3

Что делать если наши селекторы одинаковые по весу?

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

.p3-first {
color: red;
}
.p3-second {
color: green;
}

Файлы с урока - ссылка

Мой youtube

Мой telegram канал