How the web works june 2010
Upcoming SlideShare
Loading in...5
×
 

How the web works june 2010

on

  • 662 views

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

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

Statistics

Views

Total Views
662
Views on SlideShare
662
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How the web works june 2010 How the web works june 2010 Presentation Transcript

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