CLIO Documentation

From CLIO
Google material book.png

Overview

Label important.png
Imbox style.png

Requirements

Label important.png

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

Label important.png

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

Defining Audiences

Label important.png
Imbox style.png

Adding Media to CLIO

Label important.png
Imbox style.png

Creating an Interactive

Imbox style.png

Creating a Program

Label important.png
Imbox style.png

Creating an Activity

Label important.png

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.

Exporting a CLIO Interactive

Imbox style.png

Updating CLIO Exhibit Content

Imbox style.png


Integrating CLIO Content into Your Institution

Creating a Kiosk

Label important.png
Imbox style.png

Using CLIO in Video Conference Software

Imbox style.png

Using CLIO on a Blog

Label important.png
Imbox style.png

Facilitation

Configuring Facilitator Information

Imbox style.png

Configuring Facilitator Discussions

Imbox style.png

Using Facilitator Mode


Interface

Adding Custom CSS to an Interactive

Imbox style.png

Adding Custom CSS to a Program

Imbox style.png

Creating Activity Themes

Imbox style.png

Adding a Custom Web Font

Imbox style.png

Important IDs and Classes

Imbox style.png

Using Design Assets

Label important.png
Imbox style.png


Activity Types

Creating an Activity Type

Imbox style.png

Using Integrated Libraries

Imbox style.png

Using CLIO Functions

Label important.png
Imbox style.png

Integrating a JavaScript Library

Imbox style.png


Framework

Understanding the URL Scheme

Imbox style.png

Understanding the 'content' Folder

Imbox style.png

Understanding an Activity Configuration File

Imbox style.png

Understanding the Look Closer Content System

Imbox style.png

Understanding the Rich Text Markup System

Imbox style.png

Controlling Hardware

Imbox style.png

Contribute

Label important.png
Imbox style.png