-
Notifications
You must be signed in to change notification settings - Fork 0
/
lesson4.html
224 lines (200 loc) · 10.6 KB
/
lesson4.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
<!DOCTYPE html>
<html>
<head>
<title>lesson4. JSON, Forms, Plugins</title>
<meta charset="utf-8">
<meta name="viewport" content="width=792, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="shower/themes/ribbon/styles/screen.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<!--
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;
}
#Picture h2 {
color:#FFF;
}
#SeeMore h2 {
font-size:100px
}
#SeeMore img {
width:0.72em;
height:0.72em;
}
/* Open lesson styles */
.slide h2, .slide p, .slide li, .slide b, .slide i {color:#5f1c82}
</style>
</head>
<body class="list">
<header class="caption">
<h1>JS .introduction</h1>
<p>для Epic Skills</p>
</header>
<section class="slide cover" id="Cover"><div>
<h2 style="color:#5f1c82; text-shadow:1px 1px 15px #fff; font-size: 3.5em"><b>JSON, FORMS, PLUGINS</b></h2>
<p style="color:#5f1c82; text-shadow:1px 1px 15px #fff; font-size: 1.4em; font-weight: bold; padding: 120px 10px 0 0">Скрытые возможности</p>
<img src="pictures/lesson4/intro.jpg" alt="">
</div></section>
<section class="slide cover"><div>
<h2>JSON! Вот что тебе нужно.</h2>
<img src="pictures/lesson4/JSON.jpg" alt="">
</div></section>
<section class="slide shout"><div>
<h2>Если JSON <p class="next">- значит ПАРА</p></h2>
</div></section>
<section class="slide"><div>
<h2>мир JSON, вопрос : ответ</h2>
<code>var object = </code>
<code class="next">{</code>
</br>
<code class="next">"кто?"</code><code class="next"> : </code><code class="next"> "прекрасная девушка" </code><code class="next">,</code>
</br>
<code class="next">"что делает?"</code><code class="next"> : </code><code class="next"> "помогает найти выход" </code><code class="next">,</code>
</br>
<code class="next">"кому?"</code><code class="next"> : </code><code class="next"> "актеру" </code><code class="next">,</code>
</br>
<code class="next">"откуда?"</code><code class="next"> : </code><code class="next"> "из глупой аферы" </code>
</br>
<code class="next">}</code>
</div></section>
<section class="slide cover"><div>
<h2 style="position:absolute; top:40px">Какие вопросы могу я задавать?</h2>
<b style="position:absolute; top:190px; left:170px; font-size: 1.2em" class="next">Только строки: </br><i>"твой вопрос?"</i></b>
<img src="pictures/lesson4/question.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#ca90de; position:absolute; top:140px">Какие ответы я получу?</h2>
<b style="color:#dbcddd; position:absolute; top:240px; font-size: 1.6em" class="next">Какие пожелаешь!</b>
<img src="pictures/lesson4/answer.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#ca90de; position:absolute; top:50px">Любые ответы, говоришь!</h2>
<img src="pictures/lesson4/wonder_JSON.jpg">
</div></section>
<section class="slide"><div>
<h2>ответы:</h2>
<code>var object = </code>
<code class="next">{</code>
</br>
<code class="next">"кто?"</code><code class="next"> : </code><code class="next"> "прекрасная девушка" </code><code class="next">,</code>
</br>
<code class="next">"как ее найти?"</code><code class="next"> : </code><code class="next"> 79052551001 </code><code class="next">,</code>
</br>
<code class="next">"что она делает?"</code><code class="next"> : </code><code class="next"> ["помогает найти выход", "вкусно готовит", "и многое др."] </code>
</br>
<code class="next">}</code>
</div></section>
<section class="slide"><div>
<h2>ответы:</h2>
<code>var object = </code>
<code class="next">{</code>
</br>
<code class="next">"кому она делает?"</code><code class="next"> : </code>
</br>
<code class="next"> function () { return "своему мужчине"; } </code><code class="next">,</code>
</br>
<code class="next">"откуда она?"</code><code class="next"> :</code>
</br>
<code class="next">
{
</br>
<code>"происхождение" : "благородное",</code>
<code>"место рождения" : "неизвестно",</code>
<code>"национальность" : "космополит",</code>
</br>
} </code>
</div></section>
<section class="slide cover"><div>
<h2 style="color:#b23fd1; position:absolute; top:20px; right: 25px" class="next">Докажи мне!</h2>
<b style="color:#b23fd1; position:absolute; top:20px; left:0; font-size: 1.6em" class="next">А ты никому не расскажешь?</b>
<img src="pictures/lesson4/wanna_try.jpg">
</div></section>
<section class="slide shout"><div>
<h2>Интерфейс</h2>
</div></section>
<section class="slide shout"><div>
<h2>Что такое интерфейс?</h2>
</div></section>
<section class="slide"><div>
<ol>
<li class="next">Приложение хранится на облаке.</li>
<li class="next">Приложение прилетает в момент вызова его пользователем.</li>
<li class="next">Пользователь может его рассматривать, передвигаться с одной страницы на другую.</li>
<b class="next">! Наступает момент когда пользователь отказывается продолжать безмолствовать !</b>
<li class="next">Пользователь начинает общаться с приложением.</li>
<li class="next">Стоп. Как же это?</li>
</ol>
</div></section>
<section class="slide cover"><div>
<h2 style="color:#b23fd1; position:absolute; top:40px; left: 245px">Поговорим о формах</h2>
<img src="pictures/lesson4/form.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#f4d9ff; position:absolute; top:10px; left: 45px">Форма - способ сделать сказанное услышанным!</h2>
<img src="pictures/lesson4/forms_meaning.jpg">
</div></section>
<section class="slide"><div>
<h2>Песочница:</h2>
<ul>
<li class="next">input <input id="something_new" style="position:absolute; left:240px; top:205px" placeholder="Ведите значение.."/></li>
<li class="next">textarea <textarea id="letter" style="position:absolute; left:240px; top:255px" cols="50" rows="2">A beautiful woman helps an inept scam artist get his game together.</textarea></li>
<li class="next">select <select style="position:absolute; left:240px; top:308px"><option>Andre</option><option>Angel</option><option>Frank</option><option>Pedro</option></select></li>
<li class="next">option</li>
<li class="next">label <label style="position:absolute; left:290px; top:392px; cursor:pointer" for="something_new">Уйду на первый input при клике по себе!</label><label style="position:absolute; right:100px; top:392px; cursor:pointer" for="letter">А я на форму!</label></li>
<li class="next">и др.</li>
</ul>
</div></section>
<section class="slide cover"><div>
<h2>Что ты знаешь о local storage?</h2>
<img src="pictures/lesson4/localStorage.jpg">
</div></section>
<section class="slide shout"><div>
<h2>Место, о котором вы мечтали!</h2>
</div></section>
<section class="slide"><div>
<h2>local storage:</h2>
<ul>
<li>объект <code>localStorage</code> - открывает доступ!</li>
</br>
<li class="next">добавляем: <code>localStorage.setItem(name, value);</code></li>
<li class="next">читаем: <code>localStorage.getItem(name);</code></li>
<li class="next">удаляем: <code>localStorage.removeItem(name);</code></li>
</ul>
</div></section>
<section class="slide cover"><div>
<h2 style="position: absolute; top:120px; left:75px">local storage -</br> теперь я знаю!</h2>
<img src="pictures/lesson4/iknow.jpg">
</div></section>
<section class="slide shout"><div>
<h2>Best practice is</h2>
</div></section>
<section class="slide cover"><div>
<h2 style="position: absolute; bottom:0px; left:450px"><a href="http://web-standards.ru/books/">do a little every day!</a></h2>
<img src="pictures/lesson4/everyday.jpg">
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="shower/shower.min.js"></script>
<!-- Copyright © 2013 Yours Truly, Famous Inc. -->
</body>
</html>