Month: December 2010

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

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.

Welcome!


speech bubble


happy face


ask question

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.

 WELCOME!

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

C. 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.  C. remebers how to do width and height and chose to use 125.




Finally we talked about the text input field

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>


 WELCOME!

<!--- TODO: figure how to center in CSS */ -->
<center>
<p/>

 
 






</center>




 
 

---

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

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

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