Digital Portfolios Design & Best Practices

1. Digital PortfoliosDesign & Best Practices

2. 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

3. What Goes Into One?

4. 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

5. 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?

6. Some Recent Examples

7. Digital PortfoliosDesign Tools, Hosting, & Naming

8. Choosing the Right Design Tool

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

10. 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/

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

12. 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

13. 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

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

15. 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

16. Choosing the Right Host

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

18. 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.

19. WYSIWYG & Code View

20. WYSIWYG & Code View

21. WYSIWYG & Code View

22. WYSIWYG & Code View

23. 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.

24. 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).

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

26. 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

27. 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.

28. 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.

29. 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.

30. 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.

31. 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”

32. 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.

33. 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)