Client Side Development Workshop HTML CSS and Javascript Fundamentals

Client Side Development
Introductory Workshop

Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Introduction
Hi, Iʼm Wilfred


Introduction
I do HTML, CSS and some Javascript


http://www.slideshare.net/wnas


Application
html, css and javascript.


HTML
itʼs easy.


NOT
if you do it right.


Structure


Doctypes


<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>


quirksmode


boxmodel


HTML
itʼs more than tables.
much more


Tables


Tables are evil?


nope


Tables are beautiful


Caption


Thead


tfoot


tbody


tr


td


th


colspan


colgroup


rowspan


rowgroup


HTML
Itʼs more than divʼs and spanʼs


div


span


p


h1 > h6


em


strong


abbr


Block & inline


Generally, block-level elements begin
on new lines, inline elements do not


id


class


validator.w3.org


HTML
Itʼs about structure, NOT presentation.


Do more with less
focus on the information, not the presentation.
that is what css is for.


http://microformats.org/


Exercise
nu.nl
ing.nl
postbank.nl


break


If you thought html was bad, I give you...


CSS


selector {

property : value;
}


div#id.foo p .bar { ... }


CSS 2.1


http://www.456bereastreet.com/archive/200509/
css_21_selectors_part_1/


Positioning


position : static;


position : relative;


ﬂoat: left;


ﬂoat : left;


IE doubles the padding and margin


display: inline;


Explorer 6 Duplicate Characters Bug


The IE5/6 Doubled Float-Margin Bug


http://positioniseverything.net/
explorer.html


Cascading
http://www.stuffandnonsense.co.uk/archives/css_speciﬁcity_wars.html


padding: 2px
padding: 2px 2px 2px 2px;


Shorthand


CSS 3


http://www.456bereastreet.com/archive/200601/
css_3_selectors_explained/


power


Unlimited power


e[att^=”val”]


E:empty


E~F


CSS 3 ?


dojo


jQuery


Tools


Firebug
https://addons.mozilla.org/en-US/ﬁrefox/addon/1843


Yslow
http://developer.yahoo.com/yslow/


Web developer 1.1.6
https://addons.mozilla.org/en-US/ﬁrefox/addon/60


Exercise


http://wnas.nl/fronteers/


JavaScript
part 1


JavaScript === evil
Do not rely on it.


Donʼt rely on it
HTML is a rely accessible platform. Use JavaScript to
enhance it.


Global variables === evil


Progressive Enhancement
!==

Graceful degradation.


HIJAX vs AJAX
Plan ajax from the beginning and build it in the end.


ns.nl
with javascript


ns.nl
without javascript


JavaScript !== java
Really not.


JavaScript
Is not a toy language.


<a
href=”#”
onclick=”javascript:function(){
window.open(‘http://wnas.nl’,’wnas’,’width=300,height=400’);
}”>
go there!
</a>


<a
href=”http://wnas.nl”
class=”popup”>
go there!
</a>


The World's Most Misunderstood
Programming Language
‘Douglas Crockford’


Closures
one of javascript most devious concepts


where a function
remembers what
happens around it
‘Stuart Langridge’


http://tinyurl.com/jsclosures


Patterns
Smatterns


If all you have is a
everything looks like a nail


Read a lot
this day is too short for patterns...
http://delicious.com/wnas


namespace
var ing = function () {
// do stuff
}();


Revealing module pattern
var foo = function () {
// do stuff
}
return {
foo : foo
}
}();


private variables
var config = { // object literal
name : ‘value’
};
var foo = function () {
alert ( config.name );
};
return {
foo : foo
};
}();

ing.foo();


XML vs JSON
Use the best possible solution


Not the available one
JSON vs XML


Memory
And the garbage collector


So what changed ?
Ajax and Rich Internet Applications.


Ajax
Asynchronous
Javascript
and
XML


The solution
think of history


Ajax
origins


Clean up
That is what Ajax stood for anyway...


Pick up after yourself
Leave a clean dom after you...


Totaal voetbal
Let the individual elements of your
program work for you.


Java
To handle the logic.


JSP / XHTML
To display the structure of your programs.


CSS
To present it in a proper manner.


JavaScript
To enhance the user experience.


Exercise
enhance the page you made...


Extra time


Event delegation


Just in time initialization


Lazy loading


Code as prose.


Douglas
The good parts


JavaScript
The Deﬁnitive Guide (5th)


Client Side Development Workshop HTML CSS and Javascript Fundamentals

Recommended

Recommended

More Related Content

More from Wilfred Nas

More from Wilfred Nas (8)

Recently uploaded

Recently uploaded (20)

Client Side Development Workshop HTML CSS and Javascript Fundamentals

Editor's Notes