National Taiwan Normal University Graduate Institute of Computer Science and Information Engineering A Content Based HTML 5 Image Galleries on Website Submitted in partial fulfillment of the requirement For the degree of MASTER In Computer Science and Information Engineering By Dhannayak Swapna Advisor Prof. Yao-ming Yeh January 2013 1 摘要 本研究有兩個主要目標的想法。萬維網聯盟（以下簡稱為 WWW 或 W3 的，通常稱為 Web），是一個系統的相互聯繫通過 Internet 訪問的超鏈 接的文檔。通過網頁瀏覽器，可以瀏覽網頁，其中可能包含文字，圖 片，視頻和其他多媒體，以及它們之間通過超鏈接導航。 HTML5 是一 個集合的個別功能。 HTML5 包含了許多新的功能，使網絡形式要容易 得多寫，網絡上更強大和一致的。 HTML5 仍然是一個進展中的工作。 然而，主要的瀏覽器支持許多新的 HTML5 元素和應用程序編程接口。 很久以前，攝影師依靠定期畫廊，展示自己的作品。雖然這種方法有它 的優勢，它也標誌著幾個缺點。隨著互聯網革命中，每個人，能買得起 廉價的網絡託管帳戶，可以創建一個個人網站。然而，在開始建立的網 站是不容易的，因為不是每個人都有的技巧，創建自己的網站。 在論文的目的主要集中在 HTML5，CSS3，jQuery 的，javascript 中的 許多新的功能和元素。根據從研究和上述審查的相關文獻與研究。它提 供了很好的參考，誰想要開發自己的 HTML 5 的圖片庫網站上使用 HTML 5，CSS3，jQuery 和 JavaScript 的。我已經演示了 HTML 5 和 CSS3 的一些新功能，如 CSS3 圖像畫廊，畫框，旋轉幻燈片，jQuery 的三面板圖像滑塊，jQuery 的燈箱插件，使用 jQuery 和 CSS 的形象 牆，圖片 DG 作物。對於這些演示中，例如我選擇了一些重要的印度自 由戰士的圖像。和其它 HTML5 功能是使用 HTML5 的 Canvas 的漣漪效 應。用戶可以使用這些圖片的演示，對的 iphone 移動設備和電腦。我也 做演示，更可用於用戶，他們可以與每個演示。 關鍵詞：HTML5，CSS3，jQuery 的，使用 Javascript，AJAX，PHP。 2 ABSTRACT This study was performed with two main goals in mind. The World Wide Web consortium (abbreviated as WWW or W3, commonly known as the Web), is a system of interlinked hyper linked documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks. HTML5 is a collection of individual features. HTML5 includes many new features to make web forms a lot easier to write, more powerful and consistent across the Web. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and Application Programming Interfaces. A long time ago, photographers had to rely on regular galleries to display their work. And while this method has its advantages, it also marks several disadvantages. With the Internet Revolution, everyone, who could afford a cheap web hosting account, could create a personal website. However, in the beginning, creating websites was not easy, since not everybody had the skill to create their own site. The objective of the thesis mainly focused on many new functions and elements of HTML5, CSS3, jQuery, javascript. Based from the research and the foregoing review of the related literature and studies. It provides very good reference for who wants to develop their own HTML 5 image gallery websites using HTML 5, CSS3, jQuery and javascript. I have demonstrated some new features of HTML 5 and CSS3 like CSS3 Image gallery, Frame, Rotating Slideshow, jQuery Triple Panel Image slider, jQuery lightbox plugin, Image wall with jQuery and CSS, Image DG Crop. For these demos I have selected the example images from some of important Indian freedom fighters. And the other HTML5 feature is Ripple effect using HTML5 Canvas. Users can use these Image Demos on iphone mobile devices and computer. I also do make demos that are more usable for users and they can interact with each demo. Keywords: HTML5, CSS3, jQuery, JavaScript, AJAX, PHP. 3 Acknowledgements It gives me immense pleasure to express my gratitude to all those who have been there all the while during period of my study and research, lending their help in every possible way to come out of the course with flying colors. It is with all sincerity that I express gratitude to my research supervisor, Prof. Yao-MingYeh, Department of Computer Science and Information Engineering, National Taiwan Normal University, Taiwan, for his guidance, pertinent encouragement, inspiring discussions and valuable suggestions throughout this investigation. I specially thank to my husband Dr. J. Damodar, for his help, encouragement and inspiration that provided me the pleasant environment during my work. I thank to my parents D. Raja Gopal Rao and Ganga Devi for their blessings. Last, but not least, I really enjoy the cheerfulness of my daughter Aashika. D.Swapna 4 TABLE OF CONTENTS ABSTRACT...............................................................................................3 List of Figures...................................................................................................8 List of Tables....................................................................................................9 Chapter 1 Introduction.....................................................................10 1.1 Research Background.................................................................................10 1.2 Goal of the Thesis......................................................................................12 1.3 Organization of the Thesis.........................................................................12 1.4 Motivation..................................................................................................12 A. A Content based Image galleries on website...................................13 Chapter 2 Survey and Fundamentals......................................14 2.1 HTML5.......................................................................................................14 A. Advantages of HTML5....................................................................16 2.2 CSS.............................................................................................................17 2.3 CSS3 Features............................................................................................19 A. CSS3 Modules.................................................................................19 B. Styling HTML with CSS.................................................................20 5 C. CSS3 Backgrounds.........................................................................20 2.4 HTML5 New Form Elements....................................................................20 A. HTML5 <datalist> Element............................................................21 B. <form> / <input> autocomplete Attribute.......................................22 2.5 jQuery........................................................................................................22 2.5.1 The element Selector...................................................................22 2.5.2 jQuery Selectors..........................................................................23 2.6 Used Web Technology’s...........................................................................24 2.6.1 CSS..............................................................................................24 2.6.2 JavaScript....................................................................................24 2.6.3 jQuery..........................................................................................25 2.6.4 AJAX...........................................................................................25 2.6.5 PHP..............................................................................................26 Chapter 3 HTML5 Image Gallery Design............................27 3.1 Layout of image gallery............................................................................ 27 A. Demo of CSS3 Image Gallery........................................................29 B. Demo of Frame...............................................................................30 3.2 Demo of Triple Panel Image Slider...........................................................31 3.3 Demo of Rotating Slideshow.....................................................................37 3.4 Demo of JQuery lightBox plugin...............................................................41 3.5 Demo of Image Wall with jQuery and CSS...............................................44 6 3.6 Demo of Image DG crop............................................................................50 3.7 Demo of Water ripple effect using HTML5 Canvas Image.......................56 Chapter 4 Comparisons...................................................................59 4.1 Comparison between CSS2 and CSS3.......................................................59 4.2 Comparison between JQuery and Javascript..............................................60 4.3 Comparison between HTML4 and HTML5...............................................61 4.4 Comparison between HTML5 and Flash...................................................63 4.5 Comparison between HTML5 and Native Mobile Applications...............65 4.4 Browsers Comparison................................................................................66 Chapter 5 Conclusions and Discussions.................................73 References........................................................................................................76 7 List of Figures Figure 1.1 Timeline of web Technologies.......................................................11 Figure 2.1 HTML5..........................................................................................15 Figure 2.2 HTML5 in Web Applications........................................................15 Figure 2.3 HTML5 in Mobile Applications....................................................16 Figure 3.1 HTML5 Website design.................................................................29 Figure 3.1.1 CSS3 Image gallery.....................................................................30 Figure 3.1.2 Frame.........................................................................................31 Figure 3.2 Triple Panel Image Slider...............................................................32