Difference between revisions of "CLIO Documentation"
| Line 23: | Line 23: | ||
{{Main|Accessing CLIO from a Web Browser}} | {{Main|Accessing CLIO from a Web Browser}} | ||
Once CLIO has been installed on your web server, you can access it through your web browser of choice by navigating to http://localhost/. | Once CLIO has been installed on your web server, you can access it through your web browser of choice by navigating to http://localhost/. | ||
==Creating an Interactive Exhibit== | ==Creating an Interactive Exhibit== | ||
===Creating an Interactive=== | ===Creating an Interactive=== | ||
{{Main|Creating a CLIO Interactive}} | {{Main|Creating a CLIO Interactive}} | ||
An Interactive refers to single instance of a digital interactive experience, such as an individual kiosk or web exhibition. Interactives can contain multiple Programs, allowing them to be used in different exhibitions even while away from your institution. Interactives can also have device-specific settings, such as kiosk screen brightness and Facilitator PIN codes. | |||
===Creating a Program=== | ===Creating a Program=== | ||
{{Main|Creating a CLIO Program}} | {{Main|Creating a CLIO Program}} | ||
{{ | 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. | ||
=== Defining Audiences === | |||
{{Main|Defining CLIO Audiences}} | |||
Each Program can have custom audiences groups, which are included as a way to help sort activities for predefined demographics. When setting up the kiosk as part of their pop-up exhibit, facilitators have the power to configure which activities they think would best fit their audience and what they’re trying to achieve. As an example, this allows you to create three Slideshow activities about the same topic, but tailor each one for a different audience; one for younger learners, one for middle school children, and one for community audiences where you can expect adults are available to help explain more complex topics. | |||
=== Adding Multimedia === | |||
{{Main|Adding Media to CLIO}} | |||
Each Program contains its own directory to store media, which allows multiple activities within a Program to utilize the same multimedia assets. | |||
===Creating an Activity=== | ===Creating an Activity=== | ||
| Line 48: | Line 44: | ||
Activities are created through easily customizable activity templates, called [[CLIO Activity Types|Activity Types]]. You can make your own, or utilize the ones that are provided. The CLIO web application suite comes pre-installed with seventeen Activity Types that are designed specifically for use in an informal education or exhibit context. These activities are coded and stored as JSON files for use within CLIO, but we provide word processor templates to assist with collaboration during the development and drafting process. | Activities are created through easily customizable activity templates, called [[CLIO Activity Types|Activity Types]]. You can make your own, or utilize the ones that are provided. The CLIO web application suite comes pre-installed with seventeen Activity Types that are designed specifically for use in an informal education or exhibit context. These activities are coded and stored as JSON files for use within CLIO, but we provide word processor templates to assist with collaboration during the development and drafting process. | ||
=== | === Configuring Facilitator Information === | ||
{{Main| | {{Main|Configuring CLIO Facilitator Information}} | ||
{{Stub}} | |||
===Configuring Facilitator Discussions=== | |||
{{Main|Configuring CLIO Facilitator Discussions}} | |||
{{Stub}} | {{Stub}} | ||
===Updating CLIO Exhibit Content=== | ===Updating CLIO Exhibit Content=== | ||
{{Main|Updating CLIO Exhibit Content}} | {{Main|Updating CLIO Exhibit Content}} | ||
Once you have created an interactive on your Local Web Development Environment, it will need to be installed onto a kiosk or live web server. | |||
==Integrating CLIO Content into Your Institution== | ==Integrating CLIO Content into Your Institution== | ||
===Creating a Kiosk=== | ===Creating a Kiosk=== | ||
{{Main|Create a Kiosk}} | {{Main|Create a Kiosk}} | ||
You can use free and open-source software, alongside commodity or outdated hardware, to create an interactive kiosk to display within your institution. | |||
===Using CLIO in | ===Using CLIO in Broadcasting and Recording Software=== | ||
{{Main|Using CLIO in Open Broadcaster Software}} | {{Main|Using CLIO in Open Broadcaster Software}} | ||
You can use Open Broadcaster Software to integrate CLIO and its activities into a video conference, live stream or pre-recorded videos that you can share online. | |||
===Using CLIO on a Blog=== | ===Using CLIO on a Blog=== | ||
{{Main|Using CLIO on a Blog}} | {{Main|Using CLIO on a Blog}} | ||
When you host CLIO on a publicly accessible web server, it can be embedded directly into websites and blogging platforms, such as Wordpress. | |||
==Facilitation== | ==Facilitation== | ||
===Using Facilitator Mode=== | ===Using Facilitator Mode=== | ||
{{Main|Using CLIO Facilitator Mode}} | {{Main|Using CLIO Facilitator Mode}} | ||
| Line 85: | Line 76: | ||
===Adding Custom CSS to an Interactive === | ===Adding Custom CSS to an Interactive === | ||
{{Main|Adding Custom CSS to a CLIO Interactive}} | {{Main|Adding Custom CSS to a CLIO Interactive}} | ||
Custom CSS can be applied to an entire instance of CLIO Exhibit, which allows custom theming on a device-by-device or site-by-site basis. | |||
===Adding Custom CSS to a Program=== | ===Adding Custom CSS to a Program=== | ||
{{Main|Adding Custom CSS to a CLIO Program}} | {{Main|Adding Custom CSS to a CLIO Program}} | ||
Each Program can have custom CSS that allows the interface to be branded more specifically to the aesthetics of your exhibit. | |||
===Creating Activity Themes=== | ===Creating Activity Themes=== | ||
{{Main|Creating CLIO Activity Themes}} | {{Main|Creating CLIO Activity Themes}} | ||
Each Activity can have a configured theme that allows each activity's aesthetic to vary slightly from the primary interface. | |||
===Adding a Custom Web Font=== | ===Adding a Custom Web Font=== | ||
{{Main|Adding a Custom Web Font to CLIO}} | {{Main|Adding a Custom Web Font to CLIO}} | ||
CLIO can be configured to use custom web fonts to match your institutions branding. You can add fonts that are accessible to every Program in CLIO, or make certain fonts only available to certain Programs. | |||
===Important IDs and Classes=== | ===Important IDs and Classes=== | ||
{{Main|Important IDs and Classes}} | {{Main|Important IDs and Classes}} | ||
These are the classes and IDs that CLIO uses to create the interface, which can be used to create themes that match your style guidelines. | |||
===Using Design Assets=== | ===Using Design Assets=== | ||
{{Main|Using CLIO Design Assets}} | {{Main|Using CLIO Design Assets}} | ||
CLIO uses Google's Material.io Sharp icon set and several custom web fonts that can be utilized in your development. | |||
==Activity Types== | ==Activity Types== | ||
Revision as of 13:46, 13 April 2022
Overview
Requirements
CLIO runs on hardware with very minimal specifications, including outdated systems and single-board computers like the Raspberry Pi. Software requirements are an HTML web server with PHP 6.0+. A web browser, such as Mozilla Firefox or Google Chromium, are required to view CLIO.
Creating a Local Development Environment
CLIO is a web-based application, which means that it needs to be developed on your local machine using a web development environment. Many forms of code development happen in an Integrated Development Environment (IDE) designed to work with a specific coding language, but web development takes a slightly different approach.
For web development, we instead use a Local Web Development Environment (LWDE). These perform very similarly to an on-line web server, like the ones the power the World Wide Web. The difference is that this web server is constrained to your local computer and – if configured properly – your local network, meaning that only you and those given access can view or edit content on your Local Web Development Environment.
There are many free and open-source Local Web Development Environments available, which combine all of the required software and configurations required to quickly create a local web server with all of the required tools.
Installation
CLIO needs to be installed on the Local Web Development Environment. There is no setup process for databases, meaning that the CLIO web application files can be dragged directly to the applicable web server folder and access without installation. Different Operating Systems, as well as different software packages, have different locations for their hosted content.
Accessing CLIO
Once CLIO has been installed on your web server, you can access it through your web browser of choice by navigating to http://localhost/.
Creating an Interactive Exhibit
Creating an Interactive
An Interactive refers to single instance of a digital interactive experience, such as an individual kiosk or web exhibition. Interactives can contain multiple Programs, allowing them to be used in different exhibitions even while away from your institution. Interactives can also have device-specific settings, such as kiosk screen brightness and Facilitator PIN codes.
Creating a Program
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.
Defining Audiences
Each Program can have custom audiences groups, which are included as a way to help sort activities for predefined demographics. When setting up the kiosk as part of their pop-up exhibit, facilitators have the power to configure which activities they think would best fit their audience and what they’re trying to achieve. As an example, this allows you to create three Slideshow activities about the same topic, but tailor each one for a different audience; one for younger learners, one for middle school children, and one for community audiences where you can expect adults are available to help explain more complex topics.
Adding Multimedia
Each Program contains its own directory to store media, which allows multiple activities within a Program to utilize the same multimedia assets.
Creating an Activity
Activities are created through easily customizable activity templates, called Activity Types. You can make your own, or utilize the ones that are provided. The CLIO web application suite comes pre-installed with seventeen Activity Types that are designed specifically for use in an informal education or exhibit context. These activities are coded and stored as JSON files for use within CLIO, but we provide word processor templates to assist with collaboration during the development and drafting process.
Configuring Facilitator Information
Configuring Facilitator Discussions
Updating CLIO Exhibit Content
Once you have created an interactive on your Local Web Development Environment, it will need to be installed onto a kiosk or live web server.
Integrating CLIO Content into Your Institution
Creating a Kiosk
You can use free and open-source software, alongside commodity or outdated hardware, to create an interactive kiosk to display within your institution.
Using CLIO in Broadcasting and Recording Software
You can use Open Broadcaster Software to integrate CLIO and its activities into a video conference, live stream or pre-recorded videos that you can share online.
Using CLIO on a Blog
When you host CLIO on a publicly accessible web server, it can be embedded directly into websites and blogging platforms, such as Wordpress.
Facilitation
Using Facilitator Mode
Interface
Adding Custom CSS to an Interactive
Custom CSS can be applied to an entire instance of CLIO Exhibit, which allows custom theming on a device-by-device or site-by-site basis.
Adding Custom CSS to a Program
Each Program can have custom CSS that allows the interface to be branded more specifically to the aesthetics of your exhibit.
Creating Activity Themes
Each Activity can have a configured theme that allows each activity's aesthetic to vary slightly from the primary interface.
Adding a Custom Web Font
CLIO can be configured to use custom web fonts to match your institutions branding. You can add fonts that are accessible to every Program in CLIO, or make certain fonts only available to certain Programs.
Important IDs and Classes
These are the classes and IDs that CLIO uses to create the interface, which can be used to create themes that match your style guidelines.
Using Design Assets
CLIO uses Google's Material.io Sharp icon set and several custom web fonts that can be utilized in your development.
Activity Types
Creating an Activity Type
Using Integrated Libraries
Using CLIO Functions
Integrating a JavaScript Library
Framework
Understanding the URL Scheme
Understanding the 'content' Folder
Understanding an Activity Configuration File
Understanding the Look Closer Content System
Understanding the Rich Text Markup System
Controlling Hardware
Contribute
