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 positionvar 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 bounceanim.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 timesClick here to see the page in action
This is a series that documents my daughter’s curiosity to learn about computer programming
Using CSS To Realize The Mock Up: 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 bubblehappy faceask questionStep 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 choseasdf
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 classasdf
- 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
Story Board, Mock Ups : Teaching Computer Programming To Kids Lesson #6
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
Lists and Tables in HTML: Lesson #5
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>
person/year 2001 2002 Dad blanket socks Mom gloves wrap
This is a series that documents my daughter’s curiosity to learn about computer programming