3. FUTURE OF WEB DESIGN NYC 2011
HTML 4.01
html
meta head link style
title base body dl dt dd
bdo script noscript map dfn b
object param p div ul ol li cite
iframe address area img br a i small
pre code abbr kbd var q samp hr menu
textarea ins del sub sup span strong
select option optgroup label input
form fieldset legend button u em
blockquote h1 h2 h3 h4 h5 h6
table caption col colgroup
thead tbody tfoot tr
th td
4. FUTURE OF WEB DESIGN NYC 2011
HTML5
html
meta head link style
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a i small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button u em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
thead tbody tfoot tr
th td
5. FUTURE OF WEB DESIGN NYC 2011
Our focus today
html
meta head link style
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a i small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button u em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
thead tbody tfoot tr
th td
13. FUTURE OF WEB DESIGN NYC 2011
Organization
<section>
<!-- pretty much anything can go here -->
</section>
<article>
<!-- pretty much anything can go here -->
</article>
20. FUTURE OF WEB DESIGN NYC 2011
Organization
<header>
<!-- titles, etc. go here -->
</header>
<footer>
<!-- meta/supplementary information goes here -->
</footer>
45. FUTURE OF WEB DESIGN NYC 2011
Implicit sections (HTML 4)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h2> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
46. FUTURE OF WEB DESIGN NYC 2011
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h2> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
47. FUTURE OF WEB DESIGN NYC 2011
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h1> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h1> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
48. FUTURE OF WEB DESIGN NYC 2011
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h4> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h6> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
49. FUTURE OF WEB DESIGN NYC 2011
Sections
๏ section
๏ article
๏ aside
๏ footer
๏ header
๏ nav
49
50. FUTURE OF WEB DESIGN NYC 2011
Outline limitations in HTML4
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Subtitle
51. FUTURE OF WEB DESIGN NYC 2011
Heading groups (HTML5)
hgroup
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
52. FUTURE OF WEB DESIGN NYC 2011
Aside: rooted sections
<h1> Title
<p> Text content continues...
<p> Text content continues...
<h2> Section heading
<p> Text content continues...
<blockquote>
<h2> Rooted heading
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Section heading
53. FUTURE OF WEB DESIGN NYC 2011
Sectioning roots
๏ body
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td
53
55. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The em element
Represents a span of text text with emphatic stress.
<p>HTML5 introduces several <em>really</em> useful elements and
a ton of new APIs.</p>
The strong element
Represents a span of text of great importance.
<p>Please fill out the form below. <strong>Note: all
fields are required.</strong></p>
56. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The b element
Represents a span of text offset from its surrounding content, but of no extra
importance.
<p>This presentation is about <b>HTML5</b>.</p>
The i element
Represents a span of text in an alternate voice or mood.
<p>The <code>b</code> and <code>i</code> elements
have been legitimized in HTML5. <i>Go figure.</i></p>
<p>I like to work with markup languages because
<strong>they are simple and easy to read</strong>.
They also have that certain <i lang="fr" title="I
don’t know what">je ne sais quoi</i>.</p>
57. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The cite element
The title of a cited work (e.g. a book, magazine, or journal).
<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on
original research, his considerable experience at Yahoo! and eBay,
and the perspectives of many of the field’s leading designers to
show you everything you need to know about designing effective
and engaging Web forms.</p>
58. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The small element
Represents so-called “ ne print”
(e.g. disclaimers, caveats, etc.).
59. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The hr element
Represents a paragraph-level thematic break.
70. FUTURE OF WEB DESIGN NYC 2011
Expansion 9+ 4+ 6+ 5+ 11.1+
<ol id="search-results">
<li>
<h3><a href="...">Web Upgrade <mark>HTML5</mark>
May Weaken Privacy</a></h3>
<p>The new language, <mark>HTML5</mark>, could give
marketers access to many more details about users'
online activities.</p>
</li>
</ol>
71. FUTURE OF WEB DESIGN NYC 2011
Expansion 6+ soon
<details>
<summary>This is the visible description</summary>
<p>This content would be hidden by default.</p>
</details>
72. FUTURE OF WEB DESIGN NYC 2011
Expansion 9+ 4+ 6+ 5+ 11.1+
<figure id="fig-1">
<img src="photo.jpeg" alt=""/>
<figcaption>Photo of Albert Einstein</figcaption>
</figure>
<figure id="fig-2">
<table>
<caption>2011 Forecast Earnings</caption>
<!-- a bunch of data -->
</table>
</figure>
93. FUTURE OF WEB DESIGN NYC 2011
All the web’s a play…
<section id="main" role="main">
<!-- The primary content for the page would go here -->
</section>
104. FUTURE OF WEB DESIGN NYC 2011
Semantic comparison
Ad-hoc ARIA Role HTML5
#header, #top banner header (kind of)
#main, #content main none
#extra, .sidebar complementary, note aside
#footer, #bottom contentinfo footer
#nav navigation nav
.hentry article article
105.
106. FUTURE OF WEB DESIGN NYC 2011
These are the droids you seek
<span role="button">OK</span>
<div role="alert">
<p>Something went wrong.</p>
</div>
<div role="alertdialog">
<p>Something went wrong.</p>
<img src="x.png" alt="dismiss" role="button" />
</div>
107. FUTURE OF WEB DESIGN NYC 2011
What is it?
<a role=”button”>Tweet</a>
class=”button”>Tweet</a>
108. FUTURE OF WEB DESIGN NYC 2011
What is it?
<a role=”button”>Tweet</a>
132. FUTURE OF WEB DESIGN NYC 2011
Microdata
<img src="nasty.png" data-nsfw="true"/>
133. FUTURE OF WEB DESIGN NYC 2011
Microdata
<img src="low-res-photo.png" data-hi-res="high-res-photo.png"/>
134. FUTURE OF WEB DESIGN NYC 2011
Microdata
<section id="comments">
<a id="comment-loader"
data-replace="/comments-only-for-url-title/"
href="/article-with-comments">
View comments on this entry and add your own
</a>
</section>
135. FUTURE OF WEB DESIGN NYC 2011
Microdata
(function( $ ){
$.fn.ajaxInclude = function(){
return this.each(function(){
var $el = $( this ),
target = $el.data( 'target' ),
$targetEl = target && $( target ) || $el,
methods = [ 'append', 'replace', 'before', 'after' ],
ml = methods.length,
method, url;
while ( ml-- ) {
method = methods[ ml ];
if ( $el.is( '[data-' + method + ']' ) ) {
url = $el.data( method ); break;
}
}
if ( method == 'replace' ){ method += 'With'; }
if ( url && method ) {
$.get( url, function( data ){
$el.trigger( 'ajaxInclude', [$targetEl, data] );
$targetEl[ method ]( data );
});
}
});
};
})( jQuery );
138. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio src="my.oga" controls="controls"></audio>
139. FUTURE OF WEB DESIGN NYC 2011
Audio
Browser .aac .mp3 .oga .wav
Chrome 6+ YES YES YES NO
Firefox 3.6+ NO NO YES YES
Internet Explorer 9+ YES YES NO YES
Opera 10.5+ NO NO YES YES
Safari 5+ YES YES NO YES
140. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio controls="controls">
<source src="my.mp3"/>
<source src="my.oga"/>
<!-- fallback -->
</audio>
141. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio controls="controls" autobuffer="autobuffer"
preload="auto">
<source src="my.mp3"/>
<source src="my.oga"/>
<!-- fallback -->
</audio>
143. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio controls="controls" autobuffer="autobuffer"
preload="auto">
<source src="my.mp3"/>
<source src="my.oga"/>
<object …>
<!-- flash player goes here -->
<ul>
<li><a href="my.mp3">Download MP3</a></li>
<li><a href="my.oga">Download Ogg</a></li>
</ul>
</object>
</audio>
144. FUTURE OF WEB DESIGN NYC 2011
Audio
$('audio').each(function(){
var $audio = $(this), media = {}, formats = [];
$audio.find('source').each(function(){
var src = $(this).attr('src'),
ext = src.split('.').pop();
media[ext] = src;
formats.push(ext);
});
$audio.jPlayer({
swfPath: '/vendors/jPlayer',
ready: function(){
$audio.jPlayer('setMedia', media);
},
supplied: formats.join(', ')
});
});
Using jQuery & jPlayer
145. FUTURE OF WEB DESIGN NYC 2011
Audio
$('audio').each(function(){
var audio = this,
$button = $('<button>Play</button>')
.click(function(){
audio.play();
});
$(this)
.removeAttr('controls')
.after($button);
});
Using jQuery
146.
147. FUTURE OF WEB DESIGN NYC 2011
Video
<video src="my.ogv" controls="controls"></video>
148. FUTURE OF WEB DESIGN NYC 2011
Video
Video le = container le (like ZIP)
๏ 1 video track
๏ 1 (or more) audio tracks
๏ metadata
๏ subtitle/caption tracks (optional)
141
149. FUTURE OF WEB DESIGN NYC 2011
Video formats
๏ Flash Video (. v)
Prior to 2008, the only video format supported in Adobe Flash.
๏ MPEG 4 (.m4v or .mp4)
Based on QuickTime; iTunes uses this format.
๏ Ogg (.ogv)
Open source container format.
๏ WebM (.webm)
New format announced in May 2010.
142
150. FUTURE OF WEB DESIGN NYC 2011
Video codecs
๏ H.264
Used primarily in MPEG 4. Only video codec natively supported on iOS.
Patented.
๏ Theora
Used primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).
๏ VP8
Used primarily in WebM. Owned by Google, but licensed royalty-free.
143
151. FUTURE OF WEB DESIGN NYC 2011
Audio codecs
๏ MP3
Nearly universal in usage, but was part of FLV. Patented.
๏ AAC (Advanced Audio Coding)
Used primarily in MP4. Patented.
๏ Vorbis
Used in Ogg audio & video as well as WebM. Royalty-free.
144
152. FUTURE OF WEB DESIGN NYC 2011
Video
Browser .m4v .ogv .webm
(AAC + H.264) (Vorbis + Theora) (Vorbis + VP8)
Chrome 4-16 4+ 6+
Firefox NO 3.5+ 4+
Internet Explorer 9+ NO MAYBE
Opera NO 10.5+ 10.6+
Safari 3.2+ MAYBE MAYBE
153. FUTURE OF WEB DESIGN NYC 2011
No MIME, no service
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
154. FUTURE OF WEB DESIGN NYC 2011
Video
<video controls="controls" width="640" height="480">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>
<!-- fallback -->
</video>
155. FUTURE OF WEB DESIGN NYC 2011
Video
<video controls="controls" width="640" height="480"
poster="my.png">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>
<!-- fallback -->
</video>
156. FUTURE OF WEB DESIGN NYC 2011
Video
<video controls="controls" width="640" height="480"
poster="my.png">
<source src="my.m4v"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="my.webm"
type='video/webm; codecs="vp8, vorbis"'/>
<source src="my.ogv"
type='video/ogg; codecs="theora, vorbis"'/>
<!-- fallback -->
</video>
Note: The MPEG 4 codec will depend on the encoding “profiles” you use.
157. FUTURE OF WEB DESIGN NYC 2011
Video
<video width="600" height="400" poster="/r/2-5.png"
controls="controls" preload="none">
<source src="/r/2-5.m4v" type="video/mp4"/>
<source src="/r/2-5.webm" type="video/webm"/>
<source src="/r/2-5.ogv" type="video/ogg"/>
<img src="/r/2-5.png" width="600" height="400" alt=""/>
<ul>
<li><a href="/r/2-5.m4v">Download as video/mp4</a></li>
<li><a href="/r/2-5.webm">Download as video/webm</a></li>
<li><a href="/r/2-5.ogv">Download as video/ogg</a></li>
</ul>
</video>
165. FUTURE OF WEB DESIGN NYC 2011
Subtitle formats
๏ SubRip (.srt)
1
00:01:31,041 --> 00:01:32,000
Hello?
2
00:02:10,164 --> 00:02:12,082
Good morning, is your mother in?
158
166. FUTURE OF WEB DESIGN NYC 2011
Subtitle formats
๏ SubViewer (.sub)
00:01:31.04,00:01:32.00
Hello?
00:02:10.16,00:02:12.08
Good morning, is your mother in?
159
177. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
// Sweet!
}
178. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
var cache = window.localStorage;
cache.setItem( 'test', 'I am storing nuts for the winter.' );
}
180. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
var cache = window.localStorage;
console.log( cache.getItem('test') );
}
181. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
var cache = window.localStorage;
console.log( cache.getItem('test') );
cache.clear();
console.log( cache.getItem('test') );
}
182. FUTURE OF WEB DESIGN NYC 2011
localStorage
๏ is restricted by domain
๏ persists until deleted
(programmatically or by the user)
๏ is limited in size (usually 5MB)
๏ is (currently) limited to strings
175
183. FUTURE OF WEB DESIGN NYC 2011
sessionStorage
๏ is like localStorage
๏ disappears when the browser is closed
176
184. FUTURE OF WEB DESIGN NYC 2011
localStorage
๏ is restricted by domain
๏ persists until deleted
(programmatically or by the user)
๏ is limited in size (usually 5MB)
๏ is (currently) limited to strings
177
185. FUTURE OF WEB DESIGN NYC 2011
Cue the sad trombone
if ( window.localStorage )
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', obj );
console.log( cache.getItem( 'nums' ) );
}
186. FUTURE OF WEB DESIGN NYC 2011
Huzzah!
if ( window.localStorage )
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', JSON.stringify( obj ) );
console.log( JSON.parse( cache.getItem( 'nums' ) ) );
}
187. FUTURE OF WEB DESIGN NYC 2011
localStorage
๏ is restricted by domain
๏ persists until deleted
(programmatically or by the user)
๏ is limited in size (usually 5MB)
๏ is (currently) limited to strings
๏ mutable
180
188. FUTURE OF WEB DESIGN NYC 2011
Yikes!
window.localStorage.setItem( ‘important’, ‘My locker combo is…’ );
// …
window.localStorage.setItem( ‘test’, ‘Just playing around’ );
// …
window.localStorage.clear();
189.
190. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// create a Squirrel instance with your unique key
var $S = new Squirrel( 'scale-song' );
// write a value to the cache
$S.write( 'doe', 'ray' );
// read it back
$S.read( 'doe' ); // 'ray'
// write a value to a sub-cache
$S.write( 'song', 'doe', 'a dear, a female dear' );
// read back the original value
$S.read( 'doe' ); // 'ray'
// read back the sub-cached value
$S.read( 'song', 'doe' ); // 'a dear, a female dear'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
191. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// removing a single property from the sub-cache
$S.remove( 'song', 'doe' );
// try to read the sub-cached value
$S.read( 'song', 'doe' ); // null
// read the root value
$S.read( 'doe' ); // 'ray'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
192. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// add some more content to the sub-cache
$S.write( 'song', 'doe', 'a dear, a female dear' );
$S.write( 'song', 'ray', 'a drop of golden sun' );
// clear the whole sub-cache
$S.clear( 'song' );
// check that it's been cleared
$S.read( 'song', 'doe' ); // null
$S.read( 'song', 'ray' ); // null
// check that the root value's still intact
$S.read( 'doe' ); // 'ray'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
193. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// remove a property form the main cache
$S.remove( 'doe' );
// check it's value
$S.read( 'doe' ); // null
// write a bit more data in the root and in a sub-cache
$S.write( 'doe', 'ray' );
$S.write( 'song', 'doe', 'a dear, a female dear' );
$S.write( 'song', 'ray', 'a drop of golden sun' );
// clear the whole cache
$S.clear();
// check it's all gone
$S.read( 'song', 'doe' ); // null
$S.read( 'song', 'ray' ); // null
$S.read( 'doe' ); // null
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
195. FUTURE OF WEB DESIGN NYC 2011
indexedDB support
if ( “indexedDB” in window ) {
// Spec is final & implemented!
}
else if ( “mozIndexedDB” in window ) {
// Mozilla is experimenting
}
else if ( “msIndexedDB” in window ) {
// Microsoft is experimenting
}
else if ( “webkitIndexedDB” in window ) {
// Chrome is experimenting
}
else {
// no dice
}
196. FUTURE OF WEB DESIGN NYC 2011
indexedDB
Kids Candy
Candy Sales
197. FUTURE OF WEB DESIGN NYC 2011
indexedDB
var request = window.indexedDB.open(
"CandyDB", "My candy store database"
);
198. FUTURE OF WEB DESIGN NYC 2011
indexedDB: initialization
request.onsuccess = function(event) {
var db = event.result;
if ( db.version != "1" )
{
// Initialize database
var createdObjectStoreCount = 0,
objectStores = [ { name: "kids", keyPath: "id", autoIncrement: true },
{ name: "candy", keyPath: "id", autoIncrement: true },
{ name: "candySales", keyPath: "", autoIncrement: true } ],
len = objectStores.length, params;
while ( len-- ) {
var params = objectStores[len];
request = db.createObjectStore(
params.name, params.keyPath, params.autoIncrement
);
request.onsuccess = objectStoreCreated;
}
}
else {
// User has been here before, no initialization required.
loadData(db);
}
};
199. FUTURE OF WEB DESIGN NYC 2011
indexedDB: initialization
function objectStoreCreated(event) {
if ( ++createdObjectStoreCount == objectStores.length )
{
db.setVersion("1").onsuccess = function(event) {
loadData(db);
};
}
}
200. FUTURE OF WEB DESIGN NYC 2011
indexedDB: create
var kids = [ { name: "Anna" }, { name: "Betty" },
{ name: "Christine" } ];
var request = window.indexedDB.open(
"CandyDB", "My candy store database"
);
request.onsuccess = function(e) {
var objectStore = e.result.objectStore("kids"),
var i=0, len=kids.length;
while ( i < len ) {
var kid = kids[i++];
objectStore.add(kid).onsuccess = function(e) {
console.log( "Saved record for " + kid.name +
" with id " + e.result );
};
}
};
201. FUTURE OF WEB DESIGN NYC 2011
indexedDB: read
request.onsuccess = function(e) {
// Enumerate the entire object store.
request = e.result.objectStore("kids").openCursor();
request.onsuccess = function( event )
{
var cursor = event.result;
// If cursor is null … done
if (!cursor) { return; }
console.log( cursor.value.name );
cursor.continue();
};
};
202. FUTURE OF WEB DESIGN NYC 2011
indexedDB: read w/ join
var candyEaters = [];
request.onsuccess = function(event) {
var db = event.result,
transaction = db.transaction(["kids", "candySales"]);
transaction.oncomplete = function(){ console.log(candyEaters); },
kidCursor, saleCursor, salesLoaded=false, count;
var kidsStore = transaction.objectStore("kids");
kidsStore.openCursor().onsuccess = function(event) {
kidCursor = event.result;
count = 0;
attemptWalk();
}
var salesStore = transaction.objectStore("candySales");
var kidIndex = salesStore.index("kidId");
kidIndex.openObjectCursor().onsuccess = function(event) {
saleCursor = event.result;
salesLoaded = true;
attemptWalk();
}
//…
203. FUTURE OF WEB DESIGN NYC 2011
indexedDB: read w/ join
// …
function attemptWalk() {
if (!kidCursor || !salesLoaded) return;
if ( saleCursor && kidCursor.value.id == saleCursor.kidId )
{
count++;
saleCursor.continue();
}
else
{
candyEaters.push({ name: kidCursor.value.name, count: count });
kidCursor.continue();
}
}
} // end request.onsuccess
207. FUTURE OF WEB DESIGN NYC 2011
LocalStorageDB example
this.searchArticles = function( q, callback ) {
var cat_ids = [], categories = [],
articles = _DB.SELECT( 'articles', function( row ){
var $div = $('<div/>').html( row.html );
if ( row.title.indexOf( q ) > -1 ||
$div.text().indexOf( q ) > -1 ) {
row.type = 'article';
cat_ids.push( row.category_id );
return true;
}
return false;
}).LIMIT(6),
i = articles.length;
_DB.SELECT( 'categories', function( row ){
var i = $.inArray( row.id, cat_ids );
if ( i > -1 ) {
categories[cat_ids[i]] = row.slug;
}
return false;
});
while ( i-- ) {
articles[i].category_slug = categories[articles[i].category_id];
}
if ( callback instanceof Function ) { callback( articles ); }
};
208. FUTURE OF WEB DESIGN NYC 2011
localStorageDB example
// Initialise. If the database doesn't exist, it is created
var lib = new localStorageDB( "library" );
// Check if the database was just created. Useful for initial database setup
if ( lib.isNew() ) {
// create the "books" table
lib.createTable( "books", ["id", "title", "author", "year", "copies"] );
// insert some data
lib.insert( "books",
{ id: "B001", title: "Phantoms in the brain",
author: "Ramachandran", year: 1999, copies: 10 } );
// commit the database to localStorage
// all create/drop/insert/update/delete operations should be committed
lib.commit();
}
210. FUTURE OF WEB DESIGN NYC 2011
Geolocation
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
},
function(error){
alert('ouch');
}
);
}
211. FUTURE OF WEB DESIGN NYC 2011
Geolocation
function getPlaceFromFlickr( lat, lon, callback )
{
// the YQL statement
var yql = 'select * from flickr.places where lat=' +
lat + ' and lon=' + lon;
// assembling the YQL webservice API
var url = 'http://query.yahooapis.com/v1/public/yql?q=' +
encodeURIComponent(yql) +
'&format=json&diagnostics=false&callback=' + callback;
// create a new script node and add it to the document
var s = document.createElement('script');
s.setAttribute( 'src', url );
document.getElementsByTagName('head')[0].appendChild(s);
};
// …
212. FUTURE OF WEB DESIGN NYC 2011
Geolocation
// callback in case there is a place found
function output(o){
if ( typeof(o.query.results.places.place) != 'undefined' )
{
console.log( o.query.results.places.place.name );
}
}
213. FUTURE OF WEB DESIGN NYC 2011
Geolocation
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
getPlaceFromFlickr(
position.coords.latitude,
position.coords.longitude,
'output'
);
},
function(error){
alert('ouch');
}
);
}
215. FUTURE OF WEB DESIGN NYC 2011
Offline
<html manifest="manifest.appcache">
216. FUTURE OF WEB DESIGN NYC 2011
Offline
CACHE MANIFEST
# Cache manifest version 1.0
# Change the version number to trigger an update
CACHE:
index.php
c/main.css
j/main.js
i/logo.png
# when offline, change content
FALLBACK:
/ /offline.html
# never cached
NETWORK:
signup.html
manifest.appcache served with MIME of text/cache-manifest
217. FUTURE OF WEB DESIGN NYC 2011
Offline
navigator.onLine // true or false
218. FUTURE OF WEB DESIGN NYC 2011
Limits
๏ Safari (desktop): ∞
๏ Safari (iOS): 10MB
๏ Chrome: 5MB*
๏ Android: ∞
๏ Firefox: ∞**
๏ Opera: 50MB***
* Installed “Apps” get more
** Permission required
*** User-adjustable
211
230. FUTURE OF WEB DESIGN NYC 2011
Parsing errors
@import 'not-for-IE7-or-below.css' screen;
@media screen, print, refrigerator {
/* IE will get these rules */
}
245. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* First or last */
p:first-child
p:last-child
/* First or last of a specific type */
p:first-of-type
p:last-of-type
/* One is the loneliest number */
p:only-child
p:only-of-type
/* Nature abhors a vacuum */
p:empty
246. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* Specific elements */
p:nth-child(1)
p:nth-child(5)
/* All paragraphs */
p:nth-child(1n+0)
p:nth-child(n+0)
p:nth-child(n)
/* Same as a simple element selector, but more specific */
248. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* Only paragraph elements considered */
p:nth-of-type(odd) { background: white; }
p:nth-of-type(even) { background: grey; }
/* Every paragraph but first and last */
p:nth-of-type(n+2):nth-last-of-type(n+2) { background: white; }
249. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* Negatory good buddy */
p:not(:empty) { outline: 10px solid red; }
p:not(:visited) { color: blue; }
250. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
:enabled
:disabled
:checked
:required
:optional
:valid
:invalid
:in-range
:out-of-range
:read-only
:read-write
251. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo element
/* Dynamics */
p::first-letter {
font-size: 2.8em;
float: left;
line-height: 1;
margin-right: .1em;
}
p::first-line { font-weight: bold; }
252. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo element
/* Generated content */
p::before { content: ‘hello from CSS’; }
p::after { content: ‘goodbye from CSS’; }
a::after { content: url(http://graphics8.nytimes.com/images/
multimedia/icons/document_icon.gif); }
254. FUTURE OF WEB DESIGN NYC 2011
@media blocks
@media screen {
/* Styles for screen media only */
}
255. FUTURE OF WEB DESIGN NYC 2011
@media blocks+
@media screen and (max-width:450px) {
/* Styles for screen media when browser
is 450px wide or below */
}
256. FUTURE OF WEB DESIGN NYC 2011
Getting granular
@media
screen and (min-device-width:1024px)
and (max-width:989px),
screen and (max-device-width:480px),
screen and (max-device-width:480px)
and (orientation:landscape),
screen and (min-device-width:481px)
and (orientation:portrait) {
/* Layout for narrower desktop (below 990px)
or
iPhone running iOS 3 (or equivalent)
or
iPhone running iOS 4 (or equivalent) in “landscape” view
or
iPad (or equivalent) in “portrait” view */
}
257. FUTURE OF WEB DESIGN NYC 2011
Mobile First w/ media queries
/* Universal Layout */
@media screen {
/* Styles for all screens */
}
@media screen and (min-width:481px) {
/* Styles for all screens 480px+ width */
}
@media screen and (min-width:754px) {
/* Styles for all screens 754px+ width */
}
258. FUTURE OF WEB DESIGN NYC 2011
Patching IE8-
@media screen and (min-width:480px) {
/* styles for 480px and up go here */
}
main.css
<link rel=”stylesheet” href=”main.css”/>
<script src=”respond.min.js”></script>
index.html
https://github.com/scottjehl/Respond
267. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 3.6+ 4+ 5+ 10+
p {
background: url(first.png),
url(second.png),
url(third.png);
background-position: top left;
background-repeat: no-repeat;
}
268. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 3.6+ 4+ 5+ 10+
p {
background: url(first.png) right bottom,
url(second.png) center center,
#fff url(third.png) bottom right;
background-repeat: no-repeat;
}
269. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 4+ 4+ 5+ 11+
p {
background: red;
background-clip: border-box; /* or padding|content-box */
border: 10px dashed;
padding: 10px;
}
FF 1-3.6 requires -moz- and doesn’t accept the “-box” portion
270. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 4+ 4+ 5+ 11+
p {
background: url(image-1.png), red url(image-2.png);
background-clip: border-box, content-box;
border: 10px dashed;
padding: 10px;
}
271. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 4+ 4+ 5+ 11+
p {
background: url(image-1.png);
background-origin: border-box; /* or padding|content-box */
border: 10px dashed;
padding: 10px;
}
FF 3.6 requires -moz- and doesn’t accept the “-box” portion
296. FUTURE OF WEB DESIGN NYC 2011
Transitions
a {
transition: color /* Property */
2s /* Duration */
linear /* Function (optional) */
0.5s; /* Delay (optional) */
}
297. FUTURE OF WEB DESIGN NYC 2011
Transitions
a {
transition-property: color,
font-size;
transition-duration: .5s;
transition-timing-function: ease-in-out,
linear;
}