Frontend + Верстка

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

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

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

Как правило, большинство шаблонов это 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 отлично вписываются в процесс передачи дизайна в разработку.

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

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 канал

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

Шарнир работает мягко: чтобы открыть крышку даже одной рукой, не нужно придерживать корпус. Чтобы показать коллеге или клиенту презентацию, достаточно раскрыть экран на 180°. Это удобно и для работы лежа, и для подставок, которые требуют определенного угла обзора.

Также отметим 9 портов: USB-A, USB-C, HDMI, слот для карты памяти — можно забыть о переходниках.

В TECNO MEGABOOK K15S предустановлен Windows 11. Ноутбук готов к работе сразу после включения. Никаких лишних установок и обновлений. Все настроено и оптимизировано для вашей многозадачности.

Экран: яркая картинка и комфорт ночью

Экран — 15,6 дюйма, IPS-матрица с разрешением Full HD. Углы обзора отличные: изображение остается четким, даже если смотреть сбоку, цвета не искажаются. Есть антибликовое покрытие. Тестировали ноутбук при разном освещении: можно спокойно работать у окна. Когда солнце бьет прямо в экран, текст по-прежнему остается читаемым, картинки не искажаются. Это редкость в бюджетных моделях.

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

Стеклокерамический крупный тачпад — 15 см. Он не залипает, не промахивается, срабатывает с первого касания. Не возникает дискомфорта, даже если несколько часов редактировать документы без мышки. После перехода с других устройств немного непривычно, что тачпад работает в двух направлениях: нижняя часть отзывается нажатием, верхняя — касанием.

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

Производительность: рендерим видео, открываем вкладки

Ноутбук работает на AMD Ryzen 7 5825U (опционально можно выбрать версию техники Intel Core i5-13420H). Восьмиядерный AMD с поддержкой 16 потоков подходит для ресурсоемких операций вроде рендеринга или работы с большими массивами данных. Встроенная графика Radeon справляется с редактированием видео в Full HD или играми.

Во время монтажа 30-минутного ролика в DaVinci Resolve и параллельной работе в Photoshop с несколькими большими PSD-файлами система сохраняла стабильность. Не было ни зависаний, ни заметного падения производительности. Ноутбук уверенно держит в фоне 10 приложений одновременно. Если запущены браузер с 20 вкладками, видеозвонок в Telegram, Excel с объемной таблицей и софт для монтажа, система не тормозит и не перегревается. Переход между окнами остается плавным, ничего не «проседает», даже при одновременном скачивании файлов и редактировании видео.

Базовая комплектация включает 16 ГБ оперативной памяти в двух слотах. При необходимости можно легко увеличить этот показатель до 32 ГБ, заменив стандартные модули на более емкие. Помимо установленного SSD на 1 ТБ предусмотрен дополнительный слот, поддерживающий диски объемом до 2 ТБ.

Чтобы во время нагрузки системы охлаждения не выходили из строя, в ноутбук встроен эффективный вентилятор, способный рассеивать до 35 Вт тепла. Устройство не греется, его спокойно можно держать на коленях. Это решение дополнено тремя режимами работы, которые переключаются простой комбинацией клавиш Ctrl+Alt+T. Тихий режим идеален для работы ночью или в общественных местах, сбалансированный подходит для повседневных задач. Производительный, на котором запускали рендеринг видео и игры, практически не шумит.

Автономность: 15 часов без подзарядки

Протестили автономность MEGABOOK K15S в условиях, знакомых каждому деловому путешественнику. Утром перед вылетом зарядили ноутбук до 100% и взяли его в рейс Москва — Калининград. В зале ожидания провели созвон, потом три часа смотрели сериал и в дороге до отеля редактировали документы. К моменту приезда оставалось 40% заряда: хватило бы еще на пару часов продуктивной работы.

MEGABOOK K15S может автономно работать до 15 часов и позволяет не оглядываться на индикатор заряда. Заявленное время достигается при типичном офисном использовании: одновременная работа с документами в Word и Excel, ведение переписки, видеоконференции, веб-серфинг.

Если все же понадобится, за  час восполняется до 70% батареи. Компактный адаптер мощностью 65 Вт на базе нитрида галлия поместился даже в карман пиджака. Один блок питания заряжает и ноутбук, и смартфон, и наушники. Экономия места: не нужно никаких дополнительных проводов.

Звук, который реально слышно

В TECNO MEGABOOK K15S установлены два мощных динамика по 2.5 Вт. Звук с глубокими низами, без пластикового дребезжания, объемный. Благодаря DTS можно смотреть видео даже в шумном помещении. В тестах специально включали сцены с шагами и выстрелами: локализация настолько точная, что в наушниках нет необходимости.

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

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

Для тех, кто предпочитает гарнитуру, идеально подойдут беспроводные наушники TECNO FreeHear 1 из экосистемы бренда. Когда не хотелось делиться разговорами с окружающими, подключали их. Чистый звук с акцентом на средние частоты, 11-мм драйверы, которые выдают неожиданную детализацию. Музыку слушать приятно: и фоновый плейлист на телефоне, и вечерний сериал на ноутбуке. Автономно работают наушники 6 часов, с кейсом — до 30 часов. 

Bluetooth 5.4 обеспечивает стабильное соединение на расстоянии до 10 метров. Удобная C-образная форма разработана специально для длительного ношения — после восьмичасового рабочего дня в ушах не возникает дискомфорта. Наушники поддерживают одновременное подключение к ноутбуку и смартфону. Переключение между устройствами происходит быстро и без заминок.

Через фирменное приложение Welife можно выбрать один из четырех эквалайзеров и отследить местоположение гарнитуры в случае утери. А еще кастомизировать виджет для управления наушниками. Функция настройки персонализированного дизайна доступна для устройств на Android и позволяет гибко изменить внешний вид окна подключения: вплоть до установки фоновой картинки или собственного фото.

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

Бесшовная синхронизация со смартфоном

Благодаря функции OneLeap ноутбук синхронизируется со смартфоном TECNO. Подключение происходит за пару секунд: достаточно один раз подтвердить сопряжение. После этого открывается доступ к бесшовному переключению между устройствами — объединенному буферу обмена, дублированию экранов и передаче файлов без кабелей и пересылок в мессенджерах.

Функция выручила, когда нужно было открыть приложение, у которого нет веб-версии. Удобно работает и буфер обмена: скопировал текст на одном устройстве — вставил на другом. Например, код, полученный в сообщении на телефоне, вводится в браузере на ноутбуке. Экономит минуты, а иногда и нервы. А когда в дороге пропал Wi-Fi, ноутбук сам подключился к мобильному интернету через смартфон.

TECNO CAMON 40 и сам по себе — мощный рабочий инструмент.  Смартфон выделяется камерой высокого качества 50 Мп, ярким AMOLED-экраном 120 Гц и множеством функций, которые упрощают процесс мобильной съёмки и использование искусственного интеллекта TECNO AI.

Телефон работает на HIOS 15.0.1 на базе Android 15.В фирменную оболочку встроен искусственный интеллект:

• Голосовой помощник Ella. Отвечает на вопросы, помогает с задачами и управлением устройством.

• Решение задач. Наводите камеру на задачу, ИИ решает ее.

• AI Редактор фотографий. Интеллектуальная обработка в одно касание.

• Быстрый поиск. Находит адрес на экране и запускает навигацию, распознает объекты и события, автоматически добавляет их в календарь.

Технические характеристики

• Процессор и память. 8 ядер, 16 потоков, Кэш L3 16 МБ, частота до 4.5 ГГц Графический процессор AMD Radeon™ graphics SSD 512 ГБ или 1 ТБ, М.2, 2280, PCle 3.0 Nvme DDR4 16 ГБ, 3200 МГц.

• Дисплей. 15.6", TFT, Full HD (1920×1080), 16:9, 280нит, 45% NTSC, 16.7 млн цветов, 60 Гц, 141 ррі.

• Веб-камера. 1 Мп, шторка приватности.

• Порты. 9 портов: 1*TF Card (microSD), 1*HDMI 1.4, 1*USB-A 3.1,

  1*USB-A 3.2, 1*3.5mm аудиовход, *Ethernet RJ45 до 1 Гбит, 2*Туре-С (Full Function), 1*слот для замка Kensington.

• Другое. Сканер отпечатка пальца в кнопке питания. Клавиатура с подсветкой (4 уровня яркости). Тачпад с поддержкой одновременно 4 касаний.

• Батарея. 70 Вт∙ч (6150 мА∙ч), Li-Pol, 11.55 B 65 Вт Type-C GaN, 20 В, 3.25 А, кабель 1.8 м (Туре-С-Type-C).

• Габариты. 17.3 мм (высота), 359.5 мм (ширина), 236 мм (глубина).

• Вес. 1,7 кг.

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

КУПИТЬ НОУТБУК TECNO