 Old README.md of mct master.github.io repository

Information on this page are outdated, this page is here for archiving reasons.

mct-master.github.io

The blog of MCT: https://mct-master.github.io

Jekyll

We are using Jekyll, here's a list of tutorials that might be useful to get familiar with the GitHub and Jekyll environments:

To edit the site you have to contribute your changes (e.g., posts) to this source code repository. After your changes are committed and merged to the master branch, Github will automatically rebuild the static site and make it instantly available to the public. Note that editing existing contents and adding new contents can be all done directly from the Github web interface. It is therefore not strictly needed to clone the repository and install the required software to edit the site locally. Here you can find instructions for setting up a local copy of a Github Pages site.

The content of the site is released under Creative Commons Attribution 4.0.

Markdown

Markdown is a markup language with plain text formatting syntax. It is mainly designed so that it can be converted Hypertext Markup Language (HTML), the standard markup language for creating web pages and web applications. It has been basically designed for those who want to avoid to write in HTML, it is designed for humans!

A useful Markdown cheatsheet can be found here.
A table showing how the Markdown syntax is converted to HTML can be found here.

There exist a number of Markdown editors, so it is easy to see a rendered version (how it will look like on the browser/web):

MacDown: Mac
Typora: Mac, Windows, Linux
Haroopad: Mac, Windows, Linux
ghostwriter: Windows, Linux

And a more complete list can be found here.

Embedding images, videos and other files

It is important to optimize the size of an image, audio, and video before uploading them. These must be compressed using file format highly compatible with most browsers, such as JPEG or PNG for images, MP3 for audio, and MP4 for videos. Embedding small files in a blog post provides a better user experience (shorter loading time, faster response). Uncompressed files can be used when necessary (such as wave files), but in this case it's recommended to provide a download link rather than embedding them in a web player. A handy tutorial on how to optimize images for the web on Gimp (which is a free software) can be found here. For Mac, a FOSS called ImageOptim can be found here. It is important to optimize the files before uploading them. It is also important to add at least one image to complement the text with visual information and make it more interesting to the reader!

Please note that the names of the image files should not contain white spaces to avoid potential issues of systems not finding the image.

All files except images smaller than 300 KB that are linked/embedded in blog posts, must be uploaded in the MCT Shared G Drive. Smaller image files can be stored in the 'assets/img' folder of this Github repository.

Get a G Suite account linked to your UiO account following these instructions. Before trying to create the account, you must give your consent here.

Ensure that your account has been activated by logging in here. Then request access to the MCT shared G Drive by sending an email to stefano.fasciani@imv.uio.no from your UiO email account. Once you get access, check out the README.txt files in the respective folders for additional instructions.

Files stored in the 'asset' folder of the Github (images only below 300 Kb in the img folder, or code that can be executed in the browser) and in the G Drive ‘MCT Blog/asset’ should be placed in the appropriate sub-folder according to their type and named YYYY_MM_DD_username_filename.extension where:

YYYY: year as per associate blog post
MM: month as per associate blog post
DD: day as per associate blog post
username: your UiO username

Spaces or or special characters are not allowed in the file names.

All files that are uploaded here must be publicly accessible through their link (select ‘get shareable link’, set link sharing ‘on’, set ‘allow with the link can view’ and tick ‘allow external access’).

To embed an IMAGE in your blog post follow the include the following HTML code: <img src="https://drive.google.com/uc?export=view&id=G_DRIVE_FILENAME"> where G_DRIVE_FILENAME is the long and random-looking alpha-numeric string you find in the G Drive shared link. This can be followed by any HTML <img> attribute, such as width and/or height, and framed in the HTML <figure> tag to include elements such as HTML <figcaption> caption. If you wish to use the markdown syntax to embed images, which provides less features, you can use ![alternative text](https://drive.google.com/uc?export=view&id=G_DRIVE_FILENAME "title text"). Example:
```
<figure align="middle">
   <img src="https://drive.google.com/uc?export=view&amp;id=G_DRIVE_FILENAME" alt="alternative text" title="title text" width="640" height="auto" />
   <figcaption align="middle">My Figure Caption</figcaption>
</figure>
```

To embed a VIDEO with the HTML video element (use mp4 format):

<figure align="middle">
  <video width="640" height="auto" controls>
    <source src="https://docs.google.com/uc?export=download&id=G_DRIVE_FILENAME_ID" type='video/mp4'>
    Your browser does not support video tag.
  </video>
  <figcaption>My Video Caption</figcaption>
</figure>

To embed a VIDEO with the HTML video element (for filer larger than 100MB):

<figure align="middle">
  <iframe src="https://drive.google.com/file/d/G_DRIVE_FILENAME_ID/preview" width="640" height="auto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <figcaption>My Video Caption</figcaption>
</figure>

To embed AUDIO with the HTML audio element (audio/mpeg format for mp3, or audio/wav for wave):

<figure align="middle">
  <audio controls>
    <source src="https://docs.google.com/uc?export=download&id=G_DRIVE_FILENAME_ID" type="audio/mpeg" volume="1.0">
    Your browser does not support audio tag.
  </audio>
  <figcaption align="middle">My Audio Caption</figcaption>
</figure>

More info on embedding videos are available here.

To link a file you can simply use the G Drive shared link associated with your file.

If using Firefox, the recently introduced Enhanced Tracking Protection prevents G Drive contents to be displayed (because of the google analytics associated with it). For correct visualization, the Enhanced Tracking Protection must be disabled on that site.

To delete files from Github, instructions are available here.

Instructions for contributing to the MCT site

Posting blog posts

You can add a blog post by creating a file in the _posts folder of this repository. Note that you can directly create the file from the Github web interface by navigating to the _posts folder and clicking on the New file button.

The file must be markdown formatted and must include a number of metadata fields at the top of the page, which is done in a YAML front matter (see example below).

In order to let the system organize the blog posts automatically by chronological order, it must be named as YYYY-MM-DD-short-version-of-title.md (YYYY-MM-DD being the publication date).

These are the available categories that can be used:

applied-project
audio-programming
digital-audio
entrepreneurship
human-computer-interaction
interactive-music-systems
machine-learning
masters-thesis
miscellaneous
music-cognition
motion-tracking
other
people
physical-computing
portal
research-methods
scientific-computing
sonification
spatial-audio

The first image used in the blog post can be used to appear in the homepage. This should be defined as image: /assets/image/date_username_name_of_file.jpg

Finally, the use of a short excerpt is encouraged to control the text that should appear in the homepage: excerpt: "A short summary, typically copy-pasting the first paragraph of the blog post."

Once the file is completed, it can be saved and committed to the master branch (Github web interface will do it for you upon saving the newly created file). Then, it will automatically be added to the news section (it may take a few seconds).

Required structure of the markdown file for a news post:

---
layout: post
title: "Welcome to Jekyll!"
date: 2018-08-21 10:10:42 +0200
categories: portal
author: Name Surname
image: /assets/image/date_username_name_of_file.jpg OR https://drive.google.com/uc?export=view&amp;id=G_DRIVE_FILENAME
Keywords: comma, separated, list, of, keywords
excerpt: "A short summary, typically copy-pasting the first paragraph of the blog post."
---

Add the post body here using markdown syntax.

Check Github's markdown syntax guide for examples on how to format text with markdown.

Existing news entries can also be easily edited by navigating to the file with the Github web interface and clicking on Edit this file (i.e., the icon with a pencil). When changes are committed to the master branch the post will be automatically updated on the site.

Images and other assets (e.g. css, video files (with a reasonable size), pdf files, javascript files) can be organized in the assets folder.

Inspirational examples of similar masters

Inspirational examples of blogs

https://rcaied.tumblr.com: Here's an example of a mostly visual blog from a master (master in information experience design from RCA).
http://womeninmusictech.gatech.edu: A blog built in Wordpress of multiple authors (the newsletter of Women in Music Tech at Georgia Tech).
https://midassblog.wordpress.com: A blog built in Wordpress of multiple authors (the blog of the research project MIDAS).