UX Camp

Web Frontend Dev

Part 1 of 4: The Foundation


Presented on 1 March 2013.


Press down for video or right for slides.

Presented by

John-Philip Johansson at Avanade

Tip: Watch in fullscreen. It's in HD.

Download: MP4 720p, MP4 480p, OGG 720p, or OGG 480p.

What's in a page?

HTML is markup

CSS is styling

JavaScript is logic
Do you know HTML5?

lol

  • HTML5
  • CSS3
  • JavaScript
  • and much more*

* = Connectivity / Realtime

HTML5 Powered with Connectivity / Realtime

+ CSS3 / Styling

HTML5 Powered with Connectivity / Realtime, and CSS3 / Styling

+ Device access

da
HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, and Device Access

+ Graphics, 3D & Effects

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, and Graphics, 3D & Effects

+ Multimedia

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, and Multimedia

+ Performance & integration

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, and Performance & Integration

+ Semantics

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, and Semantics

+ Offline & storage

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

HTML5 vs. XHTML2


WHATWG vs W3C

JavaScript vs. ECMAScript 5

Whatever!


Let's keep it simple.
  1. HTML5
  2. CSS3
  3. JavaScript
  4. Wrap it up

HTML5

Lots of new stuff


Semantic elements


Offline storage


Multimedia


3D, Graphics & Effects

HTML5 - Semantics

HTML5 semantics logo

Elements / tags


Classic
<div> <span> <p> <a> <del> <blockquote>

New
<hgroup> <aside> <nav> <figure> <time> <mark> <!DOCTYPE html> <section> <article> <header> <footer>

Form fields

Previously: Web forms 2.0


input types:

text, search, url, tel, email, password, datetime, date, month, week, time, datetimelocal, number, range, color, checkbox, radio button, file


See samples

HTML5 - Offline storage

HTML5 offline storage logo

Datasets & Data-attributes

Web Storage

AppCache

Indexed DB

File API

Data-URI

Datasets & data-attributes

Custom data to elements

HTML
<div data-example="hello" />
JS (via dataset)
var data = element.dataset.example; // read
element.dataset.example = 'goodbye'; // write
JQuery
var data = $('div').data('example'); // read
$('div').data('example', 'goodbye'); // write alt 1
$.data('div', 'example', 'goodbye'); // write alt 2


Web Storage


Store data locally like cookies
Only stores strings

if( typeof Storage !== 'undefined' )
    // Yes! localStorage and sessionStorage support!
window.localStorage.example = "hello"; // write
var world = window.localStorage.example; // read
window.sessionStorage.example = "hello"; // write
var world = window.sessionStorage.example; // read

APP Cache


Offline web applications

<!DOCTYPE html>
<html manifest="/cache.manifest">
<body>
 ...
</body>
</html>

CACHE MANIFEST
/clock.css
/clock.js
/clock-face.jpg

IndexedDB


Indexed database
(formerly WebSimpleDB API)

var kids = [ {name: "Anna"}, {name: "Betty"}, {name: "Christine"} ];

var request = window.indexedDB.open("CandyDB", "My candy store");

request.onsuccess = function(event) {
  var objectStore = event.result.objectStore("kids");

  for (var index = 0; index < kids.length; index++) {
    var kid = kids[index];

    objectStore.add(kid).onsuccess = function(event) {
      document.getElementById("display").textContent =
      "Saved record for " + kid.name + " with id " + event.result;
    };
  }
};

File API


Multiple files without Flash!


<input type="file" id="input">

var selected_file = document.getElementById('input').files[0];

Data-uri


Embed images as string


Demo of embeded image through data-uri

(check the source)


HTML5 - Multimedia

HTML5 Multimedia logo

Audio


Video

Audio


<audio src="elvis.ogg" controls></audio>

No consensus on codec... OGG / MP3 / WAV


Video


<video width="320" height="180" controls src="demo.ogv"></video>

No consensus on codec... VP8 / MPEG-4 / Ogg


HTML5 - 3D, Graphics & Effects

HTML5 3D Effects logo

SVG


Canvas


WebGL

SVG


Vector based images


SVG sample

Canvas


Dynamic graphics



WebGL


Hardware accelerated graphics


[Cool demo!]


HTML languages


HAML
!!!
%html
  %head
    %title BoBlog
    %link{"rel" => "stylesheet", "href" => "main.css"}
  %body
Generated HTML
<html>
  <head>
    <title>BoBlog</title>
    <link rel="stylesheet" href="/stylesheets/main.css" />
  </head>
  <body></body>
</html>

CSS3

Lots of new stuff


Web fonts


Generated content


Selectors


Styling

CSS3 - Web fonts


Font face


REM

Font face


@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'),
       url(http://.../droidsans.woff) format('woff');
}

p { font-family: 'Droid Sans'; }

Google Web Fonts


REM

Rapid Eye Movement Root EM units


body { font-size: 62.5%; }
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

li { font-size: 1.4rem; } /* =14px! */

CSS3 - Generated content


Before / After


Counters

Before / After


To be or not to be...
blockquote:before {
  content: '\201C';
}
blockquote:after {
  content: '\201D';
}

Counters


Steal underwear

...

Profit!

body {
  counter-reset: section;
}
.counter-sample:before {
  counter-increment: section;
  content: 'Step ' counter(section) ': ';
}

CSS3 - Selectors


Basics


New


Media Queries

CSS Basics


#id { background: red; }
element { background: green; }
.class { background: blue; }

.parent .child
.parent > .direct-child
.element + .sibling

a:visited
a:hover

CSS3 New


[style] { background: red !important; }
[data-view*="part-"] { border: 1px red !important; }

Pseudo-elements
.example:hover
.example:first-child
.example:first-letter
.example:nth-child(2)
.example:before
.example:after
.example:lang(sv)
.example:not(.evil-twin)

Media Queries


Apply style based on media info


@media screen and (max-width: 600px) {
  .reveal .state-background {
    background: rgba( 200, 50, 30, 0.6 );;
  }
}

Polyfill for IE

CSS3 - Styling

Rounded corners

span {
  border-radius:25px;
}

Box shadows

span {
  box-shadow: 10.0px 10.0px 5.0px rgb(136,136,136);
}

Text shadows

span {
  text-shadow: 10.0px 10.0px 5.0px rgb(136,136,136);
}

Gradients

span {
  linear-gradient(bottom, rgb(135,135,250) 10%, rgb(0,0,0) 78%);
}

2D Transforms

div {
  transform: rotate(30deg);
}

3D Transforms

div {
  transform: rotateX(40deg);
}

Transitions

#transition-demo {
  transition: background 1s;
  background: #0e0;
}

#transition-demo:hover {
  background: #e00;
}

CSS Languages

LESS/SASS
@color: #888;

#header {
  a {
    color: @color;

    &:hover {
      color: lighten(@color, 10%);
}  }  } // saving space :)
Compiled CSS
#header a {
  color: #888;
}
#header a:hover {
  color: #a2a2a2;
}
Minified CSS
#header a{color:#888}#header a:hover{color:#a2a2a2}

LESS


Variables

Mixins

Nested Rules

Operators

SASS


as LESS +

Nested Properties
Data Types
Flags
Debug printing
Control Directives
Functions

(Compass library)

JavaScript

Lots of new stuff


Strict mode


Web sockets


Web workers


Server sent DOM-events


Geolocation

JS - Strict mode


function imStrict(){
  "use strict";
  // ... your code ...
}

JS - Web sockets


Communication for web apps


var connection = new WebSocket('ws://socket.server.com');

connection.onopen = function () { ... };

connection.onerror = function (error) { ... };

connection.onmessage = function (e) { ... };

connection.send('Hello server');

JS - Web workers


Run scripts in the background


var worker = new Worker('my_task.js');
worker.onmessage = function(event) {
  console.log("Called back by the worker!\n");
};

JS - Server sent DOM-events


Server continuously sends data to client


var source = new EventSource("/path/to/my/event-stream-handler.php"); 

source.onmessage = function(event) {
  //do some thing with event.data, it is a string
};

JS - Geolocation


Gives the users location


navigator.geolocation.getCurrentPosition(success, error);

function success(position) { ... }

function error(msg) { ... }

JavaScript Languages

CoffeeScript
square = (x) -> x * x 
square = function(x) {
  return x * x;
};
TypeScript
function square(x) {
  return x * x;
}
function square(x) {
  return x * x;
}
Think you need to learn this? Learn JS.

CoffeeScript

class Greeter
  constructor: (@message) ->

  greet: () ->
    "Hello, " + this.greeting;

    greeter = new Greeter "world"
var Greeter, greeter;

Greeter = (function() {
  function Greeter(message) {
    this.message = message;
  }

  Greeter.prototype.greet = function() {
    return "Hello, " + this.greeting;
  };

  return Greeter;
})();

greeter = new Greeter("world");

TypeScript

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}

var greeter = new Greeter("world");
var Greeter = (function () {
  function Greeter(message) {
    this.greeting = message;
  }

  Greeter.prototype.greet = function () {
    return "Hello, " + this.greeting;
  };

  return Greeter;
})();

var greeter = new Greeter("world");

the End?


Questions?


Next Friday we'll talk JavaScript!

Resources

HTML5 Doctor
HTML5 Rocks
Smashing Magazine
A list apart
Codepen.io
HTML5 demos
CSS-Tricks
Dive into HTML5 (book)
Can I use