Web Design, 4 th Edition 1 The Environment and the Tools 1 The Environment and the Tools

Chapter 1: The Environment and the Tools2

Chapter Objectives  Describe the Internet and the World Wide Web  Discuss ways to access the Internet and the Web  Categorize types of Web sites  Identify Web design tools  Explain Web design roles Chapter 1: The Environment and the Tools3

The Internet and the World Wide Web  A network is composed of several computers, printers, and data file storage devices connected together to share computing resources and data  The Internet is a worldwide public network that connects millions of private networks  Internet 2 is a major cooperative initiative among academia, industry, and the government to increase the Internet’s possibilities and correct some of its challenges Chapter 1: The Environment and the Tools4

The Internet and the World Wide Web Chapter 1: The Environment and the Tools5

The Internet and the World Wide Web  The World Wide Web (WWW or Web) consists of Internet-connected computers called Web servers on which Web pages are stored  A Web site is a group of related Web pages –Starts with a home page –Pages are linked together with a hyperlink, or link  Surfing the Web Chapter 1: The Environment and the Tools6

Influence on Society Communication Education Entertainment and News Business Chapter 1: The Environment and the Tools7

Communication Chapter 1: The Environment and the Tools8  Bookmarking / favorites  Electronic mail ( )  Internet Relay Chat (IRC)  Web-based chat  IM chat  Collaborative workspaces  Virtual meeting spaces  Weblog (blog) –Video sharing (video blogging)

Communication  Social networking  Social bookmarking  Massively multiplayer online games (MMOGs)  3D virtual worlds Chapter 1: The Environment and the Tools9

Education  Formal and informal teaching and learning  Enhances traditional teaching methods –Instructors often use the Web to publish podcasts or videos of lectures, Web page links for research, syllabi and grades, and more for their students Chapter 1: The Environment and the Tools10

Entertainment and News  Popular entertainment sites include music, videos, sports, games, and more  News Web sites allow you to read news stories, and some even allow you to watch video clips –Some provide interactive elements Chapter 1: The Environment and the Tools11

Business  Electronic commerce (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 –Business-to-consumer (B2C) –Business-to-business (B2B) –Consumer-to-consumer (C2C) Chapter 1: The Environment and the Tools12

Cable Television Lines  Allows users to connect to the Internet through their cable line  Rapid transfer rates using a cable modem connected to a CATV line Chapter 1: The Environment and the Tools13

Cable Television Lines Chapter 1: The Environment and the Tools14

Fixed and Mobile Wireless Access  Internet connectivity that uses satellite technology instead of telephone lines  Radio signals provide high-speed connection –Wireless fidelity (Wi-Fi)  Standards classified by generation –3G –4G Chapter 1: The Environment and the Tools15

Telephone Line Access  The Public Switched Telephone Network (PSTN) used to be the main way all users connected to the Internet Chapter 1: The Environment and the Tools16

Dial-Up Lines  A dial-up line is a temporary connection that uses one or more analog phone lines  Least popular Internet access method  Two versions of Internet access using dial-up lines –Regular dial-up –High-speed dial-up Chapter 1: The Environment and the Tools17

Digital Dedicated Lines  A dedicated line is a connection that always is established between two communications devices  Can be analog or digital  Quality, consistency, and speed of the connection are better than a dial-up line  Businesses often use dedicated lines Chapter 1: The Environment and the Tools18

Dedicated Lines  Three popular types of digital dedicated lines –Integrated Services Digital Network (ISDN) –Digital Subscriber Lines (DSL) Asymmetric digital subscriber line (ADSL) –T-carrier Lines T-1 line Fractional T-1 line T-3 line Chapter 1: The Environment and the Tools19

ISDN Lines  Integrated Services Digital Network  ISDN allows a single telephone line to carry three or more signals (multiplexing)  Faster than dial-up Chapter 1: The Environment and the Tools20

DSL  Digital Subscriber Line –Transmits at fast speeds on existing standard copper telephone wiring –Some installations can provide a dial tone  Asymmetric Digital Subscriber Line (ADSL) –Faster to receive data than to send data –Ideal for Internet users Chapter 1: The Environment and the Tools21

T-carrier Lines  Any of several types of digital lines that carry multiple signals over a single communications line  Extremely fast data transfer rates  T1 Line –Most popular T-carrier line –Fractional T1  T3 Line –Equivalent to 28 T1 lines Chapter 1: The Environment and the Tools22

Internet Service Providers  Internet Service Provider (ISP) –Has permanent Internet connection –Provides temporary connections –Regional ISP –National ISP EarthLink Chapter 1: The Environment and the Tools23

Web Browsers  A Web browser is a specific software program that requests, downloads, and displays Web pages stored on a Web server Chapter 1: The Environment and the Tools24

Web Browsers  Access Web pages by entering its Uniform Resource Locator (URL) into the Web 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 Chapter 1: The Environment and the Tools25

Web Browsers Chapter 1: The Environment and the Tools26

Alternative Web Page Viewing Devices  Handheld computers  Personal Digital Assistant (PDA)  Smartphones  Netbooks Chapter 1: The Environment and the Tools27

Types of Web Sites Personal Organizational / Topical Commercial Chapter 1: The Environment and the Tools28

Personal  Limited developmental resources  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 Chapter 1: The Environment and the Tools29

Organizational / Topical  Organization Web sites contain information on particular organizations  Topical Web sites contain information on the developer’s interests and hobbies  Not all information is accurate Chapter 1: The Environment and the Tools30

Commercial  Used to promote and sell a product or service  More sophisticated commercial Web sites generally produce greater revenue Chapter 1: The Environment and the Tools31

Search Tools  Web-based search tools –Search engines Keywords –Metasearch engines –Search directories  Search engines might use a variety of methods to create its index –Spiders or robots –Meta tags  Search engine optimization (SEO)  Subject directories Chapter 1: The Environment and the Tools32

Search Tools Chapter 1: The Environment and the Tools33

Portals  A portal is a Web site that offers a starting point for accessing information –General consumer portal –Personal portal –Vertical portal –Corporate portal –Hyperlocal portal Chapter 1: The Environment and the Tools34

Web Design Tools  Does the new technology meet currently accepted standards for Web development and design?  What specifically can the new technology do to further the purpose of my Web site?  How will implementation of the new technology affect my Web site’s visual appeal, accessibility, and usability?  What impact will adding this technology have on security and other Web site elements?  What are the direct and indirect costs of implementing the new technology?  How soon will I see a return on investing in this new technology? Chapter 1: The Environment and the Tools35

Markup Languages  Hypertext Markup Language (HTML)  Extensible Markup Language (XML)  Extensible HTML (XHTML)  Wireless Markup Language (WML) Chapter 1: The Environment and the Tools36

Hypertext Markup Language  Markup language used to create Web pages  Defines a Web page through tags or markups  World Wide Web Consortium (W3C) sets standards for HTML Chapter 1: The Environment and the Tools37

Extensible Markup Language (XML), Extensible HTML (XHTML), and Wireless Markup Language (WML)  XML uses markups to define the content of a Web page  XHTML is a markup language that is a combination of the features of XML and HTML  WML is a subset of XML –Used to design Web pages for microbrowsers on handheld computers, PDAs, and smartphones Chapter 1: The Environment and the Tools38

Cascading Style Sheets  Standardize the presentation of the content by applying styles to such elements –Font –Margins –Positioning –Background colors Chapter 1: The Environment and the Tools39

Scripting Languages  Short programs that run on the server or the browser  Browsers must support this technology  Scripting languages –Javascript –Active Server Pages (ASP) –PHP: Hypertext Preprocessor (PHP) –MySql  Active content  Malware Chapter 1: The Environment and the Tools40

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 –HTML-Kit –CoffeeCup –BBEdit –NoteTab Chapter 1: The Environment and the Tools41

WYSIWYG  Packages that automatically generate HTML code  There are packages available for every level of expertise –Microsoft Expression Web –Adobe Dreamweaver Chapter 1: The Environment and the Tools42

Web Templates and Other Design Technologies  A Web template is a predesigned model that can be customized for fast Web site or Web page creation or updating  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  A content management system (CMS) facilitates the management of Web content development –Content repository Chapter 1: The Environment and the Tools43

Web Design Roles  Web design can be done independently or with a partner or group  Creative Role –Content writer / editor –Web page designer –Web artist / graphic designer –Multimedia producer Chapter 1: The Environment and the Tools44

Web Design Roles  Hi-Tech Role –Web programmer –Database developer –Network / security administrator  Oversight Role –Content managers –Webmaster Chapter 1: The Environment and the Tools45

What is Web Design?  Wikipedia:  “Web Design is a skill of creating presentations of content (usually hypertext or hypermedia that is delivered to an end-user through the World Wide Web, by way of a Web browser or either Web-enabled software like Internet television clients, microblogging clients and RSS feeders.” Chapter 1: The Environment and the Tools46

Chapter 1: The Environment and the Tools47

What Makes a Good Web Site? Chapter 1: The Environment and the Tools48

Landscape Analysis  Sample Chapter 1: The Environment and the Tools49

What is DESIGN? Chapter 1: The Environment and the Tools50 Design is all around us!  Design is what links creativity and innovation. It shapes ideas to become practical and attractive propositions for users or customers. Design may be described as creativity deployed to a specific end.’ The Cox Review

Design and WEB Chapter 1: The Environment and the Tools51  Design is a key part of web design. This includes both the design principles: balance, contrast, emphasis, rhythm, and unity and the design elements: lines, shapes, texture, color, and direction. Design balancecontrastemphasisrhythm unitydesign elementslines shapestexturecolordirection  By putting these things together, a web designer creates websites.web designer

Chapter 1: The Environment and the Tools52