Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Html5 Dallas Days of .Net

Html5 presentation for days of .net
by

Amir Rajan

on 4 March 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Html5 Dallas Days of .Net

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