Day 24
For Next Time
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. 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 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 (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.
You can also see the work of previous Software Design students. Here is a Spring 2017 SoftDes Final Project example (remember, you also saw a catalog of SoftDes websites from previous years 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. 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
Generating visuals
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.
PATH=/usr/bin:$PATH peek