HTML5

Agenda

1. Introduction
2. What is HTML5?
3. Getting started with HTML
   1. Anatomy of an HTML element
   2. Anatomy of an HTML document
   3. Element relationships and types
   4. HTML entities
   5. Global attributes

...

Agenda

4. Getting started with CSS
   1. Anatomy of a CSS selector
   2. Applying a style
   3. Importing a style
   4. Character encoding
   5. Styles cascading
   6. Style inheritance
   7. Colors
   8. Lengths
   9. Unit calculations

...

Agenda

4. Getting started with CSS
   10. Angles
   11. Time

...

Agenda

5. Getting started with Javascript
   1. A little bit of history
   2. Including scripts
   3. Strict mode
   4. Variables and types
   5. Types
   6. Objects
   7. in expression
   8. Numbers

...

Agenda

5. Getting started with Javascript
   9. Strings
   10. Arrays
   11. Functions
   12. typeof operator
   13. Operators
   14. flow control
   15. Loops
   16. with statement
   17. Handling errors

...

Agenda

6. HTML elements in-depth
   1. Preliminary recomendations
   2. HTML cheat sheet
   3. Document and metadata elements
   4. Metadata elements
   5. Section elements
   6. Forms
   7. Text level elements
   8. Grouping  elements
   9. Embedding content

...

Agenda

6. HTML elements in-depth
   10. Embedding content using plugins
   11. Embedding media
   12. Embedding numeric representations

...

Agenda

7. CSS Styling in-depth
   1. CSS cheat sheet
   2. CSS selectors quick reference
   3. Box model
   4. Background
   5. Padding
   6. Border
   7. Margin
   8. Outline

...

Agenda

7. CSS Styling in-depth
   9. Positioning
   10. Box
   11. Flexible box
   12. Multi-column
   13. Color
   14. Text
   15. Fonts
   16. Hyperlinks

...

Agenda

7. CSS Styling in-depth
   17. 2D / 3D Transforms
   18. Transitions
   19. Animations
   20. User interface
   21. Media queries

...

Agenda

8. Javascript in-depth
   1. Javascript (in the browser) cheat sheet
   2. DOM cheat sheet
   3. Document metadata properties
   4. Document location properties
   5. Accessing HTML elements via document's properties
   6. Searching for HTML elements
   7. Navigating the DOM
   8. Getting information about the window

...

Agenda

8. Javascript in-depth
   9. Interacting with the window
   10. Prompting the user
   11. Browser history
   12. Using timers
   13. Accessing windows
   14. Cross-document messaging (sender)
   15. Cross-document messaging (listener)

...

Agenda

8. Javascript in-depth
   17. Interacting with the window

...

2. What is HTML5?

• HTML5 is a family of technologies and specifications:
  • Javascript : programming language (interactivity, content manipulation, data consumption, etc.)
  • CSS : style or appearance of the pages
  • HTML : structure of the pages
• The Web platform:
  • http://platform.html5.org/
• Current status:
  • Just check it out yourself:
    • http://caniuse.com/
    • http://mobilehtml5.org/ (mobile is a must!)

2. What is HTML5?

3. Getting started with HTML

• HTML is a mark-up language
• Anatomy of a HTML element:
  • Tag
  • Content
  • Attributes

3. Getting started with HTML

• HTML is a mark-up language
• Anatomy of a HTML element:
  • Tag
  • Content
  • Attributes

3. Getting started with HTML

• HTML is a mark-up language
• Anatomy of a HTML element:
  • Tag
  • Content
  • Attributes

3. Getting started with HTML

• HTML is a mark-up language
• Anatomy of a HTML element:
  • Tag
  • Content
  • Attributes

3. Getting started with HTML

• HTML is a mark-up language
• Anatomy of a HTML element:
  • Tag
  • Content
  • Attributes

3. Getting started with HTML

• HTML document:
  • Text file
  • .html (convention)
• Anatomy of an HTML document (outer structure):

3. Getting started with HTML

• HTML document:
  • Text file
  • .html (convention)
• Anatomy of an HTML document (metadata):

3. Getting started with HTML

• HTML document:
  • Text file
  • .html (convention)
• Anatomy of an HTML document (content):

3. Getting started with HTML

• Element relationships:
• Parent
• Child
• Descendants
• Siblings
• Document tree ( http://livedom.validator.nu/)
• Element types:

3. Getting started with HTML

• HTML entities:
  • Allow using reserved characters in texts
  • Formatting:
    • &entity_name;
    • &#entity_number;

3. Getting started with HTML

• Global attributes:
  • accesskey:
    • Keyboard shortcut to select elements on the page
    • Set focus using Control + Alt + Key

3. Getting started with HTML

• Global attributes:
  • class:
    • Categorize elements
    • Multiple classes
    • Does nothing per se

3. Getting started with HTML

• Global attributes:
  • contenteditable:
    • Let the visitor change the content of the page
    • Values: "true" or "false"
    • No value: inherits it from parent

3. Getting started with HTML

• Global attributes:
  • contextmenu:
    • The menu pops up when the user triggers it
    • Supported by Firefox

3. Getting started with HTML

• Global attributes:
  • dir:
    • Direction of the text

3. Getting started with HTML

• Global attributes:
  • draggable:
    • Specifies if an element is draggable or not

3. Getting started with HTML

• Global attributes:
  • dropzone:
    • Whether the dragged data is copied, moved or linked, when it is dropped on the element
    • Not currently supported by major browsers

3. Getting started with HTML

• Global attributes:
  • hidden:
    • The element is not yet, or is no longer, relevant
    • The element should not be shown
    • Space not reserved

3. Getting started with HTML

• Global attributes:
  • id:
    • Assigns a unique identifier to the element
    • Must be unique within the HTML document
    • Navigation to the element via adding #id to the URL

3. Getting started with HTML

• Global attributes:
  • lang:
    • Specifies the language of the element's content
    • Must be a valid ISO value
    • Let the browser adjust the display of the content

3. Getting started with HTML

• Global attributes:
  • spellcheck:
    • Specifies if the browser should check the spelling of the element's content

3. Getting started with HTML

• Global attributes:
  • style:
    • Allows to define CSS styles directly on an element

3. Getting started with HTML

• Global attributes:
• tabindex :
• Order in which the Tab key moves the focus through the elements

3. Getting started with HTML

• Global attributes:
• title :
• Provides additional information about an element
• Commonly used to show tool tip information

4. Getting started with CSS

• Cascading Style Sheets (CSS)
• Specifies the appearance and formatting of an HTML document
• No monolithic CSS specification but modules about concrete features which can evolve independently
• Browser-specific prefixes for features under development:
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • Opera: -o-
  • Webkit (Chrome, Safari): -webkit-

4. Getting started with CSS

• Anatomy of a CSS style:

4. Getting started with CSS

1. Applying a style (style attribute):

4. Getting started with CSS

2. Applying a style (style element):

4. Getting started with CSS

3. Applying a style (external stylesheet):
   • Style file loading order is important (the latest will be applied)

4. Getting started with CSS

4. Applying a style (browser styles or user agent styles):
   • Default values applied by the browser

4. Getting started with CSS

5. Applying a style (user styles):
   • Proprietary mechanism by browser
     • In Firefox:
       • File in user's profile:
         • \chrome\userContent.css
     • In Chrome: file in user's profile:
       • \Default\User StyleSheets\Custom.css
   • It will be applied to any site the user visits
   • It overrides the default browser or user agent styles

4. Getting started with CSS

• Importing style files (@import):
  • Not widely known
  • Generally, worse performance in browsers than <link>

4. Getting started with CSS

• Character encoding:
  • Only information which can come before @import
  • If not specified, the one in the HTML document applies
  • If not specified in the HTML document, UTF-8 by default

4. Getting started with CSS

• Styles cascading:
  1. Inline styles (author styles)
  2. Embed styles (author styles)
  3. External styles (author styles)
  4. User styles
  5. Browser styles

4. Getting started with CSS

• Adjusting the default styles cascading:
  • Prioritize important styles no matter where they have been defined
  • Important user styles applied over author styles

4. Getting started with CSS

• Tie breaking:
  • More than 1 style defined at the same level that can be applied to the same element
• Specificity breaks the tie break (a-b-c):
  • Number of id values (a)
  • Number of other attributes and pseudo-classes (b)
  • Number of element names and pseudo-elements (c)
• If same specificity, then order of appearance (latest apply)

4. Getting started with CSS

• Style inheritance:
  • If no style for a property of an element, the parent element's property style applies
  • This rule applies to appearance styles
  • This rule does NOT apply to layout styles
    • Can be forced with the inherit value

4. Getting started with CSS

• Colors:
  • Name
  • rgb(red, green, blue): Decimal values separated by ,
  • #redgreenblue: Hexadecimal values starting with #
  • http://www.w3.org/TR/css3-color/

4. Getting started with CSS

• Color functions:

4. Getting started with CSS

• Lengths:
  • number_of_units+unit (no spaces in between)
  • Absolute : in, cm, mm, pt (1/72 of an inch), pc (pica, 12 pt)
  • Relative : em (font size of element), ex ('x-height' of element's font), rem (font size of root element), px (96dpi displays, 1/96 of an inch), % (another concrete property), and others ( gd, vw, vh, vm, ch) not widely supported

4. Getting started with CSS

• Unit calculations:
  • Mixing other units and perform basic arithmetic

4. Getting started with CSS

• Angles:
  • Useful when using transforms
  • deg (0 - 360), grad (0 - 400), rad (0 - 6.28), turn (1 = 360deg)

4. Getting started with CSS

• Time:
  • Useful for transitions and animations
  • s, ms

5. Getting started with Javascript

• A little bit of history:
  • 1995: Brendan Eich: Mocha → LiveScript, for Netscape 2
  • 1997:
    • JavaScript 1.1 submitted to the ECMA (ECMA-262 → ECMAScript)
    • JavaScript = ECMAScript (core) + Extensions (DOM, BOM, etc.)
  • 1998: ISO standard: ISO/IEC 16262
  • 1998 - 2008: Browsers war (version support, JScript, etc.)
  • 2009 - ... : Programming language of the Web (stable support in browsers)

5. Getting started with Javascript

• Case sensitive
• Including scripts in an HTML document (inline script):

5. Getting started with Javascript

• Case sensitive
• Including scripts in an HTML document (external script):

5. Getting started with Javascript

• Strict mode:
• Introduced in ECMAScript 5
• Different parsing and execution model for JavaScript
• Erratic behavior of ECMAScript 3 is addressed
• Errors are thrown for unsafe activities
• Distinct set of reserved words (more restrictive)

5. Getting started with Javascript

• Variables and Types:
• Javascript is a loosely typed language:
  • Assigning different types to the same variable

5. Getting started with Javascript

• Types:
• Primitive types: Boolean , Number , Null, String , Undefined

5. Getting started with Javascript

• Types:
• Primitive types: Boolean, Number, Null , String, Undefined

5. Getting started with Javascript

• Objects:
  • Object instantiation (new keyword)
  • Adding properties
  • Deleting properties

5. Getting started with Javascript

• Objects:
  • Object literal format

5. Getting started with Javascript

• Objects:
  • Built-in properties and methods (most common ones)

5. Getting started with Javascript

• in expression:

5. Getting started with Javascript

• Numbers:

5. Getting started with Javascript

• Numbers:
  • Number literals

5. Getting started with Javascript

• Numbers:
  • Built-in properties and methods (most common ones)

5. Getting started with Javascript

• Strings:
  • Strings are immutable in ECMAScript

5. Getting started with Javascript

• Strings:
  • String literals

5. Getting started with Javascript

• Strings:
  • Built-in properties and methods (most common ones)

5. Getting started with Javascript

• Dates:

5. Getting started with Javascript

• Regular expressions (RegExp):

5. Getting started with Javascript

• Arrays:

5. Getting started with Javascript

• Arrays:
  • Array literals

5. Getting started with Javascript

• Arrays:
  • Built-in properties and methods (most common ones)

5. Getting started with Javascript

• Functions:
  • Declaration and invocation

5. Getting started with Javascript

• Functions:
  • First class objects

5. Getting started with Javascript

• Functions:
  • Closures

5. Getting started with Javascript

• Math object:
  • Global object just as Global (aka. window in browsers)

5. Getting started with Javascript

• typeof operator:

5. Getting started with Javascript

• Operators (most useful ones):
  • Arithmetic operators

5. Getting started with Javascript

• Operators (most useful ones):
  • Bitwise operators

5. Getting started with Javascript

• Operators (most useful ones):
  • Assignment operators

5. Getting started with Javascript

• Operators (most useful ones):
  • Comparison operators
    • Primitives types are compared by value
    • Objects are compared by reference

5. Getting started with Javascript

• Operators (most useful ones):
  • Concatenation operator (precedence over the arithmetic one)

5. Getting started with Javascript

• Operators (most useful ones):
  • Conditional operator (ternary)

5. Getting started with Javascript

• Operators (most useful ones):
  • Logical operators

5. Getting started with Javascript

• Flow control:
  • if statement

5. Getting started with Javascript

• Flow control:
  • switch statement

5. Getting started with Javascript

• Loops:
  • for loop

5. Getting started with Javascript

• Loops:
  • for ... in

5. Getting started with Javascript

• Loops:
  • do / while loop

5. Getting started with Javascript

• Loops:
  • while loop

5. Getting started with Javascript

• Handling errors:

5. Getting started with Javascript

• Scopes:
  • global scope
  • function scope
  • with statement
  • catch block
• Garbage collection (mark-and-sweep)

5. Getting started with Javascript

• Timers:

5. Getting started with Javascript

• Object Oriented Programming (OOP):

5. Getting started with Javascript

• Custom Events:

6. HTML elements in-depth

• The most important change in HTML5 is a philosophical one:
  • Semantics of elements vs. presentation
  • Ex.: <b> no longer states text in bold (backwards compatibility, preferably avoid them using CSS)

"The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede."

(http://bit.ly/b-element)

6. HTML elements in-depth

• Some preliminary recommendations:
  • Add only the needed markup to give semantic significance to your content
  • Avoid using private semantics (use generic elements instead: <div>, <span>) and/or classes
  • Be as specific as possible (don't abuse of generic elements)
  • It's not all about presentation (programatic access to HTML content, adapted presentation, etc.)

6. HTML elements in-depth

• HTML cheat sheet:

6. HTML elements in-depth

• Document and metadata elements:
  • Creates the superstructure of the HTML document
  • Provides information to the browser

6. HTML elements in-depth

• Metadata elements:
  • base

6. HTML elements in-depth

• Metadata elements:
  • meta

6. HTML elements in-depth

• Metadata elements:
  • style

6. HTML elements in-depth

• Metadata elements:
  • link

6. HTML elements in-depth

• Metadata elements:
  • script

6. HTML elements in-depth

• Metadata elements:
  • noscript

6. HTML elements in-depth

• Section elements:
  • address, aside, details, footer, header, nav, summary (in body)

6. HTML elements in-depth

• Section elements:
  • article, aside, details, footer, header, nav, section, summary (in section)

6. HTML elements in-depth

• Section elements:
  • Basic headings
    • h1, h2, h3, h4, h5, h6, hgroup

6. HTML elements in-depth

• Forms:
  • form

6. HTML elements in-depth

• Forms:
  • input (inside and outside <form>)

6. HTML elements in-depth

• Forms:
  • button (inside and outside <form>)

6. HTML elements in-depth

• Forms:
  • label (inside and outside <form>)

6. HTML elements in-depth

• Forms:
  • fieldset, legend (inside and outside <form>)

6. HTML elements in-depth

• Forms:
  • optgroup, option, select (inside and outside <form>)

6. HTML elements in-depth

• Forms:
  • textarea (inside and outside <form>)

6. HTML elements in-depth

• Forms:
  • output (inside and outside <form>)

6. HTML elements in-depth

• Forms:
  • keygen (inside and outside <form>)

6. HTML elements in-depth

• Text-level elements:
  • Hyperlinks
    • a

6. HTML elements in-depth

• Text-level elements:
  • Importance
    • b, em, i, s, small, strong, sub, sup

6. HTML elements in-depth

• Text-level elements:
  • Break elements
    • br, wbr

6. HTML elements in-depth

• Text-level elements:
  • Input and output elements
    • code, kbd, samp, var

6. HTML elements in-depth

• Text-level elements:
  • Abbreviations, citations, definitions and quotations
    • abbr, cite, dfn, q

6. HTML elements in-depth

• Text-level elements:
  • Language elements
    • bdi, bdo, rp, ruby, rt

6. HTML elements in-depth

• Text-level elements:
  • Other elements
    • del, ins, mark, span, time 

6. HTML elements in-depth

• Grouping elements:
  • Browsers collapse whitespace characters in 1 space
  • blockquote, div, hr, p, pre

6. HTML elements in-depth

• Grouping elements:
  • Lists
    • li, ol, ul

6. HTML elements in-depth

• Grouping elements:
  • Description lists
    • dd, dl, dt

6. HTML elements in-depth

• Grouping elements:
  • Figure
    • figcaption, figure

6. HTML elements in-depth

• Embedding content:
  • Images: area , img , map

6. HTML elements in-depth

• Embedding content:
  • HTML content: iframe

6. HTML elements in-depth

• Embedding content using plugins:
  • embed

6. HTML elements in-depth

• Embedding content using plugins:
  • object

6. HTML elements in-depth

• Embedding media:
  • audio

6. HTML elements in-depth

• Embedding media:
  • video

6. HTML elements in-depth

• Embedding numeric representations:
  • meter , progress

7. CSS styling in-depth

• CSS cheat sheet:

7. CSS styling in-depth

• CSS selectors quick reference:

7. CSS styling in-depth

• Box model:

7. CSS styling in-depth

• CSS properties quick reference:
  • Background

7. CSS styling in-depth

• CSS properties quick reference:
  • Padding

7. CSS styling in-depth

• CSS properties quick reference:
  • Border

7. CSS styling in-depth

• CSS properties quick reference:
  • Margin

7. CSS styling in-depth

• CSS properties quick reference:
  • Outline

7. CSS styling in-depth

• CSS properties quick reference:
  • Positioning

7. CSS styling in-depth

• CSS properties quick reference:
  • Box

7. CSS styling in-depth

• CSS properties quick reference:
  • Flexible Box

7. CSS styling in-depth

• CSS properties quick reference:
  • Multi-column

7. CSS styling in-depth

• CSS properties quick reference:
  • Color

7. CSS styling in-depth

• CSS properties quick reference:
  • Text

7. CSS styling in-depth

• CSS properties quick reference:
  • Fonts

7. CSS styling in-depth

• CSS properties quick reference:
  • Hyperlinks

7. CSS styling in-depth

• CSS properties quick reference:
  • 2D / 3D Transforms

7. CSS styling in-depth

• CSS properties quick reference:
  • Transitions

7. CSS styling in-depth

• CSS properties quick reference:
  • Animation

7. CSS styling in-depth

• CSS properties quick reference:
  • User-interface

7. CSS styling in-depth

• Media queries:
  • Limits the style sheets scope by using media features, such as width, height, and color
  • Separated by commas
  • Composed of:
    • Logical operators
    • Media types
    • Media expressions: feature and value

7. CSS styling in-depth

• Media queries:

8. Javascript in-depth

• Javascript is much more than ECMA-262 (not tied to browsers)
• Extensions:
  • Additional functionality more specific to the environment
  • Browser Object Model (BOM):
    • API to interact with the browser
  • Document Object Model (DOM):
    • API to interact with an HTML document
    • Levels (versions of the specification)
    • Distinct support by browsers
  • Other DOMs: SVG, MathML, SMIL, Mozilla's XUL

8. Javascript in-depth

• Javascript (in the browser) cheat sheet:

8. Javascript in-depth

• DOM cheat sheet:

8. Javascript in-depth

• document metadata properties:

8. Javascript in-depth

• document location properties:

8. Javascript in-depth

• Accessing HTML elements via document's properties:

8. Javascript in-depth

• Searching for HTML elements:

8. Javascript in-depth

• Navigating the DOM:

8. Javascript in-depth

• Getting information about the window:

8. Javascript in-depth

• Interacting with the window:

8. Javascript in-depth

• Prompting the user:

8. Javascript in-depth

• Browser history:

8. Javascript in-depth

• Using timers:

8. Javascript in-depth

• Accessing windows:

8. Javascript in-depth

• Cross-document messaging (sender):

8. Javascript in-depth

• Cross-document messaging (listener):

8. Javascript in-depth

• Working with DOM elements:
  • Element data properties:

8. Javascript in-depth

• Working with DOM elements:
  • Working with classes:

8. Javascript in-depth

• Working with DOM elements:
  • Element attribute properties:

8. Javascript in-depth

• Working with Text elements:

8. Javascript in-depth

• Modifying the model:
  • Basic functions and properties:

8. Javascript in-depth

• Working with events:
  • An event is a change in the state of something
  • Element event flow:
    • Capture:
      • Checks if elements between the <body> and the target have event listeners to be notified of events of their descendants. Disabled by default
    • Target:
      • Checks the target added events listeners
    • Bubbling:
      • Checks the ascendants added events listeners

8. Javascript in-depth

• Working with events:
  • Inline event handler:
    

8. Javascript in-depth

• Working with events:
  • Using the DOM and the Event object:

8. Javascript in-depth

• Working with events:
  • document and window events:

8. Javascript in-depth

• Working with events:
  • Mouse events:

8. Javascript in-depth

• Working with events:
  • Focus related events:

8. Javascript in-depth

• Working with events:
  • Keyboard events:

8. Javascript in-depth

• Working with events:
  • form events:

8. Javascript in-depth

• Using element specific objects:
  • base element (HTMLBaseElement):

8. Javascript in-depth

• Using element specific objects:
  • body element (HTMLBodyElement):

8. Javascript in-depth

• Using element specific objects:
  • link element (HTMLLinkElement):

8. Javascript in-depth

• Using element specific objects:
  • meta element (HTMLMetaElement):

9. HTML5 APIs

• HTML5 APIs extend the capabilities of the browsers and consequently of the web applications built upon:
  • http://platform.html5.org/
  • http://mobilehtml5.org/
• Nowadays, it is possible to build native-like web applications which run in browsers
• There are even web-oriented operating systems:
  • Web OS:  https://www.openwebosproject.org/
  • Chromium OS:  http://www.chromium.org/chromium-os
  • EyeOS:  http://www.eyeos.com/
  • Firefox OS: http://www.mozilla.org/en-US/firefox/os/
  • Tizen:  https://www.tizen.org/

9. HTML5 APIs

• Let's back up a little bit...
• AJAX:
• Asynchronous JavaScript and XML (getting data)

9. HTML5 APIs

• Let's back up a little bit...
• AJAX:
• Asynchronous JavaScript and XML (sending data)

9. HTML5 APIs

• Let's back up a little bit...
• AJAX:
• Asynchronous JavaScript and XML (sending files)

9. HTML5 APIs

• AJAX:
• Exercise: HTML5Rocks tutorials widget

9. HTML5 APIs

• Working with multimedia (audio and video):
  • Getting info

9. HTML5 APIs

• Working with multimedia (audio and video):
  • Controlling the media playback:

9. HTML5 APIs

• Using the canvas:
  • The so-called "Adobe Flash killer"

9. HTML5 APIs

• Using the canvas:
  • Drawing "images":

9. HTML5 APIs

• Using the canvas:
  • Drawing using paths:

9. HTML5 APIs

• Using the canvas:
  • Clipping regions:

9. HTML5 APIs

• Using the canvas:
  • Drawing text:

9. HTML5 APIs

• Using the canvas:
  • Using shadows and transparency:

9. HTML5 APIs

• Using the canvas:
  • Using transformations:

9. HTML5 APIs

• Using the canvas:
  • Exercise: Drawing area

9. HTML5 APIs

• Drag and drop:
• The basics

9. HTML5 APIs

• Drag and drop:
• Exercise: Shopping cart

9. HTML5 APIs

• Drag and drop:
  • Exercise: Shopping cart (using DataTransfer)

9. HTML5 APIs

• Geolocation:
• Not part of the HTML5 specification

9. HTML5 APIs

• Geolocation:
• Google Maps example

9. HTML5 APIs

• Web storage:
  • localStorage

9. HTML5 APIs

• Web storage:
  • sessionStorage

9. HTML5 APIs

• Web storage:
• Exercise: Saving drafts

9. HTML5 APIs

• IndexedDB:
  • Basic concepts:
    • IndexedDB databases store key-value pairs:
      • Values can be complex structured objects
    • Transactional database model (auto-commit)
    • Mostly asynchronous (synchronous version not very supported)
    • Same origin policy

9. HTML5 APIs

1. Open a database and start a transaction
2. Create an object store
3. Make a request to do some database operation, like adding or retrieving data
4. Wait for the operation to complete by listening to the right kind of DOM event
5. Do something with the results (which can be found on the request object)

9. HTML5 APIs

• IndexedDB:
• General usage

9. HTML5 APIs

• IndexedDB:
• Exercise: To-Do app

9. HTML5 APIs

• WebSockets:
  • Socket-oriented connections between the web browser and a server 
  • Single TCP connection:
    • Not HTTP (avoiding HTTP overhead)
    • Low latency
    • Real-time communications
  • Persistent connections
  • Both parties can start sending data at any time (bidirectional)

9. HTML5 APIs

• WebSockets:
• Basic usage

9. HTML5 APIs

• Web Workers:
  • Running scripts in background threads
  • Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator
  • They work within a global context different from the current window (using the window shortcut instead of self in order to get the current global scope within a worker will return, in fact, an error)

9. HTML5 APIs

• Web Workers:
• Basic usage

9. HTML5 APIs

• Web Workers:
• Exercise: Calculate prime numbers when animating