When will we need this stuff?

It’s the question that teachers dread.  And it deserves an answer.

One legitimate opportunity to question comes when teaching HTML programming.  If you are fortunate enough to have a copy of Dreamweaver (Ministry of Education licensed in Ontario) or FrontPage or KompoZer or any of the other popular choices, it’s a really good question.  After all, you can work in a WYSIWYG environment and post directly to the web.  None of this

stuff.  Of course, the real answer lies in the ability to fine-tune edit when you’re out a pixel here or there or some other serious tweaking is necessary.  How about a nice chance for a little visual experimentation?

As I’m writing this, I’m trying to avoid that dancing show – but more importantly, I’ve always wanted to try and find some sort of educational activity with the Mozilla created Hackasaurus website.  Hackasaurus comes with a powerful set of “Web X-Ray Goggles” that lets you look behind the code on your favourite website and remix the content.  And, of course, in order to do it  you need to know your HTML!

So, you fire up Mozilla Firefox and head to the Hackasaurus website.  There’s a bookmark to be dragged to your Bookmarks toolbar.  Clicking on it activates the tool for the current page.  As you move your mouse over the page, an element is highlighted.  Pressing “R” on the keyboard gives you the opportunity to “remix” the page by editing that element.

Now to try it out.  I’m sure that designers at the Bing project put a lot of time and effort into their design.  But, now that I have this tool, I can remix and make it mine!

Isn’t this better?

How did I do it?

I activated the bookmark as described above and started to mouse over things.  “Web” becomes “Internets”; “Images” becomes “Pics” and so on.  Pressing the “R” key pops up the element on the webpage and you do your editing.  It’s the same thing for the image element.

When I press the “R” key over the original image, I’m presented with the current code…

We can see exactly how this element was created but more importantly, we can substitute the code for any changes that we’d like to see such as…

Hackasaurus calls this the “Pretty” look.  To see how it would look if you were editing the webpage in Notepad or some other text editor, we can switch to a not-so-pretty representation.

Not only can we change the source of the image, but we can edit some of the other style attributes.  To the right, a preview of the final results is always available.

The “I” key links to the web so that you can read more about the element that you’re working with and the “T” lets you copy and paste a piece of code into your own webpage.  That’s a way to incorporate the best of the web into your own offerings.  Of course, credit needs to be given.

The more that I play with this, the more that I like it for what it’s worth.  Sure, you can (and certainly I have done this) do a view source and look at the code on a page or save it and then bring it into your webpage editor and play around with it there.  There’s just something motivating about remixing the real live web as it happens.

While you’re at it, the value of the HTML that lies behind the page becomes so apparent.  Hopefully, it will cut back on the question “When will we need this stuff?”

Powered by Qumana

links for 2011-09-20