基於內容的ＨＴＭＬ5對網站的圖片庫

全文

(1)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.

(2) 摘要. 本研究有兩個主要目標的想法。萬維網聯盟（以下簡稱為 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.

(3) 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.

(4) 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.

(5) 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.

(6) 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.

(7) 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.

(8) 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.

(9) 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.

(10) 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.

(11) 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.

(12) 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.

(13) 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.

(14) 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.

(15) 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.

(16) 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.

(17) 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.

(18) 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 onscreen, 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.

(19) 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.

(20) 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 <style> element in the <head> section. . External - using an external CSS file. The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files. C. CSS3 Backgrounds: CSS3 contains several new background properties, which allow greater control of the background element. Following are the background properties: . background-size. . background-origin. 2.4 HTML5 New Form Elements: HTML5 has the following new form elements: HTML5 New form Input Types: . Search. . Email Address. . URLs. . Telephone Numbers. . Numbers 20.

(21) . Ranges. . Colors. . Dates and Times. HTML5 has the following new form elements: . <datalist>. . <keygen>. . <output>. A. HTML5 <datalist> Element The <datalist> element specifies a list of pre-defined options for an <input> element. The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input> element's list attribute to bind it together with a <datalist> element. HTML5 has several new attributes for <form> and <input>. New attributes for <form>: . autocomplete. . novalidate. New attributes for <input>: . autocomplete. . autofocus. . form. . formaction. . formenctype. . formmethod. . formnovalidate. 21.

(22) . formtarget. . height and width. . list. . min and max. . multiple. . pattern (regexp). . placeholder. . required. . step. B. <form> / <input> autocomplete Attribute The autocomplete attribute specifies whether a form or input field should have autocomplete on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before. 2.5 jQuery: Syntax The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element.. 2.5.1 The element Selector The jQuery element selector selects elements based on their tag names. select all <p> elements on a page like this: $("p"). 22.

(23) 2.5.2 jQuery Selectors: The Table 2.1 defines jQuery Selectors. jQuery selectors are one of the most important parts of the jQuery library.. Table 2.1 jQuery Selectors Syntax. Description. $("*"). Selects all elements. $(this). Selects the current HTML elements. $("p.intro"). Selects all <p> elements with class="intro". $("p:first"). Selects the first <p> element. $("ul li:first"). Selects the first <li> element of the first <ul>. $("ul li:first-child"). Selects the first <li> element of every <ul>. $("[href]"). Selects all elements with an href attribute. $("a[target='_blank']"). Selects all <a> elements with a target attribute value equal to "_blank". $("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank $(":button"). Selects all <button> elements and <input> elements of type="button". $("tr:even"). Selects all even <tr> elements. $("tr:odd"). Selects all odd <tr> elements. 23.

(24) 2.6 Used Web Technology’s 2.6.1 CSS Cascading Style Sheets (CSS) CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. 2.6.2 JavaScript JavaScript [6] was invented by Brendan Eich at Netscape, and appeared for the first time in Netscape Navigator (a no longer existing web browser) in 1995. JavaScript is the most popular scripting language in the world. It is the programming language of the web, for servers, PCs, laptops, tablets and mobile phones. JavaScript was designed to add interactivity to HTML pages. JavaScript is programming code that can be inserted into HTML pages to be executed by the web browser. Many HTML designers are not programmers, but JavaScript is a language with a very simple syntax. Almost anyone can put small "snippets" of JavaScript code into HTML pages. JavaScript has become one of the most popular programming languages on the web. Initially, however, many professional programmers denigrated the language because its target audience was web authors and other such "amateurs", among other reasons. The advent of Ajax returned JavaScript to the spotlight and brought more professional programming attention. The result was a proliferation of comprehensive frameworks and libraries, improved JavaScript programming practices, and increased usage of JavaScript outside of web browsers, as seen by the proliferation of server-side JavaScript platforms.. 24.

(25) 2.6.3 jQuery jQuery is a multi-browser JavaScript library designed to simplify the clientside scripting of HTML. It was released in January 2006. It is currently developed by a team of developers led by Dave Methvin. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use. jQuery is free, open source software, licensed under the MIT License. jQuery's syntax. is. designed. to. make. it. easier. to. navigate. a. document,. select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.. 2.6.4 AJAX AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages must reload the entire page if the content should change. Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XML HttpRequest. 25.

(26) object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads. The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without interfering with the current state of the page. In the article that coined the term Ajax.. 2.6.5 PHP PHP is a powerful tool for making dynamic and interactive Web pages. PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. PHP is an open source general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages. It is one of the first developed server-side scripting languages to be embedded into an HTML source document rather than calling an external file to process data. The code is interpreted by a Web server with a PHP processor module which generates the resulting Web page. It also has evolved to include a commandline. interface capability. and. can. be. used. in standalone graphical. applications. PHP can be deployed on most Web servers and also as a standalone shell on almost every operating system and platform, free of charge. A competitor to Microsoft's Active Server Pages (ASP) server-side script engine and similar languages, PHP is installed on more than 20 million Web. sites. and. 1. million Web. servers.. Software. that. uses. PHP. includes Drupal, Joomla, MediaWiki, and Wordpress.. PHP was originally created by Rasmus Lerdorf in 1995. The main implementation of PHP is now produced by the PHP Group and serves as the formal reference to the PHP language. PHP is free software released under the PHP License, which is incompatible with the GNU General Public License (GPL) due to restrictions on the usage of the term PHP. 26.

(27) Chapter 3 HTML 5 Image Gallery Design. HTML5 Features on Website. HTML5 can be used to create cool sites and features. By using Image Gallery CSS Advanced technology I have created a web pages of Indian Freedom fighter leaders. I choosed 20 Indian Freedom Fighters Biography and their Images.. 3.1 Layout of Image gallery. This is final layout for demos, below figure 3.1 shows layout. I have split website home page into sections like Introduction, news items, and contact information. For I click on Home section it will show Demos list so for this I use HTML 5 tag, the <li> tag is supported in some major browsers.. <li><center><a href="Home.html">Home</a></center></li>. For News section, if I click on News section it will show Introduction. so for this I use HTML 5 tag, The <li> tag is supported in all major browsers.. <li><center><a href="News.html">News</a></center></li>. For About section, if I click on About section it will show Introduction. so for this I use HTML 5 tag, The <li> tag is supported in all major browsers.. <li><center><a href="About.html">About</a></center></li>. 27.

(28) For Contact section, if I click on Contact section it will show Contact information, so for this I use HTML 5 tag , The <li> tag is supported in all major browsers .. <li><center><a href="Contact.html">Contact</a></center></li>. For Reference section, if I click on Contact section it will show Contact information, so for this I use HTML 5 tag. The <li> tag is supported in all major browsers.. <li><center><a href="References.html">References</a></center></li>. Figures. Function:. <td><a. href="http://140.122.184.44/html5/"><img. src="1.jpg". alt="1". height="200" width="200"> </td> Here for each image I take the height is 200 and width is 200. The <td> tag is supported in all major browsers.. When I click on each image then it will shows the implemented features of the HTML5 and CSS3.. 28.

(29) Figure 3.1 multimedia design. A. Demo of CSS3 Image Gallery. CSS can be used to create a neat an image gallery. Image Gallery. The following figure 3.1.1 demonstrates about image gallery is created with CSS:. 29.

(30) Example of CSS3 Image gallery:. Figure 3.1.1 CSS3 Image Gallery. Function: <img src="Indira Gandhi_small.jpg" alt="Indira Gandhi" width="110" height="90"> B. Demo of Frame. The figure 3.1.2 defines example of frame image. By using Left Frame I created Indian freedom fighters list in left corner. When I click on the name it will shows the leader name, image on the left and biography of the person.. Function:. <img border="0" src="Bipin Chandra paul.jpg" alt="Bipin Chadra paul" width="304" height="228" />. 30.

(31) Example of Frame Image:. Fig 3.1.2 Frame Image. 3.2 Demo of Triple Panel Image Slider. Demo description:. I got this idea from Tympanus.net. tutorials [7] . The figure 3.2 indicates Triple panel image Slideshow example. I used 20 images to create a Triple panel jQuery image slider with a 3D look and swipe-like transitions. I created a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, I will slide in the respective next image in each panel. I am using CSS 3D Transforms with perspective and CSS Transitions. I have given a Indian Freedom fighters 20 images in the demo.. 31.

(32) Function: HTML5: Ex: <img src="images/1.jpg" alt="image01" /> <div class="fs-slider" id="fs-slider"> Ex: Triple panel Image slider demo:. Fig. 3.2 Triple Panel Image Slider. 32.

(33) Markup: The initial structure that we’ll create will consist of a division with figures. Each figure will contain an image and a figcaption for the image: I use that technology jquery plugin to transform that structure. Each figure will be wrapped into a division with the class fs-block and I have added a navigation to the whole thing. CSS: Since I want the image slider to be responsive, I will give it a percentage width. But I am also define a minimal and maximum width so that it doesn’t squeeze too much or grow out of proportion. I will add some paddings to the side because blocks will be positioned using the CSS translate property and that will not affect the width of the element. .fs-container I add a realistic shadow under the slider using a pseudo-element. I will use a background image for that and setting a background size of 100% will ensure that the shadow resizes with our slider. background: transparent url(../images/shadow.png) no-repeat center center; The additional wrapper that I have added around the slider will have perspective: .fs-wrapper The slider itself will need to have the preserve 3d transform-style: .. 33.

(34) fs-slider transform-style: preserve-3d; .fs-block, Each block will be placed in the center by setting the width to 70% and the left value to 15%. I will also add a transition to the block since I want to create a neat hover effect: transition: all 1s ease; Now I need to position the blocks. The first one will be moved to the left by setting the translateX value to -100%. By rotating it -35 degrees on the Y-axis, I will make it turn away to the back on the left side: transform: translateX(-100%) rotateY(-35deg); On hover, I want that panel block to move a bit to the front. I am using Modernizr, so I can define the hover effect only for non-touch devices (the body will have the class “no-touch”). .no-touch .fs-block:nth-child(1):hover The middle panel will have a z-index of 100(z-index: 100) because I want to ensure that it’s always on top. The last block will be moved right and rotated to the other side. And on hover I will slightly move it to the front. I add some semi-transparent overlays to the panels in order to make them look more realistic. I will use the pseudo-class :after for that and I will make it overflow 1px (to fix a little gap that might show up because of rounding errors of the width): Each block will have a different type of gradient. linear-gradient The following gradient for the middle panel will add a slightly bended effect: .fs-block:nth-child(2):after { opacity: 0.8;. 34.

(35) background: linear-gradient( to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 21%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.03) 70%, rgba(0,0,0,0.12) 81%, rgba(0,0,0,0.5) 100% ); } The last block will have the reverse gradient of the first one. Now, I style the figure elements. They will be positioned absolutely( position: absolute;) and fill all the block element. The idea is to add another figure to a block when navigate. So I need to set the z-index( z-index: 10;) of the first figure higher so that the added figure does not show up. Then I will animate the width of the first figure to 0%, which will reveal the second one. Then The image will also be set to position absolute:(position: absolute). The figcation element will have a semi-transparent background and I will add a transition. This transition will happen when I add the class fs-transition to it (I will do that when I navigate): .fs-block figcaption.fs-transition Then I style the text elements. The navigation will be placed in the bottom right corner. The spans will be used as the navigation arrows and they will be floating left and I will add the arrow as a background image. The second span will be rotated to 180deg, so that the arrow points to the right. On hover I will increase the opacity.. 35.

(36) Now, I add the transitions for the sliding effect. Each panel will have a different delay. Since I always want to animate a kind of swipe from the right, the first panel will have the highest delay. On the other hand, the third one will have no delay. The timing-function will be a custom cubic-bezier.. .fs-block:nth-child(1) figure {. transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms; } .fs-block:nth-child(2) figure { transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms; } .fs-block:nth-child(3) figure { transition: width 900ms cubic-bezier(0, 0, .15, 1); } At last I add some media queries for adjusting the size of the text elements. The above procedure is about the style. javaScript:. The plugin options will only have the autoplay settings. I have set the transitions configuration in the CSS. I will start by preloading all the images and once that’s done I will execute the _init function: _init : function( options ). I am basically caching some elements and initializing some variables to be used later. If I have more than three items or images, I will build the structure mentioned before. I also set the window resize event. Finally, if the autoplay option is set to true, I trigger the auto slideshow.. 36.

(37) The _layout function will make sure that the first three items will be the ones visible in our 3d structure. All the initial items will be hidden and wrapped in the fs-temp division. I also need to resize each image according to its wrapper size. The main item’s description (the middle item) is shown while all the others stay hidden. Last, I create the navigation buttons and initialize their events, if I have more than three items. Function: The _navigate function takes control of which items will be positioned in the three visible blocks. I insert each of these item’s figure inside the block, resize the new images, and animate the width property of that same current block’s figure to 0px. In the end, I remove it leaving the new figure in its place. Also, I keep showing the middle block’s description while hiding all the others. This and also updating the current variable is done in the _slideEnd function: The last thing I need to take care is when the user resizes the window. I need to resize the visible block images accordingly. This is also done once _layout is called.. 3.3 Demo of Rotating Slideshow on Images Demo Description: The figure 3.3 and figure 3.3.1 demonstrates rotating Slideshow on images. I have to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. I can use it to spice up web sites, product pages and other projects with some CSS3 magic. I used all the 20 Indian Freedom Fighter Images.. 37.

(38) Function: HTML5: I will first lay down the HTML markup of the slideshow. The main container element is the #slideShowContainer div, which holds the #slideShow div and the previous / next links (turned into arrows with CSS).. <li><img src="img/photos/1.jpg" width="100%" alt="1" /></li>. <li><img src="img/photos/2.jpg" width="100%" alt="2" /></li>. I use HTML 5. The <li> tag is supported in all major browsers.. The slides are defined as LI elements inside of an unordered list. That the width of the images is set to 100%. This way It will scale according to the width of the #slideShow div. I include the jQuery library, our own script.js file, and the jQuery rotate plugin. I am using the plugin, so I can work with CSS3 rotations in a cross-browser fashion. CSS:. Although the #slideShow div is set to a width of 490px, its full size is actually 510px. This 20px difference scales down the slide images (as they are locked to the width of the #slideShow div), which are reduced from their normal size of 480px down to 460px. In the next step, I am using a jQuery animation to zoom in the slideshow to its full size. This way, even at full zoom, the images are actually at their regular size and there is no loss of quality.. 38.

(39) Ex: jQuery CSS3 Rotating Slideshow:. Fig. 3.3 Rotating Slideshow. Fig. 3.3.1 Rotating Slideshow. 39.

(40) JQuery. Although most modern browsers support CSS3 rotation, it is still rather tedious to work with the various vendor-specific properties. Luckily, there are plugins available that handle the cross-browser nonsense for us. I choose the jQuery rotate plugin, as it also integrates perfectly with the animate() and css() methods of the library, which means I can easily animate the rotation of elements. As I will see in a moment, I am using this in our custom rotateContainer event, which rotates the #slideShow div.. I am using jQuery’s support object to test whether the visitor’s browser supports CSS3 transformations. I am only going to display the rotation in browsers with transformation support, like the newer versions of Firefox, Google Chrome, Safari and Opera, while falling back to a plain fade in/out version of the slideshow in the rest. Internet Explorer does provide a solution for rotating elements via its proprietary filter syntax, but it can’t handle the technique I am using for this slideshow. So, in effect, going to see a working slideshow in any browser. showNext and showPrevious are what I am using to control the slideshow. These in turn execute the rotate Container event, and pass the direction and degrees as parameters. By using jQuery I created a pretty slideshow, with which I can show case my images and add a bit of interactivity to my pages. Javascript: In this case, I also define the same showNext and showPrevious events, but here they just fade in / out the images, without starting a rotation.. 40.

(41) The updateZindex() function is important, as otherwise the slides would be displayed in reverse order. This function loops through the elements in the order they currently are, and assigns a z-index property, so they are displayed correctly. updateZindex();. 3.4 Demo of JQuery lightBox plugin Demo description: I got this idea from leandrovieira.com [8]. The figure. 3.4, figure 3.4.1 and figure 3.4.2 are describes a jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. For this demo I used five Images of Indian freedom fighters. Function: $(function() { $('#gallery a').lightBox({fixedNavigation:true}); Summary: Setup jQuery lightBox plugin uses the jQuery JavaScript library, only. So, including just these two javascript files in the header. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> Including the CSS file responsible to style the jQuery lightBox plugin. <link. rel="stylesheet". type="text/css". media="screen" />. 41. href="css/jquery.lightbox-0.4.css".

(42) To make Active: There is no need to modify HTML markup to use jQuery lightBox plugin. I have used the power and flexibility of jQuery´s selector and created a set of related images. To declare the thumb image, HTML markup function is <a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a> I take the Image height as 72 and width as 72. After it, I select the links and call the jQuery lightBox plugin. <script type="text/javascript"> To select lightbox the function is: $(function() {. $('a[@rel*=lightbox]').lightBox();. for select all links that contains lightbox in the attribute rel. $('#gallery a').lightBox(); for select all links in object with gallery ID $('a.lightbox').lightBox(); for select all links with lightbox class $('a').lightBox();. for select all links in the page Then the possibility are many. Used creative or choose one in the examples above.. 42.

(43) jQuery lightBox plugin image Example 1:. Fig: 3.4 jQuery lightBox image. jQuery lightBox plugin image Example 2:. Fig: 3.4.1 jQuery lightBox plugin image. 43.

(44) jQuery lightBox plugin image Example 3:. Fig: 3.4.2 jQuery lightBox plugin Image. 3.5 Demo of Image Wall with jQuery and CSS Demo description: I got this Image Wall with jQuery and CSS from templatemonster.com. [9]. The figure 3.5, figure 3.5.1 & figure 3.5.2 Shows about the Image wall with jQuery and CSS. I created a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when I click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.. To scatter the images I use the CSS3 child selector property and the jQuery Masonry plugin by David DeSandro.. I took the images of Indian Freedom Fighters Gallery. Which I have collected.. 44.

(45) Markup:. The HTML structure is pretty straightforward: I will have a wrapper for unordered list of images and a ribbon element where I will add a closing span and a help text span.. Function:. <img src="images/thumbs/1.jpg"data-img="images/full/1.jpg" alt="Thumb1"/> The “data-img” will tells the path to the full image which will insert dynamically into the ribbon div. CSS:. First, I defined the style of the wrapper. I want it to be centered on the page and to have a width that will adapt to the window size, so I give it a width of 70%.. .iw_wrapper{ width:70%; margin:30px auto 100px auto; position:relative; } Since I am using the Masonry Plugin to minimizes vertical gaps between the images and have a neat repositioning animation when I i.e. resize the window. Next, I defined the style for the list elements. (I am assuming that including some sort of reset css that will set the margins and paddings of unordered lists to 0).. By default all the list elements to have a margin of 5px and to float: 45.

(46) ul.iw_thumbs li{ float:left; margin:5px; }. The description will be placed absolutely and in javaScript function I decided the left positioning (either it will be -200px in order to be shown left to the image or the width of the image in order to be shown to the right).. Then I style the heading and the text. The images will have a thick white border and some box shadow. I add some chaos to the list elements and the images. I adjust the margin of some list elements by selecting specific children. I take the first list element and I add a margin-left of 50 px. I have taken all the even list elements and give them a different top margin. All multiples of three will have a left margin of 20 px.. In this project I play with the heights of the images. Like that I give the whole wall a scattered look and avoid making it look like a boring grid. I also want to make the images a little bit smaller or bigger because I want to animate them to the height of the ribbon when I click on them. So this will add an interesting effect, since some images will grow and some will shrink.. ul.iw_thumbs li:nth-child(even) img{. I take the image height 20 pixel. The ribbon will be a fixed element that will come sliding out from the left or the right side depending on where the thumbnail is positioned. The width is 0 initially and I animate it to 100%.. The close and the zoom text will have the style. When I click on a thumbnail I will get “ribbon mode”, and big image will appear further clicking on ribbon mode. So I will dynamically added the image into ribbon and applied the following style. 46.

(47) .iw_ribbon img{ position:absolute; top:50%; left:50%; border:7px solid #fff; }. I centered the image, I add a top and left of 50% and define the negative margins dynamically once I know the size of the image. The margins need to be the negative half of the width and height of the image. And finally, I defined the loading span .iw_loading{ style which is an element that I will added dynamically into the list element in order to indicate that the big image is loading. JavaScript. First cache some elements and then defined a function. Function: ImageWall = (function() In the function I start by defining some variables. Next, I will define the init function init =function() which will first call the masonry plugin, calculated the windows dimensions and initialize some events.. 47.

(48) Function: getWindowsDim. = function(). Function “getWindowsDim” will get the dimensions of the window. Then I defined the initializations of some events, initEventsHandler. =. function() like the click on the thumbnail image, the closing of the ribbon and the window resize.. showRibbon. = function($el) “showRibbon” will take care of the things that. will happen when I show the ribbon.. closeRibbon. = function() Closing the ribbon will either animate the ribbon. from one side or “close” it by decreasing its height in full image mode.. I need to take care of the other things that are happening when I close the ribbon, like reset the z-index of the current image and fade out the description.. I defined what happens when I want to show the full image:. showFullImage. = function($el). And finally, I used a resize function: resizeImage. = function($image). that will care of the size of the full image, i.e. I want it to fit into the screen.. 48.

(49) Image Wall with jQuery and CSS Examples:. Figure 3.5 Image Wall with jQuery and CSS. Example of Thumb Image:. Figure 3.5.1 Image wall with jQuery and CSS. 49.

(50) Example of Full screen Image:. Figure 3.5.2 Image wall with jQuery and CSS. 3.6 Demo of Image DG crop. Demo description:. This Image DG crop idea is come from "dhtml goodies" [10], it is some how interesting in my demo I change the image. The figure 3.6 & figure 3.6.1 Shows Image DG crop a new and improved image crop script. Along with this script, I write the two additional standalone scripts DG Movable and DG Resizable, which can use to move or resize elements. I created DG Image crop script is based on these two scripts. These are two standalone scripts which can use to move or resize content.. I move the crop area and resize it by dragging the handles. I press the shift key while resizing if I want to preserve aspect ratio. The script gives easy access to the coordinates, so that I send the coordinates to the server where I perform the physical cropping of the picture.. 50.

(51) Coordinates for the demo:. { left: 150, top: 150, width: 500, height: 500 },. To crop the picture, I typically send the coordinates I get by calling the getCoordinates method to the server. On the server I used a tool like ImageMagick to crop the picture.. These are the config properties sent to the constructor of the DG.Crop class: originalCoordinates An object with the width and height coordinates for the original picture. If ommited, the preview Coordinates will be used, i.e. an aspect ratio of 1/1 Example: originalCoordinates: { width: 2272, height: 1704 } previewCoordinates An object with the width and height coordinates for the preview picture. Example: previewCoordinates : { width: 2272,. 51.

(52) height: 1704 } initialCoordinates The coordinates for the initial crop area. If ommitted, the crop area will cover the entire picture. Example: initialCoordinates : { left: 150, top: 150, width: 500, height: 500 } listeners Event listeners. I can also add events afterwards using the addEvent method Example: listeners : { render : function() { updateForm(this.getCoordinates()); }, crop : function() { updateForm(this.getCoordinates()); } } resizeConfig Config properties for the DG.resize object, i.e. the class used to resize the crop area. See below for the attributes.. 52.

(53) Example: resizeConfig: { preserveAspectRatio : false, handles : 'se' } moveConfig Config properties for the DG.movable object, i.e. the class used to move the crop area. See below for the available attributes. Example: moveConfig: { keyNavEnabled : false, } lazyShadows True to position the blue shadows around the crop area after the resize or move is completed instead of during the crop process. default = true Public methods Events These are the events: render This event fires when the widget is fully rendered beforecrop This event is fired before the crop area is moved or resized. 53.

(54) crop This event is fired during the crop process, i.e. whenever the crop area is moved or resized. aftercrop Fires after the crop is complete, i.e. when the mouse is released after moving or resizing the crop area, or after moving the crop area using the keyboard.. Example of Image DG Crop:. Fig: 3.6 Image DG crop. 54.

(55) Fig: 3.6.1 Image DG crop. HTML5 Canvas Image:. Canvas is an element defined by HTML5. It supports dynamic, scriptable rendering of 2D shapes and images. Canvas was first introduced by Apple for their Safari browser in 2004 and then was adopted in Gecko and Opera browsers. It is now a standard element in HTML5. and is supported by the current versions of Mozilla Firefox, Google Chrome, Internet Explorer, Safari, and Opera.. HTML5 Canvas: The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In order to leverage the HTML5 Canvas, I will need to place the canvas tag somewhere inside the HTML document, access the canvas tag with JavaScript,. 55.

(56) create a context, and then utilize the HTML5 Canvas API to draw visualizations. When using canvas, it's important to understand the difference between the canvas element and the canvas context, as often times people get these confused. The canvas element is the actual DOM node that's embedded in the HTML page. The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2d or webgl (3d). Each canvas element can only have one context. If we use the getContext() method multiple times, it will return a reference to the same context object. HTML5 Canvas Template. <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); </script> </body>. 3.7 Demo of Water Ripple effect using HTML5 Canvas. Demo description:. I created a water drops effect using HTML5 canvas to build this I used CSS, javascript technologies will about using javascript in modeling of water effects. This will emulation of water drops at images. I should click at image. 56.

(57) in desired place to see this effect. The below figure. 3.7. demonstrates about the water drops effect using HTML5 Canvas.. Function:. For initialization. init : function() { var canvas = document.getElementById('water'); if (canvas.getContext){. Function:. Canvas Mousedown. canvas.onmousedown = function(e) { var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offset Left, canvas.offsetTop));. Function:. Canvas Mouseup. canvas.onmouseup = funtion(e) { canvas.onmousemove = null;. Function:. To get mouse position. getMousePosition : function(e){. 57.

(58) Demo:. Fig. 3.7 Water drops effect using HTML5 Canvas. 58.

(59) Chapter 4. 4.1 Comparison between CSS2 and CSS3. The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of these modules is making it's way through the W3C in various stages of the recommendation process. CSS2 was submitted as a single document with all the Cascading Style Sheets information within it. Because each of the modules is being worked on individually, we have a much wider range of browser support for CSS3 modules. As with any new specification, be sure to test your CSS3 pages thoroughly in as many browsers and operating systems as you can.. CSS3 offers a bunch of new ways you can write CSS rules with new CSS selectors, as well as a new combinator, and some new pseudo-elements. There are lots of additional things coming to CSS3 that don't exist in CSS2 including: CSS Template layout module and CSS3 Grid positioning module- creating grids with CSS. CSS3 Text module - outline text and even create drop-shadows with CSS. Changes to the box model - including a marquee property that acts like the IE tag <marquee>. CSS3 User Interface module - giving you new cursors, responses to actions, required fields, and even resizing elements. Media Queries - allows you more flexibility when defining how a style sheet should be used. For instance, you could define a style sheet that is only for handheld devices that have a viewport larger than 20em.. 59.

(60) CSS3 is divided into many different documents called Modules. Every module adds new capability or extends features defined in CSS2 over preserving backward compatibility. Work on CSS3 started around the time of publication of the original CSS2 recommendation. Because of the modularization in CSS3, every modules has different stability and is in different status. The CSS3 version supports many more browsers than CSS2. CSS3 has other added features such as new combinator, new CSS selectors, new pseudo-elements and new style properties.. 4.2 Comparison between jQuery and javascript JavaScript is a language. jQuery is a framework built with JavaScript to help JavaScript programmers who are doing common web tasks. JavaScript is a programming language. jQuery is a library written in JavaScript. JavaScript is the language itself. While jQuery is a framework for helping you use that language. JavaScript like a foreign language which are learning, or even know. But if go to a country where it is spoken, a guide can still helps along, making journey easier. jQuery is one of many frameworks which provide help in areas that can be frustrating when writing plain JavaScript. JavaScript is a scripting language. jQuery is a framework that uses the JavaScript language to write JavaScript code faster. JavaScript was designed to add interactivity to HTML pages javaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use javaScript without purchasing a license. jQuery is a JavaScript library that handles many commonly used features and also handles the differences between, e.g., Internet Explorer and standardscompliant browsers. It's something you can use to reduce the amount of work. 60.

(61) when creating web-based applications. Everyone can use jQuery without purchasing a license note. jQuery made by java Script. jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are infinite. Javascript has long been the subject of many heated debates about whether it is possible to use it while still adhering to best practices regarding accessibility and standards compliance. The answer to this question is still unresolved, however, the emergence of javascript frameworks like jQuery has provided the necessary tools to create beautiful websites without having to worry about accessibility issues.. 4.3 Comparison between HTML 4 and HTML 5 HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. "HTML5 differences from HTML4 [12] describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes. HTML5 introduces a number of Application Programming Interfaces that help in creating Web applications. These can be used together with the new elements introduced for applications. At a high level, HTML4 had two major categories of elements, "inline" (e.g. span, img, text), and "block-level". HTML4 allowed object in head. HTML5 does not allow. HTML5 is the new standard and everything HTML5 has to offer is supported by all the important browsers. HTML has been in continuous evolution since it was introduced to the Internet in the early 1990's, HTML4 became a W3C Recommendation in 1997. The syntax of HTML5 is compatible with HTML4 and XHTML1, but not with SGML. HTML5 has acknowledged the new web anatomy. With HTML5, <header> and <footer> are specifically marked for such. Because of this, it is unnecessary to identify these two elements with a <div> tag. Again, HTML5. 61.

(62) has adopted the popular web standard. <section> and <article> allows you to mark specific areas of your layout as such, and should have a positive effect on your SEO in the end. <menu> can be used for your main menu, but it can also be used for toolbars and context menus. The <figure> element is another way to arrange text and images. There are also some new multimedia elements and attributes, such as <track>, that provides text tracks for the video element. With these additions HTML5 is definitely getting more and more Web 2.0friendly. HTML 4.0 is quite out of date the current specification is XHTML 1.1. There's no need to wait until HTML 5.0, because it will be quite similar to XHTML, but a bit simpler html 4 and html 5 give you a batter value and it free you on java script and also you store user IP and have a lot's of more. HTML is not difficult to learn, but should look at a modern version that emphasizes CSS for visual cues and layout. So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this. There are many other smaller efforts taking place in HTML5, such as betterdefined semantic roles for existing elements (<strong> and <em> now actually mean something different, and even <b> and <i> have vague semantics that should work well when parsing legacy documents) and adding new elements with useful semantics - <article>, <section>, <header>, <aside>, and <nav> should replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read. No more painful scanning to see just what that random </div> is closing - instead you'll have an obvious </header>, or </article>, making the structure of your document much more intuitive. HTML4 supports the ‘tag soup’ i.e. the ability to inscribe malformed code and get them accurately on the document. But there are no written rules or guidelines for doing this. This implies that malformed documents are to be tested on various browsers.. 62.

(63) HTML5 is being developed in such a way so that the developers need not waste their time and efforts in creating an error free web page. Unlike its predecessor, HTML5 also includes many new tags and also new names for older tags with extra features like: local storage wherein a lot of information can be stored, JS-based hacks or Flash, validation form etc. so as to make the applications easy for the developers and speedier for the users.. 4.4 Comparison between HTML5 and Flash The big advantage with HTML 5 is no more need third party plug-in like Flash or Adobe, QuickTime for multimedia. The Flash is multimedia platform this application shows audio, video, animation on the web pages or browsers. Html5 is leading in mobile world as compared to flash, If we see in the mobile world adobe has launched his flash player for mobile devices also but adobe announced recently that he will no more launching flash player for mobile devices. Because the reason is company cannot afford the large resources needed to maintain development of flash player for mobile devices. Video player of html5 has greatly influenced adobe market. YouTube version of html5 is also available which tells us that how much popularity it is getting nowadays. Html5 needs no download , it is supported by all latest browsers so no need to install every new update of flash player. So the scope of html5 is great in future as it is continuously adding features to it. HTML5 vs. Flash debate continues to rage on among developers. Everywhere you look, from newspapers to magazines to the Internet, you’re swamped with articles about these technologies, often offering conflicting advice about which is the better solution. So, with all the noise on this subject circling in the technology stratosphere, how do you make a decision on which one is best for you? Flash is a multimedia platform originally developed by Macromedia and later acquired by Adobe. By 2000, it had become the de facto standard for video playback, animated banners, and interactive multimedia web pages. Flash essentially became the standard tool in a non-standard web of multi-platform browsers. The initial HTML 5 specification was officially announced in 2007,. 63.

(64) but it did not become a major topic of discussion until April 2010. It was at that time that then-CEO of Apple, Steve Jobs, issued a public letter titled "Thoughts on Flash" where he concludes that "[Adobe] Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win." Proponents of Flash argue that, with over 1 billion users worldwide, Flash isn’t going away any time soon. The numbers, according to Adobe, support them: 70% of web-based games are built using Flash, including 24 of the top 25 Facebook games, 75% of web videos are viewed using Flash (YouTube was solely Flash until adding HTML5 video playback in 2011), 98% of enterprises rely on the Flash Player and more than 3 million developers use Flash technology finally 85% of the most-visited websites use Flash in one form or other. Flash also argue that, with 99% of browsers supporting the technology, they have a much larger audience reach. In addition, since all of the Flash “code” is compiled into a SWF file, someone looking to view the source would have to crack two levels of encryption to get what they need, a fact that many developers appreciate. Plus, because it’s owned by a single company, they (Adobe) have entire control on the technology’s innovation rate. HTML5 advocates argue that several of the things Flash see as pros are actually major drawbacks. Because the technology is driven by one company, they and they alone determine the future direction of Flash. Because the specification for HTML is developed by an open standards development consortium, they rely on feedback, allowing developers to shape the future growth of HTML.. Developers that prefer HTML also argue that because Flash code is compiled, there is no way for a search engine to properly spider the content. That means all the great content in your flash banner, animation, or video adds nothing to your site’s search engine optimization (SEO). HTML content is read as plain text by a spider and, when properly formatted, can provide a big boost to your site’s search engine placement. Finally, while Flash can boast more current browser support, HTML5 is rapidly gaining in the adoption of its respective. 64.