PERSONAL ACADEMIC WEBSITES A brief introduction PERSONAL ACADEMIC

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> He ading</h 1 > <p>This is a paragraph. Text text , h ere is some text. </p > <p>H ere is another paragr aph. Text te xt, he re is some mor e text </p > <h 2 >An Uno rdered List: </h 2 > <ul> < l i>St ars</li> < l i>P lanets< /li> < l i>Moo ns< /li> </ul > Display

CSS EXAMPLE Code body { color: black; font-family: "Trebuchet MS", Helvetica, sans-serif; backgroundcolor: #b 0 c 4 de; } h 1 {color: #101 C 6 B; } h 2 {color: #2038 D 6; } Display

SAMPLE SITE Hand-coded in Notepad++ View here

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 nonblog websites Two different versions of Word. Press § Word. Press. org – selfhosted, open-source software § Word. Press. com – a webbased blogging service

INSTALLING WORDPRESS Simple “ 5 -minute install” § § § Download Word. Press Create a database on your web space Upload Word. Press files Run the installation script Done! Many web hosting services offer automatic Word. Press 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

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/