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.

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):

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).

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