-
Notifications
You must be signed in to change notification settings - Fork 1
/
index (copy).html
executable file
·456 lines (452 loc) · 21.5 KB
/
index (copy).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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shower Presentation Engine</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="shower/themes/ribbon/styles/screen-16x10.css">
</head>
<body class="shower list">
<header class="caption">
<h1>Shower Presentation Engine</h1>
<p>Yours Truly, Famous Inc.</p>
</header>
<section class="slide" id="cover">
<h2>Shower Presentation Engine</h2>
<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
<img src="pictures/cover.jpg" alt="" class="cover">
<!--
To apply styles to the certain slides
set slide ID to get needed elements
-->
<style>
#cover h2 {
margin:30px 0 0;
color:#FFF;
text-align:center;
font-size:70px;
}
#cover p {
margin:10px 0 0;
text-align:center;
color:#FFF;
font-style:italic;
font-size:20px;
}
#cover p a {
color:#FFF;
}
.col-l, .col-r {
width: 49%;
display: inline-block;
vertical-align: top;
}
.table-pos {
color: green;
text-align: center;
}
.table-neg {
color: red;
text-align: center;
}
</style>
</section>
<section class="slide">
<h2>Валидация</h2>
<figure>
<blockquote>
<p>Подтверждение на основе представления объективных свидетельств того, что требования, предназначенные для конкретного использования или применения, выполнены.</p>
</blockquote>
<figcaption>
<cite>(ISO 9000:2005)</cite>, <a href="https://www.iso.org/obp/ui#iso:std:iso:9000:ed-3:v1:ru" target="_blank">Системы менеджмента качества. Основные положения и словарь</a>
</figcaption>
</figure>
</section>
<section class="slide">
<h2 class="shout">Constraint Validation API</h2>
<!-- <p>
https://dev.w3.org/html5/spec-preview/constraints.html#the-constraint-validation-api
http://caniuse.com/#search=Validation
</p> -->
</section>
<section class="slide">
<h2>Constraint Validation API methods</h2>
<ul>
<li>checkValidity()</li>
</section>
<!-- https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Forms/Data_form_validation#Constraint_validation_API_methods
Returns true if the element's value has no validity problems; false otherwise. If the element is invalid, this method also
causes an invalid event at the element.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them.
If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.-->
<section class="slide">
<h2>Constraint Validation API methods</h2>
<ul>
<li>checkValidity() → invalid event</li>
<li>setCustomValidity(message)</li>
</ul>
</section>
<!-- https://developer.mozilla.org/en-US/docs/Web/Events/invalid
The invalid event is fired when a submittable element has been checked and doesn't satisfy its constraints. The validity
of submittable elements is checked before submitting their owner form, or after the checkValidity() of the element or
its owner form is called. -->
<section class="slide">
<h2>Constraint Validation API methods</h2>
<ul>
<li>checkValidity() → invalid event</li>
<li>setCustomValidity(message) → return value</li>
</ul>
</section>
<!-- https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Forms/Data_form_validation#Constraint_validation_API_methods
https://www.w3.org/TR/html5/forms.html#the-cons Ровно 9 цифр.traint-validation-api
Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid,
and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than
those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.
If the argument is the empty string, the custom error is cleared.
https://dev.w3.org/html5/spec-preview/constraints.html#dom-cva-validationmessage
The validationMessage attribute must return the empty string if the element is not a candidate for constraint validation
or if it is one but it satisfies its constraints; otherwise, it must return a suitably localized message that the user
agent would show the user if this were the only form control with a validity constraint problem. If the user agent would
not actually show a textual message in such a situation (e.g. it would show a graphical cue instead), then the attribute
must return a suitably localized message that expresses (one or more of) the validity constraint(s) that the control does
not satisfy. If the element is a candidate for constraint validation and is suffering from a custom error, then the
custom validity error message should be present in the return value.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_API%27s_element.setCustomValidity()
The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted.
The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was
unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated
and resets the error message.
-->
<section class="slide">
<h2>Типы данных</h2>
<div class="col-l">
<strong>HTML 4</strong>
<ol>
<li>Текст</li>
<li>Логический</li>
<li>Файл</li>
<li>Выбор select или radio</li>
<!-- рассказать про атрибут spellchek -->
<!-- пробел воспринимается, как ввод -->
<!-- проверить, как ведут себя поля с visibility hidden -->
<!-- title выводится в облачке ошибки в CHrome -->
</ol>
</div>
<div class="col-l">
<strong>HTML 5 (WebForms 2.0)</strong>
<ol>
<li>Число</li>
<li>Семантический текст: email, телефон, url, пароль, дата.</li>
</ol>
</div>
</section>
<!--By choosing the most semantically appropriate value for the type attribute of the <input> element, e.g., choosing
the email type automatically creates a constraint that checks whether the value is a valid e-mail address.
By setting values on validation-related attributes, allowing basic constraints to be described in a simple way, without
the need for JavaScript.
https://developer.mozilla.org/ru/docs/Web/Guide/HTML/%D0%A4%D0%BE%D1%80%D0%BC%D1%8B_%D0%B2_HTML#The_input_element
В элементе <input> появились новые значения для атрибута type. (Просмотрите справочник <input> для получения полного
списка атрибутов, значений и их использования для этого элемента.)
search: Элемент представляет изsuffering себя поле для поиска. Переходы строк автоматически удаляются из значения value.
tel: Элемент представляет из себя поле для редактирования номера телефона. Переходы строк автоматически удаляются из
значения value. Вы можете использовать атрибуты, такие как: pattern и maxlength, чтобы запретить ввод неподходящих символов.
url: Элемент представляет из себя поле для редактирования URL. Переходы строк и пробелы автоматически удаляются из значения value.
email: Элемент представляет из себя поле для ввода одного адреса электронной почты. Переходы строк автоматически удаляются
из значения value. Может быть предоставлен недействительный адрес эл. почты, но поле ввода запретит отправку формы,
если эл. адрес почты не будет соответствовать нормам ABNF.
-->
<section class="slide">
<h2>Условия</h2>
<ol>
<li>pattern</li>
<li>min/max</li>
<li>minlength/maxlength</li>
<li>step</li>
<li>required</li>
</ol>
</section>
<!-- https://developer.mozilla.sufferingorg/ru/docs/Web/Guide/HTML/%D0%A4%D0%BE%D1%80%D0%BC%D1%8B_%D0%B2_HTML#HTML_Syntax_for_Constraint_Validation
The following items in HTML5 syntax can be used to specify constraints on form data.
The required attribute on the <input>, <select>, and <textarea> elements indicates that a value must be supplied.
(On the <input> element, required applies only in conjunction with certain values of the type attribute.)
The pattern attribute on the <input> element constrains the value to match a specific regular expression.
The min and max attributes of the <input> element constrain the minimum and maximum values that can be entered.
The step attribute of the <input> element (when used in combination with the min and max attributes) constrains the
granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.
The maxlength attribute of the <input> and <textarea> elements constrains the maximum number of characters
(in Unicode code points) that the user can enter.
The values url and email for the type constrain the value to being a valid URL or e-mail address, respectively.
In addition, you can prevent constraint validation by specifying the novalidate attribute on the <form>, or the
formnovalidate attribute on the <button> element and on the <input> element (when type is submit or image).
These attributes indicate that the form is not to be validated when it is submitted. -->
<section class="slide">
<h2>Условия</h2>
<table>
<tr>
<th scope="col">.</th>
<th>pattern</th>
<th>min</th>
<th>max</th>
<th>minlength</th>
<th>maxlength</th>
<th>step</th>
<th>required</th>
</tr>
<tr>
<th scope="row">text</th>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>Ровно 9 цифр.
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">file</th>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">password</th>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">checkbox</th>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>Ровно 9 цифр.
</tr>
<tr>
<th scope="row">radio</th>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row"><select></th>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row"><textarea></th>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>Ровно 9 цифр.
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
</table>
</section>
<!-- Нельзя проверить дату на пороговые значения можно черех мин макс-->
<!-- Тип файла accept -->
<!-- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Semantic_input_types
The following attributes are used to describe basic constraints:
In HTML5, basic constraints are declared in two ways: -->
<section class="slide">
<h2>Условия</h2>
<table>
<tr>
<th scope="col">.</th>
<th>pattern</th>
<th>min</th>
<th>max</th>
<th>minlength</th>
<th>maxlength</th>
<th>step</th>Ровно 9 цифр.
<th>required</th>
</tr>
<tr>
<th scope="row">email</th>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">tel</th>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">url</th>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">search</th>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">number</th>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
</tr>
<tr>
<th scope="row">date, datetime,<br> datetime-local,<br> month, week, time</th>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
<td class="table-neg">✗</td>
<td class="table-neg">✗</td>
<td class="table-pos">✓</td>
<td class="table-pos">✓</td>
</tr>
</table>
</section>
<!-- Нельзя проверить дату на пороговые значения можно черех мин макс-->
<!-- Тип файла accept -->
<!-- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Semantic_input_types
The following attributes are used to describe basic constraints:
In HTML5, basic constraints are declared in two ways: -->
<!-- Нельзя проверить дату на пороговые значения можно черех мин макс-->
<!-- Тип файла accept -->
<!-- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Semantic_input_types
The following attributes are used to describe basic constraints:
In HTML5, basic constraints are declared in two ways: -->
<section class="slide">
<h2>Псевдоклассы</h2>
<div class="col-l">
<strong>Валидация</strong>
<ol>
<li>:valid</li>
<li>:invalid</li>
<li>:in-range</li>
<li>:out-of-range</li>
</ol>
<strong>Условия</strong>
<ol>
<li>:not</li>
<li>:focus</li>
</ol>
</div>
<div class="col-l">
<strong>Состояние</strong>
<ol class="double">
<li>:required</li>
<li>:optional</li>
<li>:default</li>
<li>:disabled</li>
<li>:enabled</li>
<li>:read-only</li>
<li>:read-write</li>
<li>:checked</li>
<li>:indeterminate</li>
</ol>
</div>
</section>
<!-- This simple form uses the novalidate attribute to turn off the browser's automatic validation; this lets our script
take control over validation. However, this doesn't disable support for the constraint validation API nor the application
of the CSS pseudo-class :valid, :invalid, :in-range and :out-of-range classes. That means that even though the browser
doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the
form accordingly.
The aria-live attribute makes sure that our custom error message will be presented to everyone, including those using
assistive technologies such as screen readers.
https://webref.ru/css/type/pseudoclass -->
<section class="slide">
<h2>Code samples</h2>
<pre>
<code><!DOCTYPE html></code>
<code class="mark"><html lang="en"></code>
<code><mark><head></mark> <span class="comment"><!--Comment--></span></code>
<code> <title>Shower</title></code>
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
<code> <link rel="stylesheet" href="screen.css"></code>
<code><mark></head></mark></code>
</pre>
</section>
<section class="slide" id="picture">
<h2>Pictures</h2>
<img src="pictures/picture.jpg" alt="" class="cover">
<style>
#picture h2 {
color:#FFF;
}
</style>
</section>
<section class="slide">
<h2 class="shout shrink">You can even shout this way</h2>
</section>
<section class="slide" id="see-more">
<h2 class="shout">
<img src="pictures/logo.svg" alt="Shower logo">
<a href="https://github.com/shower/shower">See more on GitHub</a>
</h2>
<style>
#see-more h2 {
font-size:100px
}
#see-more img {
width:0.72em;
height:0.72em;
}
</style>
</section>
<p class="badge">
<a href="https://github.com/shower/shower">Fork me on GitHub</a>
</p>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"></div>
<script src="shower/shower.min.js"></script>
<!-- Copyright © 2015 Yours Truly, Famous Inc. -->
<!-- Photos by John Carey, fiftyfootshadows.net -->
</body>
</html>