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!).

http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

 Posted by at 1:33 pm
Jan 082014
 

Today we discussed the basics parts of a URL and the basics of HTML.  As far as the basics of HTML, a former student actually put together the very tutorial (with the same metaphors) that I based my lesson on.  You can find that here (http://2tailedmonkey.com/topic/html).

 

Regarding how to understand a URL, I couldn’t really find a good resource that I liked on the Web.  So, I’ll break it down here.  Let’s start with the basics.

  1. First, it’s best to understand that a URL is an address.   Let’s consider the following address:

    149 E. Countryside Circle, Park City, Utah, 84098-6102USA

    Looking at this address, we can see that it is the address of a specific building (149 E. Countryside Circle), in a specific city (Park City), in a specific state (Utah), in the USA.  In other words, a URL is just a set of information about where something is located.

  2. Now, let’s look at a URL, or web address:

    http://education.byu.edu/ipt/index.html

    Just as a physical mail address, this web address shows us several parts, going from the largest to the smallest.

    1. education.byu.edu is the domain (like a state or country)
    2. ipt/ indicates that the file we’re looking at is inside a folder named “ipt” (like a city)
    3. finally, index.html indicates the name of the actual web page, or file we’re looking at (like the individual building)
  3. Sometimes, urls get to be a bit more complex. For example, you may see something like:

    http://education.byu.edu/ipt/faculty.php?name=peter

    That little?name=peter at the end is not a new page, but actually information that was passed to that page from another page.

    1. the ? indicates that everything from that point on is data. It’s like saying “load the faculty page, but with the following informationK
    2. name is the name of some variable
    3. = indicates that the value of the variable is about to follow
    4. peter is the value of the variable name.
 Posted by at 10:03 am
Jan 082014
 

As one student once said in class, “that’s not a website, it’s just a document.”  That’s exactly right!  Web pages are nothing more than individual documents that can be interpreted by a browser.  By extension, a web site is a group of files that are linked together.  Today in class we covered two things: available resources and creating a basic HTML page.

Available resources

BYU offers access to the Safari Tech books online.  You can access them by:

  1. going to lib.byu.edu
  2. clicking on e-books (bottom-right hand corner)
  3. choosing the “Safari Tech Books” link (about the middle of the page, 3rd item down)
  4. Search for the book on the topic you’d like.

I’ve listed other resources that you might also use.  You can view these by clicking on the “resources” link on the right-hand menu.  I think W3Schools and Tizag.com are good places for beginners to get short, concise tutorials on different elements.  You’ll get less of the conceptual knowledge and the lessons are not project-based as you will get if you use one of the Safari Tech Books.  So, find which one works best for you and start looking at the available lessons.

Creating a basic HTML page

This is more of what we discussed on Monday, only today you all got to be the drivers.  You created a document, and used the following structure to create a web page with a title in the window, a main (level 1) header, and an image.  Here’s the code we generated in class:

basic html

 Posted by at 2:26 am

Final exam

 Class  Comments Off
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:
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:
Feb 252013
 

12 And it came to pass, when Ben-hadad heard this message, as he was drinking, he and the kings in the pavilions, that he said unto his servants, Set yourselves in array. And they set themselves in array against the city.

So, what did the soldiers look like once they had arrayed themselves? Arrays are an extremely useful construct in programming. They allow us to group items together in lists. Lists are all around us.  For example, a grocery list: eggs, milk, butter, cheese, yogurt, etc..  We can see a physical example of an array even with one item on this list. Look at the eggs, all arrayed in white! (sounds scriptural, doesn’t it?)

carton of eggs

A carton of eggs is an array

An array at it’s simplest is referred to as an indexed array. For each item, there is a value. This would be like a numbered list. Be careful as you consider the index of an array as some indexes start at 0 and others start at 1. Typically, this depends on the language.

Another example might be a list of people and their birthdays.  For example:

  • Peter: 4 April 1978
  • Robert: 6 July 1968
  • Jen: 2 November 1973
  • Ammon: 23 November 1956
  • Mike: 20 July 1984
  • Pam: 11 June 1981
  • Vera:

There are more complex arrays, too.  Imagine having an array within an array.  We could see this on an album of songs:

An album list is an array of arrays

 

Feb 212013
 

For a little bit of levity, here’s some wisdom from XKCD, that ever-insightful comic strip for programmers and geeks.

How to code well

 Posted by at 10:57 am  Tagged with:
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:

    --action
    local function doThisThing(event)
        print(event.target.name)--show the id of the thing that was clicked
    end
 
    --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:

HTML
  <table>
   <tbody>
    <tr>
     <td id="td1">Hello</td>
    </tr>
   </tbody>
 </table>
Javascript

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

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.

Types

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.

Jan 282013
 

Last week we introduced and discussed CSS.  Specifically, we talked about the following:

  1. CSS stands for Cascading Style Sheets

    This means that the last (or most specific) item processed takes precedence.  So, an external stylesheet gets processed first, then embedded styles (using the <style></style> tags in HTML) get processed next, and finally inline styles (set as attributes on an HTML tag) get processed last.  These last items will override any earlier styles.

  2. CSS syntax

    Inasmuch as CSS is a different language than HTML, it has it’s own syntax.  Instead of referring to elements as tags (as in HTML), we refer to them as “Selectors” (because we are selecting specific elements to style).  Once you identify a selector, you change value of specific properties.  This is done inside of curly brackets.  So, a template looks like the following:

    selector { property: value; }

  3. The Box Model

    Each element* has several parts to it: content, padding, border, and margin.  This is what is commonly referred to as the Box Model (see http://www.w3schools.com/css/css_boxmodel.asp for a visual).  The width of an element is the width of its content (except in Internet Explorer 7 and earlier, which counted all the way up to the border).

Click to download the files we created.

 Posted by at 2:39 pm