國立臺灣師範大學博碩士論文全文系統

簡易檢索 / 詳目顯示

回結果列表

研究生：	莫阿奴 anupriya shivaji more
論文名稱：	HTML5多媒體設計之研究 A Study On The Multimedia design Of HTML5
指導教授：	葉耀明 Yeh, Yao-Ming
學位類別：	碩士 Master
系所名稱：	資訊工程學系 Department of Computer Science and Information Engineering
論文出版年：	2012
畢業學年度：	100
語文別：	英文
論文頁數：	56
中文關鍵詞：	HTML 5 、JavaScript 、CSS 、jQuery 、PHP
英文關鍵詞：	HTML 5, JavaScript, CSS, jQuery, PHP
論文種類：	學術論文
相關次數：	點閱：148 下載：8
分享至:	分享至facebook 分享至twitter

查詢本校圖書館目錄查詢臺灣博碩士論文知識加值系統勘誤回報

HTML5是為網頁建立和其他可在網頁瀏覽器中看到的資訊所設計的一種標示語言，是網際網路的核心技術。目前HTML5為HTML的第五個版本(HTML原始建立於西元1990年，而上個版本HTML4在西元1997年標準化)，截至2011年8月仍處於開發階段。它的核心技術已經改善且支持最新的多媒體語言，並讓人類易讀且維持電腦與設備讀取的一致性(如：網頁瀏覽器、編譯器…等)。而HTML5不僅延伸了HTML4，還包含了XHTML1以及DOM2HTML(尤其是JavaScript)。
本論文提出了HTML5的音頻、視頻、畫布和圖片等新的功能，這可用於最新瀏覽器所需的語法及應用上。HTML5在描述上提供了一些新的方法，其中有一個最大的改善是新的標籤功能如audio和video標記，完全使用JavaScript通過存取媒體元素來編譯，這些標籤有著難以置信的易於使用性及具有強大的靈活性。
我的論文是一個對於想發展HTML5技術的應用很好的參考範例。在示範中顯現良好的HTML5的開發風格，提供給一些欲使用HTML5開發自己的網站的使用者作參考。我們已經做了HTML5音頻、視頻、畫布、圖片、拖放、物理模擬和遊戲開發等功能，並提供許多範例展示，使用者們可以使用iPhone行動裝置及電腦上觀看我們的多媒體演示，而且可以在範例中實際的操作。

HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard originally created in 1990 and most recently standardized as HTML4 in 1997 and as of August 2012 HTML5 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.). HTML5 is intended to add not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.
This thesis presents new features of HTML 5 Audio, Video, Canvas, Image etc. This can be used for latest browsers syntax & application. There are a couple of great new approaches that are taking place in the HTML5 description. The advantage of one of the great new improvements in HTML5 is the development of rich media tags like audio and video. Fully programmable with JavaScript, these tags offer incredible ease of use while also offering powerful flexibility through extensive access to media elements through programming.
This thesis is good reference to people who want to develop HTML 5 technology applications. These demos demonstrate good HTML 5 development style. It can provide very good reference for who want to develop their own website using HTML 5. I have done some new features of HTML 5 Audio, Video, Canvas, Image, Drag & Drop, Physics simulation & game development. Users can use this Multimedia Demos on iphone mobile devices & computer. I make demos more usable for users. Users can interact with each demo.

ABSTRACT…………………………………………………………………………………...2
List of Figures & Tables………………………………………………………………………...6
Chapter 1 Introduction……………………………………………………………………..8
1.1 Research Background………………………………………………………………………...8
1.2 Research purpose……………………………………………………………………………10
A. Multimedia Design on HTML5……………………………………………………...10
B. Multimedia includes Audio, Video, Canvas................................................................10
1) Video…………………………………………………………………………………11
2) Audio…………………………………………………………………………………11
3) Canvas………………………………………………………………………………...11
Chapter 2 Survey……………………………………………………………………………12
2.1 HTML 5……………………………………………………………………………………...12
2.1.1 HTML 5 – features……………………………………………………………….……13
2.2 Other Web Technology’s……………………………………………………………………15
2.2.1 CSS………………………………………………………………………..……….......15
2.2.2 javascript…………………………………………………………………………….....16
2.2.3 jQuery…………………..………………………………………………………….......16
2.2.4 PHP…………………………………………………………………………………….17
Chapter 3 HTML 5 Multimedia Design……………………………………………….18
3.1 Layout………………………………………………………………………………………..18
3.2 Audio…………………………………………………………………………………………19
3.2.1 HTML 5 Audio…………………………………………………………………….............19
3.2.2 Audio Demos………………………………………………………………………………21
Audio Demo A: Audio sample…………………………………………………………...21
Audio Demo B: Audio color picker Clock………………………………………............22
3.3 Video…………………………………………………………………………………………22
3.3.1 HTML 5 video ……………………………………………………………… ……………22
3.3.2 HTML 5 vs. Flash………………………………………………………………………….25
3.3.3Video Demo………………………………………………………………………………...26 Video Demo A: Simple video player………………………………………………….....26
Video Demo B: Basic Video……………………………..................................................26
3.4 Image………………………………………………………………………………………....26
3.4.1 HTML 5 Image................................................................ …………………………………26
3.4.2 Image Demos………………………………………………………………………………28
Image Demo A: Full Screen Image Slider……………………………………………...28
Image Demo B: Image Theater…………………………………………………………28
Image Demo C: Image slideshow……………………………………… ……………...28
Image Demo D: Mini Slideshow………………………………………………………..29
Image Demo E: Photo desk……………………………………………………………..29
Image Demo F: Photo stack………………………………………….............................29
Image Demo G: Rotating Billboard…………………………………….........................30
Image Demo H: Rotating slideshow……………………………………………………31
3.5 Drag and Drop………………………………………………………………………………..33
3.5.1 Drag and Drop Events…………………………………………….......................................34
3.5.2 Drag and Drop Demos……………………………………………………………………..35
Drag and Drop Demo A: Keep Surrounding Clean…………………………………….35
Drag and Drop Demo B: Image Vampire………………………………………………36
Chapter 4 Simulation and Game Design........................................................................38
4.1 HTML 5 Canvas ……………………………………..……………………………………...38
4.2 Physics Simulation…………………………………………………………………………...38
Physics Simulation Demo A: Shoot Box………….……………………………………39
Physics Simulation Demo B: Physics Box……………………………………………...39
Physics Simulation Demo C: Physics Adventure…………………………………….....40
4.3 Game…………………………………………………………………………………………41
Game Demo A: English Character Fall ………………………………………..............41
Game Demo B: Water Character Fall…………………………………………..............42
Game Demo C: Fairy Jump ……………………………………………………………43
Game Demo D: Snake Game……………………………………………………...........44
Chapter 5 HTML 4 vs. HTML 5………………………………………………...46
5.1 Comparison between HTML 4 and HTML 5………………………………………………..46
A. Comparison with HTML 4…………………………………………………………..46
5.2 Browsers Comparison………………………………………………………………………..47
Chapter 6 Conclusion………………………………………………………………………53
References………………………………………………………………………………………..55

                                

[1] Stephen Shankland , “opera for Android to get HTML 5 video,Flash”, http://news.cnet.com/8301-30685_3-20024664-264.html
[2] olivia ,“Difference Between HTML 4 and HTML 5” http://www.differencebetween.com/difference-between-html-4-and-vs-html-5/#ixzz1Em8UxcIA, Feb 10th, 2011 /By Olivia. [3] Anne van Kesteren, Simon Pieters ,“ HTML5 differences from HTML4”, http://www.w3.org/TR/html5-diff/, W3C Working Draft 25 May 2011.
[4] David Leggett, “The Web Is Changing : HTML 5 and Native Media Support”
http://www.uxbooth.com/blog/the-web-is-changing-html5-and-native-media-support/ , January 18th, 2011/David Leggett.
[5] Johannes Behr, Peter Eschler, Yvonne Jung, Michael Zollner , “X3DOM – A DOM-based HTML5/ X3D Integration Model” http://www.web3d.org/x3d/wiki/images/3/30/X3dom-web3d2009-paper.pdf ,
Las Vegas, March 18-20th 2009.
[6] Joe Lennon,“Create modern Web sites using HTML5 and CSS3 Implementing the canvas and video elements in HTML5” http://www.ibm.com/developerworks/web/tutorials/wa-html5/wa-html5-pdf.pdf, 02 Mar 2010/ Joe Lennon .
[7] Steven J. Vaughan-Nichols , “Will HTML 5 Restandardize the Web?”, http://u.cs.biu.ac.il/~ariel/download/mm664/resources/internet_web/html5.pdf , Published by the IEEE Computer Society APRIL 2010.
[8] “HTML5 Primer”, http://www.slideshare.net/graebryan/html5-primer , A NewBay White Paper November 2010.
[9] Arno Bakker, Riccardo Petrocco , Michael Dale , Jan Gerber, Victor Grishchenko , Diego Rabaioli , Johan Pouwelse,“Online video using BitTorrent and HTML5 applied to Wikipedia”, http://swarmplayer.p2p-next.org/p2p10demo.pdf.
[10] Kai Uwe Barthel, Karsten Schulz “ImageJ in the web? -Image processing in the browser using HTML5” http://www.f4.fhtw-berlin.de/~barthel/paper/BarthelSchulz10.pdf.
[11] “jTypingHero - Test your typing skills in this query game”http://www.marcofolio.net/games/jtypinghero_test_your_typing_skills_in_this_jquery_game.html
[12] “jCharacterfall - A small, addictive jQuery game”http://www.marcofolio.net/games/jcharacterfall_a_small_addictive_jquery_game.html
[13] “jquery-snakey”http://code.google.com/p/jquery-snakey/downloads/detail?name=jquery-snakey-V0.1b.zip&can=2&q=

簡易檢索 / 詳目顯示

相關論文