ICT Computer Programming 11 / 12

Welcome to Computer Programming 11 /12 course web site!
This web site portal will be used extensively in this course in order to provide students with clear assignment and project details / helpful 
links and instructive tutorials. In addition to this web site, I will also be sharing digital course textbooks and project files via my cloud portal office 365 and One note. This course is intended to provide students with a comprehensive grounding in computer programming fundamentals. 

In addition, we will be gaining a broader perspective of the field of Computer Science including aspects of computation thinking, study of algorithms, develop a timeline of key computer technologies, languages and software.  In addition, we will also be creating programs that will be used to run on several output devices; Microbit processors and Lego robotic devices. 
Course syllabus (see attachment section at the bottom of this page) 

Block Three access code:
Grade site: schoology 
Please select sign up tab as a student and type in the access code below!

This week:  
  • Introduction to Java programming 
  • Fundamentals of Java / why Java? 
  • Introduction to text based coding / IDE net-beans
  • Quiz on JAVA fundamentals next Tuesday (in-class timed) 
# 7 - ALICE - JAVA animation (grade 11 course students only) 

In this next segment of the course, you will be moving away from the strictly text based JAVA coding used in the introduction. 
Although we don't want to forget any of the concepts introduced in the coding introduction, we are going to come at JAVA based coding from another perspective - "drag and drop" tile created animations. This follow's the swirl approach to teaching JAVA based coding that we outlined in class. 

Part I - Introduce yourself to the software and create your very first "scene" (headphones recommended) 
Please watch at least FOUR of the "how to videos" to learn about the structure of ALICE - 
Create your first "Alice in Wonderland" scene in Alice 
Please follow this PDF link for more information

Part II - Create your first ALICE based program - "Houston we have a Problem"...
In this next segment, you are asked to now create a Robot scene using ALICE 
Please follow these detailed instructions which show you how to get started! 
You may modify this project to make it your own, however it is suggested you follow 
the general step by step approach! 

# 6 - Java Programming fundamentals 

In this next segment of the course we will be learning about the fundamental aspects of Java based coding. We will be approaching Java from a collection of vantage points in order to learn the basics of this essential programming language. In other words, many themes, vocabulary and programming conventions will appear numerous times so please don't stress if you don't grasp it all the first time round. I like to call this method of programming instruction the "swirl" method; circling around the same concepts with a gradually faster rotation as you gain skills and insights. 

This unit will proceed in the following format: 

Part I - Basic JAVA coding introduction 
Part II - A collection of  SEVEN basic subprograms that you will code in a text based format (using Net-beans or notepad) - see scanned documents. 
Part III - Grade 11's will be working with Alice to create a series of Java connected animations whereas the Grade 12's will be working with a more advanced coding unit (depending on the skill level) 

Part I A - Basic introductory skills with JAVA (Fri. Dec 15th)
First Java scripting introduction - Using this time tested approach in Code Academy complete ONLY the first intro modules here. This introduction covers some of the KEY terms and methods for creating executable programs. Please pay attention to the way that Java code is entered as this will prove essential later in the unit. 

Part I B - Cheat Sheet (Fri. Dec 15th)
If you're done this early, then start creating your own coding "cheat sheet" as a way of keeping track of the key ways that Java works. For example, what naming conventions do you use when saving a Java file? What is a method / a class / a compiler etc...
Basic syntax (Objects / classes / variables / strings....) - please be sure you have a good understanding of the information on this particular page for your quiz next TUESDAY.  
(*) Note: there will be a quiz on some aspects of the above links shortly. More details to follow.  

Part II - Creating a collection of introductory programs using Net beans IDE Monday. Dec 18 th) 
In this next introductory segment you will be learning how to create some basic text based programs using the compiler Net Beans. 
Section A
Please follow these steps in order to create your very first executable Java program using NETBEANS:  "Hello World" . 
Section B
Now that you have completed this, you will turn to creating a portfolio of introductory text based executable programs using the same input format as the first demo (Hello world).

These intro activities can be found in: 
Student resources / Computer programming 11 / 12 / Learn Java the Hard Way 
PDF attachment "Learn Java the Hard Way.pdf"  (bottom of this page) 
There are a collection of EIGHT intro text based programs to create that cover the essential basics of Java coding (also find assignment at the bottom of this page in attachment section as a PDF)

# 5 - Scratch - (4) Video games in total- Introduction to drag and drop coding 
December 6th - Wednesday - video game day - you must have a game or you will get "o".  
In our next course segment, we will be exploring the world of "drag and drop" programming, first pioneered by computer scientists at the Massachusetts institute of technology (MIT). This fun approach to coding allows you to learn real programming while eliminating syntax coding errors that cause many students to give up on computer science. By simply dragging and dropping the puzzle pieces together you create a series of commands for the "sprites" to execute. These commands can actually be quite sophisticated. 

This approach to coding has now been widely adopted and we will incorporate some of this approach into our upcoming unit on JAVA
We will explore the drag and drop approach within the context of video game design!  
Please click on this link to go to the instruction and lesson sequence page! 
Have fun! 
Please hand in each of the projects into the drop box folders under the student resources area "R: / ". 
As a culmination to this unit, you are asked to create a game of your own. The class will be both playing and rating this game based upon a collection of criteria (we'll review this beforehand). 

# 4 FTP file transfer / hosting your project using a free web hosting service
To Host your newly minted web site for free please go to link below and select:
Other "free" hosting sites are located on this link. However, I have not tested any of these other than "000WEBHOST".
(*) Note: you do not need to provide any personal information. If you need to use an email account I would suggest creating a "dummy account" for this purpose as I'm sure you don't want any spam mail! 
Example of a folder set up with corresponding links 
Please set up your files this way (home page MUST BE titled index.html)

When you have successfully uploaded your project to the web, then please review it and then copy and paste the URL into the link here

Assignment # 3 - Create your own web site
A modern text editor - install Brackets

Part I - create your web site structure
In this first segment you will be doing the following: 
  • Create a project folder 
  • Create an HTML file (index.html) - with the basic structure elements copy and pasted
  • Create a CSS style sheet (stylesheet.css) - with a basic structure copy and pasted
  • Decide on a web site project idea - what is your site going to be about?  
  • Decide on a layout for web site and colour scheme
  • Add in a navigation bar (either an "inline" style tag" or you can parse it out between .html /  .css and possibly .js (see examples) 
In our next course segment, we will start scripting our own web site. Although the focus of your site is on the coding piece, we also need to pay attention to layout design AND generating interesting and insightful content. At the conclusion of this unit, your web sites will be "live" out on the web so please no personal information or phone numbers. As well, this web site will be your web programming "calling card" so try to make it as incredible as possible.

Web site criteria
need a home page (index.html) AND four correctly linked sub pages accessible from a navigation bar
Your pages should be coded in HTML (.html) AND also use a separate CSS style sheet (.css) - please reference this from the html header section 
each page should have a navigation bar / at least one image / effective fonts and colour scheme / a table / playable video / some sort of interactive features.

Suggested subjects of your site: a restaurant / a fashion or photography site / a sports related web site / travel destinations / inspirational quotes or poetry / trends in technology / an area of computer science such as Artificial intelligence or driver-less car technology. (Please no gaming web sites for this project). 

Please read these sections before you actually start coding: CSS introduction / CSS syntax explained / 3 types of CSS style sheets

Step one
Open up a text editor (programs / accessories / notepad) OR Brackets (installation in the lab pending) 
Create a folder titled web site project (store ALL your project assets in here) 
Create a notepad page titled "index.html" (please note that you MUST change the file type manually from .txt to .html) See this example
(*) Grade 12's Also please set up a page titled .js (for Java scripts) 

Part II - Build out the project content and functionality

Step two 
Read through the following links to begin:
Step three
Copy and past the HTML page structure and then create an interesting navigation bar. You may script your own or else choose one off of these links. (Please select the navigation bar code from this link and paste it into your text editor OR Try these beautiful navigation bar designs that have great response - more advanced (*) Note: you must have a .html / .css and .js files in order to fully enjoy the full responsive qualities of these navigation bars. 

Next, I suggest that you write SOME original 
site content and then perhaps copy and paste some from the web (copied content should comprise no more than 20 % of your site. (please be sure to provide credit to the original content creator if possible) If needed you might add a separate page for relevant 3rd party web sites and content. You may include pictures and videos and whatever else is both interesting and relevant to your web site. 

Step four

Once you have set up your web site structure (html / css / js / navigation bar) AND you have added a link in the header section indicating that the web site browser should be looking for an external style sheet  e.g.. <link rel="stylesheet" type="text/css" href="styles.css">

Step five 

Now you will start constructing your web site. 
Make 4 copies (or the number of sub pages of your html page) and then rename them to match the title given then on the navigation bar  Then be sure to reference them per the example below. 

Now you can begin work on your (.css) style sheet setting out your font types / colours  and other design features. As well, you can begin inserting exciting content to your .html pages. Every time you want to see your progress just open your  page in Chrome to see your web site coming together. 
Once these projects are finished we will look to host them on the web for........FREE :) 
Have fun with this project! 

Web site project extra resources section (will add extra resources when required)
Optional project 'add-ons' - please choose three:  

Part III - Web site - practice adding / modifying java scripts OR you can use CODE PEN for this

Please load up the HTML text editor template located in the attachment section of this web site. Please add in each of the script code snippets ONE at a time from this web site.  Please modify each of these as you add them to this web site
You will be adding the following Java script functions to your HTML document: 
  • an alert box 
  • showing date and time when the page loads 
  • animating the background colour 
  • Adding text in java script 
  • Adding a fillable input form
  • java-script form linked to a specific data base 
  • A scroll banner 
You may either add a specific java script reference page OR you can add in Java script "in line" scripts to an html page. 

If you are going to construct a specific Java script page then be sure that you have create a page with the document type "mywebpage.js" 
As well, you will need to make a reference to this script page: 

<script src="scripts/main.js"></script>

Some changes might include changing the look and size of the forms or alter the colour sequence of the background gradient. 

Part III (*) If time try to write your own script(s) from scratch using what you have learned about Java Script! 

(*) Bonus section: Now that you have MODIFIED other people's scripts see if you can now WRITE ONE or two scripts of your own! 

Assignment # 2 - "Searching for Inspiration" Presentations:Sept 25 /26
Now that you have learned a bit about how web sites are coded and structured, we will take a pause in order to gain a better appreciation for the incredible body of design work that already exists out on the web. In this next course assignment you are tasked with locating the best (from your perspective) the best in web related design. 
Please do the following: 
1) On a piece of presentation software (PowerPoint etc.) you are tasked with locating the THREE best examples of web design that you can find on the web. (*) Note: please don't google "3 best web designs"....you can do better....lol 
Please take a look around at the following web sites as an initial starting point. Please try to take in some of the dynamic design elements from the perspective of a web content creator. What makes these sites stand out in terms of design and functionality? 
A real estate web site (note: clean look and use of spacing and matching between font colour and image choice) 

For your presentation, please include the following: 
the link to each of the home page (index.html) - show us the home page
"right click" on web site and select view source 
please do the following: 
indicate which coding languages were used in the construction of this site: e.g. HTML 5 / CSS / Javascript? 
3 other interesting aspects of the way it has been coded (e.g.: floating scroll bar / unusual navigation bar / built in slide show / great use of colours and dynamic fonts) 

From the first day of the course.....Course introduction assignment (intro) 
Read this "info graphic" on the history of computer programming and then create a challenging 7 question quiz about this info graphic using either google forms or even MS word. 

Assignment # 1 Part I - HTML and CSS   /  Introduction (Hand in cut off: Sept. 21 Thursday)  

(*) Note: Please go to the "sign up" section so that the web site can track YOUR particular progress. Otherwise you'll be starting at the beginning each time you log in. You are not required to give out personal information merely an email account of some kind! Please write down your password and login info. as you're the only person with this information! 

To start please read this comprehensive overview article!

In order to give us all a common background in HTML and CSS we will be completing a series of modules on the web site CodeAcademy.Please complete the following: 

  • three introductory modules of HTML 
  • three chapters of CSS (Cascade Style sheets)
  • (*) Java-script - if you are finished the other units early
When you have completed a section please "print screen" and then CTRL V in MS word. At the end of the third module,  submitting the MS WORD document with the screen shots as proof that you have completed all the sections.

Part II - W3 for schools 
Please practice and try the following exercises from this resource (W3 schools) 

Terry Linburg,
7 Sep 2017, 15:16
Terry Linburg,
11 Dec 2017, 10:39
Terry Linburg,
5 Sep 2017, 22:10