-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdocs.html
214 lines (210 loc) · 13.3 KB
/
docs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kanban Board Documentation</title>
<link rel="stylesheet" href="docs-style.css">
</head>
<body>
<div class="left-column">
<div class="menu">
<h1 class="titular block">Оглавление</h1>
<div>
<ul>
<li class="block menu-scroll">Главная</li>
<li class="block menu-scroll">Что такое "канбан"?</li>
<li class="block menu-scroll">Что такое доска задач на основе "канбан"?</li>
<li class="block menu-scroll">Для чего нужно это приложение?</li>
<li class="menu-scroll">
Использование
<ul>
<li class="block ">Как зарегестироваться в приложении?</li>
<li class="block">Как войти в свой аккаунт?</li>
<li class="block">Как добавить новую карточку задач?</li>
</ul>
</li>
<li class="menu-scroll">
Использование продолжение
<ul>
<li class="block">Как удалить карточку задач?</li>
<li class="block">Как добавить подзадачу?</li>
<li class="block">Как удалить подзадачу?</li>
</ul>
</li>
<li class="block menu-scroll">Заключение</li>
</ul>
</div>
</div>
</div>
<div class="right-column">
<div class="page-1 scroll-page block">
<h1 class="titular">Добро пожаловать на страницу информации о Канбан Доске!</h1>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Simple-kanban-board-.jpg/800px-Simple-kanban-board-.jpg"
width="70%"
height="70%"
alt="kanban"
/>
<p>
Данная страница поможает вам ознакмиться с возможностями приложения,
опишет все его преимущества и особенности, а так же научит вас использовать его
легко и просто!
</p>
<button role="button" class="scroll-button button">Продолжить</button>
</div>
<div class="page-3 scroll-page block">
<h1 class="titular">Что такое "канбан"?</h1>
<p>
Канбан (яп. カンバン камбан) — система организации производства и снабжения,
позволяющая реализовать принцип «точно в срок». Слово «канбан» по-японски означает «рекламный щит, вывеска» (яп. 看板),
в финансовой среде устоялся вариант с ошибочной транскрипцией латинской записи японского слова (kanban).
</p>
<p>
Канбан основан на четырёх основных принципах:
</p>
<div class="list">
<ul>
<li>
<h2>Опора на существующие методы разработки</h2>
Канбан начинается с существующих методов разработки и стимулирует в них дополнительные изменения.
</li>
<li>
<h2>Предварительная договорённость о проведении важных изменений</h2>
Команда разработчиков должна учитывать, что постоянные изменения — это способ улучшить существующий процесс разработки,
однако проведение глобальных перемен имеет большой риск. Канбан поощряет небольшие и эволюционные изменения.
</li>
<li>
<h2>Уважение к существующему порядку, ролям и обязанностям</h2>
</li>
<li>
<h2>Поощрение инициативы</h2>
Приветствуются проявления инициативы каждого разработчика.
</li>
</ul>
</div>
<button role="button" class="scroll-button button">Продолжить</button>
</div>
<div class="page-4 scroll-page block">
<h1 class="titular">Что такое доска задач на основе "канбан"?</h1>
<p>
Канбан доска представляет собой доску задач, на основе принципов канбан.
</p>
<p>
Канбан-доска является одним из инструментов, который может использоваться при внедрении метода управления разработкой «Канбан».
Такие доски можно рассматривать как вариацию на тему традиционных канбан-карточек. Вместо сигнальных карточек,
которые обычно обозначают потребность или пропускную способность, вместе с доской используются магниты,
пластиковые фишки, цветные шайбы или стикеры для представления рабочих элементов и процессов. Каждый из этих объектов
представляет собой этап производственного процесса и движется по доске, по мере прогресса. Такое движение соответствует движению
процесса производства. Доска, как правило, разделена на три логические секции: «ожидание», «работа в процессе» и «завершенная работа».
Сотрудники перемещают заметки в ту секцию доски, которая соответствует статусу задачи.
</p>
<p>
Методология канбан может быть использована для организации многих областей жизни. Существует множество вариаций канбан-доски.
Самые простые доски состоят из трех колонок: «сделать» (англ. to-do), «в процессе» (in progress), «сделано»(done).
</p>
<h2>Наиболее популярные канбан-доски:</h2>
<ul class="list">
<li>Канбан-доска для команды по созданию программного обеспечения.</li>
<li>Канбан для маркетинговых команд</li>
<li>Канбан для HR команд</li>
<li>Управление личными задачами: так называемый «Личный Канбан» был описан и стал популярен благодаря Джиму Бенсону.</li>
</ul>
<button role="button" class="scroll-button button">Продолжить</button>
</div>
<div class="page-5 scroll-page block">
<h1 class="titular">Для чего нужно это приложение?</h1>
<p>
Данное приложение представляет собой простую канбан доску, состоящую из трех классических колонок:
todo, in progress, done.
</p>
<p>
С помощью этого приложение вы можете удобно, быстро и просто организовывать свою работу,
планировать какие-то дела, отслеживать прогресс выполняемых задач и наглядно
следить за развитием ваших проектов.
</p>
<p>
Приложение позволяет создавать карточки любой из трех категорий, давать им название, описание и определять для них
подзадачи, а так же отмечать выполненные и невыполненные подзадачи.
</p>
<p>
Основной идеей является простота использования, вам не нужны никакие особенные навыки для того, чтобы
начать пользоваться канбан доской!
Но если вы чувствуете себя неуверенно, то на следующих страницах вы сможете найти подробное
описание всех основых функций данного приложения!
</p>
<button role="button" class="scroll-button button">Продолжить</button>
</div>
<div class="page-6 scroll-page block">
<h1 class="titular">Использование</h1>
<h2>Как зарегестироваться в приложении?</h2>
<p>
Для того, чтобы зарегестрироваться в приложении, необходимо нажать на кнопку "Register" в правом верхнем углу
приложения и ввести все необходимые данные.
После, нажать на кнопку "Register" и вы автоматически будете авторизированы!
</p>
<h2>Как войти в свой аккаунт?</h2>
<p>
Для того, чтобы войти в свой аккаунт, необходимо нажать на кнопку "Login" в правом верхнем углу
приложения и ввести логин и пароль.
</p>
<h2>Как добавить новую карточку задач?</h2>
<p>
Добавление новой карточки присходит посредством нажатия иконки "плюс" рядом с необходимым столбцом.
В модальном окне введите название и описание карточки, после нажмите кнопку "create".
</p>
<button role="button" class="scroll-button button">Продолжить</button>
</div>
<div class="page-7 scroll-page block">
<h2>Как удалить карточку задач?</h2>
<p>
Удаление карточки проихсодит при помощи нажатии иконки "крест" рядом с выбраной карточкой
</p>
<h2>Как добавить подзадачу?</h2>
<p>
Добавление новой задачи происходит путем ввода названия задачи в поле ввода внутри карточки,
после ввода необходимо нажать клавишу Enter.
</p>
<h2>Как удалить подзадачу?</h2>
<p>
Удалить задачу можно нажатием иконки "крест" рядом с выбраной задачей
</p>
<button role="button" class="scroll-button button button">Продолжить</button>
</div>
<div class="page-8 scroll-page block">
<h1 class="titular">Заключение</h1>
<p>
На этом документация заканчивается, теперь вы обладаете всеми знаниями по канбан доске и готовы начать ей пользоваться!
Прошу нажать на <a href="/">ссылку!</a>
</p>
<button role="button" class="scroll-button button button">В начало</button>
</div>
</div>
<script>
function scrollIt(element) {
window.scrollTo({
'behavior': 'smooth',
'left': 0,
'top': element.offsetTop -10
});
}
const buttons = document.body.querySelectorAll('.scroll-button');
const menu = document.body.querySelectorAll('.menu-scroll');
const elements = document.body.querySelectorAll('.scroll-page');
buttons.forEach((el, index) => {
el.addEventListener('click', () => {
if(index === (buttons.length-1)) {
scrollIt(elements[0]);
return;
}
scrollIt(elements[index+1]);
});
});
menu.forEach((el, index) => {
el.addEventListener('click', () => {
scrollIt(elements[index]);
});
});
setTimeout(() => scrollTo(0, 0), 5);
</script>
</body>
</html>