NYUAD IM Website Documentation

This is the documentation for the development and maintenance of the NYUAD IM website

View the Project on GitHub NYUAD-IM/website-panel

NYUAD IM Documentation

Hey there. This is an up-to-date documentation of how the NYUAD IM website works. The repo for the website is here and our DIY content management systsem (modestly named panel) is here

Table of Contents


Data Structures

Academics

This represents all of the classes displayed on /academics, whether IM requirements, electives or non-IM classes.

Example

{
	"title": "Communications Lab",
	"number": "IM-UH 1011",
	"program":"Interactive Media",
	"track": "Foundation",
	"instructors": ["Craig Protzel", "Pierre Depaz"],
	"terms":["FALL", "SPRING"],
	"year": 2017,
	"currently_offered": true,
	"link":"http://commlab.nyuad.im",
	"description":{
		"short": "intro to multimedia storytelling",
		"long": "very long intro"
		},
	"cross-listed": ["Computer Science", "Psychology"],
	"tags": ["commlab"]
}

Workshops

This structure only concerns the Sunday Workshops. All these fields are pretty self-explanatory (I hope).

Example

{
	"title": "Intro to Arduino",
	"instructor": "Michael Shiloh",
	"date" {
		"machine": "180212-1800",
		"human":"Feb. 12th - 6:00pm"
		},
	"location":"IM Lab - C3-029",
	"description": "Arduino is fun and Michael knows a lot about it.",
	"tags": ["physical computing", "arduino"],
	"links": [
		{
		 "url":"https://github.com/michaelshiloh",
		 "text":"repo"
		 }
		]
}

Opportunities

This structure is going to be dedicated to jobs, internships, grants and grad school applications.

Example

{
	"title":"Lab monitor position",
	"category":{
		"main":"JOBS/INTERNSHIPS",
		"sub": ["software development", "performance", "vr", "physical computing"]
		},
	"location": "Bulawayo, Zimbabwe",
	"url":"http://yoo.ooo/",
	"deadline": "June 6th 2018",
	"description":"do all these things on the other side of the world!",
	"connections":[
		{
		 "name":"John Doe",
		 "contact": "john@doe.com",
		 "relationship" : "friend of the program"
		}
		]
}

People

This structure will populate our /people page, from Program Heads to Lab Monitors. The current attribute would be used in two ways: separating between current and past community members and only displaying current Lab Monitors (due to the sheer number of Monitors over time). Ideally, the courses list would point to the /academics page.

{
	"name":"Craig Protzel",
	"position": ["program head"],
	"current": true,
	"description": {
		"short": "runs the ship",
		"long": "Craig comes from LA and has been doing editing and production work in the entertainment and teaching creative coding for a while!"
		},
	"courses": ["Communication and Technology", "Communication Lab", "Mashups: Creating with Web API", "Making Education", "Explorable Stories"],
	"website": "http://craigprotzel.com/",
	"email": "craig.protzel@nyu.edu",
	"img": "craigprotzel.png"
}

Projects

This structure will be used to populate the student gallery page. description.short is a one-liner, whereas description.long should be a paragraph describing the project, its features and the underlying concept in more detail. Important: images should be placed in the order you want them to appear on the page. In addition, the first image in the array will always appear as the project’s thumbnail image. Since the tags section is used to build the nav bar on the gallery page, tag names matter a lot. It is highly encouraged you don’t write tags yourself, but rather use those generated by the Google Form used for project submissions.

TO CHANGE: “authors” > “people” – could “tech” be an array? might mess with your system.

{
    "title": "My Project Title",
    "authors":["author1","author2","author3"],
    "description":{
      "short":"My one line description",
      "long":"long description(1 paragraph, max 2)"
    },
    "website":"https://www.project-website.com",
    "images":["01.png","02.png","03.png"],
    "video":"https://vimeo.com/user12345",
    "tags":{
       "course":"Intro to IM",
       "semester":"Spring 2018",
       "tech":"Physical",
       "custom":["projection mapping","workshop"]
    }
}

Panel Scripts

Tavius will document all this.


Website Scripts

landing.js

sketch-manager.js

panel-connection.js

academics.js

activities.js

people.js

opportunities.js


Website Style

Fonts

Colors