Computer Programming School -  Web School
Da Clock and Date Stuff
Page last modified: 27 August 2008

WWW Diploma: cpwww888.com

www.vc-web.com - Web Students Network

The Evolution of a Web Developer/Designer

High School/Jr.High

hello.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>
&#104;ello 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 developer

hello5.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

  
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 Manager

Calls Senior Manager
- Where the *** 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"
 

Other...

  
<?php
  class class_hello_world{
  var $hello = 'Hello world!';
  function display_hello(){
  echo $hello;
  return 0;
  }
  }
  ?>
  

Another New Manager

hello.doc
Hello world!
File > Export HTML page...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Response.Write("Hello World")
  End Sub
Original Source:
http://wskills.blogspot.com/2007/01/evolution-of-web-developerdesigner.html