HTML5 for Java Developers. Sang Shin Founder and Chief Instructor JPassion.com

Size: px

Start display at page:

Download "HTML5 for Java Developers. Sang Shin Founder and Chief Instructor JPassion.com"

Gillian West
6 years ago
Views:

1 HTML5 for Java Developers Sang Shin Founder and Chief Instructor JPassion.com

2 A few words before we start This is 1-hour version of 3-day HTML5 codecamp :-) You can get the codecamp materials (slides, hands-on labs, recordings) from below available until May 21st (Wednesday) > We are going to cover the following topics as much as we can and as much demo as possible > Geolocation > Media > Storage > WebWorker, SSE, Drag & Drop > Messaging > WebSocket (most important) > WebRTC 2

3 HTML5 Geolocation 3 3

4 Sources of Location Metadata A device can use any combination of the following sources > IP address > Coordinate triangulation > Global Positioning System (GPS) > Wi-Fi access point > GSM or CDMA cell phone IDs > User defined 4

5 IP address-based Location Data How it works > HTTP request has IP address of the sender Pros > Available everywhere Cons > Might not be accurate accuracy granularity is only to the city level > The IP address might be the one of the service provider not the client machine itself Example > Website selects a default language (or customized contents) based on the IP addresses of its clients 5

GPS-based Location Data How it works > Devices passively receive signals from multiple GPS satellites and then compute its location Pros > High accuracy Cons > Require an unobstructed view of the

6 GPS-based Location Data How it works > Devices passively receive signals from multiple GPS satellites and then compute its location Pros > High accuracy Cons > Require an unobstructed view of the sky, so they generally can be used outdoors and they often do not perform well within forested areas or near tall buildings > Might take long time to get the location data > Require GPS-hardware 6

7 Wi-Fi based Location Data How it works > Devices computes the location using the distances from multiple Wi-Fi access points (It is called WiFi-triangulation) Pros > High accuracy > Works indoors > Fast Cons > Does not work well where Wi-Fi access points are scarce (rural areas) 7

8 Cell Phone Location Data How it works > Devices computes the location using the distances from multiple Cell phone towers Pros > Fair accuracy > Works indoors > Fast Cons > Does not work where cell phone towers are scarce (rural areas) 8

9 Geolocation API One-time position request void getcurrentposition(positioncallback successcallback, optional PositionErrorCallback errorcallback, optional PositionOptions options); Repeating position request long watchposition(positioncallback successcallback, optional PositionErrorCallback errorcallback, optional PositionOptions options); void clearwatch(long watchid); 9

10 Demo: HTML5 Geolocation 10

11 HTML5 Media 1111

12 Why HTML5 Video? Runs native in the browser > No plug-in required Simpler coding > No need to have different coding for different formats Can be manipulated just like any other DOM element > Transformation (moving, resizing) & styling can be performed It is the standard > Future proof > No vendor lock-in > Wide-adoption 12

13 <audio>/<video> HTML5 defines new elements which specify a standard way to embed an audio/video file on a web page > <audio> > <video> 13

14 Video Containers An video file is container file, which contains > Video stream > Audio stream > Meta data The video and audio streams are combined to play video The meta data includes > title, subtitle, cover art, captioning info., etc 14

15 Video Container File Formats MP4 (video_file.mp4) > H.264 (video codec format) + AAC (audio codec format) Ogg (video_file.org or video_file.ogg) > Theora (video codec format) + Vorbis (audio codec format) WebM (video_file.webm) > VP8 (video codec format) + Vorbis (audio codec format)... 15

16 What is and Why Video/Audio Codec? What are codecs? > Codecs (Coders/Decoders) are algorithms used to encode and decode a particular video/audio stream so that they can played back Why codecs? > Raw media files too big to transmit over the internet Example video codecs > H.264, VP8, Ogg Theora Example audio codecs > AAC, MPEC-3, Orgg Vorbis 16

17 Video Codecs and Browser Support There is NOT a single Codec that is being supported by all browsers at this point :-( MP4/H.264 > Chrome, Safari, IE9, Firefox* > Potential royalty payment issue WebM > Chrome, Firefox, Opera, IE9 > Open source Ogg Theora > Chrome, Firefox, Opera > Open source 17

18 <video...> With a single source <video src="movie.webm" controls> Your browser does not support HTML5 video. <video> With multiple sources <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video> 18

19 <video> element Attributes controls autoplay poster loop preload width/height 19

20 <track> sub-element (of <video> element) Used for providing time triggered text to the viewer 5 Info. types of tracks Subtitles Captions Chapters - Used to create navigation within the video Descriptions (not supported yet) - Text descriptions of what's happening in the video > Metadata (not supported yet) - Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user > > > > WebVTT format 20

21 <track> sub-element with attributes A video with two subtitle tracks - English subtitle is the default. <video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="english" default> <track kind="subtitles" src="subtitles_ko.vtt" srclang="ko" label="korean"> </video> 21

22 Demo: HTML5 Media 22

23 HTML5 Offline Storage 2323

24 HTML5 Offline Storage Types Application Cache Local and session storage IndexedDB File system 24

25 Why Application Cache (AppCache)? Why Application cache? > Existing browsers have caching mechanisms, but they're unreliable and don't always work as you might expect > Existing browsers do not allow app-specific control for developers Application cache enables > Offline browsing - users can navigate your full site even when they're offline > Higher speed - cached resources are local, and therefore load faster > Reduced server load - the browser will only download resources from the server that have changed Where Application cache information specified? > In the Application cache manifest file 25

26 Application Cache Manifest File What is application cache manifest file for? > You specify which application files the browser should cache and make available to offline users through App. Cache Manifest file Where do you specify the location of application cache manifest file? > In the <html..> tag with manifest attribute <!DOCTYPE html> <html manifest="my_cache1.appcache"> <head>... </head> <body>... </body> </html> 26

27 HTML5 Storage API Session storage API > Persists only as long as the window or a tab is alive > Values are visible only within the window or tab in which it is created > Survives page reloading but will be deleted when the user closes the window or the tab > Good for storing sensitive data Local storage API > Persists beyond page restarts > Values are shared across every window or tab from the same origin > Good for storing preferences Only String datatype 27

28 What is and Why IndexedDB? Local storage vs. IndexedDB > Local storage - lets you store data using a simple key-value pair > IndexedDB - a more powerful option, lets you locally store large numbers of objects and retrieve data using robust data access mechanisms Replaces Web SQL > WebSQL Database is deprecated by W3C in 2010 > WebSQL Database is a relational database access system, whereas IndexedDB is an indexed table system. > IndexedDB provides indexing, transactions, querying, cursor support 28

29 FileSystem APIs What is FileSystem APIs? > With the FileSystem API, a web app can create, read, navigate, and write to a sandboxed section of the user's local file system 3 Types of FileSystem APIs > Reading and manipulating files: File/Blob, FileList, FileReader > Creating and writing: Blob(), FileWriter > Directories and file system access: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem 29

30 Asking for more storage For persistent storage for Files System API, the default quota is 0, so you need to explicitly request storage for your application. Call requestquota() with the following > Type of storage > Size > Success callback // Request Quota (only for File System API) window.webkitstorageinfo.requestquota(persistent, 1024*1024, function(grantedbytes) { window.webkitrequestfilesystem(persistent, grantedbytes, oninitfs, errorhandler); }, function(e) { console.log('error', e); }); 30

31 Demo: HTML5 Storage 31

32 Web Workers, Server-Sent Events (SSE), Drag & Drop 3232

33 Why Web Worker? Without Web workers > Long-running JavaScript tasks can block other JavaScript tasks > Cause browser UI hang With Web workers > Background processing through the web workers > No more unresponsive script warning > Caller and web worker can send/receive messages 33

34 What is SSE? A client web app "subscribes" to a stream of updates generated by a server and, whenever a new event occurs Useful for one-directional server to client data stream > Stock tickers > News feeds 34

35 SSE vs WebSocket SSE is one-directional (server to client) while WebSocket is bi-directional SSE data is sent over traditional HTTP while WebSocket data is sent over WebSocket channel > SSE server does not need to have additional software SSE has features that WebSocket does not > Automatic reconnection > Event IDs > Ability to send arbitrary events. 35

36 Players in Drag and Drop Scheme Source element (where the drag originates) > The source element can be an image, list, link, file object, block of HTML...you name it Target (an area to catch the drop) > The target is the drop zone (or set of drop zones) that accepts the data the user is trying to drop > Not all elements can be targets (e.g. images) > An element can be both a source and a target Data payload (what we're trying to drop) 36

37 Dragging Events There are a number of different events to attach to for monitoring the entire drag and drop process dragstart event > Used with source to initiate the drag-and-drop operation drag event > Used with source to continue the drag-and-drop operation dragenter, dragleave, dragover event > Used with targets to provide visual cues during the drag process drop event > Used with current target to handle the drop dragend event > Used with source to handle the drop is done 37

38 Demo: HTML5 WebWorker, SSE, Drag & Drop 38

39 HTML5 Cross-Domain Messaging 3939

40 What is Same Origin Policy? The same origin policy does not allow JavaScript code loaded from one origin accessing or communicating with documents from another origin > In other words, documents retrieved from distinct origins are isolated from each other JavaScript codes are considered from the same origin only if they are loaded from the sites that have the same > protocol ( ws:, wss:) > host > port The same origin policy is imposed by browsers 40

41 Same Origin Policy Examples The JavaScript code from can access the following documents since they are considered from same origin > > But it cannot access the following documents since they are considered from different origins > (different protocol) > (different port) > (different host) 41

42 Issues of SOP dealt with in HTML5 Issue #1 > A document running in a window A (or iframe A) cannot access a document running in window B (or iframe B) > HTML5 solves this through Cross-Domain Messaging Issue #2 > A document loaded from origin A cannot access service running in Origin B through traditional XHR > HTML5-enabled browsers supports Cross-Origin Resource Sharing (CORS) and CORS-enabled XMLHttpRequest2 (XHR2) 42

43 What is & Why Cross-Domain Messaging? Before Cross-Domain Messaging, communications between iframes, windows, tabs are disallowed by browser > In order to prevent XSS Cross-Domain Messaging enables secure cross-domain messaging across iframes, windows, tabs regardless of origins of the documents they loaded > These iframes, windows, tabs can send/receive data to/from other iframes, windows, and tabs of different origins 43

44 CORS Scheme The HTTP request is sent with an extra header called Origin > The Origin header contains the origin (protocol, domain name, and port) of the requesting page so that the server can easily determine whether or not it should serve the response > Origin: If the server decides that the request should be allowed, it sends a Access-Control-Allow-Origin header echoing back the same origin that was sent or * if it s a public resource > If this header is missing, or the origins don t match, then the browser disallows the request > Access-Control-Allow-Origin: > Access-Control-Allow-Origin: * 44

45 XMLHttpRequest2 (XHR2) Modern browsers create CORS-aware XHR object (sometimes called XHR2) with the Origin header automatically > If the CORS-enabled server sends back with Access-Control-Allow- Origin header with proper value, then the browser will allows crossdomain access var xhr = new XMLHttpRequest(); xhr.open("get", " true); xhr.onload = function(){ //instead of onreadystatechange //do something }; xhr.send(null); 45

46 Demo: HTML5 Cross-Domain Messaging 46

47 Learn with Passion! JPassion.com 4747

Technologies Web Côté client

Technologies Web Côté client INF228 2013 Multimedia and the Web 218 Multimedia Formats on the Web Images JPG, PNG, GIF, SVG, WebP, SVG Video Container vs. Codec Containers: MP4, OGG, MPEG-2, WebM Codecs: