Foundations of Web Design Ver 1.2

1
CHAPTER 1 FOUNDATIONS OF WEB SITE CREATION
20 Slides
2
WHERE WERE GOING
3
COURSE OVERVIEW
4

• What Can you Expect from This Course?
• Focused curricular study covering issues ranging
  from Accessibility to XML (Extensible Markup
  Language) involved in web site creation and
  management on the World Wide Web.
• Chapter Tests, Oral Exams and your Final Exam
  are 33 of your grade
• Through a series of directed, comprehensive
  labs, you will acquire the means, techniques and
  judgement necessary to create highly functional
  and effective web sites. This is accomplished
  using what many experts consider the best
  software available in the market today, Adobes
  web site creation and management software
  GoLive, Photoshop, Illustrator, LiveMotion, and
  Premier.
• Labs and your Journal are 33 of your grade
• Finally, you will be joining a team of
  classmates and charged with the goal of
  Designing, Assembling, and Demonstrating a high
  quality, easy-to-navigate web site. Your Web Site
  Project is expected to reflect the highest
  qualities of Clarity, Consistency, Contrast,
  Simplicity, Structure, and Emphasis.
• Your Web Site Project is 33 of your grade

5

• What Can you Expect from Me?
• Chapter Presentations (1 - 11)
• Lab Introductions and Support
• There are 37 Labs (26 are required - 11 are
  optional)
• These are critical! Please, do not hurry or skip
  any labs . . .
• They are the tools needed for your Web Project
• Consultation Services
• For Your Web Project and Documentation

6
INTRODUCTION TO THE INTERNET
7

• ITS ONLY BEEN 30 YEARS FOLKS!
• 1960s 70s - UNIX Operating System, ARPANET,
  Microsoft and Apple founded (1975 1976
  respectively) . E-mail FTP specifications
  established. 8088 68000 Processors. Compuserve
  founded
• 1980s - IBM PC / (MS) DOS, Apple Macintosh, MS
  Windows. DNS Introduction, 100,000 Internet Users
• 1990s - Windows 3.x 9x. Power PC and Pentium
  Processors. WWW created, Mosaic, Netscape IE
  Browsers. 10,000,000 Internet Users

8
This curriculum, developed by Adobe will give
you a solid foundation in all of the best
principles and practices of professional web
design.
9

• Before 1993, the internet was text-based. Mosaic
  was the first graphical browser.
• Tim Berners-Lee develops the World Wide Web
  concept incorporating addressing (URLs), a
  transporting protocol (HTTP), and a markup
  Language for creating pages (HTML)
• HTML was developed as a smaller, more complex
  subset of the more complex SGML

10

• The World Wide Web Consortium (W3C), created in
  1994 by Berners-Lee to assure the consistency and
  interoperability of the World Wide Web and
  Internet
• The Internet Society (ISOC) is a
  non-governmental, non-profit organization
  dedicated to maintaining and enhancing the
  Internet. ISOC is supported by
• Internet Architecture Board (IAB)
• Internet Engineering Task Force (IETF)
• Internet Research Task Force (IRTF)
• Other WWW Organizations - Internet Assigned
  Numbers Authority (IANA) and Internet Corporation
  for Assigned Names and Numbers (ICANN)

11
INTERNET CONNECTION
12

• Bandwidth - How fast data flows
• Bandwidth is described in Bits Per Second (bps)
  and Kilobits Per Second (Kbps), or thousands of
  bits per second (Mbps anyone?)
• Thus, 56,000 bps is the same as 56 Kbps (may
  also be seen as 56Kb or 56K)
• Adobes GoLive allows you to preview your
  website loading at various speeds.

13

• An Internet Service Provider (ISP) provides the
  connection to the internet
• Home users can choose from any of several current
  connection technologies
• Dialup modem connections have gone from 300
  bps up to todays common connection speed of 56
  Kb
• ISDN - 64Kb to 128Kb
• DSL - Typically 512Kb
• Cable Modem - Broadband technology up to 1.5
  Mbps
• T-carrier Systems (T1 - T3) - Common in
  commercial environments. Up to 45 Mbps
• See www.2wire.com.com, www.directvdsl.com, or
  www.sprint.com for more info

14
INTERNET TECHNOLOGIES AND SERVICES
15
Client requests for data or service are delivered
to a Server computer that has the requested
information, data, or service On the internet,
client requests are initiated using a PC-based
browser application like Netscape Navigator,
Internet Explorer, Opera, or other The internet
is one huge network with many shared devices and
servers
16

• TCP - Transmission Control Protocol - operates
  at OSI layer 4 to establish and guarantee packet
  delivery
• IP - Internet Protocol - operates at OSI layer 3
  and provides a method for addressing and routing
  of data packets across the internet
• HTTP - Hypertext Transfer Protocol - operates at
  OSI layer 7 and used by browsers to transfer
  files between hosts on the internet.
• FTP - File Transfer Protocol - operates at OSI
  layer 7 and used to transfer files between
  internet hosts

17

• Lets try decoding a few URLs
• http//www.isoc.org/internet/history/brief.html
• http//browserwatch.internet.com/stats/stats.html
  
• http//www.adobe.com/products/acrobat/readstep.ht
  ml

18

• FTP - Like HTTP, used to transfer files over the
  internet.
• Unlike HTTP however, FTP is often used to copy
  other files types (non- .html) from site to
  site.
• FTP is also frequently used to move website
  updates from your host computer to your ISPs web
  server.

19
The Telnet application is used to login as a
client to a server located on either a local or
remote network
The e-mail protocol SMTP (Simple Mail Transport
Protocol) is commonly used with one of the more
powerful, server-side POP3 and IMAP protocols and
is used to store and transfer electronic mail
from client-to-client over the internet
20
BROWSERS AND BROWSER FUNCTIONS
21

• Since 1993, when Mosaic was developed, graphical
  browsers have been the driving force behind
  interest in, and development of, the world wide
  web.
• The statistics above are provided by Browser
  Watch at www.browserwatch.internet.com
• The two most popular browsers are Internet
  Explorer and Netscape Navigator. Internet
  Explorer was developed from the earlier Mosaic
  program

22
A simple text formatting language that merely
describes what to display and where to display
it. HTML . . . was never intended to address the
presentation of a document. . . When HTML was
extended to try to encompass things like fonts
and layout, it has been largely unsuccessful.
Hyperlinks vs. linear media presentation. You get
to decide what to view next. This can be either a
very powerful tool or a daunting weapon in the
hands of inexperienced HTML programmers
23
This is whats going on behind the scenes. Youll
become familiar with many of the most common
coding techniques
As a web designer, you need to know that
effectively designed web pages are designed with
the hope of high placement in the search engine
hit lists
24
When you dont want to forget where youve been .
. . Use bookmarks to organize your
favorites! Dont forget though, web sites can
change over time . . . Old links can go dark
without notice
Use multimedia sparingly! Too much can become
visually distressing
25
INTERNET SERVICES, APPLICATIONS AND PLUG-INS
26
Many web development programs like Adobe GoLive
and Macromedia Dreamweaver have FTP capabilities
built right into the software
Despite its growing popularity as an internet
application, Instant Messaging is not permitted
in this classroom. As functional usages of the
internet go, instant messaging is Neanderthal in
its execution. Also, see the last note to the left
27
Freeware vs. Shareware . . .
Compare SVG to Flash Player
28
The Good, the Bad, and the Ugly
Good Sites http//www.garden.org/ http//download
.cnet.com/downloads
Bad Sites
http//www.zcsterling.com/ http//www.moma.org/wor
kspheres/
Great examples of Mystery Meat
Ugly Sites http//valentinemovie.warnerbros.com/
http//www.microsoft.com/jobs/design/
Find the Actors Bios . . . So many warts! . . .
29
WHERE WEVE BEEN
30
THE END! ?