developing a research website genes to geosciences november, 2009
Post on 31-Mar-2015
223 Views
Preview:
TRANSCRIPT
Developing a research website
Genes to GeosciencesNovember, 2009
Why?• Scientific exposure (globally)• Shows what you’re researching• Easier for people to find you (research, consulting)• Provides access point for your papers (links, PDFs)• Helps refine your ideas, interests (similar to funding proposals)• Demonstrates organizational skills• Advertise scholarships / positions• Attracts students / collaborators• Outreach (interpreting science for the general public)• Posting lecture materials• Access point for databases• For fun, and it’s not that hard
Today
• Introduction• Basic HTML tutorial• Creating• Publishing• Exposing
Web pages
• A source of information accessible through a web browser
• Can be retrieved locally or from a remote server• Can be static or dynamic• Client-side scripting can make pages more
interactive• A group of related web pages with a common
navigation bar web site
Some terminology
• HTML– Hyper-Text Markup Language (HTML)– A computer language for describing the structure of text-based
information
• Web Browser– Software that interprets and displays HTML– Interacts with text, images, videos, music, etc.
• Web Server– Web browsers communicate with web servers primarily using
hypertext transfer protocol (HTTP)– HTTP allows information to travel both ways Web
ServerWeb
Server
Some terminology
Web ServerWeb
Server
Web Browser
Web Browser
HTTP
HTML
Computer Cyber-space
HTML• A computer language for describing the structure of
information in a web page• It’s just a text file with a different suffix (.html)• “View source” in any web browser shows the underlying
HTML• Square brackets tell the web browser how to interpret
information:
<b>hello</b>
<h1>title</h1>
HTML
• Basic structure
<html>
<head>
<title>This appears at the top</title>
</head>
<body>
This appears in the browser
</body>
</html>
HTML
• Basic structure
<html>
<head>
<title>This appears at the top</title>
</head>
<body>
This appears in the browser
</body>
</html>
HTML
• Basic page
<html>
<head>
<title>Dr Joshua Madin</title>
</head>
<body>
<h1>Research Website</h1>
<p>Welcome to my research website. I am primarily interested in coral biomechanics.</p>
</body>
</html>
HTML
• Basic page
<html>
<head>
<title>Dr Joshua Madin</title>
</head>
<body>
<h1>Research Website</h1>
<p>Welcome to my research website. I am primarily interested in coral biomechanics.</p>
</body>
</html>
HTML Elements<element-name attribute=“value”>content</element-name>
• Structural<h1>level-one heading</h1>
<p>paragraph</p>
<table width=“150”>table structure</table>
• Presentational (used less and less)<b>bold</b>
<i>italic</i>
• Hypertext<a href=“another-page.html”>my other page</a>
<a href=“http://www.mq.edu.au”>link to MQU</a>
Cascading Style Sheets
• Presentation typically universal for a website• So why repeat presentational elements?• Cascading Style Sheets (CSS) are a mechanism for
normalizing a websites look and feel
<link rel=“stylesheet” href=“file_name.css”
type=“text/css” />
Cascading Style Sheets
• “file_name.css” contains formatting and presentation rules for any HTML file that links to the CSS
h1, h2, h3 {
color: green;
}
• CSS rules can be over-ridden
Terms to remember• HTML: Hyper-Text Markup Language• HTTP: Hyper-Text Transfer Protocol• CSS: Cascading Style Sheet• URL: Unique Resource Locator
– An internet address (e.g., http://www.facebook.com)
• Javascript– A scripting language that can be embedded in HTML to make pages more
dynamic
• XML: eXtensible Markup Language– General-purpose specification for custom markup languages– For sharing structured data
• AJAX: Asynchronous Javascript And XML– Interacts with remote server in the background without interfering with
existing page
HTML Tutorial
Genes to GeosciencesNovember, 2009
Instructions• Go to module website:
– http://www.gg.mq.edu.au/rep/websites
• Click on:– “HTML tutorial”
• Save to Desktop• Unzip (uncompress) “tutorial.zip”
• Now open the program WordPad– Then, File Open– Files of type: All Documents– Navigate to the “tutorial” folder on your Desktop– Open “tutorial.html”
HTML Editors• Software to help avoid writing HTML (WYSIWYG)
• E.g., Dreamweaver, Frontpage, KompoZer, iWeb, many others
• Pros• Easy to use (sometimes don’t need to know HTML)• Focus on design• Some tasks faster (e.g., tables)• Fewer mistakes• Often sophisticated additions (javascript, etc.)
• Cons• Each one is different (and usually not cross-platform)• Usually cost money $$$• Creates HTML that is hard to read (large files, hard to fix)• Sometimes not standards compliant• Only editable with single software package (what if discontinued?)• Lack of fine control• Highly constrained (e.g., hard to add dynamic content)
Example: iWeb
Recommendation
• For basic research website, often best to use HTML• Even if you want to use a graphical editor, it is
important to understand the underlying HTML
Creating a website
Genes to GeosciencesNovember, 2009
Look around for ideas• Research
– http://www.zoology.ufl.edu/bolker/– http://faculty.washington.edu/deschind/index.html– http://projects.exeter.ac.uk/msel/personnel/pjm.html– http://www.avianecology.org/– http://nceas.ucsb.edu/~cadotte/– http://faculty.washington.edu/mdethier/– http://www.mathstat.dal.ca/~derekt/– http://katesmithlab.googlepages.com/– http://depts.washington.edu/jlrlab/
• Other– http://www.lefthandlight.com/– http://jonehinger.com/– http://www.o-dub.com/– http://www.gladwell.com/– http://vision.ece.ucsb.edu/%7Efedorov/– http://vision.ece.ucsb.edu/~jiyun/– http://www.sbbg.org/
Think about content• Splash page (rare, sometimes annoying)• Contact Information (beware the web-spider)• Research / Projects / Interests• Publications (articles, proceedings, books, chapters)• People / Students / Collaborators
• Sometimes with sub-pages (Interests, Projects, Publications, CV, Contact, etc.)
• Courses / Software / Data / Database access• Funding won / Awards• Funding offered (scholarships)• Outreach (media attention, popular articles)• Pictures / Maps / Field sites• Calendars (upcoming events, fieldtrips, conferences, etc.)• Useful links (often for yourself)• Link to a personal page hosted elsewhere (not at uni)
Think about a layout
Some design principles• Browser independence
– Make sure it works on all the common browsers (IE, Firefox, Safari, Opera)– Some browsers are NOT standards compliant
• Readability– Use clear, easy to read language– Check grammar, spelling, logical flow
• Content delivery– Minimize clutter; easy navigation– Make the important/relevant content easy to find– Remember that some people have small computer screens
• Efficiency– Make sure pages load quickly– For example, use smaller image files (i.e., not raw photos), break up pages
• Scalability– Design in a way that can easily be added to in the future
Building your website
Genes to GeosciencesNovember, 2009
Instructions• Go to module website:
– http://www.gg.mq.edu.au/rep/websites
• Click on:– “Compressed folder containing this website”
• Save to Desktop• Unzip (uncompress) “darwin.zip”
• Now open the program WordPad– Then, File Open– Files of type: All Documents– Navigate to the “darwin” folder on your Desktop– Open “index.html”
Publishing a website
Genes to GeosciencesOctober, 2008
Uploading
• Once your site is ready you need to upload it to the server
• Common data transfer protocols include FTP, SMB, AFP, HTTP (browser-specific)– Usually asked for username and password
• Eventually you’ll need FTP client software– http://en.wikipedia.org/wiki/
Comparison_of_FTP_client_software
• Copy files to server
Domain Name
• The primary address of your website– Typically end in .com .net .org .edu– Country suffix: .au .de .nz
• Postgraduate students get a directory– www.bio.mq.edu.au/~aharmer/
• Academics– www.bio.mq.edu.au/computational_ecology/– acropora.bio.mq.edu.au– www.bio.mq.edu.au/~jmadin
Instructions• http://web.science.mq.edu.au/it/doc/services/web-pub/
• HTML Validation: http://validator.w3.org– Copy address for each page of your website (“Validate”)– There may be Javascript warnings…
Exposing your website
Genes to GeosciencesNovember, 2009
Search Engines
• Google, Yahoo!, MSN• Use algorithms to determine keyword relevancy– Page title– Content– Number & quality of links to your site– How long people stay on your site
• Meta tags are becoming less important
Getting Ranked
1. Submit website URL to The Open Directory– www.dmoz.org
2. Google’s “add URL” form– www.google.com/addurl.html
3. Be linked from another website– Universities are usually crawled regularly
Some final remarks
• Suggest that you take a copy of your site with you and continue to work on it
• When you have your permanent site address, make sure you are sure it’s ready for the world to see (e.g., no spelling mistakes; no plagiarism)
top related