Review of Emerging Technology of Web Applications Using HTML 5

Transcription

1 Review of Emerging Technology of Web Applications Using HTML 5 1. Introduction HTML5 is being developed as the next major revision of the HTML standard. It attempts to solve issues found in previous iterations of HTML and addresses the needs of web applications, an area previously not adequately covered by HTML. In this revision, new features are introduced to help web application design and new elements are introduced to provide enhanced functionality [1]. Main features of HTML5 [2]: Canvas A new element <canvas> is defined. A canvas is a rectangle in your page and javascript can be used to draw anything you want. Video In HTML5, video is a native element of HTML. It eliminates the use of any media player plug-ins, e.g. Adobe Flash, Microsoft Silverlight, Real Player, etc. Local storage Local storage provides a way for web sites to store information on the computer and retrieve it later. The concept is similar to cookies, but it s designed for larger quantities of information. Web workers Web workers provide a standard way for browsers to run Javascript in the background, not affecting the use interface and its response level in the case of load-heavy operations. Offline web applications Offline web applications provide the opportunities that you can still work in the application even if the internet is disconnected. Geolocation Geolocation has the ability to figure out where you are in the world. It may use you IP address, you wireless connection, which cell tower your phone is talking to, or dedicated GPS hardware. New Input types A dozen of new input types are defined, e.g. search, number, range, color, etc. Drag and drop HTML5 comes with a Drag and Drop API that brings native drag and drop support to the browser [3]. Web sockets [4][5] The WebSocket interface defines a full duplex communications channel that is exposed via a Javacript interface in HTML5 compliant browsers. 2. Examples of web applications using HTML 5 TwitPic Image Uploader [6][7]

2 This application allows you to drag and drop items inside of the web page and drag images from your desktop directly into the browser. You can edit and render image due to features of canvas element. Images can be edited offline as well. YouTube [8] YouTube begins experimenting with HTML5 embeddable players. A HTML5 supported video: 3. Emerging Technology of Web Applications Using HTML 5 Detecting of HTML 5 feature support in web browser Since HTML5 features are not supported by all types of browsers currently, it is necessary for web applications to have the ability to detect whether a browser support HTML5 features. [9] provides ways to detect the support of canvas, video, local storage, web workers, offline web applications, geolocation, etc. Modernizer [10], an HTML5 detection library is also introduced. Using the HTML5 <video> tag with a flash fallback [11][12] The simplest form to implement a HTML5 video playback: <video src="someclip.mp4" controls /> Browsers may support different type of codec, for instance, Safari plays back MPEG4 and Firefox currently only support Ogg Theora. Therefore we provide both formats in the same <video> tag: <video controls> <source src="video.m4v" type="video/mp4" /> <!- - MPEG4 for Safari - - > <source src="video.ogg" type="video/ogg" /> <!- - Ogg Theora for Firefox 3.1b2 - - > </video> For old browsers that don t support <video>, we simply degrade to FLASH using SWFObject and javacript. [11] Details the implementation. Building a consistent looking video player across browsers [13] [14]

3 Each browser provides its own different look and feel for the video players. To make our video player look consistent in different web browsers, we need to create our controls (e.g. play, pause, etc) using HTML, CSS, SVG or whatever else we like. [14] provides detailed information on how to do that. Accessible HTML5 video with javascripted captions [15][16][17] Video with transcripts or captions is an important feature to increase the accessibility of web applications. [16] provides a way to use javascript to achieve that. A transcript is stored as plain text on the page. For browsers with javascript enabled, you should be able to see individual lines of the transcript overlaid on top of the video. Allowing URLs containing video offsets [18] [19] [20] To implement bookmarks in our Spoken Media Notebook, i.e. video play starts from a specified offset, one useful feature is to specify the video offset in URLs. The hash component of a URL is the text after the # character, e.g. W3C Media Fragments spec [21] defines hashes of the form #t=n.m, where n.m is the timecode in seconds for the media displayed in a video element within the current page. [18] uses javascript to parse the hash in the URL and plays the video at the timecode offset specified by the hash.. A newly added event of the window hashchange event is used to trigger the javascript. Local rendering of interactive maps [22] Most current Web maps make use of a server-side tile generator and cache system, where the desired map is rendered ahead of time and cut into image tiles at a variety of scales depending on user requests made to the server. While with the powerful features of HTML5 and faster javacript processing, we can create maps which are not pre-rendered, but generated on-the-fly. The original map information is sent from the server and stored on the client (HTML5 local storage). Javascript running on the client is then used to make dynamic HTML5 mapping (canvas), which means maps can move, adapt and redraw even with the client disconnected to the server. 4. Conclusion HTML5 provides powerful features such as multi-threading, geolocation, embedded databases, embedded video and web-based drawing, which gives maximum flexibility to web developers.

4 5. References By using HTML5, javascripts and CSS, a web application is more like a desktop application, which provides fast responsiveness, and at the same time, exchanges information with the outside world. [1]. HTML5 - A vocabulary and associated APIs for HTML and XHTML. [2]. Dive into HTML5. [3]. Native Drag and Drop. [4]. Making Web Applications Faster Using HTML5. [5]. Building Real Time Web Applications Using HTML5 Web Sockets. [6]. A HTML5 Offline Image Editor and Uploader Application. [7]. TwitPic. [8]. YouTube HTML5 Video Player. [9]. Detecting HTML5 Features. [10]. Modernize. [11]. Using the HTML5 <video> Tag with a Flash Fallback. [12].Quick Tip: HTML5 Video with a Fallback to Flash. css- techniques/quick- tip- html- 5- video- with- a- fallback- to- flash/ [13]. Introduction to HTML5 Video. [14]. Building a custom HTML5 video player with CSS3 and jquery. [15]. Silvia Pfeiffer, Conrad Parker: Accessibility for the HTML5 <video> element. Proceedings of the 2009 International Cross-Disciplinary Conference on Web Accessibililty (W4A), SESSION: Web accessibility challenge, Pages: , 2009 [16]. Accessible HTML5 Video with JavaScripted captions. [17]. HTML5 Video with JavaScripted synchronised captions: demo.

5 [18]. Demo of deep hyperlinking into HTML5 video. [19]. Experiments with HTML5 video and media fragment URI references. [20]. Onhashchange A HTML 5 Feature Which Can Allow URLs Contaning Video Offsets. [21]. Media Fragments Working Group. [22]. Boulos MN, Jeffrey W, Jianya G, Peng Y: Web GIS in practice III: HTML5 and the canvas element for interactive online mapping. Int J Health Geogr 2010, 9:14.