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/

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

“A Day in the Life” – Enspiral Dev Academy

So on Saturday I went along to the “A Day in the Life” that was being run by Enspiral Dev Academy. It was a day set up for people to experience what Dev Academy – “Join us for a chance to really feel what it’s like to be a boot at our nine-week programming academy. We will walk you through the paces so you get an honest taste of what cohort members learn, feel and become.”

The day started of with introductions, learning names and an outline of what to expect. We then were paired up for some ‘pairing’ (coding in pairs). I was paired with James and the first challenge was Javascript Racer. It was great doing coding in pairs as I wouldn’t have got very far by myself. This ended up taking us most of the day as I had very litle Javascript experience. James had a bit more and with some help from the teachers and coaches we got a working model.

In between our coding challenge there was sessions on web development, engineering empathy, optional yoga or heading out for a walk in the sun. The day really did give a good overview of what the 9 week Dev Academy boot camp is like.

There were a number of engineering empathy activities we did throughout the day and I gained a lot of insight from these. Firstly we paired up with someone and for 2 minutes answered the question ‘why I am here today?’. Our partner then feed that back to use (‘looped’ it). From this and then the journaling exercise we did later in the day a realisation came more into focus for me. A realisation that ever since I encountered technology (Mac computers) at university back in the early 90s, I have really enjoyed using it. And the more I have used technology the more I have enjoyed using it to solve problems. This has been a recurring theme throughout my working life – using technology to solve problems.

So, overall the day was a success – jointly created a (very basic) Javascript game and bought a number of things into focus for me.

If you are interested in programming or wondering whether you might like it and you have the chance to attend “A Day in the Life” I would highly recommended. Also, Enspiral Dev Academy have a few exciting projects in the pipeline, so keep an eye out on what they are up to.