[ Silence ]
>> So the format for today's review session is just we're
going to begin by asking for any general questions you guys have
on the course material, and then our first seven
or so slides are the topics of the course broken
by down lecturer recap, so just to sort of jog your memory
and see if there are any other topics you want
to make sure we cover.
And then, after that, we'll just dive into a review
that we've prepared and we'll make sure while doing
that to cover any topics that you guys have mentioned.
Sound good?
So, to begin, anything you want to make sure
that we talk about today?
>> Good. So, first things first.
The scope will be tested from first lesson to...
>> Okay.
>> Yes. So the exam -- the question was about the scope
of the exam and it's non-cumulative.
So we'll cover materials, lectures five through nine,
meaning the things that are pictures and audio visual
up through today's lecture on JavaScript and Scratch.
Any other general questions?
>> Yes. I'm [inaudible] format.
Would it -- is it roughly going to be
like similar to the [inaudible]?
>> It will be similar to the first exam so,
as some people have told me, long,
and it really does test all of the concepts we've covered but,
hopefully, also doable and with a fun, grumpy CAD reference
in there I'm sure, as well.
>> And now also, I guess, what we talked about with the ciphers
that we talked about those things?
>> Yes, we'll talk about those today, so RJ is going
to start making a list of [writing
on board] topics we want to be sure to cover.
We'll put ciphers right on there.
>> [Inaudible] also we have a field with a concrete list
of topics that will not be covered?
>> Concrete list of topics.
>> Yes. Just, just like last time.
We'll have like a little...
>> Great.
>> [Inaudible].
>> Yes. So Tommy is going to prepare another, for the camera,
another list of topics that will be covered on the exam
and things that won't be covered on the exam.
And that will be posted, too.
Any other specific topics or shall we dive in?
So we'll just display the next slide.
So we began Lecture Five by talking about graphics,
and these are some of the things we talked about:
raster and vector graphics, additive
and subtractive color mixing, lossy/lossless compression,
image formats, also file formats, and scene carving.
Are there any of these topics in particular that we should --
[writing on board] all right.
We'll just keep running through these slides,
and if you see something that you want to make sure we talk
about -- hopefully we'll be able to talk about any -- everything.
But just go ahead and call it
out if there's something you want to make sure we cover.
So, sampling analog waves, mp3s, graphics -- keep her going --
online security, anything...
Do you remember what sessions are?
SQL injections?
>> Yeah. SQL injections.
>> SQL injections would be a good thing to talk about?
>> Yeah, we have yeah, this is a [writing on board] sort of a...
>> Yeah.
>> ...[inaudible].
>> [Writing on board] Yes.
No, that's one of the more complex things
that we talked about, in my opinion.
We talked about data security and we're going to talk about,
in this encryption section,
we'll talk about our two ciphers,
asymmetric key encryption.
Does everyone remember that?
We'll talk to them, all right?
>> Yeah, everything.
>> I just had a quick question.
>> Yeah.
>> The current fix is applied to the forensics.
>> Yes. So forensics in this context is recovering data
from the hard drive or even RAM.
[ Pause ]
>> Yeah, so we'll be sure to go over as much of this as possible
and we'll post these slides online, but anything
in particular that you want us to make sure we talk about,
definitely let us know.
>> Yeah. And we had a couple emails before class today
of topics that we'll have to make sure to cover,
and I think those related to CSS, in particular.
So we'll be doing that as well.
And then the last thing we did before HTML and CSS was design.
Any specific design things we should be sure to talk about?
All right.
Well, let's get it started.
We began with graphics.
Oh, let's go one more slide.
When we talked about raster and vector graphics --
can anyone tell me what raster graphics was?
>> So, like for basic raster graphics we have sort of grids
that are defined by the color light that...
>> Exactly.
So we have some set, we have some grid or set of grids
in which we have many different squares.
Each square has one color.
We refer to that as a pixel.
And the alternative was this vector graphics
where we use some mathematical equation
to store our image data.
And the simple example that Tommy gave was, if you wanted
to define a circle, we can use the mathematical equation x
squared plus y squared equals r
which is the equation for a circle.
And therefore, it allows us to scale up much more easily
because to make a bigger circle we can just make a bigger value
for r. Any questions on this so far?
Does that make sense to everybody?
So, as we said, vector graphics are much easier
to scale than raster graphics.
But then you might say, once we move
into more complicated things than a circle,
how will we use vector graphics to define an image?
And so the practice is just to define multiple control points
and multiple equations going through those control points.
>> And I should just say, as we keep going through these things
and as you, you know, ultimately end up studying later this week
or this weekend, always feel free
to post questions on "Discuss."
So for those in the room and also those watching this video
at home, you know, this is not your last time
to ask those questions.
As things come up, post them on "Discuss" and we'll be sure
to answer them as quickly as we can.
Is that -- probably one of the best ways to sort
of confirm your knowledge about something or fill in a gap
where you just don't -- you're studying;
you're just not sure how these pieces fit together.
>> Great. So we then talked about additive
and subtractive color mixing.
Additive color mixing being when we start
with a black background, you could say, and then sort
of add colors of light to create the final color that we want.
So as we learn on course, we're tested on our problem set,
the primary set of colors for that could be RGB.
So if we just shine red light, we get a red image.
If we shine red and green light, we get another color.
Then we talked about subtractive color mixing in which,
instead of starting with black and just adding colors,
we started with white and subtracted some colors.
So, for instance, we saw that cyan absorbs red,
and yellow absorbs blue.
So if we mix cyan and yellow in this subtractive color mixing,
we'll actually end up with green because we absorb all the red
and all the blue and we're just left with green; so,
two different models for representing colors.
And the primary colors
for subtractive color mixing were cyan, magenta, and yellow.
We then moved on to lossy and lossless data compression.
Lossless compression being when we compress an image,
but sort of just use tricks so that we maintain all of the data
from the original image file.
And the example we talked about was a flag,
when we had big stripes of the same color.
So instead of saying, "This is a white pixel,
this is a white pixel, this is a white pixel,"
say "The next thousand pixels are all white."
And you can say -- you can see how that might take
up less space and thus give us some compression.
But then lossy compression goes further.
It might use tricks like that,
but then it also actually throws away some of the data found
in the original image in the interest of further compression.
And please do stop me at anytime if you would
like some clarification or have questions.
>> There is a Rhino file, like an image file, that was,
you know, one megabyte, and then I showed you two compressed
files that were half a megabyte and a quarter of a megabyte.
Which set of compression does it seem
like we used for those two files?
>> Loss of compression?
>> So, I think the question is...
>> Yeah.
>> ...if we have one that was reduced down to a quarter
of a meg and one that is reduced to half a meg,
which one used lossy, which one used lossless?
>> [Inaudible].
>> I would say the quarter meg used lossy
and then the half a meg probably used lossless.
>> Right, because there's only so much we can --
all right, so the answer that I was giving them was
that the half meg would probably --
lossless, and the quarter meg would be lossy.
There's only so much that you can conserve with these tricks,
and if you want to get any smaller,
you have to start throwing away data.
Now, of course, they could both be lossy or both be lossless,
but I promise you that one was one and one was the other.
But, yes, the bigger one would be lossless
and the smaller one would be lossy.
>> Yes. And then we talked about a few different file formats
that use these different types of compression.
So we started with the bitmap file, a .bmp,
that actually uses no compression.
That was our most simple example of raster graphics.
Then we talked about gifs and pngs both
of which use lossless data compression; and then moved
on to jpegs which use lossy data compression.
Any questions on these things?
Great.
>> Actually...
>> Yeah.
>> ...on the last problem -- not the last problem set,
the problem set where we had to make the logo design for the...
>> Yeah.
>> ...class itself.
I tried to save that logo that I did in PNG, and I did it
through GMP, but GMP wasn't a category that was on there --
excuse me, PNG wasn't a category to save it in on GMP, you know,
to save the logo itself because I wanted to download Photoshop,
but Photoshop's a really big file.
>> Yes, sure.
>> I think I'll put it on the [inaudible] drive.
But I downloaded GMP and I tried to save it in PNG
but it would let me do it.
It would only let me do it in a GMP file.
>> Yeah. So the question for the camera was about GMP
and about these other file formats,
and one student here used GMP but was trying to save it
as a PNG but could only seem to save it as a .JIF,
and so the answer there is different programs allow you
to save in different formats.
I think with GMP, in particular, you can save
by default in this XCF format.
But if you want to save in other file formats like a JPEG
or a GIF or a PNG, you have to -- in GMP in particular,
do something special like go to "file",
"export" or "edit, save as."
And it's different in every program.
I think GMP allows you to export into different file formats,
so I think if you do "file",
"export" in GMP it will let you make a PNG.
I could be wrong.
I know that by default it's going to save
as this XCF or this weird...
>> I saved it as XCF.
>> Yeah, the weird format.
When you sent it to me I opened it as --
in GMP but it opened fine.
Yeah, different programs have different default formats
and different formats they can handle
and different formats they can export to,
so Microsoft Word can save as a dot dot or a .X,
and it can save a copy as a PDF, for example.
Like Word can't open PDF but Word can export to PDF.
It can make a copy of a current document as a PDF.
And different programs just do things differently.
So that GMP handles it a certain way
and Photoshop handles it slightly differently.
>> So we then moved on to our AV Topics.
If you want to move one further there.
And we started talking about analog waves
and how we can represent analog waves with digital sounds
or a digital representation.
So our question was, how do we go
from this continuous analog function
to some digital ones and zeroes?
And our solution was to take samples along the curves.
Can anyone tell me what a sample is?
Not too difficult.
>> A number of bits.
>> I, I -- yeah?
So it's not even quite that complex yet.
But if we have some sort of wave like this,
and then we say we're going to sample at this point.
So now we've stored some data on our computer
about what the sound looks like at this point.
So the thing that we then introduced was a sampling rate.
So, if I wanted to model this entire analog curve with just
that one point it wouldn't do a very good job, right?
Because this stores no data
about what the sound looks like over here.
So then we introduced more samples --
one over here, one over here --
and then the more samples we introduced,
the better our representation.
But also the more space it takes up.
So the sampling rate then is just the number
of samples we take from the curve.
And then I think as Chris was getting at,
the bit rate is the number of bits we use
to represent each sample.
Any questions on this material?
No. Okay. So we then talked about mp3 files, and we talked
about how that these songs stored
in the mp3 file format take up about a tenth of the space
as things stored in CD quality or PCM.
And the way that mp3 compresses is by, taking advantage
of the phenomenon known as, "psychoacoustics."
So psychoacoustics is just some things that --
about human biology such as humans can't hear certain
frequencies or if two similar frequencies are created
at the same time, you won't hear the lower one.
And so mp3 simply says, all right,
if humans can't hear the sound, we're going to throw it away.
Of if the sound is masked by another frequency,
we'll throw that away.
And in that way mp3's use psychoacoustics
to compress sound files.
Question?
>> I just meant -- just say, can make like a rough analogy.
It's just like the auditory equivalent of lossy [inaudible].
>> Would you agree with the analogy, OJ?
>> Let's repeat it for the cameras.
The question, yeah, the question for the camera was, "Is this,
you know, have a rough analogy to the -- what was that?
-- images with lossy, lossy compression?
>> If it helps you to think of it in that way,
then I would say yes because it is compressing.
And I think, I think actually you are correct.
It throws away some data that was originally there,
but hopefully the quality is still preserved.
So, yes. All right.
Our next AV Topic was 3D Graphics.
So we talked about wire frames, meshes, and subdividing.
A wire frame was just when we create a model
that defines the edges of a 3D object.
So we define some point in 3D space and then the lines
that connect those points.
In those lines we saw in our recap, I believe,
an image of a panda bear, and the lines
around the panda bear could be curved.
Then when we moved on to a mesh, which is a type of wire frame
where each component is a polygon,
that means our lines can no longer be curved.
They have to be straight.
And the example there was this cool
polygonally-created dolphin.
Then subdivision is a little different.
It was a technique we used to smooth surfaces,
which is a little value perhaps, but we saw the example
of the diamond ring that initially started out as sort
of a big blocky box for the gold band, and then a diamond
that didn't really look like a diamond.
But then subdivision took each polygon and subdivided it
into multiple smaller polygons.
And through that way we started with a flat surface
and then made it several curved surfaces.
And then from there we could smooth out those surfaces more
and eventually get a truly smooth curved 3D surface.
We then talked about video.
We talked about Kodak, codecs containers and compression.
So, containers are the things you may have seen before.
Those are the files that store sort of all of the video data
like your video files, your audio files,
your movie menu, and your subtitles.
And the codec is a program that compresses
or decompresses video.
And we talked about a standard of doing that which was H264
or also known as AFEEC.
Any questions on those two things?
The difference between the two?
No? Okay. And then we talked about compression --
and the method of compressing a video file that we talked
about was just storing the changes
between different scenes.
So if you think of one scene with --
because this is CSE1 lead
by Tommy Mack William -- a cat in it.
And maybe over here we have a chair
and on the other side we have a cat and it's rolling around.
It's doing something adorable.
It's moving but the chair isn't.
So between different scenes of this video we can just sort
of throw away the chair because it's not changing
between the different scenes.
So all -- all that -- the only data we need to keep
around is how the cat is moving.
And that allows us to throw away a little data
and save some space.
Questions on this process?
No, we're okay?
Great.
>> On the same vein as JPEG.
>> Exactly.
Yes, similar to JPEG's lossy compression.
We then talked about video streaming
which you guys may have used on a website like, HULU or YouTube,
in which we start playing a video before the entire file
is downloaded.
So the way this is done is
by downloading the upcoming minutes into a buffer.
So while we're on minute three,
hopefully we're downloading minute four.
If this doesn't work, then you get stuck with those screens
that say, "buffering" while more of the video file is downloaded.
So it's not always a perfect system, but it does allow us
to begin playing a video sooner
than we otherwise would be able to.
In this section of the lecture recap we also talked
about aspect ratios which are just the ratios between width
and height in various resolutions.
So I'm sure the -- like 1080
by 720 resolutions are familiar to you guys.
And then the aspect ratio is just the ratio
between those two numbers.
Common ones are like 16 color nine, or 4 3.
And then we talked about adaptive bit rate streaming
in which the server decides
which resolution is best for you.
So it thinks your connection is too slow, so it's going
to send you a lower resolution that takes up less space.
Or if it's really high quality,
it will send you very high quality video.
>> So before we dive into this next topic,
I thought I'd take a second
and talk about, you know, study tips.
I definitely recommend the recapture a great resource.
Now when you go over the recaps, make sure you sort
of cross reference it with the list of topics for the exam
so that you're not -- feel free to learn as much as you want,
but you're not like memorizing
or studying necessarily the things that are not going
to be covered on the exam.
But on the recaps a lot of the topics are --
a lot of the words are in bold, you know,
things like compression or lossy compression --
these sort of terms.
So those are pretty useful to learn and to know.
So if they're in bold, they're probably a story associated
with them, you know.
If we ask you to describe, you know,
what lossy compression means, we often give an example
of an image that can be compressed
in a lossless or lossy way.
So, definitely go through the recaps.
They're a great resource.
If there's something in particular you see,
you read the story that's listed with the --
you don't quite understand it, you know.
Maybe go to the lecture video that covered it
and you can search through the lecture transcript to find
that component and if still then,
having watched the lecture video,
something still doesn't quite make sense, feel free, again,
to just ask us questions on "Discuss."
We really want to make sure you understand this before going
into the exam.
But the recaps are a great resource.
And the section videos are also fun
for reinforcing these things.
But the recaps and the lecture videos
and things should be the first sort of method for studying.
And if there's something else, you can either Google it or go
with the PDI if the resources we provide don't fully explain
something in a way that makes sense.
>> And RJ just described my method of preparing
for this presentation.
Start with the recaps, move on to the lecture videos
if I can't remote something else.
So, online security was our next topic.
We began by talking about sessions, but to build
up to the topic of sessions,
we introduced authentication and cookies.
So, authentication is just how we authenticate and say
that we are who we say we are,
and on the Internet we often do this
by providing a username and a password.
But then servers will often store cookies on our machines,
which are just small text files so that they can better remember
who it is that we are.
And the way that sessions make use of this is
through a unique identifier for our specific browsing session.
So if RJ and I are both on some website like Facebook,
then maybe I get the ID 123, RJ gets the ID 456.
So then, for every action that I make, instead of having to enter
in my username and password again, I can just send along
in an HTTP request this unique identifier.
So I can pass along my string of 123 and with
that way Facebook can say, oh, 123, that's Ben,
and know that I am in fact who I say I am.
Now for those of you who really know your stuff, you'll remember
that this leads to some vulnerabilities
in the CSRF attack which we'll talk about in a little bit.
Questions on what these things are -- important topics.
Okay.
>> [Inaudible] the big section over there,
all of our adoring fans.
>> Oh, anything -- nah, they're fine.
They're very smart people.
>> [Laughter].
>> We then talked about HTTPS, a way of securing traffic
when sending it to a website.
So the "S" is for "Secure," HTTP Secure, and it uses a layer
on top of the HTTP known as the Secure Socket Layer.
And that encrypts the data before sending it to the server.
So our previous HTTP protocol was to sort
of write the request, send it off,
and some server receives the quest
and interprets it, does what it will.
But now we add this extra step, so we write the request
and then we encrypt it, and we send off the encrypted version
so if any bad guy grabs it on the way,
they just get this encrypted HTTP request
which they hopefully don't know how to decrypt.
And then when the request reaches the server,
before they can read it they decrypt it.
But, hopefully, they know the key.
And so for this reason, servers have
to explicitly support HTTPS.
So I can't, unfortunately, just go to HTTPS://CSE1.net
because if I started sending them an encrypted HTTP request,
they wouldn't actually know how to interpret it.
So servers have to be ready and they have to support HTTPS
to be able to decrypt our encrypted messages.
>> Oh, any question on that, or...
>> Yeah. Just go ahead and -- do you have something?
>> [Inaudible] this -- this just could be a question
about proprietary servers being one step would cut that setup
like I was just thinking, you know, the banks, and...
>> Yeah, so hopefully --
the question was about proprietary servers
that may have this set up.
So services like Facebook
and Google all support this as far as I know.
And then, hopefully, things like banks, as you were saying,
to support this because we don't want
to be sending our bank account numbers and passwords
and information in an unsafe manner.
Then another way -- parallel or --
parallel to HTTPS is WiFi security.
So you can use both of them;
you can use one of them or the other.
But WiFi just allows you
to encrypt all the traffic on a network.
And I talked about this a lot in my section video,
but it was covered briefly in lecture just in the context
about there are these technologies known as WAP
and WPA and WPA2 that you can use
to encrypt all the traffic on your network.
So WAP was cracked so I would advise any of you
who are currently using it to stop.
But WPA was then a follow-up,
and then WPA2 was another iteration of WPA;
so the most recent and the standard safe encrypter to use.
>> And there're two types of the WPA, right?
WPA2, right?
>> Yes. So WPA and WPA2.
>> And I think we get to touch to a PA2 right?
>> Yes, so we didn't get into any more --
oh, the question was, "Are there more types,
a second type of WPA2?"
And I believe so, but for our purposes we sort
of just introduce these terms
and didn't even get too much into...
>> Yes.
>> ...the differences between them.
So then we got into a relatively complex topic,
that of databases.
So a database just being several tables, one or more tables
which -- each table can --
where each table consists of some columns and some rows.
The columns define what information we're going
to store, and the rows define the values for that information.
So, for instance, if we're designing a Facebook --
as I did a few years ago, under the alias Mark Zuckerberg,
we might want to store [laughter] someone's ID
and username and email address.
So those would be the columns.
And then for all our different users,
we would have rows storing those values.
So, for -- in my row, it would have the ID One
because I was the first one to use the Facebook
and then my email address, benshry@rjpointer.net
or whatever, and my password.
And the way we interact with databases is
through this language called SQL or Structured Query Language.
And we saw these sort of funky, syntactical markers,
things like select, insert, update, and delete,
and we did go into a fair bit of detail with these things.
So I would encourage you to look back at the recaps
and definitely feel comfortable reading and writing SQL queries.
So things like "select star from some table."
Know what that means; or "delete everything."
Know why the XKCD comic is funny.
I guess that's more about SQL injection.
But the point is, if you have any questions about the format
of SQL, how we write it, now would be a great time to ask,
and it is an important concept.
Yeah?
>> So, yeah, this time [inaudible].
>> This is when it gets...
>> Yeah, sure.
>> So this is kind of -- is there any other resource
or target of the resource?
How far do you want us to take this?
Should we do the, you know, Code in R4 -- I mean, how far,
you know, the depth -- how far do you want us to go?
>> Tommy, do we have specific --
the question was how much SQL do we expect you to know?
Do you have any specific information?
>> Yeah. I mean, to the extent we covered in lecture.
It was like the basics like...
>> Yes.
>> ...you know, recognizing what a select query looks like
and what a query will do.
And then as far as objections
like why specifying certain inputs won't work --
like what they will do to the query, but you don't have to be
like [inaudible] and [inaudible].
>> Yes.
>> Just kind of recognizing the basics of...
>> So the response is you're not going
to be expected to write paragraphs.
You're not going to be expected to know all the intricacies.
But you should be familiar with the basic statements like
"select this from that" or "insert."
And then he also talked a little bit about SQL injections
which we'll get to in a minute.
[ Pause ]
So then, this is a minute later, we get into these attacks.
We talked about CSRF which is our cross-site request forgery,
and that exploits the fact that your session
with some website is still valid once you navigate
to other websites.
So the example in our class that we used was if you log
into your account at bank.com and then go
to malicious site like rjaquino.net.
And RJ has put a link on his site
that says -- that has a URL.
And for this to work the bank does have
to have some pretty major security flaws.
But say that the bank allows you to transfer money
by accessing bank.com/transfer.php
and then just specifying
with the key value pairs we've seen the person you want
to transfer to and the amount you want to transfer.
So just by putting question mark RJ equals a thousand
or something along those lines, we could transfer $1,000 to RJ.
So then if RJ puts a link on his site that puts this link
on his site, and we are already authenticated
through these sessions on bank.com,
then when we click the link, bank will say, "All right,
we had a session for this person.
So you're authenticated.
You are who you say you are.
So you must really want to give RJ $1,000."
Any questions on this topic RJ wants to...
>> Yeah, so let me try to make that a little clearer.
Like if right now if you click a link to a Facebook photo,
and you're already logged into Facebook,
Facebook will just bring you right to the photo, right?
And if you're not logged into Facebook,
Facebook will ask you to log in.
So if I'm logged into Facebook and then I go to my email
and someone's emailed me a link to a Facebook photo
and I click it, I'll end
up on Facebook.com/photo?id equals something,
and I'm actually looking at the photo without having
to log in a second time.
And so this type of attack tries to leverage that.
That websites, if you're already logged in,
let you go to certain pages.
And so the example here was that a bank had a withdraw page
or a transfer page that someone could provide a link
that when you click brings you to that transfer page
and it acts a transaction for you.
And so -- besides, there are plenty of ways of printing
against this, mainly requiring you to type
in your password before you do any sort of transaction
like that, or not having a link
but does all these things for you.
But that would be the type of attack
that websites conveniently let you stay logged
in when you're not on the page
through these cookies in sessions.
So we have to get a whole section video on these sorts
of attacks and that was one example.
So I hope that makes it a little clearer --
how this works and what it's trying to do and why this type
of hole exists so that you don't have to log
in every time you want to go back to Facebook.com.
[ Pause ]
>> So then we moved on to data security, specifically,
instead of online security.
And we talked about these ciphers.
So Caesar cipher, Vigenere cipher,
and then how we can break these ciphers using brute
force attacks.
Is there anything you want us to specifically cover
on Caesar cipher and Vigenere cipher
since we talked about them?
>> Well, you know, my thing was that...
>> Just...
>> ...I just wanted to...
>> Great.
>> ...like to make sure
that I knew the difference between the two.
>> Sure.
>> So, the Caesar cipher is
when we just rotate each character with one key.
So we might have some string "hello,"
and then our key could be something like three [writing
on board] and so then for every character in the word "hello,"
we're just going to move it three characters further along
in the alphabet.
>> It's all right.
>> I don't -- you don't need to actually do it.
I feel like that's a lot of pressure to put
on RJ on the spot here.
But then [writing on board] the way Vigenere cipher is a little
more secure is by instead of...
>> Three.
>> I don't really...
>> H...
>> ...think it would be...
>> ...I, J, K, E, -- A, B, C, D, E -- F, G, H.
>> [Inaudible].
>> L, M, N...
>> L, M, N, O -- L, M, N, O and L, P, Q,
R. So I've moved each one forward three spots
in the alphabet.
>> So do we have any questions about that basic concept?
Because that's very important for both
of these types of security.
So that's how they work.
And then Vigenere's takes it up another level.
So instead of having one numerical key,
we're going to have a word that defines multiple keys.
And so the way this works is you could sort of think
of it as a transition.
First, instead of having one numerical key,
we could three numerical keys.
So instead of the key three,
we could have the key, one, two, three.
And so then our first [writing on board] as Art is drawing
on the board, the first letter would be changed by one,
the second by two, the third by three, and then we would wrap
around in our key so that our fourth one would be changed
by one again, and our firth one changed by two.
And then the only addition that Vigenere cipher uses
and says instead of representing this key as three numbers,
we represent it as three letters.
So instead of one, two, three, we would have the key a, b,
c. And just say that a means one, b means two, c means three.
Any questions on how this works?
Okay. And then brute force attacks is just
when we try every single possible combination
of something until it works.
So if I'm trying to guess your password or trying
to break your Caesar cipher, I'm just going
to try rotating every letter by one, and then by two,
and then three, which is why Caesar isn't as secure
as Vigenere because there are fewer possible ways we can
rotate something using the Caesar cipher.
>> How many are there, Ben?
>> I don't know -- approximately 25.
>> Can I do it, Ben?
>> You're really going to do Rock 26?
So you could rotate by 26 letters, but as we discussed
in lecture, that would wrap you back
around to the letter you're currently on
and not provide much security.
>> No one ever guess it [laughter].
>> Great, that's good.
Next slide?
>> Sure.
>> Thank you.
So this is an example of symmetric key encryption
in which the same key is used
by both the sender and the receiver.
So if RJ is sending me a message using the Caesar cipher,
it's not much good unless I also know the key he used,
how much to rotate it by.
But then we also have some alternative ways
that we can encrypt.
Things called "using asymmetric key cryptography."
And that's the example that Tommy talked about
and then we introduced these paint colors
and really a great demo.
But, essentially, we just have people --
every person has a public key and a private key, and if I want
to send a message to RJ, I encrypt it using his public key,
and then the only way to decrypt
that message is with his private key.
So once I encrypt a message using RJ's public key,
he's the only one who is able to decrypt it.
Did I make a mistake somewhere?
>> In -- just in public place.
I fixed it.
>> Oh, thank you so much.
RJ's already fixing my mistakes.
Any questions on how this works?
So we use someone's public keys to do the encryption,
and because they're the only one with their private keys,
they're the only one who can decrypt the message.
And so a lot of these systems are implemented using something
called "a trapdoor one-way function,"
something that's just easy to go in one direction
but more difficult to go back.
And the example we used was multiplying together two really
big prime numbers to create an even bigger number.
So it's relatively easy to take two relative --
two big prime numbers and multiply them together
to get one even bigger number.
But once we have that really big number,
it's hard to go backwards and find
which two prime numbers could have been multiplied together
to make it.
Set, process.
>> A big number, yeah.
>> Yes. Great.
[ Pause ]
So then we got into some various types of malware.
So malware is the umbrella term that encompasses all
of these things: the viruses and worms, and the adware,
spyware -- etcetera that we'll talk about in a second.
So, the viruses are a type of malware
that require human interaction to infect a machine.
So you have to open an email attachment.
You have to download or run a file.
Do something that gets this process started.
And once you do, then it's able to damage,
it's able to self-replicate by sending itself to people
in your address book or something along those lines.
Now worms are a little different.
They're able to self-propagate.
Even without the human interaction, they can move
to different machines.
And the way they do this is by targeting security holes
of computers on a network.
Then we also, as a corollary to this topic, talked about botnets
and distributed denial of services attacks.
So because a worm can self-propagate, it can spread
to many different computers on a network.
And once it has control of all those computers,
it's able to do some malicious thing on all of those computers.
And one malicious thing we could do is launch a distributed
denial of service, or DDOS, attack.
And that's just an attack
in which we all start sending a bunch of requests
to just one website and the server is not able
to handle all those requests, and sort of shuts down,
isn't able to provide web pages to the people
who actually want to see the website.
Does it make sense how we go from worm self-propagating,
to the creation of a botnet, to the botnet's launching a DDOS
from many different machines?
All those pieces fit together?
Great. So then other types of malware;
we have spyware, Trojans, and adware.
Spyware is just the name for something
that steals information from your computer.
An example could be a key logger which when put on a computer
like logs the keys that you're typing in.
So maybe it notices that you're constantly typing password1
because your password is password1, and now it knows.
And a Trojan is just spyware disguised
as some useful piece of software.
So, like, I download RJ's Super Amazing Antivirus Protection.
But in reality it's not antivirus protection;
it's spyware in itself.
And then we also talked about adware
which is just another form of malware
that displays unwanted advertisements on your computer.
So how can we protect ourselves from this malware?
We talked a little bit about antivirus software.
We did a section video on it, as well.
And then we talked about some password security like tips
and tricks and ways to just make your password a little
bit stronger.
These things include just making it longer
and not basing it on common words.
So the reason for this is because,
in addition to these brute force attacks, hackers have --
or crackers, or whatever it is we call them --
have more sophisticated ways of accessing our data
than just a brute force attack.
So instead of trying just a random set of eight letters
like P, Q, R, and then maybe some numbers: 1, 3, 4,
a smart attack program might try some common words or variations
of those words before the random sequences.
So it might try the word
"password" before it tries X, Z, W, R, Q, X, Y, C.
>> Did you just say my password?
>> RJ's password is...
>> X, Z, W, R, X, Y, Z.
>> Q, Y, Z.
>> I think it was...
>> So, RJ has a very secure password.
But my password, which is CSE1password, is not secure.
Any questions on why dictionary attacks are smarter
than brute force attacks?
Anything I think with this.
Great.
>> And I might note, they're smarter
because like the most common password
out there is "password."
>> Yes.
>> The second most common password is, you know, like,
something username or something straightforward like --
if you look at -- if you Google the top 10 most common
passwords, some of them are obscene,
but most of them are regular words like
"password" or things like that.
>> Yes.
>> My -- one of my friends suggested that I put "what"
as my password so that when he says, "What is your password?"
I can go "Oh, thanks," and type in the word...
>> And then we ended our discussion of data security
with the topic "Forensics" just in the context
of recovering data from a hard drive or even RAM as we saw
in that cool video where we were freezing RAM
and then getting data off of it later.
So the two questions that we sort of want you to answer
for us are; are files deleted
after we move them to the Recycling Bin?
And then once we move files to the Recycling Bin,
are they deleted when we click the "Empty Trash" button?
So, first one.
If I move a Word document to the Recycling Bin,
is it gone from my computer?
No.
>> I know.
>> No. The answer's no.
Not even close.
I can just open up my Recycling Bin, click on it,
it opens up just like it previously did.
What about once I empty the trash,
and I can't even find that file any more?
Still not deleted.
How is it still -- how is it still there?
>> So basically it's -- you can click Directory, you know,
that entry is basically there.
Like your computer forgets about it.
>> Perfect.
And so the answer was your computer forgets about it.
So the Directory entry is no longer there,
but the bits remain unchanged.
So our computer forgets about it
and at some point we might overwrite it,
but for now we left it in tact, just forgot where it was.
So if I delete a whole bunch of JPEG files,
but then know how I can go back and use some forensic analysis
to look for JPEG files, even if I deleted them,
I still might be able to go back and find them.
Any questions?
Make sense?
Great.
>> That information is still on the table of the files,
you know, [inaudible].
>> It's no longer in the table of files.
So we've forgotten where it is,
and so without forensic analysis we don't have a way
to get to it.
But with forensic analysis we can go and find that data still
because it hasn't been cleared.
We haven't set all the bits to zeroes.
There's still the same zeroes and ones
that made up the file before.
>> So there's a special software that exists that allows you
to recover files, so --
I used to work at the HUIT where people come
in with broken hard drives or malfunctioning hard drives
where the computer wouldn't start up,
their files wouldn't open
because something had gotten messed up.
But the scanning software would go through and look for bytes
that signal -- oh, this is a JPEG here.
And if it found this is a JPEG here,
whatever the symbols those might be, whether a sequence of zeroes
and ones those might be, it would then try
to recover the JPEG file, and the file formats are such that
if it can figure out what file format something is,
it can reasonably recover the data.
And so it would just scan through, you know, bit by bit
or byte by byte, looking for these special markers and trying
to figure out, oh, what file is here, and it would come back
with maybe 35 JPEGs out of 70 that were on the computer
or maybe it would find all of them, and maybe it would back
with some more documents and, hopefully, we'd recover,
you know our -- the person's wedding photos
or their senior thesis or whatever it might be.
This won't be on the exam but back up your data, please.
>> I think that's a reasonable thing to put on.
>> Anything that's important, anything that you would miss
if I came over to your computer and just took it.
Have a copy somewhere.
>> [Inaudible].
>> Have two copies because if you have one copy then you're
not really in that great shape because well, once you have --
once you lose your computer, you're relying on one copy.
So, personally, I just don't have
that much data I care about.
Most of its music, or photos, or things --
or photos I do care about, but I have a copy of those.
But just back up your data.
That's -- you -- maybe -- maybe it will be on the exam.
A question, should you back up your data?
The answer is yes.
>> [Inaudible].
>> Short answer.
>> Short -- powered up response.
Why should you back up your data?
>> 10 powered ahead now.
No 10-powered FSS.
>> It says here...
>> I'm not grading unpowered FSS.
>> Or anything.
Privacy.
>> [Laughter].
>> Excuse me.
Moving on to privacy.
All right, we'll try to get the rest of our topics wrapped
up in the next few minutes here.
Moving one slide further.
>> Sorry.
>> No problem.
So we talked about these two things;
authentication and authorization.
Authentication just being when you allow a user to log
in via some other website.
So you may have seen the login with Facebook or login
with Google buttons, and that just uses some standard
such as Open ID to allow you to not have
to create a new account.
So I don't have to create an account for randomwebsite.com.
I can log in with my Facebook and then Facebook can get
that person some information that says,
"This is Ben Schryock."
He is who he says he is.
And then, authorization on the other hand is
when you give the third party access to some
of your information, so such
as your Google Calendar or Contacts.
And this usually displays on some screen that says like,
"Do you authorize Google to give this application access
to your contacts, into your calendar?"
And it has a list of all the things
that they're requesting access to.
And then you can say, "Yes, I authorize this," or "No,
I do not authorize this."
And the standard used for this many times is OAUTH
or Open Authorization I believe is what that stands for.
Then we talked about tracking cookies
which are just a variation of cookies that are stored
by some third party to track our browsing history.
So the example we looked at was if ad.com is serving ads
on cat.com and dog.com, and it sees we've been on cat.com.
It sees we looked at one of their ads on cat.com
and later we go over to dog.com, so now it's going to say,
"This person's also interested in cats.
The cookies that were just sent to me say
that they were on cat.com.
So now I'm going to display to them a targeted advertisement."
Does that make sense how we can use third party cookies
to generate information?
People can track us a little bit and could be used by advertisers
to just create some targeted ad.
Yeah?
>> [Inaudible].
I have a question on [inaudible].
I'm still not clear on how it [inaudible] interpret the cookie
from the other website.
>> So...
>> [Inaudible] it would...
>> That's, that's from the company.
It sounds like this.
It's the ad management company that works
for dog.com and cat.com.
>> Exactly.
>> Right, right.
So, what I'm saying is...
>> So, yeah.
>> ...the cookies are supposed to be a lead known
by the computer and the server...
>> Yes.
>> So, is it just the URL that interprets and knows or --
because in the cookie it interprets...
>> So, the question is,
"How does that ad server essentially interpret the
cookies on both sites?
Or, how does it know?"
>> Well, yeah.
The actual third one does...
>> Yes.
>> The third party cookie.
In other words...
>> Yes. So because it's...
>> ...it's supposed to go with one cookie, right?
>> Yes.
>> ...which is the one that is on the network
that -- the ad network.
But the other one, how does it interpret that information?
>> So the answers to, "How does it interpret these different
cookies" is, it's one cookie and it's one company, ad.com,
displaying ads on two different sites.
So you're right that its cookie is encrypted in a certain way.
So when you see the ad on cat.com,
it sends a cookie onto your machine.
And then when that cookie gets sent back on dog.com
or on cat.com, it's still the same company
or the same third party with the same cookie.
So they know how it was encrypted,
so they're able to decrypt it.
So it does have to be the same third party.
There's not like some generic cookie for all third parties.
But when you have an advertiser displaying
on two different sites, it can just use the cookies it put
on your computer on one site
to then generate some targeted ad on another site.
>> You can always add a cookie to the site -- you know, --
only, only ad.com can access the cookies for ad.com,
so like you can be just be like sitting, you know,
some session ID is like sitting there...
>> Okay.
>> If I'm cat.com I can't access the cookie for ad.com?
But because ad.com has started to pull from the [inaudible]...
>> Yes.
>> [Inaudible].
>> Sorry, that's what I was trying to...
>> So, true view for the camera, it's not necessarily encrypted
but ad.com in this scenario is the only one
that can access ad.com's cookies.
But because ad.com was serving content --
or serving ads to both cat.com and dog.com, it has access
to all that information.
>> Yes. Apologies.
>> [Inaudible].
>> You're sending...
>> Yes.
>> ...the same cookie to ad.com
and another cookie on [inaudible]...
>> Yes. So the same cookie is being sent
to ad.com despite being sent from two different sites.
Okay.
>> So you as a web browser or you as a browser
of the Internet is going to have one cookie per domain name you
want to send, so you have one cookie for ad.com.
If you happen to be on cat.com but an ad from ad.com is there,
you're going to send that cookie.
If you happen to be on dog.com and you're responding to an ad
from ad.com, you're going to send the exact same cookie.
And so that cookie is going to sort of build
up this information and let ad.com know where you are.
>> Great. Thank you, RJ.
Thank you, Tommy.
So then we talked about server logs and analytics
which is just the -- sort of some ways that servers
or webmasters can generate data about you and you're browsing
on their site specifically.
So the server log is a [inaudible]
that stores maybe each URL visited on the site.
So if you go to CSE1.net/recaps it will store that.
Or CSE1.net/lectures -- store that.
And it could contain things like the IP address, a date and time
or a user agent, and a user agent just being that string
where we told a big story
about how these user agent strings are just getting
so much longer.
But in reality they just describe the web browser they
are using.
And then we talked about analytics
which is just services used by website owners or webmasters
to track more information and generate more interesting data.
And this can be useful; so Tommy showed the example
of Google Analytics.
And then we talked about AB testing which is
when we shows one feature to some users
and another feature to other users.
For example, if Facebook wants to see if people
like some new color, like if they want
to make everything red,
then maybe they'll show some users their classic blue
background and some a new red background, and then they'll see
if more people are visiting the site
with the red background compared to the blue background.
Maybe they want to make the switch.
Question?
>> [Whispering] [Inaudible].
>> [Whispering] Okay.
[ Pause ]
And then we talked a little bit about protection
and how we can use a proxy server to hide our IP address.
So a proxy server is just another stack
that we can add to this HTTP chain.
So we send our request to a proxy server
and then it forwards the request on our behalf.
And in that way the server that we're eventually going
to send this request to doesn't get information
about our IP address because it's hidden by the proxy.
Other things we can do in terms
of general privacy are encrypt our hard drives,
encrypt our email using something called GPG.
Fun fact; that uses the asymmetric key encryption
that we talked about a little earlier.
Yeah?
>> So I was [inaudible] in one of the problem sets --
So if this problem about proxies and VPNs...
>> Yeah.
>> ...was [inaudible] so what is the main difference
between a proxy and VPN?
Can a VPN be a proxy as well, or is it just
because the tunnel doesn't curve the...
>> So, if it's all right, the question was
about proxies versus VPNs.
I think we'll answer that in just a few minutes
after we finish recording just so we can make sure to get
through everything, if that's okay.
Thank you.
So we talked about, I think, one of our last topics
in this domain was cyber law, DMCA, which was a two-part act
that spoke to copyright issues and anti-circumvention issues.
Copyright just being that the owner of some software
or some intellectual property or something along those lines,
has exclusive rights to reproduce and distribute
and derive more products from their work.
There is a fair use exception for education parities,
things of that nature.
And then the other part of this DMCA was the anti-circumvention
portion which prevents you from breaking
into protected software.
So things like your DRM protection on iTunes files
or certain music files -- you're not supposed to crack that.
Or programs like Adobe Photoshop --
that it might allow you to use them for free
for some certain amount of time before having
to type in a product code.
Breaking into that system, entering a fake product code,
is not okay based on the DMCA
and by general ethical guidelines.
So then our last topic was design which --
if you'll move one slide further --
we started out just talking about the principals of CRAP
which stood for Contrast, Repetition,
Alignment, and Proximity.
So these are important things.
Contrast can be not only color but also things like shape,
size, and typography, and are often used on various website --
elements of the website -- just to make them more usable.
So you might make your sidebar, because that's used
for navigation, a stark contrast from the page's actual content.
And then Repetition -- just repeating elements like a logo
or a header can help build a brand name.
So I just download an app called "Mood Panda"
and their logo is a panda bear.
So on the front page there's a panda smiling at you,
and on the loading screen there's the same panda's face
in place of one of the O's in Mood.
So they constantly put in this logo on different pages
of their product to build the brand.
An Alignment is just -- you've all left-aligned
or center-aligned something in a Word document maybe.
So that's just the placement of elements.
And in our Facebook example we saw how
that can create a visual hierarchy and some structure
on a page with a lot of information.
Then we talked lastly about Proximity
which is a visual grouping.
So if you have an article displaying on a page,
you're going to put the picture, of course, binding that article,
close to the text of the article and close to the title
of the article and the author just so that
when you take a quick glance you see
that those are grouped together as opposed
to corresponding to different things.
So then we talked about Typography,
and this is important just in the fact
that Tommy loves typography,
so it probably will be disproportionately covered --
maybe between 95 and a hundred percent of exam questions.
>> Okay, why don't you two like just look like [inaudible].
>> Yes. No, we didn't cover too much
so we'll just talk about it quickly.
I guess it speaks for itself.
You can take a look at the recap for some more information,
but some major points were serif versus sans serif, whether
or not fonts have those little edges or flourishes on the edges
of the characters; mono-space fonts
in which every character takes up the same amount of space;
then some various descriptors of a font like baseline, midline,
how big various parts of the letters are, and then the amount
of spacing between lines or characters; and then kerning
which I think is actually really cool.
So look back at the recap for why that's important.
Then our last slide for this presentation is
about usability heuristics.
We just talked about a list of 10 of these heuristics
which are just rules of thumb
that we can use when designing a UI.
And these include things like matching to the real world.
So iBooks uses a bookshelf
so that we don't have some new unfamiliar user in Facebook
but instead have something we're used to seeing.
And then other things like allowing for keyboard shortcuts
to make your UI efficient, and then allowing people
to use the mouse to make it flexible.
Just general things like that that give people a good UI.
We won't ask you to list all 10
but if you are curious they're covered in the recap.
So I think we briefly want to cover CSS.
>> Yeah, it was -- as -- I got one question via email
and I'll be sure to write up the longer bit at others --
I'll add a couple of slides
to this presentation before it goes online,
but the question was, "What does the dot mean in CSS?
When do you use a dot versus a hashtag?"
And a dot in a CSS selector means class.
So if you want to find something with the class "button,"
it would be dot B-U-T-T-O-N and then whatever CSS rules you want
to be applied to your buttons.
If you wanted to find the CSS element with the ID
"my button" then it would be hashtag my button
and then the rules.
So again, dot means a class,
so multiple elements may all have the class "button"
and then .button, and then apply to that.
Or as the ID field in a single element would be a hashtag
in the CSS.
And I'll be sure to add a few slides or grab a few slides
from the lecture notes
that really provide concrete examples of that.
>> Did we have another question about CSS?
>> Not that I remember.
>> Okay. Are there any last questions we can answer before
we let you go?
>> And let you go simply means turn off the camera.
You come up here and ask us questions.
>> Yes, precisely.
Well, great.
Thank you very much for sticking around, for watching online.
We hope that this was useful
and if you do have any questions please post to "Discuss,"
answer each other's questions,
and we'll be frequenting the forum
to answer your questions, as well.
Thank you [applause].
>> Thank you, guys.
[ Applause ]
[ Silence ]