6.810 Engineering Interactive Technologies (fall 2021)

Lab 16: Add Presentation Materials to Website


Upload 1 (due end of class, Nov 9, 2.30pm):
fill in the link to your group project website here. At the end of the class your website should have the project name, team partner names, rotoscope + (optional) milestone videos you already have on it (layout does not need to be final but make sure it's not just an empty website).


Goal for Today
(do this as a team since it is part of your group project):

Set up your team website and start filling it with content.
Please click here for an example website we created for you.
Please make sure you have the elements shown on this page on your final website.



Step 1: Creating a Domain + Uploading Content

Below are three options: MIT webspace (free), github webspace (free), or professional webspace (costs money, not required for class but might be handy for the future).
To have something to upload, you can use our example index.html (download here) to get started.

Option 1: Use MIT Domain
(domain name looks like: http://web.mit.edu/mueller_/www/6810/index2.html)


MIT gives you webspace and a (not-super nice but working) domain name.
For instance, for me it looks like: http://web.mit.edu/mueller_/www/6810/index2.html.

Setup How-To for Windows
Setup How-To for Mac

Option 2: Github Domain
(domain name looks like: https://stefaniemueller.github.io/6810/index.html)


Here's a really good tutorial (takes 5-10 minutes):
Setting up a website with github

Option 3: Professional Domain (not required for class)
(domain name looks like: http://stefaniemueller.org/


For your own personal website in the future, I recommend investing in a professional domain name.
I have used this service here for many years but there are many others: One.com Domains + Webspace.
It's less than $3 a month and I think the first year might still be free.

Step 2: Select a Style-Template
or Write your own HTML from Scratch

There are many free style templates on the internet.
For instance, I just went to the colorlib template collection here



and then downloaded the pulse template here
and uploaded it here: https://stefaniemueller.github.io/pulse/index.html



I leave it up to you how complex you want to get in HTML + CSS + Javascript since some of you might have a lot of experience and some none (it is totally fine if you want to build your website from scratch only using HTML and no CSS).
A professional looking website does not need complex HTML -- so sometimes a simple but clean layout with thoughtfully picked images + fonts is all you need.

Here are a few screenshots from example websites from last year:



Step 3: Fill Website with Content!

Now get started and fill the website with content.
At your project name, team partner names, upload your rotoscope and if you have time also add your milestone videos.

Here is the example we prepared for you as guidance, you can click here to get to the webpage:



If you want to work with our adaptive basketball website, you can find the template html files here.
(but we'd be more excited to see some other layouts)
(the template is also a bit messy since it's a copy of our not super clean-code lab website, if you use a style template from the above website it will be more clean)

Extra Info

If you have never used HTML, here are a few useful commands.

Adding a Link
<*a href="https://hcie.csail.mit.edu/6810-example-website.html">Click here<*/a>

Adding an Image
<*img src="images/website/website11.png" width="543px"/*>

Embedding Video
<*iframe width="373" height="210" src="https://groups.csail.mit.edu/hcie/files/research-projects/adaptive-physical-tools/adaptive-basketball.mp4" frameborder="0" allowfullscreen>