Difference between revisions of "CLIO Developer Guide"
| Line 17: | Line 17: | ||
==Coding an Activity== | ==Coding an Activity== | ||
{{Main|Creating a CLIO 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. We provide word processor templates to assist with collaboration during the development and drafting process, but they need to be coded and stored as JSON files for use within CLIO. Each activity type contains it's own guide for coding activity content, along with the appropriate template. | {{Main|Creating a CLIO 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. We provide word processor templates to assist with collaboration during the development and drafting process, but they need to be coded and stored as JSON files for use within CLIO. Each activity type contains it's own guide for coding activity content, along with the appropriate template. | ||
==Creating an Activity Type== | |||
{{Main|Creating a CLIO Activity Type}} | {{Main|Creating a CLIO Activity Type}} | ||
All [[CLIO Activity Types|Activity Types]] are created using JavaScript. They are defined as a single function designed to load content from the configuration file and use it to set up the activity. Each Activity Type will automatically load an HTML template into the container and apply a stylesheet to the page. Using JavaScript or jQuery events, you can manipulate these containers and styles. | |||
====Using CLIO Functions==== | |||
===Using CLIO Functions=== | |||
{{Main|Using CLIO Functions}} | {{Main|Using CLIO Functions}} | ||
There are several functions that have been created for use in the interface or other activity types that were included as part of the CLIO web application, making it so they can be integrated into new activity types. | |||
==Framework== | ==Framework== | ||
===Understanding the URL Scheme=== | ===Understanding the URL Scheme=== | ||
{{Main|Understanding the CLIO URL Scheme}} | {{Main|Understanding the CLIO URL Scheme}} | ||
The CLIO web application uses a URL query-based system to load the interface dynamically based on parameters in the URL. By manipulating these parameters, we can change how the web application will appear when loaded. This can be thought of similarly to the way options are passed into a programming function. When the CLIO is loaded without any parameters, it will default to the full “Facilitator Mode” experience. | |||
===Understanding the 'content' Folder=== | ===Understanding the 'content' Folder === | ||
{{Main|Understanding the CLIO Content Folder}} | {{Main|Understanding the CLIO 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. | |||
===Understanding an Activity Configuration File=== | ===Understanding an Activity Configuration File=== | ||
{{Main|Understanding a CLIO Activity Configuration File}} | {{Main|Understanding a CLIO Activity Configuration File}} | ||
Every Activity, even ones with different Activity Types, use the same configuration file structure. This allows the CLIO web application to configure the interface, identify the appropriate activity type and pass is the content used for setup. | |||
===Understanding the Look Closer Content System=== | ===Understanding the Look Closer Content System=== | ||
{{Main|Understanding the CLIO Look Closer Content System}} | {{Main|Understanding the CLIO Look Closer Content System}} | ||
The Look Closer Content System is a CLIO feature that can be used while creating new interactive activity types. When called through a JavaScript event, this system creates full-screen Look Closer pop-ups with scrollable rich text, image galleries and video playback. This features is meant to add depth and interactivity to the exploration of information. | |||
===Understanding the Rich Text Markup System=== | ===Understanding the Rich Text Markup System=== | ||
{{Main|Understanding the CLIO Rich Text Markup System}} | {{Main|Understanding the CLIO Rich Text Markup System}} | ||
Paragraph and text formatting is stored using a lightweight markup language, closely based on the BBCode tag system. This allows formatting information, such as bold, italic and underlined text, to be stored within a plain text format like JSON. For example, storing “[b]Example[/b]” within a configuration file would cause the interface to render everything between the “[b]” and “[/b]” tags as bold, i.e. '''Example'''. | |||
===Controlling Hardware=== | ===Controlling Hardware === | ||
{{Main|Controlling External Hardware with CLIO}} | {{Main|Controlling External Hardware with CLIO}} | ||
{{ | While running a web server locally on the hardware that is powering the CLIO exhibit, it is possible to control the hardware through the web application interface. This should only be done when the web server is running on a kiosk that otherwise has no access to the internet. Hardware control can be achieved through a combination of JavaScript, PHP and Python scripting. By using JavaScript and AJAX/AJAJ, we can asynchronously call a PHP script as part of an event or the initialization script of an activity type. When this PHP script is called, it is used to run terminal commands or initialize a Python script stored locally on the hardware. PHP and Python can be used to manipulate Raspberry Pi hardware, execute console commands or run prepared code to control lights, speakers or other electronics attached to a Raspberry Pi GPIO port. | ||
==Contribute== | |||
{{Main|Contributing to CLIO}} | |||
If you want to help contribute to CLIO, you've come to the right place. This is where we are trying to keep a living document based on CLIO and the way open-source technologies intersect with museums, libraries and cultural heritage centers. Sponsor us, add terms, update definitions, or provide language translations. Every little thing helps us to create a vibrant and open community geared towards one thing: equal access to technology, for everyone. | |||
Revision as of 18:22, 6 May 2022
Overview
Developers code the CLIO activities, create or modify activity types, and provide insights into technology integration.
Preparation
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 Local Web Development Environment (LWDE). There are many free and open-source Local Web Development Environments available, which quickly create a local web server with all of the required tools. These software packages can also be used to quickly create kiosks.
Installation
CLIO needs to be installed on a web server. 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 accessed without installation.
Accessing CLIO
Once CLIO has been installed on your web server, you can access it through your web browser. For local web development, you can navigate to http://localhost/ or http://127.0.0.1/.
Coding 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. We provide word processor templates to assist with collaboration during the development and drafting process, but they need to be coded and stored as JSON files for use within CLIO. Each activity type contains it's own guide for coding activity content, along with the appropriate template.
Creating an Activity Type
All Activity Types are created using JavaScript. They are defined as a single function designed to load content from the configuration file and use it to set up the activity. Each Activity Type will automatically load an HTML template into the container and apply a stylesheet to the page. Using JavaScript or jQuery events, you can manipulate these containers and styles.
Using CLIO Functions
There are several functions that have been created for use in the interface or other activity types that were included as part of the CLIO web application, making it so they can be integrated into new activity types.
Framework
Understanding the URL Scheme
The CLIO web application uses a URL query-based system to load the interface dynamically based on parameters in the URL. By manipulating these parameters, we can change how the web application will appear when loaded. This can be thought of similarly to the way options are passed into a programming function. When the CLIO is loaded without any parameters, it will default to the full “Facilitator Mode” experience.
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.
Understanding an Activity Configuration File
Every Activity, even ones with different Activity Types, use the same configuration file structure. This allows the CLIO web application to configure the interface, identify the appropriate activity type and pass is the content used for setup.
Understanding the Look Closer Content System
The Look Closer Content System is a CLIO feature that can be used while creating new interactive activity types. When called through a JavaScript event, this system creates full-screen Look Closer pop-ups with scrollable rich text, image galleries and video playback. This features is meant to add depth and interactivity to the exploration of information.
Understanding the Rich Text Markup System
Paragraph and text formatting is stored using a lightweight markup language, closely based on the BBCode tag system. This allows formatting information, such as bold, italic and underlined text, to be stored within a plain text format like JSON. For example, storing “[b]Example[/b]” within a configuration file would cause the interface to render everything between the “[b]” and “[/b]” tags as bold, i.e. Example.
Controlling Hardware
While running a web server locally on the hardware that is powering the CLIO exhibit, it is possible to control the hardware through the web application interface. This should only be done when the web server is running on a kiosk that otherwise has no access to the internet. Hardware control can be achieved through a combination of JavaScript, PHP and Python scripting. By using JavaScript and AJAX/AJAJ, we can asynchronously call a PHP script as part of an event or the initialization script of an activity type. When this PHP script is called, it is used to run terminal commands or initialize a Python script stored locally on the hardware. PHP and Python can be used to manipulate Raspberry Pi hardware, execute console commands or run prepared code to control lights, speakers or other electronics attached to a Raspberry Pi GPIO port.
Contribute
If you want to help contribute to CLIO, you've come to the right place. This is where we are trying to keep a living document based on CLIO and the way open-source technologies intersect with museums, libraries and cultural heritage centers. Sponsor us, add terms, update definitions, or provide language translations. Every little thing helps us to create a vibrant and open community geared towards one thing: equal access to technology, for everyone.
