Next-level Web Design with jQuery – #cs4hschch

This session is a taster for interactive web development using jQuery. An understanding of HTML and CSS is required, but no experience with JavaScript or programming is necessary. Learn how to easily add a slideshow to your website, create an interactive image gallery, and dynamically load a set of images from Flickr. If you’ve ever wondered how jQuery and JavaScript fit into web design, this session is for you. The tools used are all freely available for use in your classroom.

Capture

What is jQuery?

  • It is a JavaScript library
  • Adds interactivity to websites
  • DOM manipulation (DOM = Document Object Model) – the structure of objects on your webpage

A web page is made of three main languages – HTML / CSS / JS. Good example using google.co.nz showing HTML only page, then with CSS then JS.

Workshop Mission: Fun with jQuery

Neocities: Getting online fast

jQuery Basics

What is this thing anyway?

jQuery vs JavaScript
  • JavaScript is a programming language.
  • jQuery is a library of code which is written in JavaScript.
Handwritten jQuery
  • Can be used to modify a single element
  • Or to modify a whole lot of elements in the same way
jQuery Plugins
  • A plugin is a pre-written piece of functionality.
  • Plugins need to be included in your site and then initialised.

Workshop Plan

  • Use a plugin to create a slideshow
  • Use a plugin to create an image gallery
  • Write some code to import images from Flickr
Backstretch
  • Allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

Lightbox

  • Popup image gallery
  • Provides a simple way to create a gallery with both thumbnails and full-view images.

Flickr Integration

  • Pulling in themed images
  • Flickr Public API
    Flickr provides a way to search their images from code.
  • This means we can get a list of information about a set of images automatically.
  • The API we will be using is the public feed found here.
  • API = Application Programme Interface (a way to get data in and out of an application)

JSON Data

  • Many APIs offered by web applications use JSON as a way of transferring data.
  • (JavaScript object notation)

My site – http://schuknight.neocities.org/

Advertisements

Programming 2D Games with JavaScript #cs4hschch

CodeAvengers have developed a new lessons in which students build 2D graphical games as they learn the computer programming concepts for 1.46-3.46. In this workshop, you will cover how to teach and assess 1.46 using the Code Avengers level 1 game development lessons. There may be an opportunity to move onto an overview of the level 2 and 3 game development courses. Teachers will get to build a couple of their own games during the session. These lessons are also suitable for digital media, or junior programming courses.

First task completed in Javascript – http://www.codeavengers.com/c/libbysk/first_2d_javascript_game

Had a play with the Flag tutorial and then in the nex session we did the Flag Challenge which was pretty fun.

Continued development of my Javascript game:

http://www.codeavengers.com/c/libbysk/second_game

Was a really interesting workshop. I enjoyed doing the tasks in Code Avengers. Being able to have a visual / graphical output is good. It will be interesting to see what the set of lessons will be like and if students will learn the concepts of variables, loops etc well.

CS and Programming at Yr 10 and below #cs4hschch

Australia, the UK, and other countries now have computer science in their curricula from Year 1, and the NZ government have recently recommended reviewing the positioning and content of digital technology within the New Zealand Curriculum in the “Nation of Curious Minds” report. Should programming be taught in our primary schools? In this session we will look at the benefits and challenges of teaching computer science and programming prior to year 11, including opportunities already available through CodeClub Aotearoa.

Starting CS & programming young – Caitlin Duncan (link to presentation)

  • Cons
    • can put students off if learning experience is negative
    • curriculum is very full!!
  • Pros
    • increase interest in the subject – more doing NCEA
    • get in before stereotypes close doors
    • assist future learning
  • Learning Aims
    • Students – enjoy, engage/ basic understanding of what CS & programming is / computational thinking skills – very important
    • Teachers – integrate / confidence
  • How do we achieve this?
    • Computer Science – CS Unplugged, what topics
    • Programming – how to teach, why to teach, combining with other subject, how do I do it, WHAT IS IT?!

Should your 8 year old learn coding?

CodeClub Aotearoa

CaptureLots of interest from people in industry to help with teaching / introducing coding / programming to students – all levels. CodeClub get lots of help.

CS4HS – Computer Science Level 1 Introduction

1.44 Demonstrate understanding of basic concepts from computer science

PDF of standard

Golden rule of interface design is consistency.

  • Example – setting alarm on device
    • User – appointment
    • Task – setting the exact time

To learn about an interface, get students to get parents to use the interface. Think about who the audience and what the task really is. Think aloud cognitive walk through.

Have students using personal examples, different interfaces.

HUMAN COMPUTER INTERACTION – CS Field Guide

Problems when programmers haven’t looked at issue from users point of view – door example – green light means is secure / locked, users think it open so can go through.
Teller at Westpac with typing in amounts – inconsistent ways to input into different places in the system

ALGORITHMS

http://www.csfieldguide.org.nz/Algorithms.html

Phone book example

What is an algorithms? A way to solve a problem, a method to solve a problem

AS – describing key characteristics and roles of algorithms, program and informal instructions
CS Field Guide – 2.1.1. ALGORITHMS, PROGRAMS AND INFORMAL INSTRUCTIONS

Ripping phone book in half, then half again – binary search. But data has to be sorted if using a binary search.

Algorithms have an associated cost. Different ways to measure cost – cost is often time.

Comparisons – weight example. Selection sort: 9 items – 8 comparisons.

What an algorithm is and what the cost is? Best way is comparison. Students do not need to write the program, they just need to run it (see guide – 2.3. SORTING ALGORITHMS). Important for students to do it with numerous different inputs / sizes – e.g. 1, 100, 1000 etc etc.

Quick sort – easier to do with your hands with objects. Weight example again – use one weight where you compare all others and put into two piles. 19 comparisons instead of 36 (selection sort) 2.3.4. QUICKSORT CS Field Guide

Demonstrate how an algorithm works, can put in photos or screenshots of scales on CS Field Guide. Good to use the programmes – python or scratch, can download from CS Field Guide.

Algorithms, interfaces and programming languages – 40 / 40 / 20 of how much students needs to do on each.

Programming – difference between compiling a programme and running a programme.

Computer Science 4 High Schools – welcome session

Purpose of CS4HS

  • vision for teaching
  • specific ideas for new standard
  • peer support
  • networking
  • refreshment

Environment

  • respectful safe environment
  • ow to work with what we’ve got
  • encourage and build each other up
  • presenters are volunteers
  • no question is too simple

Why CS4HS?

  • students don’t know what C is
  • employers can’t meet demand
  • best jobs – conditions, prospects
  • students need to find if its for them
  • not previously taught in schools

Teachers are the Lynchpin!!

Paper: Adoption of CS in NZ High Schools

NZACDITT Computing at School / Computer Science Teachers Assn – csta.acm.org

Binary Exercise – 10110 = 22 (was someones birthday!)

Student Story – Hayley van Waas @hayleyavw

Computer Science 4 High Schools – Beginners Talk

Beginners’ Talk – Tim Bell

Introduction for those who have not attended CS4HS before; we’ll go over what Computer Science is, why it is being taught in high school, and look at the big picture of how to get up to speed for teaching it. If you have attended CS4HS before, the C-block Foyer has room to chat with other teachers.

Made with Code – Erica

Has talked about girls in CS, how they are getting better results then boys in NCEA CS. And of course the shortage and therefore need to get women into CS & tech.

Experienced teachers very important in the teaching of CS in NZ schools!

Activity – THE PARITY MAGIC TRICK – http://www.csfieldguide.org.nz/ErrorControlCoding.html (student guide)

COMPLEXITY AND TRACTABILITY – http://www.csfieldguide.org.nz/ComplexityTractability.html

Skills needed by employers

  • logical thinking
  • communication
  • team work
  • critical, independent thinking

Impostor Syndrome

  • 70% people
  • particularly women
  • more success, more is reinforced
  • reluctant to say
  • actually – none of us know all bout CS!

“The greatest tragedy I know of is that so many young people never discover what they really want to do”.  Edna Kerr (quoted by Dale Carnegie)

NCEA Digital Technologies as preparation for studying Computer Science at University

Python – I have survived!

At the beginning of February I enrolled in the University of Canterbury’s first year paper – COCS121, Introduction to Programming (using Python). I decided to take the plunge as in our Year 12 Digital Technology class we are going to be teaching Python in Term 3 and I have never done any programming whatsoever!!

python logo

I decided I needed a course where I would have deadlines that had to be met. If I had just used an online resource like codeacademy, it would have been too easy to not to do it. Also, I like to interact with others and with the UC course we would have a tutor and tutorials plus able to use forums to talk with other students.

Uc Banner

Tim Bell and his Computer Science department at UC are working hard to support digital technologies teachers and they offered this course as an online option for teachers. (UC also paid the cost of the paper!) Twelve started at the beginning of the year and five of us made it to the final (written) exam.

It was really full on and hard work. I had thought it would be maybe 5 hours extra work a week but for me it was probably more like 10 to 15. With having no background in programming I had to find the time to watch all the lectures, do all the labs and complete all the assignments.

I think the only reason I was able to finish the course was all the support I got. From my partner (lifesaver!), from Jack Morgan our online tutor and from Tim Harford – my DT colleague at school and I also connected in with the UC Computer Chicks Club. We had online tutorials two times a week with Jack, who was great, patient and really good at helping me solve problems. Tim was fab, he sat with me most Tuesday mornings before school so I could bounce ideas and questions off him and talk about what was working and what wasn’t in the programs I was writing. I know I would not have been able to finish this course if I didn’t have all of this help.

Positives out of this (besides completing the course and getting a good grade) are that besides the stress I really enjoyed it. It was exciting and interesting being a student again, it has made me think about my teaching and the students in my class. It has made me think about having extrinsic motivations –  deadlines, grades etc – credits. However, it would be interesting if I was a student in an environment where learning was the final goal – not completing a course. In such an environment I may have made a program that I wanted to, rather then ones about words and word counts!

Even though I did enjoy the whole course and was really excited when I got things to work, I think it would have been better if the assessments were interesting. Or perhaps does there need to be a set formula when teaching the basics of programming? And when teaching such a large group? Something to think about and explore, particularly when we are just about to start teaching Y12 students at an all girls’ school.

Another thing that would have been good would have been working collaboratively. However, again with the set up of a first year uni paper, perahps this would be too hard, as assessments are individual so how can you be collaborative? Perhaps this is something that occurs later on in a university setting. I would like to think about how we could make programming collaborative in NCEA but again have the hurdle of assessments needs to be jumped over. Is anyway out there doing collaborative programming with NCEA assessments?

I have now ticked off part of one of my goals – Goal 3: learn Python so can teach effectively and engage students in this learning area – I have done the learning bit! I hope I can do the next part! Who else uses Python in NCEA for the programming / planning standards? How do you go about teaching it?

Now that I have had the time to process and reflect on the course (and get over illness following the course!) I can see that taking on this learning was a mammoth task while teaching full time! I recently joined a group on Google+ called Code Club for Teachers and was looking at the Code.org activities that people were completing and posted a question “How do you all find the time?”. I had a think about this yesterday and decided that I used up all my spare time (and energy) for the whole year in the first half of this year completing COCS 121! So, I’m going to take a breather for the rest of the year and not run head first into doing extra things – even if they look like lots of fun and could be useful!

So, what do you think about the questions I have formulated in this post – does there need to be set formula when teaching the basics of programming? Does it make it easier when teaching a large group? Can we introduce collaborative work in NCEA with programming? Are you getting students to work collaboratively? Are you teaching Python? How are you teaching it? Or are you are teaching another programming language? If so, what language and how is it going?