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

1 thought on “When will we need this stuff?

  1. Great illustration Doug!

    A perpetual and as you say unwelcome (usually) question! Whatever the “stuff” even if not needed directly imho there is always a potential use. The real problem for me (and probably for all of us) is always convincing the students. Mine are literacy/numeracy often disengaged and unmotivated so I spend much time trying to find “triggers” for motivation

    For myself even my minimal HTML is invaluable – as you say it means I can “tweak”. I do use NVu/Kompozer but find it often easier to keep my pages simple & use notepad as our LMS (Bb) sometimes does weird things with pages created with either of them.

    Also seems to me this is back to understanding the principles – we are so often given a “front end” that distances us from the code which itself distance us from the principles.

    Sorry if the above is not very coherent – I have a glass of wine taken & also it is time to sleep here 🙂


Please share your thoughts here

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.