FIRST EDITION AN INTRODUCTION TO WEB DEVELOPMENT A CONCEPTUAL APPROACH By Evelyn Stiller Plymouth State University Bassim Hamadeh, CEO and Publisher Michael Simpson, Vice President of Acquisitions Jamie Giganti, Senior Managing Editor Jess Busch, Senior Graphic Designer John Remington, Senior Field Acquisitions Editor Monika Dziamka, Project Editor Brian Fahey, Licensing Specialist Claire Yee, Interior Designer Copyright © 2016 by Cognella, Inc. All rights reserved. No part of this publication may be reprinted, reproduced, transmitted, or utilized in any form or by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information retrieval system without the written permission of Cognella, Inc. First published in the United States of America in 2016 by Cognella, Inc. Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for identification and explanation without intent to infringe. Cover image copyright © by Depositphotos / Variant. Printed in the United States of America ISBN: 978-1-62661-630-1 (pbk) / 978-1-62661-631-8 (br) CONTENTS CHAPTER ONE SETTING THE STAGE FOR WEB DEVELOPMENT 1 Points to Consider 1 Where Did the Web Come From? 1 Web 2.0—The Interactive Web 2 Social and Ethical Considerations of the Internet 4 Getting Resources From the Web 7 Intellectual Property and Web Resources 8 Fair Use 9 Public Domain 9 Creative Commons 9 Websites: A Collection of Files 11 Organizing Your Files 12 Summary 14 References 15 CHAPTER TWO CREATING YOUR FIRST WEB PAGE 17 Points to Consider 17 Introduction 17 Selecting Your Software 18 Introduction to Amaya 19 Downloading Amaya 19 Approach to How-to Information in this Text 19 Creating Your First Web Page 20 The Amaya Interface 20 Good Practices 22 Elements of the First Web Page 22 How to Create Your First Web Page 23 Basic Introduction to HTML (optional) 28 Netiquette and Privacy Considerations 31 Summary 32 CHAPTER THREE HOW THE INTERNET WORKS 35 Points to Consider 35 How the Web Works 35 How Search Engines Work 38 Ranking Search Results 40 Importance of a Web Page 41 Web Page Suitability 41 Nefarious and Commercial Influences on Web Search 43 Filtering the Web 43 Social Ramifications of Search 45 Can Your Information be Found on the Web? 47 Transforming Your Web Page Into a Website 48 How to Add Pages to Your Website 50 Summary 52 References 53 CHAPTER FOUR THE DARK SIDE OF THE INTERNET: VIRUSES, SPYWARE, IDENTITY THEFT, AND THE LOSS OF PRIVACY 55 Points to Consider 55 Why Should We Consider the Dangers of the Internet? 55 Ethical Web Development and Privacy Protection 56 How to Install Software Safely 58 Viruses 58 Spyware 59 Keystroke Loggers 59 Computer Worms 59 Trojan Horses 60 How to Use Email Safely 60 Spam and Phishing 60 Links and Attachments in Spam and Malicious Emails 61 How to Surf the Web Safely 62 Cookies 62 Persistent Cookies 63 Taking Action Against Malicious Cookies 63 Summary 65 CHAPTER FIVE HOW COMPUTERS REPRESENT IMAGES: CREATING EFFECTIVE IMAGES ON THE WEB 67 Points to Consider 67 Introduction 67 The Binary System 68 Representing Images 69 Image-File Formats 71 BMP 71 JPEG, PNG, and GIF 73 Importance of Image Size 75 The Ethics of Image Selection and Manipulation 76 Basic Ethical Perspectives 76 Principles of Professional Ethics 77 Ethical Case Study 78 Other Examples of Image Editing in the Media 79 Tools for Image Editing 80 Layers 81 Precision Selection and Editing Tools 81 Textures, Filters, and Color Adjustments 81 Creating an Image Composition/Image Map 82 Creating the Image Composition with GIMP 82 The Basic Steps for Creating an Image Composition 83 Creating an Image Map with Amaya 84 Summary 86 References 86 CHAPTER SIX WEBSITE DESIGN 87 Points to Consider 87 Introduction 87 Content Design 88 The Question of Audience 88 Organizing Principles 88 Website Structure 89 Site Diagrams 90 Web Page Design: Structural Considerations 91 The Main Page: Information Layout 92 Web Page Design: Aesthetics 93 Establishing the Website’s Look-and-Feel: Frames and Cascading Style Sheets 94 Design Example 96 Creating the Thumbnail Images 96 Structuring the Web Page Layout 97 Preparing for the Inline Frame (Iframe) 98 Inserting the Inline Frame 99 Targeting Hyperlinks to the Iframe 101 Summary 102 References 103 CHAPTER SEVEN ANIMATION 105 Points to Consider 105 Introduction 105 Raster Graphics versus Vector Graphics 107 Simple Vector Graphics Example 109 Approaches to Computer-based Animation 110 Common Elements in Animation Software 111 Comparing Animation Tools 112 Pencil 113 Adobe Flash 114 Anime Studio 116 Using Animations on the Web 118 Summary 119 CHAPTER EIGHT CREATIVITY 121 Points to Consider 121 Introduction 121 Barriers to Creative Thinking 122 Misconception: Creative Thought is a Frivolous Pursuit 122 Misconception: Creative Thinking Requires Artistic Talent 122 Misconception: Creativity is Mysterious and We Have No Control Over It 123 Divergent and Convergent Creative Thinking 124 A Convergent Creative Process 124 Illustrating Incubation Techniques 127 Using Anthropomorphism 127 Using Exaggeration 128 Using Role Reversal 128 Jazzing Up/Creating a Visualization of a Cliché 128 Creating a Visual Metaphor 129 Using Historically Significant Events as Inspiration 129 Combing/Synthesizing Ideas 130 Creating an Analogy Between Two Domains 130 Parody 130 Look at a Concept Extra-Culturally 131 Slapstick 131 Applying the Incubation Phase to the Hiking Website 131 Illumination 133 The Illumination Phase and the Hiking Website 135 Verification 137 The Verification Phase and the Hiking Website 138 Summary 139 References 139 CHAPTER NINE USING SOUND ON THE WEB 141 Points to Consider 141 Introduction 141 What is Sound? 142 How Sound is Digitized 143 How Sound is Digitally Recorded and Played 144 Sound File Formats 144 MIDI Audio Files 146 Audacity 146 Design Considerations 149 How to Add Sound to a Website 150 Summary 152 References 153 CHAPTER TEN DESIGN: CASCADING STYLE SHEETS AND TEMPLATES 155 Points to Consider 155 Introduction 155 Cascading Style Sheets (CSS) 156 A Brief Look at CSS Syntax 156 Using CSS in Amaya 158 Creating Style Sheets With Amaya 159 Using CSS With Adobe Dreamweaver 161 Using Templates 163 Templates in Amaya 164 Templates in Adobe Dreamweaver 166 Summary 167 CHAPTER ELEVEN VIDEO 169 Points to Consider 169 Introduction 169 Ethics of Video Use on the Web 170 Accessibility of Video Content 170 Other Ethical Considerations 172 Design 174 Website Design 174 Creating Efficient Videos for the Web 177 Using Windows Movie Maker 178 Summary 180 References 181 CHAPTER TWELVE BLOGGING: CITIZEN JOURNALISM 183 Points to Consider 183 Introduction 183 The Appeal of Blogs 184 How are Blogs Found? 185 How Blogs Enhance Information Exchange 186 The Anatomy of a Blog 188 How to Create Your Own Blog 189 Planning the Blog 189 Creating the Blog 190 Summary 195 References 195 CHAPTER ONE SETTING THE STAGE FOR WEB DEVELOPMENT POINTS TO CONSIDER • What distinguishes the Web from the • Which demographics might be excluded Internet? from web-based content? • What is Web 2.0? • What material on the Web is restricted • Why are blogs an important technology, due to copyright? and how can they enhance a democratic • How can non-copyrighted material be society? produced, and why might one wish to • Give an example of how blogs have influ- do so? enced the mainstream media. • What elements comprise a web page/ • How do social media sites differ from website, and how do these elements regular websites? interrelate to each other? • Why are privacy considerations so impor- • What is the purpose of an HTML file? tant for web developers? WHERE DID THE WEB COME FROM? hen Leonard Kleinrock sent the first message from his computer at the University of California, Los Angeles, to a computer at Stanford Research Institute over W the first packet-switched network (Kleinrock 2010), he could not have foreseen where this technology would lead society in the coming decades. What connected these two computers would pave the way for what we understand to be the Web today. This communications network started out as a means for researchers to communicate and share data and other computer resources. During the late 1960s and early 1970s a series of networking protocols were developed for internetworking, that is, connecting multiple computer networks together. Advanced Research Projects Agency Network (ARPAnet) was the primary precursor to the Internet and connected mainly university and research facilities together. A standard set of protocols were developed in 1982, 1 2 AN INTRODUCTION TO WEB DEVELOPMENT: A CONCEPTUAL APPROACH FIGURE 1.1 A chronological progression of major milestones for the Internet which allowed computer networks around the world to communicate with each other (Kleinrock 2010). This global network became known as the Internet. The event that transformed the Internet into the Web was the development in 1990 of the first web browser, initially named WorldWideWeb, but then renamed to Nexus to avoid confusion with the World Wide Web (Berners-Lee 2013). Web browsers, software that dis- play multimedia content retrieved over the Internet, revolutionized the use of the Internet by supporting multimedia. Prior to this event, Internet tools displayed textual information only, so Nexus was the first Internet-based software to integrate text and images. Of course, modern web browsers support many additional multimedia file types, in addition to im- ages. Today one can view a movie or listen to music using a wide array of web browsers, such as Firefox, Safari, Internet Explorer, or Chrome. The next generation of the Web is defined by the ability of viewers of a website to supply content to that website without using complex tools or requiring special access to a web server. This new generation has been dubbed Web 2.0.