Chapter 4 Comparisons
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 work on the websites. Image galleries are very light in weight and it loads quickly even on very slow speed internet. In my work I used 20 Indian Freedom Fighters Images these new elements in HTML5 other researchers can also use this demo for future work. These demos can also use in mobile devices like iphone, android & browsers like Chrome, Mozilla firefox, Safari, Opera. Table 5.1 defines about the browser's comparison of image demos.
Table 5.1 Image Browser's Comparison
Browsers
&
Image Demo
Chrome Safari Opera Mozilla Internet Explorer
Future Work
HTML5 and CSS3 are web techniques that guarantee a successful future of web designing and development. HTML5 and CSS3 are future pioneers of web designing. HTML5 and CSS3 are the newest versions of two important web languages that have been around for some time now HTML has been in the same version for over 10 years. These new languages promise a host of new web design techniques and possibilities for amazing web services. These new web standards are being adopted by modern web browsers now and should be fully supported in a year to 18 months.
HTML5 also promises an expanded suite of document structure tags to support easy transplanting of page content such as through syndication, and will provide more semantic meaning about the structure of a document. CSS3 promises to make interactive web features easier to program and provides a new bag of tricks that CSS implementers can use. Most of what can be done can already be done through Flash or javascript but historically some of these have been "hacks" rather than fully supported web features.
The specifications for both HTML5 and CSS3 are still in flux but on the home stretch for wide adoption. Some browsers already support most of the features such a Google's Chrome browser and Safari. Internet Explorer 9 is slated to fully support both new specifications. Image galleries in many styles so they could perfectly fit to sites, running smoothly and seamlessly. HTML5 and JavaScript Projects is for the developer who wants and needs to move to the next level of Web development, including more sophisticated programming and the design and construction of sets of applications. This book targets people who want to go beyond the basics of HTML5, CSS3. The book will be helpful for people working in teams, where considerable effort is required to create image gallery websites.
References
[1] "Introduction-Free HTML Tutorial",
http://www.html.net/tutorials/html/introduction.php
[2] "W3Schools.com", http://www.w3schools.com/html/default.asp
[3] “What is HTML 5.”
http://webdesign.about.com/od/html5/qt/what_is_html5.htm.
[Accessed: 03 May, 2012].
[4] What is HTML5 The Newest Version of HTML By Jennifer Kyrnin, http://webdesign.about.com/od/html5/qt/what is html5.htm
[5] HTML Current Status - W3C.”
http://www.w3.org/standards/techs/html#w3c_all.[Accessed:02 May, 2012].
[6] “JavaScript - O’Reilly Media.”
http://oreilly.com/pub/a/javascript/2001/04/06/js_history.html.
[Accessed: 04 May, 2012].
[7] TriplePanelImageSlider: A jQuery image slider with three panels and 3D look:
http://tympanus.net/Tutorials/TriplePanelImageSlider/
[8] Jquery lightBox Plugin:
http://leandrovieira.com/projects/jquery/lightbox/
[9] Jquery and CSS3 Image wall:
http://blog.templatemonster.com/2012/02/17/jquery-css3-image-gallery-slideshow-tutorials/
[10] Image DG crop:
http://www.dhtmlgoodies.com/scripts/dg-crop/dg-crop.html
[11] Water Ripple effect using HTML5 Canvas:
http://www.script-tutorials.com/how-to-create-water-drops-effect-using-html5-canvas/
[12] “HTML & CSS - W3C.” [Online].
http://www.w3.org/standards/webdesign/htmlcss#whatcss.
[Accessed: 04 May, 2012].
[13] "Introduction to HTML4",
http://www.w3.org/TR/html401/intro/intro.html
[14] "XHTML", http://en.wikipedia.org/wiki/XHTML, Developed by World wide web, Published by 23 November 2010.
[15] Steven Pemberton, "HTML and XHTML Frequently Answered Questions"
http://www.w3.org/MarkUp/2004/xhtml-faq, Version date: 21 July 2004
[16] Stephen Shankland, "Opera for Android to get HTML5 video, Flash", http://news.cnet.com/8301-30685_3-20024664-264.html
[17] Rogerjohansson, "Seven HTML related working drafts published", http://www.456bereastreet.com/archive/201003/seven_html_relate d_working_drafts_published/
[18] Dive Into HTML5 by Mark Piligrim With contribuition from the community,
http://diveintohtml5.org/detect.html
[19] Cloudberry: An HTML5 Cloud Phone Platform for Mobile Devices Antero Taivalsaari and Kari Systä, Nokia
http://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=06178208, Published by July/August 2012.
[20] HTML 4.0 W3C Recommendation December 18, 1997:
http://www.w3.org/TR/html4/
[21] Pfeiffer, S. and Parker, C. (2009). "Accessibility for the HTML5
<video> element. In proceedings of the 2009 International
Cross-Disciplinary Conference on Web Accessibililty (W4A)", pages 98–100.
ACM.
[22] Harjono, J., Ng, G., Kong, D., and Lo, J. (2010). Building smarter web applications with HTML5. In Proceedings of the 2010 Conference of the Center for Advanced Studies on Collaborative Research, pages 402–403. ACM.
[23] W3C, 20112012., HTML5, "A vocabulary and associated APIs for HTML and XHTML", available at:
http://dev.w3.org/html5/spec/Overview.html (28 March, 2012).
[24] M. Pilgrim, HTML5: Up and Running, p. 23, O'Reilly Media
[25] Steven J. Vaughan-Nichols, "Will HTML 5 Restandardize the Web?", http://u.cs.biu.ac.il/~ariel/download/mm664/resources/internet_we
b/html5.pdf, Published by the IEEE Computer Society APRIL 2010.
[26] Grigsby, J., 2009 HTML5 from a Mobile Perspective,
http://cloudfour.com/html5-from-a-mobile-perspective/ (Accessed:
28 March, 2012).
[27] “Geolocation - Dive Into HTML5.”
http://diveintohtml5.info/geolocation.html. [Accessed: 20 May, 2012].
[28] “New Tricks in XMLHttpRequest2 - HTML5 Rocks.”
http://www.html5rocks.com/en/tutorials/file/xhr2/. [Accessed: 15 May, 2012].
[29] “HTML Current Status - W3C.”
http://www.w3.org/standards/techs/html#w3c_all. [Accessed: 02 May, 2012].
[30] “How browsers work.”
http://taligarsiel.com/Projects/howbrowserswork1.htm#The_brows er_hig h_level_structure. [Accessed: 08 May, 2012].
[31] “The developer’s guide to the HTML5 APIs.” [Online].
http://www.netmagazine.com/features/developer-s-guide-html5-apis. [Accessed: 04 May, 2012].
[32] Pieters, S. 2012, HTML5 differences from HTML4, published 22.1.2008. http://dev.w3.org/html5/html4- differences/#new-apis [Accessed: January 11, 2012].
[33] [3] Enser P G B (1995) “Pictorial information retrieval” Journal of Documentation, 51(2), 126-170
http://jis.sagepub.com/content/23/4/287. [Accessed: August 1, 1997].