-
Notifications
You must be signed in to change notification settings - Fork 0
/
lesson3.html
132 lines (120 loc) · 5.33 KB
/
lesson3.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>lesson2. vanilla JS</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;
}
</style>
</head>
<body class="list">
<header class="caption">
<h1>Ajax</h1>
<p>для Epic Skills</p>
</header>
<section class="slide cover" id="Cover"><div>
<h2 style="color:#061fa7; text-shadow:1px 1px 15px #fff; font-size: 3.5em"><b>Ajax</b></h2>
<p style="color:#062194; text-shadow:1px 1px 15px #fff; font-size: 1.1em; font-weight: bold; padding-left: 69px">Путь асинхронного программиста.</p>
<img src="pictures/lesson3/beginnings.jpg" alt="">
<!-- photo by John Carey, fiftyfootshadows.net -->
</div></section>
<section class="slide cover"><div>
<h2 style="color:#fff">почему тебя называют асинхронный?</h2>
<img src="pictures/lesson3/ajax.jpg" alt=""/>
</div></section>
<section class="slide"><div>
<h2>Асинхронный - значит происходящий вне потока.</h2>
</div></section>
<section class="slide shout"><div>
<h2 style="color:#061a6d; text-shadow:1px 1px 15px #fff">Разве такое возможно?</h2>
</div></section>
<section class="slide shout"><div>
<h2 style="color:#061a6d; text-shadow:1px 1px 15px #fff">Да.</h2>
</div></section>
<section class="slide"><div>
<p>Преимущества:</p>
<ul>
<li class="next">cтраница не перезагружается;</li>
<li class="next">возможность отправлять данные на лету;</li>
<li class="next">возможность получать данные на лету;</li>
</ul>
</div></section>
<section class="slide cover"><div>
<p style="font-size:2.4em; font-weight: bold; color:#061a6d; text-shadow:1px 1px 15px #fff">..но что значит на лету?</p>
<img src="pictures/lesson3/send.jpg">
</div></section>
<section class="slide"><div>
<p>Полёт Ajax:</p>
<ul>
<li class="next"><i style="color:#70588b">Предполётная подготовка -></i> пользователь нажимает на кнопку</li>
<li class="next"><i style="color:#70588b">Взлёт -></i> улетает <em style="color:#70588b">запрос</em> за данными!</li>
<li class="next"><i style="color:#70588b">Полёт -></i> <img src="pictures/lesson3/preloader.gif"> ".. дистпетчер. Говорит борт Ajax, полёт нормальный..."</li>
<li class="next"><i style="color:#70588b">Полёт -></i> <img src="pictures/lesson3/preloader.gif"> пользователь продолжает пользоваться приложением</li>
<li class="next"><i style="color:#70588b">Посадка -></i> прилетает <em style="color:#70588b">ответ</em> от сервера!</li>
<li class="next"><i style="color:#70588b">Зал прилёта -></i> пользователь получает ранее запрошенные данные</li>
</ul>
</div></section>
<section class="slide"><div>
<p>Полёт Ajax:</p>
<ul style="color:#cecece">
<li><i>Предполётная подготовка -></i> пользователь нажимает на кнопку</li>
<li><i>Взлёт -></i> улетает <b style="color:#70588b">запрос</b> за данными!</li>
<li><i style="color:#70588b">Полёт -></i> <img src="pictures/lesson3/preloader.gif"> </li>
<li><i style="color:#70588b">Полёт -></i> <img src="pictures/lesson3/preloader.gif"> </li>
<li><i>Посадка -></i> прилетает <b style="color:#70588b">ответ</b> от сервера!</li>
<li><i>Зал прилёта -></i> пользователь получает ранее запрошенные данные</li>
</ul>
</div></section>
<section class="slide cover"><div>
<h2 style="color:#ddd">Не верю!</h2>
</br>
</br>
</br>
</br>
</br>
</br>
<h2 style="color:#fff; float:right">Я тебе покажу!</h2>
<img src="pictures/lesson3/example.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>