Digital Portfolios Design Best Practices Why Make a

Digital Portfolios Design & Best Practices

Why Make a Digital Portfolio? To showcase your academic work in a way that demonstrates your readiness for your next professional goal To show that you’re taking agency over your digital identity and that you’re capable of aligning your interests with specific audiences To display your confidence in working in newer communication tools

What Goes Into One?

What Goes Into One? Basic Project Requirements: ü 3 writing samples covering 3 different genres. üContextualizing and reflective commentary on the 3 samples that discusses the demonstrated skills in terms of the audience’s needs and expectations. (THIS IS THE HARD PART)! üAn up-to-date resume

What Goes Into One? You Might Also Include: üSamples of work down outside the English department (if appropriate for audience and your goal) üWork demonstrating new media skill (video, web, audio, etc) üSamples of work not written n English (if appropriate to audience and your goal) üOthers?

Some Recent Examples

Digital Portfolios Design Tools, Hosting, & Naming

Choosing the Right Design Tool

& Design Tools ADVANTAGES: • Drag and Drop templates • Free with ability to upgrade service • Ability to export site • Ability to edit CSS and HTML

& Design Tools DISADVANTAGES: • Templates limit design options • “. weebly” or “. yola” appears in the web address unless you purchase upgrade Sample: http: //jacquelinebolt. weebly. com/index. html/

Design Tools ADVANTAGES: • WP viewed as a more sophisticated tool • Free with ability to upgrade • Ability to edit CSS and HTML

Design Tools DISADVANTAGES: • Can be difficult to format for a stand alone site • Often limited to preset templates unless you upgrade Sample: http: //tomjesse. com

Design Tools ADVANTAGES: DISADVANTAGES: • More flexible customization without working in HTML or CSS Requires a monthly Adobe Creative Cloud subscription (not available through TCU site license) • Similar interface to Adobe In. Design

Design Tools ADVANTAGES: • Most design flexibility • Work with WYSIWYG or Code • Ability to host under your own name • Portable to other hosting services

Design Tools DISADVANTAGES: • Longer learning curve • More complicated interface between local files and hosting server • Cost associated with software and hosting fees Samples: http: //tomjesse. com http: //student. tcu. edu/kdena/portfolio/pages/Index. html

Choosing the Right Host

It’s Your Domain (or Is It? ) http: //personal. tcu. edu/crode/ http: //curtrode. weebly. com/ http: //curtrode. com/

WYSIWYG & Code View WYSIWYG = “What You See is What You Get” In other words, the region in the software interface where you can lay out the web page roughly as it will appear online. Code View: The region in the software interface where you view, and potentially edit, the actual formatting commands used by the computer.

WYSIWYG & Code View

The Web Inside the Web As we all know, we refer to the Internet as the “web” because each website is part of and linked to a larger “web” or network of sites, hosted on computers (known as servers) all around the world. In short, we use “web” as a metaphor to help us visualize how all the various servers and sites are connected to each other.

The Web Inside the Web But, in a small but real way, each single website is also a “web” of sorts in that even a simple site may have dozens of files needed for it to display properly. When we talk about a web page, we’re usually referring to a HTML file and the content it contains. But for a HTML to communicate its information properly, it also needs to be linked to the necessary supporting files (such as the CSS file and the image & doc files needed for that particular page).

The Web Inside the Web Getting a little messy, huh?

Good Housekeeping Makes for a Happy Site 20833 Templates Images To manage all the interconnected files for your site, it’s essential you develop a sensible and clear folder and subfolder structure.

Good Housekeeping Makes for a Happy Site 20833 Templates Images Having a sensible folder structure will help you locate a file when you want to edit it. More importantly, it will ensure that each HTML page in your site will know where to “find” the supporting files it will need to display its content properly when the site goes live.

Home and Home Away From Home Bare in mind, you’ll ultimately be working with a minimum of two (2) versions of your site. Local Folder 20833 The first is your Local Folder on your computer (or thumb drive or Dropbox account) where you develop and design your files before putting them online.

Home and Home Away From Home Local Folder Remote Folder 20833 The other is the Remote Folder that houses the files on a publicly accessible server that people actually see.

Home and Home Away From Home Local Folder Remote Folder 20833 Dreamweaver will help you manage moving the files back and forth as needed. It’s important to understand, though, that a change made to a file in the Local Folder will not show up automatically in our live site. You need to tell Dreamweaver to “Put” the newly updated file into the remote folder.

Related Best Practices File Naming It’s always a good idea to keep file names descriptive but simple, avoiding capital letters, numbers, and spaces. Not “Supporting Evidence. html” But “evidence. html”

Related Best Practices Naming Your Homepage File As a matter of best practice, always name the home page of your site index. html Do NOT name it “home. html” or “homepage. html. ” Naming the home page “index. html” will allow you to keep your URL as short and simple as possible.

Related Best Practices Your URL for this Project Your web address for your project will be: http: //student. tcu. edu/”username”/20833/ The “username” is your TCU username, without the punctuation (for me, it would crode, not c. rode)