1 / 54

Designing ePortfolio website

Designing ePortfolio website. Lan Vu. Overview. Portfolios Why Portfolios are important? Brainstorming and presenting portfolio contents Design a simple Portfolio website. Portfolio. Portfolio. Career portfolio

helia
Download Presentation

Designing ePortfolio website

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing ePortfolio website Lan Vu

  2. Overview • Portfolios • Why Portfolios are important? • Brainstorming and presenting portfolio contents • Design a simple Portfolio website

  3. Portfolio

  4. Portfolio • Career portfolio • An organized presentation of an individual's education, work samples, and skills • Artist's portfolio • A sample of an artist's work or a case used to display artwork, photographs etc • Electronic portfolio • A collection of electronic documents

  5. PORTFOLIO • Product portfolio • 2D separation of products by their market share and profits or growth rates • IT Portfolio • Large classes of items of enterprise Information Technology

  6. Digital Career Portfolio (ePorfilio) • A portfolio that has been prepared for distribution online • A collection of electronic evidence on education, work samples, and skills assembled and managed by a user, usually on the Web

  7. Digital Career Portfolio (ePorfilio) • Such electronic evidence may include: • Inputted text • Electronic files • Images • Multimedia • Blog entries • Hyperlinks. • It is online and maintained dynamically over time.

  8. Why is ePortfolio? • "An innovation of the early 1990s, ePortfolios occur at the intersection of three trends: • 1) Student work is now mostly in electronic form • 2) The Web is everywhere, allowing students to manage large volumes of their work • 3) The 'dynamic' Web site that's database-driven, instead of HTML link-driven, has become the norm for Web developers. We've reached a critical mass, habits have changed, and as we reach electronic "saturation" on campus, new norms of work are emerging. Arising out of this critical mass is a vision of how higher education can benefit, which is with the ePortfolio." (Source: Dr. Trent Batson, Director, Information and Instructional Technology Services, University of Rhode Island)

  9. Some figures • Survey data collected from students on the UC Berkeley campus. • 92% of undergraduate students list computer skills as important to learn during college. • 35% say they've made "little to no progress“ • 36% say they've made only "some progress.“ (Source: Undergraduate Experience Survey, Spring 2003) • 80% of undergraduate students do not have a personal website.

  10. Some figures • Survey data collected from students of University of Wisconsin-Madison

  11. Why is ePortfolio? There are many usage purposes: • Having a place to collect and save your coursework; • Being able to share examples of your work with advisors, faculty, mentors or potential employers; • Directly demonstrating the knowledge, skills and attributes gained within and beyond the classroom; • Mastering valuable technology skills; • Using your creativity to represent yourself and your education and make connections between where you are and where you want to go professionally;

  12. and manymore… • Academic Advising and Planning • Career and Resume Planning • Create Learning Communities (to share and manage information) • Integration (encourage involvement in curricular programs, student groups) • Life-long Learning Tool · Program Evaluation • Student Evaluation and Grading (publish multi-media projects) • Teaching

  13. Benefits • To organize your work throughout your degree program and across your classes • To pursuit higher education purpose • To have a handy, useful record of your work • To use during your job search process • To use during your job interviewing process

  14. Benefits

  15. What you store in your ePortfolio?

  16. ePortfolioFeatures • Should be a tool for self-reflection, degree program and career planning, and goal setting • Is an important asset in getting a job • Should demonstrate your success in “key performances” and skills articulation from across your academic and professional career • Should serve as a platform for creating several flexible “displays” of your abilities and interests… for several different publics

  17. What you would store in an ePortfolio? 1. Transcript 2. Resume 3. Letters of Recommendation 4. Internship Information 5. Course Work 6. Certifications 7. Academic Recognition/Awards 8. Leadership Positions 9. Volunteer Work 10. Student Government 11. Hobbies, extracurricular info

  18. What you store in your ePortfolio? The categories of the University of Minnesota ePortfolio system

  19. Top 10 Qualities/Skills Employers seek (Source: Job Outlook 2003, National Association of Colleges and Employers survey) • 1. Communication skills (verbal & written)   • 2. Honesty/integrity   • 3. Honesty/integrity   • 4. Interpersonal skills (relates well to others)   • 5. Strong work ethic   • 6. Analytical skills   • 7. Flexibility /adaptability   • 8. Computer skills   • 9. Organizational skills   • 10. Motivation/initiative

  20. 5 simple steps to build an ePortifilo • Collect • Select • Reflect • Project • Publish and Present

  21. 5 simple steps to build an e-Portifilo Collect evidence and artifacts that demonstrate your achievements Collect TIPS: Outline of what you want to include in your ePortfolio after collecting your work

  22. 5 simple steps to build an e-Portifilo Choose artifacts that BEST demonstrate your achievements, skills… Select Collect evidence and artifacts that demonstrate your achievements Collect TIPS: Consult with your academic advisor or the career center for advice on what evidence to select for your portfolio

  23. 5 simple steps to build an e-Portifilo Choose artifacts that BEST demonstrate your achievements, skills… Select Collect evidence and artifacts that demonstrate your achievements Collect Reflect Reflect on what you’re experiment and learned

  24. 5 simple steps to build an e-Portifilo Choose artifacts that BEST demonstrate your achievements, skills… Select Collect evidence and artifacts that demonstrate your achievements Collect Reflect Reflect on what you’re experiment and learned Looking ahead, setting goals for the future, and supporting professional development and career bridging Projection TIPS: Be sure to include contact information, so people can respond to your ePortfolio

  25. 5 simple steps to build an e-Portifilo Choose artifacts that BEST demonstrate your achievements, skills… Select Collect evidence and artifacts that demonstrate your achievements Collect Reflect Reflect on what you’re experiment and learned Looking ahead, setting goals for the future, and supporting professional development and career bridging Publish your ePortfolio and present it to employers, scholarship sponsors, potential graduate advisors… Public & Present Projection

  26. 5 simple steps to build an e-Portifilo Choose artifacts that BEST demonstrate your achievements, skills… Select Collect evidence and artifacts that demonstrate your achievements Collect Reflect Reflect on what you’re experiment and learned Looking ahead, setting goals for the future, and supporting professional development and career bridging Publish your ePortfolio and present it to employers, scholarship sponsors, potential graduate advisors… Public & Present Projection

  27. How to build ePortfolio website? • Self design your ePortfolio website by using web development tools • Create ePortfolio website by using existing Web 2.0 technology • Have IT company to built it for you

  28. How to build ePortfolio website? • Self design your ePortfolio website by using web development tools • Take much time and effort • Low-cost • Flexible in design and content • Tools : MS Frontpage, Visual Studio , Dreamwaver…

  29. How to build ePortfolio website? • Create ePortfolio website by using existing Web 2.0 technology • Fast and easy to use • Free • Not Flexible in design and content. Must follow the template by provider • Tools : blogspot.com , Google Site, Wiki, Facebook …

  30. How to build ePortfolio website? • Have IT company to built it for you • Fast • High Cost • Flexible in design and content • Not preferred by most of peoples

  31. Practicing

  32. WHAT WE WILL DO? • Prepare your self a simple portfolio • Design your portfolio on a single web page • Publish your portfolio to University host

  33. PREPARING • Prepare yourself a brief portfolio by outline categories that you want to put into your portfolio • Add details for each category from your own artifacts, experiments, skills… • Visit following sites if you want to have more ideas • http://spot.colorado.edu/~riesberl/ • http://buzzing.cs.berkeley.edu/~xjiang/ • http://www.matanyahorowitz.com • http://web.ics.purdue.edu/~pangin/

  34. DESIGNING • There are many tools for web design such as MS Front Page, MS Word, Dreamweaver, Visual Studio… (discussed in previous slides) • We will use Visual Studio 2005 or Visual Studio 2008 for this class. • Visual Studio 2005 is available at Raytheon Lab and Visual Studio 2008 (Express Edition) is free download at http://www.microsoft.com/express/

  35. DESIGNING • Visual Studio is the most powerful programming tools for developing applications running one Windows platform. • It is a Microsoft’s product • It can be used for design web in both basic level and professional level.

  36. DESIGNING • Follow these steps to create your Portfolio web page in Visual Studio (VS) • Run VS : All program  Visual Studio 2005  Visual Studio 2005 • Creating HTML web page in VS: Choose menu File  New  File

  37. DESIGNING • In the New File box, choose General in Categories and then choose HTML page in the right list . Finally, click Open button

  38. DESIGNING • After a new HTML file is created, you can start to design the web page in the design window. There are two modes that you can choose to design a web page • Source: design web by input HTML code (more complex but more flexible) • Design: design web like using text editor WordPad, MS Word… (easier)

  39. DESIGNING • Choose to design mode by click the Design button ( left blue circle) and then input what you have prepared for your portfolio in the previous steps in the Design Window

  40. DESIGNING • After finishing the content of your portfolio. You can format your current web page for a better look by using options in Format menu or Formatting Toolbar

  41. DESIGNING • Save your web page file after you are done by selecting File  Save or Save As  Input Filename in the Save box. And now, you have had an simple ePortfolio (a HTML file) which is ready to be published. You can use any filename for your portfolio file. However, if you want to this file is the default file of your website , please set the filename is index.html or index.htm

  42. DESIGNING Adding an image : If you want to add an photo to your portfolio, follow these steps: • Open your portfolio file: File  Open  File • Select design mode for opening file • Open Toolbox : View  Toolbox

  43. DESIGNING • Select Image in Toolbox by drag-drop it in the place you what to put you photo. An Img icon will appear on your document • Right-click on the Img item and choose Properties • Set following properties Scr : filename of the image (*.bmp, *.jpg, *.gif ) (required) Height / Width: size of the image (optional)

  44. PUBLISHING • This step to publish your web page to university host. Your website link should be • http://ouray .cudenver.edu/~yourname (yourname = username that you used to log in to lab) • Preparation • Download and install WinSCP v4.1.9 from http://winscp.net/eng/download.php.

  45. PUBLISHING • Connecting to host • Run WinSCP • Select All program WinSCP  WinSCP or • Program  SSH  WinSCP  WinSCP (Raytheon lab) • Setting login information in Session and Protocol • Host: ouray.cudenver.edu • Username: your username used to log in to lab • Password: your password used to log in to lab • Port number: 22 ( default) • File protocol: SFTP ( default) • Select Login button

  46. PUBLISHING • Connecting to host (cont.)

  47. PUBLISHING • Connecting to host (cont.) • If it shows below Warning box, click on Yes button to continue

  48. PUBLISHING • Connecting to host (cont.) • If it shows below Authentication Banner box, click on Continue button

  49. PUBLISHING • Publishing your web page to host • Ounce connected, WinSCP is opened with two windows • The Left Window is browsing your local disk on your PC • The Right Window is browsing your directory at university host Example: / student/|/ltpvu • Create a new directory named public_html at your directory at host by pressing F7 or right-click on the right window of WinSCPNew  Directory

  50. PUBLISHING • Publishing your web page to host (cont.) • Input the folder name “public_html” and then click OK • Note: The folder name must be public_html. Otherwise, your website link won’t work !

More Related