Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions _posts/2018-04-24-day-24.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
categories: ['website MVP']
---

{% include toc %}

## For Next Time
* [By midnight tonight, submit a link to your website MVP](https://docs.google.com/forms/d/e/1FAIpQLSeTdifO9C3ZsP_ctgXnkWoMVmUEaz_RG7gKet6156NgFjDjHg/viewform)

## Creating your Website MVP

Today, we're going to go through a set of activities to help you create your website MVP. Before starting, refresh your memory on the main purpose of the [final project website](/assignments/final-project).

While you may not yet have all of the content to populate your site (e.g., you may still be working on your *results*), you should be able to map out the main structure of your website, fill out some of the content, and include placeholders for content that you still need to generate.

Beyond helping you plan your website, these activities will also help focus your work on the project by reminding you of what is most important about what your team is doing.

### Make an outline

The guidelines in the final project assignment provide a great starting point for the content of your site. They do not, however, mandate its exact structure and content. Using the ideas on the assignment page as a jumping off point, make an outline of the content you'd like on your site. You should interpret the word *content* broadly (e.g., content can encompass images, videos, sounds, etc.). If you plan on using multiple pages, make an outline of each page.

At a whiteboard, create an outline for your team's website. Make sure to document your work (e.g., by taking a picture) as it will likely come in handy later.

### Design your media

Likely some of what you wrote in your outline involves some sort of media content (e.g., video, audio, images). Choose 1 or 2 key media and sketch out their basic elements (e.g., using a rough sketch or a storyboard). Again, document your work in some electronic format.

### Put together a skeleton

Now that you have some idea of your content, you should put an alpha version of your site up on the web. To do this, you'll have to choose a website development / hosting platform. The final project page has some guidance on this, however, you are welcome to utilize other platforms as well.

*For the purposes of the website MVP, you should choose something that allows you to get something up quickly. There will be time for refining your layout later.*

If you are unsure about which platform to use, you might consider checking out [a very simple sample website](http://occamlab.github.io/tango_ros_bridge/) that we put together. This website is far from perfect, but hopefully it gives you a reasonable starting point. In order to put together a simple page like this, you should follow the [Github tutorial on Github Pages](https://pages.github.com/) (note: that for this site we chose the option to host our site in the `/docs` directory of the master branch). Please note that while our sample website only utilizes a single page, you can [add multiple pages to a Github Pages site](https://blog.github.com/2016-12-05-relative-links-for-github-pages/).

You can also see the work of previous Software Design students. Here is [a Spring 2017 SoftDes Final Project example](https://allisonlynnbasore14.github.io/ComputerMusic/) (remember, you also saw [a catalog of SoftDes websites from previous years](https://docs.google.com/document/d/1cCEmrdajFPfXq-dxgS1S9IGY_k22eKGnDXYAvqlmw7E/edit) when you did project ideation). Navigate this site to see a short demo video of the project. This team utilized a smartphone clip, which can work in some cases. Part of your final website will feature your demo video. You can start looking for examples of other software demo videos that have a style that you'll try to utilize for your final website between today's class and the next class session.

Here are some guidelines to consider when creating your MVP.
* If your website will utilize multiple pages, create (at least) a skeleton version of each page
* If there is content that you have created (e.g., your architectural diagram), consider adding it to your website MVP.
* For content that hasn't been generated yet, put a placeholder (either an image or text) that describes the content that will be there eventually.
* For longer sections of text that are either too time-consuming to generate now or whose details are to-be-determined, include the content in outline format.

### Individual Portfolio Development

For this class, you are not required to start or update an individual portfolio of our work. However, while you are actively producing a website for this team project, it is a great time to think about how you might highlight your individual contributions to it. Keeping this in mind might shape how you highlight parts of your team project on a public-facing site. There are many ways to track information that you will put into a running individual portfolio (webpage, PDF, or slide deck) either immediately or sometime down the road. We recommend that you keep a personal inventory via journal, a running google doc, or a polished artifact that you constantly update during projects and after they're completed.

Here are a few examples of when you are thankful that you tracked individual work (which can be especially hard in a team context):
* When you are asked for evidence or examples of your work for an upcoming opportunity such as an internship, upper-level course, graduate program, or award.
* When you are proud of something that you created and want to share it with friends and family.
* When you have Expo-like events and need to look back for artifacts from a project, and you want to have one place that you can quickly refer to for content.
* When you do something newsworthy and bloggers, reporters can link to what they're covering about you (Olin class projects occasionally get local [O-Link] coverage and sometimes national [boingboing] exposure).
* When you're asked to produce a portfolio for school or work and you want to be well-versed in what it takes to curate one.
* When you become experts in a field and receive solicitations to speak at different venues, and want stuff that you put out in the world to be what comes up when people Google you.
* When you want to look back at your college days.
* and so on...

### Turning in your work

[By midnight tonight, submit a link to your website MVP](https://docs.google.com/forms/d/e/1FAIpQLSeTdifO9C3ZsP_ctgXnkWoMVmUEaz_RG7gKet6156NgFjDjHg/viewform). Along with a place to put your link, the form asks for specific areas where you'd like feedback. You can also submit links to additional materials (e.g., a picture of something you sketched on a whiteboard).

## Additional Resources

* [Nice tutorial for getting started with Github Pages and Jekyll](https://24ways.org/2013/get-started-with-github-pages/).