For Next Time
- By tomorrow, submit a link on Canvas to your website MVP along with additional materials and request for specific feedback
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.
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. The intent of the website MVP is to get a draft up quickly to capture your story and receive feedback. There will be time for refining your layout later.
We will walk through the steps for creating a GitHub Pages website together in class.
In order to put together a simple page like this, you should follow the Github tutorial on Github Pages. We are creating a “Project” site, starting from scratch, in the
/docs directory in the master branch.
If you’d like to see an example implementation, you can checking out a very simple sample website that we put together. This website is far from perfect, but hopefully it gives you a reasonable starting point. Please note that while our sample website only utilizes a single page, you can add multiple pages to a Github Pages site.
If you are interested in drawing inspiration from past projects, check out our catalog of SoftDes Final Projects (a work in progress).
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.
Turn in your work
By tomorrow, submit a link to your website MVP on Canvas. In addition to the site link, please describe specific areas where you’d like feedback on your draft. You can also submit links to additional materials (e.g., a picture of something you sketched on a whiteboard) if they are not yet part of your main site.
Nice tutorial for getting started with Github Pages and Jekyll. Note: This tutorial uses a separate
gh_pages branch to hold the website content instead of a
/docs folder. You are welcome to use this approach instead if you are comfortable working with branches.
One of the most impactful ways to show your work in action is to… show your work in action!
For still images, there is a Ubuntu built-in tool called Screenshot that will allow you to capture the entire screen, one window, or a region you select.
There are many options to record video of your screen, but for Ubuntu we recommend you start by trying Peek. To install:
sudo add-apt-repository ppa:peek-developers/stable sudo apt update sudo apt install peek
You can record as MP4 for upload to video sharing services and linked from your website, but to demonstrate short interactions you can also save as a GIF that can be placed directly on your page. Used sparingly this can be a powerful way to quickly show what you’ve created, but too much can be overwhelming.
If you get the following error message, there is a problem with peek trying to utilize ffmpeg from inside Anaconda (as opposed to the one installed in the system path).
Using screen recorder backend ffmpeg Error: Child process exited with code 1 Recording canceled: Command "ffmpeg -f x11grab -show_region 0 -framerate 10 -video_size 498x256 -i :0+941,643 -filter:v scale=iw/1:-1 -codec:v libvpx-vp9 -lossless 1 -r 10 -y /home/pruvolo/.cache/peek/peek7WRLIZ.webm" failed with status 256 (received signal 0). Output: ffmpeg version 3.4 Copyright (c) 2000-2017 the FFmpeg developers built with gcc 7.2.0 (crosstool-NG 8a21ab48) configuration: --prefix=/home/pruvolo/anaconda3 --disable-doc --enable-shared --extra-cflags='-fPIC -I/home/pruvolo/anaconda3/include' --extra-cxxflags='=-fPIC' --extra-libs='-L/home/pruvolo/anaconda3/lib -lz' --enable-pic --disable-static --disable-gpl --disable-nonfree --disable-openssl --enable-libvpx --cc=/home/pruvolo/anaconda3/bin/x86_64-conda_cos6-linux-gnu-cc --cxx=/home/pruvolo/anaconda3/bin/x86_64-conda_cos6-linux-gnu-c++ --enable-libopus libavutil 55. 78.100 / 55. 78.100 libavcodec 57.107.100 / 57.107.100 libavformat 57. 83.100 / 57. 83.100 libavdevice 57. 10.100 / 57. 10.100 libavfilter 6.107.100 / 6.107.100 libswscale 4. 8.100 / 4. 8.100 libswresample 2. 9.100 / 2. 9.100Unrecognized option 'show_region'.Error splitting the argument list: Option not found
To fix this, simply run this command from your terminal.
Individual Portfolio Development [Optional]
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…