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

 

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
Sep 182012
 

This week, I did the first two lessons on codeacademy bla bla blabn aln al.  Check out the attached file for my awesomeness!  I did everything and got it all ot work, so I think I deserve a 10 out of 10.

 

FormFun

 Posted by at 4:10 pm
Feb 212012
 

One of the most oft-repeated imperatives in the scriptures is to “ask.” Try it out. Go to scriptures.lds.org and enter “ask” into the search box. I got 345 results. Put that together with “knock” and “seek” and you’ll notice that there is hardly anything that the Lord directs us to do more than to search out, think about, and ask for the answers to our problems.

As I have been troubleshooting my own programming needs, I have found this to be one of the most important things I can do to increase in knowledge. When you come across a programming behavior that baffles you (either it doesn’t work the way you’d expect or you just don’t know how to do it yet), SEEK the answer. Just as with the Lord, we need to go to the source to find the answers. Go to someone reputable, whose advice and instruction you can trust.

Next, PONDER their advice. Think about what they’re saying and put it to action. I often find that I have a quick reply along the lines of, “yes, but that doesn’t help me.” But then, when I stop to really digest the answer, I find that the person who offered advice often is saying something more meaningful than I initially interpreted. Remember D&C 9:7. “Behold, you have not understood; you have supposed that I would give it unto you, when you took no thought save it was to ask me.”

FInally, ASK. Ask for further understanding, for clarification, etc. Make sure to “ask not amiss” (2 Ne. 4). One way of asking amiss is to expect the person you are asking for help to do all the work for you. Another way is to provide too little information. Programmers can be very helpful, but they might not be as kind as the Lord is if you expect them to do everything for you.

Feb 062012
 

So, for 560 today we introduced the concept and basic notions behind CSS.  The basic idea is that you want to separate the style layer from the structure layer.  Doing so allows you to replace style without modifying structure.  A GREAT site that demonstrates this is CSSzengarden.com.  The principle concepts that you need to understand for CSS are:

  1. selectors, classes and IDs
  2. positioning
  3. the Box model

Here’s a file you can download to practice CSS with (if you don’t have your own).

 Posted by at 9:56 am
Oct 032011
 

When programming, have you ever found yourself doing the same thing over and over again, with only a slight modification each time?  That’s where loops come in handy.  There are many different kinds of loops.  The “for” loop is perhaps the most basic, so let’s start there.

Suppose I want to count from 1 to 100, counting by ones.  I can do this in the following way, using javascript.

for (i = 0; i >= 100, i++) {
     alert (i);
}

Let’s break this down.  In this “for” loop, there are 5 distinct parts.  The iterator, which we called “i”; the starting point, which we said would be “0”; the stopping point, which we said was 100; the amount to increase by each time, which was ++.  ++ in programming means “increase by one”; finally, inside the curly brackets { }, we told the loop what to do each time.  In this case, we said, “alert the iteration I’m currently on.”

These basic elements are the same for most languages, though in some they are not all required.  For loops in php are very similar to for loops in javascript.  In PHP, I would write a for loop to print 1 to 100 on the screen in html using the following loop.

for (i = 0; i < 101; i++) {
     print i.”</br>”
}

in lua (the language used for the CoronaSDK), the for loop looks a little different, but basically the same.  Consider the following:

for i = 0, 100 do
    print (i)
end

notice that I didn’t have to write “increase by 1” each time?  That’s because, by default, the loop structure assumes that you want to increment by 1 each time, so you only have to write the incrementation when you want to use a different value.  For example, increasing by 5 each time would look like this:

for i = 0, 100, 5 do
    print (i)
end

Iterating over arrays

The above  is fine and dandy if you want to do something a pre-determined amount of times.  What if you wanted to loop through each item in an array and do something to it?  There are several ways of doing this.  Let’s start with a “foreach” loop in php.  A foreach loop simply says, “for each item in X array, do something.”  For example, suppose you had the following array:

$classNames = array(“Peter”,”Ammon”,”Robert”,”Jen”,”Mike”,”Pam”,”Vera”);

Let’s suppose you wanted to add each of those folks to a list.  You could use a foreach loop to: (a) print the person’s name, and (b) enter a carriage return (i.e., go to the next line).  It would look like this:

foreach ($classNames as $name) {

     print $name.”<br/>;

}

pretty easy, no?  Let’s break it down.

  1. The “foreach” command indicates that the loop needs to do whatever is between the curly brackets to each item in the array.
  2. $classNames indicates the entire array
  3. $name is a variable I made up to represent a single entry as you are working on it.  This is the variable you will likely use the most inside of the loop (i.e. it’s the variable you’ll be operating on).

What if you had an associative array and you wanted to use the key as well as the value?  For example, suppose our array looked like this:

$classBirthdays = array(

“Peter” => “4 April 1978”,

“Ammon” => “23 November 1956”,

“Jen” => “2 November 1973”

)

Our loop would then look like this

How might you use a for loop in your project?

 Posted by at 7:43 am