Development of Internet Applications HTML5 Ing. Jan Janoušek 7

Storage -Replaces Cookies -data are not sent with each request -ability to save larger amount of data -accesible only on client side -Key-value storage (string) -LocalStorage – data are stored even when user close the browser -SessionStorage – data are stored only during one session if(typeof(Storage)!=="undefined") { // Yes! } else { // Sorry! No web storage support.. }

Web database -Web SQL Database -Relational database (SQL) -No-more part of HTML5 (but implementedy in some browsers) -Methods: openDatabase, transaction, executeSQL,… -IndexedDB -Object database -Fast searching using indexes -Synchronous or asynchronos access -Support of transactions

Off-line applications -Whole page can be used without internet access -Works like cahe -Based on Cache Manifest -file with MIME type „text/cache-manifest“ -Contains 3 sections CACHE – defines content that should be fetched only from local cache NETWORK – defines content thath should be downloaded from server every time FALLBACK – defines content that should be replaced with other content when internet connection is not available -Cache is updated when manifest file is changed, when user clear cache or using JavaScript API.

Web Workers -Similar to threads -Execute external JS file as separated proces. -Primary object is called „Worker“. -Communication between page that executed worker and worker is performed using messages („postmessage“, „onmessage“) -Can´t access web page by which is executed (can´t access DOM, object window, document, etc…)

Drag & Drop -Any content can be dragged & dropped from and to the browser window. -For data transfer, not for visual component movement (like jQuery IO draggable & droppable). -HTML element that should be draggable have to be marked by attribute draggable=„true“ -Droppable area (element) should implement events ondragstart, ondrop, ondragover -Data can be set/get using JS methods dataTransfer.setData() and dataTransfer.getData()

File API -Enable work with Files (they can be dropped to browser using Drag & Drop API, selected using file input form element, etc…). -File API contains JS objects „File“, „FileList“, „Blob“, „FileReader“, „BlobBuilder“, „FileWriter“ and „URL“. -Data can be accessed as text, binnary data, or base64 encoded data.

FileSystem API -Offers access to virtual file system in user computer (sandboxed). -Accessible using method „requestFileSystem“. -Can be used for example for: -File upload -Cache -Multimedial data storage -File editing -Off-line work -Implemented only in Chrome

Geolocation API -Offers access to current user GPS postion (latitude, longtitude, altitude, accuracy, speed and timestamp). -User have to enable access to current position for concrete web page. -Depends on capabilities of concrete device (ideal for mobile devices, but not for desktop computers). -API is accesible using object „navigator.geolocation“. -Methods „getCurrentPosition“ and „watchPosition“ -Requires HTTPS protocol if ("geolocation" in navigator) { /* geolocation is available */ } else { /* geolocation IS NOT available */ } if ("geolocation" in navigator) { /* geolocation is available */ } else { /* geolocation IS NOT available */ }

Others -Device orientation -Camera and microphone -Voice input/output -Touch gestures -Battery state -Fullscreen -etc… Zdroj:

Mobile applications (native) based on HTML5 -Applications are bulit using standard web technologies (HTML, CSS3, JS) + special framework and then „compiled“ as a native applications. -There are some APIs (provided by framework) for using device capabilities (camera, contacts, storage, accelerometer, notifications, etc...) -Examples of frameworks are PhoneGap, Cordova and others. -Framework just embed your HTML5 application to native application that use browser view for execution of HTML5 application.

US/docs/Web/Guide/HTML/HTML5