After reading the 10 CSS Tips from a Professional CSS Front-End Architect (and the comments - important) I feel forced to rewrite the popular "The Evolution of a Programmer" joke for web developers/web designers. So, here it is (improvements are welcome - I'm not a web developer or designer):
High School/Jr.Highhello.htm
Hello world!
Compatibility
- works in all browsers/text editors/you name it
- your dog can read it and your grandma can change it
First year in College
hello.html<Html>
<Body>
Hello world!
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- your grandma can still change it with some effort
Senior year in College
hello3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello world!</title>
<META NAME="DESCRIPTION" CONTENT="This is a cool hello world example!">
<META NAME="KEYWORDS" CONTENT="cool,hello,world,example">
</head>
<body>
Hello world!
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- validates
Senior year in College - hacker
hello3.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
hello world!
</body>
</html>
Compatibility- m3 d0n't kn0w
New professional/PHP developer
hello4.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
</head>
<body>
<?
echo("Hello world!" );
?>
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- PHP needed
- will validate until some other dumb developer changes a letter
Seasoned professional/PHP developerhello5.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
</head>
<body>
<?
include "inc/class_hello_world.php";
$hello_world_class = &New class_hello_world;
$hello_world_class->display_hello();
?>
</body>
</html>
inc/class_hello_world.php
<?php
class class_hello_world{
var $hello = 'Hello world!';
function display_hello(){
echo $this->$hello;
return 0;
}
}
?>
Compatibility
- works in all browsers/text browsers/mobile
- PHP needed (4, 5 recommended)
New designer
hello3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
</head>
<body>
<blink><font face="Arial" size="2" color="#800080">Hello world!</font></blink>
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- can annoy any person on earth (so no user compatibility)
New professional designer
hello3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
<span class="hello">Hello world!</span>
</body>
</html>
css/main.css
.hello {
font-family: Arial;
color: #990066;
}
Compatibility
- needs browser CSS support
- NN4+, IE4+, FF, Opera 3.6+
- will not apply style on some mobile browsers
Professional CSS Front-End Architect (sarcasm)
hello_world_v03a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello world!</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<style type="text/css" media="all">@import "css/main.css";</style>
<style type="text/css" media="all">@import "css/bugfix.css";</style>
<!--[if lte IE 6]><style type="text/css" media="all">@import "css/bugfix_ie6.css";</style><![endif]-->
<!--[if gt IE 6]><style type="text/css" media="all">@import "css/bugfix_ie7.css";</style><![endif]-->
<link rel="alternate" type="text/html" media="handheld" href="http://helloworldmobile.com/" title="Mobile/PDA">
<link rel="icon" href="http://helloworld.com/favicon.ico" type="image/x-icon">
</head>
<body>
<span class="hello">Hello world!</span>
</body>
</html>
There should be 4 css files I won't bother to write.
Compatibility
- compatible with "most modern browsers"
- somehow IE6,7,FF,Opera renders the text wrong
- how the hack would you maintain the CSS pages for every IE service pack (hint: hire another Professional CSS Front-End Architect)
New Manager
hello.doc
Hello world!
File > Export HTML page...
Middle Manager
mail -s "Hello, world." bob@b12
Bob, could you please write me a webpage that prints "Hello, world."?
Senior Manager
% zmail jim
I need a "Hello, world." page by this afternoon
Top ManagerCalls Senior Manager
- Where the fck is my hello world page? The meeting with the client starts in 10 minutes!
MySpace administrator
We need to throw more servers at the hello world page.
Windows developer
Installs Visual Studio 2005
Opens Visual Studio
Google > "ASP 2.0 hello world"
I must add that I don't have nothing against professionalism in web development or design but I looks like simple things are more complicated to do right as you advance /evolve and way more knowledge is needed. Please note that this is a joke!
