CSCI 2133 RAPID PROGRAMMING TECHNIQUES FOR INNOVATION Lab 07: Prep - PowerPoint PPT Presentation

CSCI 2133 RAPID PROGRAMMING TECHNIQUES FOR INNOVATION Lab 07: Prep Lab: HTML5 Instructor: Gang Liu Faculty of Computer Science Dalhousie University

Overview What is anAPI?  HTML5APIs  GeolocationAPI  Other APIs  Demo on Geolocation API  Demo on Battery Status API 

What is API? ■ Standardize how certain mechanics work to simplify usually complicated programming needs. Eg: Twitter Rest and Search API, Google maps API ■ Some Useful resources: ■ https://cloud.google.com/apis/design/Google APIs, GitHub ■ https://developers.google.com/products/ ■

Drag and Drop API ■ Brings drag and drop support to the browser. ■ By adding a draggable attribute set to true , the user has the ability to move any element. ■ You then add some event handlers on a target drop zone to tell the browser where the element can be dropped.

Media Storage API and Application Cache API ■ Media Storage: The media API is part of the media element which includes two of HTML5's poster children, the video and audio elements. HTML5 Audio, Video, Dev.Opera ■ Application Cache: The offline web application specification details how to take a web application offline using application cache. Offline use.

GeoLocation API Use HTTP requests to specific URLs, passing URL parameters as arguments ■ to the services. These services return data in the HTTP request as either JSON or XML for parsing and/or processing by your application. All Geolocation API applications require authentication ■ credentials.

Before we get started…. When to use the API ■ If necessary, ask permission ■ Use fallback when the API is necessary (not recommended in case of ■ geolocation) Browser support ■ When asking for permission for user’s data make sure that the user ■ understands the necessity for it.

Geolocation Demo <script type="text/javascript"> function showPosition() { if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")"; document.getElementById("result").innerHTML = positionInfo; }); } else{ alert("Sorry, your browser does not support HTML5 geolocation."); } } </script>

Battery Status API ■ Create a small webpage which shows the battery level and the status of your machine (whether it is charging or not) using Battery Status API in HTML 5. ■ The webpage needs to look visually decent. ■ Check out Battery API documentation https://www.w3.org/TR/battery-status/#introduction

HTML5 input elements [1] Input Type Description HTML Markup date A control for entering the date. <input type="date"> datetime Date and time using UTC date and <input type="datetime"> time format datetime-local Date and time according to your <input type="datetime-local"> local time month Month and year <input type="month"> time The time of day <input type="time"> week Allows you to pick the week and year.<input type="week"> color Allows you to enter a simple color <input type="color""> value (which is in hexadecimal color notation) email Validates the input using the <input type="email"> standard email format

References [1] webfx.com. (2019). [online] Available at: https://www.webfx.com/blog/web- design/new-html5-form-input-types/