From the last session with C., we have a login screen.  Now C. would like the little Yahoo! Messenger guy to bounce around.

Click here to see the page in action

She fired up TuxPaint and created a drawing of a spring

We used Preview to copy it and rotate it into horizontal spring

I started to read about the YUI animation library

First, we copy these 2 lines to include YUI libraries

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js

The happy face guy is in the div tag as id=”happy_home”

<center>

  

  
  
  

    
  
  </div>
</center>

YUI has very simple syntax and she was intrigued with Y.one() syntax to create a node for #happy_home

 YUI().use('anim', function(Y) {
   var node = Y.one('#happy_home');

YUI has some sample code, at this point because I’m also learning Javascript and YUI, I experimented with the animation and finally was able to get the Yahoo! Messenger icon to bounce

 var anim = new Y.Anim({
 node: node,
 duration: .75,
 easing: Y.Easing.easeOut
 });

node : is the the happy face guy with the speech bubble
duration: is how long the animation goes on each iteraction
easing : how you want the animation to easy into the position

 var bounceCurve = function(end) {
 var points = [],
       X = node.getX();
       Y = node.getY();
       points.push([X, Y - 60]);
       points.push([X, Y]);
       return points;
 };

X, Y: is the point where the happy guy is
points : we create a point which is 60 pixels above where the happy guy is at, how high to bounce

 anim.set('to', {
              curve: bounceCurve(),
             });
 anim.set('iterations', 100);
 anim.run();

 //Y.one('document').on('click', anim.stop());
});

to : We want the animation to run so that the happy face will go to the point at 60 pixels above the guy and
interactions: we want this to run for 100 times

Click here to see the page in action

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-

1. Using CSS To Realize The Mock Up: Teaching Computer Programming To Kids Lesson #7

Based on Cate’s mock up, we built a real HTML page using CSS.

Step 1: Here is how we built the page

First I told her about the <div> tag which we can use to divide up different sections of the mock up.
So she did the following to divide up the screen into 4 sections.

<div>
Welcome!
</div>
<div>
speech bubble
</div>
<div>
happy face
</div>
<div>
ask question
</div>

Step 2: She picked the font Arial Rounded MT Bold using the Font Book application on the Mac

I told her the div tag needs a class name and she can choose whatever she wanted, so she chose asdf for simplicity of typing, I think she understands the concept that humans are in charge of ‘names’ and variable names.

<div>
 WELCOME!
</div>

Then I talked to her about the <style> tag to change the font face for the class asdf

• font-size : this is the number of ‘points’ or pixels of the height of the font she wanted to use, and we experimented with different numbers until she decided on 50
• font-family : this is cut/pasted from Font Book

*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";  text-align: center;}

For the speech bubble, we found a site http://wigflip.com/ds/ which will allow us to type in any word and generate an image of a speech bubble with the text


<div>
<img src="ask_name.gif">
</div>


Cate wanted to use the Yahoo! Messenger happy face as the magic eight ball. I showed her how to Show Package Content for the Yahoo! Messenger app on the Mac. the file is Applications/Yahoo! Messenger/Contents/Resources/cesario.icns

We opened the file using the Mac Preview app and saved it as a .gif file so that transparency is preserved.  Cate remebers how to do width and height and chose to use 125.


<div>
<img src=”Yahoo!.gif” width=”125″ height=”125″>
</div>

Finally we talked about the text input field

<div>
<form>
 <input/>
 </form>
</div>

To put the finishing touches, we played with more CSS to add a 60px whitespace

p {margin-top: 60px}

Here is the complete HTML code

<style type="text/css">
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";
 text-align: center;}

*.fd {align: center; }

p {margin-top: 60px}

</style>

<div>
 WELCOME!
</div>
<!--- TODO: figure how to center in CSS */ -->
<center>
<p/>
<div style="margin-left: 200">
 <img src="ask_name.gif">
 <!-- from http://wigflip.com/ds/ -->

</div>

<div>
<img src="Yahoo!.gif" width="125" height="125">
</div>
</center>

<div>
<form>
<center>
 <input/>
 </form>
</center>
</div>

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-

Cate is anxious to get her magic eight ball game working on Firefox and was excited with a lot of ideas.  Little does she know that I’m a backend programmer and don’t know a whole lot about animation, Javascript and CSS.  But I could learn this stuff easily if she wants to as well.  So I told her like I tell the Yahoo! product managers, give me a mock up.

So she drew up a few  screens for me.

First, she wanted more answered added to the magic eight ball.

Then she thought it would be good if we kept a history of your previous questions, so you should tell us your name

Follow by the magic eight ball bouncing around in a room of springs!  Help YUI or Javascript gurus

I was very happy to see the mock ups and we started working on the first welcome screen after dinner of homemade avocado rolls.

Looking at the first screen, I asked her what font faces she wanted, so she opened up Font Book on the mac and she decided on the Arial Rounded MT Bold

Next lesson: using div tags, CSS to format the welcome screen!
—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-

Cate started to learn about creating lists of things and tables in HTML

<UL>

: to create an Unordered List of items

<LI>

: to start a List Item

<OL>

: to start to create an Ordered Lists and the computer will add the numbers automatically

Then if we want to create a table to remember things like the gifts that Cate got for Christmas from all her relatives from since was born, then we can use a table.

<table>

: to start creating the table

<tr>

:to create a row

<td>

: to create a column

So the following would show what Dad and Mom gave for gifts in 2001 and 2002

<table>
<tr><td>person/year</td><td>2001</td><td>2002</td></tr>
<tr><td>Dad</td><td>blanket</td><td>socks</td></tr>
<tr><td>Mom</td><td>gloves</td><td>wrap</td></tr>
</table>

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-

Cate wants to make a computer program be to be like the Magic 8 ball, in my last post, I couldn’t remember how to generate a random number. But found it here

Math is a class (not an object ), it has 2 class member functions.

 random()

which will give me a random decimal between 0 and 1, like 0.11, 0.34. If we take this and multiply by 6, then we will get a number between 0 and 6, but less than 6

floor()

will round off the decimal number to an integer.

Math.floor( Math.random() * 6)

So here is the program, which will magically give you an answer to any question you have in the word

<body>

<script type="text/javascript">
var question  = window.prompt("Ask a question! :)");
/* RFE: time thing change question after 5 secs, to ask the user to hurry up */

var magicAnswers = [
"Duh",
"Hazy, try again",
"No way",
"Awoooga",
"We'll see",
"Of course!",
"Yawn...",
"Yep."];
/* Math.random() the computer makes a random number between 0 and 1, 
  gives you answer to your question
 multiply by 5 would give you a number between 0 and 4
 Math.floor makes the number a round number
*/
var randAnswer = Math.floor(
 Math.random()
 *8)

window.alert("Q: " + question + "\n\n" + "A: "+ magicAnswers[randAnswer]); 

</script>

</body>
/* the engine of the Magic 8 ball game is simple and complete, some ideas 
for the UI
 1) have a wizard stand behind a crystal ball, ask a question, zoom in to
 the crystal ball and show the answer
 2) have a bouncing black eight ball, ask a question and the eight ball 
shakes a bit and shows the answer, it prompts you every 3-5 seconds.

 As another enhacement, we can keep a history of all the previous 
questions and answers. display the question a bubble next an avatar
 of the person asking follow by the answer 
almost like a comic strip
 This will allow us to see the previous history of all the funny 
question and answers
*/

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-

As Cate and I were walking to 16th and Mission street Bart station at 7:30am, I talked to her about the arithmetic operators in Javascript.

There is

+ for addition
– for subtraction
* (kinda funny) for multiplication
/ (forward slash) for division

We went through some examples

var x = 12
 x = x + 5

x = 12
 x = x - 1

x = 12
 x = x * 3

x = 12
 x = x / 3

Then I talked to her about variables multiplying itself, which is a square root and she seem to understand

var x = 3
x = x * x

When we got to BART, I brought the computer out and we typed in some simple HTML
into Emacs and I showed her using CTRL-X CTRL-S to save files

<body>
ninepins
<b>now</b>
</body>

I talked with her about balancing the tags with closing tags using ‘/’

<b> == bold

Then she tried
<i> and <u> by herself and I taught her to use Firefox and open the file and display it whenever she saved

I showed her <s> for strike-thru

We tried <font color=”#ff0000″> for red and 00ff00 for green and 0000ff for blue.  And she remembers the
Lesson #1 when we talked about the RGB values.

Then as we pull into 19th street BART station and need to transfer, we built a simple Javascript program to prompt and using
if … then … to display different answers

<script type=”text/javascript”>
var STRIKE=”Are we there yet?”
var guru = window.confirm(STRIKE);
if (guru)
window.alert(“Yipee!!”)
else
window.alert(“Too bad :(/”)
</script>

Cate thought this is pretty funny and asked me if we can build a magic eight ball program

I started to design it with her, but I had forgotten how to do random numbers in Javascript and told her
we’ll have to look it up when we have a reference book or online documentation.

It’s time to get off BART at the Ashby station as we have to pick up a Zipcar to drive to the school.
I can’t wait until the next lesson.  I can understand how Cate’s brain thinks as she gets exposed to computer programming

<script type=”text/javascript”>

var magicAnswers = [“Yippe”, “Oh boy”, “hazy”, “No way”, “Outlook looks good”, “We’ll see”];
var randAnswer = rand(0,6)
var answer = window.confirm(“Are we almost there?”);
window.alert(magicAnswer[randAnswer]);

</script>

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-

After dinner, Cate asked if we can continue to learn about computer programming. I told her I would love nothing more.

I told her that I will teach her HTML, Hypertext Markup Language and Javascript. HTML is what designers use to control how a page looks like in Firefox. Javascipt let the programmer add interactivity.

I show her a bit of HTML source code and open and close tags. Some sample tags like <b> and <font> and the tag to start telling the computer that we are about to start writing javascript

So we reviewed the few simple reserved words like

var

To declare a variavble


while

A loop that stops when an expression is false. 0, false or null is false, anything else is true.


for(initiator, conditional; increment)

A loop with an initiator, conditional and increment


new

To create a new object. An object has state and methods or actions.


wondow.alert

To display a message to the programmer or user

We added tonight


int

To declare an integer which is a non-decimal. So 2, 8, 66 are integers while 9.6 is not.


if ... then...

Conditionals that will only do something if an expression is true

We then talked about ++ and += and went throaugh examples like


var x=2
x ++
window.alert(x)


I found a small tutorial on the window object.
we looked at and played with an example

window.alert()
Used to display a simple message

wndow.confirm()
Used to ask for a yes or no type of answer.


Then at night she wanted me to review what we learned. As she was falling asleep, I talked with her about the syntax of the Javascript keywords, talked about how we can build loops using for, and 5 minutes later she was asleep.
—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-