Web Development Introduction

Consider the following three things.

• Content/Data: What does it say or show?
• Presentation/Style: How does it look?
• Behavior/Interaction: How does it respond to input?

These three components overlap somewhat, but the better you separate them, the easier it is to maintain a site. This is also how you tackle a large project, ideally with team members skilled in each area.

Also, keep in mind you do not want to reinvent too many wheels. If your site has more than a few assorted pages (which you can maintain by hand using a text editor, with full bragging rights) you will likely be much better off installing a suitable full-scale web server application. (Then use your hand-coding skills to customize the application to suit your needs and to troubleshoot it when it barfs.)

Fully hand-coded: http://bohodance.com (Count all four pages!)

Modified web server application (Dokuwiki): http://wiki.waggy.org/dokuwiki/econ/coffee_roast_solar (I hacked one web application into a plugin for another application to generate the graphs from wiki page content.)

The only interesting web server application I wrote and have online right now needs to be modified to work with a different database driver and to be updated to support current browser capabilities (as does bohodance.com to a lesser degree). One of the pitfalls of writing your own apps is having to fix all the bugs yourself.

Web publishing software occupies a middle ground, but often does a poor job of separating content, presentation, and behavior; putting them all together is often what the software is designed to do. This works well for some people doing small sites.

Finally, here is a short list of references. Think of these as the web's Code (as in Building Code or Fire Code).

Content: HTML, XHTML, DOM, and MySQL

• http://www.w3.org/TR/html401/
• http://www.w3.org/TR/xhtml1/
• http://dev.mysql.com/doc/
• http://www.w3.org/DOM/

Presentation: CSS Level 2, WAI AAA

• http://www.w3.org/TR/CSS21/
• http://www.w3.org/TR/WAI-WEBCONTENT/

Behavior: PHP, JavaScript

• http://www.php.net/manual/en/index.php
• http://www.w3schools.com/jsref/default.asp

Here's how it all typically fits together. Your PHP code pulls data from a database and formats it as WAI-AAA XHTML, accessible and formally structured HTML. The browser reads the XHTML into a DOM data structure so it can apply your CSS2 to make the page look pretty and JavaScript to make it dance around.