Understanding advanced CSS

 Class  Comments Off on Understanding advanced CSS
Jan 302014

For those wanting to venture out on the CSS limb, this is a really good post on many of the wonderful things you can do.  It’s actually pretty old (5 years), but in this case that’s good news, because it means you can ignore most of the “IE6 won’t support this feature.”  We’re finally at a stage where we can probably ignore IE6 (yay!).


 Posted by at 1:33 pm

Final exam

 Class  Comments Off on Final exam
Apr 152013


As you are working toward finishing your projects, some have asked about the final exam.  Here is the type of task you’ll need to be able to complete to perform well on the final:

  1. Identify viable sources for finding answers to programming questions
  2. Identify viable online training sites for learning more programming or scripting
  3. Explain what a web site is
  4. Explain what a server is and how to transfer files to it via FTP
  5. Explain how to get files from a development computer to a server so the files can be hosted online
  6. Describe the purpose/use of each of the following languages: HTML, CSS, PHP, MySQL
  7. Given a url, identify: (a) the domain, (b) the directory, (c) the file containing the page being looked at, and (d) any variables passed in the URL
  8. Given a simple web page (e.g., Title, content, menu, footer), recreate that web page using HTML
  9. Style a simple web page using CSS
  10. Given your programming (i.e., logic) language of choice (e.g., javascript, php, lua):
    1. create a variable,
    2. use said variable in a function that you define.
    3. Use loops to complete a repetitive task (e.g., displaying a list of items returned from a MySQL query)
    4. Request user input, process it, and then use it in a simple program.
 Posted by at 2:00 pm  Tagged with:

Ask and ye shall receive…

 Class, Resource  Comments Off on Ask and ye shall receive…
Mar 112013

I’ve mentioned before that one of the most oft-repeated imperatives in the scriptures is to ask.  The same holds true for learning to program.  In addition to documentation, APIs, forums, blogs, books, peers, and tutorials, there is another source that you might be able to tap into as you are developing.  Pretty much most of the resources I’ve given you so far are asynchronous.  But how would you like to get help in real time?  Usually, that requires the physical presence of the other person.  Using IRC (internet relay chat), you can participate in a chat with people all over the world, asking real-time questions and (possibly) getting real-time answers.  IRC is the precursor to modern chat and chat rooms, and is something developers have actually been using for decades.

To download an IRC client, try out one of these:

Once you have these in place you just need to find the right “room” on an irc server.  For those in this class, you may find the following to be useful:

  1. #corona on irc.freenode.net
  2. #wordpress on irc.freenode.net (check out their official IRC info page at: http://codex.wordpress.org/IRC)
  3. #codeacademy on irc.freenode.net

And finally, once you get into a room, it’s nice to know the commands for doing more than shouting out everything to everyone in the room.  Here’s a quick resource on basic IRC commands: http://www.ircbeginner.com/ircinfo/ircc-commands.html.

 Posted by at 10:52 am  Tagged with:

Event listeners

 Class  Comments Off on Event listeners
Feb 202013

When you hear the word, “event,” what do you think of?  Here are some events that immediately come to mind for me:

  • Birthdays
  • IPTSO letter writing party
  • Theatrical play
  • etc.

If we were to break down the essential elements of an event, we might come up with the following:

  • time
  • place
  • duration
  • activity

Just like events in the lives of people, there is such a thing as an event on a computer.  What events can you think of that occur at a specific time and place and have a specific activity on the computer?   Some of the more common events that might happen on a computer or electronic device are:

  • click
  • double-click
  • mouseDown
  • mouseUp
  • mouseOut
  • touch:began
  • touch:moving
  • touch:ended
  • etc.

The Listening Game:

To better understand the parts of an event, try the following game.  Pick an action (e.g., raising your hand, stomping your foot).  Now, suppose you had a teacher in a classroom.  When that teacher gives a specific signal, you engage in one of those actions.  For example, when the teacher asks a question, you raise your hand.  When the teacher scratches his nose, you stomp your foot.  Go ahead, play the game (it’ll be fun!).

This game demonstrates the 3 parts associated with making use of events in your coding.

  1. A trigger
  2. A listener (you were actively “listening” for that trigger)
  3. An action

So, you have some object that is actively “listening” for a specific trigger.  When that trigger occurs, you carry out some action (or function).  Let’s consider this in our code.

Events in Lua

A simple event and listener might look like this:

    local function doThisThing(event)
        print(event.target.name)--show the id of the thing that was clicked
    --create an object
    local btn = display.newRect(110,100,200,400)
    btn.name = "Larry"
   --make the object listen for the "tap" event and run the doThisThing function
   btn:addEventListener("tap", doThisThing)

There are lots of events you might listen for in the CoronaSDK, many that you might not even think about.  For example, did you know there is an “enterFrame” event?  This event is fired (i.e., it happens) every frame of your project.  So, if your are running at app at 30 frames per second, that would mean the enterFrame listener would go off 30 times every second!  The enterFrame event is a Runtime event.  Here is the documentation for all of the possible events in the CoronaSDK: http://docs.coronalabs.com/api/event/index.html


Events in Javascript

To create an event in Javascript, we need to make sure we have our HTML in place first.  Let’s create a table with some simple data in it:


[sourcecode language=”html”]




Now let’s change the content of a cell to the opposite value when you click on it. We need to tell the cells to listen for a click, check what the current value is, then change it to the other value accordingly. Ready?

<script type="text/javascript" language="javascript">// <![CDATA[
//create an "action"
 function changeVal(event){
    var thisCell = document.getElementById("td1");
    if (thisCell.firstChild.nodeValue == "Hello") {
       this.firstChild.nodeValue = "Goodbye";
    else {
       this.firstChild.nodeValue = "Hello";
 //create a listener
 var obj = document.getElementById("table1");
 obj:addEventListener("click", changeVal, false);
// ]]></script>

For a listing of all javascript events, see this reference: http://help.dottoro.com/larrqqck.php

Types, functions, and types

 Class  Comments Off on Types, functions, and types
Feb 112013
gumball machine

A function is like a gumball machine

In reality, you’ve been using functions all your life.  A function is like a gumball machine.   There are 3 parts to every function: an input, a process, and an output.  In the case of our gumball machine:

  • input: a coin
  • process:  turn the handle, the machine deposits the coin in a repository, the machine opens a door, gumballs fall through the door, the door closes.
  • output: gumballs!

What other examples of functions can you think of that you’ve seen in real life?

A function, as defined in code, might look like this:

//define a function
function secretNumber(yourNum:Int) {
var yourNewNum = 100*((yourNum*7)/58);
return yourNewNum

//now we need to call the function to use it (so far, it's just been defined, but never used)
alert("Your secret number is "+secretNumber(4));

In the above code, the input was the variable yourNum; the process was to multiply that by 7, divide the product by 5, and then multiply that quotient by 100; the output returned the new number to you.


If I asked you to put a telephone into the gumball machine, you’d think I were crazy. Why? Because it’s not the right type of input. This machine only accepts the type of object that is a coin. Computer programs work the same way. A function is expecting a particular type of data. In our secretNumber function, we can see that an integer is required. Had we tried to use a string, the function would have failed. There are many different types in programming. Some of the more common types are:

  • string

    : a series of characters (letters, numbers, symbols). Typically, they are included in either single or double quotes.

  • integer

    : a whole number (no decimals!). If you include a decimal, the number will be cut off at the decimal point (not rounded). Can be used for arithmetic operations.

  • number (or floating point number)

    :a number with decimals.

  • array

    :A list of items. An array is different depending on the language. In javascript, an array is an indexed list of items. For each index, there is a value. Let’s consider that we have an array called “months.” At index 5, the value would likely be the 6th month, June (in javascript, array indices start at 0).

  • Object

    : An object is like an array; only, instead of having a numerical index, we find the value of specific properties by referring to their keys. Suppose we had an object named Person. In javascript, we can create a property of person as a key of that object, like so:

    Person.name = "Peter"

    The key is “name” and the value of that key is “Peter”. Objects exist in many languages and are similar to other types, such as: a hash, an associative array, a table, a list, a map, a dictionary.

CSS default values

 Class  Comments Off on CSS default values
Jan 232013

Each HTML element can be thought of as a combo meal;  That is, it comes with a pre-defined set of styles.  Even something as simple as a <p> tag has a whole slew of predefined styles.  For example, it is a block level element (which means it gets its own line), the bottom and top margins have a bit of space in them, etc.  Just like a combo meal, though, you can change those default values (using CSS).  Just supersize it!  To get an idea of what the default values are for many common HTML elements, check out this cool site that Kevin Ashton (a former 560 student) created: http://2tailedmonkey.com/gadgets/markup/html_combo_meal/latest/view.php

 Posted by at 12:52 pm  Tagged with:

Example of how to post a step on your PLE

 Class, Resource  Comments Off on Example of how to post a step on your PLE
Jan 072013

After submitting your Learning Contract, you’ll submit a step by Friday at midnight each night.  In submitting this step, you need to:

  • indicate what you did
  • include the source files
  • include a critique of your work
  • grade your work (out of 10)

Here are some previous examples that may help you to see what a useful “Step” post looks like:

Setting up a server

 Class, Resource  Comments Off on Setting up a server
Feb 212012

After watching everyone’s design presentations last week, it became apparent that everyone is going to need to set up some server space at some point in their projects.  Usually, this is something you’ll have to pay for on a remote server.  Check out the links on the “Hosting services” page for a few options regarding hosting.  For 1 free database with PHP already setup, you can check out freehostia.com.

Even when setting up a remote server, though, you’ll want to set up a server on a local machine for your own development purposes.  Developing on your own machine is called “sandboxing.”  The idea behind sandboxing is that you first develop something in a safe area, where you can “play” with the code, before deploying it for all the world to see on the public server space.  I strongly encourage you to sandbox your development by setting up a server development environment on your own computer.

In order to set up a server, you are going to need the server software on your own computer.  Lucky for you, this is way easier than it used to be.  First, let’s understand what you need.  There are three things:

  1. First,  you need the actual server software.  We are going to use the free, open-source Apache server software.
  2. Second, once your server is up, you are going to need some database software.  We are going to use the free and open source MySQL database.
  3. Finally, you’ll need some way to translate between database calls and HTML.  We are going to use the free and open-source PHP for this.

I didn’t include the links in the above descriptions, because I don’t want you downloading each of those software packages separately.  Instead, there is an awesome, free tool called either WAMP (for Windows), MAMP (for Macintosh), LAMP (for Linux), or XAMPP (another linux/mac alternative).  The first letter stands for the respective operating system.  The A-M-P stands for Apache (the server), MySQL (the database), and PHP (btw, the extra “p” on XAMPP is for Perl, another programming language).

So, download the either WAMP or MAMP, depending on your OS.  The really nice thing about these is that you can turn them on and off quickly.

 Posted by at 7:50 am  Tagged with: