How the web works june 2010

673 views

Published on

Introductory concepts to what is the web and the basics of HTML document creation.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
673
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How the web works june 2010

  1. 1. How the Web Works
  2. 2. Internet vs Web
  3. 3. Internet vs Web <ul><li>There is no “center” or main-server of the Internet; it is a highly decentralized network designed for sharing information. </li></ul><ul><li>Email, VoIP, and the World Wide Web are parts of the Internet. </li></ul>
  4. 4. Server <ul><li>A server computer is a computer dedicated to running a server application. </li></ul><ul><li>Apache (open source) & Microsoft Internet Information Services (IIS) </li></ul>
  5. 5. Client <ul><li>A user's software program that interacts with a &quot;server&quot; </li></ul>
  6. 6. Protocol <ul><li>Protocol: </li></ul><ul><li>a convention or standard that controls or enables the connection, communication , and data transfer between computing endpoints. In its simplest form, a protocol can be defined as the rules governing the syntax , semantics , and synchronization of communication. </li></ul><ul><li>Common Protocols </li></ul><ul><ul><li>IP - Internet Protocol </li></ul></ul><ul><ul><li>UDP - User Datagram Protocol </li></ul></ul><ul><ul><li>TCP - Transmission Control Protocol </li></ul></ul><ul><ul><li>DHCP - Dynamic Host Configuration Protocol </li></ul></ul><ul><ul><li>HTTP - Hypertext Transfer Protocol </li></ul></ul><ul><ul><li>FTP - File Transfer Protocol </li></ul></ul><ul><ul><li>Telnet - Telnet Remote Protocol </li></ul></ul><ul><ul><li>SSH - Secure Shell Remote Protocol </li></ul></ul><ul><ul><li>POP3 - Post Office Protocol 3 </li></ul></ul><ul><ul><li>SMTP - Simple Mail Transfer Protocol </li></ul></ul><ul><ul><li>IMAP - Internet Message Access Protocol </li></ul></ul>
  7. 7. Web Page Address (URL) <ul><li>Uniform Resource Locator (URL) </li></ul><ul><li>http://www.youtube.com/watch?v=aOhb7uc8IGU </li></ul>
  8. 8. <ul><li>http  Protocol used in the communication between the browser and the web server. </li></ul><ul><li>:  Colon simply separates the protocol from the other part of the web address. </li></ul><ul><li>//  Indicates a request to a server </li></ul><ul><li>www.youtube.com Name of the web server </li></ul><ul><li>/  Indicates the root folder of the folder system hosted by the web server www.youtube.com </li></ul><ul><li>watch?v=a0hb7uc8IGU Name of file to be served </li></ul>Web Page Address (URL) http://www.youtube.com/watch?v=aOhb7uc8IGU
  9. 9. HTML Document <ul><li>Usually comprised of 2 or more parts </li></ul><ul><ul><li>text document with code </li></ul></ul><ul><ul><li>separate graphic file(s) </li></ul></ul><ul><li>ex. http://www.learningwebdesign.com/materials/chapter02/kitchen.html </li></ul>
  10. 10. Diversity & Accessibility <ul><li>Use clean HTML - marked with appropriate and meaningful HTML, content in logical order </li></ul><ul><li>Provide alternatives - alternative text, transcripts for audio, captions for video </li></ul><ul><li>Allow text to resize - font size in em or % </li></ul><ul><li>No text in graphics </li></ul><ul><li>Use accessibility features in tables & forms </li></ul><ul><li>Be careful with colors and backgrounds - plenty of contrast </li></ul>
  11. 11. Coping with the Differences <ul><li>User Preferences </li></ul><ul><li>Different Platforms </li></ul><ul><li>Connection Speed </li></ul><ul><li>Browser Window Size and Monitor Resolution </li></ul><ul><li>Monitor Color </li></ul>
  12. 12. User Preferences in addition to font and color changes <ul><li>Ignore style sheets or apply own </li></ul><ul><li>images off </li></ul><ul><li>Java and Javascript off </li></ul><ul><li>turn off pop-up windows </li></ul>
  13. 13. User Preferences <ul><li>Tools -> Internet Options (IE) </li></ul><ul><li>Tools -> Options -> Content (Firefox) </li></ul><ul><li>Change fonts and / or color </li></ul><ul><li>Need to design for flexibility </li></ul>
  14. 14. Different Platforms <ul><li>Operating systems have different fonts </li></ul><ul><li>Form elements - lists, pull down menus </li></ul><ul><li>Plug-in media players - Windows Media Player not supported, Flash and Quicktime are supported </li></ul>
  15. 15. Connection Speed <ul><li>Not everyone is on broadband </li></ul><ul><li>We have a long way to go to catch the number one country, South Korea. The Koreans have 85% high speed penetration while the US is stuck at less than 50%. Of those 50% very few have a connection faster than cable or DSL. </li></ul><ul><li>http://www.internetworldstats.com/stats.htm </li></ul><ul><li>http://news.cnet.com/8301-1035_3-10454133-94.html </li></ul>
  16. 16. Browser Window Size and Monitor Resolution <ul><li>Common resolutions / Page Dimension http://en.wikipedia.org/wiki/Display_resolution </li></ul>
  17. 17. Coping with Window Size <ul><li>Liquid Layout http://www.w3.org </li></ul><ul><li>Fixed Layout http://www.csszengarden.com/?cssfile=/211/211.css&page=0 </li></ul>
  18. 18. Monitor Color <ul><li>Gamma - overall brightness of a monitor. Macintosh has a lighter gamma than Windows or Unix </li></ul><ul><li>Number of colors - over 80% have 24-bit or 17 million colors. Rest have 16-bit monitors that display 65,000 colors. http://www.techbomb.com/websafe / </li></ul><ul><li>http://en.wikipedia.org/wiki/Computer_monitor </li></ul>
  19. 19. Creating a Simple Page
  20. 20. Step by Step <ul><li>Start with Content </li></ul><ul><li>Give document structure by adding XHTML elements </li></ul><ul><li>Identify the text elements </li></ul><ul><li>Add image </li></ul><ul><li>Change the look with a style sheet </li></ul>
  21. 21. Content <ul><li>Black Goose Bistro </li></ul><ul><li>The Restaurant </li></ul><ul><li>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients. </li></ul><ul><li>Catering Services </li></ul><ul><li>You have fun... we'll do the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. </li></ul><ul><li>Location and Hours </li></ul><ul><li>Bakers Corner in Seekonk, Massachusetts </li></ul><ul><li>Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight </li></ul>
  22. 22. File Naming Conventions <ul><li>Use correct suffixes (.html, .gif, .png, .jpg) </li></ul><ul><li>Never use spaces in file names </li></ul><ul><li>Avoid using special characters (?, %, #, /, :, ;, •) Letters, numbers, underscores, hyphens, and periods only </li></ul><ul><li>Use lowercase letters only </li></ul><ul><li>Keep filenames short as possible </li></ul><ul><li>Be consistent with your naming </li></ul>
  23. 23. Document Structure <ul><li><element name> CONTENT </element name> </li></ul><ul><li><opening tag> CONTENT </closing tag> </li></ul>
  24. 24. Document Structure <html> </html> <head> </head> <title> Title Here </title> <body> </body> Web Page Content Here
  25. 25. Add Basic Doc Structure <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Black Goose Bistro</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>Black Goose Bistro </li></ul><ul><li>The Restaurant </li></ul><ul><li>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients. </li></ul><ul><li>Catering Services </li></ul><ul><li>You have fun... we'll do the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. </li></ul><ul><li>Location and Hours </li></ul><ul><li>Bakers Corner in Seekonk, Massachusetts </li></ul><ul><li>Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  26. 26. Add Text Elements Block and inline <ul><li><html> <head> <title>Black Goose Bistro</title> </head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Black Goose Bistro </h1> </li></ul><ul><li><h2> The Restaurant </h2> </li></ul><ul><li><p> The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients. </p> </li></ul><ul><li><h2> Catering Services </h2> </li></ul><ul><li><p> You have fun... <em> we'll do the cooking </em> . Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. </p> </li></ul><ul><li><h2> Location and Hours </h2> </li></ul><ul><li><p> Bakers Corner in Seekonk, Massachusetts </p> </li></ul><ul><li><p> Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight </p> </li></ul><ul><li></body> </html> </li></ul>
  27. 27. Empty Text Elements <ul><li>Elements which do not have text content because they provide a simple directive. </li></ul><ul><li><directive space /> </li></ul><ul><ul><li><img /> - Load a graphic </li></ul></ul><ul><ul><li><br /> - insert a line feed </li></ul></ul><ul><ul><li><hr />- insert a horizontal rule (line) </li></ul></ul>Example: <p>100 Church St. <br />Burlington, VT </p>
  28. 28. Adding an Image <ul><li><html> <head> <title>Black Goose Bistro</title> </head> </li></ul><ul><li><body> </li></ul><ul><li><h1> <img src=”blackgoose.gif” alt=”Black Goose logo” /> Black Goose Bistro </h1> </li></ul><ul><li><h2> The Restaurant </h2> </li></ul><ul><li>… </li></ul>
  29. 29. Changing the look with Style Sheets <ul><li><style type=”text/css”> </li></ul><ul><li>body { </li></ul><ul><li>background-color: #C2A7F2; font-family: sans-serif; </li></ul><ul><li>} </li></ul><ul><li>h1 { </li></ul><ul><li>color: #2A1959; border-bottom: 2px solid #2A1959; </li></ul><ul><li>} </li></ul><ul><li>h2 { </li></ul><ul><li>color: #474B94; font-size: 1.2 em; </li></ul><ul><li>} </li></ul><ul><li>h2, p { </li></ul><ul><li>margin-left: 120px; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul>Added before the </head> tag. This is an example of an embedded style sheet
  30. 30. Questions?
  31. 31. Assignment <ul><li>work through chapter 4 in book </li></ul><ul><li>1-paper on how to register a domain name </li></ul>

×