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

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.

Additional Resources

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.

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

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