Monday, June 4, 2007

Everything you wanted to know about web programming, but were afraid to ask.

So far I've mostly been blogging on writing-related topics, but technology and programming are also big interests of mine. Perhaps I should cater to my audience and have separate blogs for each subject, but I've decided I don't want to do that. I've already got everything labeled in some great depth, and that's how I'm going to continue to separate my various interests. At any rate, topics such as technology are something that I only expect to blog on quasi-regularly in the first place, so hopefully it won't be too much of an inconvenience for those of you who are only interested in writing topics.

To kick off my topics on programming, I thought I would open with a list of web programming resources that I find indispensable. There's some stuff on this list both for any advanced programmers who happen to be here, as well as those with only a passing familiarity with basic HTML tags. In the past, this is what I have given to people who join my work team with a degree in computer science but no experience in web programming.

Here we go:

Basic Tutorials

W3Schools Introduction to HTML
If you have a blog or website but don't know anything about HTML, you should probably start here. Why pay someone to handle the basic stuff (or be stuck relying on a WYSIWYG editor alone), when you can learn a little bit of basic programming syntax on your own?

W3Schools Introduction to JavaScript
If you know the basics of HTML, and now want to learn how to make your website come to life, here's how you can put the "D" into DHTML ("D" stands for "dynamic"). This is good stuff to know if you have anything beyond a basic informational website (or blog).

Big Browser References

This reference is my very favorite, but you probably need to already know HTML pretty well before this will be very useful to you. The tree on the left menu includes all of the DHTML objects/tags by name, and you can get oodles of info (and sometimes examples) within each. In each object/tag, there are a number of subsections, and I go through each below:
(+/-) Click to Show/Hide Details

MSDN CSS Reference
Pay attention to the sidebar on the left in here. A LOT of this information is cross-referenced from the DHTML reference, but there is also a lot of information on CSS rules, selectors, etc, that you can’t find in the other reference. If you are looking for a good CSS reference, this section is a great one for IE, and the Overviews/Tutorials link on the sidebar has a lot of introductory reading material that would be good to familiarize yourself with the concepts at play here.

Gecko DOM Reference
This is the FireFox analogue to the IE MSDN references. “Gecko” is the name of the underlying HTML rendering engine that is used in the Mozilla and FireFox browsers (these are actually two separate browsers, even though they are both by the Mozilla Foundation. But almost everyone thinks of both as FireFox.). This link also includes great into articles about “What is Gecko?” and “What is the DOM?” and things like that. Good introductory reading that also applies to IE (in the case of the DOM). Below that is the actual element reference, which is what you’ll use in the long term whenever your HTML/CSS/JS works in IE but doesn’t work in FireFox for some reason.

General Web Programming References

DevGuru JavaScript Index
This one has a lot of explanations of the various built-in javascript methods and how they work. Also includes basic JS syntax, statement construction, operators, etc. This reference is a couple of years out of date, but still includes pretty much all the functions that you are likely to use.

W3Schools Color Names Reference
Includes the names of all the “named colors” in HTML, as well as their hexadecimal codes. My advice is to use a program like Photoshop (or whatever) to get a color the way that you want, and then use that program to tell you the hex code. But if you don’t want to go to those lengths, here’s a good reference of the basics. Great for designing blog color schemes!

W3C HTML 4 Elements
The W3C is the “World Wide Web Consortium,” and this is their reference for the various elements of HTML 4.0. That means that it does not include some of the more recent elements, or all the properties, but this gives a pretty good baseline of what is supposed to be out there. This is of somewhat limited use, primarily because of the manner in which it is presented, but if you can’t figure out something from the MSDN references or the Gecko reference (or by talking to me), then this is the next place to look.

W3C Document Object Model Core
This is the “official” specification behind the DOM, which is the basis of DHTML and JavaScript. This is more targeted at people who want to code their own browser, but section 1.2 does include the spec for a lot of the basic elements (document, node, etc—every object is a node). This is more for informational purposes or as an all-out last resort than anything else.

Niche References

W3Schools HTTP Messages Reference
Good reference for understanding those message/error codes that you've probably seen about town. 503, 404, 200, and all that. Everyone knows what 404 means, of course, but what about all the others?

W3Schools ASCII Codes Reference
Looking for the HTML syntax for an ASCII code? This has a pretty good list.

VML Reference
If it ever turns out that you need to start dynamically drawing complex shapes (like pie charts) in just IE, then VML is one way to go. VML stands for Vector Markup Language, and lets you draw vector graphics in IE5 or greater. A better alternative might be to render custom images on the server side (using ASP.NET or somesuch), because that would be cross-browser compatible, but that has the disadvantage of being more intensive on the server, and immutable except when a round-trip to the server is made for the updated image. VML can be changed in real time on the client side, just like any other part of your page.

Other Articles
This section contains articles that I have found useful on various topics. Most of these topics are fairly advanced or are very niche in nature, but might be just what you're looking for at some point in the future. I have listed them in descending order of relevance.

Internet Explorer & CSS Issues
Introduces a few of the cross-browser compatibility problems. This highlights some of the most common problems with CSS between IE and other browsers, and shows workarounds.

Drawing Lines in Mozilla and IE
Normally, drawing free-standing lines is not supported by browsers. You can do this with VML in IE, but that’s in IE-only, and very markup-heavy. You probably wouldn't have any need to do this sort of thing unless you got into diagramming in the browser window (which is a feature of my company Starta, by the way, though we use an entirely different approach for this).


Stephen Parrish said...

Thanks! Naturally I have to start with the first source you listed, since you described all the others in a foreign language. And already I've learned something: the "H" in "HTML" doesn't stand for "Hacker!"

Incidentally, Java is an island in Indonesia. Just thought I'd clue you in on that one.

And speaking of favors, if you ever need one of me all you need do is ASCII.


Christopher M. Park said...

You, sir, are hilarious. :)