Download
1 / 33
330 likes | 338 Vues
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
E N D
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? 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?
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 DISADVANTAGES: Requires a monthly Adobe Creative Cloud subscription (not available through TCU site license) • ADVANTAGES: • More flexible customization without working in HTML or CSS • Similar interface to Adobe InDesign
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://joeloverall.com http://student.tcu.edu/kdena/portfolio/pages/Index.html
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.
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 To manage all the interconnected files for your site, it’s essential you develop a sensible and clear folder and subfolder structure. Images
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.
Local Folder Home and Home Away From Home 20833 Bare in mind, you’ll ultimately be working with a minimum of two (2) versions of your site. 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.
Local Folder Home and Home Away From Home 20833 20833 Remote Folder The other is the Remote Folder that houses the files on a publicly accessible server that people actually see.
Local Folder Home and Home Away From Home 20833 20833 Remote Folder 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)
