基于HTML5的在线幻灯片编辑演示系统

目录
摘 要 1
1 绪论 1
1.1 项目研究背景 1
1.2 项目研究意义 3

1. 迎合市场需求，创造更加便捷的幻灯片使用环境 3
2. 定位大众 Web 应用，促进 Internet Web 系统的发展进程 4
3. 升级服务器端系统，实现跨平台软件版本同步和环境的统一 4
   1.3 论文的组织结构 4
   2 开发技术 4
   3、Axure RP[12] 6
   参考文献 42
   摘 要
   进入新世纪以来，信息技术产业迅猛发展，已经逐渐深入到了日常生活的方方面面。通过幻灯片这类的演示文稿软件，能更好、更直观的表达出演讲者所要表达的主题和主要内容，使演讲者有了它在演讲的时候能实现更有秩序和更完美的演讲，提高沟通交流的效率。目前，不论是在科学教育、商业展示、产品说明、比赛演讲等各个方面，都是依赖幻灯片类软件，以实现有效的表达。
   HTML5 作为 Web 时代的新星，拥有更高的可用性和更好的体验效果，并且对 HTML 标签和一些属性进行了良好的扩展，使得前端拥有更加丰富的功能。特别是在多媒体方面，HTML5 给出了更简便稳定的实现方案，可以很好的代替 FLASH 和 Silverlight。 HTML5 被设计出来，致力于打造一个无缝的网络环境，不管是在 PC 端，还是移动端，都能完美兼容，使得基于它的应用能够有较好的移植性。
   基于 HTML5 的在线幻灯片系统，利用 Sublime Text 编辑器和 Fierfox Developer Edition 工具，实现了在线幻灯片系统的编辑模块、保存模块和播放模块。它拥有简洁清爽的界面，自然流畅的体验和全面实用的功能，利用 RequireJS 实现面向模块的架构，有良好的兼容性和扩展性。基于 HTML5 的在线幻灯片系统，仅仅通过浏览器实现幻灯片的编辑、保存、演示，让你摆脱用 U 盘携带存储和系统软件环境的限制。
   关键词： HTML5； Sublime Text； RequireJS； 在线幻灯片

1绪论
1.1 项目研究背景

1. HTML5
   2014 年 10 月 29 日，万维网联盟泪流满面地宣布，经过几乎 8 年的艰辛努力，HTML5 标准规范终于最终制定完成了，并已公开发布。[8]
   在此之前的几年时间里，已经有很多开发者陆续使用了 HTML5 的部分技术，Firefox、Google Chrome、Opera、Safari 4+、 Internet Explorer 9+ 都已支持 HTML5。[8]
   HTML5 将会取代 1999 年制定的 HTML 4.01、XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。[8]
   W3C CEO Jeff Jaffe 博士表示：“HTML5 将推动 Web 进入新的时代。不久以前，Web 还只是上网看一些基础文档，而如今，Web是一个极大丰富的平台。我们已经进入一个稳定阶段，每个人都可以按照标准行事，本文转载自http://www.biyezuopin.vip/onews.asp?id=15130并且可用于所有浏览器。如果我们不能携起手来，就不会有统一的 Web。” [8]
   HTML5 还有望成为梦想中的“开放 Web 平台”(Open Web Platform) 的基石，如能实现可进一步推动更深入的跨平台 Web 应用。
   [8]
   HTML5 赋予网页更好的意义和结构。更加丰富的标签将随着对 RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的 Web。
   基于 HTML5 开发的网页 APP 拥有更短的启动时间，更快的联网速度，这些全得益于 HTML5 APP Cache，以及本地存储功能。 Indexed DB（html5 本地存储最重要的技术之一）和 API 说明文档。[8]
   HTML5 将会最终代替多媒体框架，如 Flash，但是短期看来还不是时候，因为将现有应用 Flash 的网络开发完全转向 HTML5 还需要一段时间。尽管 HTML5 提出了许多优点，但是还可能有某些应用更适合于更灵活的框架。一些主流的大公司都逐步转向使用HTML5，谷歌于 2015 年 2 月 26 日开始自动将 Flash 广告转换为 HTML5 格式，这可能会加速 HTML5 替代 Flash 的进程，但是这个转变的过程也不是一蹴而就的。[8]

    
    
    
    
    
    
    
    




    

        

            

                HTML5幻灯片系统
                

                    

                        
                    
                
                

                    
                
                

                    
 主题和动作
                    
 全部重做
                    

                        
                             打开幻灯片
                        
                        

                            
打开在线幻灯片
                            
导入（text格式）
                        
                    
                    

                        
                             保存幻灯片
                        
                        

                            
存入数据库
                            
导出为text
                            
导出为html
                        
                    
                    
移除
                    

                        
                             预览 
                        
                        

                            
从第一页开始
                            
从当前页开始
                        
                    
                
            
        

        

            

                

                    撤
                    
                
                

                    
                        字体
                        
                    
                    

                        
Arial
                        
Verdana
                        
Tahoma
                        
宋体
                    
                
                

                    
                        大小
                        
                    
                    

                        
1
                        
2
                        
3
                        
4
                        
5
                        
6
                        
7
                    
                
                

                    
                        颜色
                        
                    
                    

                        
                        
                        
                        
                        
                        
                        
                        
                    
                
                

                    
                    
                    U
                    abc
                
                

                    
                    
                    
                    
                    
                
                

                    
                    
                
                

                    
                    
                
                

                    
                        
                        Link
                    
                    
                
                

                    
                
                
                

                    展开布局模板
                
            
        

        

            

                

                    
                        
                    
                
            
        

        

            

                

                    

                        

                            
                            
                            
                            
                            
                            
                        
                    
                    

                        

                            

                                

                                
                                
                                
                            
                        
                    
                
            
            

            

                

                    

                        

                    
                    

                        

                    
                    

                        

                    
                    

                        

                    
                    

                        

                    
                    

                
            
            

                
插入新页面
                
选择布局模板
                
上移页面
                
下移页面
                
删除页面
            
        
    

    

        

            

                

                    

                
            
        
        

            1 / 1
        
        

            

                前一页
                下一页
                跳转
                退出
            
        
        

            
前一页
            
下一页
            
跳转
            
隐藏操作条
            
退出
        
    

    

        

            

                ×
                
给页面添加一个模板
            
            

                

                    
请从中选择模板创建一个新页面:
                    

                        

                            
                                
                                
                            
                        
                    
                
            
            

                关闭
            
        

        

            

                ×
                
主题管理
            
            

                

                    

                        
设计
                        
切换动作
                    
                    

                        

                            

                                

                                    
                                        
                                        
                                    
                                
                            
                        
                        

                            

                                

                                    

                                        
                                    
                                
                                

                                    

                                        
1
                                        
2
                                        
3
                                        
4
                                        
5
                                        
6
                                        
7
                                        
8
                                        
9
                                        
0
                                    
                                
                            
                        
                    
                
            
            

                确定
                关闭
            
        

        

            

                ×
                
重新制作
            
            

                你确定要删除所有信息重做吗?
            
            

                不要
                是的
            
        

        

            

                ×
                
图片添加
            
            

                

                    

                        
我的图片
                        
本地
                        
在线
                    
                    

                        

                            

                                

                                    
                                    

                                        选择
                                        
                                    
                                
                            
                            

                                
没有收藏的图片
                                

                                    你可以上传
                                    或者输入在线图片URL 来添加图片.
                                
                            
                        
                        

                            

                            

                        
                        

                            

                                
                                
                            
                            

                        
                    
                
            
            

                确定
                取消
            
        

        

            

                ×
                
视频编辑器
            
            

                

                    
优酷视频URL:
                    

                    比如: http://v.youku.com/v_show/id_xxxxxxxxxx.html


                    

                        你可以访问 http://www.youku.com/寻找视频，并将URL粘贴到这里.

                    
                
            
            

                确定
                取消
            
        

        

            

                ×
                
代码编写器
            
            

                

                    

                        
输入代码串
                        
代码模板
                    
                    

                        

                            
                        
                        

                            

                                
                                
                            
                            
你可以从这些网站寻址模板URL:
                            

                                
jsFiddle
                                
CodePen
                                
JSBin
                                
Dabblet
                                
或者其他你想展示的模板URL
                            
                        
                    
                
            
            

                确认
                取消
            
        

        

            

                ×
                
跳转到 ...
            
            

                

                    页码:
                    
                
            
            

                确认
                取消
            
        

        

            

                ×
                
选择文件
            
            

                

                    

                    

                
            
            

                取消
                确认
            
        

        

            

                ×
                
我的文件
            
            

                


                
            
            

                取消
            
        

        

            

                ×
                

            
            

            

                取消
                确认
            
        
    

    
    

    
    

    
    

    
    
    
    
    

    


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
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544