It’s going to be Barcamp Bangkhen 2012 soon. So I tried to come up with some topics for the camp.
Because I have a chance to try Bootstrap framework while I was working on a website at work. I found it is a lot more convenient than it was in 2000.
The dot com boom, back in 2000, made me want to have my own website. So I asked my dad for help. He brought me to a bookstore. I found two interesting books: “How to use Microsoft FrontPage” and “HTML Guide book.”
I picked “Microsoft FrontPage” because I heard that it is a software for creating website. But my dad refused. He thought that “FrontPage is an application for creating book cover!” (As its name suggest, FrontPage.) So I came back home with “HTML Guide Book”.
That is when I started my web development journey. Since then I see lots of changes in trends of web development techniques.
What I have seen during the past 12 years become a topics for Barcamp Bangkhen.
A brief history of HTML (as I see it)
<font face=MS Sans Serif size=2>
I am not sure if modern web developer will know how large size=2 mean.
To customize look and feel of the text, web browser provide 7 different sizes of font (from 1 to 7). The default font size is 3 (around 14-16 pt.)
<font size = 1></font>
<font size = 2></font>
<font size = 3></font>
<font size = 4></font>
<font size = 5></font>
<font size = 6></font>
<font size = 7></font>
It was very popular at that time that we use MS Sans Serif as font face (font family), with a size of 2 (around 10pt). This was a font used in Windows 95/98. Our website will looks native to other Windows applications.
text-decoration: none
This was first CSS snippet that WOW me!
Normally, links in website will be shown in underlined blue text. A popular website at that time don’t have underline under their links. And when I move my mouse over the link, the color changed to red. I felt like Hey, how did they do that! I quickly click View -> View Source to see how they do it.
It’s an inline CSS that says:
a:link, a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
}
One good things about web dev is that you can always learn from other people’s work. (View -> View Source)
Layout with <frameset>
Website that wants to have two columns layout used <frame> to create the layout.
I don’t think that HTML5 rookies will be familar with following code:
<html> <frameset cols="30%,70%"> <frame src="leftbar.html"> <frame src="main.htm"> </frameset> </html>
Above code create a two columns page layout. menu.html will be shown on the left. While right column displays main.html.
There is one drawback for this method. If you forget to put “target” attribute in all anchor (<a>) tags, the whole page will be changed to that URL, instead of the column you want it to display.
Frameset is obsoleted in HTML5, the only type of frame that is kept in HTML5 standard was <iframe> (inline frame).
Layout with <table>
Layout with <table> is quite popular at some point. Many people find it easy to create layout with HTML <table>.
One problem with using <table> tag for layout is that it reduces your website accessibility. Some screen readers will have problem with your website.
The other problem is page load time. Some browsers (especially Internet Explorer) wait until the whole table finished loading before rendering it to the user. Which mean user need to wait too long before some contents shown up.
Layout with <div> and CSS
It is when <div> become majority of tags used in a document. Everyone tried to get rid of <table> tag completely.
At first, I thought that CSS is meant to be used for just styling of font & text.
Then my friend showed me css Zen Garden. It was one of the website that inspires me to get started doing layout with CSS. I learnt that structure of HTML page can be really simple. You don’t need to make it complex or nested in <table><tr><td><table><tr><td>. We can create many different page layouts without modifying a tag html in document at all.
HTML/XHTML Validation era
You started writing <br /> instead of <br>. And <img src=”test.jpg” /> instead of <img src=test.jpg>.
It’s the time when W3C tries to solve HTML problems. Becuase web browser always forgive developer when it finds any error in the page. This cause website to be rendered differently in different browsers.
W3C proposed XHTML, an XML with HTML vocabularies. They enforced a draconian error handling. A browser will stop processing your XHTML document if there is any error in your document. For example:
- Wrongly nested HTML tag: <strong><em></strong></em>
- <img src=test.jpg> (attribute is not enclosed in quote, and missing close tag for <img>)
Not many websites actually passed XHTML Validation test. 99% of website contains at least one error. That is why XHTML is not quite success.
IE6 haters!
Becuase Internet Explorer 6 (IE6) is a default browser in one of the most popular Windows version, Windows XP. Majority of people used IE6 to surf the internet.
Web developers found it is hard to get their website rendered corectly in IE6. There is even a campaign asking people to stop using IE6. (here and here)
Actually, in the talk at Barcamp, I tried to compare and contrast what we do in 2000 vs. 2012. I did a live code session showing legacy coding in 2000. I even got stuck when trying to create <frameset> page.
I concluded the talk with some takeaways. Some suggestions for what we should do in 2012 are:
- Don’t start from scratch
- Find some frameworks, get used to it. You will be able to quickly create the web without the need to workaround some web browsers yourself
- Bootstrap framework is a nice start
nattster 