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
Lab 07: Prep Lab: HTML5
Instructor: Gang Liu Faculty of Computer Science Dalhousie University
■ 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/
■ 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: 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.
■
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.
■ 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.
<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>
■ 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
Input Type Description HTML Markup date A control for entering the date. <input type="date"> datetime Date and time using UTC date and time format <input type="datetime"> datetime-local Date and time according to your local time <input type="datetime-local"> 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 value (which is in hexadecimal color notation) <input type="color""> email Validates the input using the standard email format <input type="email">
[1] webfx.com. (2019). [online] Available at: https://www.webfx.com/blog/web- design/new-html5-form-input-types/