Design Por+olios Online Peter A. Zink Department of Mechanical Engineering Boston University, MA 02215 April 8, 2015 Overview •  CreaGng an online por+olio –  OrganizaGon, Usability –  HosGng, Templates, etc •  Domain names –  DNS, masking, forwarding, sub-­‐domains •  Making your own pages –  HTML, CSS, JavaScript etc. 4/8/15 Peter A. Zink | Boston University College of Engineering 2 Organizing Content •  Use Word or PPT for layout/organizaGon –  Web usability: hXp://www.w3.org/WAI/train.html •  Look at before and a[er demos, etc. •  Make it look like a professional brochure –  Short sentences, not big paragraphs –  Keep personal content separate from professional •  Mix text and images •  Include CAD (both rendered and drawings), photos –  Annotate and label where necessary/helpful •  Illustrate the design process –  Tell a story, make it interesGng •  Tips: –  hXp://freelanceswitch.com/finding/build-­‐a-­‐killer-­‐online-­‐por+olio-­‐in-­‐9-­‐easy-­‐steps/ 4/8/15 •  Skip the last two Gps Peter A. Zink | Boston University College of Engineering 3 OpGons 1.  Pay a company that provides templates & hosGng –
–
–
–
–
Build a site with their templates Add your content AXach a domain name (opGonal, someGmes included) Pay them for the service Long list on next slide… 2.  Find a place to host your site for free –  BU suggested opGons: •
hXp://www.bu.edu/tech/support/get-­‐a-­‐website/ –  Or, just Google ‘top free por+olio sites’ 4/8/15 Peter A. Zink | Boston University College of Engineering 4 Paid (and some free) opGons: Tumblr •
•
Wordpress •
E-­‐PorNolio by www.opeus.com (an e-­‐por+olio in the U.K.) •
Cargo •
Pupil Pages •
–
–
–
•
•
•
hXp://www.taskstream.com •
hXp://www.aurbach.com/ •
Concord (a digital content server for Blackboard systems) hXp://www.concord-­‐usa.com iWebfolio by nuven9ve now in a strategic alliance with SCT hXp://www.nuvenGve.com/index2.htm/ hXp://www.myinternet.com.au/products/mypor+olio.html hXp://www.paperfree.co.uk/ hXp://www.pass-­‐port.org/ TK-­‐20 –
hXp://www.eportaro.com hXp://www.foliosinternaGonal.com/ Pass-­‐Port -­‐ originally developed for the Louisiana Department of EducaGon –
Folio Live website hXp://www.por+olioresume.net/ PaperFree Systems -­‐ a system to maintain NVQs in the UK (measurements of occupaGonal performance against naGonal standards) –
folio by eportaro –
•
•
hXp://www.livetext.com hXp://www.pupilpages.com/ MyPorNolio by Myinternet, Limited, an Australian company -­‐ focused on K-­‐12 schools –
McGraw-­‐Hill –
•
hXp://www.chalkandwire.com hXp://www.opeus.com FolioMaker by Folios InternaGonal –
Aurbach_&_Associates –
•
h)p://www.squarespace.com hXp://www.myclassroomhelper.com/ PorNolio Resume.net –
TaskStream –
•
h)p://www.behance.net LiveText –
•
–
Chalk & Wire –
•
h)p://cargocollec9ve.com/ •
–
•
–
Squarespace –
•
h)p://www.wordpress.com •
–
My Classroom Helper (K-­‐12 market) –
behance/Prosite –
•
h)p://www.tumblr.com hXp://www.tk20.com/home/index.html •
Pebble Pad •
EdCube –
–
hXp://www.pebblelearning.co.uk/ hXp://www.edcube.net FolioTek from Lanit ConsulGng –
hXp://www.foliotek.com 4/8/15 Peter A. Zink | Boston University College of Engineering 5 More Free OpGons: •
Open Source Por+olio IniGaGve (OSPI) –  hXp://www.theospi.org –  University of Minnesota's e-­‐por+olio contributed to the Open Source Community –  hXp://sourceforge.net/projects/ospi •
•
–  hXp://sourceforge.net/projects/iupp/ •
Cyberfolio –  hXp://sourceforge.net/projects/cyberfolio/ •
ePor+olio.org provided by the ConnecGcut Distance Learning ConsorGum (CTDLC) with 11 partner insGtuGons of higher educaGon •
PortEd!t Mahara (developed in New Zealand, lists •
insGtuGons outside of the US that are using this program for por+olios) – •
–  hXp://en.wikipedia.org/wiki/Mahara Por+olio Manager (for arGsts) •
Lots of informa9on and links: –  hXp://www.epor+olio.org/ •
IUPpor+olio (from Sweden) –  hXps://eduforge.org/projects/mahara/ –  hXp://mypor+olio.ac.nz/ •
P-­‐nelope •
Marvelous CMS –  hXp://sourceforge.net/projects/p-­‐nelope/ –  hXp://sourceforge.net/projects/port-­‐edit/ Music Por+olio Manager –  hXp://sourceforge.net/projects/music-­‐port-­‐
mgr/ –  hXp://sourceforge.net/projects/por+olios/ e-­‐Por+olios through Google –  hXps://sites.google.com/site/epor+olioapps/ –  hXp://electronicpor+olios.org/ –  hXp://sourceforge.net/projects/marvelous/ •
Klahowya Student Por+olio SoluGon –  hXp://sourceforge.net/projects/klahowya2/ 4/8/15 Peter A. Zink | Boston University College of Engineering 6 BU Suggested OpGons: hXp://www.bu.edu/tech/support/get-­‐a-­‐website/ •  Blogs.bu.edu –  Wordpress blogs •  Advantage: Free templates, hosGng •  Example: hXp://blogs.bu.edu/mhirsch/ •  People.bu.edu –  Non-­‐wordpress pla+orm •  Advantage: Free hosGng •  Example: hXp://people.bu.edu/pzink •  DigicaGon e-­‐Por+olio –  Available through Blackboard Learn •  Advantages? 4/8/15 Peter A. Zink | Boston University College of Engineering 7 Domain Names •  Registrars –  hXp://lifehacker.com/5943452/five-­‐best-­‐domain-­‐name-­‐registrars •  Domain Name System (DNS) –  How does this work? See next slide •  Forwarding –  Masking •  hXp://pzink.com –  sub-­‐domains •  hXp://people.bu.edu 4/8/15 Peter A. Zink | Boston University College of Engineering 8 Average Costs •  HosGng –  ~$10/month •  For most sites that provide templates •  Domain Name –  ~$10/yr •  Just to own somename.com •  How to find one? –  Check any registrar, for ex: Network SoluGons (1st to run the DNS registry) »  hXp://www.networksoluGons.com/ •  What if someone already owns mine? –  hXp://www.internic.net »  Do a “whois lookup”, see if you can buy it from them. 4/8/15 Peter A. Zink | Boston University College of Engineering 9 Domain Name System (DNS) 4/8/15 Peter A. Zink | Boston University College of Engineering 10 CreaGng your own custom web pages •  Basic things to know: –  HTML •  This is the only one you need to know, and it’s simple –  CSS •  For formavng –  JavaScript •  For interacGvity –  Responsive/bootstrap •  Cross device formavng (mobile deivces, etc) •  Learn at: –  www.w3schools.com 4/8/15 Peter A. Zink | Boston University College of Engineering 11