Using new and developing technologies, even beginner web developers can create professional-looking websites that include multimedia, social media, and dynamic content viewable on various devices and screen sizes. Applying web technologies is only one part of what is required to produce a successful website: a website that effectively communicates, educates, entertains, or provides a venue for conducting business transactions also requires good web design. This book explains the basic elements of good web design and shows you how to develop compelling websites and webpages for specific purposes or audiences. This chapter begins the process by describing the Internet and the World Wide Web. Next, you learn about the various ways users connect to the Internet. The chapter then describes different types of websites and the tools for creating them. Finally, the chapter discusses the various roles, responsibilities, and skills essential to successful web design.
After completing this chapter you will be able to:
Describe the Internet and the World Wide Web
Discuss ways to access the Internet and the web
Categorize types of websites
Identify web design tools
Explain web design principles, roles, and required skills.
The Internet and the World Wide Web
A computer network
consists of connected computers, mobile devices, printers and data storage devices that share computing resources and data
The Internet
a worldwide public network that connects millions of these private networks
The World Wide Web (web)
is a part of the Internet that consists of connected computers called web servers that store electronic documents called webpages
A webpage
is a specially formatted document that can contain images, text, interactive elements, and hyperlinks, which are links to other pages
A website
is a group of related webpages
A website’s primary page is its home page
Browsing or surfing the web
is exploring the web by moving from one webpage to another
Influence on Society
CommunicationEducationNews and EntertainmenteCommerce
Communication
Bookmark / favorite
Shortcut
Internet Relay Chat (IRC)
Web chat
Instant messaging / IM chat
Group messaging apps
Collaborative workspaces / virtual meeting spaces
Blog
Video sharing / Video blogging
Social networking
Social bookmarking
Massively multiplayer online games (MMOGs)
3D virtual worlds
Wiki
Education
Take an online course from an academic institution to earn a degree or certificate
Watch a video or read a blog post by an amateur expert
Several universities and academic institutions publish some or all educational materials online
Entertainment and News
Popular entertainment sites include music, videos, sports, games, and more
News websites allow you to read news stories, and some even allow you to watch video clips
Some provide interactive elements
E-Commerce
Electronic commerce or e-commerce
encompasses a wide variety of online business activities, including consumer shopping and investing and the exchange of business data and transactions within a company or among multiple companies
E-commerce Transaction Types
Category
Description>
Business-to-consumer (B2C)
B2C e-commerce involves the sale of an endless assortment of products and services directly to consumers. Transactions take place between an online business and an individual consumer
Business-to-business (B2B)
B2B e-commerce involves the sale of products and services and the exchange of data between businesses, and accounts for the majority of e-commerce transactions in the corporate world.
Consumer-to-consumer (C2C)
In C2C e-commerce, business transactions occur between consumers. Examples of C2C e-commerce include online auctions and person-to-person classified ads
Classroom Activities
Quick Quiz
What is the Internet?
What is a hyperlink or link?
What is e-commerce?
Class Discussion
Share how the ability to access the Internet and the web has changed your lives and the lives of your family and friends. Have you never known the world without these technologies? What is your perspective on this question?
Ways to Access the Internet
The speed at which data travels from one device to another is the
transfer rate
measured in:
Bits per second (bps)
From thousands (kbps) to millions (Mbps)
Higher-quality connections needed for
streaming media
Broadband Connections
Broadband
defines high-speed data transmissions over a communications channel that can transmit multiple signals at one time
Digital subscriber line (DSL)
Cable television (CATV) line
FTTP: Fiber to the Premises
Satellite
Connecting to the Internet and the Web
Mobile wireless technologies:
Radio signals
Wi-Fi (wireless fidelity)
Cellular telephones
Wireless providers' broadband networks
Mobile Internet Access
Generations classify standards for mobile communications:
3G: speech and data services
4G: gaming apps and streaming media
Internet Service Providers (ISP)
Has permanent Internet connection
Provides temporary connections
Regional ISP
National ISP
Verizon
Web Browsers
A web browser
a program or app that requests, downloads, and displays webpages stored on a web server
Google Chrome
Microsoft Edge
Mozilla Firefox
Responsive web design (RWD)
is used to create websites that adjust to the device and screen size displaying the webpage
Access webpages by entering its
Uniform Resource Locator (URL) into the browser’s Address bar
URL is comprised of the protocol, domain name and top-level domain designation
Hypertext Transfer Protocol (HTTP)
Domain name can be an IP address or a text version of this address
Top-Level Domain
Domain Type
.aero
Air-transportation industry
.asia
Asia Pacific community
.biz
Businesses
.cat
Catalan linguistic community
.com
Commercial, personal
.coop
Cooperative associations
.edu
Postsecondary institutions
.gov
US government
.info
General Information
.int
International treaty organization
Top-Level Domain
Domain Type
.jobs
Human resources managers
.mil
US Military
.mobi
Consumers and providers of mobile products and services
.museum
Museums
.name
Individuals
.net
Network Providers
.org
Noncommercial community
.pro
Credentialed professionals
.tel
Business and individual contact data
.travel
Travel industry
Classroom Activities
Crtitical Thinking:
How can domain name selection become an important part of promoting a website?
Qhick Quiz:
A faster tranfer rate translates into more expensive Internet access? True or False?
How are mobile communications standards classified?
A business that has a permanent Internet connection and provides temporary Internet connections to individuals and companies is a(n) ____.
Types of Websites
Personal
Limited developmental resources
Content management systems
Uses:
Promote employment credentials
Share news and photos with friends and family
Share common interests or hobbies
Do not post information that can be misused
Organizational / Topical
Organizational websites
contain information on particular organizations
Topical
websites focus on a specific subject
Commercial
Used to promote and sell a product or service
More sophisticated commercial websites generally produce greater revenue
Search Tools
Web-based search tools
Search engines
Keywords
Search engines might use a variety of methods to create its index
Spiders or robots
Meta tags
Metasearch engines
Search Engine Optimization (SEO)
Designing webpages to appear higher in search engine results
Meta tags
Descriptive page titles
Relevant inbound links
Clearly written text
Search Directory
Builds index using human interaction
Click category and subcategory links to find webpages
Portals
A portal
is a website that offers a starting point for accessing information
General consumer
Personal
Vertical
Corporate
Other Types of Websites
Category
Purpose
Examples
Travel
Book a flight or hotel
Travelocity, Expedia
Mapping
get driving directions or plan a bike ride or run
Mapquest, MapMyRun
Financial
Pay bills, transfer funds between bank accounts, and make investments
Citizen Bank, E*Trade
Career
Search job databases, post online reusmes, and network
Monster, LinkedIn, CareerBuilder
Web Publishing
Publish web content in a blog or website
WordPress, Joomla!
Classroom Activities
Class Discussion:
Share your epxperiences, if any, visiting personal, organizational/topical, or commercial websites. Which type of site do you visit most often? Why?
Class Discussion:
Discuss the search tools you use, if any, on a regualr basis. How many use only one or two tools? What is the importance of becoming familiar with multiple search tools, both as a user and as a web designer?
Web Design Tools
Before adding new technology, ask:
Does it meet currently accepted standards?
What can it do to further my purpose?
How will it affect my website’s visual appeal, accessibility, and usability?
What impact will it have on security and other website elements?
What are the direct and indirect costs?
How soon will I see a return on investing?
Markup Languages
Hypertext Markup Language (HTML)
Uses tags to define format and organization of webpage elements
HTML5
W3C sets standards
Extensible Markup Language (XML)
Facilitates sharing of information
Cascading Style Sheets
Standardize the presentation of the content by applying styles to such elements
Font
Margins
Positioning
Background colors
Style sheets can be attached to multiple webpages
Scripting Languages
Programming
languages used to write short programs that run on the server or the browser
Javascript
PHP: Hypertext Preprocessor (PHP)
CoffeeScript
Active content
Malware
Text and HTML Editors
A text editor
is software used to create plain (ASCII) text files
An HTML editor
is a text editor enhanced with special features that are used to more easily insert HTML tags and their attributes
is a predesigned model that can be customized for fast website or webpage creation or updating
A content management system (CMS)
facilitates the management of web content development
WordPress
Joomla
Drupal
Content repository
An intranet is a private network within a large organization or commercial entity that uses Internet and web technologies to share information among only its members, employees, or business partners
Classroom Activities
Critical Thinking
The World Wide Web Consortium (W3C) is an organization that sets technology standards for the web. Ask students to discuss why they think an organization, such as the W3C and other standards groups, are important to the ongoing development of the web as a venue for communication, education, entertainment, and business.
Quick Quiz
____ is the most current standard for HTML.
Notepad is an example of a(n) ____.
Adobe Dreamweaver CC is an example of a(n) ____.
Active content created with scripts can be used by hackers to transmit ____.
Web Design Roles
Creative Roles
Content writer / editor
SEO expert
Web designer
UI / UX manager
Web artist / graphic designer
Multimedia producer
Technical Roles
Web programmer / developer -Front-end -Back-end -Full-stack
Database developer
Web server administrator
Oversight Roles
Web administrator
System architect
Tester
Social media expert
Classroom Activities
Class Discussion
Choose a creative, technical, or oversight role in which you are most interested and then share with the class the reasons for their choice
Quick Quiz
A(n) ____ creates and revises website text.
A(n) ____ converts text, images, and links into webpages.
A(n) ____ creates original art, such as logos, avatars, and props for 3D virtual worlds.
A(n) ____ web developer focuses on aspects that are visible to the website visitor.
If he or she is working alone, a(n) ____ assumes all the roles, including creative, high-tech, and oversight.
