Html , Deep Dive
Mark up
Forms
It's easy...start using it
Before
Before
After
Awesome
<div id="header">
Html 5 Deep Dive
</div>
Before
After
<header>
Html 5 Deep Dive
</header>
<div class="blogpost">
<h2>Welcome to Ochard!</h2>
<p>
[...]
</p>
<p>
Thanks for using Orchard...
<p>
</div>
Also
<header>
<hgroup>
<h1>Html 5 Deep Dive</h1>
<h2>Some tag line</h2>
</hgroup>
</header>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Html 5 Deep Dive</title>
<link href="main.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
</body>
<html>
After
<div id="nav">
<a href="/Home">Home</a>
</div>
<nav>
<a href="/Home">Home</a>
</nav>
<article class="blogpost">
<h2>Welcome to Ochard!</h2>
<p>
[...]
</p>
<p>
Thanks for using Orchard...
<p>
</article>
<article class="blogpost">
<header>
<h1>Welcome to Ochard!</h1>
<time datetime="2011-2-6" pubdate>Feb 6, 2010</time>
</header>
<p>
[...]
</p>
<footer>
Thanks for using Orchard...
</footer>
</article>
<aside>
<h1>First</h1>
<p>
Lorem ipsum [...]
</p>
</aside>
<div>
<h3>First</h3>
<p>
Lorem ipsum [...]
</p>
</div>
<!DOCTYPE html >
<html lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html 5 Deep Dive</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
</body>
<html>
Before
After
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
Lets walk through
this page...
<div id="footer">
Powered by .....
</div>
Before
After
<footer>
Powered by .....
</footer>
<div id="login">
<a href...>Sign In</a>
</div>
<section>
<a href...>Sign In</a>
</section>
Before
After
After
Before
<head>
<meta charset="utf-8" />
<title>Html5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
use it today
document.createElement("article");
It's a work in progress...but shows promise
work on them javascript chops...
Client Side
HTML5 brings us closer to the semantic web
*
Forms with backwards compatibility...
Minor enhancements
New kids on the
block
<input name="firstName" type="text"
placeholder="first name"
required
autofocus />
<input name="password" type="password"
placeholder="select password" required />
<input name="repeatPassword" type="password"
placeholder="repeat password" required />
new!
placeholder,
autofocus,
required
Compatiblity...
It'll get there
eventually....
placeholder, autofocus, required
nothing...yet
placeholder,
autofocus
placeholder,
autofocus
Use it Today!
function supportsPlaceholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
if(supportsPlaceholder() == false)
{
/* insert custom stuff here */
}
Manual - Placeholder
Jquery - Placeholder
$(function() { $('input, textarea').placeholder(); });
http://mathiasbynens.be/demo/placeholder
Required Field, Auto Focus
$("#firstName").focus(); // auto focus
function onSubmit() {
var postBack = true;
$("input[required]").each(function() {
if($(this).val() == false) {
alert($(this).attr('placeholder') + ' is required.');
postBack = false;
}
}
);
return postBack;
}
<input type="email"
placeholder="email" />
<input type="url"
placeholder="your website" />
<input
type="number"
min="0"
max="10"
step="1" />
demo!
<input type="range"
min="0"
max="5"
step="1"
value="0" />
<input type="date" />
<input type="month" />
<input type="time" />
<input type="search"
placeholder="search"
results="5" />
<input type="color" />
Compatiblity...
It'll get there
eventually....
everything but search,
and url
email, website
range (slider) and search
number, range (slider), date, time, month, search
not: color, email, url
nothing yet...
demo!
Backwards compatablity in
3 easy steps!
if(!Modernizr.input.placeholder) {
}
if(!Modernizr.inputtypes.email) {
}
if(!Modernizr.inputtypes.date) {
}
Step 1: What isn't supported?
Step 2: use jQuery to select
the DOM
$("input[placeholder]").each(function() {
currentElement = $(this);
});
$("input[type='email']").each(function() {
currentElement = $(this);
});
$("input[type='date']").datepicker({
dateFormat: "yyyy-mm-dd"
});
Step 3: start duct taping.....(UI)
$("input[type='time']").timepicker({
showPeriod: false,
showLeadingZero: false
});
*
var validation = { rules: { }, messages: { } };
[array initialization code...]
$("input").each(function() {
$element = $(this);
type = $element.attr("type");
id = $element.attr("id");
if($element.attr("required")) {
validation["rules"][id]["required"] = true;
validation["messages"][id] =
$element.attr("placeholder") + " is required";
}
if(type == "email") {
validation["rules"][id]["email"] = true;
}
if(type == "url") {
validation["rules"][id]["url"] = true;
}
});
$("#form").validate(validation);
Step 3.1: more duct taping.....(validation)
Step 3.2: start duct taping.....(everything else)
Amir Rajan
Improving Enterprises
Principal Consultant
web: www.amirrajan.net
twitter: @amirrajan
Cool Stuff coming to a browser near you
Usefulness for business apps
Browser Adoption
Geo
Location
Client Side
Session
and
Storage
Offline
Mode
Video
object oriented javascript
function Person() {
}
function Person(firstName, lastName) {
}
var somePerson = new Person('John', 'Doe');
function Person(firstName, lastName) {
this.FirstName = firstName;
this.LastName = lastName;
}
var somePerson = new Person('John', 'Doe');
function Person(firstName, lastName) {
this.FirstName = firstName;
this.LastName = lastName;
}
Person.prototype.SayHello = function() {
alert(this.FirstName + ' ' + this.LastName + ' says hello!');
}
var somePerson = new Person('John', 'Doe');
function Person(firstName, lastName) {
this.FirstName = firstName;
this.LastName = lastName;
}
Person.prototype.SayHello = function() {
alert(this.FirstName + ' ' + this.LastName + ' says hello!');
}
Person.prototype.Greet = function(otherPerson) {
alert(this.FirstName + ' ' + this.LastName +
' says hello to ' + otherPerson.FirstName + ' ' + otherPerson.LastName + '!');
}
var somePerson = new Person('John', 'Doe');
somePerson.Greet(new Person('Jane', 'Smith'));
sessionStorage.someValue = "user";
localStorage.someValue = "user";
Model
View
Presenter
[HttpGet]
public ActionResult Get(Guid personId)
{
Person person = //retrieves some person from a repository
return Json(person, JsonRequestBehavior.AllowGet);
}
function PersonPresenter(view) {
this._view = view;
}
PersonPresenter.prototype.GetPerson = function () {
var view = this._view;
var personId = '<%= ViewData.Model.Id %>
$.getJSON(
'<%= getPersonUri >',
{ personId: personId },
function (data) {
view.FirstName(data.FirstName);
});
}
var _view;
var _presenter;
_view = {
FirstName: function (value) {
if(value != null)
$("#firstName").val(value);
else
return $("#firstName").val();
}
};
_presenter = new PersonPresenter(_view);
$(_presenter.GetPerson());
<input type="text" id="firstName"></input>
Model
View
View-model
[HttpGet]
public ActionResult Get(Guid personId)
{
Person person = //retrieves some person from a repository
return Json(person, JsonRequestBehavior.AllowGet);
}
using knockout.js
function GetPerson() {
$.getJSON(
'<%= getPersonUri >',
{ personId: <%= ViewData.Model.Id %> },
function (data) {
viewModel.firstName(data.FirstName);
});
}
var viewModel = {
firstName : ko.observable("");
};
$(function() {
ko.applyBindings(viewModel);
GetPerson();
});
<input type="text" id="firstName"
data-bind="value: firstName" />
demo
Drag and
Drop
Web Worker
var worker = new Worker("worker.js");
//on parent page
worker.onmessage = function(e) {
e.data;
}
//inside worker.js
postMessage("some message");
Web Sockets
var socket = new WebSocket("ws://localhost:/socket/server/");
onopen, onmessage, onclose
platforms:
jWebSocket (java)
web-socket-ruby (ruby)
Socket IO-node (node.js)
Canvas
Web SQL
var db = openDatabase('DBName', '1.0', 'description', /* estimated size */);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Customer (id unique, name)');
tx.executeSql('INSERT INTO Customer (id, name) VALUES (1, "John Doe")');
});
tx.executeSql('SELECT * FROM Customer', function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).name);
}
});
Consulting, Training, Jobs, Vegas Trip