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

B.

/ 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

Figure 3.3 Rotating Slideshow...... 39

Figure 3.3.1 Rotating Slideshow...... 39

Figure 3.4 JQuery lightBox plugin...... 43

Figure 3.4.1 JQuery lightBox plugin...... 43

Figure 3.4.2 JQuery lightBox plugin...... 43

Figure 3.5 Image Wall with jQuery and CSS...... 49

Figure 3.5.1 Image Wall with jQuery and CSS...... 49

Figure 3.5.2 Image Wall with jQuery and CSS...... 50

Figure 3.6 Image DG Crop...... 54

Figure 3.6.1 Image DG Crop...... 55

Figure 3.7 Water ripple effect using HTML5 Canvas...... 58

8 List of Tables

Table 2.1 jQuery Selectors...... 23

Table 4.1 CSS3 Image Gallery...... 67

Table 4.2 Frame...... 67

Table 4.3 Triple Panel Image Slider...... 68

Table 4.4 Rotating Slideshow...... 69

Table 4.5 jQuery lightBox plugin...... 69

Table 4.6 Image Wall with jquery and CSS...... 70

Table 4.7 Image DG Crop...... 71

Table 4.8 Water Ripple effect using HTML5 canvas Image...... 72

Table 5.1 Image Browser's Comparison...... 74

9

Chapter 1 Introduction

1.1 Research Background

To build any website it is important to know how the web works. The web is network of computers able to exchange text, multimedia information over the internet. Most of the web pages contain specially formatted words called hyperlinks that enable to access other pages on web. The type of text that contains hyperlinks is called hypertext. Hypertext Markup Language enables to mark up text so that it can function as hypertext on web. HTML contains its own set of elements that tell web how to display a web page.

HTML [1] is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It consists of a series of short codes typed into a text-file by the site author. The text is then saved as an html file, and viewed through an internet browser such as Internet Explorer, FireFox, Google Chrome etc. HTML has go through many changes the latest being is HTML5. In addition to HTML standards, Cascading Style Sheets (CSS) and XML have also provided valuable contributions to web standards.

1.2 Organization of the Thesis

The present investigation mainly associated on a website for image galleries, slideshows and HTML5 features. To build this website I used Indian Freedom fighter images and I would be using HTML, HTML5, CSS, CSS3, jQuery and javascript for study. This requires some research on designing web pages and markup languages. This project I believe is a good way to learn and apply the concepts of web design simultaneously. The current research for this project focuses on studying markup languages and other new web technologies

10 functions while building a website following standard design techniques. The team at Lexolution has really impressed me with their ability to translate rough creative concepts into visually and technically superlative results to enhance the web site.

Responsive web design is the inventive way of adding flexibility to web design. It means that the web design will be smart enough to adapt to the browser of end-user’s devices, be it desktop, tablet, Iphone, Ipad or other smart devices. HTML5 is the next generation of HTML4. HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999 and the web has changed a lot since then. Figure 1.1 shows the Timeline of Web Technologies.

1991 HTML

1994 HTML 2

1996 CSS1 + JavaScript

1997 HTML 4

1998 CSS 2

1999 CSS 3

2000 XHTML 1

2002 Tableless Web Design

2005 AJAX

2012 HTML 5

Figure 1.1 Timeline of web Technologies

11

1.3 Goal of the Thesis

HTML5 standard [2], including related standards and Application Programming Interfaces, are gaining popularity fast. The reason for these quick implementations is that they enable fast development and better web experience without the need of 3rd party applications, such as Adobe Flash or Java. HTML5 gives a lot of support across wide variety of devices, from smart phones to tablets, notebooks etc. This popularity can be seen among many sites that are exploring and implementing new HTML5 possibilities, for example Google, YouTube. With this quick implementation of modern web standards the attack surface is increased immensely.

In this thesis I have represented new features of HTML5 and CSS3 such as CSS3 image gallery, A Frame work of 20 Indian freedom fighters images and their biography on the webpage, Rotating slideshow feature on 20 images, a jQuery image slider with three panels and 3D look on 20 images, jQuery light box plug-in feature on 5 images, image Wall with jQuery and CSS on 25 images, image DG crop, for this demo I used one image and the finally Water ripple effect using HTML5 Canvas image.

1.4 Motivation:

So from where did the idea of Content based HTML5 [3] Image galleries came? The aim of this project is also to clarify some of the issues raised by this new technology, by reviewing its current capabilities and limitations, and its potential usefulness to users in higher education and elsewhere. The report is based both on a review of the research and professional literature, and on discussions with users and managers of large collections of image data, multimedia authors, researchers, software developers, and representatives of standards bodies. Inspired by these successes, I have developed one of the straightforward ways to introduce A content based image gallery for some of most important Indian freedom fighters.

12

A. A Content based image galleries on website:

For some sites, image galleries are an absolutely needed. Portfolios are the first to come to mind, but galleries are also useful for blogs, e-commerce sites, and really any site that regularly displays multiple images on a single page. Galleries are a JavaScript image gallery framework.

Galleries purpose is to make it easier for anyone to create professional-looking image galleries for the web and mobile devices. JavaScript gallery and slideshow system allows having simple and smooth image galleries, slideshows, showcases and other cool stuff on websites. The heading could have been ‘Creating Photo Gallery – Clickable and Fade-In Transition, Pause On Mouseover & With Controls’.

The concept of the image galleries are to present the visitor with the images, graphics, slideshows and pictures created by the respective owner of the gallery. They are divided into several image albums, just like in a blog the posts are divided into categories. This way the visitor can view just the images he is interested in. Each image album is presented to the user with a thumbnail.

Online image galleries were in the beginning very simple. They appeared as soon as images could be included into web pages, but consisted of only several images and contact information. In the latest years they have undergone a real evolution with the introduction of the image gallery scripts. They allow a new image gallery to be taken online in just a few minutes, with specific knowledge required.

In this thesis I have demonstrated image gallery slideshows, image crop functions, HTML5 Canvas image function.

13 Chapter 2

Survey and Fundamentals

2.1 HTML5

This thesis is will be a good reference to people who want to develop HTML5 technology applications. These demos demonstrate good HTML5 development style. It can provide very good reference for who want to develop their own Image gallery and slideshows website using HTML5, CSS3. I have done some new features of HTML5. Users can use this Multimedia Demos on Iphone mobile devices & computer. In this study, I have presented demos more usable for users and users can interact with each demo.

HTML5 [4] has become the face of the Open Web Platform. It represents a single standard that can be applied across all computers and mobile devices. The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors. HTML5 is cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004. At that time, HTML 4.01 had not been updated since 2000, and the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0. In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.

HTML5 = HTML + CSS + JS

14 The following Figure 2.1 shows about the uses of HTML5, Figure 2.2 demonstrates about the HTML5 in web applications and Figure 2.3 indicates about the HTML5 in Mobile Applications:

Figure 2.1 HTML5

Figure 2.2 HTML5 in Web Applications

15

Figure 2.3 HTML5 in Mobile Applications

A. Advantages of HTML5:

For those of you who do not know it yet, HTML5 is here and it is ready to use. This standard gives developers and website designers more flexibility while also enabling websites to be more interactive, powerful and efficient. The best thing about HTML5 is that it is simpler than previous HTML standards, this giving rise to a cleaner code.

HTML5 allows you to play videos, animations, drawings, and music on the page itself. You do not have to use any add-ons such as Flash and Silverlight, the way that most video sites are doing now. Also, developers can now use Javascript alone to create diagrams, graphics and animations on any page they create. HTML5 supports Geolocation, making location directly available on any compatible browser application. HTML5 also brings with it an SQL-based database that allows those in the client side to store data on their computers. With the offline application cache, users can also still use and access their applications even when they are not connected to their networks. HTML5

16 allows for better form fields such as better text inputs and better search boxes. It also handles data validation quite well. On top of that, you can create really nice looking forms. HTML5 is going to make it easier for designers to bring their web pages to iphones and mobile phones. With most mobile phones having no access to Flash, HTML5 can still deliver videos and other multimedia content to these devices.

Differences from Native Applications and Mobile Web Applications

Hybrid mobile applications contain a mixture of native application and mobile web application concepts. They will do contain native code but are not completely native. Typically the native code is provided by a framework and reveals a JavaScript API so that the applications JavaScript code can perform native functions such as taking a picture with the camera. Extra functionality can also be implemented by creating native “plugin” components for the framework that perform a native task.

Unlike mobile web applications, which store source files on a server, hybrid mobile applications store HTML, JavaScript, and CSS files locally so no Internet access is required to launch a hybrid mobile application. To the user a hybrid mobile application appears to be no different than a native application; it is launched and closed in the same manner as opposed to a mobile web application, which must be accessed through the device’s web browser application.

2.2 CSS3

CSS is used to control the style and layout of Web pages. CSS3 is the latest standard for CSS.

Cascading Style Sheets (CSS) is a style sheet language it is used for describing the presentation semantics of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

17 CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout colors, and fonts. This separation can also improve content accessibility, provides more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. CSS can also allows the same markup page to be presented in different styles for different rendering methods, such as on- screen, in print, by voice and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

Unlike CSS2, which is a large single specification defining various features, CSS3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS2, over preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS2 recommendation. The earliest CSS3 drafts were published in June 1999.

Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group, and four of these have been published as formal recommendations. CSS3 also supports adding round edges to elements via the border-radius property. Increasingly more websites are utilizing this technique for aesthetic purposes.

The members of the CSS&FP Working Group have decided to modularize the CSS specification. This modularization will help to clarify the relationships between the different parts of the specification, and reduce the size of the complete document. It will also allow us to build specific tests on a per module basis and will help implementers in deciding which portions of CSS to support. Furthermore, the modular nature of the specification will make it

18 possible for individual modules to be updated as needed, thus allowing for a more flexible and timely evolution of the specification as a whole.

CSS is used to control the style and layout of multiple Web pages all at once. With CSS, all formatting can be removed from the HTML document and stored in a separate file. CSS gives total control of the layout, without messing up the document content.

 CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added to HTML 4.0 to solve a problem  External Style Sheets can save a lot of work  External Style Sheets are stored in CSS files

2.3 CSS3-Features

CSS3 is completely backwards compatible, It will not have to change existing designs. Browsers will always support CSS2.

A. CSS3 Modules:

CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.

Some of the most important CSS3 modules are:

 Selectors  Box Model  Backgrounds and Borders  Text Effects  2D/3D Transformations  Animations  Multiple Column Layout  User Interface

19

B. Styling HTML with CSS:

CSS was introduced together with HTML 4, [5] to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

 Inline - using the style attribute in HTML elements  Internal - using the