Computer Technology Advanced 2018-19
 
Links:  Processing:    http://processing.org      
         Colors:     
https://www.w3schools.com/colors/colors_picker.asp
         Processing Book:
              http://cmuems.com/resources/getting_started_with_processing.pdf
 
Due Dates :  Month Calendar Page - due 26 Nov 2018 at 18:00


Calendar Project - 19 Nov 2018

Look at this sampe calendar page:

You already made a Calendar Page last class.
Now you should add LINKS to at least HALF of the days.
Each link must be sensibly connected to the date it is in,
for example a famous Birthday, the anniversary of a famous event,
an advertisement for an event that will occur in the future, etc.
Add some text in the day indicating what it is linked to.
Also add a couple interesting image - like the Santa animated .gif -
around the sides of the calendar.  Be sure that you have the
name of the month and the year at the top of the page -
and check that your calendar starts on the correct day of the week.

You have 3 class periods to complete this - due on Monday 26 Nov at 18:00.  Make sure that your page is in a FOLDER, and the folder
must be COMPRESSED, and then you upload the .zip file into Haiku.


Using DIVs - 16 Nov 2018

We are going to make a calendar.  
We will need a box for each day, covering one month.
Here is sample code for a few days:

  <div style="position:absolute;left:300px;top:50px;width:100px;height:100px;background:rgba(100,200,250,1)">1</div>
<div style="position:absolute;left:400px;top:50px;width:100px;height:100px;background:rgba(200,200,100,1)">2</div>
<div style="position:absolute;left:400px;top:150px;width:100px;height:100px;background:rgba(250,100,0,1)">9</div>


 

You should make an entire month today.  Choose any month in 2018 or 2019 - maybe the month of your birthday.
Make sure that the boxes fit together properly.  Finish the entire month today - you will need
to use it for what we are doing next class.  Notice that your chosen month probably
does not start on Sunday (or Monday), so the first div (for day 1) will probably
be somewhere in the middle of the screen.

You may find this color picker tool helpful: http://htmlcolorcodes.com/color-picker/


Sound Effects / Audacity Practice - 13-14 Nov 2018

Today and tomorrow, make an Aesop's Fable story with sound-effects.
-  download an Aesop's Fable audio track from
- cut out a single story, probably about 1.5 minutes
- save the single story
- find sound-effects (suggest http://www.findsounds.com/)
  The sound effects must fit sensibly with the story.
- Insert each sound-effect into the correct place in the story
   Add at least 5 sound-effects.
- Now ADD a musical background.  When you do this, make sure
   the background isn't too loud and not too quiet - it should be
   audible, but should not interfere with the spoken story
- SAVE your project frequently
- When finished, you must EXPORT your project as an audio file.
   The BEST format is .WAV, which works almost everywhere.
   If you CAN export .mp3, that is a good choice, too.
- Once your audio file is finished, you turn it in to Haiku
   You can just upload the audio output file - no need to compress it.


Sound Effects in Audio Books - 12 Nov 2018

We will use 
to edit a file like this one:

The file above is from this site:

We will split up the file, keeping a single story, and then add sound-effects like this example:

A good place to find and download sound-effects free is : 
You can find lots of sound-effects libraries on the web,
but you should NOT register and pay for them.

Sound Synthesizers - 8 Nov 2018

Here is an introductory video about Audioblocks:

Try out the Audioblocks sounds:

Unfortunately, Audioblocks is not free.  

Here are some free sound-effects sites:

Epic Wins:

There are lots of music/sound libraries on the web that allow free downloads.

== Practice ==
Try to find (and download) the following sounds:
-- a scary scream
-- a loud laugh
-- a siren
-- an animal sound
===========

Here are some music MAKING tools to try out.

Search for one that is easy to use and creates good results.

For Beginners - very simple

http://readonlymemories.com/

Play Drums from the Keyboard

Lots of Tools (find the best one)

Or find a good tool yourself - search for [drum sequencer online] or [music creator online] or something like that.

Try out various tools and try to make an interesting/exciting music loop.
Share it with your friends.

Starting Monday, we will be mixing some music using Audacity.
You should install Audacity on your laptop before class on Monday.

https://www.audacityteam.org/download/

Printing Funny Pictures - 6-7 Nov 2018

-- Today --
Investigate some of the tools on this page:
http://www.hongkiat.com/blog/25-websites-to-have-fun-with-your-photos/

If you use a face, it must be YOUR face or a famous person from Google Images.
You are NOT ALLOWED to use a photo of a friend or someone at FIS.

The pictures should not be offensive - rather, they should be funny or entertaining or amazing.

Make some funny pages, print them, put your name on the pages and hand them in to the teacher.
The teacher will post some of them on the walls in our classroom.

Try to bring a picture of your face to use.

== GOAL ==
Print 4 pictures (pages) using at least 2 DIFFERENT TOOLS.
Collect all 4 pages and turn them in to the teacher by the end of class on Wednesday.
On the back of each printed page, write your name and the name of the
web-site that you used to create the image.
All pages must be created by one of the web-sites listed on
- e.g., do not use Photoshop or Google Draw, etc.
All the pictures must be printed on a COLOR printer.
If you wish to work at home as well, that is of course permitted.

== Due Date = 
Wed 7 Nov before 15:10

Printing - Tips for Students
  • Use the Print Preview feature to see how a document will print. Only print when satisfied with the preview.

  • When printing PDFs, save the document to the desktop, then print. 

  • Print PowerPoint slides as "handouts" to print multiple slides per page. 

  • Email or bookmark website URLs rather than printing them. 

  • Scan reading materials to your computer, tablet or smartphone. 

  • Create online accounts in Library databases to save research and searches. 

  • When making changes or corrections to a document, only print pages containing corrections.

  • Do not resend a print job if it doesn’t immediately print. There may be other jobs ahead of yours in the queue or the printer may have run out of paper. ITS consultants can help.

  • Remember to log out of any programs and shut down the computer in a public computer lab or the Library to prevent others from using your accounts

Outdoors Project - 26-31 Oct 2018

Continue working on your Outdoors gif animations project.

Remember the project is DUE on 1 Nov at 18:00

Create a web-page that has an OUTDOOR theme.
The page should have decorations like trees, flowers, rocks, etc.

The page must also have lots of animals moving around, simultaneously.
The animals should all be .gif animations, so parts of their bodies are moving -
like legs are moving, wings are flapping, etc.  

There need to be at least 3 different .GIF animations.
That is enough,  but you should have several copies of each
running around on the screen.

You must also add some sound-effects - at least 3 sound effects.
You may also add background music if you wish.
The background music may "loop" forever if you wish, but the sound-effects
for individual animals should each stop after it runs once.
It might start again later, but not play forever.

The page should just keep running forever - after it starts.
To get a top grade, your page should have lots of animatls that
fit together - not random silly images.

More images are better than fewer - not one fly, but lots of flies.
Animals should move in a variety of directions, at various speeds.
At least 3 of the animals should use .transform = 'rotate...' or 
.transform = 'scale..' so that it turns in the correct directions 
when it moves. Most importantly - the animals must all move in 
a "loop" (not a circle), meaning that it moves somewhere, then moves 
back to where it started and then repeats over and over again.

Sounds and Outdoors - 25 Oct 2018

Download this .zip file, uncompress it, and open flyer.html in Komodo:


This project is due on Wed 31 Oct at 18:00

Moving with Rotation - 24 Oct 2018


We will do what the instructions say.

Animations with Javascript - 22 Oct 2018

You can download the entire folder here:
http://ibcomp.fis.edu/2018/comptech/animations.zip

Today you can put your .gif animations from last week
into a web-page.  

Animations - 18-19 Oct 2018

Spend 2 class periods on this practice assignment.

It's pretty easy to make your own "Smiley" GIF animation.

You may wish to GROUP some pieces, like the pieces of the face,

so they can be easily moved around together.

    RockingSmiley.gif          

You'll probably find it easier if you make it pretty big, like 200x200 pixels.

Now make your own smiley GIF animation.

Recommend using Google Draw for the drawings.

Start with a basic face and export/download it as a PNG image.

Then make a small change and save a second image.

Another small change, then save a third image.

It would be smart to NAME the images pic1, pic2, pic3, etc.

Then use this online tool for making the animated GIF.

The teacher will show how to use these tools to create a Smiley.

Then you can practice. Make a simple one quickly,

so you learn to do all the steps (there are many steps).

Then, if time permits, make another nicer one.

(1)  Make a Smiley, similar to the above.
       Use at least 6 frames.
       Upload your 6 frames to the Animated GIF tool.
       Then upload them again and REVERSE THE ORDER.
       Preview the result and download the .GIF animation file.
       Then open it and view it in a browser.

(2) Make a squashing word similar to the NEW animation above.
      But use a different word - at least 3 letters.
      Make the letters "squash" as they get to the bottom.
      Again use the Animated GIF tool to change your frames into a .gif animation.

(3) Make an animation of something that is rotating, growing and shrinking.            


Rube Goldberg Machine - 9-17 Oct 2018

Watch this video : https://www.youtube.com/watch?v=IMboI4cOAuQ 

Click here ==>  This is fun, but DON'T try to build this.

Rube Goldberg Machine Project  -  DUE 17 Oct 2018 at 18:00

Your assignment is to make a page similar to this one: 
http://ibcomp.fis.edu/275979/graphics/javascript/RubeHack/RubeHack.html

Below are a list of Rube Goldberg Machine ideas that turned
into projects that won a yearly contest.  You may select
one of these ideas, or make up your own, as you wish.

Build it Backward

Your assignment is to make a WEB-PAGE with a Rube Goldberg Machine.
There should be a [Start] button that starts a sequence of actions.
Each action will involve some object moving and touching another object -
then that will start the second object moving.

The best way to approach this is to start with one of the ideas below.
Make a web-page where that one single action happens.
THEN add the action that comes BEFORE that action, and triggers it to start.
Then add another action before that, etc.

Keep It Reasonably Simple - BUT INTERESTING!

You are not expected to create something as complex as the little
boy in the video. But your web-page version should have a picture
that moves and hits another picture, then it moves and hits another, etc.

You must use many Slide and setTimeout commands to create one
moving action after another.  You might also want to use VISIBILITY
to make objects appear and disappear.  You might want to change
the width or height to make an object grow or shrink.

Totally realistic actions are quite difficult.  For example, a hammer hitting
a nail should actually have the hammer rotating.  But you can keep it simple
by having the hammer just move down and up.

How Much is Enough

Let's say that the finished page should contain at least 10 actions.
(It might be fewer if one actions requires several slide commands).
That means that you add at least 2 actions per day.
And don't make them last too long - about 5 seconds maximum
for each action.

Here are the suggested topics - but feel free to do something else.
Yours will probably be longer than those described below.

2013 Hammer A Nail
2012 Inflate A Balloon and Pop It!
2011 Watering A Plant
2010 Dispense an Appropriate Amount of Hand Sanitizer into a Hand
2009 Replace an Incandescent Light Bulb with a More Energy Efficient
          Light Emitting Design
2008 Assemble a Hamburger
2007 Squeeze the Juice from an Orange
2006 Shred 5 Sheets of Paper
2005 Change Batteries and Turn on a 2-battery Flashlight
2004 Select, Mark and Cast an Election Ballot
2003 Select, Crush and Recycle and Empty Soft Drink Can
2002 Select, Raise and Wave a U.S. Flag
2001 Select, Clean and Peel an Apple
2000 Fill and Seal a Time Capsule with 20th Century Inventions
1999 Set a Golf Tee and Tee Up a Golf Ball
1998 Shut Off An Alarm Clock
1997 Insert and Then Play a CD Disc
1996 Put Coins in a Bank
1995 Turn on a Radio
1994 Make Cup of Coffee
1993 Screw a Light Bulb into a Socket
1992 Unlock a Combination Padlock
1991 Toast a Slice of Bread
1990 Put the Lid on a Ball Jar
1989 Sharpen a Pencil
1988 Adhere a Stamp to a Letter
1987 Put Toothpaste on a Toothbrush

== Due Date : Wed 17 Oct at 18:00 ==

When you turn in your Rube-Goldberg page,
you should COMPRESS the folder and upload
it in Haiku.


Sliding and Visibility - 8 Oct 2018

Look at this web-page:

Then download this .zip file, uncompress it,
open the pinball.html file in Komodo,
and then do the practice described on the page.


Trippin' 'round the World - 25 Sep 2018

Today we will do some more practice Slide and SetTimeout.
Download world2018.zip and unpack it - you can view it here.

Then use Komodo and open the openmovequiz.html file.

- Browse the page and find out what is wrong with the [canadaChina] button.
  Change the Slide command so that the bird goes to the right country.

- For the CanadaChina trip, add a setTimeout command so that
   the bird also flies to China, waits, and then flies back to Canada

- Add another Button for a "round trip" from Canada to Australia to South Africa to Canada.

- Add a picture of a boat (a small boat) - you need to copy it into the World2018 folder

- Add a button for a BOAT trip from England to India.
   This must stay in the water, traveling around the south end of Africa
    and then back up to India.  You will need several Slide/SetTimeout commands
    to make sure the boat stays in the water.

- Add more Buttons and trips, as time permits.
   It's all good practice.


Sliding Around - 24 Sep 2018

We will look at this sample page:

The teacher will explain how the code works.

Then download the .zip archive, open the page in Komodo,
and do the practice exercises shown on the page.


Small Divs Project - 18 Sep 2018

You can start with this sample page:
   http://ibcomp.fis.edu/2018/comptech/Animals.html

- Change the big picture to a different picture.  Your picture 
   should have various objects/people/places that can be identified.
- Make BUTTONS that move a box over various objects.
   The box should change sizes (width/height) to match the object
   that it is marking - like the Lion and Giraffe buttons in the example
- Make DIVs (boxes) that appear when you click on an object.
   These boxes should have a transparent background color
   and should also display some text about the object -
   like the Butterfly and Elephant boxes in the example
- Make as many buttons and boxes as you can in the time you have.

This project is due on Friday 21 Sept at 18:00.

Turn it in to Haiku.  You should COMPRESS the folder containing
your work and upload it into the Haiku assignment.


Working with DIVs - 17 Sep 2018

Try this page:   http://ibcomp.fis.edu/2018/comptech/Animals.html
Click around and see what happens.

The Animals page uses BUTTONS and DIVS to identify specific animals.

(0) Open the Animals page.  Right-click and choose [View Page Source].
     Copy the HTML and JavaScript source code into a new page in Komodo.
     Then [File][Save As] ... Animals.html

(1) Add another BUTTON for another animal -
     the BUTTON should move the orange box on top of the animal

(2) Add another colored-div that appears on top of another animal.

(3) Change the buttons so that the orange box always
     changes size to match the animal correctly.

(4) Add an IF command like the following:

      if(this.style.backgroundColor == "")
      {  
          this.innerHTML = "<H1>ELEPHANT</H1>"
          this.style.backgroundColor = "rgba(255, 0, 0, 0.2)"  
      }
      else
      {  
          this.innerHTML = "";
          this.style.backgroundColor = "";
       }

      This belongs inside the elephantDiv.onclick function.

       Then the elephant box turns on and off when you click.

(5)  Make the Butterfly DIV turn on and off when you click.

(6)  Now add more clickable buttons and more clickable boxes.
      Do as many animals as you can in one class period.


More Clickable Stacks - 12-13 Sep 2018

Type the HTML from your page.
This should be review questions for a class, like math.
When you click, a question appears.
When you click again, an answer appears.
The teacher will demonstrate the easy way to do this.

If you did not succeed with typing in the clickable questions page,
you can download a copy here:
http://ibcomp.fis.edu/2018/comptech/clickQuestions.html 



Clickable Picture Stack - 11 Sep 2018


then follow the instructions above.

Clickable Pictures Web-page - 28-31 Aug 2018

== Project ==
Use Komodo to write an HTML page, with Javascript for clicking.
- The page should be a maximum of 1000px wide and 700px high
- There should be at lease 8 pictures
- The page should have a TOPIC (theme) and all the pictures are connected to this topic
- The pictures must touch each other without overlapping 
- The pictures should more or less fill the browser window (1000x700)
- The pictures should NOT all be the same size, but rather a variety of sizes
- Each picture is clickable (use JavaScript) and changes to another picture when clicked.  
- At least some of the pictures should be altered by using a graphics editor like ipiccy.com
- All pictures and the HTML page must be stored together inside a single folder
- When finished, you must COMPRESS the folder and upload it into Haiku


Position Absolute - 27 Aug 2018

This web-page demonstrates the use STYLE to control the position and size of images:

The teacher will explain how POSITION:ABSOLUTE and STYLE work,
as well as giving an assignment that is due on Friday.

Normal Web-page Editing - 24 Aug 2018

If we use a normal web-page editor, like Komodo, then we can write
HTML and store the page in a folder on the local hard-disk.
This has one significant advantage over online storage -
we can also store images in the local folder and load them
easily and quickly - much better than loading slowly from Google Drive.

Here is a web-page plus images all stored in a .zip archive:

== PRACTICE ==
  • download the funnyfaces.zip file.  Double-click to extract (unpack) it
  • open the index.html file and make sure it works properly
  • Use KOMODO to add two more pictures (actually 4 images) below the two faces -
    these should also start with 2 "funny" pictures and change when clicked
  • You need to copy/download your pictures into the SAME FOLDER (funnyfaces)
    with the web-page and the other 4 pictures.  Use file names that you can remember,
    so when you add commands in the web-page you write the correct file names.
    Notice that in the web-page, you just write the simple file name -
    no folder names and no web-server addresses
  • If you finish early, add more pictures.  It's all practice so that
    you become faster and you REMEMBER what you need to do.
Starting Monday, you will create a small project web-page, 
and then turn it in for a grade on Friday 31 Aug.

Using JavaScript for Mouse-Clicks - 22 Aug 2018

Here is a sample web-page with two "quizzes".
When you click on the disguised image, the original image appears: 

In each case, the original image was loaded into ipiccy.com,
then disguised, then moved to a web-server.  You can save your
images on Google Drive.

You should copy the code in the sample web-page.  Then:
- change the two sample pictures to other pictures that you made
- add 2 more pictures in a row beneath the other 2 images
- the 2 new images should also be disguised,
   and change to the originals when clicked.

You will need to add JavaScript functions for each new image. 
If you finish early, add a couple more images.

== HOMEWORK ==
Before our next class (Friday) you need to 
download and install KOMODO from:
https://www.activestate.com/komodo-ide/downloads/edit


Storing Your Own Images - 21 Aug 2018

Look at this sample web-page: https://html.house/edit/bleob6nv.html 

The dog was originally very cute and cuddly, but Mr Mulkey
downloaded the image, painted the eyes red, and added
black horns on top of the original ears.  Then he stored the
finished image on Google Drive.

Adding a custom picture - one that is not stored on a web-site -
involves several steps.  
  • Find an image that you want to modify
  • Open the image in ipiccy.com (or some other graphics editor that you like)
  • Make whatever changes you wish
  • Save the finished image on your computer, perhaps on the desktop
  • Upload your image to Google Drive (after you have logged in)
  • Right-click on the Google Drive image and choose [Share]
    Click on [Advanced]
    Click [Change] and choose [Public on the Web]
    Click [Save] and then [Done]
    Now your image can be shared inside an HTML Web-Page
  • Right click on the image file name and choose [Get Shareable Link]
    Copy this URL 
  • In your web-page, paste the URL into the src= part of an <img command.
  • Now, CHANGE the URL by removing "open" and replacing it with "uc".
    Now it will say "https://drive.google.com/uc?id=xxxxxxxxxxxxxxx..."
If you do all that correctly, the image should appear in your web-page.

Take the web-page that you made yesterday, and change each of the images in your page.
Add text to an image, or draw colorful shapes on it, make the image smaller (crop), re-color it, etc.
Try a variety of tools in ipiccy.  In each case, save the result and upload the result,
and then change the image address in your web-page to display the changed Google Drive image.

It's practice - do as many as you can in one period.
You are likely to make a couple mistakes - ask for help if something isn't working.


Starting HTML - 20 Aug 2018

Here is a sample HTML page: 


<!DOCTYPE html>
<html>

 <body>
  <h1>Clowns</h1>
    
  Here are some pictures of clowns.<br>
  We need to arrange them nicely.<br>
  <br>
    
  <img height=200 src="https://www.allanandfriends.com/img/allan-and-friends-studios-logo.png">

  <img height=200 width=348 src="https://www.allanandfriends.com/wp-content/uploads/2017/06/afs-clowns-cover-photo-6-976x600.jpg">

  <br>

  <img height=240 src="https://cdn.images.dailystar.co.uk/dynamic/1/photos/671000/620x/clowns-555886.jpg">  

  <img height=240 src="http://cuddlesandbilly.com/uploads/ckeditor/pictures/2/content_cuddlesandbilly.jpg">

 </body>
 
</html>


The teacher will explain how this works.  

Today you can use :  https://html.house/
The teacher will demonstrate how to use this.

= PRACTICE =
Copy the sample HTML code above into html.house.
Then make the following changes:
- Change one of the clown pictures to a different picture - no a clown.
  Did the size stay the same?
- Change the page to have 4 pictures that you used in your Word-Processing pictures page.
- Make your 4 pictures line up nicely, so they fit in a nice rectangle.
- Add 2 more pictures, one in each row so you have 2 rows of 3 pictures.
- Add one more row of 3 pictures.
If you finish early, add more pictures.  It's practice - the goal is to become fast
and productive and to remember what you did.


Finish your Pictures Page - 16 Aug 2018

Finish your pictures page, including at least 8 pictures and
with CITATION links to the original images, and then turn
in your page in Haiku.  If you used Google Docs, you need to
[Download to : PDF document], save this on your computer's hard-drive,
and then upload the PDF document into Haiku.  If you don't know
how to do those, or you experience problems, you need to ask for help.

If you finish early, you may read any of the articles (marked with pictures)
on the class web-site at : 
https://fiscomp.weebly.com/


Downloading Images - 15 Aug 2018

- Today's Assignment -
We will collect some pictures from Google Images - http://images.google.com 
and display them in a Word-Processing Document.

>> Read these notes about collecting images. 

Be sure to save your page often (at least once every 10 minutes).  
This assignment will be due next week - the specific date will appear in Haiku.

Daily Work - Computers Required - Bring Your Computer Every Day

Each student needs a computer for class every day  .. more ..
  
=== Homework ===
Read the following notes about this course.

Welcome to Comp Tech Advanced

Comp Tech Adv is an introduction to Computer Science, mostly involving creation of automated systems via programming or clever and effective use of computer tools.  .. more ..
~~~~  read this whenever time permits ~~~