html5

building open web apps with

html, css and javascript


Germán Toro del Valle
gtorodelvalle@gmail.com,  gtv@tid.es  
@gtorodelvalle

New version available at: http://bit.ly/1UmgYTH

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

...

  1. 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

...

  1. Getting started with CSS
    1. Angles
    2. Time

...

agenda

...

  1. 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

...

  1. Getting started with Javascript
    1. Strings
    2. Arrays
    3. Functions
    4. typeof operator
    5. Operators
    6. flow control
    7. Loops
    8. with statement
    9. Handling errors

...

agenda

...

  1. 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

...

  1. HTML elements in-depth
    1. Embedding content using plugins
    2. Embedding media
    3. Embedding numeric representations

...

agenda

...

  1. 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

...

  1. CSS Styling in-depth
    1. Positioning
    2. Box
    3. Flexible box
    4. Multi-column
    5. Color
    6. Text
    7. Fonts
    8. Hyperlinks

...

agenda

...

  1. CSS Styling in-depth
    1. 2D / 3D Transforms
    2. Transitions
    3. Animations
    4. User-interface
    5. Media queries

...

agenda

...

  1. 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

...

  1. Javascript in-depth
    1. Interacting with the window
    2. Prompting the user
    3. Browser history
    4. Using timers
    5. Accessing windows
    6. Cross-document messaging (sender)
    7. Cross-document messaging (listener)

...

agenda

...

  1. Javascript in-depth
    1. Interacting with the window

...

1. INTRODUCTION

This course covers HTML5 from the ground up, trying to avoid all the padding ;-)

Example-oriented course

We'll provide you with the tools you need to become an Web ninja :-O

Ongoing work... just as the specifications ;-)

2. What is HTML5?

  • So, what is HTML5?
    • HTML5 is a family of technologies and specifications:
      • HTML : structure of the pages
      • CSS : style or appearance of the pages
      • Javascript : programming language (interactivity, content manipulation, data consumption, etc.)
  • The Web platform:
  • Current status:

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 an HTML element:
    • Tags
    • Content
    • Attributes

3. GETTING STARTED WITH HTML

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

3. GETTING STARTED WITH HTML

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

3. GETTING STARTED WITH HTML

  • HTML is a mark-up language
  • Anatomy of a HTML element:
    • Tags
    • 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


3. GETTING STARTED WITH HTML

  • HTML entities:
    • Allow using reserved characters in texts
    • Formatting:

3. GETTING STARTED WITH HTML

  • Global attributes:
    • accesskey :
      • Keyboard shortcut to select elements on the page

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 :
      • Specifies whether the dragged data is copied, moved or linked, when it is dropped on the element
      • Not currently supported by any of the 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 #id

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 CSS specification but modules
  • Browser-specific prefixes:
    • 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

  1. Applying a style (style element):

4. getting started with css

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

4. getting started with css

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

4. getting started with css

  1. 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
    • Will be applied to any site the user visits
    • Overrides the default browser or user agent styles

4. getting started with css

  • Importing style files:
    • 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

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

4. 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)

4. getting started with Javascript

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

4. getting started with Javascript

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

4. 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)

4. getting started with Javascript

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

4. getting started with Javascript

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

4. getting started with Javascript

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

4. getting started with Javascript

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

4. getting started with Javascript

  • Objects:
    • Object literal format

4. getting started with Javascript

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

4. getting started with Javascript

  • in expression:

4. getting started with Javascript

  • Numbers:

4. getting started with Javascript

  • Numbers:
    • Number literals

4. getting started with Javascript

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

4. getting started with Javascript

  • Strings:
    • Strings are immutable in ECMAScript

4. getting started with Javascript

  • Strings:
    • String literals

4. getting started with Javascript

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

4. getting started with Javascript

  • Dates:

4. getting started with Javascript

  • Regular expressions:

4. getting started with Javascript

  • Arrays:

4. getting started with Javascript

  • Arrays:
    • Array literals

4. getting started with Javascript

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

4. getting started with Javascript

  • Functions:
    • Declaration and invocation

4. getting started with Javascript

4. getting started with Javascript

  • Functions:
    • Closures

4. getting started with Javascript

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

4. getting started with Javascript

  • typeof operator:

4. getting started with Javascript

  • Operators (most useful):
    • Arithmetic operators

4. getting started with Javascript

  • Operators (most useful):
    • Bitwise operators

4. getting started with Javascript

  • Operators (most useful):
    • Assignment operators

4. getting started with Javascript

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

4. getting started with Javascript

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

4. getting started with Javascript

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

4. getting started with Javascript

  • Operators (most useful):
    • Logical operators

4. getting started with Javascript

  • Flow control:
    • if statement

4. getting started with Javascript

  • Flow control:
    • switch statement

4. getting started with Javascript

  • Loops:
    • for loop

4. getting started with Javascript

  • Loops:
    • for ... in

4. getting started with Javascript

  • Loops:
    • do/while loop

4. getting started with Javascript

  • Loops:
    • while loop

4. getting started with Javascript

  • Handling errors:

4. getting started with Javascript

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

4. getting started with Javascript

  • Timers:

4. getting started with Javascript

  • Object Oriented Programming (OOP):

4. getting started with Javascript

  • Custom Events:

5. 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."

5. 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.)

5. HTML elements in-depth

5. HTML elements in-depth

  • Document and metadata elements:
    • Create the superstructure of the HTML document
    • Provide information to the browser

5. HTML elements in-depth

  • Metadata elements:

5. HTML elements in-depth

  • Metadata elements:

5. HTML elements in-depth

  • Metadata elements:

5. HTML elements in-depth

  • Metadata elements:

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

  • Text-level elements:
    • Hyperlinks

5. HTML elements in-depth

5. HTML elements in-depth

  • Text-level elements:

5. HTML elements in-depth

5. HTML elements in-depth

  • Text-level elements:

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

  • Embedding content:

5. HTML elements in-depth

  • Embedding content using plugins:

5. HTML elements in-depth

  • Embedding content using plugins:

5. HTML elements in-depth

5. HTML elements in-depth

5. HTML elements in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth



5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. CSS styling in-depth

5. 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

5. CSS styling in-depth

6. 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 spec.)
      • Distinct support by browsers
    • Other DOMs: SVG, MathML, SMIL, Mozilla's XUL

6. Javascript in depth

6. JAVASCRIPT IN DEPTH

6. Javascript in-depth

  • document metadata properties:

6. Javascript in-depth

  • document location properties:

6. Javascript in-depth

  • Accessing HTML elements via document's properties:

6. Javascript in-depth

  • Searching for HTML elements:

6. Javascript in-depth

  • Navigating the DOM:

6. Javascript in-depth

  • Getting information about the window:

6. Javascript in-depth

  • Interacting with the window:

6. Javascript in-depth

  • Prompting the user:

6. Javascript in-depth

  • Browser history:

6. Javascript in-depth

  • Using timers:

6. Javascript in-depth

  • Accessing windows:

6. Javascript in-depth

  • Cross-document messaging (sender):

6. Javascript in-depth

  • Cross-document messaging (listener):

6. Javascript in-depth

  • Working with DOM elements:
    • Element data properties:

6. Javascript in-depth

  • Working with DOM elements:
    • Working with classes:

6. Javascript in-depth

  • Working with DOM elements:
    • Element attribute properties:

6. Javascript in-depth

  • Working with Text elements:

6. Javascript in-depth

  • Modifying the model:
    • Basic functions and properties:

6. Javascript in-depth

  • Styling DOM elements:
    • Working with stylesheets:

6. 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 which asked 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

6. Javascript in-depth

  • Working with events:
    • Inline event handler:

6. Javascript in-depth

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

6. Javascript in-depth

  • Working with events:
    • Document and Window events:

6. Javascript in-depth

  • Working with events:
    • Mouse events:

6. Javascript in-depth

  • Working with events:
    • Focus related events:

6. Javascript in-depth

  • Working with events:
    • Keyboard events:

6. Javascript in-depth

  • Working with events:
    • Form events:

6. Javascript in-depth

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

6. Javascript in-depth

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

6. Javascript in-depth

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

6. Javascript in-depth

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

7. HTML5 APIs


7. HTML5 APIs

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

7. HTML5 APIs

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

7. HTML5 APIs

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

7. HTML5 APIs

7. HTML5 APIs

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

7. HTML5 APIs

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

7. HTML5 APIs

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

7. HTML5 APIs

  • Using the canvas:
    • Drawing "images":

7. HTML5 APIs

  • Using the canvas:
    • Drawing using paths:

7. HTML5 APIs

  • Using the canvas:
    • Clipping regions:

7. HTML5 APIs

  • Using the canvas:
    • Drawing text:

7. HTML5 APIs

  • Using the canvas:
    • Using shadows and transparency:

7. HTML5 APIs

  • Using the canvas:
    • Using transformations:

7. HTML5 APIs

  • Using the canvas:
    • Exercise: Drawing area

7. HTML5 APIs

  • Drag and drop:
    • The basics

7. HTML5 APIs

  • Drag and drop:
    • Exercise: Shopping cart

7. HTML5 APIs

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

7. HTML5 APIs

  • Geolocation:
    • Not part of the HTML5 specification

7. HTML5 APIs

  • Geolocation:
    • Google Maps example

7. HTML5 APIs

  • Web storage:
    • localStorage

7. HTML5 APIs

  • Web storage:
    • sessionStorage

7. HTML5 APIs

  • Web storage:
    • Exercise: Saving drafts

7. 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

7. 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)

7. HTML5 APIs

  • IndexedDB:
    • General usage

7. HTML5 APIs

  • IndexedDB:
    • Exercise: To-Do app

7. HTML5 APIs

  • WebSockets:
    • Socket-oriented connections between the web browser and the 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)

7. HTML5 APIs

  • WebSockets:
    • Basic usage

7. 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)

7. HTML5 APIs

  • Web Workers:
    • Basic usage

7. HTML5 APIs

  • Web Workers:
    • Exercise: Calculate prime numbers when animating
Made with Slides.com