I gave a presentation last week at the Bring and Brag preceding the CAS Wales / Technocamps conference in Swansea about a variety of different web-based tools you can use in school to teach HTML and CSS.
This is a lovely site which is based on the X-Ray Goggles toolbar widget. Essentially you drag the widget to your toolbar and once activated, it shows the source code of the site as a layer above the page. It allows the user to show the code of various parts of the page and separates out the <div> tags and classes.
It’s a great fun little app that takes the sometimes very complex viewed source code of a page and links it directly with the content.
The hack part comes when you start editing the content. Lift an image from another URL, edit the text, change the colour, size, etc. Then you can commit the changes and publish (to a separate URL). Of course as soon as you commit changes, the questions start flying!
Wow Miss – are you allowed to hack Google?
Are you going to be arrested?
Does everyone’s Google look like that now?
Without you actually teaching it, a number of key points come out:
- the source code of every web page is available to view
- images have their own URL
- the page you are currently viewing, is stored locally on your computer
- hitting F5 refreshes the page – your computer goes back to the server to get a new copy
Playing around with the code is simple – or can be made harder if the students want to challenge themselves. Yes they can hack Facebook (a popular request). The site also has some nice resources including the Hacktivity Kit – a guide to running your own Hack Jam.
This is another Mozilla project aimed at web-based website building. The site has a number of pre-prepared projects all of which run in a split-screen. The projects guide students through various tasks all with the aim of getting used to using various HTML and CSS bits of code. The projects themselves are fun – silly and fun, but make a really nice starter for a series of lessons on HTML / CSS.
I tried two of the projects on classes last week. Two year 7 classes tried the Make Your Own Animal project. They learned how to edit the HTML and switch the images around as well as some basics about HTML tags. One of the classes was a very low set. The concepts of image URLs were fine – some struggled with the motor control needed to copy and past precise bits of text. The project also got them to describe the animal they created so we had some nice creative writing and literacy in there too!
A top set year 9 class tried out Bakery Bash. Now this really is silly and has a screen full of dancing cat gifs. There is nothing in this activity that could be described as remotely cross-curricular but it is FUN. Within minutes students were delving around in the web looking for the URLs for images. Some sites didn’t show the image source on a right click so they went straight into the source code and started reading it.
A point on browsers
The obvious question when running Mozilla sites is, “do we have to use Firefox?”. At my school, students are currently only able to use Internet Explorer. Enabling browser choice is (one of the things) on my to-do-list. I had a hunch this might be the case in other schools so I did a quick Twitter poll to see whether this was the case (please note this is very unscientific).
Well if nothing else it proved what I thought would be the case. (Clearly I should have asked what other browsers if there’s a choice but I didn’t. At least they have a choice.)
Before the lessons I put a copy of Firefox Portable on all the students user areas. Unfortunately it didn’t pick up the proxy for our filtering in school so wouldn’t work (which is odd as my year 10 students use Portable Apps with no problems – often running of memory sticks and still through the filter – I digress).
However Thimble worked just fine in IE. Hackasaurus didn’t want to know. We’ll sort the browser issue out soon. Interestingly though Thimble also worked well on our paltry 8mb broadband connection (yes that’s 8mb shared between the several hundred users in the school).
Where Next After Thimble?
So, Thimble is great fun. We made cats dance, we replaced cats with pictures of our friends etc. We need a scheme of work. Thankfully I have one up my sleeve!
We already teach a unit of work (in year 8 – I just didn’t have a year 8 class the day I tested Thimble). Students create a website on either Caerphilly Castle or the Spanish Armada using Adobe Dreamweaver. It’s a SoW with it’s merits but we’ve been struggling with the fact that essentially, most of the lessons are spent teaching the software which is not what we want to do.
So enter Dreamweaver split screen.
The split screen is the same layout as Thimble. If you edit the code and then click on the page view – it updates automatically (there are some CSS elements that need to be previewed in the browser). I showed students another site:
.. and they were away. This site acts as a library of HTML, CSS, XML etc. It also allows you to test code (again on a split screen basis) and see what it will do. The student who’s work is shown above wanted a background graphic on his page so worked out how to edit the CSS himself.
But HTML is just a bit of coding – where’s the more advanced stuff?
Codecademy gives out badges when you finish courses which can be shared on Facebook and Twitter.
Hopefully then some useful ideas on how to integrate a little, or a lot, of computer science / coding into ICT lessons.