Difference between revisions of "Creating a CLIO Program"
(Undo revision 1847 by Metaphoraccoon (talk)) Tag: Undo |
|||
(10 intermediate revisions by the same user not shown) | |||
Line 10: | Line 10: | ||
== Creating a Program Folder == | == Creating a Program Folder == | ||
Navigate to the ‘content’ folder, located within the web server’s root directory. Create a folder here with a descriptive name for this Program. This folder name must start with a letter, but it can contain numbers. Spaces are not allowed, but you can use underscores or camelCaseType to help with organization. The name you use for this folder becomes the ID that CLIO uses to load and manage Programs. | Navigate to the ‘content’ folder, located within the web server’s root directory. Create a folder here with a descriptive name for this Program. This folder name must start with a letter, but it can contain numbers. Spaces are not allowed, but you can use underscores or camelCaseType to help with organization. The name you use for this folder becomes the ID that CLIO uses to load and manage Programs. | ||
{{Download Template|Download URL=https://www.cliomuseums.org/clio/templates/ProgramTemplate.zip}} | |||
Extract the zip file downloaded above and you will have a new folder named 'ProgramTemplate'. Copy this folder into the 'content' folder at the root of the CLIO web application. This folder template includes three folders and three files: | |||
{| class="wikitable" | {| class="wikitable" | ||
!Resource | !Resource | ||
!Type | !Type | ||
!Description | !Description | ||
|- | |- | ||
|@Activities | |@Activities | ||
|Folder | |Folder | ||
|Contains all of the Program’s Activities. | |Contains all of the Program’s Activities. | ||
|- | |- | ||
|@Facilitation | |@Facilitation | ||
|Folder | |Folder | ||
|Contains all of the Program’s Facilitation information. | |Contains all of the Program’s Facilitation information. | ||
|- | |- | ||
|@Media | |@Media | ||
|Folder | |Folder | ||
|Contains all of the Program’s multimedia files. | |Contains all of the Program’s multimedia files. | ||
|- | |- | ||
|@About.json | |@About.json | ||
|File | |File | ||
|Contains the description information about the Program. | |Contains the description information about the Program. | ||
|- | |- | ||
|@Audiences.json | |@Audiences.json | ||
|File | |File | ||
|Contains the Program’s audience configurations. | |Contains the Program’s audience configurations. | ||
{{See|Defining CLIO Audiences}} | |||
|- | |- | ||
|branding.css | |branding.css | ||
|File | |File | ||
|Contains custom CSS to be used when the Program is loaded. | |Contains custom CSS to be used when the Program is loaded. | ||
|} | |} | ||
These files are the basic structure of a Program that is used by the CLIO web application. In the next section, we will go over configuring the descriptive information about this Program. | These files are the basic structure of a Program that is used by the CLIO web application. In the next section, we will go over configuring the descriptive information about this Program. | ||
Line 65: | Line 60: | ||
You can think of a ‘key’ as a descriptive name, designed to inform you what data that key contains. By knowing the ‘key’, we can request the related ‘value’ from an Object. In our example, the ‘key’ is ‘Institution’ and the ‘value’ is ‘CLIO Museums’. | You can think of a ‘key’ as a descriptive name, designed to inform you what data that key contains. By knowing the ‘key’, we can request the related ‘value’ from an Object. In our example, the ‘key’ is ‘Institution’ and the ‘value’ is ‘CLIO Museums’. | ||
Now that we’ve gone over a basic explanation of what JSON is and how it functions, we can finally edit the file. This file only contains 4 ‘key’ and ‘value’ pairs, but they are used frequently within the CLIO web app, allowing institutions to update Program information by editing the least amount of data possible. Below are descriptions of each ‘key’ and what the expected ‘value’ pairing is. | Now that we’ve gone over a basic explanation of what JSON is and how it functions, we can finally edit the file. {{Coding Template|Edit URL=https://cliomuseums.org/jsoneditor/?file=https://cliomuseums.org/clio/templates/program/@About.json&name=@About|Download URL=https://cliomuseums.org/clio/templates/program/@About.json}}We can use the JSON editor above to begin editing the template. This file only contains 4 ‘key’ and ‘value’ pairs, but they are used frequently within the CLIO web app, allowing institutions to update Program information by editing the least amount of data possible. Below are descriptions of each ‘key’ and what the expected ‘value’ pairing is. | ||
{| class="wikitable" | {| class="wikitable" | ||
!Key | !Key | ||
Line 87: | Line 82: | ||
|Rich Text | |Rich Text | ||
|} | |} | ||
Once you've made your desired changes, you can download the file from the editor and replace it within your Program folder. | |||
{{DocumentationNavigation}} | {{DocumentationNavigation}} |
Latest revision as of 17:36, 15 December 2022
Overview
A Program is a selection of Activities within the same group, exhibit or educational program. Programs can be used to group Activities for pop-up exhibition tables, rooms, galleries, or just by subject. This allows facilitators to run multiple unrelated pop-up exhibits and programs using the same hardware, without having to connect to the internet or download additional data. Programs are provided as a way to create manageable collections of interactive activities that can be customized based on your institutions needs.
Understanding the Content Folder
All of the data used by Interactives, Programs and Activities are stored as flat files within the 'content' directory at the root of the web application. When CLIO is loaded, it will search this directory for available Programs. This is because CLIO does not use a database server to store activity configurations.
Creating a Program Folder
Navigate to the ‘content’ folder, located within the web server’s root directory. Create a folder here with a descriptive name for this Program. This folder name must start with a letter, but it can contain numbers. Spaces are not allowed, but you can use underscores or camelCaseType to help with organization. The name you use for this folder becomes the ID that CLIO uses to load and manage Programs.
Extract the zip file downloaded above and you will have a new folder named 'ProgramTemplate'. Copy this folder into the 'content' folder at the root of the CLIO web application. This folder template includes three folders and three files:
Resource | Type | Description |
---|---|---|
@Activities | Folder | Contains all of the Program’s Activities. |
@Facilitation | Folder | Contains all of the Program’s Facilitation information. |
@Media | Folder | Contains all of the Program’s multimedia files. |
@About.json | File | Contains the description information about the Program. |
@Audiences.json | File | Contains the Program’s audience configurations. |
branding.css | File | Contains custom CSS to be used when the Program is loaded. |
These files are the basic structure of a Program that is used by the CLIO web application. In the next section, we will go over configuring the descriptive information about this Program.
Configuring the Program Details
In order to edit the Program details, we will need to open the file titled @About.json. This file format, known as JSON (JavaScript Object Notation), allows data to be stored for later use in a way that is easily readable and writable by both humans and computers. JSON files can be opened using any plain text editor, which is available on every operating system. For ease of editing, you can also use a JSON editor, such JSON Editor Online (jsoneditoronline.org).
When the CLIO web application loads a Program using the Settings menu, it will read this file within a Program first to get its name, description and other properties. To edit the JSON file, we must first open it. I have decided to use a JSON editor, because it helps to keep track of syntax, which is very important to keep JSON files readable by the computer.
This is what a JSON file looks when opened through JSON Editor Online. As you can see, all of the descriptive information, such as the Institution’s name, the Program’s name, and description, are listed under ‘object’ with a numerical signifier of how many ‘keys’, or descriptive pieces of data, are within this object. ‘Object’ is in reference to the file format’s name, JavaScript Object Notation.
Simply speaking, an ‘object’ in JavaScript is a collection of unordered data, which can be composed of smaller pieces of paired data, called ‘keys’ and ‘values’. Typically, all of the data in one Object is related to the same thing. Objects are extremely useful because they are a way to systematically access important data, such as the Institution’s name or Program’s Description, by simple providing a ‘key’ to the Object and requesting back it’s ‘value’. For the purposes of the CLIO web application, they are essentially performing the role of very small, offline databases.
JSON files can become complex very quickly, depending on how much data you need to store within them. You can also create objects within objects, so that you can try to create a sense of organization within large JSON files, or you can instead choose to create more JSON files that contain more specialized data. This illuminates the importance of ‘key’ and ‘value’ pairs; they make it easier to keep track of data, especially when it starts to sprout into a large tree of information.
You can think of a ‘key’ as a descriptive name, designed to inform you what data that key contains. By knowing the ‘key’, we can request the related ‘value’ from an Object. In our example, the ‘key’ is ‘Institution’ and the ‘value’ is ‘CLIO Museums’.
Now that we’ve gone over a basic explanation of what JSON is and how it functions, we can finally edit the file.
We can use the JSON editor above to begin editing the template. This file only contains 4 ‘key’ and ‘value’ pairs, but they are used frequently within the CLIO web app, allowing institutions to update Program information by editing the least amount of data possible. Below are descriptions of each ‘key’ and what the expected ‘value’ pairing is.
Key | Description | Expected Parameters |
---|---|---|
Institution | The name of the institution this Program is associated with; i.e. the Museum’s name or department. | Plain Text |
Program | The "friendly" name of the Program that is shown as part of the CLIO web application when it is loaded; i.e. the name of the pop-up exhibit or the out-reach program this is related to. | Plain Text |
Description | A brief description of the Program, as shown to kiosk users through Exhibit Mode. | Rich Text |
About | Information about the program, as shown through Facilitator Mode’s Help and Facilitation menu. | Rich Text |
Once you've made your desired changes, you can download the file from the editor and replace it within your Program folder.
Documentation | |
---|---|
Installation | Look and Feel |
Interaction Modes | Developing Activity Types |
Creating an Interactive | Framework |
Integrating CLIO | Contribute |