Ecomechanics - Macquarie University

Transcript Ecomechanics - Macquarie University

Developing a research website
Genes to Geosciences
November, 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
Server
Some terminology
Web
Browser
HTTP
Web
Server
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.
primarily interested in coral
biomechanics.</p>
</body>
</html>
I am
HTML
• Basic page
<html>
<head>
<title>Dr Joshua Madin</title>
</head>
<body>
<h1>Research Website</h1>
<p>Welcome to my research website.
primarily interested in coral
biomechanics.</p>
</body>
</html>
I am
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 Geosciences
November, 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 Geosciences
November, 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 Geosciences
November, 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 Geosciences
October, 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_softwar
e
• 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 Geosciences
November, 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)