This is lecture 8 of web design and development series.

1. [Day Eight]
New HTML5 API's
Course: Web Design and Develop
Date: 2017/05/21
Lecturer: Mohammad Rafi Haidari

2. Last Lesson Conclusion!
• What is responsive design in web development?
• How many ways are there to create a responsive website?
• Bootstrap is a php framework that we can use in web
project, is it true?
• What are HTML entities?
• What is the purpose of using HTML forms in the web?
• How can you create textbox to ask for Name of the
person?
• What is tag for dropdown list?
• How can you create multiple choices questions?
• How can you create a single choice options?
• How you can create a button in html?

3. The most interesting new API's
in HTML5 are:
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Web Workers
• HTML SSE

4. HTML5 Geolocation
The HTML Geolocation API is used to locate a
user's position.
Example source code

5. HTML5 Drag and Drop
Drag and drop is a very common feature. It is when
you "grab" an object and drag it to a different
location.
In HTML5, drag and drop is part of the standard:
Any element can be draggable.
Example source code

6. HTML5 Local Storage
With local storage, web applications can store data
locally within the user's browser.
Before HTML5, application data had to be stored in
cookies, included in every server request. Local
storage is more secure, and large amounts of data
can be stored locally, without affecting website
performance.

7. What is a Web Worker?
When executing scripts in an HTML page, the page
becomes unresponsive until the script is finished.
A web worker is a JavaScript that runs in the
background, independently of other scripts, without
affecting the performance of the page. You can
continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in
the background.

8. Server-Sent Events - One Way
Messaging
A server-sent event is when a web page automatically
gets updates from a server.
This was also possible before, but the web page would
have to ask if any updates were available. With server-
sent events, the updates come automatically.
Examples: Facebook/Twitter updates, stock price
updates, news feeds, sport results, etc.

9. Lesson Conclusion Game!
• What does API stands for?
• Talk about HTML Geolocation
• Talk about HTML Drag and Drop
• Talk about HTML Local Storage
• Talk about HTML Web Workers
• Talk about HTML SSE

10. Question?

11. Thank you!