Computer Technology - Frankfurt International School - Dave_Mulkey@fis.edu - 2014-15
Next Due Date :  Final Project - due 15 or 16 June (1 week after assigned)

Last Day of Class - 22 June 2015

Find something fun to do - suggestions:

Mac Webcam Games

Lots of Music Tools

Exercise your brain with  www.gamesforthebrain.com

Competitive Typing      http://play.typeracer.com/

Something else?

Music Synthesizers - 18-19 June 2015

Here are a couple resources to introduce you to Electro-Acoustic music:
Wikipedia Electro-Acoustic

A 5 second loop

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

Qwerty Beats

With Pictures of Drums

Play Drums from the Keyboard

Lots of Tools (find the best one)

Or find it your self - search for [drum sequencer online] or [music creator online]
or something like that.

Videos about Future Tech - 17 June 2015

Music Hacker

MacTini

Cicret Smartphone Bracelet

Future Computers

Mac Webcam Games - try out some of these Web-Cam Controlled Games

= HOMEWORK =
Bring HEADPHONES to class next time and Monday,
as we will do some interesting experiments with MUSIC.

Pd 4 (section 06) - 16 June 2015

Finish your Wikipedia Rollover page and turn it in before 18:00 this evening.
No, it cannot be turned in late.  Turn in whatever you have, on time.

Pd 1 - 16 June 2015

Please try both of the following:

- Exercise your brain with  www.gamesforthebrain.com

- Practice typing - typing as fast as possible.
   Here is a web-site with typing practice games:
    http://games.sense-lang.org/ 

   Or take a test (or lessons) here:
    http://typingclub.com/typing-qwerty-en.html

   Or try competing against other human beings at:
    http://play.typeracer.com/

Final Project for Comp Tech #6 - 9 June 2015

Sample Final Project

Final Project Instructions

Due date for Comp Tech #6 is Tuesday 16 June at 18:00.

Final Project for Comp Tech #3 - 8 June 2015

Sample Final Project

Final Project Instructions

Due date for Comp Tech #3 is Monday 15 June at 18:00.

Photos with Text - 3 June 2015

== Adding Text to Photos ==

Today you can add TEXT to the photos in your photo page.
Start with the same photo page you made yesterday.
Then make the improvements described in this page.

*** Make-up Quiz ***
If you missed last week's quiz, you should do it today.
Download this page and open it in BlueGriffon.
Follow the instructions on the written quiz,
then upload your finished page into Haiku in Rollover Quiz.
You can start working on the photo+text page afterward.

Rollover Photo Menues - 2 June 2015

Look at this photo page, and do the Practice Exercises.
You need to download the original folder
by clicking on the link in the Instruction page.

Gradient Background - 29 May + 1 June 2015

Download this page (or copy the source code).
Then do the following practice exercises.
You may want to get some help and hints from:
Gradient Backgrounds Tutorial at W3C
Color Names List at W3C

=== Practice Exercises ==

- Add 5 more DIV boxes to make 3 rows and 3 columns
   Use lots of different colors and different gradient DIRECTIONS

- Add lots more DIV boxes, using other GRADIENT commands, like:
   - multiple colors
   - transparent colors
   - various angles
   - radial gradients
   - at the top of the page, make a wide, thin box
      with a RAINBOW gradient, like the top of the Gradient Tutorial page
   - anything else you can find in the Gradient tutorial

Rollover Quiz - Period 6 - 28 May 2015

Download this folder containing a web-page.

Follow the written instructions and fix the web-page.

Then upload the result (your web-page) into Haiku.

Rollover Quiz - Period 3 - 28 May 2015

Download this folder containing a web-page.

Follow the written instructions and fix the web-page.

Then upload the result (your web-page) into Haiku.

Rollover Effects with CSS - 27 May 2015

Read these notes and download this page,
then do the practice exercises at the bottom of the notes.

*** Quiz Tomorrow ***

Tomorrow's quiz will include at least one question from today's notes,
as well as questions from the practice pages from last week.

During the quiz you may use your computer and
any notes or web-sites that you wish.

Making a Button Ribbon - 22-26 May 2015

Read this sample page and do the practice exercises.

You can download the page's folder here.

Rollover Vocabulary Display - 21 May 2015

Open this page, try it out,
and then do the practice exercises.

You can download the page here.

Move Clickable Boxes - 20 May 2015

Make more clickable boxes on the Animals picture page.
Try to finish all the animals today.  Each box should
be clickable and should display a matching web-site.

JavaScript Clickable Boxes - 18-19 May 2015

Look at this sample page and do the practice exercises as described.

You can click here to download the page and the picture.

ASSIGNMENT - GIMP Pictures Page - 12-13 May 2015

Your GIMP assignment is to:
- create a web-page (like this example, but with 8 pictures)
- include 2 fantasy animals (mixtures of other animals)    -   see 4-5 May
- include 2 roll-over effects (Javascript) that change one picture to a similar one,
   where one picture was created by using a GIMP FILTER on the other picture -  see 7 May
- include 2 FACE pictures created by combining 2 or more faces with each other - see 8-11 May
- include 2 other interesting GIMP CREATIONS of your choice -
   these may be similar to the others on the page
- arrange the 8 pictures in an attractive format, perhaps 2 rows of 4 pictures each

DUE DATE = Mon 18 May at 18:00
You will need to:
-  put the web-page and all the pictures into a single folder
-  COMPRESS the folder
-  upload the .zip file into Haiku

Mixing Faces - 8-11 May 2015

We can make some very interesting faces by mixing 2 faces together:
For example, Albert Einstein and Marilyn Monroe, using semi-transparent layers.
To make this work well, the original faces must be the same size
and must be facing in the same direction.

    

Or you can cut pieces out of one face and paste it into the other:


This will be more effective if you cut very carefully
and then use the SMUDGE tool after pasting.
But once again, it works better if the original faces
are the same size and tilted/facing in the same direction.

With careful brush work, the faces can be very realistic and scary -
click here to see a SCARY example.

Spend today's class making interesting/scary/surprising faces.

GIMP Image Filters - 7 May 2015

Here is a "puzzle" page that was made with GIMP Image Filters.

To make a page like this:
- get a picture of a famous person (yes, use a PERSON)
   and save it inside your project folder
- use FILE/OPEN to load your image into GIMP
- Select an appropriate filter from the FILTER menu
- EXPORT the new, changed image back into the same folder
   using a different name, like CAMERON1.png and CAMERON2.png
- Create a web-page
- insert the CHANGED (mystery) image
   Give the image an ID, like <img  id=face  src="CAMERON2.png">
- Add JavaScript functions for .onmouseover and .onmouseout,
   like the commands shown here.

<script>
    face.onmouseover = function()
    {
       face.src = "CAMERON1.png"
    }

    face.onmouseout = function()
    { 
       face.src = "CAMERON2.png"
    }
</script>

Once you get this working, add another person.

Finish Fantasy Animal - 6 May 2015

(1) Finish your first fantasy animal.

(2) Use BlueGriffon to create a WEB PAGE and add a picture of your fantasy animal.
     Be sure that your web page and PNG file are saved together in the same folder.


(3) Make one more - try to make the second one better than the first.
     Then put both pictures into a web page.

Be sure that you learn how to do all the following in GIMP:

- cut out part of a picture using the Magic Scissors
- copy part of one picture and PASTE it into another picture
- use the BLUR tool (finger) after pasting a piece of a picture
- EXPORT a picture as a PNG file
- put a PNG picture into a WEB page

 Animal Composites - 4-5 May 2015

http://www.mhsphoto.org/uploads/7/9/5/7/7957824/1309131432.jpg   https://alyssaivall.files.wordpress.com/2013/02/messenger-pig-copy.jpg

These fantasy animals are made by CUTTING and PASTING pieces of one
picture into another.  In GIMP, you will want to use 2 tools to do this:

  1. a SELECTION tool, like the MAGIC SCISSORS or the MAGIC WAND
  2. the SMUDGE (finger) tools to smooth out the connections between pieces

The teacher will demonstrate these tools.  Then you can try to make your own WILD ANIMAL -
wild in the sense of "crazy".

Turn in Alice Project - 30 Apr 2015

Your Alice History Project is due today at 18:00.

You need to UPLOAD your project into Haiku.
The project is stored in one single .A2W file.
If you have trouble uploading the assignment,
ask for help.

==== HOMEWORK ====

Make sure that you have GIMP installed on your laptop
before coming to class next week.  We will be doing
some advanced GRAPHICS editing and you will not
be able to do the work without GIMP.
If you don't want to download GIMP, you can get
a USB Stick from the teacher and install GIMP from there.

Download GIMP here


Alice Notes

How to set a camera position with a Dummy Marker.

Alice History Project - 17-30 Apr 2015

Your assignment for the next two weeks is to make an ALICE program
that illustrates a famous historical event - an event that occured before 1915 -
e.g. before World War I .

Read a description of the assignment here.

The assignment is due on Thur 30 Apr at 18:00.

Make sure that you make progress each day.
If you get stuck, ask a question and get some help from the teacher.

If you need more or different objects, try the Alice Online Gallery:

http://www.alice.org/index.php?page=gallery/index

More Clever Alice Techniques - 15-16 Apr 2015

Here are some notes (alternative link) that explain how to do some more clever things in Alice:
- record your own sounds, like your voice, and insert it
   (you may want to work outside while recording your voice)
- move the camera around
- make a billboard (a vertical sign/wall/background)
- insert 3-dimensional text, like a big heading

Try doing all these techniques in your own "world".

Starting Monday, you will spend 2 weeks making your own
complex and interesting world in Alice, using a variety
of programming techniques.

First Person Worlds - 14 Apr 2015

Today we will focus on FIRST PERSON PLAYER VIEWPOINT
in simulations.

Watch this video that shows how use keyboard controls
in a first-person game.  Then try to add a "first-person"
character to your world with all the moving characters.
Whenever your "player" gets close to one of the other characters,
the character should SAY something.

Using Events for Control -13 Apr 2015

The teacher will show how to use LOOPS to make characters
move around, over and over again, with commands like these:

  world.my first method ( ) 
    No variables
       Do together
       Loop infinity times times
       boar move forward 1 meter
  boar turn left 0.25 revolutions
  Loop infinity times times
       bluebird move forward 1 meter duration = 2 seconds
  bluebird turn left 0.5 revolutions
  bluebird move forward 1 meter
  bluebird turn right 0.5 revolutions
  Loop infinity times times
       bunny move up 1 meter
  bunny move down 1 meter
  bunny turn left 0 revolutions duration = 2 seconds
  1. Now make a world with lots of characters moving around
    in various patterns.  Try to make sure the characters do
    not disappear off the screen. 
  2. Watch this video that shows how use keyboard controls
    in a first-person game.  Then try to add a "first-person"
    character to your world with all the moving characters.
  3. We will continue this assignment tomorrow, so you
    don't need to "finish" it in one period.

Alice Quiz - 26-27 Mar 2015

Movement in Alice - 25 Mar 2015

Use whichever world you wish - maybe your OWN WORLD
that you made a couple days ago.  Then practice
using the following commands:
- .move
- .turn
- .roll
- LOOP (bottom of screen)

Try making the following actions:
#1  make a person or animal jump (move upward)
      then spin around 360 degrees
      then fall back down to the ground
      repeat this 3 times by using LOOP

#2  make an object move 5 meters left,
     then move back 5 meters right,
     and repeat this 4 times by using LOOP

#3  Put #1 and #2 together inside a [doTogether] construct
      Then they should happen simultaneously,
       both objects moving at the same time

#4  Add one more moving object into the [doTogether]

=================================

*** You will have a QUIZ tomorrow, using Alice ***
*** You will need to add commands to a world ***
*** and then show the result to the teacher     ***

===================================

Methods in Alice - 24 Mar 2015

Read the following notes. 
Watch the tutorial and do the exercises at the end of the notes.

Methods with the - Bunny and the Phone

Making Your Own World - 20-23 Mar 2014

Read the following and do the practice listed at the end.
https://dl.dropboxusercontent.com/u/275979/compTech/alice/YourWorld/index.html

Starting Alice - 19 Mar 2015

The teacher will briefly inroduce the program. 
Then read this brief introduction and do the exercises listed.

Finish Your Project - 18 Mar 2015

#1 - Finish Your Project
       
Today you need to ADD YOUR LINK
        to this Google Docs page.  Be sure
        to label your link with the names
        of the members of your group.

#2 - Install Alice

We will be exploring ALICE, a programming system for creating 3D graphics simulations.
The teacher will give a brief introduction.

You will need to install Alice.  You can download it from:
http://www.alice.org/index.php?page=downloads/download_alice2.4
Make sure you are using version 2.4 - you do not want version 3.
It is a pretty large download, so you probably want to copy it
from a USB stick in class.  It is pretty easy to install - just copy the
Alice.dmg file from the USB stick onto your desktop and then run it.
Be sure you have Alice installed when you come to class tomorrow.

Continue on your Group Project - 16-17 Mar 2015

If you have questions, now is a good time to ask.

Continue on your Group Project - 13 Mar 2015

Continue - the finished project is due next Wednesday.

Continue - or have some fun - 12 Mar 2015

If you need a break from your group project - and you think
you can afford taking some time off - try :

Continue with Group Project - 10-11 Mar 2015

Continue working on your group project.

Continue on Step 2 and Think About Steps 3 & 4 - 9 Mar 2015

STEP 3 - Implementation

Thinking ahead, you need to create an EXAMPLE of using your proposed system.
If you can make an actual product, like a web-site, that will be fine.
But you may just want to make a PROTOTYPE - that is a clearly
presented example of HOW a system COULD function.  That probably
includes pictures and descriptions, like the following:

    Student Check-in / Check-out Utility

STEP 4 - User Instructions

The User Instructions tell the DETAILS of what users must
do and when they must do it.  Again, PICTURES are very helpful -
like this:

   Finding a Book in the Library Database

Or you might find it easier to make a PowerPoint presentation:

   How to make a Powerpoint Presentation

Move on to Step 2 = Suggestions+Design - 6 Mar 2015

You should have pretty well finished your PROPOSAL (step 1).

Time to be moving along to Step 2 = DESIGN.

Eventually your document will look something like this -
after you clean up everything and add some formatting and illustrations,
but you can do that later.  No need to make everything
pretty right at the beginning.

Please write the NAMES of your GROUP MEMBERS
at the top of your shared document.

Continue Group Project - 4-5 Mar 2015

Continue discussing your PROPOSAL - e.g. choosing and describing
a Problem/Task that needs an improved computer system.

Group Development

You are no practicing and LEARNING about work habits and techniques
that function well in a group setting.  This is not the same as
what you do when you are working alone.

The first issue is COLLABORATION - that means several people
working together to produce one single product. 

Right now, you are writing a PROPOSAL.  One approach is to
share the discussion, but have one single person "write it up".
There is nothing wrong with that concept.  But if you do it
the normal way, then the document/notes will be stored
inside one person's computer.  Then if that person gets sick
and does not attend school, the rest of the group is "stuck".
It is MUCH BETTER to put your notes/proposal in a Google Docs
document and share it with the other members of the group.
This time you want to share it with EDITING RIGHTS, but only
share it with a few people. 

In the real world, like where your parents work, there are many
groups working and many parts of a project.  The overall progress
must be managed by a DIRECTOR (like a teacher).  That means
this DIRECTOR wants to be able to READ the development documents,
whenever they wish.  In our case (inside classroom), you need to
SHARE your development document with the teacher.

We can discuss whether it is appropriate to give the teacher
editing rights or whether he only needs read-only rights.

In any case, you should make a DEVELOPMENT DOCUMENT today,
in Google Docs, and share it with the other members of the group
and share it with the teacher.  At the beginning, you will have
very little in your document.  Over the next two weeks, you will
gradually add more and more ideas.

In this group-development situation, it is unusual for the teacher/director
to award "grades" at specific times.  However, he might provide
FEEDBACK at various times.  What is the best way to organize
this feedback?  Haiku?  Email?  Notes scribbled on a sheet of paper?
Facebook? (NO, NOT FACEBOOK).

A NEW Information System - 3 Mar 2015

Today's Tasks

  1. Read the notes below
  2. Form a GROUP of 3 people (not a different number)
  3. Talk about possible PROBLEMS you might want to attack
  4. Sometime today, upload your TOOLS NOTES into Haiku

Next class, you will need to FINALIZE your choice of a PROBLEM/TOPIC/TASK/NEED.
Think about situations when you NEEDED SOME INFORMATION but you
HAD TROUBLE FINDING IT. 

Looking ahead, we will work on these PROBLEM-SOLUTION-SYSTEMS
until Wed 18 March, when you will submit ALL 4 STAGES of your SYSTEM -
   (1)  PROPOSAL - identify a need
   (2)  DESIGN - suggested solution
   (3)  IMPLEMENTATION - creating the solution system
   (4)  USER DOCUMENTATION - documenting how to use the system

In between, you will submit FIRST DRAFTS of each STAGE in the process.

=====================================================

Notes about School Information Systems

FIS has numerous information systems in current use.  For example:

That is a quick list, written in 10 minutes by Mr Mulkey.  There is probably
something missing still.

This is TOO MUCH INFORMATION (TMI).  Even worse, it is scattered 
all over the place, with no particular guidelines or organization.  
It is often unreliable - like a recent publication about "important dates" 
that contained errors and missed out some very important dates.  
It is difficult for some parents (and students) to use as it is almost all in English
and not all parents can read English well.  And what are new students supposed to do?

If all this information was hitting you in the face, like water from
a fire-hose, you might have a chance.  But too often the information
is just sitting there, quiet and invisible, in a web-site or on a shelf.

There must be a better way to organize all this information,
to make it more easily accessible, easier to understand, and more reliable.

With 36 students in Computer Technology classes, there must be
something we can do to help our peers to find their way around
this information jungle.  We need to view this problem from ABOVE -
the META LEVEL.

IT and Computer Systems are created (or modified) to meet specific NEEDS.
For example, the counselors NEED to collect course requests for next year.
They are using pieces of paper to do this.  That has some advantages
and some disadvantages over using a computer system.  As long as the
counselors and students (and parents and teachers) are satisfied with the
results, then the paper is fine.  But in the BACKGROUND, what we don't see
is that the counselors take these pieces of paper and type the course choices
into a computer system (Veracross).  Now we COULD have the students do this
directly, but there are numerous technical and reliability issues connected
with that solution, so this TASK is going to remain PAPER-BASED for the
foreseeable future.

Working in a Group

Working in a group to solve a single problem is a complex endeavor.
So we will practice this and "learn by doing".

You will need 3 people in your group.  Before proceeding further,
choose partners and form a group (of 3 people).

Needs Analysis

Your assignment for the next 2 weeks is to think of a task in our school -
a REAL TASK - that is either NOT done with a computer system,
or done poorly with a computer system. This must be a task that
students or teachers actually need to do at FIS.  You will DESIGN,
TEST, DOCUMENT and DEMONSTRATE a usable SYSTEM
for solving this problem.

- Problem/Need - outline the task (explain it)
- Current Solution - outline how the task is currently done
- Desired Improvement - outline WHY improvement is needed
- Suggested Solution - suggest how a computer system
          could be created or improved to meet this need

For example - the Daily Bulletin

- Problem/Need - collecting and distributing announcements each day
- Current solution - email to teachers, teachers read the Bulletin in homeroom
- Improvement - the bulletin is too boring, students don't listen, teachers forget to read it
- Suggestion - email the bulletin to all students AND display it on the big TV screens
                             in the entrance and in the Atrium

But before making the suggestion, think a little bit about what is easy and possible.
For example, don't suggest : set up a huge screen at the front of the school
and display the bulletin there.  This solution might be too expensive and not very effective.

Write a Proposal

The ideas shown above are called a PROPOSAL.  They focus on a PROBLEM or NEED.
They are NOT focused on the SOLUTION, although you do need to THINK AHEAD
and frame the PROPOSAL in a way that it might actually be solvable.

Design a Solution

  ....  this is the next step - you need to write the PROPOSAL first before proceeding ...
   ...  this will include identifying SPECIFIC TOOLS that can or should be used ...

Implement the Solution

  ...  Don't start this until you have DESIGNED the solution ....
  ...  although you might find it useful to make PROTOTYPES ...

Document the Implementation and Solution - User Instructions

  ...  the last step is to write CLEAR INSTRUCTIONS telling users ...
   ...  what they need to do, how to do it, and when (and maybe why) ...

Continuing Our Web Investigation - 2 Mar 2015

Continue your investigation of http://cooltoolsforschools.wikispaces.com/.

You need to transfer your investigation notes (from last class) to a publicly available document. 
There are several possibilities:

(1) a Google Docs document that is SHARED with everyone (the entire world)

(2) a Google Sites web-page

(3) any other web-page that is publicly accessible (don't use Facebook)

(4) a publicly accessible Wiki, like Wikispaces

(5) a Blog, maybe at www.blogspot.com

.... do NOT use a Facebook account for this information page ...

Once you have created your publicly available page, you need to
upload the web-address into Haiku.  In case you change the
web-address, or you made a mistake, just upload a new address.
The teacher will copy your web-links into this page:

    http://fiscomp.weebly.com/best-tools.html

Then you can continue your investigation of good web-tools,
and continue adding more notes to your page.

Investigating the Web - New Web-sites - 17-18 Feb 2015

The World-Wide-Web is a very big "place".  It is full of interesting web-sites, 
useful tools and obscure information.  It's easy to "get lost" in all this stuff.
Unfortunately, it is far too easy to waste time in the Web.

But you don't need to waste time watching YouTube videos, chatting and 
reading Facebook.  There are lots of OTHER enjoyable things to do,
many of which actually accomplish USEFUL WORK.

Here is a list of interesting and useful web-sites that could be used
to accomplish useful work:

   Cool Tools for Schools : http://cooltoolsforschools.wikispaces.com/  

Today you should spend the period INVESTIGATING some of these web-sites.
INVESTIGATING means that you look at what a site does and then ask
some intelligent questions and try to find answers for your questions.
Typical questions are:

Find at least one web-site that is particularly interesting and useful, but one that is "new"
to you and your peers.  DON'T investigate Facebook or Wikipedia or Google
or YouTube, or any other web-sites that you already use on a regular basis.
Find something NEW!  Be adventurous!

Finish Scratch Game and Turn it In - 16 Feb 2015

Your Scratch game is DUE TODAY BEFORE 20:00.
To turn it in, find the .SB2 file that contains your program
and upload it into Haiku.  You do not need to compress the file.

Using Broadcasts for Multiple Levels - 9-16 Feb 2015

The following game : http://scratch.mit.edu/projects/47049962/ 
demonstrates the use of BROADCASTS + hide + show
to create a multi-level game or story.  By using broadcasts,
we can set up a SEQUENCE of events/actions that
follow one after the other.

Read these notes about this assignment.

Pong Game - Bouncing Ball - 5-6 Feb 2015

Monday you will start making your own game as a project.
It will be due the following week.

TODAY - in Scratch, click on [All Tips] in the top right corner.
Then do the [Create a Pong Game] tutorial.
  There are lots
of clever techniques that may be useful next week.

Various Useful Techniques - 4 Feb 2015

The following video shows how to construct a Car Racing game.
    http://www.teach-ict.net/ks3/year7/game_generation/rob_easton/cars/Car1.swf

The video lasts about 15 minutes.  You probably want to watch a couple
minutes, then do what you saw in the video.  To pause the video,
you must right-click and click on PLAY to turn it off.  To start again,
right-click and then click PLAY again.

The game itself is not important (although fun), but the techniques used
to construct it are quite useful.  Hopefully you will remember most
of what you did while building the game.  Go ahead and do slightly
different things if you wish.

Since this ends up being a 2-player game, you might want to
do this together with a partner - you will probably learn more
and faster that way.

Using Variables - 3 Feb 2015

Here is a program that uses a VARIABLE to add up points when the cat gets a cookie.

  catCookies.sb

Add more objects that give the cat various amounts of points -
like a CAKE that's worth 50 points, a FISH that scores 100 points. 
Then add a killer object (maybe a MONSTER) that sets the score back to zero
whenever it touches the cat.  Make all the objects "clickable" and make
them fall from the top of the screen to the bottom.

You should make some objects move faster than others.

You can put lots and lots of objects at the top of the screen,
because you can put some objects in front of others.
Make some of the objects "friendly" - they earn points -
while others are "enemies" - they lose points.

And you can add some sound effects, too.

A Simple Scratch Game - 30 Jan-2 Feb 2015

We will make a very simple game, using the following techniques:
- using the keyboard to move the cat
- detecting when the cat touches another Sprite
- sending messages from one Sprite to another

Here is an example simple game : SimpleGame

Here are the commands for this game:



 

Practice :  Make your own simple game, as follows -

Moving in Patterns - 29 Jan 2015

HINTS

- don't use Safari, you probably cannot save anything from Safari
   STOP using Safari - it is old and broken!
- try downloading the offline editor



TODAY -
Continue with the same notes from yesterday.

1.  Do the CAT-MOUSE-PIZZA program at the end of the notes

2.  Add more SPRITE objects moving in interesting patterns

3.  If you need more practice, go to the Scratch Web-site ,
     click on [All Tips] at the top right, and do the example
     called [Animate Your Name].

Scratch Programming - 28 Jan 2015

We have finished with Math documents.
If you have not done so yet, make sure you PRINT and TURN in:
- math problem in a blue box (one of these sample problems)
- tesselation (one of these big pattern pages)

TODAY - SCRATCH Programming

Read these notes about starting Scratch programming.

Then use the system on this page to write some programs.

Practice Typing / Drawing Math - 26-27 Jan 2015

Practice Word-Processing mathematical documents.
Here are some sample problems.  Choose ONE of the BLUE problems
and draw it exactly the same (including the blue background).
including using the equation editor to write the math formulae.
Be sure to type all the "funny symbols" too, like the 3 dots.

When you are finished, PRINT your math problem (in color)
and turn it in to the teacher.  Be sure your NAME is at
the top of the page.

If you don't finish during class, you may finish at home
and turn in the printed product on Wednesday.

*** If you did NOT print out your TESSELATION on Friday ***
*** be sure to print it today and turn it in.                          ***

Tesselations - 23 Jan 2015

Homework
1.  When drawing shapes, the program shows the MEASUREMENTS of the shape.
      Find out how to change these UNITS from INCHES to CENTIMETERS and back again
2.  Find out how to draw an REGULAR OCTAGON (8 sided STOP SIGN, equal sides)
3.  
Look at these big patterns - called TESSELATIONS. 
     Figure out how to draw these patterns QUICKLY and EXACTLY.

Finish drawing ONE of the tesselations. 
Print the result on the ATRIUM COLOR printer.
Be sure to include your name, a title and the date in the HEADER.
Show the result to the teacher, then make any necessary improvements.

Solving Quadratic Equations, with Graph - 22 Jan 2015

3D Shapes in MS-Word

Draw the 3D shapes and formulas (left side).
You do not need to type the text on the right side.
DO put your shapes and formulas into a TABLE.

Typing Technical Documents - 20-21 Jan 2015

Notes about Typing Technical Documents

Sliding Trips on a Map - 13-19 Jan 2015

Look at this example web-page of our school.

It uses several SLIDE and setTimeout commands for each trip.
Each command makes a small piece of the trip.
This way it can carefully follow a path that is not perfectly straight.

You can do the same thing on top of a map of a city.

Assignment - due Mon 19 Jan at 15:30

Create a web-page showing the map of a city - any city you like.
There should be many buttons.  Each time a button is pressed
a "guide" (a car or person or animal) moves from a specific place
to another specific place, following an actual path along streets.
For example, if you were doing Frankfurt, you could have trips like:
- walking from the Hauptwache to Roemer Platz
- driving from Hauptbahnhof to the Sheraton Hotel
- walking from the Hauptwache to Sachsenhausen
- etc

Use a map that is clear and pretty much fills the screen.
For example, here is Moscow.

Each trip needs a button that displays the trip.

Make sure that each trip follows the actual
streets or paths that a person would walk or drive.
The "guide" should move at a pace that is easy to follow -
not too fast, not too slowly. 

Make as many trips as you can in the time available -
at least 8 is a good target.

There should be a nice title at the top of your page,
and your name should appear somewhere on the page.

SLIDING Trips - 12 Jan 2015

Open this page and try it out : 
https://dl.dropboxusercontent.com/u/275979/compTech/javascript/worldquiz/worldquiz.html

Now download the page and pictures in a .zip archive:
https://dl.dropboxusercontent.com/u/275979/compTech/javascript/worldquiz.zip
Make sure that the unzipped folder - worldquiz -
contains all the following files:
- worldquiz.html
- bird.png
- world.jpg
- PJ.js

Run BlueGriffon and load the web-page, then work in the SOURCE tab.

Now add Buttons and Functions as described below.
You need to use Slide and setTimeout commands
to make all this work correctly.

 In each case, the bird should STAND in the country described -
  e.g. it's feet must be in the country.

 (1) Make a button called "green".   When this button is clicked, the bird should
      SLIDE from Canada to India.  Use style="position:absolute;left:...."
      to place the button near the top of the screen.

 (2) Make a button called "yellow".  When this button is clicked, the bird should fly
      from Australia to Russia, then Russia to Brazil, and then Brazil back to Australia.
      Each part of the trip should take 1 second.  Place this button next
      to the "green" button.

 (3) Make a "wait" button that makes the bird fly the following trip:
     -  South Africa to England
     -  Wait 1 second
     -  England to Japan
     -  Wait 2 seconds
     -  Fly back from Japan to South Africa

(4) Add another button and another trip - as you wish.
     Practice...practice...practice.

Javascript - SLIDE with setTimeout - 17-18 Dec

Load your Moving.html page into BlueGriffon.

Change the <script> part to this:

    <script>

      Initialize()
 
      xpic.onclick = function()
      {
         Slide(xpic,50,200,400,100,1000,0)
         setTimeout("Slide(opic,400,100,900,100,1000,0)",1100)
         setTimeout("Slide(opic,900,100,400,100,500,0)",2200)
         setTimeout("Slide(xpic,400,100,50,200,500,0)",2800) 
      }

      opic.onclick = function()
      {
         Slide(xpic,50,200,800,200,500,0)
         setTimeout("Slide(xpic,800,200,800,0,500,0)",600)
         setTimeout("Slide(xpic,800,0,50,0,500,0)",1200)
         setTimeout("Slide(xpic,50,0,50,200,500,0)",1800)
         setTimeout("opic.onclick()",2400)
      }
     </script>

Now try to make lots of different pictures that move around in various directions.

Maybe a reindeer flying across the top of the screen and stopping on top of a tree.
Or packages falling form the top of the screen to the bottom.
How about some snowflakes?

Javascript - SLIDE - 16 Dec

We can make objects (probably pictures) slide around on a web-page.
Read these notes for more information.
Today you should try to do #3 - #7.

Here is a .zip archive containing example HTML files:
moving.zip

Today work on the page moving.html

Star Trek Faces - 10-12 Dec

Look at these notes.

Do the practice exercises at the bottom of the page.

Remember that you have a test on Monday.
Be sure to bring a working computer to class.

Mystery Picture - 9 Dec

Study this page.  Try clicking the buttons.

Then download the page and picture here.

Do the practice exercises listed on the page.

Clickable Picture Stacks - 5-8 Dec

Read these notes

Finishing the Jigsaw Puzzle - 4 Dec 2014

Now finish the Jigsaw Puzzle, including the [check] button.

Making a Jigsaw Puzzle - 3 Dec 2014

Here are instructions for making your own Jigsaw Puzzle.

You should follow the instructions carefully and do the assignment for Day One.

You can use any HTML editor, but the best choice is BlueGriffon .

JavaScript and Jigsaw Puzzles - 1-2 Dec 2014

**** FINISHING YOUR ADVENTURE GAME ********************************
Some students encountered last minute problems, complicated by the fact
that many were absent on Friday and the teacher was absent on Tues and Wed.
It's not uncommon for unexpected technical problems to sabotage a
computer project, so students should not feel bad about turning this in late -
that is a normal situation in the Computer industry (read this).  So if you need more time,
please make sure that you turn the Adventure game in no later than Monday 8 Dec.
If you are "stuck", you need to arrange to get help (maybe lots of it)
from the teacher, in a timely fashion so that you are finished before Monday.
Please don't use this time to make the game a lot bigger and better -
that is not necessary.  Get it fixed and working and turn it in.
******************************************************************

=== Today's Work ===

On Wednesday we will start doing some serious JavaScript programming.
In preparation, please do the following today:
- download and install BlueGriffon
- try out some Jig-saw puzzles
- try sending an eGreetingCard from one
   of these these free eCard services

Here is a possibility for investigating jigsaw puzzles.

Here is another sample Jig-saw puzzle:

Click to Mix
          and Solve

Today, spend the period investigating online jig-saw puzzles.
There are some fundamental concepts that you will need next week.

You can:
- solve jig-saw puzzles
- make your own jig-saw puzzles
- send an ePostcard with a jig-saw puzzle

Try out these various tasks - you can send an ePostcard
to yourself to see what happens.  Maybe you want to 
send a puzzle to a friend so that they have something
to do on the weekend.

Continue with your Adventure Game - 27-28 Nov 2014

Continue writing you Adventure Game - it is due on Monday 1 Dec.
But we will not be working on it during class on Monday -
we will start something new.

Continue with your Adventure Game - 25-26 Nov 2014

Continue writing your Adventure Game.  If you get stuck, try to get help
from another student.  If you are really stuck, you can send an email to:
-->  Dave_Mulkey@fis.edu

Using Videos in Your Game - 24 Nov 2014

The easy way to include a video in your game is to EMBED
a YouTube video.  Click on [Share], then [Embed], copy the code
and put it into EzCode.  It will look like this (you must add the "https:" shown in red):

<iframe width="420" height="315" src="https://www.youtube.com/embed/BIWeEFV59d4" frameborder="0" allowfullscreen></iframe>


It doesn't make much sense to have more than about 30 seconds of video
in the middle of the Adventure Game.  If you have a longer video,
you can start it in the middle by adding "?start=25" to start at
the 25th second of the video, like this:

<iframe width="420" height="315" src="https://www.youtube.com/embed/BIWeEFV59d4?start=25" frameborder="0" allowfullscreen></iframe>

Kann Kobe Make It?

You could also use Quicktime and record a short piece of a video.
However, you would need to save that in your folder with
other photos and such.  Inserting a video from a local source
like that is a bit more complicated.  The teacher can help
you do this.

Continue Adventure Game - 19 Nov 2014

Continue working on your Adventure Game in EzCode.

GLOBAL Variables - 17-18 Nov 2014

The teachers will explain the difference between GLOBAL VARIABLES
and LOCAL VARIABLE, as well as how to use GLOBAL VARIABLES
to store things like POINTS or OBJECTS that have been collected.

You can see some simple examples in the Adventure Game Sample program in EzCode.

Adventure Game Project - 14 Nov 2014

PROJECT DUE DATE = Mon 1 Dec at 18:00

Download - you need to DOWNLOAD a copy of EzCode
       Put this into a FOLDER that will contain your Adventure Game.
       You may need to save IMAGES (photos) or GIF ANIMATIONS
       or VIDEO CLIPS that are part of your game, and
       you need to save these in the SAME FOLDER with EzCode.

We are going to make an Adventure Game.  This is a "branching" story,
where you make decisions and move on to the next "place" in the story.
Here are three examples you can try out.

Or you can look at the Adventure_Game in the EzCode samples.

We will use EzCode and JavaScript for this project.  It's certainly possible to create
computerized stories with other tools, but JavaScript is an excellent
programming language to learn, as it is the most common language
used in the World-Wide-Web.

Here are some suggestions for getting started:

Before you start creating web-pages, you should make a plan - perhaps sketch out the design of your story ON PAPER.

== Getting Started ==

  1. Think of a scenario - that is, where will the adventure take place and what sorts of things will happen. 
    Here are some suggestions:
    - shopping center
    - airport
    - a city

  2. Think of a general story that is connected to Winter or Winter Holidays.

  3. Think of 3 locations - the beginning, the middle, and the end.

  4. Get a picture for each of the 3 locations above.

  5. Write these 3 pages, and use BUTTONS to connect them.

Once you have started, spend a little time thinking about the story,
and sketch out some ideas on paper. 
Collect some pictures and then start making pages. 

**** VERY IMPORTANT!  *************************************

    Put ALL THE WEB-PAGES and ALL THE PICTURES in ONE FOLDER.

**********************************************************

Otherwise the links to pictures won't work.

== Goals for the Assignment ==

  1. The story is NOT about school - almost any other scenario is acceptable.

  2. Pages use a consistent format and there are MANY pages (aim for 15 or more) -
    so it will be substantially longer than the Escape FIS story.

  3. Most pages have a picture on them.
     

  4. Some text uses LARGE FONTS and/or COLORS for emphasis
  5. At least 2 pages contain a SHORT video (under 30 seconds)
     

  6. Many pages contain a "puzzle", or something "hidden", or a "secret",
    so it is not immediately obvious what to do.
  7. Many of the pages use JavaScript to make them INTERACTIVE (clickable)

  8. Some of the pages contain "secrets" that are needed for later pages -
    like a password or a secret number to unlock something.

  9. Make it interesting and fun, and graphics should be appropriate and meaningful.

  10. ...  more info coming soon ...

Today, start planning ...

Short Test on EzCode - 13 Nov 2014

Here is the CODE for the EzCode test:
=== Farm Quiz
@pic"http://cache.desktopnexus.com/thumbnails/33401-bigthumbnail.jpg"
^Grass \
^Sky \
^Info \
^Hide
------------------
doGrass = function()
{
   alert("What color is the grass?")
}

Use this to start the paper test.

*** HOMEWORK (start this when you finish the test) ***
Play any of the games on the following web-site:
http://textadventures.co.uk/  
We will be creating similar (not identical) games in EzCode,
starting tomorrow.

Rich Man - 11-12 Nov 2014

**** REMEMBER - TEST on Thursday *****
You may use your computer and your
notes during the test.
**********************************

Today - use EzCode to do the practice program Rich_Man_Quiz.

Stacked Pages - 10 Nov 2014

We will do the EzCode Stacked_Pages sample program today.

Mystery Picture - 7 Nov 2014

We will do the EzCode MysteryPic sample program today.

These are all practice programs.  You will not need to
turn them in, but there will be a TEST on 13 Nov.
During the test, you are allowed to use any notes
that you have collected - for example, the programs
that you wrote for practice.  So it is a VERY GOOD IDEA
to keep a copy of the programs you are writing.

Pictures - 5-6 Nov 2014

We will do the EzCode Pictures sample program today.

Video Quiz with EzCode - 4 Nov 2014

We will do the EzCode Video_Quiz sample program today.

Add another video with 3 questions, similar to the Coca Cola questions.

If you finish early, add another video with questions.

Javascript with EzCode - 3 Nov 2014

We will be using EzCode to create Javascript drive Web Pages.

The teacher will explain how to use EzCode.

Today, open the [Samples] menu and do the [Quiz] program.

Aesop's Fable Powerpoint - 27-31 Oct

== Assignment == Due on Friday 31 Oct at 18:00

Create a PowerPoint presentation for one of Aesop's Fables -

similar to this one :  The Boy and the Snails

-  include a TITLE PAGE
-  include an AUDIO file
-  use Audacity to add SOUND EFFECTS to the AUDIO file
    Select sound effects that fit with the story and that are entertaining
-  include printed text for the Aesop's Fable -
    this should match the text in the AUDIO file
-  include some decorative images - small ones -
    choose images that fit with the story
-  the audio, text and images should all fit on ONE PAGE
     so the viewer can read along with the text as the audio plays
-  include citations for all the source - the audio, the text and the images
   Write the citations on the last page

You can turn this in by simply uploading (attaching) the single Powerpoint file in Haiku - it already contains all the pictures and audio files.

Experiments with Audacity - 23-24 Oct 2014

Here are some things to try with Audacity:

Using SOUND - 22 Oct 2014

We will be doing various activities with SOUND this week and next.
You will need headphones every day.

Today -

Create a PowerPoint presentation for one of Aesop's Fables - like this:

https://dl.dropboxusercontent.com/u/275979/compTech/powerpoint/aesop1/TheBoyAndTheSnails.pptx 

You will find AUDIO BOOK versions of Aesop's fables on librivox.org
You will find the TEXT versions of the same fables at gutenberg.org

When you make your PowerPoint presentation, you need to:

-  include an AUDIO file
-  include printed text
-  include some decorative images
-  include citations for all the source - the audio, the text and the images

Animations are not necessary.

Finish most of this today - we will be adding more to it tomorrow.

HOMEWORK -
Download and install Audacity - if it is already installed
on your computer, that will be fine.  You need a working
version of Audacity tomorrow.

Turning in your GIF Animations - 21 Oct 2014

Your 3 GIF Animations are due on Wed 22 Oct at 12:00 noon (before class).

Turn this in as follows:
- put all the FRAMES and the finished GIF ANIMATIONS into one folder
  (or 3 folders inside one larger folder if you prefer)
- COMPRESS the entire folder (right click on folder and select COMPRESS)
- In HAIKU, "hand in" and attach your .ZIP file

We will not be working on this any more during class.

Animated GIFS from Inkscape - 14-21 Oct 2013

GIF ANIMATION Creators

The Gif Animation Creator that we have been using appears to
be limited to 30 frames only.  Here are some other possibilities
that (hopefully) have a higher limit (or no limit):

http://toolson.net/GifAnimation/Create

Here is a list of various possible tools - choose the one you like best:
http://alternativeto.net/software/online-gif-maker/


This Animated GIF Word adds some variety to otherwise dull text.
Notice that the moving letters don't just fall, but they also "squash"
at the bottom.  In Inkscape, you achieve this effect by resizing the
letters, not only moving them.  And you can get interesting effects
if you pull on the control points after drawing the letter.  The motion
doesn't need to "mean" anything, but it should look "realistic" -
like this example appears to obey the law of gravity, and the letters
seem to be made out of some flexible material.  Many other effects are
possible, like spinning, floating (like a balloon), zoming across the page, etc.


Action GIFs can hilight specific activities or events, like a sports team.
It doesn't need to be a smiley - it could be a more realistic figure.
The main thing is that it shows some sports action, like kicking a ball,
running, jumping, etc.


Stick-man animations are quite easy to draw (don't need
to worry about shapes or colors), so it's possible to draw
a "story" (at least a short one).

When you make a stick-man story, it does not need to
be as long as this one.

Your assignment is to make one of each of these - that is, 3 animated GIFs -
- a WORD or LETTERS GIF
- an ACTION GIF (sports or other action)
- a STICK-MAN GIF that "tells a story"

You may use any graphics tool you wish, but Google Draw is probably faster
and more productive than other tools.

You must draw all the images yourself, from scratch.  You are not permitted
to download any images, but you may reproduce a good idea that you saw somewhere.

These are due on Wed 22 Oct at 12:00 noon (before class). 

You must make ONE FOLDER containing all the following:
- the project file for each GIF
- all the frames that you saved from the graphics editor
- the 3 .GIF files containing the animated GIFs
If you finish early, you should either improve one of the GIFs,
or make a new and better one.

The GOALS in each case are that the GIF should be :
- attractive - for example, nice colors and interesting shapes
- realistic or believable (not "real", but not just making random movements)
   The movements should make some sort of sense
- smooth - the animation should change smoothly - that means you will
   have lots of frames, and only small changes each time
- interesting and/or entertaining

You have 4 days of class, covering one calendar week.
You cannot work slowly.  You must work quickly and productively.
This is due on Wed 22 Oct at 12:00 noon
Whatever you have finished, you must turn that in even if it is not "perfect".

Animated Words and Letters - 13 Oct 2014

Here is an excellent video outlining basic concepts of ANIMATION.
The video contains lots of examples of ANIMATION.
In particular, there are several LETTER/WORD animations.

This Animated GIF Word (NEW) adds some variety to otherwise dull text.
Notice that the moving letters don't just fall, but they also "squash"
at the bottom.  In Inkscape (or Google Draw), you achieve this effect
by resizing the letters, not only moving them.  And you can get
interesting effects if you pull on the control points after drawing the letter. 
The motion doesn't need to "mean" anything, but it should look "realistic" -
like this example appears to obey the law of gravity, and the letters
seem to be made out of some flexible material.  Many other effects are
possible, like spinning, floating (like a balloon), zoming across the page, etc.

Today's practice - use either Inkskape or Google Draw, as you prefer :
1 - make your own "squashing word" like the NEW animation (like NEW)
2 - make some animated letters that "fly" into the screen -
      from the side, or the top, or in a spiral, as you wish.
      Make yours better (smoother) than the one at the right!

Stick Man - 2 Oct 2014

Make stick man
- jump
- run
- crash into a wall
- jump over a wall
- kick a ball
or any other basic movements/motions.
Start simple then work up to more complex movements.
Keep the "stories" relatively short - not more than 50 frames.

Your Own Smiley - 1 Oct 2014

It's pretty easy to make your own "Smiley" GIF animation.
The trick is to place each piece of the picture in a new layer -
first layer for the whole face (circle), next layer for the mouth,
next layer for the left eye, next layer for the right eye, etc.



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

Now make your own smiley GIF animation.
Recommend using Inkscape or Google Draw for the drawings.
Start with a basic face and export/download it as a PNG or GIF 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.

Comic Strip Due - 30 Sep 2014

Please remember that your Comic Strip Project is due today.
Remember to Export/Download to a .JPG bit-map format,
and then upload the .jpg file in Haiku.

Comic Strip Project - 22 Sep 2014

Comics with Faces Asssignment

More Practice - 19 Sep 2014

Introduction to Vector Graphics

Practice some more - watch a video, draw a cartoon character.
The more you practice, the easier and faster it will be.

On Monday we will start a project using vector graphics.

Starting Vector Graphics - 17-18 Sep 2014

Introduction to Vector Graphics

Drawing with Vector Graphics - 16 Sep 2014

Open Google Drive (Google Docs).
Create a NEW DRAWING.
Use the SHAPES and other DRAWING TOOLS to draw each of the following:
-  Mickey Mouse (a circle face, two circle ears, all black)
-  Packman (a yellow circle with a "pie" piece removed)
-  A blue 5 pointed star with one point pointing downward
-  A light purple "cloud"
-  A frowny face



Homework - Try to download and install INKSCAPE.
It is probably difficult, but give it your best effort.
Start here:     inkscape.org

WIX Slideshow Assignment - 9 Sep 2014

You have hopefully
- created a WIX account
- uploaded your rollover page to Google Drive and shared it
- placed a link in your WIX web-site linked to your rollover page

Now we will continue adding things to the WIX site throughout the semester.

The first assignment is a SLIDE SHOW using personal photographs
(could also be photos from another student or teacher).
...read more here...
The Slide-Show is due Tue 16 Sep at 20:00
You need to upload the LINK/URL/Address
of your WIX web-site.

WIX ePortfolio and Google Docs Host - 8 Sep 2014

The teacher will explain how to:
- make a public web-site folder on Google Drive
   Read these notes
- how to put a link to your web-site onto WIX

Funny Photos - 1-2 Sep 2014

For SENIORS only :

Use PIZAP to make a funny picture, or
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.

Make some funny pages, print them and hang them on the bulletin board(s) in 276.

Finish Rollover Page - 28-29 Aug 2014

Finish your rollover page (as described below),
compress the folder and turn in your .ZIP file in Haiku.

Starting Wix

If you finish early, you can start making your E-portfolio at WIX.COM

To get started :
- go to www.wix.com
- make an account
- log-in and start your web-site
- put your name on the front page
- add a few links to some of your favorite web-sites

Later you will be adding links to your finished projects,
but we will start that after Trip Week.

Add Title, Author and Date - 26-27 Aug 2014

The teacher will show you how to successfully add TEXT at the
top of your page - above the table.

The finished page is due on Friday 29 Aug at 20:00 - turned in to Haiku.

Rollover Page Assignment

Finished version of rollover pictures with links, similar to :

http://www.onlineradiostations.com/        

The finished page must have all the following:

  • 18 small pictures in black and white
  • all pictures and the page must be stored together in one single folder
  • the pictures must be in a TABLE
  • rollover effect that changes each picture to color,
    then back to black and white when the mouse leaves
  • a link that displays the original, larger picture
  • TITLE, DATA, and AUTHOR at the top of the page

To turn in the assignment, you need to:

  • right-click on the FOLDER and choose COMPRESS
  • that will create a .ZIP archive containing your project
  • in Haiku, upload (hand in) the .ZIP archive

Interactive Web-pages - Rollovers - 25 Aug 2014

The teacher will explain how to create ROLLOVER effects like you see on this page: http://www.onlineradiostations.com/ 

Image Editing in ipiccy.com - 20-22 Aug 2014

Look at this web-page:  http://www.onlineradiostations.com/ 

It uses THUMBNAILS (small pictures) that have been CROPPED and RESIZED.
The thumbnails are also organized into a nice GRID - by using a TABLE.

Here is a web-site - http://ipiccy.com - that make it easy to RESIZE a picture.
You should collect a lot of pictures from Google, resize them,
and then put all the thumbnails into a table in a web-page.
One tricky part - you need to make the pictures SQUARE
by cutting out a square piece.  Don't just resize them and "squash" them.

Assignment - 18 linked images

Follow these steps to make a page with 18 pictures:

  1. make a NEW FOLDER where you can save all your thumbnail pictures
  2. in SeaMonkey make a NEW COMPOSER PAGE
    - make a TABLE with 3 rows and 6 columns
    - save the page into your FOLDER
  3. find a Google image
  4. start ipiccy.com
    - open [more][new web image]
       paste in the address of your Google image
    - CROP a SQUARE piece of the picture (apply)
    - RESIZE your square to be 100x100 pixels (apply)
    - SAVE your new picture with a slightly different name, like PICTURE1B.jpg
  5. in SeaMonkey, insert a new IMAGE into a TABLE CELL, and insert your THUMBNAIL image
    Don't copy the web-address - instead, just type the name of the image PICTURE1B.jpg
  6. put a LINK onto your small image that connects it back to the original web-site
    The LINK must contain the web address (URL).
  7. Repeat until you have 18 small images in 3 rows and 6 columns
Turning It In -
You need to make a .zip archive containing your FOLDER (which contains 36 pictures and one web-page)
Then [Hand In] (upload) the .zip archive in Haiku.

You have 2 class periods to work on this.  You probably also need
to work at home to finish on time.

Web-pages with Pictures - 19 Aug 2014

The teacher will explain how :
- install Sea Monkey
- run Sea Monkey
- [File][New][Composer Page]
- [Seamonkey][Preferences][Composer] -- turn ON [Preserver Original Source Formatting]
- insert images without copying them
   That means, use Google Images to find an image
    then copy the address, insert an Image in Seamonkey
    and paste the Address (URL), and type a short description in [alternate text]
- use tables to organize a web-page

Read these notes and make a similar page,
using a 2x2 table to display 4 images.

Finish Pictures Page - 18 Aug 2014

Today is the last day in class to work on your Pictures Page.
It is due on Tues 19 Aug at 12:30 (or earlier).
So you cannot work on it during class tomorrow.

Make sure that you have done [Save As PDF].
Make sure that at least ONE of the links actually works in the PDF file.
Then upload the PDF file into HAIKU.

If you have finished early and have nothing to do,
try clicking on the pictures on the HOME page in  http://fiscomp.weebly.com
- for example, the Brain Games link.

Don't forget to turn in your assignment before 12:30 tomorrow.

How to make PDF File - 14-15 Aug 2014

The teacher will show you how to make PDF file from a Word Processing document
and discuss the proper way to copy links.

First Day - 13 Aug 2014

Welcome to CompTech

Computer Technology is a mixture of Information Technology and Computer Science.  You will learn how to use computers effectively, as well as learning more about how computers work.  .. more ..
~~~~

Daily Work - Computers Required - Bring Your Computer Every Day

Each student needs a computer for class every day  .. more ..

Today's Assignment
We will collect some pictures from Google Images - http://images.google.com
Read these notes about collecting images.
The Picture Pages assignment is due on Tuesday 19 Aug 2014 at 12:30.

https://dl.dropboxusercontent.com/u/275979/compTech/javascript/css/quiz28may2015/CSSmakeUpQuiz.html