Download Introduction to Web Design Using Microsoft Expression Studio

Introduction to
Web Design Using
Microsoft® Expression® Studio
CHAPTER 1/MODULE 1
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
CHAPTER 1/MODULE
1
The Evolution of Web Design: How People Viewed the
Web and How They Built Web Sites with that View
There are many additional sources for learning about the history of the Internet from the Internet
Society at http://www.isoc.org/internet/history/ and predictions about its future from Elon
University at http://www.imaginingtheinternet.org/.
Development of the World Wide Web
In 1989, Tim Berners-Lee, a computer specialist working at CERN (European Organization for
Nuclear Research), the world’s largest particle physics research laboratory in Geneva,
Switzerland, created the World Wide Web. Originally when he first wrote a proposal for a global
hypertext system, he called it “Mesh,” which he later renamed the World Wide Web. No longer
frustrated by his inability to share information, he could now communicate electronically with
others and link research documents creating a “web” of information. The Web, because of its
richness of content and media—audio, video, animation, and music—popularized the Internet.
By 1992, we were “Surfing the Internet,” a phrase coined by Jean Armour Polly, a New York
librarian. It’s interesting to note that the concept of hypertext is credited to Vannevar Bush, an
American scientist famous for his work on analog computing and his role as the first presidential
science advisor during World War II. His thoughts about a machine he called the Memex, which
would allow the user to follow trails of thought, were described in the essay "As We May Think"
in the Atlantic Monthly journal in July 1945.
The W3C (World Wide Web Consortium) was established to develop standards and guidelines
for the Web. Tim Berners-Lee has served as the director of the W3C, which is based at the
Massachusetts Institute of Technology, Laboratory for Computer Science since it was created in
1994.
Tim Berners-Lee
With the introduction of the World Wide Web, there was an urgent need to develop browsers to
allow users to view content on both the Internet and the Web. Tim Berners-Lee developed the
first browser, which he named WorldWideWeb. on December 25, 1990. In 1992, the second
browser, developed at the University of California at Berkeley, was called ViolaWWW. It could
display graphics and download applets. The third browser, Midas, was developed later that year
at SLAC (Stanford Linear Accelerator Center). The first Web site in North America was also
developed at SLAC. The next browser was Samba, developed for Macintosh computers. Mosaic,
one of the early browsers with cross-platform support for all users—not just researchers or
academia —was developed at the National Center for Supercomputer Applications (NCSA), a
1-2
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
research institute, at the University of Illinois at Urbana-Champaign. Two students, Marc
Andreessen and Eric Bina, are credited as the key developers. After graduating, Andreessen with
Jim Clark co-founded Netscape Communication Corporation to produce and market their
browser, which was released in 1994. Netscape quickly became the world’s dominant browser.
In 1995, it had revenues of $85 million. The following year, revenues increased to $346 million.
However, Microsoft entered the field with its browser, Internet Explorer, and quickly gained
control. The browser wars hastened the development of HTML. The following chart is based on
data from Onestat.com.
Browser Wars Market Share Percentage:
1995
1997
1999
2001
2003
Internet Explorer
2.9
39.4
67.5
89.9
95.9
Netscape
80.1
57.6
30.7
9.8
3.7
Other
17.0
3.0
1.8
.3
.4
To view the most recent information on browser status, visit the W3Schools Web site at
www.w3schools.com/browsers/browsers_stats.asp or The Counter at www.thecounter.com/stats/
for consumer oriented Web site statistics.
In 1999, Netscape was purchased by AOL (America Online). In February 2008, AOL announced
it would cease development on all Netscape Web browsers. The company continued supporting
the current version, Netscape 9, by releasing patches or security fixes until that date. After
February 1, 2008, all development stopped. Other browsers today include Firefox, Safari, Flock,
Opera, and MozBraille and Libbraille for visually impaired users.
First Generation Web Design (1991–1994): "Build it and they will come"
That was all that seemed to be necessary. Everyone was excited by this engaging, informationfilled resource allowing quick and easy clicks to supplementary information. These early designs
were primarily static sites with basic structures that consisted of headings and paragraphs. Users
could navigate to various pages by clicking hyperlinks. Page content was structured in basic
layouts. Personal sites were the rage then. Blogs are more popular now. The entire URL
(Uniform Resource Locator) had to be typed to access the Web sites at that time. That’s no
longer necessary today. The first generation sites were also limited by the technology available at
the time. Security of data and privacy were serious issues that required yet unavailable
technology to solve. To view examples of first generation Web sites, click the links for Dejavu at
http://www.dejavu.org/1994win.htm and the Stanford Linear Accelerator Center at
http://www.slac.stanford.edu/history/earlyweb/firstpages.shtml, where the Midas browser was
created and the first Web site in North America was developed. The following list describes
some characteristics of first generations Web sites:




1-3
Monitors were monochrome and small.
Modems were used for Internet connectivity (dial-up).
Internet connection speeds were slow.
Browsers used proprietary extensions not endorsed by the W3C, resulting in pages not
rendering properly in all browsers.
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO


Guest books were popular.
Form information was sent via e-mail.
A look at one of Microsoft’s original Web sites.
Second Generation Web Design: "Advertise that you sell online, and they will come"
This Web design strategy focused on content. At times, the message competed with the
technology. Because of the Web’s interactivity, 24-hour access, global reach, ability to present
product information for ordering, and the sizable revenue generated from online sales, an online
presence was essential for businesses large and small. Web sites would frequently include the
following elements:



1-4
Intuitive, user-friendly navigation systems
Use of forms
Focus on content
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO










Tables
Frames
Buttons
Colors
Banners
Blinking text
Hit counters
“This site is best viewed in” message
Marquees
Guest books
The features available in the
popular browsers—Netscape
Navigator and Internet
Explorer—helped drive the
technology used on Web sites. A
common problem at the time was
the lack of standardization
(establishing uniformity of
protocols and processes). Sites
viewed by different browsers did
not always render properly
because the two giants—
Netscape and Internet Explorer—
offered different features or
extensions in their browsers.
Example of the second generation of Microsoft’s Web site.
Third Generation Web Design: "Design with the customer in mind"
A third generation site attempted to address its audience based on the Web site’s objective,
which would drive its design and structure. Flash (delivering dynamic content) was frequently
used in these sites to provide users with an exciting, interactive, online experience. Portals were
another staple found on third generation sites. Portals, which are still plentiful, provide a gateway
or access point to locate information, products, and services on various Web sites. There are two
types of portals. A horizontal portal addresses the needs of a broader audience and offers a
diverse range of services, products, and information. Yahoo! and MSN are examples of
horizontal portals. The vertical portal, however, targets a specific audience and offers selected
1-5
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
information, products, and/or services to its users. WikiEducator.org, catering to educators, is an
example of a vertical portal. Again, an intuitive, user-friendly navigation system was an essential
element. The design of these sites could include the following elements:








Target specific audience
Focus on content rather than technology
Intuitive, user-friendly navigation system
Use of columns
Forms
Splash page when the site opens
CSS (cascading style sheets)
Portals
Third generation example of Microsoft’s site.
Fourth Generation Web Design: "Web 2.0: Wikis, blogs, podcasts, and more"
This generation of design is truly participatory and interactive. These sites customize or
personalize the user’s online experience. Web designers, when working with common graphic
design elements, consider usability and accessibility issues. Well-designed sites focus on the
visual organization of content, use of an intuitive navigation system on every page, careful
selection of typography (font style, color, size, and spacing), standards compliance, and a
uniform and consistent design for a more polished, professional look.
Site designers take full advantage of the new tools of Web 2.0. Web sites are no longer static,
unchanging resources. Visitors now have the ability to create and modify content viewed on the
1-6
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
Web. Let’s discuss some of these cool new features. Web sites offering WYSIWYG (What You
See Is What You Get) wikis and blogs provide users with the tools for content authoring. A wiki,
according to Wikipedia, is a collection of Web pages designed to enable anyone who accesses
them to contribute or modify content. Wiki, developed in the early 1990s by Ward Cunningham,
is Hawaiian for “fast” but some suggest it’s also an acronym for What I Know Is (Wikipedia,
2008). Blogs (or weblogs) are online commentaries, conversations, and journals. The ability to
add comments to blogs can be extremely useful.
To make that online commentary even more exciting, podcasts are also available from some
sites. The term is derived from iPod and broadcast. Files (audio, music, and video) can be
downloaded from Web sites and played on your computer or any other handheld electronic
devices capable of handling MP3 files. RSS (Really Simply Syndication or Rich Site Summary)
is used to deliver podcasts to subscribers. Webcasts (similar to the traditional television
broadcast) delivering audio and video content are also available on many sites. The freemium
business model is frequently used by Web 2.0 companies. Basic services are given free to online
users. The premium services, however, are fee-based. Companies get free advertising, build a
critical mass of users, and develop a potential revenue source.
Social networking builds online communities of people. Two of the most popular social
networking sites are Facebook and MySpace. A social site using virtual reality (VR) and avatars
is There.com. This online 3D community is designed for teens. Basic membership, core services,
and products are free; however, fees are charged for premium services. Is this an example of the
freemium business model? To view a very short video clip entitled “Social Networking in Plain
English,” click http://www.youtube.com/watch?v=6a_KF7TYKVc. Netsmartz’s “Social Networking”
video, geared to teens, is available at http://www.nsteens.org/videos/social-networking.
Mashups are created when you combine data (content, technologies, objects, or services) from
other sources and create a new application. Microsoft’s Popfly (beta) allows you to easily create
mashups. Using http://www.popfly.com, test your skills and have a little fun. Try to create a
mashup (make your own application by combining elements from other applications or sources),
create a game, or create a Web page. Elements frequently found on Web 2.0 sites include the
following:














1-7
Dynamically generated content by the user
Social networking features
Compliance with Web standards
Rounded corners
Subtle 3D effects
Larger text
Video sharing
Content authoring tools for editing, commenting, and reviewing
Internet privacy allowing users to manage their privacy by deleting their user content and
profiles
Web services
Wikis
Blogs
Podcasts
Webcasts
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO





RSS feeds
Cascading style sheets
Freemium business model
Open source
File sharing
Recent view of the Microsoft Web site.
AJAX (Asynchronous JavaScript and XML) enhances Web design because it permits
information to be processed without reloading the page. Content is updated immediately when a
user performs an action. A form’s AutoComplete feature is performed using AJAX. Microsoft
uses AJAX for Microsoft Live Maps, allowing you to manipulate maps and zoom into almost
any level. Spelljax.com, a free spelling checker, is also an AJAX-based application.
The Mobile Web provides wireless access to handheld computers, phones, or any portable
electronic device capable of retrieving data. One challenge faced by Mobile Web users is the
small size of the screen, creating usability issues. Another challenge is interoperability resulting
from incompatible mobile devices. Site designers are considering these issues because of the
increasing number of portable devices connecting to the Internet. Standardization, the missing
component, is being addressed by the W3C.
The W3C developed the following Mobile Web Best Practices, which support the design and
delivery of content to mobile devices. According to the W3C, the 10 ways to mobilize are:


1-8
Design for one Web viewed by many devices.
Rely on Web standards.
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO

Stay away from known hazards:
• Good design decreases usability issues (small screens and keyboards).
• Eliminate pop-up windows.
• Do not use frames or tables.







Be cautious of mobile device limitations.
Optimize navigation.
Check graphics and colors.
Keep it small.
Use the network sparingly.
Help and guide user input.
Think of users on the go.
Microsoft also offers Live Search for Mobile and Windows Live for Windows Mobile that
include e-mail, instant messaging and search, and advanced local search and mapping
capabilities. Global Positioning Service (GPS) is offered to mobile users to provide directions
and mapping services. Traffic data is available for a number of metropolitan cities. To access
these services, use the URL http://mobile.search.live.com.
Two screens of an application shown on a mobile device.
Internet Structure: Technology, Coordination, and Organizations
Internet Visionaries and Pioneers
Early pioneers dreamed and wrote about their vision of the connectedness of our world. In 1962,
Joseph Licklider, director of the Defense Advanced Research Projects Agency (DARPA)
Computer Research Program, discussed his Galactic Network ideas. According to the Internet
Society (ISOC), Licklider’s Galactic Network was a globally interconnected set of computers
through which everyone could quickly access data and programs from any site. Those ideas,
almost 50 years old, describe the Internet as we know it today!
1-9
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
In 1965, Larry Roberts, a researcher at MIT (Massachusetts Institute of Technology) connected
two computers using telephone lines—one in Massachusetts and the other in California. The two
computers worked together, communicated together, and shared data.
At UCLA (University of California, Los Angeles) in 1969, Leonard Kleinrock, by connecting a
computer to an Interface Message Processor (the packet-switching node connecting computers to
the ARPANET), became the first node on the ARPANET, making it the first computer on the
Internet!
Robert Kahn, in October 1972, presented the first public demonstration of ARPANET at the
International Computer Communication Conference. Prior to this time, ARPANET was
restricted to government use, academia, and research.
Vinton Cerf, frequently referred to as the “Father of the Internet,” and Robert Kahn
co-designed TCP/IP, the first networking communication protocols, in 1974. At that time,
ARPANET consisted of only 40 computers connected to its network.
Internet History and Structure: United States Government’s Role
The Internet, which was created before the Web, is the world’s largest computer network. In
1958, the United States Department of Defense established ARPA (Advanced Research Projects
Agency), the research and development organization for the Department of Defense. The name
was later changed to DARPA (Defense Advanced Research Projects Agency). During the 1960s,
an initiative was created by the Department of Defense to ensure that its communication system,
consisting of computers and connected by a telephone network system, would remain intact if
any component was damaged or destroyed during a natural disaster or attack. If the most direct
route was not available because a part of the network was damaged, routers (which connect
networks and determine where packets or data should be sent) would direct traffic around the
network using alternate routes.
1-10
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
The solution was to create a computer network without centralized control, which would remain
operational and increase efficiency, productivity, and convenience. By the end of 1969, a fournode network consisting of four connection points (or workstations connected by phone lines)
was created. UCLA was the first node to connect; SRI (Stanford Research Institute) was the
second connected node; UCSB (University of California, Santa Barbara) connected as the third
node; and the University of Utah was the fourth node to connect. The network crashed while the
first message was being sent between UCLA and SRI. This small network was known as
ARPANET, which was the precursor of today’s Internet. Early applications of this network were
remote logins, file transfers, remote sharing of peripherals, and e-mail. In 1971, Ray Tomlinson,
a computer engineer at BBN Corporation in Cambridge, Massachusetts, developed the first email program. His first message sent over the network was simply "qwertyuiop" (the sequence of
letters on one row of a computer keyboard). ARPANET continued growing as more universities
and organizations connected. By 1971, 15 nodes were connected. Most of the nodes were located
at universities in the United States and NASA (National Aeronautics and Space Agency).
By the 1970s, there was a growing need for independent computer networks to share information
with each other; however, these networks could not connect because they used different
communication protocols (sets of rules used by end points in a telecommunication connection).
The need for standardization became a key issue. As a result, the United States Department of
Defense lobbied for and achieved standardization of TCP/IP (Transmission Control
Protocol/Internet Protocol), which allowed other networks to connect to ARPANET. In 1974,
these interconnected networks became known as the Internet—a WAN (Wide Area Network).
In its early years, the Internet was used by only the United States military and academia for
research. It did not have the functionality of today’s Internet. As a result, it consisted primarily of
text and menus. As more networks connected and the amount of information increased, there was
a greater need to sort and index the data. One of the early search tools was Gopher, which was
developed at the University of Minnesota in 1991 by Mark McCahill and named after the
school’s mascot. This early tool allowed users to click hyperlinked menus to access information.
Remember, in the early days of the Internet, pages simply consisted of text files with
descriptions of files and file names. Veronica (Very Easy Rodent Oriented Net-wide Index to
Computer Archives) was developed at the University of Nevada in 1992. Veronica, a more
efficient and effective tool, searched all Gopher files. The following year, Jughead (Jonzy’s
Universal Gopher Hierarchy Excavation and Display) was developed at the University of Utah
by Rhett (Jonzy) Jones. This improved search tool was capable of performing keyword and
Boolean searches. Archie is simply an abbreviation for Archives. Each of these tools was used to
search a part of the Internet known as Gopherspace. Gopher sites are rarely accessed today.
Today’s Internet consists of thousands of connected networks. In the United States, the Internet
consists of regional networks, funded by the National Science Foundation (NSF) and serving
various regions of the country. The National Science Foundation played a huge role during the
1980s in the development of the Internet by funding the NSFNET and allowing
commercialization of the networks. ARPANET was restricted to government, academic, and
research use only. The regional network at the University of California at San Diego handles
international and western traffic in the United States. This regional network is appropriately
called CERFnet; it pays homage to Vinton Cerf, who is frequently referred to as the Father of the
Internet. CERFnet is also an acronym for California Educational and Research Federation. These
regional networks connect to the Internet’s backbone through Network Access Points (NAP)
1-11
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
located near major cities. Some Regional NAPs are North West Net created in 1987,
Southeastern Research Universities Association, New York State Education and Research
Network, Great Plains Network, and the Northern Tier Network. In 1995, the NSF dissolved the
NSFNET to allow commercialization of the Internet. Use the link
http://www.nsf.gov/news/special_reports/nsf-net/ to view the video “NSF and the Birth of the
Internet.” At the time of its dissolution, the NSFNET had connected more than 50,000 networks
across the globe.
Most residential users gain Internet connectivity through Internet Service Providers (ISP) or
Internet Access Providers (IAP). Since 1989, The World has been providing dial-up access to the
Internet. It advertises itself as the first commercial ISP on the planet at http://www.theworld.com.
AT&T, Comcast, AOL, Verizon, and EarthLink are examples of Internet Service Providers.
Connection is provided for a monthly fee that varies based on the ISP and the type of service
offered.
The Domain Name System (DNS)
Every computer on the Internet has an IP (Internet Protocol) address, which is a string of
numbers unique to a connected computer. It would be difficult remembering IP addresses for
Web sites. The DNS has simplified this task for us by converting host or domain names into IP
addresses. To access the Internet Corporation for Assigned Names and Numbers site, you could
remember 192.0.34.65, its IP address. Would you agree it’s much easier to remember
www.icann.org?
The DNS has established classifications of top-level domain names. You’re probably familiar
with most if not all of the following domains:






.com
.edu
.gov
.mil
.net
.org
Commercial
Educational institution
Government
Military
Network
Organization
Here are several additional top-level domains:












1-12
.aero
.asia
.biz
.cat
.coop
.info
.int
.jobs
.mobi
.museum
.name
.pro
Air travel
Asia and Pacific region
Business
Catalan language and culture
Cooperatives
Information
International
Companies
Mobile compatible sites
Museum
Individuals
Professions (physicians, lawyers, certified public accountants)
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO


.tel
.travel
Online communications service
Travel industry
There are also country codes for top-level domains. Visit the IANA Web site (Internet Assigned
Numbers Authority) to view a listing of other top-level domain names, including country codes.
Organizations that Provide Structure, Guidance, and Policy
Because the Internet does not belong to any one entity, a number of organizations were
developed to ensure the free and open use of the Internet to benefit everyone worldwide. The
Internet Society (ISOC), a nonprofit organization founded in 1992, has continued to provide
leadership in Internet-related standards, education, and training. Network Solutions Inc. (NSI)
has the responsibility for registering names for .com, .net, and .org. Assigning, managing, and
coordinating IP addresses and domain names is the task of the Internet Corporation for
Assigned Names and Numbers (ICANN). The Internet Architecture Board (IAB), as its
name implies, addresses the architecture for Internet protocols and standards. Finally, the
Internet Engineering Task Force (IETF) focuses on the evaluation and operation of the
Internet.
Intellectual Property and Copyright
Intellectual property is the product of one’s intellect – something that a person produces with his
or her brain and creative skills. Intellectual property is protected by laws in most countries and
can include artistic works—music, film, plays, poems, novels, paintings, photographs, and other
creations. With the Web’s popularity, immediate access to information, plus the ease of copying
and pasting, users must be very careful not to violate the intellectual property rights of others.
Check the fine print on Web sites to discover if the materials you’d like to use are free to use or
restricted. Infringing copyrighted or other protected intellectual property is a violation of federal
law! Material such as text, music, and video that is labeled as public domain can be used without
requesting permission. Some materials can be used with permission from the author, and yet
other items can be used if credit is given to the author. It is impossible to know the permissions
you might have without checking the fine print!
An example of a “Terms of Use” section of the Microsoft Web site.
Developing Effective Web Use Skills
The Web is an amazing resource with a wealth of information. Efficiently and effectively
accessing information on the Web is a skill worth developing. Let’s take a look at several
effective search strategies. Familiarize yourself with several search engines or subject
directories. It’s important to know how your favorite search tools work. Read the Help section
offered by a search engine or subject directory to learn how it works, how to improve your
searches, and how to interpret the relevancy ranking. Search engines use software referred to as
spiders or robots to index huge areas of the Internet. Subject directories are indexed by people,
1-13
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
cover a smaller area, and may not be as current. An example of a search engine is Microsoft’s
Live Search and Google; Yahoo is a popular hybrid using both a subject directory and a search
engine.
Using Boolean and proximity operators in your query can help narrow or broaden your search.
Operators include AND, +, OR, NOT, and NEAR.
AND (+) is an inclusive operator. This means that both terms must be found in order for the
document to be identified. OR is an exclusive operator. This means that either/or of the terms
listed can be found in order for the document to be identified. NOT is another exclusive operator.
The word after NOT (-) is excluded from the sites identified and listed. NEAR is a proximity
operator. A proximity operator determines the closeness of terms within the text of an identified
document. NEAR is a restrictive AND. The proximity within potential documents is determined
by the particular search engine. Here is an example of a search for information about all
browsers except Netscape: your query could be “browsers NOT Netscape” or “browsers –
Netscape.”
Select very specific keywords and phrases that describe what you’re seeking. You can also use
wild-card characters to narrow or broaden your search. These characters include * (representing
one or more characters) and ? (representing one character) in a query.
Imagine you are searching for any topic related to Boolean. Your query could be “Boolean *.”
Your hits or results, ranked by relevancy, could include Boolean operators, Boolean definition,
Boolean logic, Boolean data type, etc. You can also use the parentheses or quotation marks to
search for a specific phrase. Here are some examples:


"Boolean operators"
(Boolean logic)
Natural language queries are quite easy. Simply type your query as a question—no keywords or
phrases are necessary. Examples of natural language search engines are Ask.com (formerly
AskJeeves.com), Ixquick.com, and Answers.com.
Other search engines include Blinkx.com, which advertises itself as the world’s largest and most
advanced video search engine with over 26 million hours of video. It is the remote control of the
Video Web, allowing users to locate episodes of television shows. The co-founder and chief
technology officer, Suranga Chandratillake, states, “There’s been a massive increase in TV
content online, and users have caught up with that reality.”
Meta search engines search a number of search engines and directories simultaneously.
URL.com searches Google, Yahoo, and MSN and provides a ranking in the left margin and also
allows users to vote. Dogpile.com and Ixquick.com search multiple engines but return only the
top 10 of any search results. Clusty.com organizes results in concept clusters. Mamma.com and
Metacrawler.com are other meta-search engines you may be familiar with. Do a search for “meta
search engine.” Using the same query, do searches on each of the meta search engines to
compare results. To access a tutorial, visit http://www.internettutorials.net/second.html.
Microsoft’s SearchTogether is a free Internet Explorer plug-in that allows teams to collaborate
on searches from different locations. This tool allows users to share results with others.
1-14
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
Evaluating Web Sites
Not everything available online is completely accurate. Anyone can create and publish a Web
site without oversight or without proving the contents are factual. Because of the lack of editorial
controls and auditing, the responsibility for verifying the accuracy of the information found falls
on the user. It is important to evaluate online resources before using them.
There are several important criteria to use when determining the validity of a site.
Accuracy
Are sources cited? Is the author knowledgeable and trained? Are links available
providing supplementary information to support the content on the site? When
writing citations for works that you have referenced, you may use
http://CitationMachine.net, an online interactive resource that helps you create
citations in various formats.
Authority
Is the author’s contact information available—name, mailing address, and/or email address? Is information about the author’s affiliation available?
Coverage
Is content in-depth and relevant?
Currency
How frequently is the site updated? Are any links broken? Is the information
outdated?
Objectivity
What is the site’s purpose? Are biased views presented?
Reputation
Check the URL to determine the type of the site. Generally, .gov, .org, and .edu
sites provide fairly objective information because they are not marketing a
product or service. Determine whether it is a personal site. A clue that a site might
be a personal site is the tilde (~), %, or the word member or user in the URL.
Remember, there is no editorial board for auditing Web content. Check for links
to essential information about the organization—About Us, Mission, or Purpose.
Look to see what organizations are linking to the Web site. To locate information
about the site, you can use http://www.alexa.com.
Let’s access Alexa.com. Once on Alexa’s home page, click the Traffic Rankings tab at the top.
Now, use MSN.com as your query to get traffic details. The following types of information will
appear:




MSN’s global reach
Traffic rankings (page views and users)
Page views per user
Where users go once they’re on the site (pages accessed)
Additional questions to ask when evaluating a Web site include: Does the site have a
professional look and feel? Is it user friendly and intuitive? Do you notice errors in spelling,
grammar, and/or punctuation?
1-15
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
Internet Safety
You protect what you own in the “real” world. When leaving your home, you lock the door. You
keep your mobile phone and wallet in a secure location. It’s imperative that you also take
precautions in the “virtual” world when working online. You wouldn’t consider driving a car on
a highway without instruction, supervision, and guidance. Why try to navigate the “information
superhighway” without using those same measures?
The Internet provides a wealth of information, resources, and tools. It can also be a dangerous
forum. You must be aware of the risks involved when working online. Some of those risks
include:




Cyber bullying
Online predators
Identity theft
Jeopardizing your college admission or employment prospects
Techniques Commonly Used by Perpetrators



Phishing (sending fraudulent e-mail from an alleged creditor requesting personal and
financial information). Phishing is often recognizable by its errors, such as misspelled
words or poor grammar.
Searching online profiles for personal information
Sending inappropriate e-mail or instant messages
A phishing notification.
1-16
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
How You Can Put Yourself at Risk







Disclosing personal information (last name, age, telephone number, address, or social
security number)
Disclosing financial information (credit card or banks account numbers)
Responding to inappropriate messages
Agreeing to secret meetings (online or in person)
Providing too much information in your online profile
Instant messaging (once sent you can’t retract the instant message)
Posting inappropriate videos and materials (presenting an image you might later regret)
When threatened, solicited, or not feeling comfortable with a message received or sent, it is
imperative that you speak with a responsible adult. It may be a parent or guardian, a school
counselor or instructor, or maybe a mentor. Don’t be afraid to reach out to those who can help
you. Inappropriate activities and messages can also be reported to the Cyber Tip Line at 1-800843-5678, or at http://www.cybertipline.com.
The COPPA (Children’s Online Privacy and Protection Act) mandates that owners of
commercial Web sites must get parental permission before collecting personal information from
children under the age of 13. Parents also have the right to review and revoke any information
collected from their children. The Netsmartz Cyberbullying video
(http://www.nsteens.org/videos/cyberbullying) is an excellent reference that provides information
about cyber bullying. The Netsmartz.org site is a great resource for additional information about
Internet safety, providing interactive activities, scenarios, safety tips, and videos for students,
parents, educators, and law enforcement personnel.
Laws in the United States
In the United States, the Copyright Act protects authors of original works by giving them
exclusive rights to their work. The original author may, however, authorize others to use their
work in a limited capacity. The Copyright Act includes all original work, even electronic and
digital media. The original author’s work is protected during his or her lifetime plus 70 years. A
good rule to remember is that copyright laws always apply to a work unless explicitly waived or
used according to the published terms such as with Creative Commons License.
The best advice is to always to request permission to use another author's material. There are,
however, exceptions for educational use.


1-17
Fair Use Doctrine
Copyrighted material may be used, in specific situations, for education and research
without permission. According to the Copyright Office, the original work cannot be used
for commercial gain, copying workbooks or textbooks is prohibited when the materials
can be purchased, and it is permissible to use limited portions of original work, including
quotes.
Face-to-Face Teaching
The Copyright Act does permit the performance or display of copyrighted works during
face-to-face teaching.
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO

Distance Learning
Distance learning environments extend the face-to-face teaching exemption to distance
learning. Only those students in the distance learning class have access to the content
during the class period, and the work must be related to the course content.
Derivative works are derived from original works. According to the United States Copyright
Office, only the owner of the copyrighted work can authorize a new version of the original work.
The derived work must be substantially different from the original work(s). Minor changes or
adjustments will not qualify it as derivative work. A derivative work received for registration in
the Copyright Office is one that is primarily a new work but incorporates some previously
published material.
The DMCA (Digital Millennium Copyright Act) was signed into law in 1998 by President
Clinton. This Act aligned copyright law with the widespread use of electronic and digital media.
According to the Copyright Office, the act criminalizes circumventing anti-piracy measures
installed in most software, and requires service providers to remove content from users’ Web
sites that may have copyrighted material.
Public domain works are free for the public to use without permission. Material that is in the
public domain is not copyrighted.
Copyright laws vary from one country to another; it is wise to research a country's intellectual
property laws before using another person's work.
Creative Commons
This non-profit organization was founded in 2001 at Harvard Law School. Creative Commons
(CC) is now headquartered in San Francisco, California. According to its Web site, its goal is the
expansion of reasonable, flexible copyright for others to build upon legally and to share. The
copyright licenses provided by CC are less restrictive than those issued by the Copyright Office.
On the CC site, you can search for CC-licensed work, and you can license your own work. As
stated on its Web site, “Creative Commons provides free tools that let authors, scientists, artists,
and educators easily mark their creative work with the freedoms they want it to carry”
(http://creativecommons.org/). You can share, remix, and reuse—legally.
Open Source
Open source is a software development method in which intellectual property may be publicly
shared, permitting anyone to freely use and distribute the software as well as modify the source
code. The Open Source Initiative is a nonprofit organization promoting the use of open source
development of software and making it free to the public. The source code must also be made
available, to improve the quality and reliability of the software. According to the OSI Web site,
“One of our most important activities is as a standards body, maintaining the Open Source
Definition for the good of the community” (http://www.opensource.org/).
Open Source Alternative (http://www.osalt.com) provides access to alternatives to well-known
commercial software. Various titles can be found to meet specific needs.
1-18
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
Developing Technologies
E-Commerce
Electronic commerce, or e-commerce, involves business transactions that occur electronically
and online. The Web as a venue for e-commerce offers unlimited potential for businesses of all
sizes. E-tailers, or online retailers, are open 24/7, have a global reach, and can provide
customized, streamlined services to customers. Some of the top e-tailers are Amazon, eBay,
HSN (Home Shopping Network), and QVC (Quality, Value, and Convenience). PayPal, another
e-tailer, provides electronic payment and transfer of funds for business transactions. Fees
charged are based on several factors, including the amount of the transaction, payment option,
and currency used. What other companies do you think belong on the list of top e-businesses?
Visit http://www.internetretailer.com/ to determine if the companies on your list are included in the
top e-tailer rankings. What factors do you feel influenced the selection of e-tailers included on
the list?
Two e-tailers setting high e-commerce standards and creating successful e-business models are
Amazon and eBay. Jeff Bezos, Amazon’s founder, started the company in his garage in 1995. It
took years for his company to make a profit. The same year, Pierre Omidyar created a Web site
called AuctionWeb. He auctioned and sold a laser pointer that did not work. He contacted the
winning bidder to make certain he knew the laser pointer was broken. The bidder was a collector
of broken laser pointers. It was just what he wanted! AuctionWeb is now known as eBay.
Search Engine Optimization (SEO) is critical for all sites—especially e-commerce sites. SEO
helps businesses increase site traffic, improve the quality of the traffic, test and optimize content
and design, increase the time spent on the site, enhance visitor satisfaction, and improve the
site’s visibility—all of which should help to increase revenue.
Pay Per Click (PPC) is another tool used to increase visibility and sales. With PPC, a business
pays a predetermined fee to the site on which an advertisement appears every time a user clicks
through to their site.
Services
Web services are built on technologies and standards that allow the exchange of information with
other software applications using Internet protocols. Web services operate over any network.
Microsoft first used the term when it introduced Web services as a component of its .NET
technology. With the increasing implementation of Web services, standards are quickly
developing. XML (Extensible Markup Language) tags the data. SOAP (Simple Object Access
Protocol) allows programs on different computers to communicate across a network. WSDL
(Web Services Description Language) describes and locates the Web services that are available.
UDDI (Universal Description, Discovery and Integration) are listings or directories where
businesses can advertise their Web services and their business.
Several new services and applications are available to online users. Microsoft’s Windows Live™
(http://get.live.com) and Microsoft Office Live (http://www.officelive.com) are designed to
1-19
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
provide online services and applications to individuals and small businesses. Several other Web
services and applications are listed in the following chart:
Windows Live Calendar
Allows users to plan activities and invite others. (Beta)
Windows Live QnA
A forum in which community members answer questions posed by other community
members. Content is governed by a Code of Conduct and monitored by the community.
Windows Live Mobile
A version of Windows Live for mobile, handheld electronic devices.
Microsoft Office Live
Small Business
Provides a host of online tools and resources for small businesses to help establish an
online presence and manage their business.
Windows Live Connect
Provides Hotmail (free e-mail accounts) and Messenger to help users remain connected.
Windows Live Share
Allows users to share resources using several innovative tools.
Windows Live Sky Drive
Provides password-protected file storage.
Windows Live Photo
Gallery
Allows users to manage and share photos and videos.
Windows Live Writer
Assists users in adding pictures and videos to their blogs.
Windows Live Events
Allows users to plan events and invite others.
Windows Live OneCare
Family Safety
Protects children online by filtering Web sites, managing their online interactions, and
managing and tracking their online activities.
SpellJax, the online spelling checker that was described earlier in this module, is another
example of a Web service.
Chapter Summary
In a relatively short period of time, our world has changed dramatically because of the creation
in 1969 of a small computer network known as ARPANET. That early network, developed by
the United States Department of Defense, consisted of four nodes connected by phone lines at
UCLA, UCSB, Stanford Research Institute, and the University of Utah. It was Joseph Licklider
who envisioned the Galactic Network in 1962. His vision of the Galactic Network described
today’s Internet. Early applications of ARPANET were remote logins, shared peripherals, and
file transfers. In 1971, the first e-mail program was developed by Ray Tomlinson, a computer
engineer, and it transferred messages across ARPANET. During this same time period, 15 nodes
were connected to ARPANET. Most of the computers were located at universities across the
United States. In the early years of ARPANET, only the United States military and academia
used the network. One of the first standards was TCP/IP. These standards allowed other
networks to connect. In 1974, these interconnected networks became known as the Internet. Most
users today connect to the Internet using ISPs or IAPs. Connection is provided for a monthly fee
that varies based on the ISP and the type of service offered.
Every computer on the Internet has an IP address. Just as a mailing address uniquely defines a
location on a map, an IP address uniquely identifies a device that is connected to the Internet.
The Domain Name System converts those unique numbers that computers understand into host
or domain names that people can understand.
A number of organizations provide policy, education and training, and structure to the Internet,
since no one entity owns it. Some of those organizations include the Internet Society, the Internet
Corporation for Assigned Names and Numbers, and the Internet Architecture Board.
1-20
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
The World Wide Web, developed by Tim Berners-Lee in 1989, revolutionized our entire culture
and popularized the Internet. With the introduction of the Web, browsers were needed to view
content on the Internet and the Web. Mosaic, one of the early browsers, was developed at the
National Center for Supercomputer Applications at the University of Illinois, Urbana-Champaign
by two students, Marc Andreessen and Eric Bina. After graduation, Andreessen and James Clark
co-founded Netscape Communication Corporation to market their browser in 1994. Netscape
quickly became the world’s most popular browser. Microsoft entered the field with Internet
Explorer and eventually dominated the market once owned by Netscape. Internet Explorer is still
the world’s most popular browser, with Netscape no longer being supported. Other browsers
include Firefox, Flock, Opera, and Safari. Today’s browsers comply with the W3C’s standards.
Web sites have evolved over time. First generation sites were static—no interactivity. They
included basic structures. Second generation sites included intuitive, user-friendly navigation
systems, focused on the content, and animation—blinking text, moving banners, animated
images, etc. Since businesses were now online, there was much more interaction than with first
generation sites. Third generation sites addressed their audiences based on their objectives,
which drove the design and structure. Splash pages were popular, as was the use of cascading
style sheets, portals, and forms. These sites focused on content and were easily navigated. Fourth
generation sites are participatory and highly interactive. They provide richer experiences for their
users. Site designers take full advantage of the new tools of Web 2.0. They frequently include
wikis, blogs, podcasts, webcasts, and Web services. Standards are being developed for mobile
users of the Web to make their online experience productive and efficient.
Effective and efficient searches are important when accessing online information. Boolean
operators, wild-card characters, and descriptive key words and phrases can be used to narrow or
broaden a search. Use strategies to ensure the validity of your information, because not all online
information is true. Five criteria you can apply are: accuracy, authority, coverage, currency, and
objectivity. The URL can also offer hints about the source of the information and its potential for
accuracy.
Don’t be tempted by copying and pasting online material, because it is intellectual property. The
Copyright Act protects the author of the work, so you must first get permission to use any
material that was created by another person. You may not present copied music, video, pictures,
or other content as your own work. If the material is in the public domain, no permission is
needed to copy it, but you must still give credit to the original authors. Creative Commons’
copyright licenses are less restrictive than those issued by the United States Copyright Office. On
the Creative Commons site, you can search for CC-licensed work as well as licensing your own
work.
Open source software is publicly shared intellectual property. Anyone may use it, modify it, and
redistribute it freely. Osalt.com is a great site for accessing Open Source Alternatives for popular
programs.
E-commerce has exploded because of the popularity of the World Wide Web and the new
technologies that have been developed. It offers unlimited potential for businesses of all sizes.
The term "Web services" was first used by Microsoft. Web services are built on standards and
technologies that allow the exchange of information with other applications. Several new
services are available for online users. Microsoft’s Windows Live and Office Live services are
1-21
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
designed to provide online experiences for individuals and small businesses, including document
sharing and live meetings over great distances.
Review Questions
1. Research MozBraille. Why is there a need for this application and others like it?
2. Using the site http://www.wikimediafoundation.org/wiki/Home, answer the following
questions:
a. What is the purpose of the Wikimedia Foundation?
b. List and describe three of its projects.
3. What Internet visionary described today’s Internet almost 50 years ago?
4. You've found an online photograph and a video taken at the 2008 Beijing Olympics,
and you want to use them in a presentation you’re creating. Is it permissible to
incorporate them into your work? Explain your answer.
5. Is open source software protected by copyright law? Explain your answer.
Essential Vocabulary
AJAX – Asynchronous JavaScript and XML, which permits Web information to be processed
without reloading a page.
Backbone – A series of interconnected networks that form the skeleton for the Internet. (Local
and regional networks connect to the Internet via the backbone.)
Blog – (Weblog), an online journal.
Boolean Operators – AND, OR, and NOT, which can be used to refine a query for a search
engine.
Browser – Software to decode, display, and allow users to interact with Web pages (for
example, Internet Explorer, Netscape, Opera, and Firefox).
Collaboration – The process by which groups or teams work cohesively to produce a desired
result.
Copyright – Legal protection for original work.
Creative Commons – An organization that provides flexible copyright licenses, which allows
authors to define their own copyright terms.
Derivative Work – A piece of work based upon the original work of others.
Directory – A categorized list of Web sites, managed by people instead of software. Yahoo is a
popular directory using human editors to review and categorize sites.
1-22
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
DMCA – Digital Millennium Copyright Act, which was signed into law by President Clinton in
1998 to address digital media.
DNS – Domain Naming System, which uses domain name servers to translate domain names to
IP addresses.
E-Commerce – Electronic business.
Fair Use Doctrine – A doctrine that provides for limited use of copyrighted work without
requiring permission from the copyright holder.
Folksonomy – A collection of user-generated annotations and categorizations of content, usually
on the Web.
HTML – stands for Hypertext Markup Language. It is the publishing language of the World
Wide Web.
IAB – Internet Architecture Board, which addresses architecture for protocols and standards.
ICANN – Internet Corporation for Assigned Names and Numbers, which controls the
assignment of domain names and IP addresses.
IETF – Internet Engineering Task Force, which focuses on the Net’s evolution and operation.
Infringement – Unauthorized use of copyrighted material.
Intelligent Agent – Software that automatically searches the Internet for information.
ISOC – Internet Society, which addresses standards, education and training, and policy.
ISP – Internet Service Provider (for example, AOL, Comcast, MSN, Verizon, and Net Zero).
JavaScript – A scripting language that adds interactivity to Web sites.
Local Area Network (LAN) – A network of systems covering a small area such as a classroom
Meta Search Engine – Searches multiple search engines and returns results.
Mobile Web – Access to wireless data services using a mobile device such as a PDA (Personal
Digital Assistant) or mobile phone.
Natural Language Query – A query that is presented as a question; no keywords, Boolean
operators, or wild-card characters are needed.
Network – A group of connected computers sharing resources.
Node – Connection point or workstation on a network.
NSI – Network Solutions Inc. registers .com, .net, and .org domains.
Open Source – Publicly shared software (including source code) that users may modify and
freely use and distribute.
Pay Per Click (PPC) – Online advertising for which payment is based on user "click–throughs"
to the sponsor's site.
1-23
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
Podcasts – Derived from iPod and Broadcast, an audio broadcast converted to an MP3 file or
other audio file format for playback on a computer or handheld electronic device.
Protocol – Set of rules used by end points in a telecommunication connection.
Public Domain – Material that is not copyrighted and is available for use without permission
and free of charge.
Robots – Software programs ("spiders" and "crawlers" are frequently used terms) that search,
analyze, collect, and index data for fast retrieval.
RSS (Really Simple Syndication) – Web feed formats used to publish frequently updated content
such as blogs and podcasts.
SEO – Search Engine Optimization, a process that helps increase site traffic.
Service Oriented Architecture (SOA) – A collection of Web services.
Simple Object Access Protocol (SOAP) – Allows programs on different computers to
communicate across a network.
Social Networking – Building communities through the use of online tools.
Standardization – Establishing uniformity of protocols and processes.
For Instructors
Topics
1. The Evolution of Web Design and History
a. How people viewed the Web and how they built Web sites with that view
2. Internet Structure
a. Technology/coordination
b. Organizations
3. Intellectual Property and Copyright
a. Developing effective Web use skills
b. Evaluating information and sources
c. Copyright
4. Emerging Technologies
a. E-commerce
b. New technologies
c. New services
1-24
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
Learning Objectives
1. Explore history and impact of Web technologies
2. Locate Web-based resources and reference materials
3. Learn research techniques to evaluate the authenticity of Web resources (Internet safety)
4. Demonstrate ethical behavior in using and producing Web resources
5. Evaluate existing Web sites based on their design, accessibility, and usability
6. Explore business applications of Web technology
7. Investigate entrepreneurial (e-commerce) opportunities using Web technologies
8. Explore Web 2.0 functionality
9. Investigate new Web technologies
10. Explore personal and professional communication/collaboration through Web
technologies
NETS-S
1.
Creativity and Innovation
Students demonstrate creative thinking, construct knowledge, and develop
innovative products and processes using technology.
c.
use models and simulations to explore complex systems and issues.
d.
identify trends and forecast possibilities.
.
3.
Research and Information Fluency
Students apply digital tools to gather, evaluate, and use information. Students:
1-25
a.
plan strategies to guide inquiry.
b.
locate, organize, analyze, evaluate, synthesize, and ethically use information
from a variety of sources and media.
c.
evaluate and select information sources and digital tools based on the
appropriateness to specific tasks.
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
5.
Digital Citizenship
Students understand human, cultural, and societal issues related to technology and
practice legal and ethical behavior. Students:
a. advocate and practice safe, legal, and responsible use of information and
technology.
b. exhibit a positive attitude toward using technology that supports
collaboration, learning, and productivity.
c. demonstrate personal responsibility for lifelong learning.
6.
Technology Operations and Concepts
Students understand human, cultural, and societal issues related to technology and
practice legal and ethical behavior. Students:
a. advocate and practice safe, legal, and responsible use of information and
technology.
b. exhibit a positive attitude toward using technology that supports
collaboration, learning, and productivity.
c. demonstrate personal responsibility for lifelong learning.
21st Century Skills
Information, Media, and Technology Skills
INFORMATION LITERACY


1-26
Possessing a fundamental understanding of the ethical/legal issues surrounding the access
and use of information
Accessing information efficiently and effectively, evaluating information critically and
competently, and using information accurately and creatively for the issue or problem at
hand.
INTRODUCTION TO WEB DESIGN USING MICROSOFT EXPRESSION STUDIO
Review Questions with Answers
1. Research MozBraille. Why is there a need for this application and others like it?
ANSWER:
MozBraille is a browser for visually impaired users that offers output to a Braille terminal, textto-speech output, and larger characters to view. Online resources should be accessible by all
users on all devices.
2. Using the site http://www.wikimediafoundation.org/wiki/Home, answer the following
questions:
a. What is the purpose of the Wikimedia Foundation?
b. List and describe three of its projects.
ANSWER:
The Wikimedia Foundation is an international nonprofit organization that is committed to
providing free content. Its projects are Wikipedia (encyclopedia), Wikibooks (textbooks and
manuals), Wikiversity (free learning tools), Wiktionary (dictionary and thesaurus), Wikinews
(news), Wikiquote (quotations), Wikimedia Commons (shared media repository), Wikisource
(source documents), and Wikispecies (directory of species).
3. What Internet visionary described today’s Internet almost 50 years ago?
ANSWER:
Joseph Licklider’s Galactic Network concept was a description of today’s Internet.
4. You've found an online photograph and a video taken at the 2008 Beijing Olympics,
and you want to use them in a presentation you’re creating. Is it permissible to
incorporate them into your work? Explain your answer.
ANSWER:
No; you may not simply incorporate them into your work. The photograph and video are
considered intellectual property and are protected by federal law. Using them without the
permission of the author would be a violation of the United States Copyright Act. The original
authors' works are protected during their lifetime plus 70 years.
5. Is open source software protected by copyright law? Explain your answer.
ANSWER:
No. Open source software is publicly shared intellectual property that is completely free to
anyone who wants it. Its source code can be modified and redistributed.
1-27