Working with HTML5

4/18/2013

A lot. Brace yourselves.

Project parameters: what did we build?

Components, libraries and features

– HTML5 tags & objects

– CSS3 concepts

– jQuery basics

Tools

– IDE & Browser

– Testing & Optimization

What are we going to cover?

Document viewer

Images, videos and PDFs

Index, TOC, search, history and favorites

Standardized input (XHTML & XML)

Offline mode for all content

Online updates

Home-screen icon(s) & full-screen app mode

Target platforms: iOS Safari / desktop Chrome

Project parameters

No server component (all client-side logic)

Preprocess XML data to JSON

Generate some parts with pure.js

Load & transform XHTML content with jQuery

PDF.js library

HTML5 video

HTML5 appcache

CSS3 gradients, border-images and flexbox

Implementation overview

New tags

Local storage

HTML5

Useful for improving semantic value of content

– <header> & <footer>

– <article>, <section> & <details>

– <dialog>, <nav>, <figure>

– Better for non-visual interpreters than <div>

Great for multimedia without plugins

– <video>, <audio>

HTML5 tags

A good replacement/enhancement for cookies

Key/value storage

– Use JSON.stringify() and JSON.parse() to

write/read JavaScript objects

– localStorage (no expiration)

– sessionStorage (per-session)

indexedDB is a local NoSQL database

– JavaScript API

WebSQL supports SQL, but is deprecated

HTML5 storage

Box model

Display types

Inline vs. block

Margin-collapsing

Border images

Layout examples &

techniques

CSS3

The display property is very powerful

– Controls the layout algorithm

– Determines how the box model is applied

– Changes interpretation of alignment

Commonly used display types are

– inline, block & inline-block

– table, table-cell & table-row (to emulate tables

without using table tags)

– list-item (activates list behavior)

CSS display types

A floated inline element will become a block

Vertical padding/margin/border is not reserved for inline elements

CSS inline vs. inline-block

inline

inline-block

The CSS box model includes a content box, padding,

border and margins.

Padding is inside the border; margin is outside

CSS box model

div

P "text"

Div Margin

Div Border Div Padding

P Margin

P Context box

Adjacent margins are collapsed; largest one wins

Any intervening padding or border prevents collapse

Use margins instead of padding to avoid this

CSS margin-collapsing

div

P "text"

P "text"

Collapsed

div

P "text"

P "text"

Collapsed

Use repeatable graphics or patterns for borders

Handles corners and overlap better than multiple backgrounds

Control positioning vis à vis the border box (inset,

outset, width)

Control tiling & stretching

CSS3 Border images

.toc-tab {

border-width: 0 55px 47px 10px;

border-image: url('tabs/tab.png') 0 55

47 10 stretch;

}

In the beginning, there were tables

– Tables for layout are confusing (bad semantics)

– Little control over layout algorithm

Use CSS to remove all default spacing and padding

Layout with tables (1/6)

table {

border-collapse: collapse;

border-spacing: 0;

margin: 0; padding: 0;

}

td, th { padding: 0; }

<table><tr>

<td>MMM…</td>

<td>MMM…</td>

</tr></table>

MMMM

MMMM

MMMM

MMMM

MMMM

MMMM

To use a table layout without table elements, use the

display property

This gets the job done, but isn't very fluid and still can't be customized

Layout with display: table (2/6)

.table { display: table }

.cell { display: table-cell; }

<div class="table">

<div class="cell">MMM…</div>

<div class="cell">MMM…</div>

</div>

MMMM

MMMM

MMMM

MMMM

MMMM

MMMM

floats address both semantic and fluidity issues

A block can float to the right or left of inline content

Floats are laid out next to each other, if possible

Layout with floats (3/6)

div {

float: left; width: 50%

}

<div>MMM…</div>

<div>MMM…</div>

MMMM

MMMM

MMMM

MMMM

MMMM

MMMM

Now we'd like to add padding and borders

The 50% width applies to the content box; padding and borders are added to that width

The naïve approach leads to unwanted wrapping

Float layout problems (3/6)

div {

float: left; width: 50%;

padding: 10px;

border: 5px solid black;

}

<div>MMM…</div>

<div>MMM…</div>

MMMMMMMM

MMMM

MMMMMMMM

MMMM

MMMMMMMM

MMMM

To fix the sizing issue in CSS2.1, use a nested container

The outer container is assigned a width; padding and border are applied to the nested container

Fixing floats in CSS2.1 (3/6)

body > div {

float: left; width: 50%;

}

div > div {

padding: 10px;

border: 5px solid black;

}

<div><div>MMM…</div></div>

<div><div>MMM…</div></div>

MMM

MMMMMM

MMM

MMM

MMMMMM

MMM

To fix the sizing issue in CSS3, set the box-sizing

– content-box: dimensions are applied to content

– border-box: dimensions are applied to content +

borders + padding

Fixing floats in CSS3 (3/6)

div {

float: left; width: 50%;

padding: 10px;

border: 5px solid black;

box-sizing: border-box;

}

<div>MMM…</div>

<div>MMM…</div>

MMM

MMMMMM

MMM

MMM

MMMMMM

MMM

Absolute position is relative to the nearest positioned

parent (or the viewport)

Position values are relative to their respective sides:

left: 100% == right: 0

Absolute positioning (4/6)

div {

padding: 10px

border: 5px solid black;

box-sizing: border-box;

position: absolute;

}

.A { left: 0 } .B { right: 0 }

<div class="A">MMM…</div>

<div class="B">MMM…</div>

MMM

MMMMMM

MMM

MMM

MMMMMM

MMM

The flex display type enables vertical or horizontal layout for contained items

Control size (desired/min/max), alignment, wrapping, justification & element order

flexbox layouts (5/6)

.O { display: flex }

.O div {

padding: 10px;

border: 5px solid black;

}

<div class="O">

<div>MMM…</div>

<div>MMM…</div>

</div>

MMM

MMMMMM

MMM

MMM

MMMMMM

MMM

Define rows & columns and place items in them

Supports sizing, spanning, alignment, overlap, etc.

Developed by Microsoft; supported only in IE10

grid layouts (6/6)

.O { display: -ms-grid;

-ms-grid-columns: 50% 50% }

.O div {

padding: 10px

border: 5px solid black;

}

.B { -ms-grid-column: 2; }

<div class="O">

<div>MMM…</div>

<div class="B">MMM…</div>

</div>

MMM

MMMMMM

MMM

MMM

MMMMMM

MMM

Advanced CSS still requires vendor prefixes

Use http://caniuse.com to determine browser support

A CSS abstraction framework like less is definitely

worth a look

CSS frameworks like skeleton or bootstrap may also help

CSS: conclusions

Selection & Insertion

Event-handling

jQuery

Select DOM elements

– $(selector) gets jQuery objects for the DOM objects corresponding to the given CSS selector

– E.g. $('#content') and $('.list > a')

Load elements with $.get(function() {})

Create & insert elements

– $(html) creates new jQuery objects

– Insert with append(), appendTo(), etc.

– E.g. $('#content').append($('<img/>')) adds a new image to the content element

jQuery selection & insertion

Development is highly asynchronous

Set up event handlers

– Use CSS selectors to select elements

– Hook events with on() or a specific handler

– Use $(this) to reference the triggering element

– The following example dims links when clicked

jQuery event-handlers

$('.list > a') // Select elements

.click(function() // Hook the click event

{

$(this) // Get reference to triggering element

.animate({ opacity: .5 }) // Change opacity to .5 over 400ms (default)

})

IDE overview

Browser tools

Deployment

JSDoc

JSTestDriver

JSDoc & JSTestDriver

JetBrains WebStorm is well worth the $99

– Code navigation & search

– JavaScript & CSS refactoring

– JavaScript debugging

– JSDoc for type-hinting

– JSTestDriver for unit-testing

IDE Tools

Chrome & Safari

– DOM viewer and editor

– JavaScript debugger

– JavaScript profiler

– CSS profiler (find expensive selectors)

– Storage/cache viewer

iOS Safari debugging/analysis

– Includes a rendering/layout profiler

– Requires OS X Safari (i.e. a Mac)

Browser tools

JavaScript is hard to navigate & refactor reliably

Use type-hinting to enhance IDE capability

Document methods, fields and even local variables

Use [] for arrays and a trailing = for optional values

Type-hinting with JSDoc

/**

* @param {string} url The url for which to create a topic.

* @param {SearchMatch=} match The optional match to use.

* @return Topic

*/

createTopic: function(url, match)

{

/** @type {RawTopicData[]} */

var localData = externalData;

}

WebStorm includes a plugin and syntax support

Define tests as descendants of TestCase

JSTestDriver.conf: lists tests and support files

Start the JSTestDriver server

Capture one or more browsers

Run or debug; it’s that simple!

Testing with JSTestDriver

TestCase("AutoCompleteEngineTest", {

"test auto complete empty": function() {

var engine = new AutoCompletion();

var suggestions = engine.getSuggestions("");

assertEquals(0, suggestions.length);

});

Web development is better than ever

CSS3/HTML5 is good enough to write clean code

jQuery is a really solid API

WebStorm is nearly indispensable

IE has gotten quite good, but is still the weakest link

Conclusions