Computer Technology - Frankfurt International School - 2015-16

Next Due Date : Adventure Game in EzCode - due Mon 30 Nov at 18:00            

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

 NEW BLOG AT : https://dl.dropboxusercontent.com/u/275979/2015comptechBlog.html 

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

This blog ended on 30 Nov 2015

~~~~~~~~~~ Old contents are below ~~~~~~~~~~~~~~~~~~~~~~~~~~

Last Day for EzCode Adventure Game - 30 Nov 2015

Today is the last day to work on your Adventure Game.

*** Adventure Game - Due TODAY - 30 Nov - at 18:00

=== NEW BLOG ADDRESS ===

Starting tomorrow, this Blog will have a different address:
https://dl.dropboxusercontent.com/u/275979/2015comptechBlog.html 

In case you bookmarked this Blog, you will need to change the bookmark.

In any case, it will still work by going to:
http://fiscomp.weebly.com  and then clicking on CompTech.

Embedding Video - 25 Nov 2015

The easy way to include a video in your game is to EMB

ED

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>

More Attractive Text - 19 Nov 2015

You can make more attractive text like this:

%"color:red; font-size:32px;background:lime"

This is big red text

%

Notice that you need a starting and ending % sign.  

This goes in between the % signs that make a "room" hidable and showable.

This isn't always sensible, but sometimes you may want to use colors in text.

For more ideas, look at the Colors_Fonts sample program.

Adventure Game Assignment - 13-30 Nov 2015

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 pages (rooms), 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!  *************************************

    IF you use pictures that are stored inside your computer,

    you MUST put them all into one folder, together with

    a complete copy of EZ-CODE.

    Then COMPRESS the folder and turn in the .ZIP archive.

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


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 should use a consistent format and there are MANY pages -
    aim for at least 12 pages - more is better -
    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. ​The story must MAKE SENSE - not just contain random questions.

…..  more info coming soon …. the teacher will show you a couple more good ideas next week

Today, start THINKING and PLANNING ...

At the end you must turn in your COMPLETE program (from the left window)

as a TEXT FILE.  It will not "stay" inside ezCode.

***** BE SURE TO SAVE YOUR PROGRAM FREQUENTLY! ******

Rich Man Quiz - 12 Nov

Today we will do the Rich Man Quiz in  EzCode .

Rich Man Quiz - Period 6 on 11 Nov

Today we will do the Rich Man Quiz in  EzCode .

Pictures in EzCode - 10 Nov 2015 + 11 Nov Period 2

We will do the EzCode  Pictures program today.

** TIP **
To SAVE your programs in EzCode:
-  highlight all the code (text in the left box)
-  copy the code

-  paste your code into a document - e.g. MS Word Document
-  save the document

-  later you can open the document and Copy/Paste your code
  back into EzCode

Videos in EzCode - 9 Nov 2015

** Suggestions **

== Today's Assignment ==

Start  EzCode  and open the Sample Video_Quiz .

Do the Practice exercises described at the bottom.

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

 <iframe width="560" height="315" src="https://www.youtube.com/embed/w7AFRg7-hrA" frameborder="0" allowfullscreen></iframe>

     

           You can change the height and width if you wish, but don't change anything else.
   

If you finish early, add another video with questions.

JavaScript with EzCode - 5-6 Nov 2015

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

The teacher will explain how to use EzCode.

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

Do the practice exercises suggested at the bottom.

Be sure to SAVE your CODE by COPYING and PASTING

it into a document in a TEXT EDITOR (or word processor).

Continue Aesop's Fable - 2-4 Nov 2015

Continue Aesop's Fable presentation with Sound Effects.

Aesop's Fable Powerpoint Assignment - pd 5,6 - 28 Oct 2015

== Assignment ==

Due on Wednesday 4 Nov 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 must match the text in the AUDIO file
         If it doesn't match, you need to correct the text.

-  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

-- Turning it In --

You can turn this in by simply uploading (attaching) the single Powerpoint file in Haiku -

 it already contains all the pictures and audio files.

Sound Effects - Pd 4 - 28 Oct 2015

See below

Sound Effects - Pd 4-5 - 27 Oct 2015

The teacher will demonstrate how to use Audacity.


Here are some things to try with
 Audacity:

Using Sound - Pd 1 - 27 Oct 2015

See below

Using SOUND - 26 Oct 2015

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.

Animations Assignment - 16-23 Oct 2015

-- GIF ANIMATION Creator Tools --

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), zooming across the page, etc.

soccer.gif

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, dancing, etc.

giphy.gif

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, but at least 20 frames long.

And the story should make some sort of sense.

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 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 Fri 23 Oct at 18:00 noon .  

You must make ONE FOLDER containing all the following:

- 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 5 days of class, covering one calendar week.

You cannot work slowly.  You must work quickly and productively.

This is due on Fre 23 Oct at 18:00 .  

Whatever you have finished, you must turn that in even if it is not "perfect".

You must COMPRESS the folder containing 3 GIF animations and all the
individual images that you saved.

Stickman Story - 15 Oct 2015

stick-figure-animated-gif.gif

Stick man animations are simple, involving movements of
legs and arms.  The stick man should be built from straight line,

and not too many of those.  The body does not need to look "real",

but the movements should be realistic.  For example,

the runner below is leaning forward, not standing straight up.

The jump-rope man does NOT look realistic, as his body
should move up and down when he jumps.  

RunningTest2.gif

stick-man-jump-rope-joseph.gif

stickman_soccer_ball_by_darkuspower-d87jn7f.gif

Practice drawing a stick man animation today.

Make a stick man

- jump

- run

- crash into a wall

- jump over a wall

- kick a ball

or any other basic movements/motions.

This would be just one or two of the figures above - not all of them.

Start simple then work up to more complex movements.

Keep the "stories" relatively short - not more than 20 or 30 frames.

More GIF Animations - 13-14 Oct 2015

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 NEW 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 (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!

GIF Animations - 12 Oct 2015

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.

  smiley_face_gif_by_liviaax15-d3j6glx.gif  RockingSmiley.gif   clap-animated-animation-clap-000340-large.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 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. 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.

Good Practice and Reliable Habits - 9 Oct 2015

You should read the GUIDELINES on this page.

Perform EXPERIMENTS to find answers to the following questions.

  1. Name 3 different reliable and easy ways to make BACKUPS and prevent LOST FILES.
  2. Describe a good strategy for saving your work so that it is always easy to find it again.
  3. Explain why DRAG-AND-DROP does not always produce reliable results.
  4. Explain why you cannot just give an .HTML file to someone else
    and expect it to work correctly.
  5. Find out what CHARACTERS should never appear in a file name.
  6. If you need to print an essay and turn it in to your teacher,
    how much time should you plan for doing the printing.
  7. Find two types of files that CANNOT be uploaded and stored on Google Drive.

Your WIX Site

  1.  UPLOAD your Comic Strip into WIX
    and display it on a page in your WIX Web-site.
    PUBLISH the site and check that the image
    displays in a way that the text is also readable.
     
  2. In Google Images, search for a GIF ANIMATION.
    These are pictures that move, for example "Smileys".
    SAVE a GIF ANIMATION in your computer.
    Then UPLOAD that file into WIX
    and display it on a WIX page.  
    Add a couple more GIF animations.

Next week you will be making your own GIF Animations.

Turning in your Comic Strip - 7-8 Oct 2015

The teacher will explain how to EXPORT your comic to a .PNG image
and then upload it into Haiku.  It's not difficult, but not obvious.

Continue Comic Strips with Inkscape - 6-8 Oct 2015

Continue working on your Comic Strip.

Check your grades for the Rollover Picture Page.

If you got a grade 0, you need to turn it in again,

but this time COMPRESS the ENTIRE FOLDER

and the UPLOAD the .ZIP file.  If you don't

know how to do this, ask for help from the teacher.

Comic Strips with Inkscape - 21 Sep 2015

Comic Strip Assignment - Due 8 Oct at 18:00

Cartoon Videos - 17-18 Sep 2015

Watch a CARTOON video (bottom of Introduction to Vector Graphics).
Then try to draw the same figure you saw in the video.

Starting Vector Graphics - 16 Sep 2015

Introduction to Vector Graphics

Vector Graphics Introduction - 15 Sep 2015

Open Google Drive (Google Docs).

Create a NEW DRAWING.

Use the SHAPES and other DRAWING TOOLS to draw each of the following.
It's practice - do as many as you can in one class.

-  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

-  A robot with a square head, rectangle body, rectangular eyes and arms

Six triangles that fit together like this

 (with 6 different colors):

Take any shape, and fit lots of them together to create a TESSELATION, e.g.:

     

Next class we will start using InkScape, which is an APPLICATION
that does VECTOR GRAPHICS like Google Draw, but it has
a lot more features and works better because it is
running as an APPLICATION inside your computer.

You need to download and install Inkscape from this web-site:

https://inkscape.org/en/download/mac-os/ 

Rollover Web Links - 7-14 Sep 2015

We are going to make web-pages with ROLLOVER effects and links on pictures.

Read these notes.  The teacher will demonstrate how this all works.

The finished page is due on Friday 11 Sep at 18:00.

You will have all the classes this week to work on it
but may also need to do some work at home, as we

do not have any classes on Wednesday.

Starting WIX - 28 Aug 2015

Start making a WIX Web-Site at :  http://www.wix.com 

You can use your email address to create an account.

Choose any template that you like - it's easy to change it later.

  1. Put your name on the front page.
  2. Add a nice picture to your page.
  3. Add 4 links to your favorite web-sites.
  4. Find out what else is possible - WIX makes it easy!

Web-pages with Pictures - 25-27 Aug 2015

The teacher will explain how to :

- 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]

- put LINKS onto pictures

- use tables to organize a web-page

Read these notes and make a similar page,

using a 2x2 table to display 4 images.

** This assignment is due on Friday 28 Aug at 18:00

** To turn in the assignment, you must UPLOAD your finished web page (.html file)

** into Haiku in the Four Pictures Page assignment.

If you finish early, you can create an account at http://www.WIX.com 
Next class, we will start making a WIX web-site
that will contain links to your project work, as well as
a slide-show with photos from the grade 9 trip.

Sec 6M - Continue Pictures Page - 24 Aug 2015

Continue creating your picture page (like  Sample Document )

If you finish early, you can have a look at some of the
picture links on the class web-site under [Latest Tech Ideas].

Sec 3M - Web-pages with Pictures - 24 Aug 2014

The teacher will explain how to :

- 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.

Continue Pictures Page - 20-21 Aug 2015

Continue creating your picture page (like  Sample Document )

If you finish early, you can have a look at some of the
picture links on the class web-site under [Latest Tech Ideas].

First Day - 19 Aug 2015

== 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.

Create a sample document similar to this one (but not about clowns) :
 
Sample Document

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.

Welcome to CompTech - Course Introduction

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 ..