html5

building open web apps with

html, css and javascript

Germán Toro del Valle

gtorodelvalle@gmail.com

@gtorodelvalle

Slides: http://bit.ly/15kOoXW

agenda

Introduction
What is HTML5?
Getting started with HTML

Anatomy of an HTML element
Anatomy of an HTML document
Element relationships and types
HTML entities
Global attributes

...

agenda

...

Getting started with CSS

...

agenda

...

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

...

agenda

...

Getting started with Javascript
1. Strings
2. Arrays
3. Functions
4. Operators
5. Loops
6. Handling errors
HTML elements in-depth

...

agenda

...

HTML elements in-depth

...

agenda

...

CSS Styling in-depth

...

agenda

...

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

...

agenda

...

CSS Styling in-depth

...

agenda

...

Javascript in-depth

...

agenda

...

Javascript in-depth

...

agenda

...

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 HTML Ninja :-O

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

2. What is HTML5?

So, what is HTML5?
- HTML5 is a family of technologies and specifications:
The Web platform:
- http://platform.html5.org/
Current status:
- Just check it out yourself:

2. What is HTML5?

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

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

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

Applying a style ( style attribute):

4. getting started with css

Applying a style ( style element):

4. getting started with css

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

4. getting started with css

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

4. getting started with css

Applying a style ( user styles):
- Proprietary mechanism by browser
- 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 inheritvalue

4. getting started with css

Colors:
- Name
- Decimal (red, green, blue): separated by ,
- Hexadecimal (red, green, blue): 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

4. getting started with Javascript

Programming language of the Web
Case sensitive
Including scripts in an HTML document ( inline script):

4. getting started with Javascript

Programming language of the Web
Case sensitive
Including scripts in an HTML document ( external script):

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 ( newkeyword)
- Adding properties
- Deleting properties

4. getting started with Javascript

Objects:
- Object literal format

4. getting started with Javascript

inexpression:

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:

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

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

Functions:
- First class objects

4. getting started with Javascript

Operators (most useful):
- Arithmetic 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

Loops:
- forloop

4. getting started with Javascript

Loops:
- for ... in

4. getting started with Javascript

Loops:
- do/ whileloop

4. getting started with Javascript

Loops:
- whileloop

4. getting started with Javascript

Handling errors:

5. HTML elements in-depth

The most important change in HTML5 is a philosophical one:
- Semantics of elements vs. presentation

"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

HTML cheat sheet:

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:
- base

5. HTML elements in-depth

Metadata elements:
- meta

5. HTML elements in-depth

Metadata elements:
- style

5. HTML elements in-depth

Metadata elements:
- link

5. HTML elements in-depth

Metadata elements:
- script

5. HTML elements in-depth

Metadata elements:
- noscript

5. HTML elements in-depth

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

5. HTML elements in-depth

Section elements:
- address, article, aside, details, footer, header, nav, section, summary

5. HTML elements in-depth

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

5. HTML elements in-depth

Forms:
- form

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

Text-level elements:
- Hyperlinks
  - a

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

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

5. HTML elements in-depth

Grouping elements:
- Lists
  - li, ol, ul

5. HTML elements in-depth

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

5. HTML elements in-depth

Grouping elements:
- Figure
  - figcaption, figure

5. HTML elements in-depth

Embedding content:
- Images: area , img , map

5. HTML elements in-depth

Embedding content:
- HTML content: iframe

5. HTML elements in-depth

Embedding content using plugins:
- embed

5. HTML elements in-depth

Embedding content using plugins:
- object

5. HTML elements in-depth

Embedding media:
- audio

5. HTML elements in-depth

Embedding media:
- video

5. HTML elements in-depth

Embedding numeric representations:
- meter , progress

5. CSS styling in-depth

CSS cheat sheet:

5. CSS styling in-depth

CSS selectors quick reference:

5. CSS styling in-depth

Box model:

5. CSS styling in-depth

CSS properties quick reference:
- Background

5. CSS styling in-depth

CSS properties quick reference:
- Padding

5. CSS styling in-depth

CSS properties quick reference:
- Border

5. CSS styling in-depth

CSS properties quick reference:
- Margin

5. CSS styling in-depth

CSS properties quick reference:
- Outline

5. CSS styling in-depth

CSS properties quick reference:
- Positioning

5. CSS styling in-depth

CSS properties quick reference:
- Box

5. CSS styling in-depth

CSS properties quick reference:
- Flexible Box

5. CSS styling in-depth

CSS properties quick reference:
- Multi-column

5. CSS styling in-depth

CSS properties quick reference:
- Color

5. CSS styling in-depth

CSS properties quick reference:
- Text

5. CSS styling in-depth

CSS properties quick reference:
- Fonts

5. CSS styling in-depth

CSS properties quick reference:
- Hyperlinks

5. CSS styling in-depth

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

5. CSS styling in-depth

CSS properties quick reference:
- Transitions

5. CSS styling in-depth

CSS properties quick reference:
- Animation

5. CSS styling in-depth

CSS properties quick reference:
- User-interface

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

Media queries:

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

6. Javascript in depth

Javascript (in the browser) cheat sheet:

6. JAVASCRIPT IN DEPTH

DOM cheat sheet:

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:
  - Bubbling:

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

HTML5 introduces a whole new set of APIs to extend the capabilities of the browsers and consequently of the web applications built upon:

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/

7. HTML5 APIs

Let's back up a little bit...
AJAX:

AsynchronousJavaScript and XML (getting data)

7. HTML5 APIs

Let's back up a little bit...
AJAX:

AsynchronousJavaScript and XML (sending data)

7. HTML5 APIs

Let's back up a little bit...
AJAX:

AsynchronousJavaScript and XML (sending files)

7. HTML5 APIs

AJAX:

Exercise: HTML5Rocks tutorialswidget

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

Open a database and start a transaction
Create an object store
Make a request to do some database operation, like adding or retrieving data
Wait for the operation to complete by listening to the right kind of DOM event
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