Present Online
Send the link below via email or IM to invite your audience
Start the presentation
- Invited audience will follow you as you navigate and present
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can view together your prezi
- Learn more about this feature in the manual
Download prezi for:
Present offline on a PC or Mac.
- Embedded YouTube videos need an active Internet connection to play.
- Portable prezis are not editable.
Edit and present offline with Prezi Desktop
- To open PEZ file, please download Prezi Desktop
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
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.
Html5 Dallas Days of .Net
Html5 presentation for days of .net
by Amir Rajan
on 4 March 2011
Tweet
Prezi Transcript
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
See the full transcript
