apis

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