Webdesign 103

Different tools and where to use 'm

This is the third part in my short series on basic webdesign (or, if you count frontpage and co, on basic advanced webdesign).

A huge scale of tools are available to modern day webdesigners, and new acronyms are being invented every day. This article is an attempt to highlight the big ones, and help beginning designers find the right tool for the job.

Instead of giving an overview of everything, or even an overview of the most common tools employed, I'm going to focus on the ones I use myself. Instead of giving full explanations of how everything works (something of which I'm not capable by far) I'll try to provide links to useful resources.

Apache

Everyone's favourite webserver, Apache is free, stable and advanced. When designing websites there are two key areas where you might interact with apache: access restriction and rewrite-rules

Because Apache is the tool that stands between the clients browser and the server's files there is no safer way to restrict access than through apache. By using .htaccess files you can change the server configuration on a per-directory basis. This means you can restrict access to certain files completely or require users to be logged in on certain sections of your site.

Although apache based user authentication is very safe it shows up to the user as a grey pop-up box in the middle of the screen, which is why you'll almost never see it in practice. Still, if you're looking for a quick & reliable way to share some files with friends - and only friends - this is the way to go.

A common example of restricting access using Apache is hiding scripts by placing them in the same directory as a .htaccess file with the lines "Order allow,deny" and "Deny from all". This means apache will never send them to a user directly, php and other programs running on the server don't access the file through apache and won't be bothered one bit.

Another neat trick you can do with apache is using rewrite rules. These allow you to sneakily redirect users to sites like http://yourSite/showItem.php?item=123&michael=sexy when what they request (and see in the address bar) is http://yourSite/items/123. This is a technique used by blogs like wordpress or by news site to create so called permalinks. Even if the structure of your site changes radically (say you switch from using a database backend to using xml files) you can just change the rewriterule so that the old links still work.

Rewrite rules can get a little tricky and usually involve a lot of regular expressions (in a syntax borrowed from perl), so it's best to read up on 'm and test it a lot locally

PHP

Originally termed the 'Perl Hypertext Preprocessor' PHP has grown into a full blown server-side scripting language. Basically what happens is this: everytime you open your browser and request a file through apache it checks the file against a list of file types known to be php. If the file is a php file (say if it has a .php or .php5 extension) instead of sending it to the client directly apache takes the file, runs it through php.exe, and sends the output to the client. Allowing you - the programmer - to do all sorts of nifty tricks. Mainly PHP is used to generate HTML pages with some dynamic content (to show the daily rates, or as a way to load bits of content into the same template) but you can just as easily use it to generate images, css or javascript.

If you've ever programmed before, PHP is a breeze. The only place it gets complicated is user-interaction. As a C or Java programmer you might be used to direct communication with the user: click left to go left, press spacebar to continue etc. Because php generates HTML files, which are static in nature, and because it communicates through the stateless HTTP protocol, PHP can't be used for fast user interaction. Instead user interaction works by generating HTML forms, and then sending the form data back to another PHP file. This works great for many many many applications, but it has its limitations

Having said that, when it comes to serious scripting PHP is always my tool of choice. It has fast database capabilities, supports OOP, can edit and generate images and more (usually with built-in commands that do the hard work), can open socket connections to get data from crazy remote places, can read & write files etc etc etc. As long as you're doing it on the server side, PHP is the way to go.

(One last thing... Using Cookies and HTTP Sessions you can identify a user once he/she comes back for a second request, and create the log-in scripts you see on the web every day, but this is a topic in its own right and will be treated elsewhere :)

MySQL

MySQL is a free to use database engine that works very fast for small databases. You use it in you php scripts by sending SQL queries to the database and receiving row data in return. One of the first things beginning webdesigners experiment with is putting everything in MySQL, that is: all the content. This is fun for small sites but causes significant delay once a few hundred people try browsing your site at the same time.

Databases are an indispensable tool for storing user data, guestbook posts, comments and more. The combination of Linux, Apache, MySQL and PHP is known as LAMP, and has a windows counterpart WAMP.

(X)HTML

When it gets right down to it, websites are built using HTML. Nowadays this means XHTML, which is good ol' HTML with some restrictions to make it fit the XML structure. (Although it has many intricate details, you can last years thinking of XML as anything with <these> kind of tags in.</these>). The modern role of HTML is to define the structure of a document: you use it to indicate which part of a html document is the head and which is the body, to indicate which blocks of text are paragraphs and which words should be <em>phasised.

Back in the day HTML was also used to lay out your site (using lots of nested tables) and to indicate formatting (with <font> tags, or <b>, <i> and <u>). The new use of html is to define the semantics aka the meaning of your text: when writing a html document you should specify which parts are sections, which parts are headers and which parts are links. Once you finish, a second person (a css designer) comes along and determines what everything will look like. This works much the same way as with writing a book: the writer indicates the chapter titles and lets the publisher worry about type, chapter headings, correct placement of graphics etc. In addition to being all 1337 and web 2.0 this way of using html has the advantage of letting content writers focus on the text.

To learn about HTML you can go here and then here for some additional info about XHTML.

CSS

CSS stands for Cascading Style Sheets. Style sheets because they handle the styling of a page (and are sheets, I guess), Cascading because you can define everything twice and only the last time counts. To be a bit more precise you can specify global styles and then create local styles that overrule these global ones in certain parts of the documents. When building a site you use CSS to indicate all font information and to create the layout of the site.

You can find excellent information about CSS here, and by searching google for terms like 'two column layout' or 'CSS box model'.

JavaScript

JavaScript is a client-side programming language, meaning its programs are downloaded by the user and then run on the client side. This means your browser must be able to read and interpret javascript, which, nowadays, it almost certainly can. It is a fast and very flexible language and supports (prototype based) OOP.

JavaScript was named JavaScript in a marketing move by Netscape and Sun, and has been causing confusion ever since. It was introduced at the height of the browser wars and so microsoft and netscape happily added features without informing the other side. JavaScript has since been standardised into ECMAScript, but as to date every browser still implements its own dialect. This doesn't mean that javascript doesn't have its uses, just that it has a lot of quirks

In the bad old days, javascript was used to make stuff move on the client side: you can use it to make pop-ups pop up, to make clocks with moving handles and to turn the title bar into a marquee. Nowadays javascript is covertly used to fix some browser inconsistencies that CSS alone couldn't handle, to smooth user interaction by allowing client side form validation (or clever hints), for AJAX (more on that in a minute) and - to a lesser extent - to make shiny things that move.

A good place to look for javascript advice is w3schools, a great place to look for js (and css) is quirksmode.org.

AJAX

In 1999 Microsoft decided their web-based outlook clients needed a better interface and equipped IE5.0 with an XMLHttpRequest object which client side scripting languages (like javascript) can use to make HTTP requests without reloading the entire page. This allows scripts to reload certain parts of the page and leave the rest unchanged. In 2002 Mozilla started supporting a similar object and around 2005 somebody decided that using these objects to create dynamic pages was called AJAX, or Asynchronous Javascript And XML, but don't let the name bother you :)

XMLHttpRequests are great to create smoother user-interaction: you can let a user select things and show them the results straight away, even if those results are calculated on the server side. However, using too much AJAX can create an uncomfortable browsing experience: a typical example is refreshing an entire page with AJAX, it works great but interferes with the way browsers expect you to browse pages and so your pages won't show up in the history and the 'back' button doesn't work.

So far I haven't been able to find a definitive source on AJAX so the the w3schools page will have to do. Additionally reading the Wikipedia pages will help take the confusion away

Other stuff you might hear about

Of course there's always more...

Flash

Flash is a client side programming technique. To use a flash program you write it and place it on your site, clients visiting the site then download the program and run it using a browser plugin. Flash is great for animation and games and because the programming language behind it is quite advanced it can even be used to write whole applications. The main problem with flash is that it's proprietary software and you need to buy the development kit before you can write anything

XML

eXtensible Markup Language. Loosely speaking XML is a way of structuring documents using <tags> nested in some kind of tree structure. XHTML is a restructuing of HTML to fit the XML framework.

DOM

The Document Object Model is a way of representing webpages in a tree structure and a set of methods to browse and edit it. If you start messing around with javascript or DOM-based XML parsing you'll run into it soon enough.

ASP

A MicroSoft server-side scripting language

CGI scripts

As far as I gather, CGI is a standardised way to send commands (rather than page requests) over a web server.

And one last thing

Before you start working on the layout of a website, it's always good to have a drawing or a photoshop file of the layout, which means you don't actually design in css, rather you design in your mind / in a graphical editor / on a beer mat, and then you implement this design using all of the above

Dec 26th, 2008

Comments

No comments yet! Feel free to post some using the form below.

Post your comments here

Name: Please retype the following letters:

If you wish to add code to your comment you can use code tags, like this: <code class="php">yourCodeHere</code>.
Quite a large number of languages are supported, although I can't guarantee it'll be pretty. Inside the code tags you can use any characters except for the string "</code>".