Web Portfolio Design And Applications

325 Pages·2006·9.699 MB·English

by  John Dimarco

(cid:1)(cid:2)(cid:3)(cid:4) (cid:5)(cid:6)(cid:7)(cid:8)(cid:9)(cid:6)(cid:10)(cid:11)(cid:6)(cid:4) (cid:12)(cid:2)(cid:13)(cid:11)(cid:14)(cid:15)
(cid:16)(cid:15)(cid:17)(cid:4) (cid:18)(cid:19)(cid:19)(cid:10)(cid:11)(cid:20)(cid:16)(cid:8)(cid:11)(cid:6)(cid:15)(cid:13)
John DiMarco
St. John’s University, USA, and
New York Institute of Technology, USA
(cid:21)(cid:12)(cid:22)(cid:18)(cid:4)(cid:23)(cid:24)(cid:25)(cid:26)(cid:5)(cid:4)(cid:5)(cid:26)(cid:27)(cid:28)(cid:21)(cid:29)(cid:30)(cid:21)(cid:31)(cid:23)
Hershey • London • Melbourne • Singapore
Acquisitions Editor: Michelle Potter
Development Editor: Kristin Roth
Senior Managing Editor: Amanda Appicello
Managing Editor: Jennifer Neidig
Copy Editor: Jennifer Young
Typesetter: Sharon Berger
Cover Design: Lisa Tosheff
Printed at: Integrated Book Technology
Published in the United States of America by
Idea Group Publishing (an imprint of Idea Group Inc.)
701 E. Chocolate Avenue
Hershey PA 17033
Tel: [phone]
Fax: [phone]
E-mail: [email protected]
Web site: http://www.idea-group.com
and in the United Kingdom by
Idea Group Publishing (an imprint of Idea Group Inc.)
3 Henrietta Street
Covent Garden
London WC2E 8LU
Tel: [phone]
Fax: [phone]
Web site: http://www.eurospanonline.com
Copyright © 2006 by Idea Group Inc. All rights reserved. No part of this book may be reproduced,
stored or distributed in any form or by any means, electronic or mechanical, including photocopying,
without written permission from the publisher.
Product or company names used in this book are for identification purposes only. Inclusion of the
names of the products or companies does not indicate a claim of ownership by IGI of the trademark
or registered trademark.
Library of Congress Cataloging-in-Publication Data
Web portfolio design and applications / John DiMarco, editor.
p. cm.
Summary: "This book defines and gives an overview of the web portfolio and how it is being used in
academic programs and professional scenarios"--Provided by publisher.
Includes bibliographical references and index.
ISBN 1-59140-854-7 (hardcover) -- ISBN 1-59140-855-5 (softcover) -- ISBN 1-59140-856-3
(ebook)
1. Portfolios in education. 2. Internet in education. 3. World Wide Web. I. DiMarco, John, 1969-
LB1029.P67W43 2006
374.126--dc22
2005023880
British Cataloguing in Publication Data
A Cataloguing in Publication record for this book is available from the British Library.
All work contributed to this book is new, previously-unpublished material. The views expressed in this
book are those of the authors, but not necessarily of the publisher.
(cid:1)(cid:2)(cid:3)(cid:4)(cid:5)(cid:6)(cid:7)(cid:8)(cid:9)(cid:6)(cid:10)(cid:11)(cid:6)(cid:4)(cid:12)(cid:2)(cid:13)(cid:11)(cid:14)(cid:15)
(cid:16)(cid:15)(cid:17)(cid:4) (cid:18)(cid:19)(cid:19)(cid:10)(cid:11)(cid:20)(cid:16)(cid:8)(cid:11)(cid:6)(cid:15)(cid:13)
(cid:16)(cid:3)(cid:10)(cid:2)(cid:4)(cid:6)(cid:9)(cid:4)!(cid:6)(cid:15)(cid:8)(cid:2)(cid:15)(cid:8)(cid:13)
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
viii
(cid:5)(cid:7)(cid:2)(cid:9)(cid:16)(cid:20)(cid:2)
Rationale
Back in 2002, I spoke at an educational technology conference sponsored by
Syllabus magazine. My topic was Web portfolios for students and instruc-
tors. I proposed the topic out of a desire to feed my own curiosity regarding
the research front. At the time, I was teaching a wide variety of digital art and
design courses. One of my core principles when teaching in the digital medium
is to have learning objectives that direct students toward creating tangible
projects and ultimately harvesting portfolio-level work. It made sense for my
students and for me to have evidence that the material presented in the course
was put into practice, and students needed a dynamic platform to display their
work. To accomplish this, I planned and developed a comprehensive Web
portfolio of student work with over 100 student Web portfolios (unfortunately,
a year later, the university changed over servers and the online sites were
lost). I presented the Web site and explained the process to an audience of
150 technology educators. I opened the cluster session with two questions.
When I asked the first, “How many people in this room are provided free
Web space from their institution?” almost everyone in the room raised their
hand. Then I asked, “How many people are actually taking advantage of it
and using it?” Ten hands rose.
ix
I was shocked. These are technology people! Then I realized that they were
not behind the curve, they were just reaching the point where they wanted to
begin embracing Web portfolio development. That’s when I knew that the
information I was about to provide would have residual value for them and
their students. After further research, I realized that Web portfolio develop-
ment was in its infancy and I needed to devote research efforts into helping
more people embrace the Web portfolio. There are some initiatives in place at
the college level to implement Web portfolios. One such example is LaGuardia
Community College. The school has mandated the development and output of
electronic portfolios for all graduating students. The initiative brought in tech-
nology and specialists to provide the instructional and infrastructure support
that such a project requires. Regardless of mandates, it is the responsibility of
the professional educator to integrate Web portfolios into their pedagogy and
teaching and learning initiatives. Ultimately, the instructor must pass on the
skills and experience in Web portfolio design and development to their stu-
dents.
The Web Portfolio as an Information
Product for Communication
The desire to help people succeed with communication was a major influence
in my decision to dig into Web portfolios as a research initiative. The Web
portfolio is ultimately a platform for communication and the concepts, images,
and messages within the Web portfolio are centered on persuasion, a major
area in communication studies. The Web portfolio takes on the form of an
information product for communication. To develop the information product
properly, you must first analyze, retrieve, categorize, and manage your pro-
fessional data so that it is refined into information. The refined information is
put into a communication context, the Web portfolio. The communication gen-
erated from the Web portfolio is shaped by content, design, visual quality,
usability, and overall experience visiting the site. The communication should
be persuasive with the goal of getting the visitor to act favorably towards the
author, whether consciously or subconsciously. I want this book to serve the
reader as a tool for helping establish the foundation skills and act as a motiva-
tional force.