Thursday, July 19, 2012

Today...Databases, the SQL!

We learned a little bit about representing data in an XML file, but now we need to address its limitations.

What happens when you have multiple items that have connections between them?  That's when you need a "relational database".

One of the most popular formats for a relational database is called SQL.  SQL is table based, and it lets you integrate large quantities of data into your web page creations using intermediate languages like PHP.

Let's take a look at my site, Thinkersmith, to see how databases can be used fo' reals.

Wednesday, July 18, 2012

Don't forget to comment about the course (good or bad) with the registrar!

This is our last day to cover the good stuff, so let's get to it!

We talked about ones and zeros, as well as the way those numbers are stored.  Now, let's talk about how they represent the things we care about...from letters, to music, to pictures from home.

With images, there is a lot to take in to consideration.  We can use black and white images to talk a little about image compression, but there is so much more to think about.  Remember hex?  Let's revisit it and start talking megapixels!

Where would computers be without sound?  Sound also requires a lot of space, but like with images, we can compress those items.  We're actually so used to the compression methods that we don't even question the .mp3 extension anymore!

All of this helps us see how incredibly important it is to have talented computer scientists.  As data continues to consume more and more space, it's going to be evermore important to store and transmit it efficiently.

For now, we can focus on manipulating the bits that we have.  Let's take out a piece of paper, then take one last go at our webpages!

Tuesday, July 17th, 2012

Please don't copy code straight across. Use your own abilities to take what you see and make it your own.

We're getting down to the wire.  Any questions?

This is going to be a day to play with our pages...JavaScript and CSS.  Let's look at some reference material, then work together!

Monday, July 16, 2012

Don't forget to look at your grade!!  I've added a "weighted" total that takes into account what percentage each piece is worth.  You still have time for extra credit, so if you have zeros on anything, it's not GPA suicide...yet!

Now, to some unfinished business.  Would you believe that is was SPACES keeping our style from reading our XML??

There are a few more things we need to go over before the final.  Part of that requires a deeper knowledge of html...and part of it requires problem solving techniques known as debugging.  Lets' do some!

Friday, July 13, 2012

Happy Friday the 13th!  Well, I think I scared you enough yesterday, so let's keep things more or less logical today!

It's time to make our pages even smarter!  Let's include some XML.  XML is a lot like HTML, except that instead of using pre-determined tags, you get to make the tags up yourself!

One of the great things about XML is the ability to present metadata.  

Let's take a look at how XML works.

There are several reasons to use XML, it's standardization is only one of them.

It's highly unlikely that we'll remember all of this unless we put it to the test, so let's head out to take inventory of the courtyard and store our data in an XML file.  What did you collect?  How would you recall that info?

XML is all well and good, but what use can it really be when it looks that ugly?!?!  Well, there's good news!  Just as we can style HTML with CSS, we can style XML with XSLT.  It can seem confusing at first, but fortunately, there's a handy XSLT reference. This is a video that explains the transform template.  Chapter 17 explains it in more detail.

Okay, so *that* was a ton of fun.  Let's look at databases in a different way.  Nowadays, the world is all about SQL.  SQL lets you do things like insert, delete, join and drop cells and tables. Here's a quick crash course...

Thursday, July 12, 2012

Now it's time to take a step back and remember that the Internet is a public place.  Even the most "private" corners of your Internet history are accessible to someone.  Keep in mind that once something is posted, you lose it.  It's no longer yours to control...no matter where you're posting it.

The Internet is like a public bulletin board where your data gets *copied* instead of taken down.  Many people have lost their reputations to the World Wide Web.

Think before you post!

Now, let's take a look at how easy information is to find.  Did you know that there is public information about you that you thought were private?  With enough information, it's extremely easy to find someone's address, phone number, even Facebook page.

Hopefully it doesn't come as any surprise to you that there are bad people out there.  Let's look at some of the other ways that information becomes insecure.

Some times, people who aren't usually evil do things that are less than savory because they feel like they are protected by the anonymity of the Internet.  What would you do if you could get away with it?  What would your neighbor do?

To protect your data from sniffers, various encryptions have been developed, including Public Key Cryptography.

So, how do you know that the entity that you're sending secure data to is *actually* who they appear to be?  That's where SSL comes in.

It appears we've been educated on the world of Internet evil.  How will you protect yourself?

Wednesday, July 11, 2012

In regard to assignment 3:  Instead of using your shell (or terminal window), you are welcome to use this site, or one like it.


We've started playing with script!  Let's keep going.  It's time to combine some HTML, CSS and JavaScript to start making our page really cool!


Let's step away from that for a moment and talk color, shall we?


With a proper understanding of color, we can integrate all portions of our page into one magical portal.  Let's see if we can get our page to play nice...

First, we'll create a page with a few named divs and a text box.  Using a button, we'll have our background change color according to what's in the box!  That little feat incorporates HTML, CSS *and* javascript!

Tuesday, July 10, 2012

Yesterday, we learned how data is represented in a computer.  Today we will take a look at how it's *stored*.  We obviously have all of our data converted into bits...1s & 0s. Presence or absence.  The book calls this the PandA system.  Presence and absence looks different in different forms of media.

One of the most recognized hardware terms is the "hard drive".  Traditionally, that has referred to a spinning disk which stores data magnetically.

Let's see how a hard drive works!



Currently, data storage is moving toward solid state drives, which are less affected by movement.  Solid state drives are just great big repositories of flash memory.

"What about a CD or DVD?" you might ask.  Well, those are fun to look into also, especially dvd's that we can burn at home...those have dye inside!

Fascinating, isn't it? Let's use this to create a human data transmission/storage medium!


It looks like we get the idea behind data.  So, why do we need to know this stuff to program?  Well, we need to know this, because different types of data take up different amounts of space...but we can talk about that more later.  For now, let's just get back to our JavaScript!


If we start with a basic page, we can hop into the JavaScript world very quickly by adding <script> tags. Let's do it.

Monday, July 9, 2012

Now that we've played with HTML and CSS, it's time to get into some JavaScript!

Before we do that, we need to pay it proper respect.  JavaScript is an actual language used in computer science, and it requires a great deal of foundation.  Here are some of the core concepts that we need to understand:

Data Types - Classifications for the actual type of data that we're working with.  In JavaScript, we primarily use strings, numbers or boolean values.

Data Objects - Most notably, we'll be working with lists of items...we'll refer to these lists as arrays.

Variables - Variables are essentially little boxes that hold some information that we will want to use later.  We may not know exactly what that information is going to be, but we know what we want to do with that information when we get it.  In order to write the code ahead of time, we need a placeholder for the information that we do not yet have.  That placeholder is called a "variable".

Functions - Functions are just blocks of information (or code) that you have defined ahead of time so that you can use it easily when you need it.

Once we get that information, let's write a simple page that uses all of these pieces.

This is all well and good, but in order to *get* it, we should really try to *get* how information is actually stored and transmitted digitally.  This week, we'll take a little time each day to reflect on this process.

1)  Let's learn Binary!







Additional Links

* Cisco Binary Game
* Get the hang of JavaScript!

Friday, July 6, 2012

MIDTERM!

Don't forget that Assignment 2 is due at the beginning of class on Monday! Be sure to turn it in on Blackboard by submitting the URL (starting with pages.uoregon.edu) or it won't be graded.

Thursday, July 5, 2012

A Web Page in 3 Easy* Steps!

1)  Create an HTML file in any Text Editor.
2)  Upload the file to your server with Filezilla.
3)  Browse to your page's URL with a web browser.

* If you've been paying attention

So, who's comfortable with these steps?  Anyone tried it yet?  Where are the hangups?

I'll be in my office from 12:30 to 1:30 if anyone needs to see me before the midterm.

One of the biggest parts of making it in this industry is making a decision.  Often, the decision-maker is respected, whether the decisions work out or not.  It's the people who can take charge who are remembered.  Let's take this opportunity to practice our presence and authority. At the same time, we can make sure the class is prepared for tomorrow.

We'll go around the room.  Two at a time, people will come up and make opposing statements. The class will have to determine and vote on who is correct.

Any questions?  This is your last chance to get your head on straight before the midterm, so ask away!

Tuesday, July 3, 2012

I've added some info to yesterday's stream entry so you can stay up to date with what we're covering in class:


Additional Links

* The page we worked on in class today
* Filezilla
* Smultron 3.5.1
* Logging on to Uoregon w/FTP

Now, let's take a little detour on the information superhighway.

Remember the hierarchy?  Remember the labels and relationships?  Well, it turns out that those are going to be *really* important to us.  

The World Wide Web is actually a hierarchy, when you think about it.  We start at the mother of all folders...the server.  For us, we're going to pretend our "root" is the server, even though it's really just the root of *our* particular website.  This means, in the future, when I talk about the folder under root/110, what I really mean is http://pages.uoregon.edu/yourName/110. Capiche?

If our root is http://pages.uoregon.edu/yourName, then what does the rest of the hierarchy look like?  What if I want to have root/110/images/pic1.gif?  How about root/110/p2/me.html?

You should be able to see something forming here.  I'm giving you a URL and asking you to derive what the Web hierarchy looks like.  Similarly, I can give you a path through the tree and ask you to turn it in to a URL.  It works both ways!

Now, imagine that the file structure on your computer is a hierarchy, too.  How do you know where your files are stored?  

What if we are already in a folder and want to access another file inside that same folder...do we need to go back to the root first?  No.  We *can* address locations according to our relative position to the file.  That is called "relative addressing".  When we send a browser back to the root and make it traverse all of the nodes again, that's called "absolute addressing".  

Let's take all of this knowledge over to the File Transfer Window.  

Open Filezilla and take a look at the two directory structures - your computer on the left and the server on the right.  Do you see the hierarchies?

Okay, now that we're back to Filezilla, there's one more thing that's going to be REALLY important.  Sometimes, you'll create a folder...then put something in it...and you won't be able to see it on the web. Often it is because you are "denied acces".

When you create files on the server, they are automatically given a combination of permissions. The choices are read, write, and execute.  Each of those permissions are set for three different types of user: owner, group and public.  That creates issues when your files get created so that even the owner can't write to it...or when the public can't execute your scripts!

We'll be setting our folders to 755 (keep this number in mind for later).  Now we're ready to get our files up on the World Wide Web!

Monday, July 2, 2012

We're about to get all computational on you. No, seriously.  It's time to enter...

...The Matrix!

Working with HTML

Take a look at this page.  Thrilling, right?

This page is an example of HTML.  We're so used to colorful, dynamic pages, but those cannot be created by HTML alone.

On our route to creating amazing pages, we're going to need to learn multiple web languages.

HTML alone provides a nice skeleton for a web page, but it doesn't *do* anything.  In order to provide calculation and movement, we must add muscles and organs...in this class, those are accomplished with JavaScript.

Even the strongest body looks a little off without skin.  We equate CSS to the skin, hair, and clothes.  CSS allows us to style our page in a way that looks enticing and professional.

Using a combination of HTML, JavaScript and CSS, we can do many amazing things.

However am I going to memorize all of these tags before the midterm?!?!?!  Don't worry, you don't have to memorize them all.  In practice, you'll usually be able to look coding samples up on sites like this one.  What I *will* expect you to have memorized is the basic frame of a web page, along with the <br/> tags, <i></i>, <ul></ul>, <li></li>, <div></div> and <script></script> tags.  In addition, we'll be learning how to comment VERY well.

After we practice creating a couple of different HTML formats (take notes, please!!) and we take our best guesses at what we'll see upon rendering, we will be ready to learn how to make the page do something interesting!


Additional Links

* The page we worked on in class today
* Filezilla
* Smultron 3.5.1
* Logging on to Uoregon w/FTP

Configuring FizeZilla for your shell.uoregon.edu account (By Mike Pangburn)After installing FileZilla on your computer, run it for the first time.

1. Click File–>Site Manager…
2. Click New Site
3. Type UOregon server to replace the default site name
4. Click in the blank text input box next to the word “Host” and typeshell.uoregon.edu (enter)
5. Click in the blank text input box next to the word “Port” and type 22 (enter)
6. Click on the Server Type drop-down menu and select the SFTP option.
7. Click on the Logon Type drop-down menu and select the Normal option.
8. For the User and Password inputs, enter your current DuckID username and password information.
9. Click OK to save these configuration details.

Now, to test whether those login credentials work, reopen the Site Manager… by clicking the menu item File–>Site Manager… and then choose the new UOregon server entry and click Connect.  You may have to click OK to proceed with the login.  When you are logged onto your server account, the FileZilla client will show your local computer account’s files on the left-hand-side of the window, and your server computer account’s files on the right-hand-side of the window.