Tag Archives: DOM

Halp! What do I learn?

As detailed in my first post, I used to do a little table-based design some years ago and decided to get back into teaching myself web design and development. So, like a lot of people, my first thought was, “what do I need to learn?”

Firstly, it’s important to make a distinction between web designer and web developer. Web designers design websites. You knew that already? Then you’re ahead of the game.
Web developers write code and develop web applications.

The distinction is really between client side and server side. In practice it’s not as simple as that, as with many things, but the general rule of thumb will serve us well enough for now.


Designers tend to stick to client side stuff – content, markup, layouts, graphics. Your average decent designer will know XHTML, CSS, Photoshop or similar for creating graphics and more than likely, some Javascript/DOM (Document Object Model) scripting.

Developers will code in PHP, ASP, .NET (C# etc,) and have at least a working knowledge of relational databases, usually something SQL (Structured Query Language) based, like MySQL, SQL server or PostGreSQL.

Then you get networking bods who know how to set up and administrate a server, be it Windows or Linux/Unix based, along with web server software like Apache or IIS (Internet Information Services – Microsoft’s web server software, bundled with Server 2003 and the like. (It’s even in XP…)). They’ll probably know something about TCP/IP and DNS too.

Here’s the thing – I want to be able to do it all. At least a working knowledge of each area so I can set up a server, design and create a valid, standards-based site, connect it to a database so it can do fancy dynamic stuff and so on.

Start with what you know

Then figure out what you don’t know but probably need to know, then do some reading. LOTS of reading. And some practice. And reading. And practice. Ad Nauseum.

Well I know some Photoshop. A fair bit actually, since I’ve been working with it for about ten or so years, for everything from painting textures for 3D models to retouching glamour pictures, (strangely not that glamourous, but I doubt any part of the process is,) to designing graphics for the web.
I also know a little HTML – just enought to get by. I’ve also done a tiny bit of CSS, but a seriously tiny bit and also some Javascript. That’s a start. Since then I created a call logging app in PHP/MySQL and had a ball doing it, which is what made me think I could do this.
Lastly, I spend my days as the IT guy for a company, which involves everything from desktop support to server admin, to troubleshooting printers, to creating some static pages for our website to altering DNS records for our website. I’ve set up a few servers in my time, a couple of which were specifically web servers and I understand (the basics at least, of) TCP/IP.

All that stands me in pretty good stead.

Research and acronym overload

Looking through a few job ads for web design or development is a good way to gauge what potential employers are looking for, but can quickly get overwhelming. The skillset for some positions reads like an excerpt from “The world’s greatest confusing tech acronyms”. ASP.NET, PHP, XHTML, XML, XSLT, CSS, SQL… it’s enough to make a person’s head spin and start spewing pea soup.

“OK,” I thought to myself, “let’s start off with things I’ve heard of.”
HTML – I knew some of that from before. CSS I’d heard of and had a rough idea of what you could do with it after seeing a friend’s site. Javascript. Ugh. That sounded a little too much like Java to me.
PHP I’d heard of, as well as MySQL, but the latter only in passing. Perl – my friend who I used to work with before had said that was hard and he was a coder. Hmm.

First thing was to look into XHTML. I’d heard the term and knew it was either a newer version of HTML or else a different version that you could do cool stuff with.
The former was more correct, which is not to say that I don’t think XHTML is cool.

OK, lets start with what some of the terms stand for. HTML stands for HyperText Markup Language. Hypertext is the ability to use links to provide other documents and information, Markup means a type of code which denotes how the content will be structured or displayed and Language… well I’m sure you’re OK with that one.
HTML is the core of the World Wide Web as we know it. So what’s XHTML?

XHTML is defined as HTML reformulated as an application of XML. Make much sense?
The X stands for eXtensible (see what they did there?) and comes from XML, which stands for eXtensible Markup Language. XML is a language that coders can make up their own tags, in order to make new types of document, or even new languages. So XHTML is basically HTML that has been created through the XML language.

So? So what?

Well I’ll tell you. There were a lot of problems with HTML, (the last version of HTML before XHTML was v4,) some of which arose from the browser wars between Netscape and Microsoft, others from allowing coders to write code that was improperly nested like so:

<b><i>Wow! Check this improperly nested code out!</b></i>

Because the <b> element came first, the <i> element should be completely contained within it like this:

<b><i>Whew! That’s better.</i></b>

Also, you could leave out closing tags like this:

<p>Hey, I’m a paragraph! But where do I end?


<p>Or maybe here?

and HTML would be nice and assume you meant to close the tags really, you just forgot becuase you were distracted by something – possibly a shiny penny on the floor or the sudden discovery that if you tried really hard, you could stumble across pictures of ladies with no clothes on on the web and things would generally be OK. That sounds pretty good right? You can code as sloppily as you like and HTML and the browser would play nice and your page would work. Sure it does.

Another big problem was that originally, the internet was text based, seeing as how it was originally created to help scientists share data and less about watching people hurt themselves in a stupid way or the world’s largest repository of boobies.
Anyway as things progressed, people figured it might be handy to be able to share images and other content and the Markup Language grew to accomodate this new functionality. Then people started to want to be able to add stylistic parts to web pages. Sure, hyperlinks were functional, but do they always have to be the same colour? Again, the markup language expanded to include more tags, aimed at being able to design and style the way your content was presented. Suddenly it was able to have aesthetically pleasing pages, (although at the time you’d be hard pressed to find one between the blinking text and gaudy fonts and colours – and the gifs. Oh the animated gifs!)
Over the course of time, visual design began to play a bigger role in creating web pages. Then it was married to the tenets of information architecture and content presentation and the new discipline of web design was created.

Somewhere along the way someone figured out that while it was great to be able to style your markup using things like <font> tags, it was actually pretty inefficient. Using inline style markup made the code longer, slower to load and harder to read. Using tables for positioning, while accurate and cross browser compatible, was also making the code longer, slower to load and even harder to read again, what with tables nested inside tables with spacer gifs to make sure it all lines up – there was so much code for presentation, the content was hard to find in amongst it all.

Finally, unable to take it any more, those web designers and developers who had brains and a passion for all things web screamed into the night in a collective howl:

“Oh god! How can we make it so content and style can live together in the same web page without the code looking like the insane ramblings of  a mad geek? Won’t somebody think of the children?”

And a cry came back from an uncertain location, reverberating in the ears of every webmaster worth their salt;

“I know what to do…” the disembodied voice dropped to a whisper and every geek felt the hair on the back of their neck stand up as the hoarse breath sighed, “we’ll seperate content and style…”

And there was much rejoicing.

OK, so maybe I used a little dramatic license there but it was a great idea and my next post will go into why.

So, before we go into the separation of style (and behaviour,) from content, I’m going to give you the rundown of what I am currently learning. It’s not the only way to do this and there may be other technologies I learn along the way but for now it’s:

XHTML – for content markup. Ubiquitous for web design.
CSS – for styling markup
Javascript – should really be called ECMAscript, but we’ll get into that later – for behavior, interaction and DOM scripting.
PHP – the most used server-side coding language on the web.
MySQL – the most used relational database system. Also, the SQL language.
Apache – the most used web server software on the web.
XML – mainly used for cross platform data exchange, but also a highly versatile language that has lead to the development of other languages, such as XHTML, MathML and SVG. This is pretty much an entire topic in itself, what with XML itself, plus DTD’s, Schema, namespaces, XSLT…

Along the way I’m sure I’ll bump into Ajax, SOAP, PEAR and maybe some Flash and actionscript, although that’s not on the cards to learn just yet, despite having done some Flash before.
Add into this a smattering of SEO to optimise sites for search engines, regular expressions (mainly for SEO-friendly URL rewriting,), trying to get a proper handle on OOP (Object Oriented Programming,) some more Linux/Unix admin, a little typography and general design techniques, color theory etc and how to run my own business, (SWOT’s, business plans, etc, etc,) and we’re getting somewhere.

Coming soon: The Web Standards Trifle vs The HTML 4 Fruitcake.


Back Story

Many years ago, when the Earth was just a broiling mass of volcanic activity, (OK, maybe not that long ago, but a while back,) I used to do a little freelance web design.

I teamed up with a friend from University and he handled all the code, whereas I did the layout and visual styling. I learned the bare basics of HTML, just in case I needed to check anything within the code, but that was all – I was basically a Photoshop jockey. The sites were all fairly simple – this was before the days of XHTML, CSS and the DOM, and were all designed using table-based layouts, which will come up in later posts.

We did do some coding at Uni – mainly in Java, which I hated. Having never done any coding before, (I didn’t own a Spectrum, or a Commodore 64 or anything like that growing up,) we started out with Pascal, which I found OK to follow but the jump to Java really threw me. Too many terms and concepts I didn’t understand and had no intention of doing so. It put me off coding for years.

Skip forward several years and I’m working as 1st line support for a company that sells and leases Unix-based boxes and sometimes I have to tail a mail log or grep something and to my surprise, I’m finding it kind of fun.

Then I got a job as the IT department for a company, which is where I work now. Yes, you read that right, I said IT department. It’s just me, doing everything from looking after the network and servers, supporting users over several sites to ordering toner for printers.

Anyway, we needed a way to streamline the way users contacted me about tech support tasks as the feedback I was getting implied that users would benefit from a way to explicitly log tasks and recieve better updates about the progress of a task, rather than just walk up to my desk and blurt out whatever is wrong and then have me shout “it’s done!” across the office.

I started thinking about creating a call logging system as a web browser based intranet app, originally starting in ASP using VB Script, which I found fairly easy to develop with.
Unfortunately I read that VB Script would only work in IE and several users, (myself included,) are savvy enough to have switched to Firefox. (Yes I’m biased and there are good reasons why, which I may go into in a later post.)
So I started over using PHP and MySQL. Having never coded much of anything before, (My blackjack game, written in Java while at University for an assignment, could not switch the Ace between 1 and 11 depending on what the player had in their hand…) this was something of a challenge and required lots of reading, coding, testing and a fair amount of swearing.

What I didn’t expect is that during the development process, I would rekindle the feelings that I first had when writing in Pascal. Yes, it’s frustrating a fair amount of the time, yes you spend a lot of your time figuring out why one section won’t work despite trying several syntactical approaches, but when it works, there is a feeling of reward and satisfaction that makes it worth the effort.

PHP is pretty easy to get started with, I’d recommend checking out w3schools PHP pages as a port of call, as well as PHP’s home on the web.
Personally I was amazed at how easy it was to connect to a database and retrieve and update information, although it’s not the easiest thing to install (more on that in later posts.).

I managed to complete my PHP/MySQL call logging system and I’m damn proud of it, even though I know the code is far from perfect. Users log calls through a fairly basic web form, which takes the relevant details and assigns them a unique reference string based on the site they work at, their initials, the date and a session variable to avoid overwriting tasks that were logged on the same day. I can tell at a glance who logged the task, from which site and when they logged it.
The system then emails both the person who logged the task and myself with the reference string and I assign the task to a timeslot and the system emails the user to tell them what date and time they can expect their task to be looked into.
The references show on a month-to-a-page calendar and are coloured and styled according to their status, which I assign. New tasks are automatically ‘unassigned’ (and I can search for any unassigned tasks with a simple SQL query,) and I can change the status to ‘assigned’ (which displays as green on the calendar,) ‘in progress’ (orange on the calendar) ‘awaiting 3rd party’ (purple) or ‘completed’ (red with a strikethrough to show it has been done,) as appropriate and the user will be emailed again with the status change and any associated notes I have made.

The system has allowed me to better manage my time. I can see at a glance from the calendar which tasks I have completed and which I have to do. It has also allowed me to report back on how I’m doing with stats to back things up (again done with fairly simple SQL queries,).
So far my lowest completion rate for a month has been 91% which I think is doing pretty well for a one man department.

So skip t0 now. My passion for coding has risen again and al0ng with it, a passion for learning, which I’ve really always had but found it difficult to apply at times, particularly if I wasn’t interested in a topic at the time. The other thing I’ve developed a passion for is web standards, which I suspect will feature heavily in this blog.

My aims for the future are to move away from most of the tech support stuff and instead either gain employment as a web developer/designer or else maybe go freelance. I hope to be able to offer a start-to-finish service, i.e. set up hosting and web server/database servers, design and develop websites and even handle DNS and maybe one or two other bits, like some basic SEO.
I’ve bought a stack of books and scoured the web for interesting and informative articles.  I’ll point you to the former and share the latter in later posts.

This blog’s aims are to help me keep track of interesting links on the subjects of web design and development and associated disciplines, to champion the cause for web standards and standards-based design and hopefully, maybe serve as a place for other people who are learning the same sorts of things, whether new to web design and development, or perhaps returning to it after designing with tables etc, previously.

I’m going to try and make sure any terms are linked to wikipedia pages or other relevant pages providing descriptions etc, but it might be difficult to keep track of so I’m going to assume a certain level of knowledge. The simple rule of thumb is, if I haven’t linked a term and you don’t know what it is, look it up on either google, wikipedia or a favourite search engine etc. I’m going to be writing and learning at the same time – you’re welcome along for the ride but I’m not going to spoon feed you.