HTML5 features & JavaScript APIs
1 like560 views
This document is a presentation by Fisnik Doko on HTML5 features and JavaScript APIs, highlighting the improvements and new elements introduced in HTML5 compared to previous versions. It covers various aspects such as document structure, input types, APIs for file handling, drag-and-drop functionality, multimedia elements, geolocation, and offline support. There are also discussions on local storage, IndexedDB, and CSS transformations aimed at enhancing web application development.
HTML5 features & JavaScript APIs
- 2. Fisnik Doko Microsoft Certified Trainer / Semos Education HTML5 features & JavaScript APIs 2
- 3. Please Mute your mobile devices 3
- 4. General Sponsors Platinum Sponsors Silver Sponsors Gold Sponsors Bronze Sponsors 4
- 5. Speaker Fisnik Doko • MCSD – Web Apps • MCPD – Web Developer • MCSE – Data Platform • MCSA – SQL 2012/2014 • MCTS – Web Forms, Data Access, WCF • MS – C#, HTML5, MVC, SHP 2013 • MCP, MCT, MSc • Microsoft Trainer – Semos Education • Software Developer – NBRM • Consultant 5
- 7. HTML 4 VS HTML 5 • You don’t get rid of HTML4 standards – you just improve upon them! 7 Standard Improvements
- 8. What's New in HTML5? HTML5 provides many extensions over previous versions, including: • Rules for browser vendors • New elements that reflect modern web application development • JavaScript APIs that support desktop and mobile application capabilities • Each version of HTML has its own DOCTYPE – The browser uses the DOCTYPE declaration to determine how to interpret the HTML markup – For HTML5 pages, specify a DOCTYPE of html <!DOCTYPE HTML> 8
- 9. Document Structure in HTML5 HTML5 provides new elements to define the structure of a web page: • <section> to divide up main content • <header> and <footer> for page headers and footers • <nav> for navigations links • <article> for stand-alone content • <aside> for quotes and sidebar content • <hgroup> • <figure> and <figcaption> • <mark> 9
- 10. HTML5 Input Type • <input type=“range”> - for sliders • <input type=“color”> - for color pickers • <input type=“tel”> - for telephone numbers • <input type=“url”> - for web addresses • <input type=“email”> - for email addresses • <input type=“date”> - for calendar date pickers • <input type=“month”> - for a list of months • <input type=“week”> - for weeks • <input type=“time”> - timestamps • <input type=“datetime”> - for precise, absolute date+time • <input type=“datetime-local”> - for local dates and times • <input type=“number”> - for spinboxes • <input type=“search”> - for search boxes 10
- 11. HTML5 Input Attributes • Input attributes modify the behavior of input types and forms to provide better feedback and usability: – autofocus – autocomplete – required – pattern – placeholder – many other input type-specific attributes – Ex. number input type supports the max, min, step, and value attributes • If the data is not valid, display custom error message by using the setCustomValidity function 11
- 12. Demo 12
- 13. Creating Interactive Pages by Using HTML5 APIs 13
- 14. File API • The HTML5 File API enables a web application to access the local file system • There are four key interfaces: – Blob – immutable raw binary data – File - read-only information about a file (name, size, type) – FileList – an array of files – FileReader – methods for reading data from a file or blob • The FileReader interface provides methods for reading a file or blob • FileReader reads data asynchronously and fires events • File contents are available through the result attribute on the FileReader object 14
- 15. Drag & Drop API • Allows objects to be dragged and then dropped onto a target. • HTML5 supports drag-and-drop – The user can drag HTML elements, or files from the local file system – The user can drop items onto drop-enabled target elements • To support drag and drop operations – Enable drag support on HTML elements, if required – Enable drop support on HTML drop target elements • Propagation and Prevention 15 Drag Source Drag Target dragstart drag dragenter dragover dragleave drop dragend
- 16. HTML5 Audio and Video • New HTML5 media elements – <audio> and <video> • Native audio and video • Add videos and audio as if it was an image • Codec support varies, but multiple source elements and fallback content can be used • Complete JavaScript API available 16 <video width="300" height="200" poster="MyPoster.jpg" autoplay="autoplay" muted="muted" controls="controls" loop="loop" > <source src="media/video1.mp4" type="video/mp4" /> <source src="media/video1.ogv" type="video/ogg" /> <source src="media/video1.webm" type="video/webm" /> <object id="flash1" data="Media/Video1.swf" type="application/x-shockwave-flash"> <param name="movie" value="Media/Video1.swf"> </object> </video>
- 17. GeoLocation API • Geolocation interface represents an object able to programmatically obtain the position of the device • A host device can use several techniques to obtain geolocation information: – IP address – GPS positioning – Wi-Fi – Cell phone location – User-defined location information 17 navigator.geolocation.getCurrentPosition(myPositionCallbackFunction, myPositionErrorCallbackFunction, {enableHighAccuracy: true, timeout: 5000} ); var watchID = navigator.geolocation.watchPosition(myPositionCallbackFunction, myPositionErrorCallbackFunction, {enableHighAccuracy: true, maximumAge: 10000} );
- 18. Page Visibility API • Page Visibility API consists of two properties and an event: – document.hidden property describes whether the page is visible or not – The visibilitychange event fires any time the visibility state of the page changes • HTML5 allows online and offline detection • navigator.onLine property, which indicates whether the browser is online or offline 18
- 19. Web Workers • Web workers enable a web page to move code to a parallel execution environment, enabling the browser to remain responsive 1. Dedicated web workers 2. Shared web workers • A web page communicates with a web worker by sending and receiving messages: – Send messages by using the postMessage() function – Receive messages by handling the message event 19
- 20. SVG & CANVAS • Vector-based graphics for the Web • SVG defines the graphics in XML format • SVG graphics do NOT lose any quality if they are zoomed or resized • Popular library https://d3js.org/ • The Canvas API enables you to draw onto a bitmap area – Immediate mode: "fire and forget" • JavaScript APIs and drawing primitives – Simple API: 45 methods, 21 attributes – Rectangles, lines, fills, arcs, Bezier curves, … • Creating games in HTML5 Canvas • http://canvasengine.net/ 20
- 21. Demo 21
- 22. Adding Offline Support to Web Applications 22
- 23. Application Cache API • The application cache manifest file specifies the resources to cache • Use complete web sites in offline mode • Browsers cache data in an Application Cache • Application cache gives an application three advantages: – Offline browsing - users can use the application when they're offline – Speed - cached resources load faster – Reduced server load 23 CACHE MANIFEST # version 2.0 CACHE: index.html verification.js site.css graphics/logo.jpg NETWORK: /login # alternatives paths FALLBACK: /ajax/account/ /noCode.htm <html manifest=“test.appcache">
- 24. Local Storage API - Web Storage • Local storage is more secure than cookies • Limit is far larger (at least 5MB) and information is never transferred to the server • Local storage is per domain. • Local storage persists until it is explicitly deleted or the browser’s cache is cleared. • Session storage persists until it is explicitly deleted or the browsing context is closed. • HTML local storage provides two objects for storing data on the client: – window.localStorage - stores data with no expiration date – window.sessionStorage - stores data for one session 24
- 25. Indexed Database API • IndexedDB provides an efficient means for storing structured data on the user’s computer • IndexedDB is a JavaScript-based object-oriented database • Powerful, but may seem too complicated for simple case • The API is asynchronous, and includes the following features: – Multiple object stores – Transactions – Indexes to speed up common queries • For IndexedDB, you can use up to 50MB on desktop 25
- 26. Demo 26
- 27. XMLHttpRequest, WebSocket • XMLHttpRequest Level 2 – significantly enhanced – Cross-origin XMLHttpRequests – Progress events – Binary Data • Web sockets are a solution for implementing real-time bidirectional communications on the web • The WebSockets API defines a JavaScript API for code running in a browser 27
- 28. Animating the User Interface 28
- 29. Transforming elements Types of transformation supported by CSS: – Translating – Rotating – Scaling – Skewing 29 div.rotate1 { transform: rotate(10deg); transform-origin: left top; }
- 30. Keyframe Animation • SWIFFY, GOOGLE WEB DESIGNER, ADOBE EDGE 30 @keyframes name_of_animation { 0% { /* or from */ … properties to at the start of the animation … } 50% { … properties to apply after 50% of the animation … } 100% { /* or to */ … properties to apply at the end of the animation … } } CSS_rule_to_apply_animation { animation-name: name_of_animation; animation-duration: duration_of_animation; … }
- 31. CSS 3 • Media Queries • border-radius • box-shadow • text-shadow • Linear and radial gradient • column-width & column-gap • @font-face • http://www.css3maker.com/ 31
- 32. Future 32
- 33. Complete the evaluation and earn the chance to win prizes in the closing raffle http://eval.codecamp.mk 33 Questions
- 34. Thank you