WebDev 101

An introduction to web development.

We assume some familiarity with programming in general, probably from a more traditional background of something like java - or possibly python. Traditional programming is kind of like becoming an apprentice clockmaker, you’re given a nice set of tools, a rich tradition of techniques and the ability to meticulously craft something beautiful. Unfortunately web programming is often like becoming the assistant to a bad plumber. You meet him on a job, he’s brought the wrong tools, the pipes are clogged, some of them are from 20 years ago, and you have to fix it with some stuff that’s lying around the job site.

While web programing can seem incredibly unstructured, it doesn’t have to be this way. Of course, by trying to structure how to learn it a bit we are going to narrow some of our choices (and actually select our tools well in advance). We’ll talk about some alternatives at the end.

An overview of the Process:

Web programming basically starts with a server. That server serves up some markup, sometimes that markup is static (lovingly handcrafted), say from an html file, sometimes is is dynamic and generated from code on the server in the form of php, python, or even something like perl, asp, or java. The point is that once the server delivers the markup to the browser it is done. The browser will then decide how to render the markup, based on any style information it has. Any user interaction now comes from default behaviors like form buttons, or javascript code that runs client side in the browser.

Core Concepts:

Markup: A structured markup language that is interpreted by the browser. HTML usually fills this role, but it could be XML or some other specialized language. This has meaning only in the sense that it is interpreted by a browser. If the browser doesn’t understand the markup - it is meaningless. This isn’t really programming, because you can’t actually program. We usually call it coding or markup.

HTML or XHTML: This is the kind of markup we’ll be dealing with. You can think of it as a tree of elements. An element is something like a <div&rt; or an <a>. Sometimes these elements have attributes, like an id or a class name. This allows us to reference them in CSS or Javascript. Other times they have embedded style attributes, which we’ll try to avoid doing (it gets messy). Sometimes they have legitimately functional attributes, like an href. An <a> without an href attribute is pretty useless, the <a> is a link and the href attribute tells it where to go. So normally expect to see something like: <a href=”www.google.com”>.

The part of the element we’ve just showed you is just a tag. Most elements consist of open tags, close tags, and attributes. So to be perfectly precise about our link we would need something like: <a href=”http://www.google.com”>Link to google</a>. That “Link to google” bit is the content of the element. Elements can get quite complex once you start nesting them, just like a tree.

Style: Cascading StyleSheets, or CSS, is what makes the html look like a web page. Browsers usually have some idea of what things are supposed to look like (defaults). For the most part though, they trust the CSS information and will use that to style things. For example, adding a property like div#borderdiv {border:1px solid red;} will put a one pixel solid red border around the div with the id borderdiv.

The Browser: It displays HTML and styles it according to the CSS - Pretty much the same way you would if you read raw HTML code and drew exactly what the CSS told you to do. Of course, sometimes you would get bored and start doodling randomly, and of course nobody would be able to draw exactly the same way. That’s exactly how Browsers manage it.

Traditional Programming Concepts

Algorithms: There are no algorithms in HTML or CSS. Any actual programming functionality at this point needs to be coded in javascript. At the server level, a scripting language like php can be used to program

User Actions: Actions at this level either take place through links and buttons, or events. Links and buttons are generally tied to either server calls (http calls for a new page, or to send/get information to a separate script on the server) or javascript algorithms that manipulate the page at a local level. Events can occur with javascript either based on regular timers, based on timers that ‘poll’ the page to see if changes have occurred, or as call back functions that occur when information returns from the server.

Data Storage: Data at this point is stored in one of two ways. It is either stored structurally in the html itself (and that data is shown to users in a structured way, unless it is styled to be hidden) or it can be placed in javascript, coded as either variables, plain text, or a structured format such as embedded xml. At the server level this stuff is usually queried from a database like MySQL.

Getting Started

Server Environment: This article assumes you have access to a webserver running something like linux / apache / mysql / and php (what is commonly called a LAMP environment). We don’t need all of these things exactly like this. At the minimum we need php, mysql is also handy (but postgresql would work allright). Apache is handy because of its general familiarity and interoperability. While php 5 is the current version of php, we’ll mostly concentrate on php 4 because of the still fairly ubiquitous hold it has on the php community.

A local server environment may be highly useful for testing. Setting one of these up shouldn’t be so hard. Ideally they are fairly sandboxed kinds of environments. Bitnami’s WAMPStack is a good window’s solution while MAMP works pretty well on the Mac. Linux users, this should be pretty easy to set up (you may have it set up already).

Development Environment

Those of you coming from a more traditional programming environment (such as java) may be surprised to learn that there isn’t too much of a focus on an integrated development environment in web programming. Efforts do exist, but for the most part there is nothing comparable in popularity to something like Eclipse. Basically all you need is a good text editor and a browser.

An Editor: Textmate is by far the best choice on the Mac, it features svn integration, bundles for nearly every applicable programming language, and great extensibility. The E Text Editor is a Textmate clone available for windows. Linux users likely already have an editor that they are used to. One of the reasons textmate (and it’s clone) is great is that it has a lot of useful bundles for some of the disparate tools we’ll be working with:

• Codeigniter Bundle for Textmate and ETextEditor
• Other plugins for Textmate (Of particular interest is the Webmate plugin)

A Browser:When developing for a web based application you’ll have to make sure it eventually works in all browsers, but some browsers are easier to work with than others. Firefox is generally a good choice for web development, in part because of some of its great extensions:

• Firebug - general purpose debugger
• Web Developer Toolbar - like a swiss army knife
• Font Finder - simple style inspector
• Link Evaluator
• Live HTTP Headers
• View Cookies

Things to learn or ‘know’

XHTML: Knowing html is a pretty necessary step for anyone doing web programming. Even if you are able to abstract yourself pretty far away from doing it, it is pretty important to at least know what the features are and what good markup looks like. There are some good references:

• Wikibook on XHTML - General purpose overview and pointers.
• Programming HTML Wikibook - A more specific introduction to markup, elements, attributes, etc.
• HTML At the Wikiversity - Nice collection of lessons and information.

PHP: PHP will be what we’ll focus on for the generation of HTML and other server side actions. We’ll be using Codeigniter as a framework for PHP, but its important to understand PHP’s capabilities by itself.

• PHP.net - is the source of most everything PHP, including the manual and function reference.
• PHP At the Wikiversity - Nice collection of lessons and information.

CSS: CSS allows us to make the page look good, work consistently and generally present a good image of itself.

• Wikibook on CSS Programming - general purpose introduction to CSS
• CSS at Wikiknowledge - nice collection of references and overviews.
• Css Panic Guide - Find what you need to know in this quick reference.
• Css Property Reference - Nice complete reference of css properties.

Javascript: Javascript allows us to do some programming on the client side, after the basic markup has been served to the browser. Most of the time this takes the form of programming for user interaction. For example, a user clicks something and we want the page to change in some way.

• Javascript at the Wikiversity - good general purpose overview of javascript

MySQL: Databases allow us to keep information on the web server for use in our applications. While strictly speaking there are a lot of database options, many of these aren’t highly practical. Distributed ‘cloud’ databases are becoming more common, but simple solutions like MySQL and PostgreSQL still serve as a good introduction. MySQL (and other databases) have their own ‘language’ to work with data, but for the most part we’ll be abstracting some of that out with PHP and further with Codeigniter.

• MySQL at the Wikiversity - good general purpose overview and lessons on MySQL.

Targeted tools and how to use them

Javascript Library
There are a lot of competing javascript libraries that provide different kinds of premade functions. They vary quite a bit in what the offer, how easy they are to use, and so on. We target JQuery as our library of choice.

JQuery and References for Learning JQuery

Server Framework
Because of the fairly unstructured nature of web programming it helps a lot to have a framework to provide consistency in what you’re doing. Not only do these tend to help us organize the server files we’ll be using to generate pages and entire web applications, but they often come with a set of useful tools and supplementary code libraries, formatting conventions and more.

Codeigniter is a nice MVC / Active Record framework, which we’ll target. It isn’t an overly heavy framework, can be easily picked up and offers a nice collection of base functionality we can build off of. There are a lot of nice references and tools available:

• Codeigniter Directory - general clearing house for lots of codeigniter resources.
• Codeigniter’s video tutorials - A basic Hello World and a 20 minute blogging engine.
• Codeigniter Sample Application - with the sample and a video of how to build it.
• A Codeigniter and Jquery Ajax Tutorial - Convenient, since we’ll be using JQuery
• Code Extinguisher - a plugin for Codeingiter that allows the easy construction of administration capabilities and interface.
• Growing Collection of Tutorials - See Models 101, for a good perspective on models.
• An Introduction to Codeigniter - starting at part 3, but links at the top to part 1 and 2.
• Building an RSS Feed in Codeigniter - Lots of other good things on Allard’s site.
• Building a complete Codeigniter application - Parts 1, 2 and 3
• Sample Facebook Application with Codeigniter - See, it can do anything.

Other Tools and References

Ajax: Ajax (Asynchronous Javascript and XML) is a technique for data exchange with the server. Normally when we want to talk to the server we need to refresh the entire page. This is alright if we are doing something large (like moving to a different part of an application). There are plenty of times, however, where we need some information that is small, or is dependent on user interactions that need to occur ‘live’ or close to it. One use of Ajax might be to suggest possible search results as a user types. It would be fairly irritating if each time the user typed a character the page refreshed to populate this list. At the same time, that might be a lot of information to keep locally so we could pull it up with just javascript. Ajax bridges these two extremes. Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers, through the use of Remote Scripting in browsers that do not support XMLHttpRequest. That data doesn’t actually have to be XML formatted, despite the name.

• How to Develop Web Applications with Ajax - Good introduction to using Ajax
• Clean Ajax - nice light framework for working with Ajax calls.
• Ajax Examples and Demos - Solid collection of Ajax examples.
• Ajax Examples and Demos - Solid collection of Ajax examples.
• Ajax Tutorials - Collection of Ajax tutorials.
• Ajax: A new approach to web applications - Essay describing what Ajax is and how to go about it.

Feeds: RSS and Atom are formats for delivering regularly changing web content. Why should you care? Lots of user are getting used to the idea that they can use feeds to follow information added to applications, changes, updates and things like that. If you check around you might see that a lot of applications have built feeds into the application in intelligent ways.

• What is RSS? - Generalist overview of what RSS is and what it is good for.
• SimplePie - is a great solution for working with feeds in PHP. There is also a useful Codeigniter Library

Apache Configuration: Knowing a little about how to configure the webserver itself may be useful. For example, knowing a little bit about .htaccess files allows you to do nice things like url rewriting.

• htaccess cheatsheet - comprehensive listing of the directives that you can use in htaccess files.

SVN / Version Control

General Purpose Tools

Validation:

• HTML Validator -
• CSS Validator -

Code Cleanup:

• HTML Tidy -
• CSS Tidy -

Documenting Code:

• Naturaldocs - Great multi-language documentation generator.

General Purpose Reference

• Net Tutorials -
• Google DocType -

Reading List

• A List Apart - Web Magazine for “people who make websites”, often delves into the nitty gritty of html and css development and techniques.
• Smashing Magazine - Daily web design (plus extra design) articles and discussion.
• Vitamin - is nourishment to help the web grow. More specifically it focuses on web design and development.
• UX Magazine - All about the user experience.
• Boxes and Arrows - Focus on web design in terms of user experience and usability
• Devlounge - Articles on programming, design and development for the web - though quite a bit more as well.
• Alertbox - Jakob Nielsen’s newsletter on what not to do (and occasionally, what to do) on the web in terms of usability.

WebDev 202

More advanced topics, starting with design issues on the web.

Design Issues

Web Colors:

• Colourlovers - social website focused on sharing color palettes.
• Kuler - Similar, but can be used with great mac color palette plugin Mondrianum

Web Typography:

• The Anatomy of Web Fonts - An overview of fonts on the web
• HTML Entity Reference - Good reference for html entities (how to make strange characters on the web).

Design Techniques and Frameworks

• Blueprint, CSS Framework -
• CSS Sprites -

…