Tuesday, August 14, 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, August 8th, 2012

Where would computers be without sound?  Sound also requires a lot of space, but like with images, we can compress those images.  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, and see where we stand.

Tuesday, August 7, 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!

Monday, August 6, 2012

Today, you need to pay *really* close attention...or else the assignment is going to feel very difficult!

Thursday, August 2, 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!

What about Recursion??

Wednesday, August 1, 2012

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

Tuesday, July 31, 2012

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?

Monday, July 30, 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?

Thursday, July 26, 2012

Did you miss a quiz?  Afraid you will?  Here's an extra credit opportunity.

Sign up on StudyBlox.com, and create 10 blox.  Drag those blox into a stack and submit the URL for that stack on Blackboard.

Oh, and here's a video in case the idea of grades freaks you out!

Tuesday, July 24, 2012

Quick note:  Make sure ALL page code is inside either <head> or <body> tags!

Let's play with color a little, then we can use our skills to play with CSS!

Monday, July 23, 29012

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


In regard to the midterm...way to go, you!

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

Before we get to that, let's talk color, shall we?  


There are two kinds of color...emitted and reflective. They give us two different blends.  In web, we use emitted (or additive) which is expressed in a combination of Red, Green and Blue - RGB.

Thursday, July 19, 2012

The assignment has been put back on Blackboard for one more day.  Please submit it if you haven't already!


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!

Once we're comfortable, we'll take a look at nesting tags, and debugging.

Wednesday, July 18, 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!

Tuesday, July 17, 2012

Yesterday we learned about the building blocks for programming.  That's all well and good, but in order to *get* it, we should really try to *get* how information is actually stored and transmitted digitally.

1)  Let's learn Binary!







Additional Links

* Cisco Binary Game
* Get the hang of JavaScript!

Monday, July 16, 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.

Thursday, July 12, 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?


As long as we've got the HTML thing down, we might as well start exploring some of the other languages!  What if we want to add a little style?  What about JavaScript?

Okay, now what do we do to try to figure out our assignment?  How do we tackle this on our own?

Wednesday, July 11, 2012

Here's the page from yesterday:


http://pages.uoregon.edu/christie/110/notBlank.html


I want to go through how to get pages on the Internet.  Let's play with FTP!




It's time to 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!

Tuesday, July 10, 2012

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.

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! Then we can learn how to upload them to the server.


Additional Links

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

Thursday, July 5th, 2012

Assignment 1 is due at the start of class tomorrow.  Luckily, you all earned a DAY OFF through good attendance!  That means that you'll need to drop your project off at the Homework Boxes in Deschutes BEFORE 2pm on Friday 7/6.  Projects will be collected at 2:00 and anything after that point will be considered late.

Please bundle your assignments together and label each piece.  You can staple pages together or put it all in a ziploc/manilla.  Just make sure it will stay in tact in the mailbox!

Conquering the algorithm!

What *is* an algorithm?  That word strikes terror into the heart of people everywhere, but I'm about to demystify it for you.

An algorithm is just a list of instructions that you can follow to get a desired outcome.  It's a series of steps that leads you to a result.  In fact, many of us use algorithms pretty frequently.  Shopping lists, recipes and DIY websites.

We use algorithms much the same way in computer science, except that we get all excited about making sure that we're using the smoothest algorithms with the least number of steps, which gives the fastest result.  We're kind of obsessive like that.  Sorting is one of the things that we're a little compulsive about.  Searching is another one.  Can you figure out why?

Monday, July 9, 2012

Let's put some of our algorithm knowledge to work and make ourselves an outline for a web page.  We're going to get a leg-up on our next assignment and start thinking about our first web page.  We'll work on it one step at a time.

Get out a piece of paper.  In the upper left-hand corner, put the picture of yourself.  To the right, list:
* Your name
* Your dream job
* Three fun facts about yourself

We'll be building on this page over the term, so feel free to add some additional information to the bottom of your paper.

Now, let's see how we might implement that...

Here is the basic outline of a web page.   I'm going to change the text to say "Howdy, there!"  Imagine in your mind what it's going to look like.  Can you picture it?  Were you correct?

Now I'm going to add a second line.  What do you think it's going to look like?  Does it?

It's time to add a picture.  Let's find one of cats.  Does that look like you thought it would?  Why is it different?

Finally, let's put in a link.  The link uses the anchor tag.  What part of this can I reuse for other links?  What will change?

Tuesday, July 3, 2012

Let's shift our sights from being a technology user to being a technology creator.  It really does take a special way of thinking to jump over the hurdles that occur in such a rapidly changing industry. The current method for preparing minds for this challenge is called Computational Thinking.  The trick is banishing the fear of "getting it wrong" and just giving it a try.  Computational thinking provides the tools required to lead you toward success.


Let's talk about Decomposition and Abstraction.

For next week, please remember to bring a small picture of yourself (about 2"x2.5"). We'll be using them in class.


Additional Links

* CSisFun.com
* Google's Computational Thinking

Monday, July 2, 2012

HTML review.  What is a Tag? An Attribute?  Inner HTML?  An Element?
How ever are we going to learn all of our options??  GOOGLE IT!

"Romeo, Romeo, wherefore art thou, Romeo?"

In that phrase, the word "wherefore" does *not* mean "where".  What does it mean?  If you didn't know, how would you find out?

Web searching (Nowadays called "Googling") has become one of this generation's most abundant methods of getting new information.  This is both a blessing and a curse.  Often, web searches will be too broad, returning a bunch of unrelated material.  Sometimes, they're too specific -- or just wrong -- and you don't get enough good results.  Here are some tips on getting a good web search.

This is actually a great segway into some very important logic that we'll be using when we start programming.  Let's use this opportunity to cover 'AND' & 'OR'. Here's a video that explains it in dominos.  We can explain it in a web context with a simple exercise.

So with a little practice, we can get really good at finding great answers quickly.  Let's try it online:

Search for a website that gives us the basic website structure in html.

Search for information on how to include a script in your page.

Search for information on how to insert css into your page.

What does "wherefore" mean?

------------

Now that we know how to find pages that are relevant to our search, we need to know whether we can trust them or not.  The first thing you should do is find out who your information is coming from.  Is it a reputable source or someone you've never heard of?  Does the information sound plausible?  Can you find any other results which corroborate the information? How deep is the hierarchy for the page? Does the entire root belong to them?

Which of these articles is false?

* Police Save iPhone from Hot Car
* Teen Survives Spear Through the Head
* A Vest that Lets You Hug Yourself

Be careful, because sometimes even the Big Guys get it wrong!

------------


Additional Links

* CSisFun.com

Friday, June 29, 2012

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.

Thursday, June 28th, 2012

What is TCP?

Why is TCP paired with IP?

TCP/IP is very handy, but how do we know where the data is going in the first place?  Well, we read the URL, of course.  The URL delivers us right to the exact location of the final HTML file.  In order to create a URL, we need to understand the file structure of the internet.  This hierarchy is important for proper network organization.

What is a hierarchy?

Imagine a workplace with a CEO who oversees Managers, then the Managers oversee Supervisors.  Finally, Supervisors oversee the workers who provide the actual content.  Even more similar is the structure of our computer hard drives.  What part of our computer would be the CEO?  What would the Managers be? How about the Supervisors?  The Workers?  Now, translate that one more little bit to a web server.  Now, the domain server is the CEO.  It's at the top level.  The name servers are next, followed by the folders and finally the working files.

This hierarchy structure is repeated frequently in computer science.  You'll see it more as we start to talk about HTML, XML and even in some algorithms.


Additional Links for this Session


* HTML Hierarchy

* Tree Structure

Wednesday, June 27th, 2012

What is an IP address?

Why do we need DNS Root Servers?

Look at the list of top level domains in Snyder on page 67.  Can you find your initials?  What country do you stand for?  Where is the top level domain in the URL hierarchy?

So, now that you know that data is shipped all over the Internet, even between countries, you may be wondering how information gets back to you without getting lost.  The truth is, it doesn't.

Information is getting lost all the time.  Fortunately, many protocols have been developed to limit the damage caused by dropped packets.  There are protocols for times when data is more important than speed (TCP) and protocols for when speed is more important than data (UDP).

The average webpage request is processed over TCP.  This means that a message is broken up into tiny pieces and shipped off in different directions.  Often, most of the pieces take different routes to their destinations, so we have to label them very well to make sure they all get to their final destination.  If the sender doesn't receive confirmation that a given packet has made the journey, it will send a replacement.


Additional Links for this Session

* Grace Hopper Describes a Nanosecond

Tuesday, June 26th, 2012

Well, now that you know how the internet came to be, it's time to learn how it works.  We're all familiar with typing a url into our address bar and being whisked away to our favorite websites.  What you may not realize is that there's actually a lot more to it than that.  In order for your computer to get to the information it needs, it goes through several steps; one of which is a DNS lookup.  This process explores several client/server relationships along the way.  (Insert Client/Server game here)

This is all just one long-winded way of saying that information transportation isn't magic.  There's a lot of choreography that goes in to getting your computer to dance.


Additional Links From Today

* DNS Lookup Route

* TraceRoute Service

Monday, June 25th, 2012

Welcome to CIS110.  This will be a very intense (and hopefully entertaining) summer series.  You should plan on at least 5 hours of reading and 10 hours of homework each week outside of class.  


Cheating is absolutely not tolerated. Neither is disrespect or condescension.  This is a difficult subject and the best way to learn it is as a team.  Here is what I expect. This is what the University expects. 


Your book should be in-stock at the UO Bookstore.  We'll be following it pretty closely, so please try to read the chapters before the day that we reach them in class.


Now that we have all of that out of the way, let's get started! These are exciting times.


___________


In the beginning, there was light.  Well, actually, in the beginning there were phone lines, and light came a little bit later ... at least as far as the Internet is concerned.

That's right.  The beginning of the Internet happened over an infrastructure that was little more than sending morse code by wire.  Today's Internet is only slightly more complicated, utilizing standardized technology and fiber-optics, but the  payoff has been amazing.  You may not be very familiar with the history of the Internet, except to hear others say that Al Gore claimed to invent it. Gore was, in fact, an important part of the Internet's development. He was inducted into the Internet Hall of Fame as "Instrumental in helping to create the 'Information Superhighway,' Gore was one of the first government officials to recognize that the Internet’s impact could reach beyond academia to fuel educational and economic growth as well."



Additional Links From Today

* Out with a Bang!

Welcome!

Welcome to CIS110 12U B!  That's a shorthand way of saying that you are in the second daily session of CIS110 for the summer of 2012.

Classes will be held Monday through Friday from 2 to 3pm, between 6/25 and 8/15 (with the exception of Wed, 7/4).

Please remember that attendance is MANDATORY as we'll be flying through this material at warp speed.  I promise to make it entertaining, if you promise to pay attention :)