Digital Media
Dr. Jim Rowan
ITEC 2110
Hypertext & Hypermedia
Roll call
Barton, Paul H.
Bois, Lauren C.
Bonds, Allison E.
Duncan, Jarred T.
Lawson, Joseph I.
Mulongo, Julio B.
Pennison, Heather L.
Reilly, Daniel J.
Sanchez-Casas, Jon F.
Simson, Davis
Sinnock, Grant A.
Swaim, Mark S.
Tran, Dung Q.
Vyas, Anand A.
Woldeyohannes,
Tesfamichael
Roll call
Jones, Crystal L.
Marsh, Kerreen A.
Thompson, Daniel G.
Tran, Christopher V.
Issues
• 1) MUST RETURN CAMERAS BEFORE
THANKSGIVING BREAK!!!!!!
• 2) MUST RETURN CAMERAS BEFORE
THANKSGIVING BREAK!!!!!!
• 3) MUST RETURN CAMERAS BEFORE
THANKSGIVING BREAK!!!!!!
• 4) MUST RETURN CAMERAS BEFORE
THANKSGIVING BREAK!!!!!!
Hypertext? Hypermedia?
• Text augmented with LINKS
• Links take you from the document you are
looking at to another destination
• Allows related things (documents, audio,
images, videos...) to be hooked together...
associated with one another
• Causes user interaction to be more complex
than with paper documents
Hypertext/media
• is Navigated by the user
• is Presented by the browser
– A browser is a CLIENT program
– Browser requests PAGES from the SERVER
• Selection of a LINK causes browser
– to send a request to the server
• The server
– interprets the request
– looks for the requested hypertext in its storage
– transmits the requested hypertext page back to
the client
But FIRST!
• Underlying the hypertext, before you can view
a webpage on your browser
– You have to get hooked up to the web
– You have to connect to the server that has the
information you want
• Think of the internet as the car, the transport
mechanism
• Think of the hypertext document as the stuff
that the car carries
• To review...
your browser
(Safari)(client)
DHCP:
your computer
webpages
and
other stuff
yahoo.com
(server)
235.01.30.564
walmart.com
(server)
100.43.153.07
The Internet
Data Name System (DNS)
your browser
(Safari)(client)
DHCP: 135.10.34.443
your computer
ISP
webpages
and
other stuff
yahoo.com
(server)
235.01.30.564
walmart.com
(server)
100.43.153.07
The Internet
Data Name System (DNS)
your browser
(Safari)(client) http://www.yahoo.com
DHCP: 135.10.34.443
your computer
webpages
and
other stuff
yahoo.com
(server)
235.01.30.564
walmart.com
(server)
100.43.153.07
The Internet
Data Name System (DNS)
http://www.yahoo.com =
235.01.30.564
your browser /index.html
(Safari)(client) http://www.yahoo.com
DHCP: 135.10.34.443
your computer
webpages
and
other stuff
yahoo.com
(server)
235.01.30.564
walmart.com
(server)
100.43.153.07
The Internet
Data Name System (DNS)
http://www.yahoo.com =
235.01.30.564
Assumptions are made
• http://www.walmart.com ==>
http://www.walmart.com/index.html
– server assumes you mean index.html
• www.walmart.com ==>
http://www.walmart.com
– browser adds http:// for you
• walmart.com & www.walmart.com allowed
– server can map IP to either
• www.walmart.com
• walmart.com
How to start a website
• You have to buy a Domain Name
– register.com
– godaddy.com
• The Domain Name supplier
– pay by the year
– may provide some storage space for your web
pages using their IP
– probably get email accounts with it
– will allow you to configure your site
• set up domain-name-to-IP mapping
• specify whether or not to ignore www
Hypertext/Media
• Is the document that flows from the
SERVER to the CLIENT
• Is the webpage that is displayed by your
browser
• Is the topic of this chapter
A brief history
• Vannevar Bush
– 1947
– described a system to link documents
– Called Memex
– mechanical
A brief history
• Tim Berners-Lee (not al gore)
–
–
–
–
invented the internet
1980 built the first web server
mid 1980s worked with hypertext
1988- “I just had to take the hypertext idea and connect
it to the TCP and DNS ideas and ta-da! the World Wide
Web!”
– wrote the first web browser (the client)
– wrote the first eeb editor
A brief history
• Hypercard
– 1987
– Apple Computer
– Note card metaphor
• HyperTalk
– Myst, the game
OK, so I LIED!
• Paper is also read non-linearly
• Magazine
–
–
–
–
–
–
–
broken into articles
interrupted by advertisements
has “links”: continued on pg 47 ==>
has table of contents
pictures have captions
have sidebars of related information
has page numbers (index)
• So what’s so different about Hypertext/Media?
Hypertext/media
• Its all about IMMEDIACY!
• Compare clicking a link to requesting an
article at the library...
• If you wanted a particular article you
had to do an inter-library loan which
could take weeks
Let’s look at LINKS
notice that the links are
distinguished from
regular text (underlined
and color)
also... once used, they
turn a different color
here the nodes connected by links are only 1 level deep...
4-5 is usually the deepest that is recommended
more LINKS...
into pages
within pages
between pages
Disorientation...
where am I?
• Trying to keep up with where you are...
• Not so simple
– once there was the idea of creating a
“map” to show you where you were in the
structure
– largely abandoned
• URL is SOMETIMES useful
– why just sometimes?
Disorientation..
Where was I?
• Trying to keep up with where you went...
–
–
–
–
browsers have “back” buttons
pages can have embedded links that take you back
browser history works without user interaction
browser bookmarks work with user interaction
• Searching
– use search engine and remember search strings
Index Sites
• Manually
– indices and links can be built by hand
– people search the web and keep useful indexes
making them part of the site
– may rely on the user to search and rate sites
• Automatically
– indices and links are built using spiders, robots or
WebCrawlers
– these are programs that search the web looking
for content
WebCrawlers
• Once looked and collected email addresses to
sell to spammers
• Simple to do
– request a page
– look through the text of the page for something @
something.something
• Can be defeated by using unfriendly-to-robotcode like: jrowan (at) GGC (dot) USG (dot) EDU
– humans can read this just fine!
Search Engines
• Search web pages looking for keywords
• Then they build a catalog of keywords
– You enter a keyword in the engine
– It looks at its table
– It sends you the URLs associated with the
keyword
• GOOGLE extends this by including the
number of links that point to that particular
page
You can help the poor robots!
• If you want the robots to find you easily
and to put your page in the right
category you can intentionally add
Meta-Data through html tags
– specifying keywords
– giving the page names
– associating your page with a content
description
Web Protocols
• Protocols define the rules to be followed in a
conversation
–
–
–
–
who talks first
what is acceptable to request
what are acceptable responses to a request
syntax is the actual form of each interaction
• HTTP - Hyper Text Transfer Protocol
– identifies it as a web page request
• FTP - File Transfer Protocol
– identifies it as a file that needs to be downloaded
• SMTP - Simple Mail Transport Protocol
– identifies it as pertaining to email
The URL
• Has three parts:
– Specifies the protocol to use
• HTTP
• FTP
• SMTP
– The Domain Name
• www.ggc.usg.edu
– Other defining stuff
• The Path to the information
• The Data to be handed to a program or cgi script
– cgi Common Gateway Interface
– a script that processes the data
Path to the information
index.html
HTTP://www.jimrowan.com
www.jimrowan.com/about/
-can have two responses
-assumes index.html yielding web page
-assumes you want a directory list yielding a list of
the contents of the directory:
index.html
academics.html
research.html
hobbies.html
www.jimrowan.com/about/index.html
www.jimrowan.com/about/research.html
www.jimrowan.com/about/before1960/index.html
www.jimrowan.com/about/after1960/index.html
about
before1960
index.html
academics.html
research.html
hobbies.html
after1960
Data to be handed to a program
http://www.google.com/
search?hl=en&q=tim+berners-lee&btnG=Google+Search
http://cgi.ebay.com/
ebaymotors/ws/eBayISAPI.dll
?ViewItem&item=260182066605&
ssPageName=ADME:X:AAQ:MOTORS:1123
More information about cgi scripts
can be found in chapter 17
index.html
about
before1960
Relative vs Absolute URL
index.html
academics.html
research.html
hobbies.html
after1960
absolute URL
index.html
academics.html
highSchool.html
college.html
family.html
www.jimrowan.com/about/after1960/index.html
www.jimrowan.com/about/after1960/academics.html
index.html(1)
Relative vs Absolute URL
./stuff.html
references another file in the same directory
about
index.html(2)
academics.html(1)
research.html
hobbies.html
/dir2/stuff.html” references a page at a path
starting from the root of the server.
../another.html references the parent directory
of the current directory
before1960
relative URL
after1960
index.html(3)
academics.html(2)
highSchool.html
college.html
family.html
www.jimrowan.com/about/index.html ==> index.html(2)
./academics.html ==> www.jimrowan.com/about/academics.html(1)
/about/academics.html ==> www.jimrowan.com/about/academics.html(1)
www.jimrowan.com/about/after1960/index.hml ==>index.html(3)
../index.html ==> www.jimrowan.com/about/index.html (2)
And now...
• Blender
–
–
–
–
–
–
–
–
–
–
view super3boys video on UV mapping (10th video)
apply a texture to a cube like in the video
view super3boys video on animation
build and animate a cube
move it from place to place
make it get bigger/smaller
rotate it
create a 3 second animation and render it
save it as a .blender file
build and animate a UV mapped object
Questions?