Web Portfolio Design and Applications Table of Contents Preface... viii Chapter I. Introduction to the Web Portfolio... 1 Introduction... 1 Background... 2 Web Literature and Review... 4 Who Needs a Web Portfolio?... 10 Defining the Electronic Portfolio and the Web Portfolio... 12 The Web Portfolio as the Preferred Electronic Portfolio... 13 Types of Web Portfolios... 16 The Web Portfolio Fosters Valuable Learning Experiences... 20 Skills Fostered by the Web Portfolio Process... 24 The Web Portfolio as an Appearance... 25 The Benefits of Web Portfolios... 26 What You Should Get Out of This Book... 27 Review and Conclusion... 31 Chapter II. Conceptualization... 32 Introduction... 32 Defining the User, Understanding the Audience... 33 Define Your User and Their Goals... 36 Concept... 38 Write Your Concept Statement... 41 Content Gathering... 41 Text as Content... 43 Create Your Content List... 44
Create Your Content Outline... 45 The Web Portfolio as a Content Management Tool... 50 Review and Conclusion... 50 Chapter III. Information Design... 52 Introduction... 52 Structure... 53 Web Portfolio Information Organization... 54 Flowcharts as Skeletons... 54 Navigation... 55 Usability... 57 Pre-Evaluation of Usability... 58 Create Your Flowchart... 59 Review and Conclusion... 61 Chapter IV. Visual Design... 62 Introduction... 62 Style... 64 Composition and the Web Portfolio... 72 Space... 73 Type... 80 Images and Graphics... 81 Metaphors and Image Maps... 83 Identity... 83 Color Schemes... 84 Navigation Systems... 84 Backgrounds... 85 Pop-Up Windows... 86 Storyboards... 86 Conclusion... 88 Chapter V. Content, Collection, Development and Management... 89 Introduction... 89 Revisiting the Content Outline... 90 Setting Up the Folder Structure... 91 Image Types... 92 PDF... 92 Web Color... 94 Size... 96 Resolution... 97 Using Photography to Develop Content... 98 Scanning Your Work... 99
vii Taking Screen Captures... 99 Image Preparation, Crop, Scale and Save... 100 Text-Based Content... 102 Web Resumes and CVs... 102 Project Descriptions... 103 Review and Conclusion... 104 Chapter VI. Web Page Design... 105 Introduction... 105 Digital Tools... 106 Visual Design of Web Screens... 108 Pop-Up Windows... 109 Text Decisions... 110 Icons and Logos... 111 Navigation and Buttons... 112 A Word About Slicing and Exporting Pages... 112 Slicing Pages... 115 Optimizing and Exporting Pages and Graphics... 116 Review and Conclusion... 121 Chapter VII. Web Authoring... 122 Introduction... 122 WYSIWYG Applications vs. HTML Hand Coding... 123 Opening Sliced Web Pages from Fireworks... 124 Tables... 125 Creating a Web Page Using Macromedia Dreamweaver... 127 Layers... 130 A Brief Review... 137 Links... 137 CSS... 144 Behaviors... 146 Meta Tags and Keywords... 153 Review and Conclusion... 154 Chapter VIII. Motion, Graphics and Multimedia Production... 157 Introduction... 157 Overview of Web Multimedia Applications and Design Processes... 158 Motion Graphics Defined... 159 Basic Concepts in Macromedia Flash... 161 Creating the Text Animation... 166 Symbol Editor... 171
viii Preparing Audio in Adobe Audition... 180 Placing Audio in Flash... 185 Making Edits to the Flash Files... 191 Conclusion... 192 Chapter IX. Uploading and Testing Your Web Portfolio Site... 193 Introduction... 193 What You Need to Put Your Portfolio on the Web... 194 Where You Can Post Your Web Portfolio... 196 File Transfer Protocol (FTP)... 198 Towards Redesign... 206 Conclusion... 207 Chapter X. Launch and Promotion... 208 Introduction... 208 Marketing... 209 Review and Conclusion... 212 Chapter XI. Server-Side Technologies... 213 Introduction... 213 PHP... 214 Active Server Pages (ASP)... 214 ASP.NET... 215 CGI... 217 Perl... 219 ColdFusion... 220 Conclusion... 221 Chapter XII. Cases and Interviews... 222 Introduction... 222 Web Portfolio Program Case... 223 Sample E-Portfolio Proposal... 227 Interviews... 244 Interview Conclusion... 250 Case Study of Teacher Web Portfolios... 250 Review and Conclusion... 275 Chapter XIII. Web Portfolios in the Information Society and Future... 277 Introduction... 277 The Web Portfolio s Place in the Information Society... 278 The Web Portfolio as Personal, On-Demand, Mass Media and Advertising... 279
ix The Web Portfolio in the Knowledge Worker Age... 280 The Web Portfolio as the Postmodern Appearance... 281 The Web Portfolio as Postmodern Narrative Connection... 283 A Web Portfolio Makes You Digital in a Wired World... 285 The Web Portfolio as a Personal Knowledge Portal... 288 The Web Portfolio as a Responsive Environment... 290 Conclusions... 291 References... 293 About the Authors... 299 Index... 301