Thursday, May 29, 2014

Computing Science Conference: Hacking HTML, CSS and JavaScript

Live notes from Education Scotland's Computing Science Conference

Colin Maxwell

Useful websites are:
Codecademy (Colin's favourite) - great for getting yourself up to speed and for pupils to set practical homework as no special tools required. - not as interactive as codecademy but good reference site. - from Mozilla. The x-ray goggles is good but start with Thimble. Similar to codecademy with tutorials but the advantage is you can save and share what you create.

All three of these are great because all you need is access to the Internet. Possible to do it with some fairly basic tools: web browser (Chrome preferred) and a text editor (Notepad++, Brackets, Sublime, ...)

Brackets is free, open source. It does Live HTML Development, supports JavaScript debugging (with Theseus extension) and loads of other extensions (e.g. Extension that provides colour palette to choose hex colour codes or "beautify" code).

How do we teach HTML? Colin started teaching programming by getting pupils to hack code. Start by giving web pages for them to hack. Example given of a web page that asks for a pin code then flick backwards and forwards between the code and the page. Get pupils to identify how the different parts relate to each other. Start with JavaScript version of a simple PIN code form then same form but using CSS to code it. You can show how style is improved and extra functionality added. Can open the JavaScript file and the CSS file alongside HTML file. This approach let's pupils see the completed jigsaw puzzle rather than just giving them the bits and no picture.

Colin then went on to show editing a web page in bracket. bracket lets you open all the files in a folder and shows them in a side bar for easy navigation. From a teaching point of view, you can zoom the text in a window, highlight lines and do live update of a web page. Set pupils tasks like change a grade, add a person don't tell them how, let them work it out. Makes it more than a "monkey see, monkey do" exercise.

Set tasks to place objects (Colin uses zombies) using div to place graphics - house a png which can have transparency (for windows and doors) and zombies as gif because they can be animated. Place the zombies in the windows and doors. Uses layers to get zombie inside house. Then give file to another pupil who will stack crates in front on the windows - again using div and layers.

Went on to show JavaScript game using JavaScript library called enchant. Again, hacking an existing page to do things like change frame rate and sprite being animated. The enchant library much easier to use than many. Colin uses JavaScript as his main programming language.

Ran out of time but check his blog for more.

Computing Science Conference; PLAN-C

Live notes from Education Scotland's Computing Science Conference

Programming: Teaching Standard Algorithms - Peter Donaldson

Visualising Hidden Mechanisms
Lots of hidden mechanisms in Computing. If pupils do not have an understanding of these mechanisms (only seen examples or relying on intuition) they will struggle. Showing examples is not enough. Must have a causal model or there can be "random twiddling" to try and fix problems. Watching a process helps but it is not enough. Often programming gives too much work for eyes and not enough work for the brain. You don't have to be a genius to program, you just have to develop an understanding of what the computer does when it is given an instruction.

How do we do that currently? Diagrams e.g. Boxes for variables or use debugger to inspect variables and trace an execution of a program. Use actual boxes and get pupils to put things in the boxes. (An aside was how do you read an assignment statement? Not read left to right or how do you make sense of total = total + 1?) interactively model the process of writing code - start with a blank page and build the code up a line at a time rather than starting with example programs.

Other suggeststions: draw a flowchart of a program; draw structure diagram; trace table/debugging tools; step through program and asking "what happens next...". There are limitations of all these approaches. Each approach contributes something but often need to teach new ways of describing when they are still getting their heads round coding. Is the cart before the horse teaching design notation before they understand coding?

Example was given of using a paper table to trace through a program. Started by identifying expressions (i.e. something that generates a value).

Teachers answer was:

Next draw arrows to show the flow of control:

Finally, hand execute the program with the input 20, 7, -1 (put the step numbers beside the arrows - makes it easier to see when things happen). Fill in changing variables in a table and show the expression being evaluated at each stage too. Work in progress:

So our final trace looked like this:

Using the "Expression evaluator" box makes pupils' understanding of what is going on clear.

But research shows there is a strong correlation between the ability to trace the flow of a program and the ability to produce code.

Location:Grosvenor Street,Edinburgh,United Kingdom

Making the dull bits interesting

David Bethune

Begs the question: are there any dull bits? Probably around the room, different people will give different answers. Key point is that we have to get pupils enthusiastic about our subject.

{Curses! Lost my notes from the first half of this session while looking for a cartoon.}

Concept cartoon to stimulate discussion. Should be no right answer, or at least no obvious right answer. Could set this as discussion starter or ask pupils to produce a concept cartoon. Here is our attempt:

We then passed on our carton to another group and they added to our concept cartoon.

Could then role play concepts produced. Could use this in a flipped classroom style. Perhaps look at cartoon at home and come in with discussion, research, ready to talk about it.

How do we develop investigation and reporting skills? E.g. Software Design & Development Outcome 3: "Produce detailed report on... Current trends in the development of intelligent systems" Should allow choice of topic.

Don't forget about SCHOLAR which has animation and interactive bits, CSI, and How Stuff Works. The BBC news technology section has some nice articles that can generate interest. {Computer news and Technology cool wall? -- DDM}

Location:Grosvenor Street,Edinburgh,United Kingdom

Computing Science Conference: Keynote

Live notes from Education Scotland's Computing Science Conference

Keynote: Gerry Docherty, CE smarter Grid Solutions

The IT industry in Scotland could be bigger and better: "There are no geographical barriers to being successful in the IT industry. ...Computing is the big industry for the 21st Century."

Skills Investment Plan
A number of major players in the IT industry as well as public bodies and universities are involved in drawing up the plan. Gerry sees Computing teachers as the most "important cohort" in developing pupils' interest and aptitude in IT. Salaries in the IT industry in Scotland are 60% above the median salary in Scotland. IT in Scotland is second only to the Whiskey industry in terms of export value. Few jobs are at the IT support end of things. Most of the jobs are at the high end, computational thinking side of things.

There was then a "Wha's like us?" Section where it was claimed (among other things) that hypertext was invented in Edinburgh. (Not convinced!) was pointed out that there is a real shortage of people qualified to fill the required jobs (need 10,400 in the next few years). There are barriers though. Image of IT people is still that of spotty, t-shirted, game playing teenager. Need to get message through to parents, teachers and pupils that The industry that will change the world, that will make new things, are the high end IT people. The high flyers, the five A Higher pupils, need to see the IT industry as the place to go. That high end IT skills are useful, and even necessary, for people going I to other professions (e.g. Doctors, lawyers, finance, physicists...).

Various strategies.
One is a quick fix - a one year intensive course, industry led, sitting between college and university, to give people IT qualifications that will let them walk into a job).
Two: broaden pipeline. Not just more pupils in Computing courses but getting more Computing teachers in schools too.
Three: make sure courses reflect the new high end IT skills needed by industry (not so much network and technical support; more ”proper programming”).
Four: national campaign to raise profile of and educate public in what current IT industry is really like.

Tough challenges; not least because of rapid change in the sector.

We need to do everything we can to make pupils, especially girls, to see IT as a valuable and interesting place to be.

Q & A
Q: What kind of jobs are out there that are of interest to girls.
A: there are no jobs that are gender specific! Programming, system design, project management... The image is the problem. At the moment there is an uptake in girls taking physics perhaps because of the Brian Cox effect. has had similar effect in the USA for computing. In Scotland, majority of students studying law are now female thanks to a couple of TV programs featuring female lawyers.

Q: What form will the campaign take?
A: Early stages of discussion with BBC Scotland. Looking at people that could front campaign. Possible fly on the wall type documentary centred on IT company.

Q: Pool of industry people to come into school?
A: Hope to do this but there are many barriers that make this difficult. They are trying to set up a co-ordinated programme to do this. Could get people doing short videos, like TED talks! that we can show to children and parents. Can source this on YouTube with's stuff and Bring It On NI
Q: Poor image of Computing in local authorities. How do we tackle this?
A: Skills Investment people trying to get Computing positioned as a science along with Physics, Chemistry and Biology. Trying to get that message across to head teachers and government ministers.
Post Session
Check out report from Wood Commission

Location:Grosvenor Street,Edinburgh,United Kingdom