HTML Refcard: Meet the Author Andy Harris

Andy Harris is author of the recently published Core HTML Refcard. DZone got a chance to speak with Andy on a range of topics including HTML 5, Ajax, Web design tooling and the next phase of the 'browser wars'.  The complete interview transcript has been provided below.

1. Andy, could you please tell us a little bit about yourself?

Sure. I have been interested in technology since the late 70s. My first computer was a TRS-80 model 1. I was a special ed teacher for several years, but I was teaching computer science part time while I was doing it. I'm now a senior lecturer in computer science at IUPUI, a joint campus of Indiana University and Purdue University in Indianapolis. I've written a bunch of books on web development, game programming, and various computing topics. I was an army brat growing up, so I lived all over the world, including Germany and Japan. I've added at least one Monty Python reference to every book I've ever written.

2. You recently authored the HTML/XHTML Refcard for DZone -- doesn't everybody and their grandmother already know HTML? Why might this be an important Refcard for Web designers and even Web developers for that matter?

As in many fields, the fundamentals really matter. I run across a lot of very competent web professionals who are investigating newer technologies (like AJAX and web frameworks) but are frustrated with their lack of progress. These newer technologies can work with old-school web technologies (plain HTML, frames, and table-based layout) but using these older ways of thinking really hurts you when you're pushing the edge of what web applications can do today. Even with HTML5 and CSS3 on the horizon, current web developers should definitely be aware of the advantages of valid code and the separation of content from display. Newer developers should start from a framework that does not teach outmoded habits.

In 1996, you could be a web developer if you knew HTML. Now, nobody wants web pages. File-Save As-HTML: Everybody can do that. Today's web is about applications, and to make cutting-edge applications, you have to begin with a clean-solid, reliable framework, and that's what the modern interpretation of HTML / XHTML is about.

3. How has HTML evolved to meet the present-day needs of the Web? Is it heading in the right direction?

HTML was an incredible phenomenon when it launched, and in some ways it was a victim of its own success. It was almost capable of acting like a word processor, so that's how people started to treat it. The recent trend in HTML (and XHTML) is towards simplification, and I think that's a good step. All the tags that used to be about layout (font, center, bold, and italic, for example) are now being replaced with much more flexible CSS alternatives. HTML is returning to its original definition as the structural framework of web pages. Design aspects are being shifted to CSS, and interactive features are now being handled increasingly through AJAX, JavaScript, and server-side languages. There is some debate about the future of XHTML, but I think that debate is going in the right direction. Although XHTML 2.0 might never occur, the important thing is that smart web developers have learned that valid code and separation of design from content are good ideas, and should be encouraged whatever the new variation of the language is. I'm very excited about some of the promised features in HTML 5 and CSS3. (see next question..)

4. What are some of the new and noteworthy features in HTML 5? How are they going to change Web development and design?

There are several features that stand out to me. One of my favorites is the canvas tag. It's really about stinking time the browsers supported vector graphics natively. It's a very good step, and with the ever-improving performance of JavaScript engines, we'll be able to have real GUIs and a much more interesting gaming experience native to the browsers at long last. Take a look at some of the really great canvas tag demos out there. Adobe should be worried, because between the canvas and the new media tags, Flash is looking less and less important.

The new media tags <audio> and <video> should have been available years ago. On one hand, they are a signal that browsers may in fact have integrated support for media without requiring a plugin. The web isn't be a serious multimedia platform yet, because multimedia support still requires a third-party plugin. I'm concerned about the format wars, though. I personally love the ogg formats (vorbis for audio and theora for video) but I'm pretty geeky. Will the major players agree to formats that they cannot control? I'm not optimistic.

Another feature I'm really excited about is actually part of CSS3, but it looks very promising, and that is embedded fonts. This is an idea that's been around for a long time, but there's never been a reliable cross-platform solution to the problem. CSS3 promises a very clean solution to this problem. If it really gets implemented, the web will finally have the capability for real typography, which ushers in all kinds of design possibilities. I'm certainly not a designer, but even a techie like me can appreciate what a boon that will be (and what a disaster, too, but that's all part of the game.)

5. With all the new features coming out in HTML 5 and CSS 3 should developers be holding back from using them now since some users don't have supporting browsers?

It's all about knowing your audience. I'm working on a site this week for a company that currently has a web page written with MS Word. They didn't know what a CMS was, and they were utterly impressed when I installed one for them. Many of their customers are still using IE6 (yeah, I know, it makes me shudder, too.) I have to give these guys something that will work for them, which means it doesn't matter how cool my AJAX image gallery with integrated audio is. If their clients won't see it, it doesn't exist. Some other clients are happy with all the latest bells and whistles, and don't mind asking their users to use an updated browser. I'd rather be able to draw with all the crayons in box, but this is not a hobby. I work for my clients, and their clients.

Having said that, I think we do have a role in educating people about browser choices. I used to teach that it was completely unethical to ask the user to use a particular browser for the convenience of the programmer, and I still do. (You know what I mean: "This page is optimized for Internet Explorer.") However, how many times has Adobe, Apple, or Microsoft forced you to upgrade something? (often against your will and better judgment.) I'm not asking my users to upgrade to a particular program, and I'm definitely not asking them to spend any money on an upgrade. Instead, I'm inviting them to download any of a large range of free programs. I don't really care if they use Firefox, Opera, Safari, or even IE as long as it's a reasonably recent version. (I'd really rather they didn't use IE, but I guess I can't say that...)

I guess we (technical people) could be better evangelists about the advantages of keeping up-to-date on browsers. If you don't mind buying a whole new version of Office every few years just because Microsoft tells you to, what's really so bad about choosing from one of four free modern browsers that cost you nothing and add really great features to your experience?

The real issue in the corporate world is the proprietary tools dependent on a particular browser (almost always this amounts to ActiveX controls embedded in IE6) I don't know how we're going to fix that without really demonstrating how AJAX and modern frameworks can really do all the same things and more.

6. What are some tools you'd recommend for web developers just getting started with HTML?

Firefox - If you do nothing else, get Firefox. It's a way better browser for developers than anything else, because of the improved debugging, error reporting, and (most importantly) extension support. I almost always have Chrome open, and I like Safari, but I'm really dependent on a few Firefox extensions. I find it hard to code without them. I use IE mainly to see how IE will punk out my designs.

Web Developer toolbar - This is an absolutely essential tool for web developers. It's a Firefox plugin. It lets you view and edit the code, do a real-time edit of CSS (I LOVE that feature - watch the page change as you write CSS code, then save it when you're done,) quick access to diagnostic tools (WAI compliance HTML and CSS validators, speed checks,) cookie management (vital when you're testing code that involves cookies or session variables, and much more.

HTML Validator extension - The main reason most of us don't validate is laziness. It's just an extra step to go to w3 each time you want to check your pages. The Validator Firefox extension adds the same validation engine used by w3c directly to your browser. It gives immediate validation feedback on every page you visit. It also incorporates tidy, so when you get depressed that your page has 165 validation errors, you can let tidy fix it with a single button. Once you start to see validation information for every page, you get much more motivated to ensure your pages are valid. Many times in my more advanced development (especially AJAX) I find that problems I think are related to complex stuff like databases, PHP, or JavaScript turn out to really be problems with the structure of the (easy) HTML / XHTML code.

Firebug extension - It's just awesome. I don't think I could do AJAX programming without it. (I did at one time, but I don't know how) It adds a real debugger and console to JavaScript, lets you view your page after AJAX modifications, and has great testing and inspection features. I absolutely love it.

A powerful text editor - I still use emacs, but I'm pretty old school. Learn something powerful, it will save your life. I'm a big fan of notepad++ on Windows, but it's not available on Mac or Linux. VIM is perfectly fine too, as are jEdit, scite, and any number of other tools. A developer's text editor should have line numbers, multi-document support, macro support, and delimiter matching. Syntax highlighting and code completion are nice, but not critical to me, as is integrated FTP support.

A programmer's editor - I do like Aptana for heavy lifting, because it's a real IDE (based on Eclipse, which I already use extensively for Java and C++ programming.)

That's really it. If you're just getting started, don't get lured into the wysiwyg mythology of tools like Dreamweaver and ExpressionWeb. They're perfectly fine tools, but the best use of them is as text editors. Since there are open-source editors that do the job just as well, why use the expensive commercial products?

7. When should I consider using XHTML over HTML?

I'm honestly not convinced you should, at least for the long term. To me, the important thing is validation to a strict standard. If my HTML is solid, it's gonna be a lot easier for me to get my PHP or AJAX running right. I currently use XHTML 1.0 Strict on almost all my pages, because If I can pass that validation standard, I can pass anything. I like how it forces me to use good habits. When I switch to HTML, I still write it like XHTML strict. Strict validation teaches you good habits that will benefit you in the long run. I'm sincerely hopeful that HTML 5.0 really becomes a standard because I hate teaching the awful doctype soup that's part of a standard XHTML template. I still copy and paste that monster, and I've written books about this stuff.

The DOM tools today (particularly jQuery) can handle HTML and XHTML with similar dexterity, so to me the distinction is much more about style than substance. Even when you think you're writing XHTML, it's often being rendered as HTML, so it's really kind of a silly argument. Code your basic web framework well, and you're building on a brick foundation. A sloppier codebase is like building on a sand pile.

8. Should developers still be using Frames for dynamic pages?

Nope. Next question?

Seriously, frames were a great idea, but they just never worked right. They were intended as a workaround to two browser issues: page layout and client-side inclusion. We have much better solutions to both problems now, and use of frames advertises a backwards-looking mindset.

CSS is really the solution to page layout issues. I know it still feels kludgy, but CSS2 is workable, and CSS3 looks a bit more sensible yet. Frames simply don't work for page layout (neither do tables) CSS is the way to go.

Client-side inclusion was a bigger problem. Frames did provide a relatively easy way to turn a web document into a series of smaller page snippets. There were some usability and coding issues that never got fully resolved, and the target mechanism was a massive pain. Now that most serious web sites are really CMS systems with server-side coding, there is much less need for frames, because all the integration can happen on the server. AJAX has also come to the rescue here, particularly if you use a wonderful library like jQuery. I haven't written a frame-based page in several years now, and I haven't missed frames one bit.

(I'm still not sure about iFrames... I'll let you know in a year or two...)

9. How do you see the 'browser wars' playing out in the next couple of years? What impact will standards support have on browser adoption?

I'm thrilled the browser wars are back on, and I'm (perhaps naively) optimistic about the outcome this time around. Microsoft knows exactly what can happen to 97% of the browser market, because they buried a competitor with that kind of a lead. Firefox has been the best thing that ever happened to the tired IE line. Suddenly Redmond is putting resources back into its browser, and they're finally (if still reluctantly) listening to developers. We care about standards compliance, and we want decent performance.

I think the difference between Browser War I and BWII is this: The first browser war was about divergence. The thinking was that one proprietary platform would dominate, and it was a battle to earn that prominence. Today's version of the war is more about convergence: Who can best deliver a platform that serves a core set of needs? AJAX is really the driver here, as web development and application development become the same thing.

It's a good sign to me that even Microsoft is really beginning to pay attention to standards. Maybe they are hearing us after all. I'd still like to see real .png transparency support. Just saying.....

I think the real standards battle now has moved to multimedia and document support. Will ogg ever get a serious footing, or will the big players bully in on their own formats? Will MS Office's 'open' standard really be taken seriously? These are questions currently being played out.

10. What resources would you recommend to someone that is new to HTML?

Wow. that was a slow pitch.....
I'd love for you to read my book: HTML / XHTML / CSS All in One for Dummies.
I know it's a dummies book, but I also know you're not a dummy. (I really think they're referring to the author, not the reader.) Many HTML books are written by HTML experts or designers who don't really concentrate on the more technical aspects of web development. I'm excited about this book because it goes all the way from "say hello to Mr. HTML tag" to serious JavaScript, AJAX, PHP, and data integration. I teach XHTML and CSS as a foundation to a very exciting and rich continuum of platforms. Of course, if you just want to read the first three mini-books, you'll have a solid foundation, but what's cool to me is how this book teaches XHTML on page one thinking about how it will fit with AJAX on page 901.

Check online, too. There are some great resources online, especially w3c and w3schools. Be sure you're getting up-to-date information, because a lot of older advice is still on the web.

If you have more of a design bent, take a look at CSSZenGarden - That will blow you away, and convince you that XHTML/CSS are the only solution for serious designers.

For more technical folk, don't be afraid of the dynamic web. If you want to make a living today, you're not writing web pages, but web applications. Look into PHP or another server-side language. Learn at least the basics of data normalization, because your customers need it, even if they don't ask for it. Learn a CMS or two. You'll make a lot of money customizing these for people. (I like websitebaker for basic sites, Drupal or Joomla for more complex ones) Play around with jQuery. It's awesome.

11. Any final words of advice for our members?

I feel like Yoda - dispensing sage advice:
<frankOzVoice>
AJAX - Develop with it, you will...
</frankOzVoice>

Ummmm.. Just have fun. We work in an environment that offers endless change and variety. If you like learning new things, you're in the right place.

Stop by my web site to see me or drop me a line: http://www.aharrisbooks.net

Blessings to you, my geeky friends...

 

1.