hi
i'm carrie ann and welcome to crash
course computer science we ended last
episode with the 1984 release of apple's
macintosh personal computer
it was the first computer a regular
person could buy with a graphical user
interface and a mouse to interact with
it this was a radical evolution from the
command line interfaces found
on all other personal computers of the
era instead of having to remember
or guess the right commands to type in a
graphical user interface shows you
what functions are possible you just
have to look around the screen
for what you want to do it's a point and
click interface all of a sudden
computers were much more intuitive
anybody not just hobbyists or computer
scientists could figure things out all
by themselves
[Music]
the macintosh is credited with taking
graphical user interfaces or gooeys
mainstream but in reality they were the
result of many decades of research
in previous episodes we've discussed
some early interactive graphical
applications
like sketch pad and space war both made
in 1962
but these were one-off programs and not
whole integrated computing experiences
arguably the true forefather of modern
gooeys was douglas engelbart
let's go to the thought bubble during
world war ii while engelbart was
stationed in the philippines as a radar
operator
he read vanive bush's article on the
memics these ideas inspired him
and when his navy service ended he
returned to school completing a phd
in 1955 at uc berkeley heavily involved
in the emerging computing scene
he collected his thoughts in a seminal
1962 report titled
augmenting human intellect engelbart
believed that the complexity of the
problems facing mankind was growing
faster than our ability to solve them
therefore finding ways to augment our
intellect would seem to be both a
necessary and a desirable goal
he saw that computers could be useful
beyond just automation
and be essential interactive tools for
future knowledge workers to tackle
complex problems
further inspired by ivan sutherland's
recently demonstrated sketch pad
engelbart set out to make his vision a
reality recruiting a team to build the
online system he recognised that a
keyboard
alone was insufficient for the type of
applications he was hoping to enable
in his words we envisioned problem
solvers using computer-aided working
stations to augment their efforts
they required the ability to interact
with information displays
using some sort of device to move a
cursor around the screen and in 1964
working with colleague bill english
he created the very first computer mouse
the wire came from the bottom of the
device and looked very much like a
rodent and the nickname stuck
thanks thoughtbubble in 1968 engelbart
demonstrated his whole system at the
full joint computer conference
in what's often referred to as the
mother of all demos the demo was 90
minutes long and demonstrated many
features of modern computing
bitmap graphics video conferencing word
processing and collaborative real-time
editing of documents
there were also precursors to body guise
like the mouse and multiple windows
although they couldn't overlap it was
way ahead of its time and like many
products with that label it ultimately
failed
at least commercially but its influence
on computer researchers of the day was
huge
engelbart was recognised for this
watershed moment in computing with a
turing award in 1997.
federal funding started to reduce in the
early 1970s which we discussed two
episodes ago
at that point many of englebart's team
including bill english
left and went to xerox's newly formed
paolo alto research center
more commonly known as xerox park it was
here that the first true gui computer
was developed
the xerox alto finished in 1973. for the
computer to be easy to use it needed
more than just fancy graphics
it needed to be built around a concept
that people were already familiar with
so they could immediately recognize how
to use the interface with little or no
training
xerox's answer was to treat the 2d
screen like the top of a desk
or a desktop just like how you can have
many papers laid out on a desk
a user could have several computer
programs open at once
each was contained in their own frame
which offered a view onto the
application called a window also like
papers on a desk
these windows could overlap blocking the
items behind them
and there were desk accessories like a
calculator and clock that the user could
place on the screen and move around
it wasn't an exact copy of a desktop
though instead it was a metaphor of a
desktop
for this reason surprisingly it's called
the desktop metaphor
there are many ways to design an
interface like this but the alto team
did it with windows icons menus and a
pointer
what's called a wimp interface it's what
most desktop gui's use today it also
offered a basic set of widgets reusable
graphical building blocks things like
buttons checkboxes sliders and tabs
which were also drawn from real world
objects to make them familiar gui
applications are constructed from these
widgets
so let's try coding a simple example
using this new programming paradigm
first we have to tell the operating
system that we need a new window to be
created for our app
we do this through a gui api we need to
specify the name of the window and also
its size
let's say 500 by 500 pixels now let's
add some widgets
a text box and a button these require a
few parameters to create
first we need to specify what window
they should appear in because apps can't
have multiple windows
we also need to specify the default text
the x and y location in the window
and a width and height okay so now we've
got something that looks like a gui app
that has no functionality
if you click the roll button nothing
happens in previous examples we've
discussed the code pretty much executes
from top to bottom
guise on the other hand use what's
called event driven programming
code can fire anytime in different
orders in response to events
in this case it's user driven events
like clicking on a button
selecting a menu item or scrolling a
window or if a cat runs across your
keyboard it's a bunch of events all at
once let's
say that when the user clicks the roll
button we want to randomly generate a
number between 1 and 20
and then show that value in our text box
we can write a function that does just
that we can even get a little fancy and
say if we get the number 20
set the background color of the window
to blood red the last thing we need to
do is hook this code up so that it's
triggered each time our button is
clicked
to do this we need to specify that our
function handles this event for our
button
by adding a line to our initialize
function the type of event in this case
is a click event and our function is the
event handler for that event
now we're done we can click that button
all day long and each time our roll d20
function gets dispatched and executed
this is exactly what's happening behind
the scenes when you press the little
bold button in a text editor or select
shutdown from a drop down menu
a function linked to that event is
firing hope i don't roll with 20.
okay back to the xerox alto roughly 2
000 altos were made and used at xerox
and given to university labs
they were never sold commercially
instead the park team kept refining the
hardware and software
culminating in the xerox star system
released in 1981 the xerox star extended
the desktop metaphor
now files look like pieces of paper and
they can be stored in little
folders all of which could sit on your
desktop or be put away into digital
filing cabinets
it's a metaphor that sits on top of the
underlying file system
from a user's perspective this is a new
level of abstraction
xerox being in the printing machine
business also advanced text and graphics
creation tools
for example they introduced the terms
cut copy and paste this metaphor was
drawn from how people dealt with making
edits in documents
written on typewriters you'd literally
cut text out with scissors and then
paste it with glue
into the spot you wanted in another
document then you'd photocopy the page
to flatten it back down
into a single layer making the change
invisible thank goodness for computers
this manual process was meet with the
advent of word processing software which
existed on platforms like the apple
ii and commodore pets but xerox went way
beyond the competition with the idea
that whatever you made on the computer
should look exactly like the real world
version if you printed it out
they dumped this what you see is what
you get or wysiwyg
unfortunately like engelbart's online
system the xerox star was ahead of its
time
sales were sluggish because it had a
price tag equivalent to nearly two
hundred thousand dollars today for an
office setup
it also didn't help that the ibm pc
launched that same year
followed by a tsunami of cheap ibm
compatible pc clones but the great ideas
that park researchers had been
cultivating and building for almost a
decade
didn't go to waste in december of 1979
a year and a half before the xerox star
shipped a guy you may have heard of
visited
steve jobs there's a lot of law
surrounding this visit with many
suggesting that steve jobs and apple
stole xerox's ideas but that simply
isn't true
in fact xerox approached apple hoping to
partner with them
ultimately xerox was able to buy a
million dollar stake in apple before
its highly anticipated ipo but it came
with an extra provision
disclose everything cool going on at
xerox park steve knew they had some of
the greatest minds in computing
but he wasn't prepared for what he saw
there was a demonstration of xerox's
graphical user interface
running on a crisp bitmap display or
driven with intuitive mouse input
steve later said it was like a veil
being lifted from my eyes
i could see the future of what computing
was destined to be steve returned to
apple with his engineering entourage and
they got to work inventing new features
like the menu bar and a trash can to
store all files to be deleted
it would even bulge when full again with
the metaphors
apple's first product with a graphical
user interface and mouse was the apple
lisa released in 1983.
it was a super advanced machine with a
super advanced price
almost 25 000 today that was
significantly cheaper than the xerox
star
but it turned out to be an equal flop in
the market luckily apple had another
project up its sleeve the macintosh
released a year later in 1984.
it had a price of around six thousand
dollars today a quarter of the leases
cost
and it hit the mark selling 70 000 units
in the first
100 days but after the initial craze
sales started to falter and apple was
selling more of its apple two computers
than max
a big problem was that no one was making
software for this new machine with its
new radical interface
and it got worse the competition caught
up fast soon
other personal computers had primitive
but usable guise on computers a fraction
of the cost
consumers ate it up and so did pc
software developers with apple's
finances looking increasingly dire and
tensions growing with apple's new ceo
john scully
steve jobs was ousted a few months later
microsoft released windows 1.0 it may
not have been as pretty as mac os
but it was the first salvo in what would
become a bitter rivalry and near
dominance of the industry by microsoft
within 10 years
microsoft windows was running on almost
95
of personal computers initially fans of
mac os could rightly claim
superior graphics and ease of use those
early versions of windows were all built
on top of dos
which was never designed to run guise
but after windows 3.1
microsoft began to develop a new
consumer-oriented os
with an upgraded gui called windows 95.
this was
a significant rewrite that offered much
more than just polished graphics
it also had advanced features mac os
didn't have like program multitasking
and protected memory windows 95
introduced many gui elements still seen
in windows versions today
like the start menu taskbar and windows
explorer file manager microsoft wasn't
infallible though
looking to make the desktop metaphor
even easier and friendlier it worked on
a product called microsoft bob
and it took the idea of using metaphors
to an extreme now you had a whole
virtual room on your screen
with applications embodied as objects
that you could put on tables and shelves
it even came with a crackling fireplace
and a virtual dog to offer assistance
and you see those doors on the sides yep
those went to different rooms in your
computer
where different applications were
available as you might have guessed
it was not a success this is a great
example of how the user interfaces we
enjoy today
are the product of what's essentially
natural selection
whether you're running windows mac linux
or some other desktop gui
it's almost certainly an involved
version of the wimp paradigm
first introduced on the xerox alto along
the way
a lot of bad ideas were tried and failed
everything had to be invented
tested refined adopted or dropped today
guys are everywhere and while they're
good
they're not always great no doubt you've
experienced design related frustrations
after downloading an application use
someone else's phone or visited a
website
and for this reason computer scientists
and interface designers
continue to work hard to craft computing
experiences that are both easier
and more powerful ultimately working
towards engelbart's vision
of augmenting human intellect i'll see
you next week
crash course computer science is
produced in association with pbs digital
studios at their channel you can check
out a playlist of shows like braincraft
coma niddy and pbs infinite series
this episode was filmed at the chad and
stacy emma gold studio
in indianapolis indiana and it was made
with the help of all these nice people
and our wonderful graphics team thought
cafe thanks for the random access
memories i'll see you next time
you