Demo of Water ripple effect using HTML5 Canvas Image

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

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){

Demo:

Fig. 3.7 Water drops effect using HTML5 Canvas

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.

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 standards-compliant browsers. It's something you can use to reduce the amount of work

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

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.0-friendly. 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 better-defined 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.

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

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

features. Almost all modern browsers include support for HTML5, not to mention tablets and mobile phones. Proponents of Flash argue that, with over 1 billion users worldwide, Flash isn’t going away any time soon. HTML5 advocates argue that several of the things Flash fans see as pros are actually major drawbacks. Flash also argue that, with 99% of browsers supporting the technology, they have a much larger audience reach. Developers that prefer HTML5 also argue that because Flash code is compiled and that 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).

4.5 Comparison between HTML5 and Native Mobile Applications

Some companies are already taking advantage of the HTML5 bandwagon. For example, fashion brand Burberry made news this past fall when it opted for HTML5 to launch a mobile app based on its new watch. The Guardian and Financial Times newspapers both make compelling use of HTML5 in their mobile applications. And the Apple iPad mobile digital device application for LinkedIn is almost entirely built from HTML5.

HTML5 is the catch all term used for the latest protocols that define the content, layout, and navigation of Web pages through browsers to took the Internet by storm. Yet concerns surrounding HTML5’s architecture linger, along with a debate concerning the use of native mobile apps versus apps developed for the mobile Web.

Why should anyone care about this. Because as consumers spend more time on their smartphones surfing the Web, downloading apps, playing games and streaming movies, app creators must determine how best to create richer and more functional experiences across an ever-growing number of device platforms. The wrong choice can result in considerable extra expense, or in users being dissatisfied with poor quality and lack-luster performance.

Compared to previous versions of HTML, HTML5 makes it easier to create feature to rich Web based applications that can be updated remotely with new functionality without requiring users to download and install an update each time. Generally speaking, HTML5 helps reduce the functionality gap between mobile websites and applications.

By contrast, a native application is installed directly onto the smartphone and can work, in most cases, with no Internet connectivity, depending on the nature of the application. Compared with an HTML5 mobile application, which can be developed once and run on many different platforms, a native application approach can be significantly more expensive, since these applications must be developed platform by platform.

4.6 Browsers Comparison

1. CSS3 Image Gallery

The below table 4.1 shows that how CSS3 Image gallery work in various browsers, as we can see the demo works in chrome, Safari, Opera, Mozilla and Internet Explorer .

Table 4.1 CSS3 Image gallery Browser Comparison

Browsers Chrome Safari Opera Mozilla Internet Explorer

CSS3 Image gallery

Yes Yes Yes Yes Yes

2. Frame

The below table 4.2 shows that how Frame Browser comparison work in various browsers, as we can see the demo works in chrome, Safari, opera &

Mozilla Firefox but it doesn't support in Internet Explorer .

Table 4.2 Frame Browser Comparison

Browsers Chrome Safari Opera Mozilla Internet Explorer

Frame Yes Yes Yes Yes No

3. Rotating Slideshow

The below table 4.3 shows that how Rotating Slideshow comparison work in various browsers, as we can see the demo works in chrome, Safari, Opera &

Mozilla Firefox but it doesn't support in Internet Explorer .

Table 4.3 Rotating Slide Show Browser Comparison

Browsers Chrome Safari Opera Mozilla Internet Explorer

Rotating Slide Show

Yes Yes Yes Yes No

4. Triple Panel Image Slider

The below table 4.4 shows that how a jquery Triple Panel Image Slider work in various browsers, as we can see the demo works in chrome, Safari, Opera Mozilla Firefox and Internet Explorer .

Table 4.4 Triple Panel Image Slider Browser Comparison

Browsers Chrome Safari Opera Mozilla Internet Explorer

Triple Panel Image Slider

Yes Yes Yes No No

5. jQuery lightBox plugin

The below table 4.5 shows that how a jquery lightBox plugin works in various browsers, as we can see the demo works in chrome, Safari, Opera Mozilla Firefox and Internet Explorer .

Table 4.5 jQuery lightBox plugin

Browsers Chrome Safari Opera Mozilla Internet Explorer

jQuery lightBox

plugin

Yes Yes Yes Yes No

6. Image Wall with jQuery and CSS

The below table 4.6 shows that Image Wall with jQuery and CSS how it works in various browsers, as we can see the demo works in all browsers.

Table 4.6 Image Wall with jQuery and CSS

Browsers Chrome Safari Opera Mozilla Internet Explorer

image Wall with

jQuery and CSS

Yes Yes Yes Yes Yes

7. Image DG Crop

The below table 4.7 shows that Image DG Crop how it works in various browsers, as we can see the demo works in all browsers.

Table 4.7 Image DG Crop

Browsers Chrome Safari Opera Mozilla Internet Explorer

Image DG Crop

Yes Yes Yes Yes Yes

8. Water Ripple effect using HTML5 canvas

The below table 4.8 shows that HTML5 Canvas how it works in various browsers, as we can see the demo works in all major browsers except it does not works in Chrome.

Table 4.8 Water Ripple effect using HTML5 canvas

Browsers Chrome Safari Opera Mozilla Internet Explorer

HTML5

Canvas No Yes Yes Yes Yes

Google Chrome [29] is remarkably fast. In fact, the internet browser is the fastest of all major browsers. So Google Chrome is definitely way out in front in the race for HTML compatible browsers. Firefox 4.0 is next in line getting 249 out 400 possible points. They are still missing a lot of key elements but got bonus points for the audio and video implementation as well as their parsing rules. Internet Explorer 8 is pretty far behind the curve. IE scored a total of 32 points out of 400. Internet Explorer has been playing catch up with rendering design since the implementation of CSS and their poor showing here tells us it does not seem like much will change in the future. In this work I have represented HTML5 features for example CSS3 Image gallery, Frame, Rotating Slideshow, Triple Panel image slider, jquery light box plugin, Image wall with jquery and CSS and Image DG Crop, Ripple effect using HTML5 canvas. That features we can use in latest browsers. In future work I want to make demos more usable to users.

Chapter 5 Conclusions and Discussions

Image gallery is basically designed to show images on our websites and image galleries is now becomes a part of more than 90% websites. People uses different image galleries based on different software or scripts.

In this Thesis I have represented how HTML5, CSS3, jQuery and javascript

In this Thesis I have represented how HTML5, CSS3, jQuery and javascript