Design Methodology and Technology. Lesson 1: Overview of Web Design Concepts.
The Web: Concepts and Technology
Transcript of The Web: Concepts and Technology
![Page 1: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/1.jpg)
January 24: HTML + Forms = Dynamic Sites
1
The Web: Concepts and Technology
1/24/2013 CS 190: The Web: 2013
![Page 2: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/2.jpg)
HTTP + HTML = WEB
1/24/2013 CS 190: The Web: 2013 2
![Page 3: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/3.jpg)
The Vision: Memex
– Vanevar Bush: “As we may think”:
“Memex”, 1945 proto-hypertext system /desktop search
1/24/2013 3CS 190: The Web: 2013
![Page 4: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/4.jpg)
The First Implementation: Hypertext
4
• Ted Nelson: Hypertext
A text on a computer that will lead the user to other, related information on demand.
Precursor of The Web
1/24/2013 CS 190: The Web: 2013
![Page 5: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/5.jpg)
1989: World Wide Web
• Tim Berners-Lee connects 2 computers together using the
• HTTP protocol
• First Web server is born.
1/24/2013 CS 190: The Web: 2013 5
![Page 6: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/6.jpg)
Web Server
1/24/2013 CS 190: The Web: 2013 6
![Page 7: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/7.jpg)
Looking up a Web Page
1/24/2013 CS 190: The Web: 2013 7
![Page 8: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/8.jpg)
TCIP/IP Protocol
• Robust protocol that connects computers over the internet
• All Web traffic goes over TCIP/IP
• IP: Unique Address of your computer
1/24/2013 CS 190: The Web: 2013 8
![Page 9: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/9.jpg)
IP Address
• Uniquely identifies your computer
• Can be mapped (roughly) to geographical location
• Associates with contact person
1/24/2013 CS 190: The Web: 2013 9
http://www.geobytes.com/IpLocator.htm
http://ws.arin.net/whois/?queryinput=170.140.150.186
![Page 10: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/10.jpg)
Internet “Routing”
• How to find your way on the internet? That is, how is the connection to the webserver found?
• Answer: Internet “Routers” and “Switches”
1/24/2013 CS 190: The Web: 2013 10
![Page 11: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/11.jpg)
TCIP/IP (continued)
• TCP/IP is robust to failure (things go wrong on the internet/physical layer)!
• Protocol detects errors so application can try to find a new route to the webpage and back
1/24/2013 CS 190: The Web: 2013 11
![Page 12: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/12.jpg)
Internet Routing (2)
• Each router tries to “direct traffic” based on IP addresses in the packets, in the most efficient (but not shortest) path. Interesting and important research and engineering challenges to
this day! More in advanced CS classes…
• Examples:
/usr/sbin/traceroute dutch.mathcs.emory.edu (2 hops)
/usr/sbin/traceroute www.google.com (12 hops)
/usr/sbin/traceroute www.emory.edu (? hops)
1/24/2013 CS 190: The Web: 2013 12
![Page 13: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/13.jpg)
First Web Browser
13
• Berners-Lee developed and defined the HTML language, which was created and defined using SGML, during the development cycle for the first Web browser/editor from October to December 1990.
• First PARSER for HTML, the WorldWideWeb app:
1/24/2013 CS 190: The Web: 2013
![Page 14: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/14.jpg)
First Real Browser: Mosaic
14
• Developed by Mark Andresen (NCSA), funded by Al Gore’s High Performance Computing and Communication Act, 1991
1/24/2013 CS 190: The Web: 2013
![Page 15: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/15.jpg)
1994-1997: Netscape
151/24/2013 CS 190: The Web: 2013
![Page 16: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/16.jpg)
1995-present: MSFT Explorer
161/24/2013 CS 190: The Web: 2013
![Page 17: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/17.jpg)
2003-present: Netscape begat Firefox, and others followed: Opera, Chrome, Safari,…
171/24/2013 CS 190: The Web: 2013
![Page 18: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/18.jpg)
HTML Frames (recap)
1/24/2013 CS 190: The Web: 2013 18
![Page 19: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/19.jpg)
Frames Example
19
<html><frameset rows="*" cols="80,*">
<frame src=“top.html" name="top">
<frameset rows="80,*"><frame src="frame2.html"
name="left"><frame src="frame3.html"
name="right"></frameset>
</frameset> </html>
Example: http://www.mathcs.emory.edu/~cs190000/lab3/
1/24/2013 CS 190: The Web: 2013
![Page 20: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/20.jpg)
Make A Simple FrameSet
• cd share/public_html/
• mkdir lab3
• chmod a+rx lab3
• cd lab3
• cp /home/cs190000/share/public_html/lab3/* .
• Change to Horizontal Split
• Modify to use www.google.com as default content
1/24/2013 CS 190: The Web: 2013 20
![Page 21: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/21.jpg)
Working hard…
1/24/2013 CS 190: The Web: 2013 21
![Page 22: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/22.jpg)
HTML FORMS
1/24/2013 CS 190: The Web: 2013 22
![Page 23: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/23.jpg)
HTML Forms: Enter The Programming
• <form>… input elements
</form>
• <form>Search term: <input type="text" name=“as_q" /><br>Language:<input type="text" name=“lr" />
</form>
1/24/2013 CS 190: The Web: 2013 23
![Page 24: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/24.jpg)
Form Action
• <form name="input" action="http://www.google.com/search?” method="get">
…<input type="submit" value="Submit" /></form>
• Field values are passed along with the request
• Example:http://www.mathcs.emory.edu/~cs190000/lab3/search.html
1/24/2013 CS 190: The Web: 2013 24
![Page 25: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/25.jpg)
What happens on Submit
1/24/2013 CS 190: The Web: 2013 25
![Page 26: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/26.jpg)
The response Replaces the current page!
• Solution:
• <form name="input" target="TargetFrameName" action="http://www.google.com/search?” method="get">
…
</form>
• Example:http://www.mathcs.emory.edu/~cs190000/lab2/search3.html
1/24/2013 CS 190: The Web: 2013 26
![Page 27: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/27.jpg)
Other Variable Types: Selection
• <select name=><option>lang_ru</option><option>lang_fr</option><option>lang_el</option><option>lang_de</option><option>lang_zh-CN</option></select>
1/24/2013 CS 190: The Web: 2013 27
![Page 28: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/28.jpg)
Other Variables: Hidden
• Suppose I want to send some value to the server, but not allow the user to change it (or see it)
<input type=”hidden” name=”hvar” value=”666”>
1/24/2013 CS 190: The Web: 2013 28
![Page 29: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/29.jpg)
Putting it All Together: Form-Based App
• Use frameset
– Frame 1, a.k.a. interface: form
– Frame 2, a.k.a. content pane: form result
• Example:http://cs190.mathcs.emory.edu/~cs190000/lab2/search.html
1/24/2013 CS 190: The Web: 2013 29
![Page 30: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/30.jpg)
Try it yourself
1/24/2013 CS 190: The Web: 2013 30
![Page 31: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/31.jpg)
Assignment 2: Your Own Interface to YouTube Search
• Develop a Framed site to search YouTube from your “advanced” search interface
– e.g., title and user name (“advanced” search)
• Extra credit for fun ideas/extensions:
– ?
1/24/2013 CS 190: The Web: 2013 31
![Page 32: The Web: Concepts and Technology](https://reader034.fdocuments.net/reader034/viewer/2022052518/628c0dee93eef71aff50645d/html5/thumbnails/32.jpg)
Additional Resources
32
• Very nice Forms tutorial: http://www.tufat.com/html_tutorials/HTMLForms.php
• Very nice Frames tutorial:http://www.tufat.com/html_tutorials/HTMLFrames.php
• To edit an HTML file (more easily): – Open file using seamonkey
Type “seamonkey & “ at terminal promptThen select “Open file” from File menu. After page is opened, select “Edit page” from File menu
– Note that by default page is opened in graphical editor mode; select “<HTML> Source” tab on bottom to edit the actual HTML source, as you will need to do for most projects.
1/24/2013 CS 190: The Web: 2013