Chapter 1 Introduction
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.
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
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
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
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 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.
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
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
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
Ranges
Colors
Dates and Times
HTML5 has the following new form elements:
<datalist>
HTML5 has several new attributes for <form> and <input>.
New attributes for <form>:
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")
2.5.2 jQuery Selectors:
The Table 2.1 defines jQuerySelectors. 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
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.
2.6.3 jQuery
jQuery is a multi-browser JavaScript library designed to simplify the client-side 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 plug-ins 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
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 command-line 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.
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>
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.
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:
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
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