Download Audio File, choose format 
Zearle-No More Class War (closing song)
Download Audio File, choose format
Zearle-No More Class War (closing song)
Abstract:This is a script for the podcast "Talk Geek To Me, #02- Upgrading HTML."
This discusses the benefits of upgrading to modern HTML from older forms of HTML, emphasizing device independence by using webpages viewable in both phone and desktop browsers.
Here is a short story, it is a tiny history of HTML, the ``Hyper Text Markup Language,'' which is the language that web pages are written in.
The ``early years'' of the world wide web, before the image tag was created, was about two decades ago. Hypertext Markup Language was simple as anything, you could create a web page with a simple text editor if you had the knowledge of about half a dozen markup tags, and you could have a simple web page that worked.
This was simplicity, this ``I can do this with a text editor, it's so easy.'' Many people fell in love with web pages at this point. You may ask, ``what made this so easy?'' It was made this easy because web browsers were programmed to be astoundingly forgiving. The basic task of a web browser, is to display a web page, as best it can, even if the HTML it is given is malformed in some way. As you can imagine, when you have people making stuff off the top of their heads, they can forget things, like closing a paragraph, etc.
The other thing that made people fall in love with the web, was that the web was meant to be platform independent. That is to say, that it was never supposed to matter what kind of computer a person was using as he used the interweb. Other things that were not to matter was which browser he chose, which OS system he ran. It was always intended to be a strictly democratic media, serving all who came to it. This is an important point we will come back to later.
As we all know, technology moves forward, and standards change. After the first version of HTML came the ``browser wars,'' where Netscape and Internet Explorer battled it out trying to change things so that ``what browser you used,'' mattered. They did this by creating so-called ``extensions'' to HTML, which were nothing else but special tags that only one web browser or another understood. The real loser in the browser wars was the web page author, who all of a sudden, against the founding principles of the world wide web, had to create two sets of web pages for all his documents.
The ``browser war'' era eventually drew to a close. In the meantime HTML went through several revisions, and HTML is now at version 4.01. An argument can be made that people should move to keep up with technology, and should use the latest technology available. But the argument lacks having a ``pressing'' nature. That is to say, If I can write a web page with only a few memorized tags, why should I do something more complex like write it in HTML 4.01, or even it's sister, XHTML 1.01? After all, these browsers are so forgiving they will just figure out what I mean and flesh out what I want them to display.
Well, that is a true counter argument, and one I recently went through, registering a new domain recently and writing out it's web page. But I want to come back to a certain point I made before, that the design of the web depends on browser independence, and modernizing HTML is about this independence.
``Back in the day'' we were all using desktop systems to view the web, and our desktop systems had lots of memory. But we are now in 2009, and many folks like to forget about the an important change that took place on the interweb, and the name of that important change is the ``mobile web.''
We are not just browsing with desktop computers any more.
The day of the mobile browser is upon us, and if we are to keep the interweb as a truly democratic medium, we need to remember that some people are logging onto our web pages with mobile devices.
The new HTML is ready for it, if somebody says ``your web page is tough to navigate with my cell phone,'' the wrong answer is ``get a cell phone with a better browser.'' The new HTML is ready to help us create an interweb where a web address yields a web page tailored to both desktop browsers and mobile phone browsers. From the standpoint of the mobile browser, the desktop browser looks like an opulent mansion, with it's large memory, strong CPU, Java and Flash capabilities, broadband connections, and those great big high resolution screens.
Let's discuss theory. Theory is a great way to hammer the big ideas that will enable us to pull this off.
First off, I already simplified one concept and hid it from you. Not only are we moving to platform independence in the web, we are also moving away from an interweb that is meant exclusively for human consumption.
That's right, an old sci-fi cliche, ``not just human readable,'' has come to pass. I did not mean for this episode to be a member of a miniseries, but it has. I am referring to my recent ``Hacker Public Radio #330'' on Listgarden.
In HPR#330, I explained how I was using Listgarden to generate web pages, while it also generated RSS feeds. Well, this is an important conceptualization. You separate the content from the presentation, and if you want you can have software reading web pages for you. That is RSS feed in a nutshell. The content is presented in a form that is a data form separate from the human presentation, so that all those feed readers, and aggregators, can go to work on it for us.
And before you can say ``Deja Vu,'' you can see where this leads, you keep on separating the content, not just from the human medium but from the presentation itself.
A modern informational web page, you see, delivers it's content in a variety of ways. The one I talked about in HPR # 330, was the ``information in the web page'' separate from the ``web page read by a person.'' This freed us to not have to view a web page with a browser, we could then view it through an add-on to our favorite email client. We could then use an aggregator to just use an RSS feed to figure out if new podcasts were released them and to quickly fetch them. If you like Yahoo's now-famous custom homepage with it's news headlines customized to your tastes in news, you can now integrate an obscure RSS into your news ticker, and have a homepage on yahoo that had the BBC world news next to some computer security RSS feed. The separation of the content from the presentation is what made this possible.
Well, let's repeat the process, with what is called a ``cascading style sheet.'' I loathe the guys who named this one, because it sounds horrible to me, so I will just call it a style sheet. I do this also because I believe it will be easier on you dear listeners.
When you talk about the human-readable portion of the web, you have the content, which is the file that ends with ``.HTML,'' then you have the style sheet, which is a text file that has all the information on presenting the content.
OK, don't beat me up, I told you that simplicity in web pages was for another era, didn't I?
After writing web pages the old way, it sounds convoluted, we are up to now at least three files. The content for machines, in the ``RSS'' file, the content for humans, in the ``HTML'' file, and a style, in a ``CSS'' file. This does not include images or multimedia elements we may want on our web page, this is just a basic web page.
But when you abstract to this layer, you get the big benefit. Once you have the style sheet separate, you can have several style sheets. Don't have a conniption fit, you are almost out of the woods! Now you can have a style sheet for mobile browsers (to tell the browser how to make the thing look good on the small screen,) a style sheet for desktop browsers (to tell the browser how to make the thing look good on the big screen,) a style sheet for printers (so the thing looks good on paper.) To top it off, if you are using a mobile browser and the author was not kind enough to set things up for you, you can have yahoo take the RSS form of the information and display it for the small screen.
Theory complete, now we can have content in a variety of forms.
This is an excellent place to move from theory to practice. Surly you wonder, ``how does having a second style sheet for mobiles help?''
In the HTML, it is simple, you denote the two style sheets, with the keyword ``media,'' one for the media type ``handheld,'' one for the media type ``screen.''
Think about the differences, in text mode a desktop usually has eighty columns by 24 lines, maybe a mobile screen is twenty columns there. The orientation is typically different also, the mobile typically being what photographers call ``portrait,'' while the screen is what photographers call ``landscape.'' The LCDs on mobiles certainly don't support millions of colors, and a few hundred pixels across as opposed to a desktop having usually 800 or 1024 pixels across.
So you get into a situation where what looks good on the big screen looks bad on the small screen and vice-versa. Paragraph after paragraph of text looks dull on the big screen, and really calls for navigation bars, side bars, two or three column presentations.
On the other hand, the small screen just isn't big enough to handle multi column support, and this is usually rendered by placing columns on top of each other on the small screen. If one of those columns is a navigation bar with many links, your mobile user could end up wading through dozens of links to get to the information he needs.
Style Sheets to the rescue. I am not going to make this into a how to on website building, but I need to give some examples to give you a clear idea of how this helps. In the HTML you can define classes of elements, so you can have a sidebar, and images in the HTML in different resolutions, and even maybe a special shorter kinder navbar for mobiles. Then, in the style sheets you can turn different classes of elements on or off. Thus, for the mobile the sidebar is suppressed, while in the desktop version, the mobile navigation is suppressed. Suppress the big images for the mobile, suppress the small images for the desktop. One HTML, but each type of browser gets tailored content.
This presentation is getting kind of long, so let's start wrapping it up.
Handling malformed HTML, ``code bloat'' for this function is rated at 50%. That means that half the code in firefox is there to handle non-standard HTML. What makes this fact interesting is that the microbrowser on many mobiles simply can't store a big browser program. To reconsider the size constraints of the microbrowser, if the screen is too small to handle multiple columns, why have the code to render them in the micro browser. Putting the many old web pages out there in non-standard HTML leads to a need to make a differentiation.
Enter the ``DTD'' statement, for declaring document types. An old web page won't have this, so a desktop browser will go into what is known as the ``Quirks'' mode, to handle all the non-standard things that can go wrong. If a mobile tries to access these, there is some kind of front end for the mobile company that converts the page to something the mobile can handle, but there are no guarantees about how it comes out.
When it comes to different document types, you can often hear terms such as ``transitional,'' and ``strict.'' Transitional includes all the old tags that need to be dropped, while strict adheres to the modern standard. You may also hear of ``HTML'' verses ``XHTML.'' XHTML is the marriage of HTML and XML, but is more well defined. Most professional web page designers are working in XHTML, but HTML is fine too. The last term when it comes to HTML flavors I need to mention, is ``XHTML Basic.'' ``XHTML Basic'' is a minimalist version of XHTML made for mobiles. Basically, many of the things to handle columns and frames are not in it, that and it's tight definition cause you to need a much smaller browser. At the time of writing this presentation, Firefox has partial support for Mobile forms of HTML, while Opera promises complete support for viewing Mobile only web pages on the desktop. But remember, the idea is to have one web page, that renders right for different browsers.
So, to finish our conclusion, I come here not to give you a tutorial on modern HTML, but rather to explain why you may want to learn it, which involves getting your stuff out to a much wider audience. You now have the theory, but to get a feel for it, I want to leave you with one tidbit, a website to check out. Www.csszengarden.com is a website that has one HTML, and many CSS's. There, you can click through many designs of the same page, thus seeing how powerful this separation between style and content can be. And please don't think that my example of ``mobile'' vs ``desktop'' is the end all of web pages. The future holds exciting web page authoring methods for different devices to access the world wide web, there are CSS standards being developed to address specific accessibility needs, such as audio only browsers for the visually impaired interweb user. The thing to walk away with is this:Strict compliance (checked out with validation tools such as ``tidy'' or the free HTML validation service at W3.org) is the best way you have of future proofing any web pages you maintain, as well as opening your page up to future technologies down the road.