| Next Due Date : Final Project - due 15 or 16
June (1 week after assigned) |
Find something fun to do - suggestions:
Exercise your brain with www.gamesforthebrain.com
Competitive Typing http://play.typeracer.com/
Something else?
Here are a couple resources to introduce you to Electro-Acoustic music:
Wikipedia Electro-Acoustic
Here are some music making tools to try out.
Search for one that is easy to use and creates good results.
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.
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.
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
Due date for Comp Tech #6 is Tuesday 16 June at 18:00.
Due date for Comp Tech #3 is Monday 15 June at 18:00.
== 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.
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.
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
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.
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.
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.
Read this sample page and do the practice exercises.
You can download the page's folder here.
Open
this page, try it out,
and then do the practice exercises.
You can download the page here.
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.
Look at this sample page and do the practice exercises as described.
You can click here to download the page and the picture.
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
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.
(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
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:
The teacher will demonstrate these tools. Then you can try to make
your own WILD ANIMAL -
wild in the sense of "crazy".
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.
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 | |||
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 ***
===================================
Read the following notes.
Watch the tutorial and do the exercises at the end of the notes.
Methods with the - Bunny and the Phone
Read
the
following and do the practice listed at the end.
https://dl.dropboxusercontent.com/u/275979/compTech/alice/YourWorld/index.html
The teacher will briefly inroduce the program.
Then read this brief introduction and do
the exercises listed.
#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 - the finished project is due next Wednesday.
If you need a break from your group project - and you think
you can afford taking some time off - try :
Continue working on your group project.
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
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 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).
Today's Tasks
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) ...
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.
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!
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.
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.
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.
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.
Here is a program that uses a VARIABLE to add up points when the cat gets a cookie.
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,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 -
Start with a cat
Add
commands
to move the cat when
keys
are pressed -
you will made several commands to respond to several keys
Add another Sprite that is moving constantly (forever)
Add
an if.. command that detects when
the cat touches the other Sprite
and move the cat back to the starting point when this happens
Now
add
more Sprites. Make at least one "good" Sprite (like food)
that does something good when the cat touches it
Organize
the
Sprites and movements so that it is difficult but
not impossible to reach the "food"
Add some sound effects
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
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].
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 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.
***
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.
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.
Notes about Typing Technical Documents
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.
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 - (1) Make a button called "green". When this
button is clicked, the bird should (2) Make a button called "yellow". When this button
is clicked, the bird should fly (3) Make a "wait" button that makes the bird fly the
following trip: (4) Add another button and another trip - as you wish. |
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?
Study this page. Try clicking the buttons.
Then download the page and picture here.
Do the practice exercises listed on the page.
Now finish the Jigsaw Puzzle, including the [check] button.
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 .
****
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:
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 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 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
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> |
Continue working on your Adventure Game in EzCode.
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.
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.
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:
Each page follows the same design - with one picture, a description below, and buttons or links below that.
Use EzCode
- that is a fast, simple and efficient editor.
Start by using BUTTONS to jump from page
to page (actually from %DIV% to %DIV.)
These buttons must HIDE the current %DIV% and SHOW the target %DIV%.
Later you can use some Buttons with simple JavaScript responses.
Before you start creating web-pages, you should make a plan - perhaps sketch out the design of your story ON PAPER.
== Getting Started ==
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
Think of a general story that is connected to Winter or Winter Holidays.
Think of 3 locations - the beginning, the middle, and the end.
Get a picture for each of the 3 locations above.
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 ==
The story is NOT about school - almost any other scenario is acceptable.
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.
Most pages have a picture on them.
At least 2 pages contain a SHORT video
(under 30 seconds)
Many of the pages use JavaScript to make them INTERACTIVE (clickable)
Some of the pages contain "secrets" that
are needed for later pages -
like a password or a secret number to unlock something.
Make it interesting and fun, and graphics should be appropriate and meaningful.
... more info coming soon ...
Today, start planning ...
| ===
Farm Quiz @pic"http://cache.desktopnexus.com/thumbnails/33401-bigthumbnail.jpg" ^Grass \ ^Sky \ ^Info \ ^Hide ------------------ doGrass = function() { alert("What color is the grass?") } |
**** 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.
We will do the EzCode Stacked_Pages sample program today.
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.
We will do the EzCode Pictures sample program today.
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.
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.
== 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.
Here are some things to try with Audacity:
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 -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.
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. |
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! |
 |
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.
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.
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.
Introduction to Vector Graphics
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.
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
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 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.
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:
To turn in the assignment, you need to:
|
The teacher will explain how to create ROLLOVER effects like you see on this page: http://www.onlineradiostations.com/
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:
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.
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.
The teacher will show you how to make PDF file from a Word Processing
document
and discuss the proper way to copy links.
|
Welcome to CompTech ~~~~ |
 |
