View
558
Download
2
Category
Preview:
Citation preview
Контроль качества версткиили как начать делать MakeupТимофей Чаптыков
tim.chaptykov@gmail.com @chaptykov
Makeup
Инструмент для быстрого и комфортного регрессионого
тестирования вёрстки, основанной на абсолютно независимых
блоках.
3
Боль1
4
Как измерить качество работы?
6
Критерии качества вёрстки
— Соответствие макету;
— кроссбраузерность.
7
8
9
Реализация
10
<!-- Кладем картинку с макетом -->
<img src="index.png" id="psd">
/* Позиционируем поверх сайта */
#psd { position: absolute; top: 0; left: 50%; margin: 0 0 0 -640px; opacity: .5; pointer-events: none; }
/* Позиционируем поверх сайта */
#psd { position: absolute; top: 0; left: 50%; margin: 0 0 0 -640px; opacity: .5; pointer-events: none; /* вёрстка остается кликабельной */ }
/* Можем даже инвертировать */
#psd { position: absolute; top: 0; left: 50%; margin: 0 0 0 -640px; opacity: .5; pointer-events: none; -webkit-filter: invert(100%); }
/* И прятать по наведению */
#psd { position: absolute; top: 0; left: 50%; margin: 0 0 0 -640px; opacity: .5; pointer-events: none; -webkit-filter: invert(100%); }body:hover #psd { opacity: 0; }
Так работают
— JS-плагины;
— расширения для браузера.
16
И всё бы хорошо, но…
17
АНБ
Страница → Блок
24
26
Страница → Блок × Состояние
27
Держим в голове
132блока
5+
состояний660=
кейсов
28
«Быстрый» способ
29
— ⌘ + Shift + Control + 4, скриншот области в буфер;
— ⌘ + Tab, идем в Фотошоп;
— ⌘ + v, вставляем;
— 5, прозрачность 50%;
— v, двигаем;
— Shift + Arr или Arr × n раз, пока не совместим с макетом;
— Delete, удаляем слой.
Правим CSS, повторяем, пока макет не станет идеальным.
30
Makeup2
31
Makeup решает проблему на раз-два-три
32
133
234
335
436
[ ]37
– +38
39
Теперь вы умеете пользоваться Мейкапом
41
Интеграция3
42
Интеграция → Getting started
44
Демо
var s=document.createElement('script');s.src ="//2gi
s.github.io/makeup/autoload/script.js";document.body
.appendChild(s)
45
1. Сохраняем изображения
47
<!-- 2. Новая страница со всеми ресурсами -->
<!DOCTYPE html><html lang="en"><head> <title>Makeup</title> <link rel="stylesheet" href="style.css"> <!-- Стили проекта --></head><body> <button class="button">My button</button> <!-- Разметка --></body></html>
<!-- 3. Добавляем Мейкап -->
<!DOCTYPE html><html lang="en"><head> <title>Makeup</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="makeup.css"> <!-- Стили Мейкапа --></head><body> <button class="button">My button</button> <script src="makeup.js"></script> <!-- Привет, Мейкап --></body></html>
<!-- 4. Прячем разметку -->
<!DOCTYPE html><html lang="en"><head> <title>Makeup</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="makeup.css"> <!-- Стили Мейкапа --></head><body> <div style="display: none;"> <button class="button">My button</button> </div> <script src="makeup.js"></script> <!-- Привет, Мейкап --></body></html>
<!DOCTYPE html><html lang="en"><head> <title>Makeup</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="makeup.css"></head><body> <div style="display: none;"> <button class="button">My button</button> </div> <script src="makeup.js"></script> <script> // 5. Инициализируем Мейкап </script></body></html>
// 5. Инициализируем Мейкап
new Makeup({
// Функция, которая создает блок в Мейкапе renderModule: function(module) { var container = this._params.selectors.containerMarkup, html = $('.' + module.modulename)[0].outerHTML;
$(container).html(html); },
// Конфиг data: { name: 'Blocks', items: [{ name: 'button', image: 'button.png' }] }});
Готово!
55
56
Интеграция →Формат данных
57
Добавляем на любой уровень
{ // Имя "name": "Button", ← Единственный обязательный параметр "label": "button",
// Текст для панели статуса "hint": "Кнопка для формы поиска",
// Любые данные "data": { "text": "найти" },
// Картинка из PSD "image": "psd_button.png"}
Мне придется нарезать картинки «правильно»?
59
60
61
// Поправка стилей, которую можно добавить для блока или группы блоков
"styles": { // CSS-стили для обертки "wrapper": "font-family: Arial;",
// CSS-стили для контейнера с изображением "image": "position: relative; top: -6px;",
// CSS-стили для контейнера с версткой "markup": "height: 200px;"}
Нужен JavaScript?
63
Сниппет для любого уровня
{ // Функция, которая будет вызвана после рендера "snippet": function() { block.baron(); }}
Право на ошибку
65
Почти в любом виде
"documentation": [ { "link": "http://mysite.com/docs/article1/", "label": "ТЗ на разработку интернет-магазина", "modifier": "_important" }],
"documentation": [ "http://mysite.com/docs/article1/", "http://mysite.com/docs/article2/"],
"documentation": "http://mysite.com/docs/article/"
Мейкап постарается вас понять
67
Использование4
68
Использование → Кейсы
69
1. Разработка
— Изолированная среда для модуля;
— исходный макет для сравнения;
— документация.
71
2. Кодревью
— Увидеть перечень изменений;
— сверить с требованиями и дизайном;
— проверить работоспособность всех состояний.
72
3. Рефакторинг
— Быстро увидеть весь блок и все его состояния;
— после внесения изменений проверить, что ничего не сломано.
73
Работает на мобильных устройствах
75
Использование → Подготовка типов
76
Какие состояния нас интересуют
— Состояния, описанные в дизайне;
— состояния, которые вызвали баг в прошлом;
— экстримальные состояния.
77
Заключение5
80
Всё ведь чертовски просто
81
Makeup
JSON UI+ ♥=
82
Основа рабочего процесса разработки интерфесов
83
Как измерить качество работы верстальщика?
84
Инструмент
85
Человек
86
Используйте инструменты, принимайте решение сами
88
Ссылки
— Сайт
— Демо
— Репозиторий
89
Тимофей Чаптыков
tim.chaptykov@gmail.com@chaptykov
90
Смайлик
.makeup--smiley-true .makeup__container-in { font: 100px/1 'Comic Sans'; color: red; }
Recommended