diff --git a/html5/apis.md b/html5/apis.md index 3a03fd7..d21faf0 100644 --- a/html5/apis.md +++ b/html5/apis.md @@ -1 +1,61 @@ -https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 +# HTML 5 APIs + +## Lesson Objectives + +1. Explain what HTML 5 APIs are +1. List some common APIs and what they do + +## Explain what HTML 5 APIs are + +HTML5 means the new HTML elements that have recently been added, but it also means a collection of advanced functionality that browsers are expected to have. A decent summary can be found [here](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5). + +## List some common APIs and what they do + +### Semantics + +- Sections and outlines in HTML5: organizational tags that don't effect layout +- Using HTML5 audio and video: easily embed audio/video in a web page +- Forms improvements: new types of inputs + validation + +### Performance and Integration + +- Web Workers: put long running processes in the background, so your site doesn't slow down +- XMLHttpRequest level 2: making ajax calls is syntactically easier than ever. [You don't even really need jQuery for it anymore](http://youmightnotneedjquery.com/) +- History API: Manipulate the browser history with JS. Make it seem like the user has visited a new page, when they haven't +- Drag and drop: allows you to drag and drop items within and between sites +- Focus management in HTML: lets you see if an element has been focused on. Lets you see which element is focused on +- Fullscreen API: take over the screen +- Online and offline events: see when the user has lost/regained connection + +### Connectivity + +- Web Sockets: create a permanent connection between the page/server for extra fast communication +- WebRTC: video conferencing in the browser + +### Device Access + +- Using the Camera API: use a camera to get instant avatar icons... or spy on your exes +- Touch events: for mobile/tablet devices +- Using geolocation: again, great for spying on exes +- Detecting device orientation: good for mobile/tablet devices being held in landscape/portrait mode. Not so good for desktops + +### Offline and Storage + +- Offline resources: The application cache: allows you to use the site somewhat without connectivity +- WHATWG client-side session and persistent storage (aka DOM storage): better cookies +- IndexedDB: kinda like MongoDB, but for storing stuff client-side +- Using files from web applications: access local files from a web app + +### Styling + +- New background styling features: shadows, multiple backgrounds, filters +- More fancy borders: curved borders, images for borders +- Animating your style: transitions and animations +- Typography improvement: custom fonts! +- New presentational layouts: flex-box does what you always wanted to do, but couldn't + +### 3D Graphics + +- Canvas: Good for "raster" (or pixel) graphics/animations/games. Draw like Microsoft Paint, re-make NES games, etc +- SVG: Good for "vector" (or math-based) graphics/animations/games. Every graph you see online now uses this (probably with the D3.js lib) +- WebGL - 3D graphics support!!!! Fortnite in the browser