Transcript Personal Academic Websites

PERSONAL ACADEMIC
WEBSITES
A brief
introduction
PERSONAL ACADEMIC WEBSITES
Why make one?
What to include?
 Introduce yourself to
prospective colleagues
and employers
 Update people on your
projects and
publications
 Curriculum Vitae
 Publications
 Research and teaching
interests
 Personal information
WEBSITE BASICS
 Where to keep your
site
 Hosting
 What to call your site
 Domain names
 How to build your site
 HTML and CSS; Content
Management Systems
(CMS); online site
builders
 Visit sarahsaur.us for
resources mentioned
in this presentation
HOSTING
 Free hosting available on department servers (talk to Hugh
Chou to get yours set up)
 Free third-party hosting
 Usually supported by advertising on your page
 Paid hosting
 Can cost as little as a few dollars a month
 Online site builders will host you site on their servers
DOMAIN NAMES
Free service URLs
 Pros: Free!
 Cons: Long, hard to
remember, and will
change if you change
hosts
 Examples
 yoursite.weebly.com
 epsc.wustl.edu/~yourname
 sites.google.com/site/your
site/
Buying your own
 Pros: personal, easy to
remember, and won’t
change
 Cons: not free, take a
little work to set up
 Examples
 yourname.com
 yourname.me
 randomword.pw
BASICS OF HTML AND CSS
HTML
CSS
 HTML describes the
structure of Web pages
 It defines what a
certain part of the site
is, e.g., a paragraph, a
list, a link, or a header
 CSS describes the
presentation of Web
pages, including colors,
layout, and fonts.
 It defines how a certain
part of the site displays
HTML EXAMPLE
Code
 < h 1 > H eadin g</h1 >
 < p> Th i s i s a pa ra g ra ph. Tex t tex t
tex t , h e re i s s o m e tex t . < / p >
 < p> H e re i s a n ot h e r pa ra g ra ph . Tex t
tex t tex t , h e re i s s o m e m o re
tex t < / p >
 < h 2 > An Un o rde re d Li s t: < /h 2 >
 < ul >
 < l i > St ar s< /li>
 < l i > Planet s</li>
 < l i > Moons< /li>
 < / ul >
Display
CSS EXAMPLE
Code
 body {
 color:black;
 font-family:"Trebuchet
MS", Helvetica, sansserif;
 backgroundcolor:#b0c4de;
}
 h1 {color:#101C6B;}
 h2 {color:#2038D6;}
Display
SAMPLE
SITE
Hand-coded in
N o te p a d + +
V i ew h e r e
CONTENT MANAGEMENT SYSTEMS (CMS)
 A software tool that
allows even those
with little to no
knowledge of HTML to
build and manage a
website
 Some can be
downloaded and
installed on your own
web space
 Some are provided as
a web-based service
WORDPRESS
 Primarily for blogging,
but flexible enough to
create non-blog
websites
 Two different versions
of WordPress
 WordPress.org – selfhosted, open-source
software
 WordPress.com – a webbased blogging service
INSTALLING WORDPRESS
 Simple “5-minute install”





Download WordPress
Create a database on your web space
Upload WordPress files
Run the installation script
Done!
 Many web hosting services of fer automatic WordPress
installation
BUILDING A SITE IN WORDPRESS
 Static Pages vs Posts Pages
 To blog or not to blog
 Changing the front page of your site to a static page
 Themes
 Thousands of free and premium designs to choose from, or make
your own
 Plugins and Widgets
 Add additional functionality to your site
CREATING AND EDITING PAGES
Add New Page
Edit Page
WORDPRESS THEMES
WORDPRESS THEMES
WORDPRESS THEMES
ONLINE SITE BUILDERS
Sites that offer free
website building
tools plus hosting
 Google Sites
 Weebly
 Wix
 Wordpress.com
Many offer extra
features for paying
accounts
FREE SITE BUILDER EXAMPLE: WEEBLY
 Simple and easy to use WYSIWYG (What You See Is What You
Get) page creator
 Drag and drop page elements like columns, paragraphs and
photos right where you want them
 Free service has small, unobtrusive advertisement at bottom
of page
 Premium service ($4-7/month) removes ad, and has a few
more features like more space, connecting to your own
domain, statistics, etc.
WEEBLY DEMO
Weebly.com
WEEBLY
SITE
EXAMPLE
Visit Here
EXAMPLE SITES
EPSc People
Other People
 Martin Pratt http://epsc.wustl.edu/~
martinpratt/website/Ab
out.html
 Stephen Seddio http://epsc.wustl.edu/~
sseddio
 Kelsi Singer https://sites.google.co
m/site/kelsisinger/
 Wendy Cage http://www.wendycadg
e.com/
 David Gauntlett http://davidgauntlett.c
om/
 Jim Wild http://www.jwild.co.uk/