Webmaking 101: Unit 1 Lecture


we can actually simplify the internet
into two basic concepts interoperability hyperlinks you can understand interoperability and
hyperlinks you’ve got the fundamental idea of what the internet is so let’s order opera bility say i have two programs notepad and mere office it’s kinda like
microsoft word now and i creatine in our in non inoperable document tax document now we’re gonna go up and we’re gonna
save it hands just whatever name is there but the
typing weren’t labor offices operable with microsoft
word i can saving all these formats on issues dot doc you go ahead and say anne siese popped up here now we’re going to put it into notepad which cannot open word files this is non interoperability if we want them to enter operate we have
to say that in a file type in fourth can handle notepad only does plaintext so if i want this to work in notepad
mystery of the file and star now this time when we say that we’re gonna save it that is operable what with pad because nampak point this text and here’s the file dragon now works used to be that if you had uh… while you’re sending from back to
a p_c_r_ by server sir it was an guaranteed bit they would have
the right software installed to make it work so if the solution i cannot wait for the
internet when they’re designing an wise html it’s a common document format everybody could agree on they would make their computer system
people to read this document format html center hypertext markup language um… and then they also agreed on
something called h_t_t_p_ h_t_t_p_ is the way for the computers to our
country today they have to speak the same language defined here at noon in pasadena and i’m talking to a
computer in new york i’m sending this over the airwaves across the internet and if they don’t know how to talk to
each other i’m not going to get the file any so i have to speak the same language the
language that they created his h_t_t_p_ hypertext transfer protocol see notice html h_t_t_p_ east two principal visit the creativity network there keys of interoperability they both have h t hypertext at the beginning so once the transfer protocol ones the
markup language of the or the document format but they’re both hypertext what
is hypertext well as the second key thing and the internet
hypertext means beyond text it’s more than just regular text has
hyperlinks and other interactivity the use of the old terminals where you
can actually tap on the monitor uh… follow a hyperlink and we take you to other parts of the
document or to other documents the hyperlink is something that connects
one part of the internet to another so the internet you can think of it as a
big web with all these different little anchor
points and each anchor point has links hyperlinks hypertext that go out to other part little anchors
all parts of the internet seemed at a point here point here point here here here here here here and these points are all connected to each other one x internet gray is that not only is
this one point connected to all these other points we’ve got of their points within here that are all connected to each other and
that says just look like a web in reality it actually looks more like a a big neural network it’s it’s actually discount chaotic the reason is that no one point is more important than any
other point everything complete in the web is equally able to access any
other part of the web so would you have hyperlinks they’re connecting all of that they’re
the connecting threads on this whether the snack and they’re connected anywhere well this action wasn’t very intuitive
it was an invention of ten burners lee that was well thought out to make sure the
internet would be inoperable and that would facilitate the hyperlink you have all these uh… alcohol use different papers so the old way of doing it might be
something like connects to years server that’s that you’re reaching
that’s in another part of the world and you know you type in the number or
whatever any of the login then yes navigate
through that computer rectory structure they have to find the file kind requested and i think it’s entirely had
to you and then you can hope in it hopefully it’s in a format that your
computer can read tonight is new you are elves it simplified so you put in for ul and it’s just like that’s theirs the domain name that tells you which
computer to start talking to and then you’ve got any folder directory
structure and you’ve got the file name right here and it’s it’s all just regret their and
it does all for you let’s talk let’s make a web page member interoperability if a relic a web page we can’t just open at microsoft word and write something in it and say that
can expect it to work on the web because it has to be interoperable so if you’ve ever tried actually to do
that uh… you don’t realize it but microsoft word uses markup language it’s has its own format
and it’s not hypertext markup language it’s microsoft whatever michael markup language so if you try right in microsoft word for example with a new markup language then you’ve
got the market when did your writing being encoded into microsoft’s markup language and it then when you servitude like a
browser or something across the internet has got first of all it’ll h_t_t_p_ will tell this is a microsoft
word documents in a browser probably won’t even try too if it does it’s gonna be really confused
cuz it doesn’t know word document could only use html and so what we need to do is make sure
that even if we write good html campion cut
it into another language has to be included as we typed it you have to find what’s called a plain
text word either plaintext editor uh… so if if you’re in windows this is
an easy just open note pad if you can find it
hit when his key r techno had hit enter if you’re in mac you can open text edit now looking back it’s a little bit some
it’s a little bit more difficult because yet to make sure that your saving as
plain text not rich text uh… here’s a video that all help you
with some of the complications with the mac uh… and come back here in when you’re
done if you haven’t got that yet and you may want to actually install uh… in addition all uh… nicer plaintext better when the has syntax highlighting in kind
of like is aware of what languages committees that you’re writing citizen the for that if you want to but the important thing is that your
cable to roots compose a document and save it in plain
text format so it will have the extension “dot txt” by default or you or what we’ll do is we’ll give it HTML so that they’ll set up pause it… get that all set up, and then
come back once you’re able to see that you’re saving in plain text okay you’ve got your text editor
installed and you’ve figured out how to make it work in uh… plaintext mode so here’s what i want to do uh… write “hello world” in your document uh… and you can expand on this later
don’t try to enter any code right now it just write plain text write “hello world” and then do “save as” (if you’ve already
saved it, then save it in a different place) so save it as… your filename. pick a filename and this is important you have to be aware of where you’re
saving it cuz you have to be able to move this file around later so i recommend saving it directly on your desktop or
creating actually even better create a folder in your desktop called webmaking 101 unit 1 and save it into that folder give it a filename you’ll remember give the activity extension dot html now make sure that it’s not the pending fallon extensions onto a plate dot t_
xti at the end since you’re sitting in plain text once you get this figured out unit eunice safest they’ll be say that
your file name dot html there won’t be any hidden file
extensions won’t be say than any other formality plaintext dot html uh… keyed keep in mind where you put it open a browser any browser safari chrome
firefox internet explorer and uh… either use the open dialogue
unlike file open control or whatever on your stroke his fear of princeton or if you have that therefore they’re open you can just
dragon dragon v biology discrete and because remember where i was into your browser just popped into an
empty new page and the browser should if u did it right open just the plain text file you’ve got is plain text file is now
open displaying exactly what you wrote it should look any different um… unless you’re a some crazy card it should be just simple plane and if you look in the browser address
bar you should see your file name dot html and then before that in the u r l you’ve got all of the location
information and it’s you notice it’s it starts with something like file or it
doesn’t start with bike than normal stuff it doesn’t look like a normal when
you are on his net domain for example because the local file uh… so but log will determine without
any minute so i hope you didn’t close don’t close your
uh… texter as you do this you can save it and keep it open so accuser peers dietrich the that you should always do when you’re
composing inheriting have one window that is your results
window and one window they just editing went up so if you’ve got your plaintext better open still put that on half of your screen temperature browser and the other half
of screen you can look at them both at the same time if you haven’t changed
things now go to your plane tix editor and make a changed uh… type something
that new and then do same not say that stated in
the same place because you’ve already got an open don’t close anything down tab over move over to the browser and find the refresh button assure come windows as af five uh… it’s a little like recycling
lookin icon hit refresh and you’ll see that the page updates with what you just
typed unique your tech center so this is the essence uh… a webpage
you you actually have just created a web page it’s not quite a webpage because it’s
not on the internet if i if you want to share this with me
you could just give me a u r l and i could see that you have to like
send me a whole copy of the file so that’s not quite the internet there
is a web page it’s a page that’s being opened by the browser it’s plain text we’re gonna do it called
later but pits it’s being open by the browser in html format actually so do this and do something like here we turn a couple of times try to
make the list and refresh and see what happens you noticed that it’s not quite what you
expect there’s no formatting that’s allowed he’d or try to put six spaces
between the word com so something that can just things
going on we need to format and i saw them do that by hand for now what’s important to note is you
just created webpage in order to be able to transfer file
from one hundred to another the distant harddrive has to be reliably on running connected to the internet an in addition
to the standard knowing h_t_t_p_ century files in html and all the other
interoperability issues so that means we probably shouldn’t just
be using or animal laptop that sitting around because we’re gonna take that and to a
coffee shop we’re gonna disconnect that we’re gonna uh… randy things with it that’s going
to make it unreliable as source when other people want to get
files off a hundred so we do instead is we create a
dedicated computer that we call the server nala server does is it waits around always connected to the internet always
on for somebody to request a file from its
hard drive administered as a team so we use this kind of horizontal
connection to simplify what the internet is connecting one hundred to another what is maybe are more appropriate
metaphor would be to have uh… down relationship because the internet we kind of thing comes as
something that’s in the cloud right so we don’t know where the server is you don’t necessarily have this computer
in your house you probably have internet in a place that’s a little bit more
reliable which in terms of internet and faster speed and so we think of it cuz were looking of connecting up to the
server which is in internet which is the internet you might even think of it as
uh… in the cloud somewhere in the sky and at the server is just always there
waiting to serve so if the server is the internet and we’re down here on
earth we are the client the client is the that which receives the services of the
server so the client the front side of the equation the
server is the back side of the internet side now that the client is u with your computer or anybody else who
uses a computer to connect to the same server that’s the client side and it bilby using things like browsers
rather than server software and we call the client-side front side kind of because it’s it’s the part that
we see and we call the server-side backside because but we don’t see it’s
also how we think of it is in the sky i
didn’t get the metaphors are a little bit confusing the front side is what’s right in front
of you backside or back and is what’s on the internet usually so stuff happens in the server up in the
cloud up in the sky that’s back and stuff that happens right
on your computer on your hard drive in your computer’s memory and ran on your
monitor that’s fine so when a client connects to a server they communicate with each e_t_ p the client asks the server for each
cannot file and server sends it down the line to the client we call this downloading uploading would be with the rivers if
the client sent the file up to the server which
most people don’t do it unless you are a web developer and you guys are all web developers ads
at the end of this lesson we’re gonna learn how to help them so what is the next step you’ve got webpage how are you going to get on the web well you you need to have that’s that’s on your hard drive you
need your hard drive to be connected to compute to the internet in a certain way you need your computer to always be on and you need to have the software on
your computer to receive requests from from the internet and answer about
information probably none of you want to figure out all
logistics to actually do that you don’t want to set up a server on
your what you’re gonna do it is you’re gonna
and find somebody who will take on that responsibility for you gary
have a server and they’re willing to time run the server four you were on the
server for you so you know if it’s somebody invites you
to their home they’re hosting you at their home or if you host an event combat sunday
noon then they’re hosting the menu now somebody that hosts your website on
their server he would call them a hostess bar so i host is a person a provider organization that
has a server setup for multiple servers and will post your files on their server and you can look keep amma monthly
really really fee and the host well uh… take care of all the server
logistics for u and it you’ll be able to have your website and that this is a
everybody does it nowadays and last year google amazon most people just uh… most
organizations pay a host to run their website simplifies things a lot so you guys uh… med students in this course have
hosting for this course uh… them providing to you and um… so this is step to you this is that the
second in class project is you’re gonna actually right now here
to put your that you made your webpage on the
internet soviet rule rule webpage so first off you need a domain because all you are also going to me i
need to be able to just click on link and go to your file right so um… here is the information about the mains
if you have another protest when c need that to you got the domain and now you have to hooked up with a
posting and uh… yuki to first get you know
packet that you should have received if you
have received it tommy lee to send the email uh… and here’s the information on
how-to connect your domain to your hosting okay so you’ve done that uh… if you haven’t positon idea uh… so now you’ve got you’ve got your demand pointed to your host you you’ve got your domain point your
server you could say you got your hard drive in the sky and it’s gonna take it might take awhile
for things to kind of fit together it’s called resolving you demand it takes a while but im after resolves i want you to do is uh… connects to uh… your server with another protocol uh… we talked to h_t_t_p_ hypertext
transfer protocol that’s caliper browsers and cooking
links but what we’re gonna do now is when you
had your pf your file on your harddrive you want in the hard drive on
the server that that the host you want to be hosted on the server and
you ended up in in the we might call it like on the internet quarry mcleod and so we want to upload it so uh… we need and another protocol buffer hypertext but to transfer files
uh… talking to the clout to upload files this is called file transfer
protocol it’s very similar decade she t_p_ in a lot of ways to connect
interoperable facilities communication between devices between uh… software and
computers it’s purpose as a sister uh… transfer a file uh… pop to the internet to its server or to down there file transfer protocol hefty p is used to upload documents to the
server so the people using h_t_t_p_ can download them and give them and
their browser so you actually have to install your t_p_ client first before he can get anything done uh… so his information on sonya decline cayuga that installed and uh… you follow the instructions to your
connects to your host and you’ve uploaded a file now if if by now if you should have
resolved you should be able to goto that u r l by putting your domain and then remember in the directory structure
where you had in the file name and remembering how i you are lost
constructed domain name directories file name and type that into a browser that’s connected to the internet and if you’re coming in has resolved and
everything goes right to give trouble at this project asked me or joins the former going to
discuss your discussion and discuss what what problem having its own wild this video is almost over the class session it is not almost over and you can’t just turn off the video
and be done with the class for now and start work on homework i’m part of the
class is to take the uh… in-class quiz so um… you you’ve got a follow this link uh… he’ll be in the uh… in the description and um… click on it and we’re going to do is you
take this quick look whiz and you’ll see that you’ll be tested on uh… what you should have learned in
this class in the sand in this lecture and um… it’s great because it’s it’s a quick way to get feedback and
find out on how you doing and whether not you’re
com picking up all the stuff you need to and it’s expected that you’re not going
to get a hundred percent of the right so the things that u uh… take the quiz and you come back
has uh… needing to know more on um… there will be at links provided to you uh… part as part of this class session and for all of a uh… items that you got ron uh… go and watch the video on back to get a little bit uh… more in depth explanation it should be little bit simpler kind of like a little
bit different way of explaining it spend a little bit more time on it
’cause is very important in such a dense condensed and do you understand all of
the concepts better key concepts for each class and preachy so before you even finish this this session um… you should it take this get tested and then you go back and uh… read uh… immerse yourself relearn on the concepts that you’re having
trouble with the trouble spots so that as you go through the course you won’t
be lagging behind in getting stuck on the concept of what is a server again he kinda talked
about it but i don’t really remember so kids is important and you keep keep
taking these tests and getting re-testing to you’ve got it you got a notice server is down at these
things are before you move on so go ahead take that quiz and i watch the videos uh… and men dement the sessions over each mister and
elmer i had i suggest you start your homework right away uh… today uh… tonight whenever you taking at and
uh… start watching the discussion forums upon the
homework and uh… kind of like gauging what the trouble that other people are
having seat you can help people if you can uh… or if you run
into trouble ask on the forum uh… discussion and
uh… of your first place also of course the resources on the internet that are available to you uh… make use of it’s open book homework everything is
open book the quiz is not open book the homework is always open book uh… acted on the required homework yet it will benefit you allot if you do
the optional homework the optional projects but you can make it through the course
and still get a lot of the course and get uh… the majority of what was needed
and of course despite doing the bare minimum not doing
the optional work and you can always come back later and
develop tional were comeback in uh… take the course again do a lot more
thoroughly fine areas that interest you do you want to know more about uh… but this time around you really
should do the uh… the primary assignments for
each unit make sure you get them done in times of
the can stay in step with the class of it you’re pushing the same sorts of
questions in looking at the same issues as everybody else at the same time and
also said that you can do the office hours with
everybody at the same time and uh… and there’s the whole
procrastination equation you procrastinate this now if you insist
that the class chances are you will never actually complete the course you really should not should naked the effort to stay with the course stand schedule
and not get off track because one’s once you do that your chances of uh… actually following
through go way down just in terms of how people
work spam and and how we procrastinating and things get in the way and there’s
compete things competing for your time in your energy you name the the motivation you mean
these the uh… that interest and uh… right now is the
best i needed to do its ninety-degree tonight get done ahead of time see if you have
time to uh… did the optional thing starting tomorrow but try to get the
homework done today and then do the optional things leading
up to the next unit

Leave a Reply

Your email address will not be published. Required fields are marked *