Embed Size (px)
DESCRIPTION
A quick introduction to standards-based web development given at Stanford University May 2007
Citation preview
Plan your web siteslike you plan parties
Stanford, May 2007
Christian Heilmann
• All of the following is licensed under a Creative Commons Attribution-Share Alike 3.0 License http://creativecommons.org/licenses/by-sa/3.0/ which means you can re-use it by attributing anything you use to me.
Go nuts
• Why am I telling you that you should plan your web site like you plan a party?
http://www.icanhascheezburger.com
• I have no idea what you do or what you want to hear about and I just published a book that has a similar approach.
• My master plan is to achieve the following:
– Help people forget about the internet as a technical challenge and use it to communicate and publish information.
• A good party is made up from several components:
– Music
– Food
– Drinks (or other drug equivalents)
• The music part is easy, if you keep it simple. The music should be:
– Fast
– Loud
– Easy to understand / discordantly sing along
• The food part is a bit trickier. You need to cover the basic food groups:
– Crisps
– Burgers
– Salads
– Alternatives for the Vegetarians / Vegans / Other oddballs
• The drinks part is mostly easy, just make sure you have
– Alcoholic
– Ridiculously Alcoholic
– Non-alcoholic drinks to mix the others with / use as an alternative
• The main problem you have is one of transportation and maintenance.
– You want the music to arrive and not get lost or broken
– You want the drinks to stay cool and mostly unmixed
– You want some of the food to stay cold
– You want to make sure the salads don’t mix with the meat as otherwise you annoy the Vegans
• The solution:
• The solution:
• The solution:
• The solution:
• That way you can solve the transportation issues and you successfully bring the party idea to the intended audience.
• As a schema:
• The same applies to delivering a web product. You have your different components:
– HTML – The Music / Non Alcoholic Drinks
– CSS – The Food
– JavaScript/Flash – The Drinks / Drugs
• But first of all:
• WYSIWYG is not a solution to anything, it is a waste of time.
• WYSIWYG should be WYSIWYCIICCANSGYAYPFBYCSOMAA
http://www.icanhascheezburger.com
• WYSIWYCIICCANSGYAYPFBYCSOMAA
– What You See Is What Your Computer In Its Current Configuration And Network State Gives You And You Perceive Filtered By Your Current State Of Mind And Ability.
http://www.cuteoverload.com
• HTML is the most important part.
• Without it there is no web site.
• It gives structure to the content you want to convey.
Party etiquette. How not to approach women at parties. Don’t say “hey babe, come here often”. Don’t show them your Speedos and say “you know you like my Speedos, don’t fight it”. Don’t say “hey, haven’t I seen you on girls gone wild?” (unless you are 100% sure). How not to approach men at parties. Don’t show up.
• Party etiquette.
• How not to approach women at parties.
– Don’t say “hey babe, come here often”.
– Don’t show them your Speedos and say “you know you like my Speedos, don’t fight it”.
– Don’t say “hey, haven’t I seen you on girls gone wild?” (unless you are 100% sure).
• How not to approach men at parties.
– Don’t show up.
• In HTML:
<h1>Party etiquette</h1><h2>How not to approach women at parties.</h2><ul><li>Don’t say “hey babe, come here often?”.</li><li>Don’t show them your Speedos and say “you know
you like my Speedos, don’t fight it”.</li><li>Don’t say “hey, haven’t I seen you on girls
gone wild?” (unless you are 100% sure).</li></ul><h2>How not to approach men at parties.</h2><ul><li>Don’t show up.</li>
</ul>
• With good and honest music, you can tell by the cover what it is.
• Punk
• Electronic
• Comedy
• Progressive Rock
• Music that was made to make money might trick you.
• Punk?
• Hip Hop?
• What now?
• Don’t make your end users have to guess what your content is.
• What you need is a packing crate for your HTML, and this is the DOCTYPE.
• Now, this is what I call an HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en"><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"> <title>Party Etiquette</title>
</head><body><h1>Party etiquette</h1>[… All the other stuff …]</body></html>
• The idea of music that is easy to follow and sing along to also applies to your HTML.
• Simply put, use the right HTML for the right job.
• The fancy name for this is semantic markup.
• Thinking too far…
<table width=”300” border=”0”><tr><td><font face=”arial” size=”+3”><b>Party Etiquette
</b></font></td>
</tr></table>
• Better, but still too much
<div class=”main_heading”>Party Etiquette</div>
• There we go…
<h1>Party Etiquette</h1>
• Navigation menu, fail#1:
<table border=”0”><tr><td><a href=”home.html”>home</a></td></tr><tr><td><a href=”location.html”>Report</a></td></tr><tr><td>
<a href=”photos.html”>Photos</a><table border=”0”><tr><td><a
href=”partyshots.html”>Party</a></td></tr><tr><td><a
href=”mugshots.html”>Police</a></td></tr></table>
</td></tr><tr><td><a href=”videos.html”>Videos</a></td></tr><tr><td><a href=”aftermath.html”>Aftermath</a></td></tr>
</table>
• Navigation menu, fail#2:
<a href=”home.html”>home</a><br /><a href=”location.html”>Report</a><br /><a href=”photos.html”>Photos</a><br /><img src=”0.gif” width=”10” height=”10” /><a href=”partyshots.html”>Party</a><br /><img src=”0.gif” width=”10” height=”10” /><a href=”mugshots.html”>Police</a><br /><a href=”videos.html”>Videos</a><br /><a href=”aftermath.html”>Aftermath</a><br />
• Navigation menu:
<ul><li><a href=”home.html”>home</a></li><li><a href=”location.html”>Report</a></li><li><a href=”photos.html”>Photos</a><ul><li><a href=”partyshots.html”>Party</a></li><li><a href=”mugshots.html”>Police</a></li>
</ul> </li><li><a href=”videos.html”>Videos</a></li><li><a href=”aftermath.html”>Aftermath</a></li>
</ul>
• You got your party going with the right music and you have to keep people entertained.
• One idea is to provide nourishment.
• Your food should be
– easy to prepare,
– re-arrange and
– most of all fresh.
• For web development and CSS this means that you stick to the basics and use them as far as they go.
• You can still make a product really pleasing to the eye without sacrificing structure.
• The myth of the unstyleddocument.
• Global Whitespace Reset gives you a clean slate to start from
*{margin:0;padding:0;list-style:none;border:none;
}
• Define presets for all the elements you are likely to have in a document using element selectors
body{font-family:helvetica,arial,sans-serif;background:#fff;color:#333;padding:2em;
}p,li {padding-bottom:.5em;line-height:1.3em;
}h1,h2,h3,h4,h5,h6{padding-bottom:.5em;
}
• Define page modules and sections and refine the global definitions for these.
#nav li{padding:1em .5em;
}#header p{border:1px solid #999;background:#ddd;
}
• Show class but, don’t overdo it.
<ul><li class=”list-item”>The Passenger</li><li class=”list-item currentlyplaying”>Louie Louie</li><li class=”list-item”>I want to conquer the world</li><li class=”list-item”>Foxtrott Uniform Charlie Kilo</li>
</ul>
li.list-item{padding:.5em;font-family:courier,monospace;color:#000;
}li.currentlyplaying{color:#c00;
}
• Use classes as the exception to the rule and use the cascade.
<ul id=”playlist”><li>The Passenger</li><li class=”currentlyplaying”>Louie Louie</li><li>I want to conquer the world</li><li>Foxtrott Uniform Charlie Kilo</li>
</ul>
#playlist li{padding:.5em;font-family:courier,monospace;color:#000;
}#playlist li.currentlyplaying{ color:#c00;
}
• All of the CSS should be in a separate file and not contained in the documents.
• The reasons are obvious:
– You have one central repository of all the look and feel
– This information gets cached by the visitors’ computers and thus only needs to get loaded once.
• Let’s go over to the intoxicating parts of the party.
• When it comes to drinks, there are some rules that make life a lot easier.
• Don’t choose cheap over easy to digest and keep in
• Use alcohol when you feel in the mood for it, not to make you feel better or lose inhibitions
• Don’t drink and drive
• Don’t mix what does not go together.
• Don’t give hard alcohol to minors or drugs to people who don’t know what these drugs do (http://urban75.com/drugs).
• When it comes to JavaScript the same rules apply:
– Only use JS when the end user has some benefit from it
– Don’t expect anything
– Make your script test that it can run on the current user agent before it applies itself (unobtrusive JavaScript http://onlinetools.org/articles/unobtrusivejavascript)
– Don’t script and drive
• It is easy to code some functions to do things.
function init(){lis = document.getElementsByTagName(‘li’);for(i=0;i<lis.length;i++){lis[i].onclick = doStuff;
}}function doStuff(){this.style.background = ‘#ffc’;
}
• The issue with that is though that you can add several scripts to each document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en"><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"> <title>Party Etiquette</title><script type="text/javascript" src="yourscript.js"></script><script type="text/javascript" src="anotherscript.js"></script>
</head><body></body></html>
• Therefore, avoid overwriting by encapsulating your code and avoiding global variables
highlightLIs = {init:function(){var lis = document.getElementsByTagName(‘li’);for(var i=0;i<lis.length;i++){lis[i].onclick = doStuff;
}}doStuff:function(){this.style.background = ‘#ffc’;
}}
• Keep all your script output to itself – Namespace your functions and variables
• Use scripting as a helper and not to show off
• Add-ons for a perfect party
– Sun screen for the redheads
– Protection planning (first aid kit, condoms…)
– Doggie Bags and playlistprintouts for people to take away
• The web page equivalents for these:
– a print style sheet
– an Open ID login
– Microformats (doggie bags to take pieces of your information with and re-use them)
– A zoom layout
• That’s it. Let’s party!
