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