Sponsor: The JavaScript Anthology
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Browse Blog Archives
« July 2008 August 2008 September 2008 »
Blog Entries from August 2008
-
Best Markup for Semantic HTML Forms?
When I code a webpage, I always fret about making sure that my markup is as semantic and simple as possible. Generally, creating a semantic webpage is easy, but I have always found coding semantic HTML forms to be difficult. In the web development world, there are a few excepted formats for semantic HTML forms: tables, <div>'s, paragraphs, ordered lists, and definition lists. The challenge is that each form has its own pros and cons in relation to semantics.
Foremost, the <div> element simply provides no semantic clarity for forms and I highly recommend never to use it for form organisation. Tables make a logical choice for forms because many forms are organised in a tabular fashion, particularly more complex forms. Paragraphs also make semantic sense as each label and form element pair is much like a paragraph. Ordered lists present even more semantic clarity because most forms are organised much like a list, with a very vertical setup. Many web developers argue that forms are simply a "list" of things to fill out. However, many other web developers passionate about semantics argue that definition lists make the most sense for forms (external link) because they fit the "question and answer scenario".
This past week, I spent some time designing a personal portfolio website to exhibit some of my web-related work. I wanted everything to be as semantic as possible, in addition to using valid code, to show my commitment to a better web. So, I decided to use definition lists for my email contact form. I am convinced now that definition lists are the most semantic way to organise form fields in most situations. Also, definition lists surprisingly styled easily across Opera, IE, Firefox, and Safari.
XHTML
<h3 id="contact">Contact Me</h3>
<form action="./contact" method="post" id="contact_form">
<dl>
<dt><label for="f_name">Name:</label></dt>
<dd><input type="text" name="name" id="f_name" /></dd>
<dt><label for="f_email">Email:</label></dt>
<dd><input type="text" name="email" id="f_email" /></dd>
<dt><label for="f_topic">I am interested in:</label></dt>
<dd>
<select name="topic" id="f_topic">
<option>Web development</option>
<option>Custom application development</option>
<option>Translation</option>
<option>Writing/Proofreading</option>
<option>Other</option>
</select>
</dd>
<dt><label for="f_message">Message:</label></dt>
<dd><textarea name="message" id="f_message" rows="10" cols="40"></textarea></dd>
</dl>
<p class="submit"><input type="submit" value="Send" /></p>
</form>Still, in scenarios with more complex forms, I think that tables provide more clarity and concrete physical organisation. For example, government forms are generally simply too complex for a simple definition list. In these situations, tables provide semantic clarity and guaranteed physical organisation that will work better across each web browser. In the end, I would say that definition lists and tables are the two best methods to organise form fields semantically.
-
MiniAjax.com: Showroom of AJAX Scripts
Awhile ago, I came upon the website MiniAjax.com (external link), a website with a nice collection of downloadable DHTML and AJAX scripts. The website is just a pretty collection of links to other tutorials and scripts, but all the scripts they have found work really well. You can find downloadable scripts for all the cool things that people use JavaScript for nowadays, such as:
- Star rating bar
- Dragable boxes
- Modal windows
- Pie charts
- Field validation
- Thumbnail viewer
Take a look at MiniAjax.com as some of the scripts are pretty useful. It's a good site to bookmark too.
-
No Outlook-to-Mail Transfer Tool?
I setup my old iMac for my mom up at her business, which required transferring files and settings from her old PC. Most of the files transfered easily, especially since she already was using iTunes. Transferring the music, the pictures, and the documents was done easily over ethernet, but transferring all of her emails proved to be the most difficult task. Basically, there is no easy way to transfer emails from Outlook 2003 to Mail.
Apple does not include an importer to import Outlook mailboxes, despite Outlook's popularity on Windows. With all the people moving from Windows to OSX, I figured that Apple would include a method to import Outlook emails. I searched online on how to import from Outlook to Mail and the easiest method seemed to be importing first into Thunderbird and then into Mail. So, I tried this, importing first from Outlook into Thunderbird and then attempting to import the mbox formatted mail into Mail. However, this didn't work for some reason or another.
I searched online for another solution and ended up discovering a little tool called Eudora Mailbox Cleaner (external link), which, in addition to Eudora, can import from Thunderbird directly into Mail. After installing this little tool, it was as easy as drag-and-drop to import my mother's emails. I just dragged the entire Thunderbird profile directory onto the Dock icon and Eudora Mailbox Cleaner handled everything.
Still, I think that Apple needs to include a solution to import mail from Outlook right out of the box. Eudora Mailbox Cleaner is a good tool though that makes the process a snap, once your email is converted into the mbox format via Thunderbird.
-
Setting up SVN on OSX Leopard
When I got my new Macbook, I knew that I wanted to setup a better system to control all of the source code on my computer. I have websites and applications for clients, Lowter, etc. Basically, I have a lot of code that was only loosely organised on my old iMac. On my iMac, I had everything organised nicely into folders, but that was about it. I had CVS setup, as it was built into OSX Tiger, but I did not make much use of it because it was too complex.
I found out that SVN is built into OSX Leopard, rather than CVS. I really don't want to start a CVS-vs.-SVN argument, but I just do not like CVS. SVN is easier to use and I am more acclimated to using it because a few of my clients use SVN already. Searching on Google, I found an amazing tutorial on how to setup SVN on OSX Leopard (external link), which I highly recommend. I followed the tutorial and now SVN is up and running on my system, with all of my code stored neatly into repositories.
If you are looking to setup a versioning system for your source code, I highly recommend SVN instead of CVS. SVN was easy to setup and is easy to work with, especially compared to the complexity I encountered trying to maintain a CVS code repository. Apple made a good move to include SVN in OSX Leopard instead of CVS.
-
New Cuil Search Engine Sucks
A few days ago there were posts all over the blogosphere about the new Cuil (external link) (pronounced "cool") search engine that was suppose to "take down" Google. Apparently, Cuil was founded by an old Google engineer with knowledge about their search algorithm and Cuil was going to produce better search results than Google. It took about three hours for everyone to figure out how much Cuil sucks. The search results are not even close to relevant, especially the random images they somehow associate with the search results. When I searched for "Ethan Poole" I got some completely irrelevant pictures that had no connection to me at all.
My favourite commentary about the new Cuil search engine is in this episode of the Buzz Report (external link) by Molly Wood of CNET.
Basically, you cannot beat Google unless you simply have better search results for everything. Sure, Cuil has a cool interface and a massive search index (or so they claim), but their results are utter garbage. It is possible they could improve on their search results to match up with the attractive interface, but they are a long way from even challenging Google.
Browse Blog Archives
« July 2008 August 2008 September 2008 »
Sponsor: Sunbird Calendar Application
Manage your schedule easily and store it where you want to. (external link)
