MoodleDocs - User contributions [en]

MoodleNet

2023-07-20T09:37:47Z

Dougiamas: /* What is MoodleNet? */

[[File:Moodlenet-logo.png|400px]]
== What is MoodleNet? ==
[https://moodle.net/ MoodleNet] is a flexible Open Education Technology platform for curating collections of the best known Open Educational (and other) Resources. You'll find more general information in the [https://docs.moodle.org/moodlenet/Main_Page MoodleNet user documentation].

If you are looking to get started as a MoodleNet developer, we have some courses on Moodle Academy. Both are a bit old but will be updated soon.

* [https://moodle.academy/course/view.php?id=13# Introduction to MoodleNet]
* [https://moodle.academy/course/view.php?id=74 MoodleNet for Developers course with Moodle Academy]

== Current status ==
We have just released MoodleNet 3.0. You can follow the releases on Moodle's Jira tracker at [https://tracker.moodle.org/projects/MDLNET?selectedItem=com.atlassian.jira.jira-projects-plugin%3Arelease-page&status=unreleased MDLNET].
== Roadmap ==
See [https://tracker.moodle.org/secure/RapidBoard.jspa?rapidView=120&projectKey=MDLNET&view=detail our work on new features in the tracker].

== Quick start guide ==
====System Requirements====
To install MoodleNet, we recommend using the following on your system:
*[https://nodejs.org NodeJS] 16
*[https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/ npm] 8
*[https://www.arangodb.com/ ArangoDB] 3.10

Later versions should probably work but have not been tested yet.
====Deploy an ArangoDB instance====
MoodleNet uses [https://www.arangodb.com/ ArangoDB] as main database

You can choose how and where to deploy your ArangoDB, as long as it can be reached by MoodleNet process

An easy way to install run ArangDB locally as a service is by using Docker[https://hub.docker.com/_/arangodb] e.g. :
docker run -d --restart unless-stopped -e ARANGO_NO_AUTH=1 -p 8529:8529 --name=mn-3-db arangodb:3.10
Possibly tweaking some options as you like, e.g. mounting a volume|directory for data or setting a password
====Install MoodleNet ====
Install Moodlenet by simply issuing the following npm command
npm create @moodlenet@latest path/to/installation/folder
That will install all MoodleNet core packages in the chosen folder

it will also create a default configuration file ('''default.config.json''') and a default cryptographic key-pair for the system ('''default.crypto.privateKey , default.crypto.publicKey''')
====Start MoodleNet process ====
To start MoodleNet issue the following command from within the installation directory
npm start
open your browser on http://localhost:8080

'''Notice:''' on the first run the system will have to compile the webapp, so you'll get a 404 until ready. It should take a few minutes.
====MoodleNet configuration file====
MoodleNet configuration file ('''default.config.json''') holds all static system configs.

Here's how the default config looks like after install:
{
"pkgs": {
"@moodlenet/core": {
"baseFsFolder": "/path/to/installation/dir/fs",
"instanceDomain": "<nowiki>http://localhost:8080</nowiki>",
"npmRegistry": "<nowiki>https://registry.npmjs.org</nowiki>",
"mainLogger": {
"consoleLevel": "info",
"file": {
"path": "./log/moodlenet.%DATE%.log",
"level": "info"
}
}
},
"@moodlenet/crypto": {
"keys": {
"alg": "RS256",
"type": "PKCS8",
"private": "/path/to/installation/dir/default.crypto.privateKey",
"public": "/path/to/installation/dir/default.crypto.publicKey"
}
},
"@moodlenet/arangodb": {
"connectionCfg": {
"url": "<nowiki>http://localhost:8529</nowiki>"
}
},
"@moodlenet/http-server": {
"port": 8080,
"defaultRpcUploadMaxSize": "5MB"
},
"@moodlenet/ed-resource": {
"resourceUploadMaxSize": "1.2GB"
},
"@moodlenet/simple-email-auth": {
"newUserNotPublisher": false
},
"@moodlenet/email-service": {
"nodemailerTransport": {
"jsonTransport": true
}
},
"@moodlenet/system-entities": {
"rootPassword": "eqhb30x9iq5"
},
"@moodlenet/react-app": {}
}
Here are some relevant configs you may want to check and tweak:
*'''@moodlenet/arangodb.connectionCfg.url''' : the default config assumes you installed ArangoDB without password with standard port on the same host
*'''@moodlenet/core.baseFsFolder''' : path (better absolute path instead of relative to MoodleNet process cwd) to the system root folder for system filesystem persistency, if you want to change the system-filesystem-root after the system already run, move or clone the existing folder somewhere else and set this config properly to point to the new path
*'''@moodlenet/core.instanceDomain''' : the public domain of your moodlenet instance (e.g. <nowiki>https://moodlenet.example.com</nowiki>) - the default one (<nowiki>http://localhost:8080</nowiki>) is ok for testing and dev
*'''@moodlenet/email-service.nodemailerTransport''' : the [https://nodemailer.com/ nodemailer] [https://nodemailer.com/smtp/ transport configuration] for the system email service. It can be a simple smtp url string, or a [https://nodemailer.com/smtp/ nodemailer standard config object]. '''Notice''': with the default configuration '''{ "jsonTransport": true }''' the system won't send any email, it will simply log them)
*'''@moodlenet/system-entities.rootPassword''' : a static root password for edge cases - you'll use it to give the first admin permission to a user (see below) - this property is optional, if not set the root user is disabled
*'''@moodlenet/http-server.port''' : the HTTP server port to listen

Moodlenet's HTTP service doesn't support HTTPS.

It's always a good practice to back Moodlenet with a HTTP reverse proxy (e.g. nginx, Apache) and it is a must if you want to publish over HTTPS, configuring TLS on it.
====Default authentication system====
Moodlenet comes with a simple email+password authentication system (pkg @moodlenet/simple-email-auth) that lets users signup and login with a verified email

Users can sign up with their email, receive in their inbox a confirmation link to click and create their user-account
====Assign admin privileges to your user====
As you deploy a new instance, no user is present in the system.

Signup with your email and create your user.

Test login, then logout and browse to the hidden page '''<nowiki>http://localhost:8080/login/root</nowiki>''', here you can type in the '''rootPassword''' (specified in config file) to login as root.

Open the avatar menu on top right header, and click '''admin''' link

Click on '''Users''' section on the left, and see your user listed there. Activate the '''admin''' icon to give yourself admin privileges

Now you can log out and login back with your email, see you gained the '''admin''' link in your avatar menu

Admins can directly use that admin page feature anytime to assign and remove admin privileges to other users
== Update the system==
You can easily upgrade MoodleNet keeping system packages always up-to-date with the minor and patch releases by issuing the command
npm update
from within the installation directory, the same where you start the system

Since MoodleNet is npm-package based, it leverages all npm features for upgrades and new packages installation
== Migrate from V2==
If you have a v2 running and want to migrate it to v3 , you can use the [https://www.npmjs.com/package/@moodlenet/v2-migrate-v3 @moodlenet/v2-migrate-v3]

The v3 system must have access to Moodlenet-V2 persistencies: its running arangoDB instance and the MN2 filesystem as configured in [https://gitlab.com/moodlenet/moodlenet/-/tree/1c8c7eb9b9aa2a3ee912871c670480b3e5fa0f70/packages/ce-platform#set-environment-variables V2 env variable '''STATICASSETS_FS_ROOT_FOLDER''']

After Moodlenet v3 is installed (as above), issue the following command from the installation folder
npm install @moodlenet/v2-migrate-v3
Edit the '''default.config.json''' adding a '''@moodlenet/v2-migrate-v3''' section beside the others, it should look like that
"@moodlenet/v2-migrate-v3": {
"v2DbConnectionCfg": {
"url": "<nowiki>http://your-mn-v2-arangodb-host:8529</nowiki>"
},
"v2AssetFolder": "/path/to/v2/asset/folder"
}
Then just restart the system, the migration will be done, services will be restarted and you can log in.

This migration package can be deleted now if you would like.
==MoodleNet architecture==
MoodleNet is a full stack TypeScript/JavaScript system using:
*NodeJs
**NPM Packages [https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/]
**ESM Modules [https://nodejs.org/api/esm.html#introduction]
*Browsers
**ReactJs 18 [https://reactjs.org/]
**HTML5 [https://html.spec.whatwg.org/multipage/]
**CSS3 [https://www.w3.org/Style/CSS/]
==MoodleNet development environment ==
*NodeJs ^16 https://nodejs.org/
*ArangoDB ^3 (we suggest using [https://www.docker.com/ Docker])
* We recommend the open source IDE Visual Studio Code https://code.visualstudio.com/
===Setup development environment ===
'''From the command line interface (CLI):'''

Ensure ArangoDB is running on localhost. You may run it in a Docker container issuing a command as below:
docker run -e ARANGO_NO_AUTH=1 -p 8529:8529 --name=mn3-dev arangodb:3.10
Clone the repository, you may wish to fork it, but that's not required:
git clone <nowiki>https://gitlab.com/moodlenet/moodlenet.git</nowiki>
Change to the project's folder:
cd moodlenet
Install and initialise the project:
npm install
Install a development server:
npm run dev-install-backend my-dev # <- my-dev: an arbitrary dev-installation name
In the example we chose '''my-dev''' as installation name, the tool will then setup a dev installation in '''./.dev-machines/my-dev'''

You can create as many dev installations as you wish.

Run development backend:
npm run dev-start-backend my-dev # <- my-dev : the name you chose when installed
The first run of the system may take some time to install.

The default configuration for dev includes the config '''@moodlenet/react-app.noWebappServer: true''' that prevents the server to serve the webapp, so you won't access the webapp on <nowiki>http://localhost:8080</nowiki>

Instead, you'll want to run a webpack+HMR serving the webapp issuing
npm run dev-start-webapp my-dev # <- my-dev: the installation server to point to
Once all started, browse http://localhost:3000
=== Mono-Repository management with Lerna.js===
MoodleNet project takes leverages [https://lerna.js.org/ lerna.js] to manage multi-package mono-repository .

Please refer to [https://lerna.js.org/ Lerna documentation] to understand how it manages mono-repo and project-packages dependency linking in the development environment.

Questions? Please take a look in the [https://moodle.org/mod/forum/view.php?id=8726 MoodleNet Community] and [https://tracker.moodle.org/projects/MDLNET/summary Tracker] for answers or to ask for help.
*[https://moodledev.io/general/development/tracker Using Tracker]
*[https://www.npmjs.com/package/@moodlenet/ce-platform Code repository]
*[https://docs.moodle.org/moodlenet/Main_Page MoodleNet user documentation]
*[https://moodle.org/mod/forum/view.php?id=8726 MoodleNet news and discussion]
*[https://tracker.moodle.org/secure/RapidBoard.jspa?rapidView=167&view=detail MoodleNet Issue Tracker]
*[https://gitlab.com/moodlenet/moodlenet/-/issues MoodleNet Gitlab Issues]
[[es:MoodleNet]]

MoodleNet

2021-06-21T13:08:25Z

Dougiamas: /* Important links */

[[File:Moodlenet-logo.png|400px]]

== What is MoodleNet? ==

MoodleNet is our new social network to share and curate open educational resources with educators world-wide. It is integrated closely with Moodle LMS and Moodle Workplace to make resources easy to find and use, but can be useful even if you don't use Moodle LMS. MoodleNet is also intended as a way to build your profile as an educator.

Importantly, MoodleNet is designed to be a federated, flexible Open Education Technology that is not controlled by a single entity, or subject to a single point of failure.

== Current status ==
''Last updated: 31 May 2021''

MoodleNet 1.x was abandoned by the team in 2021 because it was heading down the wrong path. The project was recently rebooted (January 2021) with a new team, new architecture and a simpler new design.

== Roadmap ==

* '''15 August 2021''' - MVP for wider community testing and feedback
* '''31 August 2021''' - Beta release , feature complete for 2.0 release.
* '''15 September 2021''' - 2.0 release!

== Important links ==

* [https://gitlab.com/moodlenet Code repository]
* [https://moodle.org/mod/forum/view.php?id=8726 MoodleNet news and discussion]
* [https://tracker.moodle.org/secure/RapidBoard.jspa?rapidView=167&view=detail MoodleNet Issue Tracker]

== Archive ==

* [https://docs.moodle.org/dev/MoodleNet/research Research]
* [https://docs.moodle.org/dev/MoodleNet/Copyright_Directive European Copyright Directive]
* [https://docs.moodle.org/dev/MoodleNet/DPIA Data Protection Impact Assessment]

[[es:MoodleNet]]

MoodleNet

2021-05-31T12:47:10Z

Dougiamas: /* Archive */

[[File:Moodlenet-logo.png|400px]]

== What is MoodleNet? ==

MoodleNet is our new social network to share and curate open educational resources with educators world-wide. It is integrated closely with Moodle LMS and Moodle Workplace to make resources easy to find and use, but can be useful even if you don't use Moodle LMS. MoodleNet is also intended as a way to build your profile as an educator.

Importantly, MoodleNet is designed to be a federated, flexible Open Education Technology that is not controlled by a single entity, or subject to a single point of failure.

== Current status ==
''Last updated: 31 May 2021''

MoodleNet 1.x was abandoned by the team in 2021 because it was heading down the wrong path. The project was recently rebooted (January 2021) with a new team, new architecture and a simpler new design.

== Roadmap ==

* '''15 August 2021''' - MVP for wider community testing and feedback
* '''31 August 2021''' - Beta release , feature complete for 2.0 release.
* '''15 September 2021''' - 2.0 release!

== Important links ==

* [https://gitlab.com/moodlenet Code repository]
* [https://moodle.org/mod/forum/view.php?id=8726 MoodleNet news and discussion]

== Archive ==

* [https://docs.moodle.org/dev/MoodleNet/research Research]
* [https://docs.moodle.org/dev/MoodleNet/Copyright_Directive European Copyright Directive]
* [https://docs.moodle.org/dev/MoodleNet/DPIA Data Protection Impact Assessment]

[[es:MoodleNet]]

MoodleNet/research

2021-05-31T12:46:48Z

Dougiamas:

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----
=== Other similar systems ===

See [[MoodleNet/research/other]]

=== DMCA ===

From [https://en.wikipedia.org/wiki/Digital_Millennium_Copyright_Act Wikipedia]:

<blockquote>The Digital Millennium Copyright Act (DMCA) is a 1998 United States copyright law that implements two 1996 treaties of the World Intellectual Property Organization (WIPO). It criminalizes production and dissemination of technology, devices, or services intended to circumvent measures that control access to copyrighted works (commonly known as digital rights management or DRM). It also criminalizes the act of circumventing an access control, whether or not there is actual infringement of copyright itself. In addition, the DMCA heightens the penalties for copyright infringement on the Internet.</blockquote>

...and:

<blockquote>DMCA Title II, the Online Copyright Infringement Liability Limitation Act ("OCILLA"), creates a safe harbor for online service providers (OSPs, including ISPs) against copyright infringement liability, provided they meet specific requirements. OSPs must adhere to and qualify for certain prescribed safe harbor guidelines and promptly block access to alleged infringing material (or remove such material from their systems) when they receive notification of an infringement claim from a copyright holder or the copyright holder's agent. OCILLA also includes a counternotification provision that offers OSPs a safe harbor from liability to their users when users claim that the material in question is not, in fact, infringing. OCILLA also facilitates issuing of subpoenas against OSPs to provide their users' identity.</blockquote>

=== Social networks integrating 'currency' ===

* [https://memo.cash/ Memo]
* [https://www.minds.com/ Minds]
* [https://steemit.com/ Steemit]
* [https://tri.cash/ Trillion]
* [http://www.yy.com/ YY.com] ''(Chinese)''

=== DPIA ===

A [https://ico.org.uk/for-organisations/guide-to-the-general-data-protection-regulation-gdpr/data-protection-impact-assessments-dpias/what-is-a-dpia/ Data Protection Impact Assessment] "is a process designed to help you systematically analyse, identify and minimise the data protection risks of a project or plan".

We need to decide whether MoodleNet meets any of the three criteria which would necessitate a DPIA:

# Systematic and extensive profiling with significant effects
# Large scale use of sensitive data
# Public monitoring

It may be a good idea to create a DPIA in any case, as part of our GDPR compliance.

=== Translation platforms ===

* [https://www.applanga.com/ Applanga]
* [https://crowdin.com Crowdin]
* [https://www.memoq.com/en/memoq-translator-free memoq]
* [https://poeditor.com/ POEditor]
* [http://pootle.translatehouse.org/index.html Pootle]
* [https://www.textunited.com/ TextUnited]
* [https://www.transifex.com/ Transifex]
* [http://zanata.org/ Zanata]

=== Accessibility ===

* [https://accessibility.blog.gov.uk/ Gov.uk accessibility]
* [https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/ Marco's accessibility blog]
* [https://www.usability.gov/what-and-why/accessibility.html Usability.gov]
* [https://www.w3.org/wiki/Accessibility_basics W3C Accessibility basics]
* [https://www.w3.org/WAI/standards-guidelines/wcag/glance/ Web Content Accessibility Guidelines (WCAG) 2.1]
* [https://wordpress.org/about/accessibility/ WordPress accessibility]

=== Policy docs from other federated systems ===

[https://the-federation.info/ Federated systems] tend to have a website explaining the service, then link to specific instances. As the terms of service, privacy policy, etc. may differ greatly from instance to instance, the list below takes a popular example of the service.

* [https://diasporafoundation.org/ Diaspora]
** [https://diasp.org Diasp.org]
*** [https://diasp.org/terms Terms of service and privacy policy]
* [https://friendi.ca/ Friendica]
** [https://libranet.de/ Libranet.de]
*** [https://libranet.de/friendica Terms of use, data protection and data security] (in German)
* [https://gnu.io/social/ GNU social]
** [https://status.pirati.ca Piratica]
*** [https://status.pirati.ca/doc/privacy Privacy policy]
* [https://project.hubzilla.org/ Hubzilla]
** [https://start.hubzilla.org Start.hubzilla.org]
*** [https://start.hubzilla.org/help/en-gb/TermsOfService Terms of service]
* [https://joinmastodon.org/ Mastodon]
** [https://mastodon.social/about Mastodon.social]
*** [https://mastodon.social/about/more Code of conduct]
*** [https://mastodon.social/terms Privacy policy]
* [https://joinmisskey.github.io/en/ Misskey]
** [https://tri.cash/ Trillion]
*** [https://tri.cash/news/wp/terms/ Terms of service] ''(note: also uses e-currency)''
* [https://zotlabs.com/osada/ Osada]
** [https://osada.gibberfish.org Osada.gibberfish.org]
*** [https://osada.gibberfish.org/help/en-gb/TermsOfService Terms of service] ''(essentially the same as Hubzilla)''
* [https://joinpeertube.org/en/ PeerTube]
** [https://pe.ertu.be/ Pe.ertu.be]
*** [https://pe.ertu.be/about/instance About and terms]
* [https://pixelfed.org/ PixelFed]
** [https://pixelfed.social/ Pixelfed.social]
*** [https://pixelfed.social/site/terms Terms of use]
*** [https://pixelfed.social/site/privacy Privacy policy]
* [https://pleroma.social Pleroma]
** [https://pleroma.site Pleroma.site]
*** [https://info.pleroma.site/tos.html Terms of service]
*** [https://info.pleroma.site/ Site info] (include warrant canary, hardware specs, etc.)
*** [https://info.pleroma.site/federation.html Federation policy]
*** [https://info.pleroma.site/privacy.html Privacy policy]
* [https://plume-org.github.io/Plume/ Plume]
** [https://fediverse.blog Fediverse.blog]
*** [https://fediverse.blog/about About]

=== Authentication systems ===

* [https://en.wikipedia.org/wiki/Mozilla_Persona Mozilla Persona] (decommissioned, but useful info in project - including [https://web.archive.org/web/20140713180852/http://lloyd.io/how-browserid-works this post])
* [https://en.wikipedia.org/wiki/OAuth OAuth]
* [https://en.wikipedia.org/wiki/OpenID OpenID]
* [https://en.wikipedia.org/wiki/Security_Assertion_Markup_Language SAML]
* [https://en.wikipedia.org/wiki/WebID WebID]

=== Interesting projects, products, and standards ===

* [https://activitypub.rocks/ ActivityPub] - a "decentralized social networking protocol based upon the ActivityStreams 2.0 data format. It provides a client to server API for creating, updating and deleting content, as well as a federated server to server API for delivering notifications and content". Useful comments and caveats in [https://news.ycombinator.com/item?id=14417315 this Hacker News thread]. The [https://www.w3.org/TR/activitypub/ spec] (latest version: Nov 2017) is well-written.
* [https://beakerbrowser.com Beaker] - a peer-to-peer browser with tools to create and host websites.
* [https://www.bigchaindb.com BigchainDB] - a decentralised open-source database with blockchain data structure to enhance scalability, write and read speed, and data extraction capability.
* [https://blockstack.org Blockstack] - a new network for decentralised applications, including an alternate DNS and public-key infrastructure.
* [https://en.wikipedia.org/wiki/Cooperative_storage_cloud Co-operative Storage Cloud] - a "decentralized model of networked online storage where data is stored on multiple computers (nodes), hosted by the participants cooperating in the cloud".
* [https://cryptosphere.io Cryptosphere] - an "open-source P2P web application platform for decentralized, privacy-preserving software which keeps users in control of their own content". Defunct?
* [https://datproject.org Dat] - a "data distribution tool with a version control feature for tracking changes and publishing datasets". Funded by major donors such as the Knight Foundation and Alfred P. Sloan Foundation.
* [https://diasporafoundation.org Diaspora] - a "nonprofit, user-owned, distributed social network" consisting of "independently owned nodes (called pods) which interoperate to form the network".
* [https://edmodo.com Edmodo] - the app "is probably the closest thing to MoodleNet that exists" according to Martin Dougiamas.
* [https://ethereum.org Ethereum] - a "decentralized platform that runs smart contracts: applications that run exactly as programmed without any possibility of downtime, censorship, fraud or third party interference".
* [https://filecoin.io Filecoin] - an "open-source, public, cryptocurrency and digital payment system intended to be a blockchain-based digital storage and data retrieval method" building on top of IPFS.
* [https://freenetproject.org Freenet] - a somewhat notorious peer-to-peer platform using the 'dark web' for censorship-resistant communication. 'Freesites' contains only static content, meaning it cannot provide content that requires a database or server-side scripts.
* [http://friendi.ca Friendica] - "open source software for a distributed social network" focusing on "effective privacy settings and easy installation of personal servers". Also allows other social networks and blogs to be integrated.
* [https://gnunet.org GNUnet] - an "alternative ne twork stack for building secure, decentralized and privacy-preserving distributed applications". The framework features "link encryption, peer discovery, resource allocation, communication over many transports (such as TCP, UDP, HTTP, HTTPS, WLAN and Bluetooth) and various basic peer-to-peer algorithms for routing, multicast and network size estimation".
* [https://gnu.io/social GNU social] - "social communication software for both public and private communications" - "widely supported and has a large userbase".
* [https://project.hubzilla.org Hubzilla] - a "powerful platform for creating interconnected websites featuring a decentralized identity, communications, and permissions framework built using common webserver technology".
* [https://geti2p.net/en I2P] - a network that provides "strong privacy protections for communication over the Internet". Used for serverless email, anonymous websites, gateways to/from the public internet, blogging, forums, realtime chat, filesharing, decentralised file storage, and more.
* [https://ipdb.io IPDB] - stands for 'InterPlanetary DataBase', a "blockchain database network for the decentralized stack". It's ready to use, with strong governance (including many large non-profits).
* [https://ipfs.io IPFS] - stands for 'InterPlanetary File System', a protocol "designed to create a permanent and decentralized method of storing and sharing files". Content-addressable, peer-to-peer, distributed file system. Provides a resilient way to serve files, removing duplication and centralisation.
* [https://github.com/oduwsdl/ipwb IPWB] - stands for 'InterPlanetary WayBack' and "facilitates permanence and collaboration in web archives".
* [https://www.gitbook.com/book/jedisct1/libsodium/details Libsodium] - the Sodium crypto library is "a modern, easy-to-use software library for encryption, decryption, signatures, password hashing and more".
* [http://www.imsglobal.org/activity/learning-tools-interoperability LTI] - stands for Learning Tools Interoperability, a standard developed by IMS Global Learning Consortium. Main use case is to enable web apps, tools or content to connect seamlessly and securely with digital learning environments.
* [http://www.imsglobal.org/activity/learning-tools-interoperability LTI Advantage] - a new package of extensions to the Learning Tools Interoperability standard that currently includes: Assignment and Grade Services, Deep Linking, and Names and Role Provisioning Service. Allows for better two-way sharing of data between digital learning environments and other apps/services.
* [https://maidsafe.net Maidsafe] - bills itself as "the world's first autonomous data network". Reliant on cryptocurrency, but not blockchain, for network services.
* [https://joinmastodon.org Mastodon] - a federated social network similar to Twitter, "but administrated as a decentralized federation of independently operated servers running open source software". Users join a specific instance, and their updates can then be federated to other instances. Mastodon is built on OStatus, meaning that federated Mastodon instances form just one part of a wider 'Fediverse'.
* [https://matrix.org Matrix] - an "open protocol for real-time communication". Aims to be like SMTP for real-time communication between different service providers.
* [http://www.mediachain.io Mediachain] - a "blockchain data solution for connecting applications to media and information about it". Best-known as an attribution engine for content creators.
* [https://namecoin.org Namecoin] - an "experimental open-source technology which improves decentralization, security, censorship resistance, privacy, and speed of certain components of the Internet infrastructure such as DNS and identities".
* [https://www.openbazaar.org OpenBazaar] - "an open source project developing a protocol for e-commerce transactions in a fully decentralized marketplace".
* [https://github.com/blockai-unofficial/openpublish Open Publish] - "a publishing protocol for registering media as a digital asset on the Bitcoin blockchain".
* [http://www.osiris-sps.org Osiris] - a "freeware program used to create web portals distributed via peer-to-peer networking (P2P) and autonomous from centralized servers". Mostly defunct, although the [https://en.wikipedia.org/wiki/Osiris_(software) Wikipedia page] outlines some interesting features around reputation and 'anarchist' vs 'monarchist' community structures.
* [https://www.producthunt.com/topics/artificial-intelligence?subtopic=88 Product Hunt | Artificial Intelligence | APIs] - a continually-updated list of products/services using A.I. APIs. Useful for seeing what's out there to build upon.
* [https://sia.tech Sia] - an example of co-operative cloud storage, build on blockchain technology. Depends on cryptocurrency called 'Siacoin'.
* [https://storj.io Storj] - another example of co-operative cloud storage. End-to-end encrypted, blockchain-based.
* [https://skipflag.com SkipFlag] - "a knowledge base that builds itself" using your "existing conversations, support tickets, and other communication... to autonomously answer questions".
* [https://socialhome.network Socialhome] - "allows you to build a rich profile that federates across the federated social web".
* [https://steemit.com Steem] - a "social news service which runs a blogging and social networking website on top of a blockchain database, known as Steem. The service produces STEEM and Steem Dollars which are tradeable tokens users obtain for posting, discovering, and commenting on interesting content."
* [https://github.com/ethersphere/swarm Swarm] - a "distributed storage platform and content distribution service". Users don't notice much difference to regular websites, except that "uploads are not to a specific server" meaning that Swarm is "DDOS-resistant, zero-downtime, fault-tolerant and censorship-resistant as well as self-sustaining due to a built-in incentive system". Free and open source.
* [http://www.trsst.com trsst] - "looks and feels like twitter but encrypted and anonymized and decentralized and only you hold the keys".
* [http://twister.net.co Twister] - a "fully decentralized P2P microblogging platform leveraging from the free software implementations of Bitcoin and BitTorrent protocols".
* [https://unhosted.org Unhosted] - "also known as "serverless", "client-side", or "static" web apps, unhosted web apps do not send your user data to their server. Either you connect your own server at runtime, or your data stays within the browser."
* [https://en.wikipedia.org/wiki/WebRTC WebRTC] - stands for Web Real Time Communication, and is "a collection of communications protocols and application programming interfaces that enable real-time communication over peer-to-peer connections". Used for "video conferencing, file transfer, chat, or desktop sharing without the need of either internal or external plugins". Supported in all major desktop and mobile browsers as of iOS 11. Developed by W3C members.
* [https://zeronet.io ZeroNet] - a "decentralized Internet-like network of peer-to-peer users". Fully open source. Uses bitcoin cryptography to identify sites (instead of IP addresses) and bittorrent technology to propagate changes within the network. Sites are accessed via a web browser, but served from localhost.
* [https://en.m.wikipedia.org/wiki/Zooko's_triangle Zooko's triangle] - interesting less for the theory, more for the technologies / approaches which refute the conjecture. Notably: [https://blockstack.org Blockstack], [https://gnunet.org GNUnet], and [http://openalias.org OpenAlias]

=== Interesting features ===

=== Controlled taxonomy ===

[[File:vero-taxonomy.jpg|200px|Vero]]

[[File:path-sharing.jpg|200px|Path]]

[https://www.vero.co/ Vero] is a new social network that categorises what you can share, which are then grouped into 'collections'. [https://path.com Path] does something similar.

==== Layers of conversation ====

[[File:medium-responses.png|400px|Medium]]

[https://medium.com Medium], the publishing platform / social network, allows you to see who in your network has replied to posts you have written. You can view all responses and conversations by clicking a button to show the ''whole'' network.

==== Collab button ====

[[File:ello-collab.png|400px|Ello]]

[https://ello.co/wtf/support/collab-and-hire Ello], the social network, has a 'Collab' button which users can turn on if they are up for collaborations with other users. There's also a 'Hire Me' button for freelancers and consultants, as detailed on [https://ello.co/wtf/support/collab-and-hire/ this page].

==== Decision-making ====

[[File:loomio-voting.png|400px|Loomio]]

[https://www.loomio.org/ Loomio] is a tool that allows for discussion but also for distributed decision-making. It came out of the creators' experiences with the Occupy movement.

==== Threaded conversations ====

[[File:slack-threaded-conversations.gif|400px|Slack]]

[https://slack.com Slack] is a workplace chat tool that allows for channels, but also threaded conversations within those channels. Further details available in [https://slackhq.com/threaded-messaging-comes-to-slack-417ffba054bd this post].

==== Voting up threads ====

[[File:product-hunt.png|400px|Product Hunt]]

[https://www.producthunt.com Product Hunt] allows people to demonstrate new products and services, which can then be 'upvoted'. A similar system, but in a support-focused environment, is provided by [https://stackoverflow.com Stack Overflow].

==== Bookmarking ====

[[File:pinboard.png|400px|Pinboard]]

[https://pinboard.in Pinboard] is a tool that allows people to quickly and easily bookmark sites for themselves and others. Tagging is available. [http://pinboard.in/popular Popular links] are aggregated into a feed which is publicly-accessible.

==== Trusted profiles/accounts ====

[[File:keybase.png|400px|Keybase]]

[https://keybase.io Keybase] is a security app for mobile phones and computers. It provides a trusted way to verify identity and ownership of accounts. More recently, they've added [https://keybase.io/blog/introducing-keybase-teams Slack-like social networking features] - but end-to-end encrypted. Keybase also has an [https://keybase.io/docs/extension interesting browser extension] that allows you to leave encrypted messages for people, even before they've joined the service!

==== Deep-work mode ====

[[File:stride.png|400px|Stride]]

Atlassian's new team chat app, [https://stride.com Stride] has many of the same features as other team chat apps. However, they have a 'deep work' mode which allows users to block out time where they are not disturbed and other people are told what they're working on.

==== Built-in voice/video chat ====

[[File:microsoft-teams.png|400px|Teams]]

[https://products.office.com/en-us/microsoft-teams/group-chat-software Microsoft Teams], like many team chat apps, has voice and video chat functionality built-in. This allows users to switch seamlessly from text chat to a voice/video discussion.

==== Shared to-do functionality ====

[[File:basecamp.png|400px|Basecamp]]

[https://basecamp.com Basecamp] is a project management application. It has a shared to-do feature, where people can check off something that has been assigned to them - and other people are notified that they have done so.

==== Filtering stream by language ====

[[File:mastodon-languages.png|400px|Mastodon languages]]

[https://joinmastodon.org Mastodon] is an open-source, decentralised, federated microblogging network. One of its features is to be able to filter the stream of 'toots' (it's equivalent of Twitter's 'tweets') in languages of your choice.

==== Connect with other educators ====

[[File:edmodo.png|400px|Edmodo]]

As part of its onboarding process for new users, [https://www.edmodo.com Edmodo] encourages those who self-identify as teachers to "join discussions and share resources with other educators!"

=== NGDLE ===

[[File:NGDLE.jpg|400px|NGDLE - Credit: University of Minnesota, Office of Information Technology]]

NGDLE stands for Next Generation Digital Learning Environment. A useful overview of the history of the concept since it was coined in 2015 is provided in [https://er.educause.edu/articles/2017/7/the-ngdle-we-are-the-architects this EDUCAUSE article]. In a post from 2016, [https://clintlalonde.net/2016/02/25/ngdle-and-open-edtech Clint Lalonde] sums up the NGDLE as "the idea that the next generation of learning tools isn’t the single monolithic LMS, but rather a series of applications connected together using different sets of emerging and established learning tool standards". The original report can be found [https://library.educause.edu/resources/2015/4/the-next-generation-digital-learning-environment-a-report-on-research here] with a [https://library.educause.edu/resources/2015/12/7-things-you-should-know-about-ngdle 7 Things You Should Know About NGDLE] brief also available.

MoodleNet/research/other

2021-05-31T12:45:20Z

Dougiamas: /* Inspiration */

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----

[[File:search-refine-curate.png|CC BY-ND Bryan Mathers|thumb]]

== Other similar systems ==

This page lists resource-centric social websites and services. There are at least three different types:
* '''Bookmarking''' - This kind of platform cater for people who want to be able to quickly and easily retrieve single resources in their entirety. Primarily focused on the individual, most allow for social sharing, profiles, and discovery.
* '''Note-taking''' - This kind of platform suits people doing research, as they are focused on highlighting, taking notes, or otherwise 'clipping' useful information to come back to later. They are either public or private by default, but either way can be shared with other users.
* '''Curation''' - This kind of platform allows users to create collections of resources for various purposes. These can then be shared with other users.

The MoodleNet project is focused on the third of these: '''curation'''.

-----

=== Bookmarking ===

* [https://www.basketapp.net Basket]
* [https://del.icio.us Del.icio.us]
* [https://www.elcurator.net/en elCurator]
* [http://pinboard.in Pinboard]
* [https://getpocket.com Pocket]
* [https://raindrop.io Raindrop.io]
* [https://refind.com Refind]
* [http://saved.io Saved.io]
* [https://github.com/shaarli/shaarli Shaarli]
* [http://sitebar.org SiteBar]
* [https://stumbleupon.com StumbleUpon] ''(note: the [https://en.wikipedia.org/wiki/StumbleUpon Wikipedia page] for StumbleUpon helpfully includes a diagram its information model for user profiles)''

-----

=== Note-taking ===

* [http://www.bibsonomy.org BibSonomy]
* [https://www.diigo.com Diigo]
* [https://evernote.com Evernote]
* [https://web.hypothes.is Hypothes.is]
* [https://www.lumioapp.com Lumio]
* [https://www.ravelry.com Ravelry]
* [https://thinkery.me Thinkery]

-----

=== Curation ===

==== Are.na ====
[[File:arena-screenshot.png|400px]]

[https://www.are.na Are.na] describes itself as "A visual platform that helps you think." It is pursuing an equity crowdfunding route, based on the message that 'social media is broken'.
* "Social networks depend on addicted users to sell more ads and harvest more data. If we want our attention back, we need a different model."
* "No ads, no likes, no distractions."
* "Helping you think."

==== Niice ====
[[File:niice.png|400px]]

[https://niice.co Niice] positions itself as a place for teams to gather, share, and discuss ideas. It integrates with Slack.
* "Speak visually"
* "Gather, share & discuss ideas with your team"
* "The Ultimate Canvas for Creative Discussion"

==== Pearltrees ====
[[File:pearltrees-screenshot.png|400px]]

[https://www.pearltrees.com Pearltrees] allows users to "save everything" from web pages to notes and photographs in a series of collections. It has a 'related connections' button to discover similar collections and people. Collections are visible to everyone unless users pay for the Premium, Education, or Enterprise versions.
* "Organize everything"
* "It's quick and it's free"
* "Collaborate, share, and discover your way"

==== Pinterest ====
[[File:pinterest-follow.jpg|400px]]

[https://www.pinterest.com Pinterest] is a collections-based platform with social features. They introduced a new dedicated 'follow' tab in March 2018 to follow people and collections.
* "Find and plan your next project"
* "Explore your interests to find the right ideas for you. As you discover new things to try, you’ll get personalized recommendations picked from the billions of ideas already on Pinterest"
* "Easily save and organize your ideas in any way you want. You can plan for family dinners, home makeovers, weekend getaways and anything else you want to try"

==== Scoop.it! ====
[[File:scoop-it-screenshot.jpg|400px]]

[https://www.scoop.it Scoop.it!] is a content curation tool, primarily aimed at individuals looking to develop their professional profile by becoming a 'thought leader' or brands who aim to improve their content marketing.
* "Research and publish the best content"
* "Publish your topic page with curated content in minutes. Distribute it automatically with your network to build your professional brand."

==== Snupps ====
[[File:snupps-screenshot.png|400px]]

[https://www.snupps.com Snupps] is a place to track the things you own and share photos of them with others who have similar interests. The exhortation is for users to 'Collect, Organize & Share!'
* "Explore collections and get inspired by what’s trending."
* "Keep track of what you own. Getting organized has never been so simple."
* "Be part of a community. Connect with people who share your passions."

==== Tagpacker ====
[[File:tagpacker-screenshot.png|400px]]

[https://tagpacker.com Tagpacker] describes itself as a replacement to bookmarking, allowing users to not only tag sites that they visit into collections, but curate those tags into groups. Their business model is "based on advertising and commissions".
* "Easily collect, organize, and share links you love"
* "Collect links you love / Organize things your way / Share your expertise"

==== Webjets ====
[[File:webjets-screenshot.png|400px]]

[http://webjets.io Webjets] is a card-based system for organising information.
* "The creative desktop for all things that matter"
* "Organize intuitively"
* "Collect / Organize / Synchronize / Search / Collaborate / Publish"

==== Wookmark ====
[[File:wookmark-screenshot.png|400px]]

[http://www.wookmark.com Wookmark] describes itself as a 'visual archive'. Images can be bookmarked and curated into collections which are then shared (and 'liked') by others. A Wookmark account costs $20 per year.
* "Get your profile, collect your favorite images, and share with others."
* "Wookmark is a tool to bookmark images, build mood boards and share visual inspiration."
* "Use groups to build mood boards, share privately with others, and keep things tidy."

==== To add ====

* [http://vi.sualize.us visualizeus]
* [https://weheartit.com We Heart It]

MoodleNet/inspiration

2021-05-31T12:45:01Z

Dougiamas: Dougiamas moved page MoodleNet/inspiration to MoodleNet/research/other

#REDIRECT [[MoodleNet/research/other]]

MoodleNet/research/other

2021-05-31T12:45:01Z

Dougiamas: Dougiamas moved page MoodleNet/inspiration to MoodleNet/research/other

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----

[[File:search-refine-curate.png|CC BY-ND Bryan Mathers|thumb]]

== Inspiration ==

This page lists resource-centric social websites and services. There are at least three different types:
* '''Bookmarking''' - This kind of platform cater for people who want to be able to quickly and easily retrieve single resources in their entirety. Primarily focused on the individual, most allow for social sharing, profiles, and discovery.
* '''Note-taking''' - This kind of platform suits people doing research, as they are focused on highlighting, taking notes, or otherwise 'clipping' useful information to come back to later. They are either public or private by default, but either way can be shared with other users.
* '''Curation''' - This kind of platform allows users to create collections of resources for various purposes. These can then be shared with other users.

The MoodleNet project is focused on the third of these: '''curation'''.

-----

=== Bookmarking ===

* [https://www.basketapp.net Basket]
* [https://del.icio.us Del.icio.us]
* [https://www.elcurator.net/en elCurator]
* [http://pinboard.in Pinboard]
* [https://getpocket.com Pocket]
* [https://raindrop.io Raindrop.io]
* [https://refind.com Refind]
* [http://saved.io Saved.io]
* [https://github.com/shaarli/shaarli Shaarli]
* [http://sitebar.org SiteBar]
* [https://stumbleupon.com StumbleUpon] ''(note: the [https://en.wikipedia.org/wiki/StumbleUpon Wikipedia page] for StumbleUpon helpfully includes a diagram its information model for user profiles)''

-----

=== Note-taking ===

* [http://www.bibsonomy.org BibSonomy]
* [https://www.diigo.com Diigo]
* [https://evernote.com Evernote]
* [https://web.hypothes.is Hypothes.is]
* [https://www.lumioapp.com Lumio]
* [https://www.ravelry.com Ravelry]
* [https://thinkery.me Thinkery]

-----

=== Curation ===

==== Are.na ====
[[File:arena-screenshot.png|400px]]

[https://www.are.na Are.na] describes itself as "A visual platform that helps you think." It is pursuing an equity crowdfunding route, based on the message that 'social media is broken'.
* "Social networks depend on addicted users to sell more ads and harvest more data. If we want our attention back, we need a different model."
* "No ads, no likes, no distractions."
* "Helping you think."

==== Niice ====
[[File:niice.png|400px]]

[https://niice.co Niice] positions itself as a place for teams to gather, share, and discuss ideas. It integrates with Slack.
* "Speak visually"
* "Gather, share & discuss ideas with your team"
* "The Ultimate Canvas for Creative Discussion"

==== Pearltrees ====
[[File:pearltrees-screenshot.png|400px]]

[https://www.pearltrees.com Pearltrees] allows users to "save everything" from web pages to notes and photographs in a series of collections. It has a 'related connections' button to discover similar collections and people. Collections are visible to everyone unless users pay for the Premium, Education, or Enterprise versions.
* "Organize everything"
* "It's quick and it's free"
* "Collaborate, share, and discover your way"

==== Pinterest ====
[[File:pinterest-follow.jpg|400px]]

[https://www.pinterest.com Pinterest] is a collections-based platform with social features. They introduced a new dedicated 'follow' tab in March 2018 to follow people and collections.
* "Find and plan your next project"
* "Explore your interests to find the right ideas for you. As you discover new things to try, you’ll get personalized recommendations picked from the billions of ideas already on Pinterest"
* "Easily save and organize your ideas in any way you want. You can plan for family dinners, home makeovers, weekend getaways and anything else you want to try"

==== Scoop.it! ====
[[File:scoop-it-screenshot.jpg|400px]]

[https://www.scoop.it Scoop.it!] is a content curation tool, primarily aimed at individuals looking to develop their professional profile by becoming a 'thought leader' or brands who aim to improve their content marketing.
* "Research and publish the best content"
* "Publish your topic page with curated content in minutes. Distribute it automatically with your network to build your professional brand."

==== Snupps ====
[[File:snupps-screenshot.png|400px]]

[https://www.snupps.com Snupps] is a place to track the things you own and share photos of them with others who have similar interests. The exhortation is for users to 'Collect, Organize & Share!'
* "Explore collections and get inspired by what’s trending."
* "Keep track of what you own. Getting organized has never been so simple."
* "Be part of a community. Connect with people who share your passions."

==== Tagpacker ====
[[File:tagpacker-screenshot.png|400px]]

[https://tagpacker.com Tagpacker] describes itself as a replacement to bookmarking, allowing users to not only tag sites that they visit into collections, but curate those tags into groups. Their business model is "based on advertising and commissions".
* "Easily collect, organize, and share links you love"
* "Collect links you love / Organize things your way / Share your expertise"

==== Webjets ====
[[File:webjets-screenshot.png|400px]]

[http://webjets.io Webjets] is a card-based system for organising information.
* "The creative desktop for all things that matter"
* "Organize intuitively"
* "Collect / Organize / Synchronize / Search / Collaborate / Publish"

==== Wookmark ====
[[File:wookmark-screenshot.png|400px]]

[http://www.wookmark.com Wookmark] describes itself as a 'visual archive'. Images can be bookmarked and curated into collections which are then shared (and 'liked') by others. A Wookmark account costs $20 per year.
* "Get your profile, collect your favorite images, and share with others."
* "Wookmark is a tool to bookmark images, build mood boards and share visual inspiration."
* "Use groups to build mood boards, share privately with others, and keep things tidy."

==== To add ====

* [http://vi.sualize.us visualizeus]
* [https://weheartit.com We Heart It]

MoodleNet

2021-05-31T11:06:26Z

Dougiamas: /* Archive */

[[File:Moodlenet-logo.png|400px]]

== What is MoodleNet? ==

MoodleNet is our new social network to share and curate open educational resources with educators world-wide. It is integrated closely with Moodle LMS and Moodle Workplace to make resources easy to find and use, but can be useful even if you don't use Moodle LMS. MoodleNet is also intended as a way to build your profile as an educator.

Importantly, MoodleNet is designed to be a federated, flexible Open Education Technology that is not controlled by a single entity, or subject to a single point of failure.

== Current status ==
''Last updated: 31 May 2021''

MoodleNet 1.x was abandoned by the team in 2021 because it was heading down the wrong path. The project was recently rebooted (January 2021) with a new team, new architecture and a simpler new design.

== Roadmap ==

* '''15 August 2021''' - MVP for wider community testing and feedback
* '''31 August 2021''' - Beta release , feature complete for 2.0 release.
* '''15 September 2021''' - 2.0 release!

== Important links ==

* [https://gitlab.com/moodlenet Code repository]
* [https://moodle.org/mod/forum/view.php?id=8726 MoodleNet news and discussion]

== Archive ==
* [https://docs.moodle.org/dev/MoodleNet/inspiration Inspiration]
* [https://docs.moodle.org/dev/MoodleNet/research Other research]
* [https://docs.moodle.org/dev/MoodleNet/Copyright_Directive European Copyright Directive]
* [https://docs.moodle.org/dev/MoodleNet/DPIA Data Protection Impact Assessment]

[[es:MoodleNet]]

MoodleNet-research

2021-05-31T11:06:09Z

Dougiamas: Dougiamas moved page MoodleNet-research to MoodleNet/research

#REDIRECT [[MoodleNet/research]]

MoodleNet/research

2021-05-31T11:06:08Z

Dougiamas: Dougiamas moved page MoodleNet-research to MoodleNet/research

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----

=== DMCA ===

From [https://en.wikipedia.org/wiki/Digital_Millennium_Copyright_Act Wikipedia]:

<blockquote>The Digital Millennium Copyright Act (DMCA) is a 1998 United States copyright law that implements two 1996 treaties of the World Intellectual Property Organization (WIPO). It criminalizes production and dissemination of technology, devices, or services intended to circumvent measures that control access to copyrighted works (commonly known as digital rights management or DRM). It also criminalizes the act of circumventing an access control, whether or not there is actual infringement of copyright itself. In addition, the DMCA heightens the penalties for copyright infringement on the Internet.</blockquote>

...and:

<blockquote>DMCA Title II, the Online Copyright Infringement Liability Limitation Act ("OCILLA"), creates a safe harbor for online service providers (OSPs, including ISPs) against copyright infringement liability, provided they meet specific requirements. OSPs must adhere to and qualify for certain prescribed safe harbor guidelines and promptly block access to alleged infringing material (or remove such material from their systems) when they receive notification of an infringement claim from a copyright holder or the copyright holder's agent. OCILLA also includes a counternotification provision that offers OSPs a safe harbor from liability to their users when users claim that the material in question is not, in fact, infringing. OCILLA also facilitates issuing of subpoenas against OSPs to provide their users' identity.</blockquote>

=== Social networks integrating 'currency' ===

* [https://memo.cash/ Memo]
* [https://www.minds.com/ Minds]
* [https://steemit.com/ Steemit]
* [https://tri.cash/ Trillion]
* [http://www.yy.com/ YY.com] ''(Chinese)''

=== DPIA ===

A [https://ico.org.uk/for-organisations/guide-to-the-general-data-protection-regulation-gdpr/data-protection-impact-assessments-dpias/what-is-a-dpia/ Data Protection Impact Assessment] "is a process designed to help you systematically analyse, identify and minimise the data protection risks of a project or plan".

We need to decide whether MoodleNet meets any of the three criteria which would necessitate a DPIA:

# Systematic and extensive profiling with significant effects
# Large scale use of sensitive data
# Public monitoring

It may be a good idea to create a DPIA in any case, as part of our GDPR compliance.

=== Translation platforms ===

* [https://www.applanga.com/ Applanga]
* [https://crowdin.com Crowdin]
* [https://www.memoq.com/en/memoq-translator-free memoq]
* [https://poeditor.com/ POEditor]
* [http://pootle.translatehouse.org/index.html Pootle]
* [https://www.textunited.com/ TextUnited]
* [https://www.transifex.com/ Transifex]
* [http://zanata.org/ Zanata]

=== Accessibility ===

* [https://accessibility.blog.gov.uk/ Gov.uk accessibility]
* [https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/ Marco's accessibility blog]
* [https://www.usability.gov/what-and-why/accessibility.html Usability.gov]
* [https://www.w3.org/wiki/Accessibility_basics W3C Accessibility basics]
* [https://www.w3.org/WAI/standards-guidelines/wcag/glance/ Web Content Accessibility Guidelines (WCAG) 2.1]
* [https://wordpress.org/about/accessibility/ WordPress accessibility]

=== Policy docs from other federated systems ===

[https://the-federation.info/ Federated systems] tend to have a website explaining the service, then link to specific instances. As the terms of service, privacy policy, etc. may differ greatly from instance to instance, the list below takes a popular example of the service.

* [https://diasporafoundation.org/ Diaspora]
** [https://diasp.org Diasp.org]
*** [https://diasp.org/terms Terms of service and privacy policy]
* [https://friendi.ca/ Friendica]
** [https://libranet.de/ Libranet.de]
*** [https://libranet.de/friendica Terms of use, data protection and data security] (in German)
* [https://gnu.io/social/ GNU social]
** [https://status.pirati.ca Piratica]
*** [https://status.pirati.ca/doc/privacy Privacy policy]
* [https://project.hubzilla.org/ Hubzilla]
** [https://start.hubzilla.org Start.hubzilla.org]
*** [https://start.hubzilla.org/help/en-gb/TermsOfService Terms of service]
* [https://joinmastodon.org/ Mastodon]
** [https://mastodon.social/about Mastodon.social]
*** [https://mastodon.social/about/more Code of conduct]
*** [https://mastodon.social/terms Privacy policy]
* [https://joinmisskey.github.io/en/ Misskey]
** [https://tri.cash/ Trillion]
*** [https://tri.cash/news/wp/terms/ Terms of service] ''(note: also uses e-currency)''
* [https://zotlabs.com/osada/ Osada]
** [https://osada.gibberfish.org Osada.gibberfish.org]
*** [https://osada.gibberfish.org/help/en-gb/TermsOfService Terms of service] ''(essentially the same as Hubzilla)''
* [https://joinpeertube.org/en/ PeerTube]
** [https://pe.ertu.be/ Pe.ertu.be]
*** [https://pe.ertu.be/about/instance About and terms]
* [https://pixelfed.org/ PixelFed]
** [https://pixelfed.social/ Pixelfed.social]
*** [https://pixelfed.social/site/terms Terms of use]
*** [https://pixelfed.social/site/privacy Privacy policy]
* [https://pleroma.social Pleroma]
** [https://pleroma.site Pleroma.site]
*** [https://info.pleroma.site/tos.html Terms of service]
*** [https://info.pleroma.site/ Site info] (include warrant canary, hardware specs, etc.)
*** [https://info.pleroma.site/federation.html Federation policy]
*** [https://info.pleroma.site/privacy.html Privacy policy]
* [https://plume-org.github.io/Plume/ Plume]
** [https://fediverse.blog Fediverse.blog]
*** [https://fediverse.blog/about About]

=== Authentication systems ===

* [https://en.wikipedia.org/wiki/Mozilla_Persona Mozilla Persona] (decommissioned, but useful info in project - including [https://web.archive.org/web/20140713180852/http://lloyd.io/how-browserid-works this post])
* [https://en.wikipedia.org/wiki/OAuth OAuth]
* [https://en.wikipedia.org/wiki/OpenID OpenID]
* [https://en.wikipedia.org/wiki/Security_Assertion_Markup_Language SAML]
* [https://en.wikipedia.org/wiki/WebID WebID]

=== Interesting projects, products, and standards ===

* [https://activitypub.rocks/ ActivityPub] - a "decentralized social networking protocol based upon the ActivityStreams 2.0 data format. It provides a client to server API for creating, updating and deleting content, as well as a federated server to server API for delivering notifications and content". Useful comments and caveats in [https://news.ycombinator.com/item?id=14417315 this Hacker News thread]. The [https://www.w3.org/TR/activitypub/ spec] (latest version: Nov 2017) is well-written.
* [https://beakerbrowser.com Beaker] - a peer-to-peer browser with tools to create and host websites.
* [https://www.bigchaindb.com BigchainDB] - a decentralised open-source database with blockchain data structure to enhance scalability, write and read speed, and data extraction capability.
* [https://blockstack.org Blockstack] - a new network for decentralised applications, including an alternate DNS and public-key infrastructure.
* [https://en.wikipedia.org/wiki/Cooperative_storage_cloud Co-operative Storage Cloud] - a "decentralized model of networked online storage where data is stored on multiple computers (nodes), hosted by the participants cooperating in the cloud".
* [https://cryptosphere.io Cryptosphere] - an "open-source P2P web application platform for decentralized, privacy-preserving software which keeps users in control of their own content". Defunct?
* [https://datproject.org Dat] - a "data distribution tool with a version control feature for tracking changes and publishing datasets". Funded by major donors such as the Knight Foundation and Alfred P. Sloan Foundation.
* [https://diasporafoundation.org Diaspora] - a "nonprofit, user-owned, distributed social network" consisting of "independently owned nodes (called pods) which interoperate to form the network".
* [https://edmodo.com Edmodo] - the app "is probably the closest thing to MoodleNet that exists" according to Martin Dougiamas.
* [https://ethereum.org Ethereum] - a "decentralized platform that runs smart contracts: applications that run exactly as programmed without any possibility of downtime, censorship, fraud or third party interference".
* [https://filecoin.io Filecoin] - an "open-source, public, cryptocurrency and digital payment system intended to be a blockchain-based digital storage and data retrieval method" building on top of IPFS.
* [https://freenetproject.org Freenet] - a somewhat notorious peer-to-peer platform using the 'dark web' for censorship-resistant communication. 'Freesites' contains only static content, meaning it cannot provide content that requires a database or server-side scripts.
* [http://friendi.ca Friendica] - "open source software for a distributed social network" focusing on "effective privacy settings and easy installation of personal servers". Also allows other social networks and blogs to be integrated.
* [https://gnunet.org GNUnet] - an "alternative ne twork stack for building secure, decentralized and privacy-preserving distributed applications". The framework features "link encryption, peer discovery, resource allocation, communication over many transports (such as TCP, UDP, HTTP, HTTPS, WLAN and Bluetooth) and various basic peer-to-peer algorithms for routing, multicast and network size estimation".
* [https://gnu.io/social GNU social] - "social communication software for both public and private communications" - "widely supported and has a large userbase".
* [https://project.hubzilla.org Hubzilla] - a "powerful platform for creating interconnected websites featuring a decentralized identity, communications, and permissions framework built using common webserver technology".
* [https://geti2p.net/en I2P] - a network that provides "strong privacy protections for communication over the Internet". Used for serverless email, anonymous websites, gateways to/from the public internet, blogging, forums, realtime chat, filesharing, decentralised file storage, and more.
* [https://ipdb.io IPDB] - stands for 'InterPlanetary DataBase', a "blockchain database network for the decentralized stack". It's ready to use, with strong governance (including many large non-profits).
* [https://ipfs.io IPFS] - stands for 'InterPlanetary File System', a protocol "designed to create a permanent and decentralized method of storing and sharing files". Content-addressable, peer-to-peer, distributed file system. Provides a resilient way to serve files, removing duplication and centralisation.
* [https://github.com/oduwsdl/ipwb IPWB] - stands for 'InterPlanetary WayBack' and "facilitates permanence and collaboration in web archives".
* [https://www.gitbook.com/book/jedisct1/libsodium/details Libsodium] - the Sodium crypto library is "a modern, easy-to-use software library for encryption, decryption, signatures, password hashing and more".
* [http://www.imsglobal.org/activity/learning-tools-interoperability LTI] - stands for Learning Tools Interoperability, a standard developed by IMS Global Learning Consortium. Main use case is to enable web apps, tools or content to connect seamlessly and securely with digital learning environments.
* [http://www.imsglobal.org/activity/learning-tools-interoperability LTI Advantage] - a new package of extensions to the Learning Tools Interoperability standard that currently includes: Assignment and Grade Services, Deep Linking, and Names and Role Provisioning Service. Allows for better two-way sharing of data between digital learning environments and other apps/services.
* [https://maidsafe.net Maidsafe] - bills itself as "the world's first autonomous data network". Reliant on cryptocurrency, but not blockchain, for network services.
* [https://joinmastodon.org Mastodon] - a federated social network similar to Twitter, "but administrated as a decentralized federation of independently operated servers running open source software". Users join a specific instance, and their updates can then be federated to other instances. Mastodon is built on OStatus, meaning that federated Mastodon instances form just one part of a wider 'Fediverse'.
* [https://matrix.org Matrix] - an "open protocol for real-time communication". Aims to be like SMTP for real-time communication between different service providers.
* [http://www.mediachain.io Mediachain] - a "blockchain data solution for connecting applications to media and information about it". Best-known as an attribution engine for content creators.
* [https://namecoin.org Namecoin] - an "experimental open-source technology which improves decentralization, security, censorship resistance, privacy, and speed of certain components of the Internet infrastructure such as DNS and identities".
* [https://www.openbazaar.org OpenBazaar] - "an open source project developing a protocol for e-commerce transactions in a fully decentralized marketplace".
* [https://github.com/blockai-unofficial/openpublish Open Publish] - "a publishing protocol for registering media as a digital asset on the Bitcoin blockchain".
* [http://www.osiris-sps.org Osiris] - a "freeware program used to create web portals distributed via peer-to-peer networking (P2P) and autonomous from centralized servers". Mostly defunct, although the [https://en.wikipedia.org/wiki/Osiris_(software) Wikipedia page] outlines some interesting features around reputation and 'anarchist' vs 'monarchist' community structures.
* [https://www.producthunt.com/topics/artificial-intelligence?subtopic=88 Product Hunt | Artificial Intelligence | APIs] - a continually-updated list of products/services using A.I. APIs. Useful for seeing what's out there to build upon.
* [https://sia.tech Sia] - an example of co-operative cloud storage, build on blockchain technology. Depends on cryptocurrency called 'Siacoin'.
* [https://storj.io Storj] - another example of co-operative cloud storage. End-to-end encrypted, blockchain-based.
* [https://skipflag.com SkipFlag] - "a knowledge base that builds itself" using your "existing conversations, support tickets, and other communication... to autonomously answer questions".
* [https://socialhome.network Socialhome] - "allows you to build a rich profile that federates across the federated social web".
* [https://steemit.com Steem] - a "social news service which runs a blogging and social networking website on top of a blockchain database, known as Steem. The service produces STEEM and Steem Dollars which are tradeable tokens users obtain for posting, discovering, and commenting on interesting content."
* [https://github.com/ethersphere/swarm Swarm] - a "distributed storage platform and content distribution service". Users don't notice much difference to regular websites, except that "uploads are not to a specific server" meaning that Swarm is "DDOS-resistant, zero-downtime, fault-tolerant and censorship-resistant as well as self-sustaining due to a built-in incentive system". Free and open source.
* [http://www.trsst.com trsst] - "looks and feels like twitter but encrypted and anonymized and decentralized and only you hold the keys".
* [http://twister.net.co Twister] - a "fully decentralized P2P microblogging platform leveraging from the free software implementations of Bitcoin and BitTorrent protocols".
* [https://unhosted.org Unhosted] - "also known as "serverless", "client-side", or "static" web apps, unhosted web apps do not send your user data to their server. Either you connect your own server at runtime, or your data stays within the browser."
* [https://en.wikipedia.org/wiki/WebRTC WebRTC] - stands for Web Real Time Communication, and is "a collection of communications protocols and application programming interfaces that enable real-time communication over peer-to-peer connections". Used for "video conferencing, file transfer, chat, or desktop sharing without the need of either internal or external plugins". Supported in all major desktop and mobile browsers as of iOS 11. Developed by W3C members.
* [https://zeronet.io ZeroNet] - a "decentralized Internet-like network of peer-to-peer users". Fully open source. Uses bitcoin cryptography to identify sites (instead of IP addresses) and bittorrent technology to propagate changes within the network. Sites are accessed via a web browser, but served from localhost.
* [https://en.m.wikipedia.org/wiki/Zooko's_triangle Zooko's triangle] - interesting less for the theory, more for the technologies / approaches which refute the conjecture. Notably: [https://blockstack.org Blockstack], [https://gnunet.org GNUnet], and [http://openalias.org OpenAlias]

=== Interesting features ===

=== Controlled taxonomy ===

[[File:vero-taxonomy.jpg|200px|Vero]]

[[File:path-sharing.jpg|200px|Path]]

[https://www.vero.co/ Vero] is a new social network that categorises what you can share, which are then grouped into 'collections'. [https://path.com Path] does something similar.

==== Layers of conversation ====

[[File:medium-responses.png|400px|Medium]]

[https://medium.com Medium], the publishing platform / social network, allows you to see who in your network has replied to posts you have written. You can view all responses and conversations by clicking a button to show the ''whole'' network.

==== Collab button ====

[[File:ello-collab.png|400px|Ello]]

[https://ello.co/wtf/support/collab-and-hire Ello], the social network, has a 'Collab' button which users can turn on if they are up for collaborations with other users. There's also a 'Hire Me' button for freelancers and consultants, as detailed on [https://ello.co/wtf/support/collab-and-hire/ this page].

==== Decision-making ====

[[File:loomio-voting.png|400px|Loomio]]

[https://www.loomio.org/ Loomio] is a tool that allows for discussion but also for distributed decision-making. It came out of the creators' experiences with the Occupy movement.

==== Threaded conversations ====

[[File:slack-threaded-conversations.gif|400px|Slack]]

[https://slack.com Slack] is a workplace chat tool that allows for channels, but also threaded conversations within those channels. Further details available in [https://slackhq.com/threaded-messaging-comes-to-slack-417ffba054bd this post].

==== Voting up threads ====

[[File:product-hunt.png|400px|Product Hunt]]

[https://www.producthunt.com Product Hunt] allows people to demonstrate new products and services, which can then be 'upvoted'. A similar system, but in a support-focused environment, is provided by [https://stackoverflow.com Stack Overflow].

==== Bookmarking ====

[[File:pinboard.png|400px|Pinboard]]

[https://pinboard.in Pinboard] is a tool that allows people to quickly and easily bookmark sites for themselves and others. Tagging is available. [http://pinboard.in/popular Popular links] are aggregated into a feed which is publicly-accessible.

==== Trusted profiles/accounts ====

[[File:keybase.png|400px|Keybase]]

[https://keybase.io Keybase] is a security app for mobile phones and computers. It provides a trusted way to verify identity and ownership of accounts. More recently, they've added [https://keybase.io/blog/introducing-keybase-teams Slack-like social networking features] - but end-to-end encrypted. Keybase also has an [https://keybase.io/docs/extension interesting browser extension] that allows you to leave encrypted messages for people, even before they've joined the service!

==== Deep-work mode ====

[[File:stride.png|400px|Stride]]

Atlassian's new team chat app, [https://stride.com Stride] has many of the same features as other team chat apps. However, they have a 'deep work' mode which allows users to block out time where they are not disturbed and other people are told what they're working on.

==== Built-in voice/video chat ====

[[File:microsoft-teams.png|400px|Teams]]

[https://products.office.com/en-us/microsoft-teams/group-chat-software Microsoft Teams], like many team chat apps, has voice and video chat functionality built-in. This allows users to switch seamlessly from text chat to a voice/video discussion.

==== Shared to-do functionality ====

[[File:basecamp.png|400px|Basecamp]]

[https://basecamp.com Basecamp] is a project management application. It has a shared to-do feature, where people can check off something that has been assigned to them - and other people are notified that they have done so.

==== Filtering stream by language ====

[[File:mastodon-languages.png|400px|Mastodon languages]]

[https://joinmastodon.org Mastodon] is an open-source, decentralised, federated microblogging network. One of its features is to be able to filter the stream of 'toots' (it's equivalent of Twitter's 'tweets') in languages of your choice.

==== Connect with other educators ====

[[File:edmodo.png|400px|Edmodo]]

As part of its onboarding process for new users, [https://www.edmodo.com Edmodo] encourages those who self-identify as teachers to "join discussions and share resources with other educators!"

=== NGDLE ===

[[File:NGDLE.jpg|400px|NGDLE - Credit: University of Minnesota, Office of Information Technology]]

NGDLE stands for Next Generation Digital Learning Environment. A useful overview of the history of the concept since it was coined in 2015 is provided in [https://er.educause.edu/articles/2017/7/the-ngdle-we-are-the-architects this EDUCAUSE article]. In a post from 2016, [https://clintlalonde.net/2016/02/25/ngdle-and-open-edtech Clint Lalonde] sums up the NGDLE as "the idea that the next generation of learning tools isn’t the single monolithic LMS, but rather a series of applications connected together using different sets of emerging and established learning tool standards". The original report can be found [https://library.educause.edu/resources/2015/4/the-next-generation-digital-learning-environment-a-report-on-research here] with a [https://library.educause.edu/resources/2015/12/7-things-you-should-know-about-ngdle 7 Things You Should Know About NGDLE] brief also available.

MoodleNet-consultancy

2021-05-31T11:04:04Z

Dougiamas: Dougiamas moved page MoodleNet-consultancy to 1.0/MoodleNet-consultancy

#REDIRECT [[1.0/MoodleNet-consultancy]]

MoodleNet/Decision Log

2021-05-31T11:03:17Z

Dougiamas: Dougiamas moved page MoodleNet/Decision Log to MoodleNet/1.0/Decision Log

#REDIRECT [[MoodleNet/1.0/Decision Log]]

MoodleNet/1.0/Decision Log

2021-05-31T11:03:17Z

Dougiamas: Dougiamas moved page MoodleNet/Decision Log to MoodleNet/1.0/Decision Log

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----

This page serves as a log of decisions made during the development of the MoodleNet project, along with a brief justification.

* 7 Jan 19 - We're going to allow users to reset their password via their profile for the 100-user test. The ability to use a 'magic link' to their email or change their password directly in their profile may come later.
* 7 Jan 19 - For the testing instance, we're planning to use home.moodle.net or moodlers.moodle.net
* 7 Jan 19 - We're only going to run one instance for the 100-user test, and then test federation between our team ('dogfooding') instance and the HQ instance.
* 7 Jan 19 - We've pushed back the initial 100-user test to begin on 28th January, for various internal reasons.
* 11 Dec 18 - Post-MVP, we're going to investigate using IPFS (explained [https://achainofblocks.com/2018/10/05/ipfs-interplanetary-file-system-simply-explained/ here]) for storing MoodleNet resources across the federated network. We need a solution that means that collections of resources persist even if an instance is shut down.
* 11 Dec 18 - After discussion with Martin Dougiamas, MoodleNet instances will have a 'switch' that turns federation on and off.
* 4 Dec 18 - We're going to split the sign-up process [https://gitlab.com/moodlenet/clients/react/issues/39 into two parts]
* 20 Nov 18 - After consultation with the Moodle Core team, we've decided to keep registrations via moodle.net as-is. This means that we'll
** a page at moodle.net informing users about the new platform
** a link from that page to hub.moodle.org (to access legacy content)
** a link to a subdomain (TBD) running the new MoodleNet 'app'
* 15 Nov 18 - Keep moodle.net functionality going but redirected to hub.moodle.org. New MoodleNet plugin will replace that functionality (i.e. deprecate moodle.net)
* 15 Nov 18 - No mandatory tags on collections or resources, but MoodleBot will remind you if you haven't got language, grade, and subject.
* 21 Sep 18 - We've decided that integration with [https://openbadges.org Open Badges] are going to be out of scope for MVP in January. This is because of the extra work we'd need to do to implement them, and also because Moodle Core should have compatibility with v2.0 of the OB spec by then. We're fully intending badges to be a part of MoodleNet post-MVP.
* 20 Sep 18 - We [https://gitlab.com/moodlenet/clients/react/issues/17 reviewed some of the assumptions] we've made during the project so far, and documented some decisions around them
* 17 Sep 18 - We're dropping the idea of providing [https://blog.moodle.net/2018/ux-milestone-2-screencast-2/ 'alt' accounts] as it's a solution looking for a problem, for the time being.
* 22 Aug 18 - While whole collections may be imported from MoodleNet into Moodle, when submitting a resource ''from'' Moodle ''to'' MoodleNet, we'll do this one at a time.
* 6 Aug 18 - [https://docs.moodle.org/dev/MoodleNet/tech/stack Elixir will be the main programming language] used by MoodleNet's back-end
* 13th June 18 - Initial integration will be with MoodleCloud, as that makes it easier in terms of versioning and tightly controlling data flows.
* 6th June 18 - We're going to use GitLab now that Microsoft has acquired GitHub.
* 23rd Apr 18 - Martin has decided we are going with the name 'MoodleNet'.
* Feb 18 - the MVP should be focused on resource curation so that we're not just dropping people into a social network that doesn't have a particular purpose
* 9th Jan 18 - Renaming 'News feed' component of project to 'Activity feed' to more accurately describe what we're developing.
* 3rd Jan 18 - Social sign-in shouldn't be the ''only'' way to log in to Project MoodleNet ([http://dougbelshaw.com/blog/2018/01/03/identity-on-the-web/ rationale])

MoodleNet/DPIA

2021-05-31T11:02:04Z

Dougiamas: Dougiamas moved page MoodleNet/DPIA to MoodleNet/1.0/DPIA

#REDIRECT [[MoodleNet/1.0/DPIA]]

MoodleNet/1.0/DPIA

2021-05-31T11:02:03Z

Dougiamas: Dougiamas moved page MoodleNet/DPIA to MoodleNet/1.0/DPIA

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----

== Data Protection Impact Assessment ==

'''Current version:''' 0.1 (June 2019)

According to the UK's [https://ico.org.uk/for-organisations/guide-to-data-protection/guide-to-the-general-data-protection-regulation-gdpr/accountability-and-governance/data-protection-impact-assessments/ Information Commissioner's Office] (ICO) a Data Protection Impact Assessment (DPIA) is "a process to help you identify and minimise the data protection risks of a project". Under the terms of the EU's [https://en.wikipedia.org/wiki/General_Data_Protection_Regulation General Data Protection Regulation] (GDPR) is mandatory to create a DPIA "for processing that is likely to result in a high risk to individuals". However, it is also "good practice to do a DPIA for any other major project which requires the processing of personal data".

As a result, this DPIA for MoodleNet aims to:

* describe the nature, scope, context and purposes of the processing
* assess necessity, proportionality and compliance measures
* identify and assess risks to individuals
* identify any additional measures to mitigate those risks

== Identify the need for a DPIA ==

MoodleNet is a social network for educators. They can engage in discussions and share resources with one another. What makes MoodleNet different is that it is a federated network, so individuals and organisations can install and set up their own ‘instance’.

Moodle HQ (Moodle Pty Ltd) will run a special instance of MoodleNet that indexes some of the data shared from the federated instances who wish to participate. There is also a class of information that is ‘private’ and isn’t accessed by Moodle HQ. The instance of MoodleNet run by Moodle HQ (the “Mothership”) will store data such as metadata about groups, resources, and public user profiles from third-party instances. This will be covered under a ‘ Terms of Service’ agreement between Moodle HQ and the entity operating the instance.
Moodle HQ will also run one or more of its own instances, each of which will store personal data related to its users (such as contact details and discussions). This will be covered under a user agreement (Code of Conduct and Privacy Policy).

We believe that a DPIA is necessary because we are processing personal data at scale, including processing sensitive personal data. Moodle is committed to privacy-enhancing technology, which give its users choices about their personal data, and process that data only insofar as is necessary and proportionate for the services offered.

Further details may be found at: https://moodle.com/moodlenet

== Describe the processing ==

=== Nature ===
MoodleNet is first and foremost a software application which allows for the creation of a federated network, as shown in the diagram below. An organisation can install a MoodleNet instance to allow their users to share resources and ideas with one another, but also potentially with the users of any other MoodleNet instance. A MoodleNet instance consists of a 'database', a ‘backend’ and ‘frontend’ which are typically deployed via Docker containers on servers hosted either on-site or in a data centre.

The main uses of MoodleNet are:
* Joining communities of users
* Curating educational resources into ‘collections’
* Engaging in discussions

Each instance of MoodleNet can be run independently, and can (optionally) connect to a service run by Moodle HQ ( which we refer to as the ‘Mothership’). This will be separate from any regular MoodleNet instances run by Moodle HQ to which end users may sign up.

The administrator of a MoodleNet instance may request a Mothership API key, subject to agreeing to Terms of Service. This does two things:

# Allows the HQ Mothership to receive public metadata from the instance (relating to communities, collections, resources, and user profiles) and store that in a search index
# Provides users of the instance the ability to search across the federated network, meaning they can discover communities, collections, users, and content from other instances.

The HQ Mothership stores a copy of the metadata from the federated instances which are connected via an API key. Search results provided to connected instances link directly to content on the originating federated instance.

Although a lot of the richness of search will come through tagging, we will also index public fields from user profiles. This is to surface the most relevant information to users.

[[File:MoodleNet_architecture_data_flows.png]]

The HQ Mothership indexes the public data provided by connected instances, making it quickly and easily searchable (using Algolia, a third party search engine service). This data includes information such as username, profile images, location, comments, and communities joined.

Even instances that are ''not'' connected to the HQ Mothership are nevertheless connected to one another thanks to the ActivityPub protocol. In fact, whether connected to the HQ Mothership or not, because of the way ActivityPub works, they are potentially connected to ''any'' other ActivityPub-enabled server (including servers running software other than MoodleNet).

[[File:ActivityPub-tutorial-image.png]]

MoodleNet will carefully differentiate between structured personal data fields and data that the individual contributes as part of their participation within communities. For example, users will be able to delete their account at any time. However, deleting their account will not delete any contributions they may have made to collections of resources.

To explain further, there are two main types of contributions to MoodleNet: adding resources, and adding comments. While comments are text-based and always attributed to a user, adding resources can happen in one of two ways:

# '''URL''' - the user points to a resource which is available on the open web. The metadata from the site hosting the resource is automatically pulled in by MoodleNet.
# '''Upload''' - the user uploads a resource and adds it to a collection using an open license. This is a similar process to uploading resources to Wikimedia Commons, the process for which will inform our work and which is detailed here: https://commons.wikimedia.org/wiki/Commons:Project_scope/Summary

The highest risk for users could arise if they are unaware that comments they add in discussion areas on one instance of MoodleNet are potentially viewable and storable by any application or server running the ActivityPub protocol (e.g. Mastodon, Pleroma, Osada). We will take steps to make sure this is clear to users, both through the user agreement but also through the visual and textual elements in the User Interface of the application.

Our proposed moderation flow for content or metadata on MoodleNet is outlined in the diagram below:

[[File:MoodleNet_moderation_diagram.png]]

If a user ‘flags’ a resource, collection, comment, or profile, this is reviewed by the moderators of the relevant community. They may choose to take action, which could include removing content and/or warning a user. Ultimately, moderators may choose to ban a user from a community.

Should a community not be moderated effectively, users have the option of flagging that to the instance administrator. They can review the complaint and choose to warn the moderators, warn or ban the offending users from the instance, directly remove content, or close the community.

If an entire instance is problematic, users of other instances may complain (preferably through their instance admin) to Moodle HQ, who runs the ‘HQ Mothership’. Moodle HQ will review the complaint and, if appropriate, issue a warning to the admin of the problematic instance. Should the problem persist, or if the initial complaint was serious enough, Moodle HQ would revoke the instance’s API key and delete its copies of data from that instance from the HQ Mothership (including any search indexes stored via third-party services such as Algolia).

While this would not fully shut down the instance, it would stop being included in the search results on other MoodleNet instances. Moodle HQ does not process any of the data from federated instances without an API key, including those instances whose API key has been revoked.

=== Scope ===

For users of Moodle HQ's instance(s) of MoodleNet, we will be collecting personal data, including: name, location, resources uploaded, comments, browser version, and IP address. This does not include criminal offence data, but may include special categories such as political beliefs and accessibility requirements. We could also infer ethnicity through avatars, including photographs, that users choose to represent themselves. This would be as a by-product of using the system, through optional rather than mandatory activity (e.g. tagging, photo-upload, discussion replies).

We will check the age and jurisdiction of a user attempting to create an account, and deny the ability to create an account to those under the age of majority in their jurisdiction. In our user agreement we will specify that users must collect valid consent from individuals whose data is being processed.

Users will be able to register from anywhere in the world, on one or more of many federated MoodleNet instances operated by third parties. These may be hosted in any jurisdiction, including the European Union. As a result, MoodleNet instances are subject to the GDPR. A user’s location may be inferred from their IP address, but they are free to choose whether or not to enter a city-based location in their profile.

One thing we need to be careful of is the possibility of identifying location or ethnicity based on the use of minority languages. For example, the community have already localised the testing version of MoodleNet into the Basque language, which is spoken by relatively few people, and mainly in a particular geographical region. Likewise, we may identify users with special needs through accessibility settings and recognising that they are using assistive technologies.

While users will have the ability to hide information about themselves on their profile so that only they can see it, we are aware that this only hides information from other users, not from the operator of the instance. As a result, we will add a statement in the user agreement making users aware about the way that they might, implicitly and explicitly, reveal sensitive information such as their preferences, any disabilities, and ethnicity or location data. To make this clear we will use straightforward language and diagrams.

We will be continuously collecting data made public by users for as long as they have an account on a federated instance. We will initially be collecting data on hundreds of users, but this is likely to increase to at least tens of thousands of users.

=== Context ===

All users of Moodle HQ's instance(s) of MoodleNet will be above the age of digital consent according to their jurisdiction. As part of our user agreement, we are using a Code of Conduct to govern Moodle HQ's relationship with users, interactions amongst users, and users' contributions to MoodleNet, as detailed at https://www.contributor-covenant.org
We are not targeting vulnerable groups, we are using data in a way that users would expect, and are not aware of any issues of public concern in this area. Users are registering on a voluntary basis.

Our relationship with users on instances that Moodle HQ host is:

* Data Controller
* Data Processor

On instances ''not'' hosted by Moodle HQ, we provide the HQ Mothership API service that indexes data as well as provides search and discovery across federated instances. In this case, we index public content from other instances to allow this to happen. Our relationship with instance administrators is therefore:

* Joint Data Controller ''(in respect of certain elements of personal data made public by users which Moodle HQ makes searchable across the federated instances connected to the Mothership)''
* Data Processor

Instance administrators act as the Data Controller, and can request Moodle HQ to delete personal data on the data subject from the HQ Mothership.

As mentioned above and in reference to the diagram, contributions of content that do not include personal data will remain in MoodleNet after a user deletes their account. This is consistent with the open licenses we will use for uploaded resources and our user agreement.

=== Purposes ===

We are processing personal data for the purposes of identification on a social network. We envisage that this will lead to increased trust and sharing of resources and ideas amongst the educators using federated MoodleNet instances. Users will be able to identify one another, talk about shared interests and goals, and both link to and upload resources that will help their communities.

Moodle HQ gains from this by building something that fits with our values, but also provides a vehicle to complement and point towards our own paid offerings (e.g. MoodleCloud), as well as to our Partners, from whom we receive a share of their revenue.

We are attempting to collect the minimum amount of data to create a federated network of MoodleNet instances. To enable search across the instances connected to the HQ Mothership, we must act as Joint Data Controllers with administrators of those federated instances for the data elements over which we exercise independent control. In addition, we are Data Processors for the administrators of any federated instances, as we are processing data from those federated instances on their behalf, as part of the service offered to their users by them as Data Controllers.

== Assess necessity and proportionality ==

We are gaining the consent of users to process their personal data when they register on one of the instances of MoodleNet which are connected with the HQ Mothership. They will agree with a privacy notice, we will capture the minimum amount of personal data required, and users will be able to access, rectify, export, and delete this data.

As a federated social network, our aim is to process only the data that users have made publicly available, and which is necessary to meet the aims of MoodleNet. Namely, we want users to be able to identify one another and indicate affinity based on factors such as geographical location and interests. Other than a controlled taxonomy for parts of the tagging system, we are allowing users to add free text into these fields, thus allowing them to be pseudo-anonymous.

If we were building a centralised system, we would potentially have access to all user data, including that shared (as far as the user is concerned) ‘privately’. By creating a federated network, users can choose to join an instance they trust, or indeed run their own.

Built into MoodleNet will be the ability to request that data be deleted from other instances after being deleted from the user’s ‘home’ instance. By default, MoodleNet servers will comply with this request, but we cannot control whether third-party servers comply with the request. We will work with the main ActivityPub-compatible social networking apps to encourage them to comply with these requests by default.

== Consultation process ==

We have tested MoodleNet with around 250 volunteers to ascertain both the value proposition and to ensure that they are happy with the product. We collected the minimum amount of personal data in order to facilitate the successful use of the service.

In order to ensure that MoodleNet is as secure and privacy-respecting as possible, we are implementing industry best practices. This will include starting a ‘bug bounty’ program specifically focused on security and privacy. To enable this we will use a crowdsourcing platform that gives us access to security and privacy researchers and ethical hackers.
The MoodleNet team works closely with Moodle’s Privacy Officer and DPO to ensure that the procedures we are following start from a ‘privacy by design’ point of view. As we implement MoodleNet, the team will continue to meet regularly with the Privacy Officer and DPO to inform upcoming changes and decisions.

In addition, we plan to share this DPIA with the Moodle community for their feedback, as we intend to be as transparent as possible with this project. Anyone may give feedback via the following methods:

* Moodle.org forum: https://moodle.org/mod/forum/view.php?id=8352
* Email MoodleNet team: moodlenet-moderators@moodle.com
* Fediverse: https://mastodon.social/@moodlenet
* Twitter: https://twitter.com/moodlenet

MoodleNet

2021-05-31T10:59:08Z

Dougiamas:

[[File:Moodlenet-logo.png|400px]]

== What is MoodleNet? ==

MoodleNet is our new social network to share and curate open educational resources with educators world-wide. It is integrated closely with Moodle LMS and Moodle Workplace to make resources easy to find and use, but can be useful even if you don't use Moodle LMS. MoodleNet is also intended as a way to build your profile as an educator.

Importantly, MoodleNet is designed to be a federated, flexible Open Education Technology that is not controlled by a single entity, or subject to a single point of failure.

== Current status ==
''Last updated: 31 May 2021''

MoodleNet 1.x was abandoned by the team in 2021 because it was heading down the wrong path. The project was recently rebooted (January 2021) with a new team, new architecture and a simpler new design.

== Roadmap ==

* '''15 August 2021''' - MVP for wider community testing and feedback
* '''31 August 2021''' - Beta release , feature complete for 2.0 release.
* '''15 September 2021''' - 2.0 release!

== Important links ==

* [https://gitlab.com/moodlenet Code repository]
* [https://moodle.org/mod/forum/view.php?id=8726 MoodleNet news and discussion]

== Archive ==
* [https://docs.moodle.org/dev/MoodleNet/inspiration Inspiration]
* [https://docs.moodle.org/dev/MoodleNet-research Other research]
* [https://docs.moodle.org/dev/MoodleNet-consultancy MoodleNet consultancy]
* [https://docs.moodle.org/dev/MoodleNet/Copyright_Directive European Copyright Directive]
* [https://docs.moodle.org/dev/MoodleNet/DPIA Data Protection Impact Assessment]
* [https://docs.moodle.org/dev/MoodleNet/Testing Beta testing]
* [https://docs.moodle.org/dev/MoodleNet/Decision_Log Decision log]

[[es:MoodleNet]]

MoodleNet/Security

2021-01-13T07:39:43Z

Dougiamas: Replaced content with "<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index] ---- Deleted"

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----

Deleted

Roadmap

2020-07-15T06:15:56Z

Dougiamas:

'''Last Updated: 15 July 2020 Q3'''

= Introduction =

The Moodle Project is designed to have a positive effect on the world by supporting and empowering the educators who are teaching students in all sectors, in all countries.

To do this, our team at Moodle HQ looks to the world, talks with our community, and creates solutions in the forms of products that fit our values of '''education''', '''openness''', '''respect''', '''integrity''' and '''innovation'''.

This document summarises, for a broad audience, the best current plans on the future technical development of the Moodle’s open source learning platform, consisting of Moodle LMS, Moodle Workplace LMS, MoodleCloud, MoodleNet, Moodle Apps, and Moodle Educator Certificates.

We publish Roadmap updates such as this one every quarter.

==Where this roadmap comes from==

Proposals for improvements and new features come from a variety of different places.

Feedback from the community is extremely important and you can reach us by
* creating new issues on [http://tracker.moodle.org tracker],
* joining the [https://moodleassociation.org/ Moodle Users Association] to vote on a new project for each release,
* discussing your ideas on the [https://moodle.org/forums forums],
* creating new solutions as a plugin in the [https://moodle.org/plugins Moodle Plugins directory],
* or meeting us in person at one of our [https://moodle.com/events/ MoodleMoots]!

Moodle also has an extensive network of [https://moodle.com/partners Moodle Partners]. Moodle Partners are service providers that are certified by Moodle HQ to provide high quality Moodle services for schools, institutions and organisations. We work closely with our partners to determine the needs of Moodle Users and improve the platform.

Our Roadmap is built via our [[Roadmap process]]. This process is continuously evolving but it always seeks to involve all our key stakeholders - students, teachers, admins, institutions, and of course our partners and supporters.

= The big picture =

Working on the Moodle learning platform involves millions of moving parts, and every release generally includes hundreds of improvements. However, there are '''four main goals''' that we are focussing on for the next two years:

=== User experience and flow ===

The entire user experience from onboarding, into daily teaching/learning and expert customisation of Moodle is the core value of what makes Moodle useful or not in the real world, in fully online and blended modes.

While we’re working on hundreds of smaller, annoying issues, we are also doing some major re-thinking around what an LMS should be in the next decade and beyond as a tool to empower educators and learners.

=== Enabling all our developers ===

Our significant community of engaged developers are an amazing group of over 1000 people - many of them make a living being part of the Moodle community.

We are of course working on ways to make Moodle programming easier and better, with better training and support as well as improved APIs, plugins, integrations and support for modern technologies.

However, a particularly exciting initiative is the new Moodle Plugins Service, due in 2021, which will provide an “app store” experience on which all developers can build financial sustainability for their work, while teachers will have easier access to use hundreds of new plugins in their courses via the web interface, without needing to convince their admins to install code. This will help the entire plugins ecosystem.

===Better integrations between Moodle products===

The current Moodle products already integrate with each other, of course, but there is much more to be done to make them work together more seamlessly, as part of one platform, so that our users have a better experience and also so that they become more aware of solutions to their problems.

=== Better integration with the world ===

Moodle is never used alone, and it is a part of many ecosystems at many levels. We must connect to all kinds of other systems, we must of course comply with new legislation such as the GDPR, Accessibility and much more.

In particular though, we are committed to helping to promote [https://openedtech.global/ <span class="underline">Open EdTech</span>] and to work closely with qualified Open EdTech products and major stakeholders to design and build an open architecture for a long-term future.

= Roadmap timeline =

{| class="wikitable" border="1"
|-
! '''2020'''
! '''Moodle LMS'''
! '''Moodle Workplace'''
! '''Moodle Apps'''
! '''MoodleCloud'''
! '''MoodleNet'''
! '''Moodle Certificates'''
|-
| '''Q1'''
|
|
| '''Launch of new Moodle app plans'''
| '''Launch of Workplace hosting<br />
<br />
'''Free trials
|
|
|-
| '''Q2'''
|
'''Release 3.9'''

LLTS (Long Long Term Support)

'''New:'''<br />
<br />
Create H5P content<br />
<br />
MoodleNet

'''Improved:'''<br />
<br />
Activity chooser

Participants filters (MUA)

Accessibility

Safe Exam Browser
|
'''Release 3.9<br />
<br />
New:'''<br />
<br />
Appointments

Data Importers and exporters
|
'''Release 3.9<br />
<br />
New:'''<br />
<br />
Text editor draft autosave

'''Updates:'''<br />
<br />
Moodle LMS 3.9 compatibility

'''<br />
'''Moodle Workplace 3.9 compatibility
|
Improved connections with other Moodle products

'''<br />
'''Self-service for renames and restores
|
'''Release 1.0'''

'''New:'''<br />
<br />
Integrates to Moodle 3.9 and later

Moderation<br />
<br />
Federation<br />
<br />
HQ-run home instance

GDPR compliance<br />
<br />
Themeable
|
'''MEC 2020 launch<br />
<br />
'''6 courses covering all 22 competencies

Translated into multiple languages
|-
| '''Q3'''
| '''Minor release(s)'''
| '''Tenant-shared learning
| '''Notifications of new grades

Improved connections with other products
| New:'''<br />
<br />
New plans<br />
<br />
'''Updates:'''<br />
<br />
Simplified signup and upgrades
|
|
|-
| '''Q4'''
| '''Minor release(s)
| Report Builder improvements
| '''Functionality gaps for students

UX improvements
| Improvements based on customer needs
|
| '''MEC Direct Release<br />
<br />
'''MEC licensing for large institutions
|-
| '''2021'''
| '''Moodle LMS'''
| '''Moodle Workplace'''
| '''Moodle Apps'''
| '''MoodleCloud'''
| '''MoodleNet'''
| '''Moodle Certificates'''
|-
| '''Q1'''
| '''Minor release(s)
| '''Dashboards
|
|
|
|
|-
| '''Q2'''
| '''Minor release(s)

'''Moodle Plugins Service Soft Launch'''
|
|
|
|
| Other certifications
|-
| '''Q3'''
| '''Minor release(s)
|
|
|
|
|
|-
| '''Q4'''
| '''Release 4.0'''<br />
<br />
'''New:'''

Workplace features:<br />
- Certificates<br />
- Report Builder<br />
<br />
'''Improved:'''<br />
<br />
UX navigation

UX biggest pains

UX consistency via component library

Information flow and task management
| '''Release 4.0'''
| '''Release 4.0'''

'''Improved:'''<br />
<br />
Moodle LMS 4.0 compatibility

'''<br />
'''Moodle Workplace 4.0 compatibility

Classroom tools with friendly UX
| '''Release 4.0<br />
<br />
'''
|
|
|-
| '''2022'''
| '''Moodle LMS'''
| '''Moodle Workplace'''
| '''Moodle Apps'''
| '''MoodleCloud'''
| '''MoodleNet'''
| '''Moodle Certificates'''
|-
| '''Q1'''
|
|
|
|
|
|
|-
| '''Q2'''
| '''Release 4.1'''
| '''Release 4.1'''
| '''Release 4.1'''
| '''Release 4.1'''
|
|
|-
| '''Q3'''
|
|
|
|
|
|
|-
| '''Q4'''
| '''Release 4.2'''
| '''Release 4.2'''
| '''Release 4.2'''
| '''Release 4.2'''
|
|
|}

== Notes on some of these major release dates: ==

===Moodle 4.0 in November 2021 ===

Normally Moodle LMS major releases are every 6 months, in May and November.

However, for our very large new releases such as 1.0, 2.0, 3.0 and now 4.0, we often take longer so that we can tackle more significant chunks of important core work, giving us the opportunity sometimes to make more serious changes to UX or architecture.

There are a lot of ideas around for 4.0 - we will be relying on our new UX team to organise and prioritise a lot of it during the next 6 months.

=== Moodle 3.9 release in June 2020 ===

In support of a longer release timeframe for Moodle 4.0, we have decided to release Moodle 3.9 in June.

The extra month will give us time to bring in a number of extra items in support of Moodle’s other products, which are in addition to the planned features for the 3.9 release.

It will also allow us to include as many community contributions as possible as we work towards the release date.

* Code freeze (no new features accepted): '''4th May 2020'''
* QA cycle (start of QA testing): '''11th May 2020'''
* Scheduled release date (once QA passed): '''15th June 2020'''

=Past releases=

See our [[Releases]] page for information about past releases.

After Moodle 2.0 we switched to time-based releases rather than feature-based releases (see our [https://docs.moodle.org/dev/Process development process]). Because of this, the details above on future releases are an indication of current priorities only, and are targeted to be released in the upcoming releases. Anything not ready by the next release date will generally be pushed to the following major release.

==See also==

* [[Releases]] - versions of Moodle that have already been released
* https://docs.moodle.org/dev/Releases#General_release_calendar Key dates relating to future releases.

[[es:Plan de desarrollo]]
[[fr:Planification]]

[[Category:Core development]]

Roadmap process

2020-03-13T07:53:54Z

Dougiamas: /* Roadmap Process */

== Roadmap Process ==

A new process is being finalised. It will be here soon.

Thank you for your patience.

Roadmap

2020-03-13T07:52:36Z

Dougiamas:

'''Last Updated: 13 March 2020 Q1'''

= Introduction =

The Moodle Project is designed to have a positive effect on the world by supporting and empowering the educators who are teaching students in all sectors, in all countries.

To do this, our team at Moodle HQ looks to the world, talks with our community, and creates solutions in the forms of products that fit our values of education, openness, respect, integrity and innovation.

This document summarises, for a broad audience, the best current plans on the future technical development of the Moodle’s open source learning platform, consisting of Moodle LMS, Moodle Workplace LMS, MoodleCloud, MoodleNet, Moodle Apps, and Moodle Educator Certificates.

We publish Roadmap updates such as this one every quarter.

==Where this roadmap comes from==

Proposals for improvements and new features come from a variety of different places.

Feedback from the community is extremely important and you can reach us by
* creating new issues on [http://tracker.moodle.org tracker],
* joining the [https://moodleassociation.org/ Moodle User Association] to vote on a new project for each release,
* discussing your ideas on the [https://moodle.org/forums forums],
* creating new solutions as a plugin in the [https://moodle.org/plugins Moodle Plugins directory],
* or meeting us in person at one of our [https://moodle.com/events/ MoodleMoots]!

Moodle also has an extensive network of [https://moodle.com/partners Moodle Partners]. Moodle Partners are service providers that are certified by Moodle HQ to provide high quality Moodle services for schools, institutions and organisations. We work closely with our partners to determine the needs of Moodle Users and improve the platform.

Our Roadmap is built via our [http://docs.moodle.org/dev/Roadmap_process <span class="underline">Roadmap Process</span>]. This process is continuously evolving but it always seeks to involve all our key stakeholders - students, teachers, admins, institutions, and of course our partners and supporters.

= The big picture =

Working on the Moodle learning platform involves millions of moving parts, and every release generally includes hundreds of improvements. However, there are '''four main goals''' that we are focussing on for the next two years:

=== User experience and flow ===

The entire user experience from onboarding, into daily teaching/learning and expert customisation of Moodle is the core value of what makes Moodle useful or not in the real world, in fully online and blended modes.<br />
<br />
While we’re working on hundreds of smaller, annoying issues, we are also doing some major re-thinking around what an LMS should be in the next decade and beyond as a tool to empower educators and learners.

=== Enabling all our developers ===

Our significant community of developers are an amazing group of over 1000 people - many of them make a living being part of the Moodle community.

We are of course working on ways to make Moodle programming easier and better, with better training and support as well as improved APIs, plugins, integrations and support for modern technologies.

However, a particularly exciting initiative is the new Moodle Plugins Service, due in 2021, which will provide an “app store” experience on which all developers can build financial sustainability for their work, while teachers will have easier access to use hundreds of new plugins in their courses via the web interface, without needing to convince their admins to install code. This will help the entire plugins ecosystem.

===Better integrations between Moodle products===

The current Moodle products already integrate with each other, of course, but there is much more to be done to make them work together more seamlessly, as part of one platform, so that our users have a better experience and also so that they become more aware of solutions to their problems.

=== Better integration with the world ===

Moodle is never used alone, and it is a part of many ecosystems at many levels. We must connect to all kinds of other systems, we must of course comply with new legislation such as the GDPR, Accessibility and much more.

In particular though, we are committed to helping to promote [https://openedtech.global/ <span class="underline">Open EdTech</span>] and to work closely with qualified Open EdTech products and major stakeholders to design and build an open architecture for a long-term future.

= Roadmap timeline =

{| class="wikitable" border="1"
|-
! '''2020'''
! '''Moodle<br />
LMS'''
! '''Moodle Workplace'''
! '''Moodle Apps'''
! '''Moodle<br />
Cloud'''
! '''Moodle<br />
Net'''
! '''Moodle Certificates'''
|-
| '''Q1'''
|
|
| '''Launch of new Moodle app plans'''
| '''Launch of Workplace hosting<br />
<br />
'''Free trials
|
|
|-
| '''Q2'''
|
'''Release 3.9'''

LLTS<ref>Long Long Term Support</ref>

'''New:'''<br />
<br />
Create H5P content<br />
<br />
MoodleNet

'''Improved:'''<br />
<br />
Activity chooser

Participants filters (MUA)

Accessibility

Safe Exam Browser
|
'''Release 3.9<br />
<br />
New:'''<br />
<br />
Appointments

Data Importers and exporters
|
'''Release 3.9<br />
<br />
New:'''<br />
<br />
Text editor draft autosave

'''Updates:'''<br />
<br />
Moodle LMS 3.9 compatibility

'''<br />
'''Moodle Workplace 3.9 compatibility
|
Improved connections with other Moodle products

'''<br />
'''Self-service for renames and restores
|
'''Release 1.0'''

'''New:'''<br />
<br />
Integrates to Moodle 3.9 and later

Moderation<br />
<br />
Federation<br />
<br />
HQ-run home instance

GDPR compliance<br />
<br />
Themeable
|
'''MEC 2020 launch<br />
<br />
'''6 courses covering all 22 competencies

Translated into multiple languages
|-
| '''Q3'''
| '''Release 3.9.1'''
|
'''Release 3.9.1<br />
'''

Tenant-shared learning
|
'''Release 3.9.1<br />
<br />
'''Notifications of new grades

Improved connections with other products
| '''Release 3.9.1<br />
<br />
New:'''<br />
<br />
New plans<br />
<br />
'''Updates:'''<br />
<br />
Simplified signup and upgrades
|
|
|-
| '''Q4'''
| '''Release 3.9.2'''
|
'''Release 3.9.2'''

Report Builder improvements
|
'''Release 3.9.2<br />
<br />
'''Functionality gaps for students

UX improvements
| Improvements based on customer needs
|
| '''MEC Direct Release<br />
<br />
'''MEC licensing for large institutions
|-
| '''2021'''
| '''Moodle<br />
LMS'''
| '''Moodle Workplace'''
| '''Moodle Apps'''
| '''Moodle<br />
Cloud'''
| '''Moodle<br />
Net'''
| '''Moodle Certificates'''
|-
| '''Q1'''
|
| '''Release 3.9.3<br />
<br />
'''Dashboards
|
|
|
|
|-
| '''Q2'''
| '''Moodle Plugins Service Soft Launch'''
|
|
|
|
| Other certifications
|-
| '''Q3'''
|
|
|
|
|
|
|-
| '''Q4'''
|
'''Release 4.0'''<br />
<br />
'''New:'''

Workplace features:<br />
- Certificates<br />
- Report Builder<br />
<br />
'''Improved:'''<br />
<br />
UX navigation

UX biggest pains

UX consistency via component library

Information flow and task management
| '''Release 4.0'''
|
'''Release 4.0'''

'''Improved:'''<br />
<br />
Moodle LMS 4.0 compatibility

'''<br />
'''Moodle Workplace 4.0 compatibility

Classroom tools with friendly UX
| '''Release 4.0<br />
<br />
'''
|
|
|-
| '''2022'''
| '''Moodle<br />
LMS'''
| '''Moodle Workplace'''
| '''Moodle Apps'''
| '''Moodle<br />
Cloud'''
| '''Moodle<br />
Net'''
| '''Moodle Certificates'''
|-
| '''Q1'''
|
|
|
|
|
|
|-
| '''Q2'''
| '''Release 4.1'''
| '''Release 4.1'''
| '''Release 4.1'''
| '''Release 4.1'''
|
|
|-
| '''Q3'''
|
|
|
|
|
|
|-
| '''Q4'''
| '''Release 4.2'''
| '''Release 4.2'''
| '''Release 4.2'''
| '''Release 4.2'''
|
|
|}

== Notes on some of these major release dates: ==

===Moodle 4.0 in November 2021 ===

Normally Moodle LMS major releases are every 6 months, in May and November.

However, for our very large new releases such as 1.0, 2.0, 3.0 and now 4.0, we often take longer so that we can tackle more significant chunks of important core work, giving us the opportunity sometimes to make more serious changes to UX or architecture.

There are a lot of ideas around for 4.0 - we will be relying on our new UX team to organise and prioritise a lot of it during the next 6 months.

=== Moodle 3.9 release in June 2020 ===

In support of a longer release timeframe for Moodle 4.0, we have decided to release Moodle 3.9 in June.

The extra month will give us time to bring in a number of extra items in support of Moodle’s other products, which are in addition to the planned features for the 3.9 release.

It will also allow us to include as many community contributions as possible as we work towards the release date.

* Code freeze (no new features accepted): '''6th April 2020'''
* QA cycle (start of QA testing): '''13th April 2020'''
* Scheduled release date (once QA passed): '''11th May 2020'''

=Past releases=

See our [[Releases]] page for information about past releases.

After Moodle 2.0 we switched to time-based releases rather than feature-based releases (see our [https://docs.moodle.org/dev/Process development process]). Because of this, the details above on future releases are an indication of current priorities only, and are targeted to be released in the upcoming releases. Anything not ready by the next release date will generally be pushed to the following major release.

==See also==

* [[Releases]] - versions of Moodle that have already been released
* https://docs.moodle.org/dev/Releases#General_release_calendar Key dates relating to future releases.

[[es:Plan de desarrollo]]
[[fr:Planification]]

[[Category:Core development]]

Roadmap

2020-03-13T07:45:09Z

Dougiamas:

Last Updated: 3 March 2020 Q1

= Introduction =

The Moodle Project is designed to have a positive effect on the world by supporting and empowering the educators who are teaching students in all sectors, in all countries.

To do this, our team at Moodle HQ looks to the world, talks with our community, and creates solutions in the forms of products that fit our values of education, openness, respect, integrity and innovation.

This document summarises, for a broad audience, the best current plans on the future technical development of the Moodle’s open source learning platform, consisting of Moodle LMS, Moodle Workplace LMS, MoodleCloud, MoodleNet, Moodle Apps, and Moodle Educator Certificates.

We publish Roadmap updates such as this one every quarter.

==Where this roadmap comes from==

Proposals for improvements and new features come from a variety of different places.

Feedback from the community is extremely important and you can reach us by
* creating new issues on [http://tracker.moodle.org tracker],
* joining the [https://moodleassociation.org/ Moodle User Association] to vote on a new project for each release,
* discussing your ideas on the [https://moodle.org/forums forums],
* creating new solutions as a plugin in the [https://moodle.org/plugins Moodle Plugins directory],
* or meeting us in person at one of our [https://moodle.com/events/ MoodleMoots]!

Moodle also has an extensive network of [https://moodle.com/partners Moodle Partners]. Moodle Partners are service providers that are certified by Moodle HQ to provide high quality Moodle services for schools, institutions and organisations. We work closely with our partners to determine the needs of Moodle Users and improve the platform.

Our Roadmap is built via our [http://docs.moodle.org/dev/Roadmap_process <span class="underline">Roadmap Process</span>]. This process is continuously evolving but it always seeks to involve all our key stakeholders - students, teachers, admins, institutions, and of course our partners and supporters.

= The big picture =

Working on the Moodle learning platform involves millions of moving parts, and every release generally includes hundreds of improvements. However, there are '''four main goals''' that we are focussing on for the next two years:

=== User experience and flow ===

The entire user experience from onboarding, into daily teaching/learning and expert customisation of Moodle is the core value of what makes Moodle useful or not in the real world, in fully online and blended modes.<br />
<br />
While we’re working on hundreds of smaller, annoying issues, we are also doing some major re-thinking around what an LMS should be in the next decade and beyond as a tool to empower educators and learners.

=== Enabling all our developers ===

Our significant community of developers are an amazing group of over 1000 people - many of them make a living being part of the Moodle community.

We are of course working on ways to make Moodle programming easier and better, with better training and support as well as improved APIs, plugins, integrations and support for modern technologies.

However, a particularly exciting initiative is the new Moodle Plugins Service, due in 2021, which will provide an “app store” experience on which all developers can build financial sustainability for their work, while teachers will have easier access to use hundreds of new plugins in their courses via the web interface, without needing to convince their admins to install code. This will help the entire plugins ecosystem.

===Better integrations between Moodle products===

The current Moodle products already integrate with each other, of course, but there is much more to be done to make them work together more seamlessly, as part of one platform, so that our users have a better experience and also so that they become more aware of solutions to their problems.

=== Better integration with the world ===

Moodle is never used alone, and it is a part of many ecosystems at many levels. We must connect to all kinds of other systems, we must of course comply with new legislation such as the GDPR, Accessibility and much more.

In particular though, we are committed to helping to promote [https://openedtech.global/ <span class="underline">Open EdTech</span>] and to work closely with qualified Open EdTech products and major stakeholders to design and build an open architecture for a long-term future.

= Roadmap timeline =

{| class="wikitable" border="1"
|-
! '''2020'''
! '''Moodle<br />
LMS'''
! '''Moodle Workplace'''
! '''Moodle Apps'''
! '''Moodle<br />
Cloud'''
! '''Moodle<br />
Net'''
! '''Moodle Certificates'''
|-
| '''Q1'''
|
|
| '''Launch of new Moodle app plans'''
| '''Launch of Workplace hosting<br />
<br />
'''Free trials
|
|
|-
| '''Q2'''
|
'''Release 3.9'''

LLTS<ref>Long Long Term Support</ref>

'''New:'''<br />
<br />
Create H5P content<br />
<br />
MoodleNet

'''Improved:'''<br />
<br />
Activity chooser

Participants filters (MUA)

Accessibility

Safe Exam Browser
|
'''Release 3.9<br />
<br />
New:'''<br />
<br />
Appointments

Data Importers and exporters
|
'''Release 3.9<br />
<br />
New:'''<br />
<br />
Text editor draft autosave

'''Updates:'''<br />
<br />
Moodle LMS 3.9 compatibility

'''<br />
'''Moodle Workplace 3.9 compatibility
|
Improved connections with other Moodle products

'''<br />
'''Self-service for renames and restores
|
'''Release 1.0'''

'''New:'''<br />
<br />
Integrates to Moodle 3.9 and later

Moderation<br />
<br />
Federation<br />
<br />
HQ-run home instance

GDPR compliance<br />
<br />
Themeable
|
'''MEC 2020 launch<br />
<br />
'''6 courses covering all 22 competencies

Translated into multiple languages
|-
| '''Q3'''
| '''Release 3.9.1'''
|
'''Release 3.9.1<br />
'''

Tenant-shared learning
|
'''Release 3.9.1<br />
<br />
'''Notifications of new grades

Improved connections with other products
| '''Release 3.9.1<br />
<br />
New:'''<br />
<br />
New plans<br />
<br />
'''Updates:'''<br />
<br />
Simplified signup and upgrades
|
|
|-
| '''Q4'''
| '''Release 3.9.2'''
|
'''Release 3.9.2'''

Report Builder improvements
|
'''Release 3.9.2<br />
<br />
'''Functionality gaps for students

UX improvements
| Improvements based on customer needs
|
| '''MEC Direct Release<br />
<br />
'''MEC licensing for large institutions
|-
| '''2021'''
| '''Moodle<br />
LMS'''
| '''Moodle Workplace'''
| '''Moodle Apps'''
| '''Moodle<br />
Cloud'''
| '''Moodle<br />
Net'''
| '''Moodle Certificates'''
|-
| '''Q1'''
|
| '''Release 3.9.3<br />
<br />
'''Dashboards
|
|
|
|
|-
| '''Q2'''
| '''Moodle Plugins Service Soft Launch'''
|
|
|
|
| Other certifications
|-
| '''Q3'''
|
|
|
|
|
|
|-
| '''Q4'''
|
'''Release 4.0'''<br />
<br />
'''New:'''

Workplace features:<br />
- Certificates<br />
- Report Builder<br />
<br />
'''Improved:'''<br />
<br />
UX navigation

UX biggest pains

UX consistency via component library

Information flow and task management
| '''Release 4.0'''
|
'''Release 4.0'''

'''Improved:'''<br />
<br />
Moodle LMS 4.0 compatibility

'''<br />
'''Moodle Workplace 4.0 compatibility

Classroom tools with friendly UX
| '''Release 4.0<br />
<br />
'''
|
|
|-
| '''2022'''
| '''Moodle<br />
LMS'''
| '''Moodle Workplace'''
| '''Moodle Apps'''
| '''Moodle<br />
Cloud'''
| '''Moodle<br />
Net'''
| '''Moodle Certificates'''
|-
| '''Q1'''
|
|
|
|
|
|
|-
| '''Q2'''
| '''Release 4.1'''
| '''Release 4.1'''
| '''Release 4.1'''
| '''Release 4.1'''
|
|
|-
| '''Q3'''
|
|
|
|
|
|
|-
| '''Q4'''
| '''Release 4.2'''
| '''Release 4.2'''
| '''Release 4.2'''
| '''Release 4.2'''
|
|
|}

== Notes on some of these major release dates: ==

===Moodle 4.0 in November 2021 ===

Normally Moodle LMS major releases are every 6 months, in May and November.

However, for our very large new releases such as 1.0, 2.0, 3.0 and now 4.0, we often take longer so that we can tackle more significant chunks of important core work, giving us the opportunity sometimes to make more serious changes to UX or architecture.

There are a lot of ideas around for 4.0 - we will be relying on our new UX team to organise and prioritise a lot of it during the next 6 months.

=== Moodle 3.9 release in June 2020 ===

In support of a longer release timeframe for Moodle 4.0, we have decided to release Moodle 3.9 in June.

The extra month will give us time to bring in a number of extra items in support of Moodle’s other products, which are in addition to the planned features for the 3.9 release.

It will also allow us to include as many community contributions as possible as we work towards the release date.

* Code freeze (no new features accepted): '''6th April 2020'''
* QA cycle (start of QA testing): '''13th April 2020'''
* Scheduled release date (once QA passed): '''11th May 2020'''

=Past releases=

See our [[Releases]] page for information about past releases.

After Moodle 2.0 we switched to time-based releases rather than feature-based releases (see our [https://docs.moodle.org/dev/Process development process]). Because of this, the details above on future releases are an indication of current priorities only, and are targeted to be released in the upcoming releases. Anything not ready by the next release date will generally be pushed to the following major release.

==See also==

* [[Releases]] - versions of Moodle that have already been released
* https://docs.moodle.org/dev/Releases#General_release_calendar Key dates relating to future releases.

[[es:Plan de desarrollo]]
[[fr:Planification]]

[[Category:Core development]]

Roadmap process

2020-02-23T15:08:13Z

Dougiamas: Created page with "== Roadmap Process == coming soon"

== Roadmap Process ==
coming soon

Creating a theme based on boost

2019-03-22T01:47:21Z

Dougiamas:

{{Moodle 3.2}}
{{Template:Themes}}

This is a tutorial for how to create a new theme in any version of Moodle from 3.2 and later.

Moodle 3.2 introduced a new core theme named "Boost" which is a great starting point for themers wanting to build a modern Moodle theme utilising all the latest features available to themes in Moodle. If you aren't sure where to start, then START HERE! :-)

== Getting started ==
What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.

This tutorial is based on a working theme named "theme_photo" you can download it or view the source code for it here: https://github.com/damyon/moodle-theme_photo

=== Choosing a name ===
Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.

Lets call our new example theme "photo" as we will add some settings to allow "photos" in various places in Moodle.

=== Starting files ===
As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle.

Following this guide we can start creating our theme. First we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.

<code>
/theme/photo/
</code>

Now we need to add some standard plugin files to our theme. First is version.php

''/theme/photo/version.php''

<code php>

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// This is the version of the plugin.
$plugin->version = '2016102100';

// This is the version of Moodle this plugin requires.
$plugin->requires = '2016070700';

// This is the component name of the plugin - it always starts with 'theme_'
// for themes and should be the same as the name of the folder.
$plugin->component = 'theme_photo';

// This is a list of plugins, this plugin depends on (and their versions).
$plugin->dependencies = [
'theme_boost' => '2016102100'
];

</code>

We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/.

''/theme/photo/lang/en/theme_photo.php''

<code php>

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// A description shown in the admin theme selector.
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';
// The name of our plugin.
$string['pluginname'] = 'Photo';
// We need to include a lang string for each block region.
$string['region-side-pre'] = 'Right';
</code>

=== Theme specific files ===
Theme plugins have a few more standard files they need to define.

Themes require a favicon file to show in the address bar. See [[http://docs.moodle.org/en/Favicon Favicon]].

''pix/favicon.ico''

(Image file not shown).

Themes also require an example screenshot to be displayed in the theme selector.

''pix/screenshot.jpg''

(Image file not shown).

Themes require a lib.php file. This file contains callbacks used by various API's in Moodle. Initially this file can be empty, but as we add features to our theme we will need to add some functions here.

''lib.php''
<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// We will add callbacks here as we add features to our theme.
</code>

Theme config goes in a config.php file. This is one of the most important files in our theme. Once we add this file we will be ready to test our theme for the first time.

''config.php''

<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// $THEME is defined before this page is included and we can define settings by adding properties to this global object.

// The first setting we need is the name of the theme. This should be the last part of the component name, and the same
// as the directory name for our theme.
$THEME->name = 'photo';

// This setting list the style sheets we want to include in our theme. Because we want to use SCSS instead of CSS - we won't
// list any style sheets. If we did we would list the name of a file in the /style/ folder for our theme without any css file
// extensions.
$THEME->sheets = [];

// This is a setting that can be used to provide some styling to the content in the TinyMCE text editor. This is no longer the
// default text editor and "Atto" does not need this setting so we won't provide anything. If we did it would work the same
// as the previous setting - listing a file in the /styles/ folder.
$THEME->editor_sheets = [];

// This is a critical setting. We want to inherit from theme_boost because it provides a great starting point for SCSS bootstrap4
// themes. We could add more than one parent here to inherit from multiple parents, and if we did they would be processed in
// order of importance (later themes overriding earlier ones). Things we will inherit from the parent theme include
// styles and mustache templates and some (not all) settings.
$THEME->parents = ['boost'];

// A dock is a way to take blocks out of the page and put them in a persistent floating area on the side of the page. Boost
// does not support a dock so we won't either - but look at bootstrapbase for an example of a theme with a dock.
$THEME->enable_dock = false;

// This is an old setting used to load specific CSS for some YUI JS. We don't need it in Boost based themes because Boost
// provides default styling for the YUI modules that we use. It is not recommended to use this setting anymore.
$THEME->yuicssmodules = array();

// Most themes will use this rendererfactory as this is the one that allows the theme to override any other renderer.
$THEME->rendererfactory = 'theme_overridden_renderer_factory';

// This is a list of blocks that are required to exist on all pages for this theme to function correctly. For example
// bootstrap base requires the settings and navigation blocks because otherwise there would be no way to navigate to all the
// pages in Moodle. Boost does not require these blocks because it provides other ways to navigate built into the theme.
$THEME->requiredblocks = '';

// This is a feature that tells the blocks library not to use the "Add a block" block. We don't want this in boost based themes because
// it forces a block region into the page when editing is enabled and it takes up too much room.
$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;
</code>

=== Ready set go! ===
If you have been following along - now we are at the point where we can actually install and test our new theme. Try it now by visiting the admin notifications page to install the new plugin, and then choosing the new theme from the theme selector.

[[https://docs.moodle.org/en/Standard_themes#Theme_selector Theme selector]]

When you choose the new theme - you will find that it looks exactly the same as Boost. At this point with our minimal configuration - we are inheriting almost everything from our parent theme including styles and templates. You will notice though that we don't inherit the settings from our parent theme. If you choose a different preset in Boost - it is not applied in this child theme.

<div class="warningbox">
Note: make sure your config.php file contains $THEME->hidefromselector = false; (or at least set to false) or else, your theme wont show up in theme selector.
</div>

=== What if I want the settings too? ===

<div class="warningbox">
This section is included for completeness - but it is not recommended for themes to utilise settings from their parents. To find out how to duplicate the settings from the parent theme so they operate independently skip to [[#Duplicate the settings from Boost]].
</div>

If I want the settings from Boost to apply to my child theme as well I need to know a bit about how each of the settings in Boost is applied to make them work in my child theme.

'''Setting 1 - preset.'''

The "preset" file is the file that is used as the main file for scss compilation. In Boost this is controlled by the theme config value:

''theme_boost/config.php''
<code php>
$THEME->scss = function($theme) {
return theme_boost_get_main_scss_content($theme);
};
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');
} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_boost', 'preset', 0, '/', $filename))) {
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

return $scss;
}
</code>

What this function is doing is checking for a theme setting "preset" and either fetching the file from Moodles internal file storage, or from the /preset/ folder. The function then returns the contents of this file.

It does not automatically work for our child theme because we have no setting named "preset" in our child theme and this code is not searching the theme parents for the setting. If we wanted it to apply we could do this in our child theme:

''config.php''
<code php>
// This setting defines the main scss file for our theme to be compiled. We could set it to a static file in the scss folder or to a function which returns the SCSS based on theme settings.
$THEME->scss = function($theme) {

// We need to load the config for our parent theme because that is where the preset setting is defined.
$parentconfig = theme_config::load('boost');
// Call a function from our parent themes lib.php file to fetch the content of the themes main SCSS file based on it's own config, not ours.
return theme_boost_get_main_scss_content($parentconfig);
};
</code>

'''Settings 2+3 brandcolor + scsspre'''

The way these settings work is they generate a chunk of SCSS to be prepended to the main scss file. In boost they work like this:

''theme_boost/config.php''
<code php>
$THEME->prescsscallback = 'theme_boost_get_pre_scss';
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_pre_scss($theme) {
global $CFG;

$scss = '';
$configurable = [
// Config key => [variableName, ...].
'brandcolor' => ['brand-primary'],
];

// Prepend variables first.
foreach ($configurable as $configkey => $targets) {
$value = isset($theme->settings->{$configkey}) ? $theme->settings->{$configkey} : null;
if (empty($value)) {
continue;
}
array_map(function($target) use (&$scss, $value) {
$scss .= '$' . $target . ': ' . $value . ";\n";
}, (array) $targets);
}

// Prepend pre-scss.
if (!empty($theme->settings->scsspre)) {
$scss .= $theme->settings->scsspre;
}

return $scss;
}
</code>

What this code is doing is:
* looping over a list of theme settings that map to a SCSS variable and building some SCSS to initialise that variable from the setting. In Boost there is only one * brandprimary - but if we wanted to expose more bootstrap variables as theme settings we could use this function as a template in our child theme and add more settings to the $configurable array.
* Adding all of the raw SCSS from the scsspre theme setting
* Returning the whole thing as a string to be added before the main scss file.

If we want this code to work in our child theme, using the settings from Boost we could do this:

''config.php''
<code php>
// This is a function that returns some SCSS as a string to prepend to the main SCSS file.
$THEME->prescsscallback = 'theme_photo_get_pre_scss';
</code>

''lib.php''
<code php>
// Function to return the SCSS to prepend to our main SCSS for this theme.
// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
function theme_photo_get_pre_scss($theme) {
// Load the settings from the parent.
$theme = theme_config::load('boost');
// Call the parent themes get_pre_scss function.
return theme_boost_get_pre_scss($theme);
}
</code>

'''Setting 4 scss (post)'''

The final setting from Boost is a raw text field which adds SCSS to the end of the main SCSS file. This is a useful place to add style rules as they will override previously defined styles with the same specificity. It is applied in Boost by the following lines:

''theme_boost/config.php''
<code php>
$THEME->extrascsscallback = 'theme_boost_get_extra_scss';
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_extra_scss($theme) {
return !empty($theme->settings->scss) ? $theme->settings->scss : '';
}
</code>

This is just returning the value of the setting as a string.

To make this setting apply in our child theme too - we use similar code to the previous sections.

''config.php''
<code php>
// This is a function that returns some SCSS as a string to prepend to the main SCSS file.
$THEME->extrascsscallback = 'theme_photo_get_extra_scss';
</code>

''lib.php''
<code php>
// Function to return the SCSS to append to our main SCSS for this theme.
// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
function theme_photo_get_extra_scss($theme) {
// Load the settings from the parent.
$theme = theme_config::load('boost');
// Call the parent themes get_extra_scss function.
return theme_boost_get_extra_scss($theme);
}
</code>

=== Duplicate the settings from Boost ===

This is the recommended way to extend boost as your child theme will not be affected by changes to the Boost settings, and both themes can be in use with different settings applied.

All that needs to happen is to create theme settings in the child theme that match each of the settings in the parent theme. You will need to add matching language strings for each of these settings in the language file.

This example shows how to do it - We are re-using the nice looking theme_boost_admin_settingspage_tabs class from boost and creating duplicate versions of each of the settings.

''settings.php''

<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// This is used for performance, we don't need to know about these settings on every page in Moodle, only when
// we are looking at the admin settings pages.
if ($ADMIN->fulltree) {

// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.
$settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));

// Each page is a tab - the first is the "General" tab.
$page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));

// Replicate the preset setting from boost.
$name = 'theme_photo/preset';
$title = get_string('preset', 'theme_photo');
$description = get_string('preset_desc', 'theme_photo');
$default = 'default.scss';

// We list files in our own file area to add to the drop down. We will provide our own function to
// load all the presets from the correct paths.
$context = context_system::instance();
$fs = get_file_storage();
$files = $fs->get_area_files($context->id, 'theme_photo', 'preset', 0, 'itemid, filepath, filename', false);

$choices = [];
foreach ($files as $file) {
$choices[$file->get_filename()] = $file->get_filename();
}
// These are the built in presets from Boost.
$choices['default.scss'] = 'default.scss';
$choices['plain.scss'] = 'plain.scss';

$setting = new admin_setting_configselect($name, $title, $description, $default, $choices);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Preset files setting.
$name = 'theme_photo/presetfiles';
$title = get_string('presetfiles','theme_photo');
$description = get_string('presetfiles_desc', 'theme_photo');

$setting = new admin_setting_configstoredfile($name, $title, $description, 'preset', 0,
array('maxfiles' => 20, 'accepted_types' => array('.scss')));
$page->add($setting);

// Variable $brand-color.
// We use an empty default value because the default colour should come from the preset.
$name = 'theme_photo/brandcolor';
$title = get_string('brandcolor', 'theme_photo');
$description = get_string('brandcolor_desc', 'theme_photo');
$setting = new admin_setting_configcolourpicker($name, $title, $description, '');
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Must add the page after definiting all the settings!
$settings->add($page);

// Advanced settings.
$page = new admin_settingpage('theme_photo_advanced', get_string('advancedsettings', 'theme_photo'));

// Raw SCSS to include before the content.
$setting = new admin_setting_configtextarea('theme_photo/scsspre',
get_string('rawscsspre', 'theme_photo'), get_string('rawscsspre_desc', 'theme_photo'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Raw SCSS to include after the content.
$setting = new admin_setting_configtextarea('theme_photo/scss', get_string('rawscss', 'theme_photo'),
get_string('rawscss_desc', 'theme_photo'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

$settings->add($page);
}
</code>

''lang/en/theme_photo.php''
<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();
// The name of the second tab in the theme settings.
$string['advancedsettings'] = 'Advanced settings';
// The brand colour setting.
$string['brandcolor'] = 'Brand colour';
// The brand colour setting description.
$string['brandcolor_desc'] = 'The accent colour.';
// A description shown in the admin theme selector.
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';
// Name of the settings pages.
$string['configtitle'] = 'Photo settings';
// Name of the first settings tab.
$string['generalsettings'] = 'General settings';
// The name of our plugin.
$string['pluginname'] = 'Photo';
// Preset files setting.
$string['presetfiles'] = 'Additional theme preset files';
// Preset files help text.
$string['presetfiles_desc'] = 'Preset files can be used to dramatically alter the appearance of the theme. See <a href=https://docs.moodle.org/dev/Boost_Presets>Boost presets</a> for information on creating and sharing your own preset files, and see the <a href=http://moodle.net/boost>Presets repository</a> for presets that others have shared.';
// Preset setting.
$string['preset'] = 'Theme preset';
// Preset help text.
$string['preset_desc'] = 'Pick a preset to broadly change the look of the theme.';
// Raw SCSS setting.
$string['rawscss'] = 'Raw SCSS';
// Raw SCSS setting help text.
$string['rawscss_desc'] = 'Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet.';
// Raw initial SCSS setting.
$string['rawscsspre'] = 'Raw initial SCSS';
// Raw initial SCSS setting help text.
$string['rawscsspre_desc'] = 'In this field you can provide initialising SCSS code, it will be injected before everything else. Most of the time you will use this setting to define variables.';
// We need to include a lang string for each block region.
$string['region-side-pre'] = 'Right';
</code>

We aren't quite there yet as you will notice if you try and upload a preset file and then choose it. The "theme_boost_get_main_scss_content" function from Boost is expecting the preset files to be stored in a file area for theme_boost only. We need to add this function to our own theme and tweak it.

''config.php''
<code php>
// This is the function that returns the SCSS source for the main file in our theme. We override the boost version because
// we want to allow presets uploaded to our own theme file area to be selected in the preset list.
$THEME->scss = function($theme) {
return theme_photo_get_main_scss_content($theme);
};
</code>

''lib.php''
<code php>
function theme_photo_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');

} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {
// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

return $scss;
}
</code>

=== Stop and try it out ===
So now what is working and what isn't. Well - everything should be working and you should have a nice new theme extending boost with it's own settings pages. When Boost gets updates for bug fixes your new theme will inherit those fixes as it inherits all the SCSS and templates from theme boost. In addition your new theme will accept preset files and supports all the same features and settings as boost, ready to add more.

== Take it further ==
Now we have our very nice starting point we can start changing or adding features, customising templates and output or tweaking the SCSS.

=== Add some new settings ===

From this point in the tutorial we will start adding features to our theme to extend it and make it AWESOME!

Lets start with a new setting to set a background image on the login page. As you saw earlier, our theme defines it's list of settings in a file called settings.php. See [[Admin settings]] for more information about adding admin settings to any plugin. All of the different kinds of admin settings can be found in lib/adminlib.php. In our case we will want to add a setting which allows an admin to upload an image file. This is an "admin_setting_configstoredfile" and we add it to our theme by adding this code to the settings.php file (inside the "if ($ADMIN->fulltree) {" condition.

''settings.php''
<code php>
// Login page background setting.
// We use variables for readability.
$name = 'theme_photo/loginbackgroundimage';
$title = get_string('loginbackgroundimage', 'theme_photo');
$description = get_string('loginbackgroundimage_desc', 'theme_photo');
// This creates the new setting.
$setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');
// This means that theme caches will automatically be cleared when this setting is changed.
$setting->set_updatedcallback('theme_reset_all_caches');
// We always have to add the setting to a page for it to have any effect.
$page->add($setting);
</code>

We also need to add new lang strings to our language file.

"lang/en/theme_photo.php"
<code php>
// Background image for login page.
$string['loginbackgroundimage'] = 'Login page background image';
// Background image for login page.
$string['loginbackgroundimage_desc'] = 'An image that will be stretched to fill the background of the login page.';
</code>

Now we have a new setting that lets us upload a file - but it doesn't actually do anything yet. We need to update the theme to set this image background on the login page.

In order to change the SCSS for our theme we will add 2 additional SCSS files and include them before and after our main scss.

We already have a function in our lib.php file which fetches the main SCSS for our theme. This is a good point to include additional SCSS files. We can add 2 lines to the end of this function to achieve this.

''lib.php''
<code php>
function theme_photo_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');

} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {
// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

// Pre CSS - this is loaded AFTER any prescss from the setting but before the main scss.
$pre = file_get_contents($CFG->dirroot . '/theme/photo/scss/pre.scss');
// Post CSS - this is loaded AFTER the main scss but before the extra scss from the setting.
$post = file_get_contents($CFG->dirroot . '/theme/photo/scss/post.scss');

// Combine them together.
return $pre . "\n" . $scss . "\n" . $post;
}
</code>

''scss/pre.scss''
<code scss>
// Pre SCSS for the theme.
</code>

''scss/post.scss''
<code scss>
// Post SCSS for the theme.
</code>

==== Why do we use pre and post SCSS? ====
SCSS/SASS is a powerful language for creating CSS. It supports variables, functions, loops just like php. For lots of information and an introduction to SCSS read about [https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass on wikipedia].

'''Pre SCSS'''

In Boost we use many variables when creating style rules.

When declaring a variable in SCSS - it is best practice to define it like this:
<code scss>
$mycoolcolour: #FF0 !default;
</code>

What this means is - if this variable is not defined already - set it to the hex value '#FF0';

So by setting this variable in some PRE scss we can override the default the value of this variable everywhere it is used. Boost is built with the [https://v4-alpha.getbootstrap.com/ Bootstrap 4 (Alpha 4)] CSS Framework. This is a framework which uses SCSS to provide many extremely useful layouts and components which can be reused without adding specific CSS rules to style every page. Because bootstrap consistently uses variables we can customise many of these components easily by setting the value of the variables before we include the Bootstrap SCSS files.

Many variables are available in /theme/boost/scss/bootstrap/_variables.scss - as an example we can change the look of all buttons and input fields with this one variable:

<code scss>
$border-radius: 8px;
</code>

'''Post SCSS'''

Post SCSS is useful for defining full CSS rules. Because they are included last, they override any previous matching selector with the same [https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Specificity Specificity].

=== Tips for customising Moodle with SCSS (or CSS) ===
Some handy things to know when you are new to theming is that Moodle adds some classes to every page that helps you target a specific page or set of pages with some style rules.

If you inspect a moodle page and look at the body tag you will see a long list of classes e.g.

<code html>
<body id="page-course-view-weeks" class="format-weeks path-course path-course-view safari dir-ltr lang-en yui-skin-sam yui3-skin-sam damyon-per-in-moodle-com--stable_master pagelayout-course course-11 context-497 category-1 drawer-open-left jsenabled">
</code>

You can see from this example that each page gets an id. This is a simplified representation of the current page in the navigation. In this example we are looking at the course page and this course is using the weeks format.

The classes on the body tag can also be used to target a page or set of pages.
* <code>format-weeks</code> The course format
* <code>path-course path-course-view</code> The parts of the bread-crumb leading up to the current page (The current page is what goes in the id)
* <code>safari</code> Some server side guessing of the browser type - it's not accurate so I would not rely on it
* <code>dir-ltr</code> The direction of the current language for the page ( dir-rtl for RTL languages )
* <code>lang-en</code> The current language of the page
* <code>yui*</code> Legacy yui classes - ignore these
* <code>damyon-per-in-moodle-com--stable_master</code> The current hostname for the site + the site name
* <code>pagelayout-course</code> The layout type for the current page
* <code>course-11</code> The id of the current course
* <code>context-497</code> The current context id
* <code>category-1</code> The category for the current course
* <code>drawer-open-left</code> Added / removed when the navigation drawer is opened / closed in Boost
* <code>jsenabled</code> True if the browser supports javascript

[https://docs.moodle.org/dev/Themes_overview#.3Cbody.3E_CSS_id_and_classes Read about Body id and classes].

In our example the page layout is the most useful here as we have a specific page layout for login pages. We can now craft a rule that applies a background image only to login pages using "body.pagelayout-login".

=== How do we refer to an image in SCSS ? ===
So now we can add a rule to the post.scss which will set the background image for the login page. First we need to know how to construct a url to the background images from our stylesheet.

In stylesheets in Moodle we can use a special pix tag to refer to images from our theme. The rule to attach the background image looks like this:
''scss/post.scss''
<code scss>
body.pagelayout-login {
background-image: url([[pix:theme_photo|loginbackgroundimage]]);
background-size: cover;
}
</code>

There are 2 important parts to this tag (the bit in square brackets). The first is "theme_photo". In this case we are passing a component name, the image serving code in theme_config::resolve_image_location() will then look for an image file in several locations. One of these is in "$CFG->dataroot/pix_plugins/$type/$plugin/$image". We can use this to make sure the image gets served correctly by copying the file saved in the setting to this location every time it is updated. (There is an alterative way we could do this by implementing pluginfile.php in our theme - which you can read about in the [[File API]] ).

If we had just passed the value "theme" the image serving code would have looked for the image in the "pix" folder of our theme.

So - we need this final change to copy the image file into our dataroot each time the setting is changed.

In the settings file we will update the callback to a new function which we will define in our lib.php.
''settings.php''
<code php>

// Login page background setting.
// We use variables for readability.
$name = 'theme_photo/loginbackgroundimage';
$title = get_string('loginbackgroundimage', 'theme_photo');
$description = get_string('loginbackgroundimage_desc', 'theme_photo');
// This creates the new setting.
$setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');
// This function will copy the image into the data_root location it can be served from.
$setting->set_updatedcallback('theme_photo_update_settings_images');
// We always have to add the setting to a page for it to have any effect.
$page->add($setting);
</code>

''lib.php''
<code php>
function theme_photo_update_settings_images($settingname) {
global $CFG;

// The setting name that was updated comes as a string like 's_theme_photo_loginbackgroundimage'.
// We split it on '_' characters.
$parts = explode('_', $settingname);
// And get the last one to get the setting name..
$settingname = end($parts);

// Admin settings are stored in system context.
$syscontext = context_system::instance();
// This is the component name the setting is stored in.
$component = 'theme_photo';

// This is the value of the admin setting which is the filename of the uploaded file.
$filename = get_config($component, $settingname);
// We extract the file extension because we want to preserve it.
$extension = substr($filename, strrpos($filename, '.') + 1);

// This is the path in the moodle internal file system.
$fullpath = "/{$syscontext->id}/{$component}/{$settingname}/0{$filename}";
// Get an instance of the moodle file storage.
$fs = get_file_storage();
// This is an efficient way to get a file if we know the exact path.
if ($file = $fs->get_file_by_hash(sha1($fullpath))) {
// We got the stored file - copy it to dataroot.
// This location matches the searched for location in theme_config::resolve_image_location.
$pathname = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.' . $extension;

// This pattern matches any previous files with maybe different file extensions.
$pathpattern = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.*';

// Make sure this dir exists.
@mkdir($CFG->dataroot . '/pix_plugins/theme/photo/', $CFG->directorypermissions, true);

// Delete any existing files for this setting.
foreach (glob($pathpattern) as $filename) {
@unlink($filename);
}

// Copy the current file to this location.
$file->copy_content_to($pathname);
}

// Reset theme caches.
theme_reset_all_caches();
}
</code>

I won't show it here - but it is now easy to add a new background image setting for every layout type. I can re-use this theme_photo_update_settings_images callback for each one - so all I have to do is add the setting to the settings.php file, add the SCSS rule to the scss/post.scss file and add the lang strings to the language file.

Thats it for this tutorial, but there are [[:Category:Themes| more Themes docs]] to browse.

[[Category:Themes]]

Creating a theme based on boost

2019-03-22T01:47:02Z

Dougiamas:

{{Moodle 3.2}}
{{Template:Themes}}

This is a tutorial for how to create a new theme in any version of Moodle from 3.2 and later.

Moodle 3.2 includes a new core theme named "Boost" which is a great starting point for themers wanting to build a modern Moodle theme utilising all the latest features available to themes in Moodle. If you aren't sure where to start, then START HERE! :-)

== Getting started ==
What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.

This tutorial is based on a working theme named "theme_photo" you can download it or view the source code for it here: https://github.com/damyon/moodle-theme_photo

=== Choosing a name ===
Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.

Lets call our new example theme "photo" as we will add some settings to allow "photos" in various places in Moodle.

=== Starting files ===
As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle.

Following this guide we can start creating our theme. First we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.

<code>
/theme/photo/
</code>

Now we need to add some standard plugin files to our theme. First is version.php

''/theme/photo/version.php''

<code php>

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// This is the version of the plugin.
$plugin->version = '2016102100';

// This is the version of Moodle this plugin requires.
$plugin->requires = '2016070700';

// This is the component name of the plugin - it always starts with 'theme_'
// for themes and should be the same as the name of the folder.
$plugin->component = 'theme_photo';

// This is a list of plugins, this plugin depends on (and their versions).
$plugin->dependencies = [
'theme_boost' => '2016102100'
];

</code>

We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/.

''/theme/photo/lang/en/theme_photo.php''

<code php>

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// A description shown in the admin theme selector.
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';
// The name of our plugin.
$string['pluginname'] = 'Photo';
// We need to include a lang string for each block region.
$string['region-side-pre'] = 'Right';
</code>

=== Theme specific files ===
Theme plugins have a few more standard files they need to define.

Themes require a favicon file to show in the address bar. See [[http://docs.moodle.org/en/Favicon Favicon]].

''pix/favicon.ico''

(Image file not shown).

Themes also require an example screenshot to be displayed in the theme selector.

''pix/screenshot.jpg''

(Image file not shown).

Themes require a lib.php file. This file contains callbacks used by various API's in Moodle. Initially this file can be empty, but as we add features to our theme we will need to add some functions here.

''lib.php''
<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// We will add callbacks here as we add features to our theme.
</code>

Theme config goes in a config.php file. This is one of the most important files in our theme. Once we add this file we will be ready to test our theme for the first time.

''config.php''

<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// $THEME is defined before this page is included and we can define settings by adding properties to this global object.

// The first setting we need is the name of the theme. This should be the last part of the component name, and the same
// as the directory name for our theme.
$THEME->name = 'photo';

// This setting list the style sheets we want to include in our theme. Because we want to use SCSS instead of CSS - we won't
// list any style sheets. If we did we would list the name of a file in the /style/ folder for our theme without any css file
// extensions.
$THEME->sheets = [];

// This is a setting that can be used to provide some styling to the content in the TinyMCE text editor. This is no longer the
// default text editor and "Atto" does not need this setting so we won't provide anything. If we did it would work the same
// as the previous setting - listing a file in the /styles/ folder.
$THEME->editor_sheets = [];

// This is a critical setting. We want to inherit from theme_boost because it provides a great starting point for SCSS bootstrap4
// themes. We could add more than one parent here to inherit from multiple parents, and if we did they would be processed in
// order of importance (later themes overriding earlier ones). Things we will inherit from the parent theme include
// styles and mustache templates and some (not all) settings.
$THEME->parents = ['boost'];

// A dock is a way to take blocks out of the page and put them in a persistent floating area on the side of the page. Boost
// does not support a dock so we won't either - but look at bootstrapbase for an example of a theme with a dock.
$THEME->enable_dock = false;

// This is an old setting used to load specific CSS for some YUI JS. We don't need it in Boost based themes because Boost
// provides default styling for the YUI modules that we use. It is not recommended to use this setting anymore.
$THEME->yuicssmodules = array();

// Most themes will use this rendererfactory as this is the one that allows the theme to override any other renderer.
$THEME->rendererfactory = 'theme_overridden_renderer_factory';

// This is a list of blocks that are required to exist on all pages for this theme to function correctly. For example
// bootstrap base requires the settings and navigation blocks because otherwise there would be no way to navigate to all the
// pages in Moodle. Boost does not require these blocks because it provides other ways to navigate built into the theme.
$THEME->requiredblocks = '';

// This is a feature that tells the blocks library not to use the "Add a block" block. We don't want this in boost based themes because
// it forces a block region into the page when editing is enabled and it takes up too much room.
$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;
</code>

=== Ready set go! ===
If you have been following along - now we are at the point where we can actually install and test our new theme. Try it now by visiting the admin notifications page to install the new plugin, and then choosing the new theme from the theme selector.

[[https://docs.moodle.org/en/Standard_themes#Theme_selector Theme selector]]

When you choose the new theme - you will find that it looks exactly the same as Boost. At this point with our minimal configuration - we are inheriting almost everything from our parent theme including styles and templates. You will notice though that we don't inherit the settings from our parent theme. If you choose a different preset in Boost - it is not applied in this child theme.

<div class="warningbox">
Note: make sure your config.php file contains $THEME->hidefromselector = false; (or at least set to false) or else, your theme wont show up in theme selector.
</div>

=== What if I want the settings too? ===

<div class="warningbox">
This section is included for completeness - but it is not recommended for themes to utilise settings from their parents. To find out how to duplicate the settings from the parent theme so they operate independently skip to [[#Duplicate the settings from Boost]].
</div>

If I want the settings from Boost to apply to my child theme as well I need to know a bit about how each of the settings in Boost is applied to make them work in my child theme.

'''Setting 1 - preset.'''

The "preset" file is the file that is used as the main file for scss compilation. In Boost this is controlled by the theme config value:

''theme_boost/config.php''
<code php>
$THEME->scss = function($theme) {
return theme_boost_get_main_scss_content($theme);
};
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');
} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_boost', 'preset', 0, '/', $filename))) {
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

return $scss;
}
</code>

What this function is doing is checking for a theme setting "preset" and either fetching the file from Moodles internal file storage, or from the /preset/ folder. The function then returns the contents of this file.

It does not automatically work for our child theme because we have no setting named "preset" in our child theme and this code is not searching the theme parents for the setting. If we wanted it to apply we could do this in our child theme:

''config.php''
<code php>
// This setting defines the main scss file for our theme to be compiled. We could set it to a static file in the scss folder or to a function which returns the SCSS based on theme settings.
$THEME->scss = function($theme) {

// We need to load the config for our parent theme because that is where the preset setting is defined.
$parentconfig = theme_config::load('boost');
// Call a function from our parent themes lib.php file to fetch the content of the themes main SCSS file based on it's own config, not ours.
return theme_boost_get_main_scss_content($parentconfig);
};
</code>

'''Settings 2+3 brandcolor + scsspre'''

The way these settings work is they generate a chunk of SCSS to be prepended to the main scss file. In boost they work like this:

''theme_boost/config.php''
<code php>
$THEME->prescsscallback = 'theme_boost_get_pre_scss';
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_pre_scss($theme) {
global $CFG;

$scss = '';
$configurable = [
// Config key => [variableName, ...].
'brandcolor' => ['brand-primary'],
];

// Prepend variables first.
foreach ($configurable as $configkey => $targets) {
$value = isset($theme->settings->{$configkey}) ? $theme->settings->{$configkey} : null;
if (empty($value)) {
continue;
}
array_map(function($target) use (&$scss, $value) {
$scss .= '$' . $target . ': ' . $value . ";\n";
}, (array) $targets);
}

// Prepend pre-scss.
if (!empty($theme->settings->scsspre)) {
$scss .= $theme->settings->scsspre;
}

return $scss;
}
</code>

What this code is doing is:
* looping over a list of theme settings that map to a SCSS variable and building some SCSS to initialise that variable from the setting. In Boost there is only one * brandprimary - but if we wanted to expose more bootstrap variables as theme settings we could use this function as a template in our child theme and add more settings to the $configurable array.
* Adding all of the raw SCSS from the scsspre theme setting
* Returning the whole thing as a string to be added before the main scss file.

If we want this code to work in our child theme, using the settings from Boost we could do this:

''config.php''
<code php>
// This is a function that returns some SCSS as a string to prepend to the main SCSS file.
$THEME->prescsscallback = 'theme_photo_get_pre_scss';
</code>

''lib.php''
<code php>
// Function to return the SCSS to prepend to our main SCSS for this theme.
// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
function theme_photo_get_pre_scss($theme) {
// Load the settings from the parent.
$theme = theme_config::load('boost');
// Call the parent themes get_pre_scss function.
return theme_boost_get_pre_scss($theme);
}
</code>

'''Setting 4 scss (post)'''

The final setting from Boost is a raw text field which adds SCSS to the end of the main SCSS file. This is a useful place to add style rules as they will override previously defined styles with the same specificity. It is applied in Boost by the following lines:

''theme_boost/config.php''
<code php>
$THEME->extrascsscallback = 'theme_boost_get_extra_scss';
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_extra_scss($theme) {
return !empty($theme->settings->scss) ? $theme->settings->scss : '';
}
</code>

This is just returning the value of the setting as a string.

To make this setting apply in our child theme too - we use similar code to the previous sections.

''config.php''
<code php>
// This is a function that returns some SCSS as a string to prepend to the main SCSS file.
$THEME->extrascsscallback = 'theme_photo_get_extra_scss';
</code>

''lib.php''
<code php>
// Function to return the SCSS to append to our main SCSS for this theme.
// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
function theme_photo_get_extra_scss($theme) {
// Load the settings from the parent.
$theme = theme_config::load('boost');
// Call the parent themes get_extra_scss function.
return theme_boost_get_extra_scss($theme);
}
</code>

=== Duplicate the settings from Boost ===

This is the recommended way to extend boost as your child theme will not be affected by changes to the Boost settings, and both themes can be in use with different settings applied.

All that needs to happen is to create theme settings in the child theme that match each of the settings in the parent theme. You will need to add matching language strings for each of these settings in the language file.

This example shows how to do it - We are re-using the nice looking theme_boost_admin_settingspage_tabs class from boost and creating duplicate versions of each of the settings.

''settings.php''

<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// This is used for performance, we don't need to know about these settings on every page in Moodle, only when
// we are looking at the admin settings pages.
if ($ADMIN->fulltree) {

// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.
$settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));

// Each page is a tab - the first is the "General" tab.
$page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));

// Replicate the preset setting from boost.
$name = 'theme_photo/preset';
$title = get_string('preset', 'theme_photo');
$description = get_string('preset_desc', 'theme_photo');
$default = 'default.scss';

// We list files in our own file area to add to the drop down. We will provide our own function to
// load all the presets from the correct paths.
$context = context_system::instance();
$fs = get_file_storage();
$files = $fs->get_area_files($context->id, 'theme_photo', 'preset', 0, 'itemid, filepath, filename', false);

$choices = [];
foreach ($files as $file) {
$choices[$file->get_filename()] = $file->get_filename();
}
// These are the built in presets from Boost.
$choices['default.scss'] = 'default.scss';
$choices['plain.scss'] = 'plain.scss';

$setting = new admin_setting_configselect($name, $title, $description, $default, $choices);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Preset files setting.
$name = 'theme_photo/presetfiles';
$title = get_string('presetfiles','theme_photo');
$description = get_string('presetfiles_desc', 'theme_photo');

$setting = new admin_setting_configstoredfile($name, $title, $description, 'preset', 0,
array('maxfiles' => 20, 'accepted_types' => array('.scss')));
$page->add($setting);

// Variable $brand-color.
// We use an empty default value because the default colour should come from the preset.
$name = 'theme_photo/brandcolor';
$title = get_string('brandcolor', 'theme_photo');
$description = get_string('brandcolor_desc', 'theme_photo');
$setting = new admin_setting_configcolourpicker($name, $title, $description, '');
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Must add the page after definiting all the settings!
$settings->add($page);

// Advanced settings.
$page = new admin_settingpage('theme_photo_advanced', get_string('advancedsettings', 'theme_photo'));

// Raw SCSS to include before the content.
$setting = new admin_setting_configtextarea('theme_photo/scsspre',
get_string('rawscsspre', 'theme_photo'), get_string('rawscsspre_desc', 'theme_photo'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Raw SCSS to include after the content.
$setting = new admin_setting_configtextarea('theme_photo/scss', get_string('rawscss', 'theme_photo'),
get_string('rawscss_desc', 'theme_photo'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

$settings->add($page);
}
</code>

''lang/en/theme_photo.php''
<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();
// The name of the second tab in the theme settings.
$string['advancedsettings'] = 'Advanced settings';
// The brand colour setting.
$string['brandcolor'] = 'Brand colour';
// The brand colour setting description.
$string['brandcolor_desc'] = 'The accent colour.';
// A description shown in the admin theme selector.
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';
// Name of the settings pages.
$string['configtitle'] = 'Photo settings';
// Name of the first settings tab.
$string['generalsettings'] = 'General settings';
// The name of our plugin.
$string['pluginname'] = 'Photo';
// Preset files setting.
$string['presetfiles'] = 'Additional theme preset files';
// Preset files help text.
$string['presetfiles_desc'] = 'Preset files can be used to dramatically alter the appearance of the theme. See <a href=https://docs.moodle.org/dev/Boost_Presets>Boost presets</a> for information on creating and sharing your own preset files, and see the <a href=http://moodle.net/boost>Presets repository</a> for presets that others have shared.';
// Preset setting.
$string['preset'] = 'Theme preset';
// Preset help text.
$string['preset_desc'] = 'Pick a preset to broadly change the look of the theme.';
// Raw SCSS setting.
$string['rawscss'] = 'Raw SCSS';
// Raw SCSS setting help text.
$string['rawscss_desc'] = 'Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet.';
// Raw initial SCSS setting.
$string['rawscsspre'] = 'Raw initial SCSS';
// Raw initial SCSS setting help text.
$string['rawscsspre_desc'] = 'In this field you can provide initialising SCSS code, it will be injected before everything else. Most of the time you will use this setting to define variables.';
// We need to include a lang string for each block region.
$string['region-side-pre'] = 'Right';
</code>

We aren't quite there yet as you will notice if you try and upload a preset file and then choose it. The "theme_boost_get_main_scss_content" function from Boost is expecting the preset files to be stored in a file area for theme_boost only. We need to add this function to our own theme and tweak it.

''config.php''
<code php>
// This is the function that returns the SCSS source for the main file in our theme. We override the boost version because
// we want to allow presets uploaded to our own theme file area to be selected in the preset list.
$THEME->scss = function($theme) {
return theme_photo_get_main_scss_content($theme);
};
</code>

''lib.php''
<code php>
function theme_photo_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');

} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {
// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

return $scss;
}
</code>

=== Stop and try it out ===
So now what is working and what isn't. Well - everything should be working and you should have a nice new theme extending boost with it's own settings pages. When Boost gets updates for bug fixes your new theme will inherit those fixes as it inherits all the SCSS and templates from theme boost. In addition your new theme will accept preset files and supports all the same features and settings as boost, ready to add more.

== Take it further ==
Now we have our very nice starting point we can start changing or adding features, customising templates and output or tweaking the SCSS.

=== Add some new settings ===

From this point in the tutorial we will start adding features to our theme to extend it and make it AWESOME!

Lets start with a new setting to set a background image on the login page. As you saw earlier, our theme defines it's list of settings in a file called settings.php. See [[Admin settings]] for more information about adding admin settings to any plugin. All of the different kinds of admin settings can be found in lib/adminlib.php. In our case we will want to add a setting which allows an admin to upload an image file. This is an "admin_setting_configstoredfile" and we add it to our theme by adding this code to the settings.php file (inside the "if ($ADMIN->fulltree) {" condition.

''settings.php''
<code php>
// Login page background setting.
// We use variables for readability.
$name = 'theme_photo/loginbackgroundimage';
$title = get_string('loginbackgroundimage', 'theme_photo');
$description = get_string('loginbackgroundimage_desc', 'theme_photo');
// This creates the new setting.
$setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');
// This means that theme caches will automatically be cleared when this setting is changed.
$setting->set_updatedcallback('theme_reset_all_caches');
// We always have to add the setting to a page for it to have any effect.
$page->add($setting);
</code>

We also need to add new lang strings to our language file.

"lang/en/theme_photo.php"
<code php>
// Background image for login page.
$string['loginbackgroundimage'] = 'Login page background image';
// Background image for login page.
$string['loginbackgroundimage_desc'] = 'An image that will be stretched to fill the background of the login page.';
</code>

Now we have a new setting that lets us upload a file - but it doesn't actually do anything yet. We need to update the theme to set this image background on the login page.

In order to change the SCSS for our theme we will add 2 additional SCSS files and include them before and after our main scss.

We already have a function in our lib.php file which fetches the main SCSS for our theme. This is a good point to include additional SCSS files. We can add 2 lines to the end of this function to achieve this.

''lib.php''
<code php>
function theme_photo_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');

} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {
// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

// Pre CSS - this is loaded AFTER any prescss from the setting but before the main scss.
$pre = file_get_contents($CFG->dirroot . '/theme/photo/scss/pre.scss');
// Post CSS - this is loaded AFTER the main scss but before the extra scss from the setting.
$post = file_get_contents($CFG->dirroot . '/theme/photo/scss/post.scss');

// Combine them together.
return $pre . "\n" . $scss . "\n" . $post;
}
</code>

''scss/pre.scss''
<code scss>
// Pre SCSS for the theme.
</code>

''scss/post.scss''
<code scss>
// Post SCSS for the theme.
</code>

==== Why do we use pre and post SCSS? ====
SCSS/SASS is a powerful language for creating CSS. It supports variables, functions, loops just like php. For lots of information and an introduction to SCSS read about [https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass on wikipedia].

'''Pre SCSS'''

In Boost we use many variables when creating style rules.

When declaring a variable in SCSS - it is best practice to define it like this:
<code scss>
$mycoolcolour: #FF0 !default;
</code>

What this means is - if this variable is not defined already - set it to the hex value '#FF0';

So by setting this variable in some PRE scss we can override the default the value of this variable everywhere it is used. Boost is built with the [https://v4-alpha.getbootstrap.com/ Bootstrap 4 (Alpha 4)] CSS Framework. This is a framework which uses SCSS to provide many extremely useful layouts and components which can be reused without adding specific CSS rules to style every page. Because bootstrap consistently uses variables we can customise many of these components easily by setting the value of the variables before we include the Bootstrap SCSS files.

Many variables are available in /theme/boost/scss/bootstrap/_variables.scss - as an example we can change the look of all buttons and input fields with this one variable:

<code scss>
$border-radius: 8px;
</code>

'''Post SCSS'''

Post SCSS is useful for defining full CSS rules. Because they are included last, they override any previous matching selector with the same [https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Specificity Specificity].

=== Tips for customising Moodle with SCSS (or CSS) ===
Some handy things to know when you are new to theming is that Moodle adds some classes to every page that helps you target a specific page or set of pages with some style rules.

If you inspect a moodle page and look at the body tag you will see a long list of classes e.g.

<code html>
<body id="page-course-view-weeks" class="format-weeks path-course path-course-view safari dir-ltr lang-en yui-skin-sam yui3-skin-sam damyon-per-in-moodle-com--stable_master pagelayout-course course-11 context-497 category-1 drawer-open-left jsenabled">
</code>

You can see from this example that each page gets an id. This is a simplified representation of the current page in the navigation. In this example we are looking at the course page and this course is using the weeks format.

The classes on the body tag can also be used to target a page or set of pages.
* <code>format-weeks</code> The course format
* <code>path-course path-course-view</code> The parts of the bread-crumb leading up to the current page (The current page is what goes in the id)
* <code>safari</code> Some server side guessing of the browser type - it's not accurate so I would not rely on it
* <code>dir-ltr</code> The direction of the current language for the page ( dir-rtl for RTL languages )
* <code>lang-en</code> The current language of the page
* <code>yui*</code> Legacy yui classes - ignore these
* <code>damyon-per-in-moodle-com--stable_master</code> The current hostname for the site + the site name
* <code>pagelayout-course</code> The layout type for the current page
* <code>course-11</code> The id of the current course
* <code>context-497</code> The current context id
* <code>category-1</code> The category for the current course
* <code>drawer-open-left</code> Added / removed when the navigation drawer is opened / closed in Boost
* <code>jsenabled</code> True if the browser supports javascript

[https://docs.moodle.org/dev/Themes_overview#.3Cbody.3E_CSS_id_and_classes Read about Body id and classes].

In our example the page layout is the most useful here as we have a specific page layout for login pages. We can now craft a rule that applies a background image only to login pages using "body.pagelayout-login".

=== How do we refer to an image in SCSS ? ===
So now we can add a rule to the post.scss which will set the background image for the login page. First we need to know how to construct a url to the background images from our stylesheet.

In stylesheets in Moodle we can use a special pix tag to refer to images from our theme. The rule to attach the background image looks like this:
''scss/post.scss''
<code scss>
body.pagelayout-login {
background-image: url([[pix:theme_photo|loginbackgroundimage]]);
background-size: cover;
}
</code>

There are 2 important parts to this tag (the bit in square brackets). The first is "theme_photo". In this case we are passing a component name, the image serving code in theme_config::resolve_image_location() will then look for an image file in several locations. One of these is in "$CFG->dataroot/pix_plugins/$type/$plugin/$image". We can use this to make sure the image gets served correctly by copying the file saved in the setting to this location every time it is updated. (There is an alterative way we could do this by implementing pluginfile.php in our theme - which you can read about in the [[File API]] ).

If we had just passed the value "theme" the image serving code would have looked for the image in the "pix" folder of our theme.

So - we need this final change to copy the image file into our dataroot each time the setting is changed.

In the settings file we will update the callback to a new function which we will define in our lib.php.
''settings.php''
<code php>

// Login page background setting.
// We use variables for readability.
$name = 'theme_photo/loginbackgroundimage';
$title = get_string('loginbackgroundimage', 'theme_photo');
$description = get_string('loginbackgroundimage_desc', 'theme_photo');
// This creates the new setting.
$setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');
// This function will copy the image into the data_root location it can be served from.
$setting->set_updatedcallback('theme_photo_update_settings_images');
// We always have to add the setting to a page for it to have any effect.
$page->add($setting);
</code>

''lib.php''
<code php>
function theme_photo_update_settings_images($settingname) {
global $CFG;

// The setting name that was updated comes as a string like 's_theme_photo_loginbackgroundimage'.
// We split it on '_' characters.
$parts = explode('_', $settingname);
// And get the last one to get the setting name..
$settingname = end($parts);

// Admin settings are stored in system context.
$syscontext = context_system::instance();
// This is the component name the setting is stored in.
$component = 'theme_photo';

// This is the value of the admin setting which is the filename of the uploaded file.
$filename = get_config($component, $settingname);
// We extract the file extension because we want to preserve it.
$extension = substr($filename, strrpos($filename, '.') + 1);

// This is the path in the moodle internal file system.
$fullpath = "/{$syscontext->id}/{$component}/{$settingname}/0{$filename}";
// Get an instance of the moodle file storage.
$fs = get_file_storage();
// This is an efficient way to get a file if we know the exact path.
if ($file = $fs->get_file_by_hash(sha1($fullpath))) {
// We got the stored file - copy it to dataroot.
// This location matches the searched for location in theme_config::resolve_image_location.
$pathname = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.' . $extension;

// This pattern matches any previous files with maybe different file extensions.
$pathpattern = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.*';

// Make sure this dir exists.
@mkdir($CFG->dataroot . '/pix_plugins/theme/photo/', $CFG->directorypermissions, true);

// Delete any existing files for this setting.
foreach (glob($pathpattern) as $filename) {
@unlink($filename);
}

// Copy the current file to this location.
$file->copy_content_to($pathname);
}

// Reset theme caches.
theme_reset_all_caches();
}
</code>

I won't show it here - but it is now easy to add a new background image setting for every layout type. I can re-use this theme_photo_update_settings_images callback for each one - so all I have to do is add the setting to the settings.php file, add the SCSS rule to the scss/post.scss file and add the lang strings to the language file.

Thats it for this tutorial, but there are [[:Category:Themes| more Themes docs]] to browse.

[[Category:Themes]]

Creating a theme based on boost

2019-03-22T01:46:39Z

Dougiamas:

{{Moodle 3.2}}
{{Template:Themes}}

This is a tutorial for how to create a new theme in Moodle 3.2.

Moodle 3.2 includes a new core theme named "Boost" which is a great starting point for themers wanting to build a modern Moodle theme utilising all the latest features available to themes in Moodle. If you aren't sure where to start, then START HERE! :-)

== Getting started ==
What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.

This tutorial is based on a working theme named "theme_photo" you can download it or view the source code for it here: https://github.com/damyon/moodle-theme_photo

=== Choosing a name ===
Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.

Lets call our new example theme "photo" as we will add some settings to allow "photos" in various places in Moodle.

=== Starting files ===
As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle.

Following this guide we can start creating our theme. First we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.

<code>
/theme/photo/
</code>

Now we need to add some standard plugin files to our theme. First is version.php

''/theme/photo/version.php''

<code php>

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// This is the version of the plugin.
$plugin->version = '2016102100';

// This is the version of Moodle this plugin requires.
$plugin->requires = '2016070700';

// This is the component name of the plugin - it always starts with 'theme_'
// for themes and should be the same as the name of the folder.
$plugin->component = 'theme_photo';

// This is a list of plugins, this plugin depends on (and their versions).
$plugin->dependencies = [
'theme_boost' => '2016102100'
];

</code>

We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/.

''/theme/photo/lang/en/theme_photo.php''

<code php>

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// A description shown in the admin theme selector.
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';
// The name of our plugin.
$string['pluginname'] = 'Photo';
// We need to include a lang string for each block region.
$string['region-side-pre'] = 'Right';
</code>

=== Theme specific files ===
Theme plugins have a few more standard files they need to define.

Themes require a favicon file to show in the address bar. See [[http://docs.moodle.org/en/Favicon Favicon]].

''pix/favicon.ico''

(Image file not shown).

Themes also require an example screenshot to be displayed in the theme selector.

''pix/screenshot.jpg''

(Image file not shown).

Themes require a lib.php file. This file contains callbacks used by various API's in Moodle. Initially this file can be empty, but as we add features to our theme we will need to add some functions here.

''lib.php''
<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// We will add callbacks here as we add features to our theme.
</code>

Theme config goes in a config.php file. This is one of the most important files in our theme. Once we add this file we will be ready to test our theme for the first time.

''config.php''

<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// $THEME is defined before this page is included and we can define settings by adding properties to this global object.

// The first setting we need is the name of the theme. This should be the last part of the component name, and the same
// as the directory name for our theme.
$THEME->name = 'photo';

// This setting list the style sheets we want to include in our theme. Because we want to use SCSS instead of CSS - we won't
// list any style sheets. If we did we would list the name of a file in the /style/ folder for our theme without any css file
// extensions.
$THEME->sheets = [];

// This is a setting that can be used to provide some styling to the content in the TinyMCE text editor. This is no longer the
// default text editor and "Atto" does not need this setting so we won't provide anything. If we did it would work the same
// as the previous setting - listing a file in the /styles/ folder.
$THEME->editor_sheets = [];

// This is a critical setting. We want to inherit from theme_boost because it provides a great starting point for SCSS bootstrap4
// themes. We could add more than one parent here to inherit from multiple parents, and if we did they would be processed in
// order of importance (later themes overriding earlier ones). Things we will inherit from the parent theme include
// styles and mustache templates and some (not all) settings.
$THEME->parents = ['boost'];

// A dock is a way to take blocks out of the page and put them in a persistent floating area on the side of the page. Boost
// does not support a dock so we won't either - but look at bootstrapbase for an example of a theme with a dock.
$THEME->enable_dock = false;

// This is an old setting used to load specific CSS for some YUI JS. We don't need it in Boost based themes because Boost
// provides default styling for the YUI modules that we use. It is not recommended to use this setting anymore.
$THEME->yuicssmodules = array();

// Most themes will use this rendererfactory as this is the one that allows the theme to override any other renderer.
$THEME->rendererfactory = 'theme_overridden_renderer_factory';

// This is a list of blocks that are required to exist on all pages for this theme to function correctly. For example
// bootstrap base requires the settings and navigation blocks because otherwise there would be no way to navigate to all the
// pages in Moodle. Boost does not require these blocks because it provides other ways to navigate built into the theme.
$THEME->requiredblocks = '';

// This is a feature that tells the blocks library not to use the "Add a block" block. We don't want this in boost based themes because
// it forces a block region into the page when editing is enabled and it takes up too much room.
$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;
</code>

=== Ready set go! ===
If you have been following along - now we are at the point where we can actually install and test our new theme. Try it now by visiting the admin notifications page to install the new plugin, and then choosing the new theme from the theme selector.

[[https://docs.moodle.org/en/Standard_themes#Theme_selector Theme selector]]

When you choose the new theme - you will find that it looks exactly the same as Boost. At this point with our minimal configuration - we are inheriting almost everything from our parent theme including styles and templates. You will notice though that we don't inherit the settings from our parent theme. If you choose a different preset in Boost - it is not applied in this child theme.

<div class="warningbox">
Note: make sure your config.php file contains $THEME->hidefromselector = false; (or at least set to false) or else, your theme wont show up in theme selector.
</div>

=== What if I want the settings too? ===

<div class="warningbox">
This section is included for completeness - but it is not recommended for themes to utilise settings from their parents. To find out how to duplicate the settings from the parent theme so they operate independently skip to [[#Duplicate the settings from Boost]].
</div>

If I want the settings from Boost to apply to my child theme as well I need to know a bit about how each of the settings in Boost is applied to make them work in my child theme.

'''Setting 1 - preset.'''

The "preset" file is the file that is used as the main file for scss compilation. In Boost this is controlled by the theme config value:

''theme_boost/config.php''
<code php>
$THEME->scss = function($theme) {
return theme_boost_get_main_scss_content($theme);
};
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');
} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_boost', 'preset', 0, '/', $filename))) {
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

return $scss;
}
</code>

What this function is doing is checking for a theme setting "preset" and either fetching the file from Moodles internal file storage, or from the /preset/ folder. The function then returns the contents of this file.

It does not automatically work for our child theme because we have no setting named "preset" in our child theme and this code is not searching the theme parents for the setting. If we wanted it to apply we could do this in our child theme:

''config.php''
<code php>
// This setting defines the main scss file for our theme to be compiled. We could set it to a static file in the scss folder or to a function which returns the SCSS based on theme settings.
$THEME->scss = function($theme) {

// We need to load the config for our parent theme because that is where the preset setting is defined.
$parentconfig = theme_config::load('boost');
// Call a function from our parent themes lib.php file to fetch the content of the themes main SCSS file based on it's own config, not ours.
return theme_boost_get_main_scss_content($parentconfig);
};
</code>

'''Settings 2+3 brandcolor + scsspre'''

The way these settings work is they generate a chunk of SCSS to be prepended to the main scss file. In boost they work like this:

''theme_boost/config.php''
<code php>
$THEME->prescsscallback = 'theme_boost_get_pre_scss';
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_pre_scss($theme) {
global $CFG;

$scss = '';
$configurable = [
// Config key => [variableName, ...].
'brandcolor' => ['brand-primary'],
];

// Prepend variables first.
foreach ($configurable as $configkey => $targets) {
$value = isset($theme->settings->{$configkey}) ? $theme->settings->{$configkey} : null;
if (empty($value)) {
continue;
}
array_map(function($target) use (&$scss, $value) {
$scss .= '$' . $target . ': ' . $value . ";\n";
}, (array) $targets);
}

// Prepend pre-scss.
if (!empty($theme->settings->scsspre)) {
$scss .= $theme->settings->scsspre;
}

return $scss;
}
</code>

What this code is doing is:
* looping over a list of theme settings that map to a SCSS variable and building some SCSS to initialise that variable from the setting. In Boost there is only one * brandprimary - but if we wanted to expose more bootstrap variables as theme settings we could use this function as a template in our child theme and add more settings to the $configurable array.
* Adding all of the raw SCSS from the scsspre theme setting
* Returning the whole thing as a string to be added before the main scss file.

If we want this code to work in our child theme, using the settings from Boost we could do this:

''config.php''
<code php>
// This is a function that returns some SCSS as a string to prepend to the main SCSS file.
$THEME->prescsscallback = 'theme_photo_get_pre_scss';
</code>

''lib.php''
<code php>
// Function to return the SCSS to prepend to our main SCSS for this theme.
// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
function theme_photo_get_pre_scss($theme) {
// Load the settings from the parent.
$theme = theme_config::load('boost');
// Call the parent themes get_pre_scss function.
return theme_boost_get_pre_scss($theme);
}
</code>

'''Setting 4 scss (post)'''

The final setting from Boost is a raw text field which adds SCSS to the end of the main SCSS file. This is a useful place to add style rules as they will override previously defined styles with the same specificity. It is applied in Boost by the following lines:

''theme_boost/config.php''
<code php>
$THEME->extrascsscallback = 'theme_boost_get_extra_scss';
</code>
''theme_boost/lib.php''
<code php>
function theme_boost_get_extra_scss($theme) {
return !empty($theme->settings->scss) ? $theme->settings->scss : '';
}
</code>

This is just returning the value of the setting as a string.

To make this setting apply in our child theme too - we use similar code to the previous sections.

''config.php''
<code php>
// This is a function that returns some SCSS as a string to prepend to the main SCSS file.
$THEME->extrascsscallback = 'theme_photo_get_extra_scss';
</code>

''lib.php''
<code php>
// Function to return the SCSS to append to our main SCSS for this theme.
// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
function theme_photo_get_extra_scss($theme) {
// Load the settings from the parent.
$theme = theme_config::load('boost');
// Call the parent themes get_extra_scss function.
return theme_boost_get_extra_scss($theme);
}
</code>

=== Duplicate the settings from Boost ===

This is the recommended way to extend boost as your child theme will not be affected by changes to the Boost settings, and both themes can be in use with different settings applied.

All that needs to happen is to create theme settings in the child theme that match each of the settings in the parent theme. You will need to add matching language strings for each of these settings in the language file.

This example shows how to do it - We are re-using the nice looking theme_boost_admin_settingspage_tabs class from boost and creating duplicate versions of each of the settings.

''settings.php''

<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();

// This is used for performance, we don't need to know about these settings on every page in Moodle, only when
// we are looking at the admin settings pages.
if ($ADMIN->fulltree) {

// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.
$settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));

// Each page is a tab - the first is the "General" tab.
$page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));

// Replicate the preset setting from boost.
$name = 'theme_photo/preset';
$title = get_string('preset', 'theme_photo');
$description = get_string('preset_desc', 'theme_photo');
$default = 'default.scss';

// We list files in our own file area to add to the drop down. We will provide our own function to
// load all the presets from the correct paths.
$context = context_system::instance();
$fs = get_file_storage();
$files = $fs->get_area_files($context->id, 'theme_photo', 'preset', 0, 'itemid, filepath, filename', false);

$choices = [];
foreach ($files as $file) {
$choices[$file->get_filename()] = $file->get_filename();
}
// These are the built in presets from Boost.
$choices['default.scss'] = 'default.scss';
$choices['plain.scss'] = 'plain.scss';

$setting = new admin_setting_configselect($name, $title, $description, $default, $choices);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Preset files setting.
$name = 'theme_photo/presetfiles';
$title = get_string('presetfiles','theme_photo');
$description = get_string('presetfiles_desc', 'theme_photo');

$setting = new admin_setting_configstoredfile($name, $title, $description, 'preset', 0,
array('maxfiles' => 20, 'accepted_types' => array('.scss')));
$page->add($setting);

// Variable $brand-color.
// We use an empty default value because the default colour should come from the preset.
$name = 'theme_photo/brandcolor';
$title = get_string('brandcolor', 'theme_photo');
$description = get_string('brandcolor_desc', 'theme_photo');
$setting = new admin_setting_configcolourpicker($name, $title, $description, '');
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Must add the page after definiting all the settings!
$settings->add($page);

// Advanced settings.
$page = new admin_settingpage('theme_photo_advanced', get_string('advancedsettings', 'theme_photo'));

// Raw SCSS to include before the content.
$setting = new admin_setting_configtextarea('theme_photo/scsspre',
get_string('rawscsspre', 'theme_photo'), get_string('rawscsspre_desc', 'theme_photo'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Raw SCSS to include after the content.
$setting = new admin_setting_configtextarea('theme_photo/scss', get_string('rawscss', 'theme_photo'),
get_string('rawscss_desc', 'theme_photo'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

$settings->add($page);
}
</code>

''lang/en/theme_photo.php''
<code php>
<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.
defined('MOODLE_INTERNAL') || die();
// The name of the second tab in the theme settings.
$string['advancedsettings'] = 'Advanced settings';
// The brand colour setting.
$string['brandcolor'] = 'Brand colour';
// The brand colour setting description.
$string['brandcolor_desc'] = 'The accent colour.';
// A description shown in the admin theme selector.
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';
// Name of the settings pages.
$string['configtitle'] = 'Photo settings';
// Name of the first settings tab.
$string['generalsettings'] = 'General settings';
// The name of our plugin.
$string['pluginname'] = 'Photo';
// Preset files setting.
$string['presetfiles'] = 'Additional theme preset files';
// Preset files help text.
$string['presetfiles_desc'] = 'Preset files can be used to dramatically alter the appearance of the theme. See <a href=https://docs.moodle.org/dev/Boost_Presets>Boost presets</a> for information on creating and sharing your own preset files, and see the <a href=http://moodle.net/boost>Presets repository</a> for presets that others have shared.';
// Preset setting.
$string['preset'] = 'Theme preset';
// Preset help text.
$string['preset_desc'] = 'Pick a preset to broadly change the look of the theme.';
// Raw SCSS setting.
$string['rawscss'] = 'Raw SCSS';
// Raw SCSS setting help text.
$string['rawscss_desc'] = 'Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet.';
// Raw initial SCSS setting.
$string['rawscsspre'] = 'Raw initial SCSS';
// Raw initial SCSS setting help text.
$string['rawscsspre_desc'] = 'In this field you can provide initialising SCSS code, it will be injected before everything else. Most of the time you will use this setting to define variables.';
// We need to include a lang string for each block region.
$string['region-side-pre'] = 'Right';
</code>

We aren't quite there yet as you will notice if you try and upload a preset file and then choose it. The "theme_boost_get_main_scss_content" function from Boost is expecting the preset files to be stored in a file area for theme_boost only. We need to add this function to our own theme and tweak it.

''config.php''
<code php>
// This is the function that returns the SCSS source for the main file in our theme. We override the boost version because
// we want to allow presets uploaded to our own theme file area to be selected in the preset list.
$THEME->scss = function($theme) {
return theme_photo_get_main_scss_content($theme);
};
</code>

''lib.php''
<code php>
function theme_photo_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');

} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {
// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

return $scss;
}
</code>

=== Stop and try it out ===
So now what is working and what isn't. Well - everything should be working and you should have a nice new theme extending boost with it's own settings pages. When Boost gets updates for bug fixes your new theme will inherit those fixes as it inherits all the SCSS and templates from theme boost. In addition your new theme will accept preset files and supports all the same features and settings as boost, ready to add more.

== Take it further ==
Now we have our very nice starting point we can start changing or adding features, customising templates and output or tweaking the SCSS.

=== Add some new settings ===

From this point in the tutorial we will start adding features to our theme to extend it and make it AWESOME!

Lets start with a new setting to set a background image on the login page. As you saw earlier, our theme defines it's list of settings in a file called settings.php. See [[Admin settings]] for more information about adding admin settings to any plugin. All of the different kinds of admin settings can be found in lib/adminlib.php. In our case we will want to add a setting which allows an admin to upload an image file. This is an "admin_setting_configstoredfile" and we add it to our theme by adding this code to the settings.php file (inside the "if ($ADMIN->fulltree) {" condition.

''settings.php''
<code php>
// Login page background setting.
// We use variables for readability.
$name = 'theme_photo/loginbackgroundimage';
$title = get_string('loginbackgroundimage', 'theme_photo');
$description = get_string('loginbackgroundimage_desc', 'theme_photo');
// This creates the new setting.
$setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');
// This means that theme caches will automatically be cleared when this setting is changed.
$setting->set_updatedcallback('theme_reset_all_caches');
// We always have to add the setting to a page for it to have any effect.
$page->add($setting);
</code>

We also need to add new lang strings to our language file.

"lang/en/theme_photo.php"
<code php>
// Background image for login page.
$string['loginbackgroundimage'] = 'Login page background image';
// Background image for login page.
$string['loginbackgroundimage_desc'] = 'An image that will be stretched to fill the background of the login page.';
</code>

Now we have a new setting that lets us upload a file - but it doesn't actually do anything yet. We need to update the theme to set this image background on the login page.

In order to change the SCSS for our theme we will add 2 additional SCSS files and include them before and after our main scss.

We already have a function in our lib.php file which fetches the main SCSS for our theme. This is a good point to include additional SCSS files. We can add 2 lines to the end of this function to achieve this.

''lib.php''
<code php>
function theme_photo_get_main_scss_content($theme) {
global $CFG;

$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();

$context = context_system::instance();
if ($filename == 'default.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');

} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {
// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}

// Pre CSS - this is loaded AFTER any prescss from the setting but before the main scss.
$pre = file_get_contents($CFG->dirroot . '/theme/photo/scss/pre.scss');
// Post CSS - this is loaded AFTER the main scss but before the extra scss from the setting.
$post = file_get_contents($CFG->dirroot . '/theme/photo/scss/post.scss');

// Combine them together.
return $pre . "\n" . $scss . "\n" . $post;
}
</code>

''scss/pre.scss''
<code scss>
// Pre SCSS for the theme.
</code>

''scss/post.scss''
<code scss>
// Post SCSS for the theme.
</code>

==== Why do we use pre and post SCSS? ====
SCSS/SASS is a powerful language for creating CSS. It supports variables, functions, loops just like php. For lots of information and an introduction to SCSS read about [https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass on wikipedia].

'''Pre SCSS'''

In Boost we use many variables when creating style rules.

When declaring a variable in SCSS - it is best practice to define it like this:
<code scss>
$mycoolcolour: #FF0 !default;
</code>

What this means is - if this variable is not defined already - set it to the hex value '#FF0';

So by setting this variable in some PRE scss we can override the default the value of this variable everywhere it is used. Boost is built with the [https://v4-alpha.getbootstrap.com/ Bootstrap 4 (Alpha 4)] CSS Framework. This is a framework which uses SCSS to provide many extremely useful layouts and components which can be reused without adding specific CSS rules to style every page. Because bootstrap consistently uses variables we can customise many of these components easily by setting the value of the variables before we include the Bootstrap SCSS files.

Many variables are available in /theme/boost/scss/bootstrap/_variables.scss - as an example we can change the look of all buttons and input fields with this one variable:

<code scss>
$border-radius: 8px;
</code>

'''Post SCSS'''

Post SCSS is useful for defining full CSS rules. Because they are included last, they override any previous matching selector with the same [https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Specificity Specificity].

=== Tips for customising Moodle with SCSS (or CSS) ===
Some handy things to know when you are new to theming is that Moodle adds some classes to every page that helps you target a specific page or set of pages with some style rules.

If you inspect a moodle page and look at the body tag you will see a long list of classes e.g.

<code html>
<body id="page-course-view-weeks" class="format-weeks path-course path-course-view safari dir-ltr lang-en yui-skin-sam yui3-skin-sam damyon-per-in-moodle-com--stable_master pagelayout-course course-11 context-497 category-1 drawer-open-left jsenabled">
</code>

You can see from this example that each page gets an id. This is a simplified representation of the current page in the navigation. In this example we are looking at the course page and this course is using the weeks format.

The classes on the body tag can also be used to target a page or set of pages.
* <code>format-weeks</code> The course format
* <code>path-course path-course-view</code> The parts of the bread-crumb leading up to the current page (The current page is what goes in the id)
* <code>safari</code> Some server side guessing of the browser type - it's not accurate so I would not rely on it
* <code>dir-ltr</code> The direction of the current language for the page ( dir-rtl for RTL languages )
* <code>lang-en</code> The current language of the page
* <code>yui*</code> Legacy yui classes - ignore these
* <code>damyon-per-in-moodle-com--stable_master</code> The current hostname for the site + the site name
* <code>pagelayout-course</code> The layout type for the current page
* <code>course-11</code> The id of the current course
* <code>context-497</code> The current context id
* <code>category-1</code> The category for the current course
* <code>drawer-open-left</code> Added / removed when the navigation drawer is opened / closed in Boost
* <code>jsenabled</code> True if the browser supports javascript

[https://docs.moodle.org/dev/Themes_overview#.3Cbody.3E_CSS_id_and_classes Read about Body id and classes].

In our example the page layout is the most useful here as we have a specific page layout for login pages. We can now craft a rule that applies a background image only to login pages using "body.pagelayout-login".

=== How do we refer to an image in SCSS ? ===
So now we can add a rule to the post.scss which will set the background image for the login page. First we need to know how to construct a url to the background images from our stylesheet.

In stylesheets in Moodle we can use a special pix tag to refer to images from our theme. The rule to attach the background image looks like this:
''scss/post.scss''
<code scss>
body.pagelayout-login {
background-image: url([[pix:theme_photo|loginbackgroundimage]]);
background-size: cover;
}
</code>

There are 2 important parts to this tag (the bit in square brackets). The first is "theme_photo". In this case we are passing a component name, the image serving code in theme_config::resolve_image_location() will then look for an image file in several locations. One of these is in "$CFG->dataroot/pix_plugins/$type/$plugin/$image". We can use this to make sure the image gets served correctly by copying the file saved in the setting to this location every time it is updated. (There is an alterative way we could do this by implementing pluginfile.php in our theme - which you can read about in the [[File API]] ).

If we had just passed the value "theme" the image serving code would have looked for the image in the "pix" folder of our theme.

So - we need this final change to copy the image file into our dataroot each time the setting is changed.

In the settings file we will update the callback to a new function which we will define in our lib.php.
''settings.php''
<code php>

// Login page background setting.
// We use variables for readability.
$name = 'theme_photo/loginbackgroundimage';
$title = get_string('loginbackgroundimage', 'theme_photo');
$description = get_string('loginbackgroundimage_desc', 'theme_photo');
// This creates the new setting.
$setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');
// This function will copy the image into the data_root location it can be served from.
$setting->set_updatedcallback('theme_photo_update_settings_images');
// We always have to add the setting to a page for it to have any effect.
$page->add($setting);
</code>

''lib.php''
<code php>
function theme_photo_update_settings_images($settingname) {
global $CFG;

// The setting name that was updated comes as a string like 's_theme_photo_loginbackgroundimage'.
// We split it on '_' characters.
$parts = explode('_', $settingname);
// And get the last one to get the setting name..
$settingname = end($parts);

// Admin settings are stored in system context.
$syscontext = context_system::instance();
// This is the component name the setting is stored in.
$component = 'theme_photo';

// This is the value of the admin setting which is the filename of the uploaded file.
$filename = get_config($component, $settingname);
// We extract the file extension because we want to preserve it.
$extension = substr($filename, strrpos($filename, '.') + 1);

// This is the path in the moodle internal file system.
$fullpath = "/{$syscontext->id}/{$component}/{$settingname}/0{$filename}";
// Get an instance of the moodle file storage.
$fs = get_file_storage();
// This is an efficient way to get a file if we know the exact path.
if ($file = $fs->get_file_by_hash(sha1($fullpath))) {
// We got the stored file - copy it to dataroot.
// This location matches the searched for location in theme_config::resolve_image_location.
$pathname = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.' . $extension;

// This pattern matches any previous files with maybe different file extensions.
$pathpattern = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.*';

// Make sure this dir exists.
@mkdir($CFG->dataroot . '/pix_plugins/theme/photo/', $CFG->directorypermissions, true);

// Delete any existing files for this setting.
foreach (glob($pathpattern) as $filename) {
@unlink($filename);
}

// Copy the current file to this location.
$file->copy_content_to($pathname);
}

// Reset theme caches.
theme_reset_all_caches();
}
</code>

I won't show it here - but it is now easy to add a new background image setting for every layout type. I can re-use this theme_photo_update_settings_images callback for each one - so all I have to do is add the setting to the settings.php file, add the SCSS rule to the scss/post.scss file and add the lang strings to the language file.

Thats it for this tutorial, but there are [[:Category:Themes| more Themes docs]] to browse.

[[Category:Themes]]

Chat

2019-03-16T07:03:47Z

Dougiamas:

Moodle developer community members meet and discuss moodle development techniques and problems in an online Moodle Dev Chat.

We use a public [https://telegram.me/moodledev Telegram room called moodledev].

Everybody is welcome to join, given the following policies are respected.

Are you a student looking for [[GSOC| GSOC 2019]]?

=== Moodle Dev Chat policies ===

; Don't use the chat to get support for using Moodle: There are [https://moodle.org/course moodle.org forums] for that, or talk to a [http://moodle.com/partners Moodle Partner]
; Be nice: Help us maintain a great developer community: Be respectful to others' viewpoints. Give and accept the constructive feedback and eventually criticism, too. Be honest, but not offensive.
; Speak English in the chat. : Moodle is a global project with worldwide community and English - even on elementary level - works best for us.
; Use your real name in the chat. : Keep it consistent with your moodle.org profile and Git commits.
; Keep topics and discussions focused. : Everything you post in the chat, hits several hundreds of other people instantly. Let us not disturb each other.
; Avoid funny animated gifs, memes and stickers. : There are better places online for sharing them.

Boost Presets

2019-03-03T05:50:22Z

Dougiamas:

{{Template:Themes}}
A preset is a scss file designed to be added to the "Boost" theme, or a child of it. It combines the bootstrap 4 SCSS files, with the required moodle SCSS files and adds a layer of customisation on top.

Preset files can be uploaded in to the admin settings for the theme, and then chosen from a list of installed presets. They can be shared on the moodle.net site [http://moodle.net/boost Boost presets].

== What is in a preset file? ==

A preset file is just a SCSS file with 3 sections. We will call them "variables", "import" and "rules".

For Moodle 3.4 and earlier:
<code scss>
// An example preset file.

/*************************** Variables section. *****************************/
// Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files.

$card-bg: green;

/*************************** Import section *****************************/
// Always the same.
@import "moodle";

/*************************** Rules section ****************************/
body {
background-color: $card-bg;
}

</code>

From Moodle 3.5 and on:
<code scss>
// An example preset file.

/*************************** Variables section. *****************************/
// Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files.

$card-bg: green;

/*************************** Import section *****************************/
@import "fontawesome";
@import "bootstrap";
@import "moodle";

/*************************** Rules section ****************************/
body {
background-color: $card-bg;
}

</code>

The first section is where you define default values for variables used by the standard Moodle and Bootstrap SCSS files. Because of the way SCSS variables, defining them first will allow variables used later on to be overwritten, but not defining them means they will use their default values. A good starting point when looking for variables to customise is here: [https://github.com/moodle/moodle/blob/master/theme/boost/scss/bootstrap/_variables.scss Bootstrap variables].

The import section is where we import all the font awesome, moodle and bootstrap standard SCSS files.

The last section is where we add our custom styles. We do it last so they have precedence over any rules that were defined earlier with the same specificity.

== Bootswatches ==

These presets are very similar to [https://bootswatch.com/ Bootswatch] files. In fact you can build a preset file from a Bootswatch file by using the cli script shipped with the Boost theme. See https://github.com/moodle/moodle/tree/master/theme/boost/cli for the script and instructions.

Chat

2018-09-23T22:23:46Z

Dougiamas:

Moodle developer community members meet and discuss moodle development techniques and problems in an online Moodle Dev Chat.

We use a public [https://telegram.me/moodledev Telegram room called moodledev].

Everybody is welcome to join, given the following policies are respected.

=== Moodle Dev Chat policies ===

; Don't use the chat to get support for using Moodle: There are [https://moodle.org/course moodle.org forums] for that, or talk to a [http://moodle.com/partners Moodle Partner]
; Be nice: Help us maintain a great developer community: Be respectful to others' viewpoints. Give and accept the constructive feedback and eventually criticism, too. Be honest, but not offensive.
; Speak English in the chat. : Moodle is a global project with worldwide community and English - even on elementary level - works best for us.
; Use your real name in the chat. : Keep it consistent with your moodle.org profile and Git commits.
; Keep topics and discussions focused. : Everything you post in the chat, hits several hundreds of other people instantly. Let us not disturb each other.
; Avoid funny animated gifs, memes and stickers. : There are better places online for sharing them.

Chat

2018-09-23T22:22:50Z

Dougiamas:

Moodle developer community members meet and discuss moodle development techniques and problems in an online Moodle Dev Chat.

We use a public [https://telegram.me/moodledev Telegram room called moodledev].

Everybody is welcome to join, given the following policies are respected.

=== Moodle Dev Chat policies ===

; Don't use the chat to get support for using Moodle: There are [moodle.org forums|https://moodle.org/course] for that, or talk to a [Moodle Partner|http://moodle.com/partners]
; Be nice: Help us maintain a great developer community: Be respectful to others' viewpoints. Give and accept the constructive feedback and eventually criticism, too. Be honest, but not offensive.
; Speak English in the chat. : Moodle is a global project with worldwide community and English - even on elementary level - works best for us.
; Use your real name in the chat. : Keep it consistent with your moodle.org profile and Git commits.
; Keep topics and discussions focused. : Everything you post in the chat, hits several hundreds of other people instantly. Let us not disturb each other.
; Avoid funny animated gifs, memes and stickers. : There are better places online for sharing them.

Main Page

2018-08-01T01:34:52Z

Dougiamas: Changed protection level for "Main Page": Andrew wanted to edit some ([Move=Allow only administrators] (indefinite))

{{#addbodyclass:moodledocs-mainpage}}
{{#addbodyclass:moodledocs-logo}}
<div class="navtrail">[https://docs.moodle.org/overview/ Docs overview] ► [[{{PAGENAME}}|Dev docs]]</div>
__NOTOC__
<div class="container-fluid">
'''Welcome to the Developer Documentation.'''

These Developer Docs are for developers who work with Moodle code, plugins and themes, or [[Contributing to Moodle|contribute to the Moodle project]] in other ways, such as [[Translation|translation]].

If you manage a Moodle site, or if you teach using Moodle, try the [[:en:Main_page|User docs]].

<div class="row-fluid">
<div class="span4">
<h2>[[Overview]]</h2>
* [[Mission]]
* [[Roadmap]]
* [[Releases]]
* [[Process|Development processes]]
* [[Developer meetings]]
* [https://moodle.org/mod/forum/view.php?id=55 Forum discussions]
* [https://telegram.me/moodledev Telegram Moodle Dev Chat room]
* [http://moodle.org/dev Developer credits/statistics]
* [[Moodle_research|Research]]
* [[Testing]]
[[Overview|More overview info ...]]
</div>

<div class="span4">
<h2>[[Plugins|Plugin development]]</h2>
* [[Activity modules]]
* [[Blocks]]
* [[Themes]]
* [[Course formats]]
* [[Enrolment plugins]]
* [[Authentication plugins]]
* [[Repository plugins]]
* [[Filters]]
[[Plugins|Full list of plugin types ...]]
</div>

<div class="span4">
<h2>[[Core APIs]]</h2>
* [[Access API]]
* [[Data manipulation API]]
* [[Exporter|Exporter API]]
* [[File API]]
* [[Form API]]
* [[Migrating logging calls in plugins|Logging]]
* [[Navigation API]]
* [[Page API]]
* [[Persistent|Persistent API]]
* [[Output API]]
* [[String API]]
* [[Web service API functions]]
[[Core APIs|Full list of core APIs ...]]
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Guidelines</h2>
* [[Coding|Coding guidelines]]
* [[Git_for_developers|Git use]]
* [[Plugin contribution|Contributing plugins]]
* [[How_to_create_a_patch|Creating patches]]
* [[PHPUnit|PHPUnit tests]]
* [[Acceptance testing]]
* [[Writing tests]]
* [[Aria Guidelines]]
* [[HTML Guidelines]]
* [[Automatic class loading]]
* [[Templates]]
* [[Javascript Modules]]
* [[AJAX]]
* [[Communication Between Components]]
</div>

<div class="span4">
<h2>[[:Category:Developer tools|Developer tools]]</h2>
* [[Linting]]
* [[Setting up Eclipse]]
* [[Setting up Netbeans]]
* [[:Category:Firefox extensions|Firefox extensions]]
[[:Category:Developer tools|Full list of developer tools ...]]
</div>

<div class="span4">
<h2>[[Moodle Mobile]]</h2>
*[[Moodle Mobile Customization]]
*[[Mobile support for plugins]]
*[[Moodle Mobile Themes]]
*[[Moodle Mobile FAQ]]
[[:Category:Mobile|Full list of mobile app documentation ...]]
</div>
</div>
</div>

User:Martin Dougiamas

2018-08-01T01:33:11Z

Dougiamas:

It is me.

Developer meetings

2018-06-14T07:13:46Z

Dougiamas:

== Meeting notes ==

This page keeps track of all Moodle DevJams, online meetings and other developer-focussed events around the world.

* 2018
** [[Glasgow DevJam March 2018]]
** [[Barcelona DevJam June 2018]]
** [[Developer meeting July 2018]]

* 2017
** [https://devpad.moodle.org/p/mootus17 Miami DevJam November 2017]
** [[Mannheim DevJam June 2017]]
** [[London hackfest April 2017]]

* 2016
** [[Developer meeting September 2016|September 2016 meeting]]
** [[Developer meeting May 2016|May 2016 meeting]]
** [[Developer meeting February 2016|February 2016 meeting]]
** [[London hackfest March 2016]]

* 2015
** [[Developer meeting October 2015|October 2015 meeting]]
** [[Minneapolis hackfest August 2015]]
** [[Developer meeting July 2015|July 2015 meeting]]
** [[Melbourne hackfest July 2015]]
** [[Dublin hackfest May 2015]]
** [[Developer meeting April 2015|April 2015 meeting]]
** [[Developer meeting January 2015|January 2015 meeting]]

* 2014
** [[Developer meeting October 2014|October 2014 meeting]]
** [[Developer meeting July 2014|July 2014 meeting]]
** [[Developer meeting April 2014|April 2014 meeting]]
** [[Hackfest UK 2014]]
** [[Developer meeting January 2014|January 2014 meeting]]

* 2013
** [[Developer meeting October 2013|October 2013 meeting]]
** [[Developer meeting July 2013|July 2013 meeting]]
** [[Developer meeting April 2013|April 2013 meeting]]
** [[Developer meeting February 2013|February 2013 meeting]]

* 2012
** [[Developer meeting November 2012|November 2012 meeting]]
** [[Perth Hackfest October 2012]]
** [[Developer meeting August 2012|August 2012 meeting]]
** [[Developer meeting May 2012|May 2012 meeting]]
** [[Developer meeting February 2012|February 2012 meeting]]
** [https://docs.google.com/document/d/1inDtTN5MyCs-o1CGmZoRxSo-n1KsIKExQQaUN4kw9Zo/edit Belgium 2012 hackfest]

* 2011
** [[Developer meeting November 2011|November 2011 meeting notes]]
** [[Developer meeting August 2011|August 2011 meeting notes]]
** [[Developer meeting May 2011|May 2011 meeting notes]]
* 2010
** [[Developer meeting November 2010|November 2010 meeting notes]]
** [[Developer meeting May 2010|May 2010 meeting notes]]
* 2009
** [[Czech Hackfest 2009 notes]]
** [[Developer meeting September 2009|September 2009 meeting notes]]
** [[Developer meeting April 2009|April 2009 meeting notes]]
** [[Developer meeting January 2009|January 2009 meeting notes]]
* 2008
** [[Developer meeting November 2008|November 2008 meeting notes]]
** [[Developer meeting September 2008|September 2008 meeting notes]]
** [[SF Developer HackFest|San Francisco 2008 Developer HackFest]]
** [[Developer meeting April 2008|April 2008 meeting notes]]
** [[Developer meeting February 2008|February 2008 meeting notes]]
* 2007
** [[MoodleMoot 2007 HackFest|UK 2007 MoodleMoot HackFest]]
** [[Developer conference April 2007|April 2007 meeting notes]]
* 2006
** [[Developer conference December 2006|December 2006 meeting notes]]
** [[Developer conference May 2006|May 2006 meeting notes]]
** [[Developer conference February 2006|February 2006 meeting notes]]

==See also==

*[[Roadmap]]

[[Category:Core development]]

MoodleNet

2018-01-11T08:15:46Z

Dougiamas: /* Misc. */

[[File:Moodlenet-logo.png|400px]]

Short URL: '''https://moodle.com/moodlenet'''

''Note: This page describes a new project started in 2017. For the legacy mechanism of inter-connecting multiple Moodle and Mahara sites into a network, please see the [https://docs.moodle.org/en/MNet MNet] page.''

<div style="background-color:#F87F16; padding:10px; text-align:center; color:#fff; font-size:1.2em;">Check out the draft [https://docs.moodle.org/dev/MoodleNet_whitepaper Project MoodleNet whitepaper]</div>

== What is MoodleNet? ==

[[File:moodlenet-core-features.png|thumb|MoodleNet core features (click to enlarge)]]

[[File:1600px-moodlenet-ecosystem.png|thumb|MoodleNet as part of the wider Moodle ecosystem (click to enlarge)]]

Project MoodleNet is currently described by Martin Dougiamas, CEO of Moodle as, '''"a new open social media platform for educators, focussed on professional development and open content"'''. MoodleNet will be an integral part of the Moodle ecosystem. We'll be building out this page as the project develops.

It is envisaged that MoodleNet will contain features such as the following, listed in suggested order of development:

* Identity and reputation
* Messaging
* Activity feed
* Access to openly-licensed resources
* Crowdfunding

See [https://goo.gl/xJBgQs this short slide deck]. It will be built according to the following principles:

* Open
* Safe
* Private
* Ethical
* Transparent
* Connected

== Updates ==

* [https://blog.moodle.net/ Blog]
* [https://moodle.org/mod/forum/view.php?f=1243 Discussion forum]
* [https://t.me/project_moodlenet Telegram channel]
* [https://trello.com/b/0KCE6858/project-moodlenet Trello board]
* [https://tracker.moodle.org/secure/RapidBoard.jspa?rapidView=81&projectKey=MDLNET Issue tracker]

== Feedback ==

* [https://docs.moodle.org/dev/MoodleNet-meetings Notes from meetings]
* [https://docs.moodle.org/dev/MoodleNet-MootUS17 Miami MoodleMoot sessions (Nov 2017)]

== Misc. ==

* [https://docs.moodle.org/dev/MoodleNet_whitepaper Project MoodleNet Whitepaper]
* [https://docs.moodle.org/dev/MoodleNet/Decision_Log Decision log]
* [https://docs.moodle.org/dev/MoodleNet-research Research]
* [https://docs.moodle.org/dev/MoodleNet-metaphors Explaining MoodleNet]

[[es:MoodleNet]]

Developer meetings

2017-11-22T03:50:45Z

Dougiamas: /* Meeting notes */

== Meeting notes ==

* 2017
** [https://devpad.moodle.org/p/mootus17 Miami DevJam November 2017]
** [[Mannheim DevJam June 2017]]
** [[London hackfest April 2017]]

* 2016
** [[Developer meeting September 2016|September 2016 meeting]]
** [[Developer meeting May 2016|May 2016 meeting]]
** [[Developer meeting February 2016|February 2016 meeting]]
** [[London hackfest March 2016]]

* 2015
** [[Developer meeting October 2015|October 2015 meeting]]
** [[Minneapolis hackfest August 2015]]
** [[Developer meeting July 2015|July 2015 meeting]]
** [[Melbourne hackfest July 2015]]
** [[Dublin hackfest May 2015]]
** [[Developer meeting April 2015|April 2015 meeting]]
** [[Developer meeting January 2015|January 2015 meeting]]

* 2014
** [[Developer meeting October 2014|October 2014 meeting]]
** [[Developer meeting July 2014|July 2014 meeting]]
** [[Developer meeting April 2014|April 2014 meeting]]
** [[Hackfest UK 2014]]
** [[Developer meeting January 2014|January 2014 meeting]]

* 2013
** [[Developer meeting October 2013|October 2013 meeting]]
** [[Developer meeting July 2013|July 2013 meeting]]
** [[Developer meeting April 2013|April 2013 meeting]]
** [[Developer meeting February 2013|February 2013 meeting]]

* 2012
** [[Developer meeting November 2012|November 2012 meeting]]
** [[Perth Hackfest October 2012]]
** [[Developer meeting August 2012|August 2012 meeting]]
** [[Developer meeting May 2012|May 2012 meeting]]
** [[Developer meeting February 2012|February 2012 meeting]]
** [https://docs.google.com/document/d/1inDtTN5MyCs-o1CGmZoRxSo-n1KsIKExQQaUN4kw9Zo/edit Belgium 2012 hackfest]

* 2011
** [[Developer meeting November 2011|November 2011 meeting notes]]
** [[Developer meeting August 2011|August 2011 meeting notes]]
** [[Developer meeting May 2011|May 2011 meeting notes]]
* 2010
** [[Developer meeting November 2010|November 2010 meeting notes]]
** [[Developer meeting May 2010|May 2010 meeting notes]]
* 2009
** [[Czech Hackfest 2009 notes]]
** [[Developer meeting September 2009|September 2009 meeting notes]]
** [[Developer meeting April 2009|April 2009 meeting notes]]
** [[Developer meeting January 2009|January 2009 meeting notes]]
* 2008
** [[Developer meeting November 2008|November 2008 meeting notes]]
** [[Developer meeting September 2008|September 2008 meeting notes]]
** [[SF Developer HackFest|San Francisco 2008 Developer HackFest]]
** [[Developer meeting April 2008|April 2008 meeting notes]]
** [[Developer meeting February 2008|February 2008 meeting notes]]
* 2007
** [[MoodleMoot 2007 HackFest|UK 2007 MoodleMoot HackFest]]
** [[Developer conference April 2007|April 2007 meeting notes]]
* 2006
** [[Developer conference December 2006|December 2006 meeting notes]]
** [[Developer conference May 2006|May 2006 meeting notes]]
** [[Developer conference February 2006|February 2006 meeting notes]]

==See also==

*[[Roadmap]]

[[Category:Core development]]

MoodleNet-metaphors

2017-11-21T08:45:05Z

Dougiamas:

<< [https://docs.moodle.org/dev/MoodleNet Back to MoodleNet index]

----

Introducing new concepts to people can be difficult, as we all understand the future through the lens of past experience. Therefore, as imperfect as these analogies are, they all get at ''something'' which will help MoodleNet empower educators and further Moodle's mission:

* [https://jetpack.com/ Jetpack for WordPress] - a plugin for WordPress created by the developers of WordPress. This allows self-hosted installations to be connected to a wordpress.com account to enable extra features. Good for the user (free additional functionality), and good for Automattic, who make Worpress (track number of installations, potential to upsell products/services)
* [https://en.wikipedia.org/wiki/Office_Assistant Office Assistant] - although widely parodied / derided, 'Clippy' (as it became known) provided an early form of just-in-time help for for those using Microsoft Office. An updated version of this, with natural-language search and contextual information would be an intelligent assistant and very useful ''within'' Moodle installations.
* [https://getsatisfaction.com Get Satisfaction] - a customer community that can be embedded within the product or service being used by a customer. It is customised to fit in seamlessly with the brand, and allows users to interact with support and community discussions without having to go to a separate 'place'.
* LinkedIN with kickstarter built-in, connected to all Moodle sites.

Mission

2017-07-20T04:00:17Z

Dougiamas:

==Our Mission==

The mission of the Moodle project (including Moodle HQ and all Moodle software) is:

''Empowering educators to improve our world.''

==Our Vision==

Our goals for the future are simple:

''To give the world the most effective platform for learning.''

==Our Values==

These are the values that we encourage each other to uphold, for the good of the educators we serve and each other:

;Education
:Education is the foundation of making the world a better place. We, our teachers and our students all need to be always learning, and looking for ways to improve how we learn.

;Respect
:We treat everyone with respect and sensitivity, recognising the importance of their contributions: team members, customers, partners, suppliers and competitors.

;Integrity
:We employ the highest ethical standards, demonstrating honesty and fairness in every action that we take.

;Openness
:Our goals, our tools, our processes and our results shall be open as much as is practical. Our team members are encouraged to speak openly and communicate freely both internally and externally.

;Innovation
:We encourage a culture of experimentation and research, where entrepreneurship and prudent risk-taking are encouraged, rewarded and incorporated.

[[es:dev/Misión]]

Main Page

2017-07-18T06:03:54Z

Dougiamas:

{{#addbodyclass:moodledocs-mainpage}}
{{#addbodyclass:moodledocs-logo}}
<div class="navtrail">[https://docs.moodle.org/overview/ Docs overview] ► [[{{PAGENAME}}|Dev docs]]</div>
__NOTOC__
<div class="container-fluid">
'''Welcome to the Developer Documentation.'''

These Developer Docs are for developers who work with Moodle code, plugins and themes, or [[Contributing to Moodle|contribute to the Moodle project]] in other ways, such as [[Translation|translation]].

If you manage a Moodle site, or if you teach using Moodle, try the [[:en:Main_page|User docs]].

<div class="row-fluid">
<div class="span4">
<h2>[[Overview]]</h2>
* [[Mission]]
* [[Roadmap]]
* [[Releases]]
* [[Process|Development processes]]
* [[Developer meetings]]
* [[Working Groups]]
* [https://moodle.org/mod/forum/view.php?id=55 Forum discussions]
* [http://moodle.org/dev Developer credits/statistics]
* [[Moodle_research|Research]]
* [[Testing]]
[[Overview|More overview info ...]]
</div>

<div class="span4">
<h2>[[Plugins|Plugin development]]</h2>
* [[Activity modules]]
* [[Blocks]]
* [[Themes]]
* [[Course formats]]
* [[Enrolment plugins]]
* [[Authentication plugins]]
* [[Repository plugins]]
* [[Filters]]
[[Plugins|Full list of plugin types ...]]
</div>

<div class="span4">
<h2>[[Core APIs]]</h2>
* [[Access API]]
* [[Data manipulation API]]
* [[Exporter|Exporter API]]
* [[File API]]
* [[Form API]]
* [[Migrating logging calls in plugins|Logging]]
* [[Navigation API]]
* [[Page API]]
* [[Persistent|Persistent API]]
* [[Output API]]
* [[String API]]
* [[Web service API functions]]
[[Core APIs|Full list of core APIs ...]]
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h2>[[Guidelines]]</h2>
* [[Coding|Coding guidelines]]
* [[Git_for_developers|Git use]]
* [[Plugin contribution|Contributing plugins]]
* [[How_to_create_a_patch|Creating patches]]
* [[PHPUnit|PHPUnit tests]]
* [[Acceptance testing]]
* [[Writing tests]]
* [[Aria Guidelines]]
* [[HTML Guidelines]]
* [[Automatic class loading]]
* [[Templates]]
* [[Javascript Modules]]
* [[AJAX]]
* [[Communication Between Components]]
</div>

<div class="span4">
<h2>[[:Category:Developer tools|Developer tools]]</h2>
* [[Linting]]
* [[Setting up Eclipse]]
* [[Setting up Netbeans]]
* [[:Category:Firefox extensions|Firefox extensions]]
[[:Category:Developer tools|Full list of developer tools ...]]
</div>

<div class="span4">
<h2>[[Moodle Mobile]]</h2>
*[[Moodle Mobile Customization]]
*[[Moodle Mobile Plugins Development]]
*[[Moodle Mobile Themes]]
*[[Moodle Mobile Developing a plugin tutorial]]
[[:Category:Mobile|Full list of mobile app documentation ...]]
</div>
</div>
</div>

Main Page

2017-07-18T06:03:33Z

Dougiamas:

{{#addbodyclass:moodledocs-mainpage}}
{{#addbodyclass:moodledocs-logo}}
<div class="navtrail">[https://docs.moodle.org/overview/ Docs overview] ► [[{{PAGENAME}}|Dev docs]]</div>
__NOTOC__
<div class="container-fluid">
'''Welcome to the Developer Documentation.'''

These Developer Docs are for developers who work with Moodle code, plugins and themes, or [[Contributing to Moodle|contribute to the Moodle project]] in other ways, such as [[Translation|translation]].

If you manage a Moodle site, or if you teach using Moodle, try the [[:en:Main_page|User docs]].

<div class="row-fluid">
<div class="span4">
<h2>[[Overview]]</h2>
* [[Mission]]
* [[Roadmap]]
* [[Releases]]
* [[Process|Development processes]]
* [[Developer meetings]]
* [[Working Groups]]
* [https://moodle.org/mod/forum/view.php?id=55 Forum discussions]
* [http://moodle.org/dev Developer credits/statistics]
* [[Moodle_research|Research]]
* [[Testing]]
[[Overview|More overview info ...]]
</div>

<div class="span4">
<h2>[[Plugins|Plugin development]]</h2>
* [[Activity modules]]
* [[Blocks]]
* [[Themes]]
* [[Course formats]]
* [[Enrolment plugins]]
* [[Authentication plugins]]
* [[Repository plugins]]
* [[Filters]]
[[Plugins|Full list of plugin types ...]]
</div>

<div class="span4">
<h2>[[Core APIs]]</h2>
* [[Access API]]
* [[Data manipulation API]]
* [[Exporter|Exporter API]]
* [[File API]]
* [[Form API]]
* [[Migrating logging calls in plugins|Logging]]
* [[Navigation API]]
* [[Page API]]
* [[Persistent|Persistent API]]
* [[Output API]]
* [[String API]]
* [[Web_service_API_functions]]
[[Core APIs|Full list of core APIs ...]]
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h2>[[Guidelines]]</h2>
* [[Coding|Coding guidelines]]
* [[Git_for_developers|Git use]]
* [[Plugin contribution|Contributing plugins]]
* [[How_to_create_a_patch|Creating patches]]
* [[PHPUnit|PHPUnit tests]]
* [[Acceptance testing]]
* [[Writing tests]]
* [[Aria Guidelines]]
* [[HTML Guidelines]]
* [[Automatic class loading]]
* [[Templates]]
* [[Javascript Modules]]
* [[AJAX]]
* [[Communication Between Components]]
</div>

<div class="span4">
<h2>[[:Category:Developer tools|Developer tools]]</h2>
* [[Linting]]
* [[Setting up Eclipse]]
* [[Setting up Netbeans]]
* [[:Category:Firefox extensions|Firefox extensions]]
[[:Category:Developer tools|Full list of developer tools ...]]
</div>

<div class="span4">
<h2>[[Moodle Mobile]]</h2>
*[[Moodle Mobile Customization]]
*[[Moodle Mobile Plugins Development]]
*[[Moodle Mobile Themes]]
*[[Moodle Mobile Developing a plugin tutorial]]
[[:Category:Mobile|Full list of mobile app documentation ...]]
</div>
</div>
</div>

Moodle 3.2 release notes

2016-11-08T03:25:56Z

Dougiamas: Created page with "Coming soon."

Coming soon.

Theme And Navigation Project 3.2

2016-07-07T20:33:12Z

Dougiamas:

{{Infobox Project
|name = Theme And Navigation Project 3.2
|state = Starting
|tracker = MDL-55070
|discussion = https://moodle.org/mod/forum/discuss.php?d=335638
|assignee = [[User:Damyon Wiese]]
}}

This page is dedicated to a set of changes for 3.2 all relating to the theme, and navigation in Moodle.

The requirements for the new theme are:
* use a CSS framework that will be supported upstream for a long time
* testing framework needs to be theme independent
* simplify the navigation and make it more suitable for touch screens
* introduce quick navigation from course to course or section to section
* promote the content of each page rather than the peripheral sections (blocks)
* the default visual design of Moodle should look distinct from older versions
* every page with settings should use a consistent, recognisable UI element to get to the settings
* add lots of settings to the new theme so it can be used for many sites without installing a child-theme
* don't break existing themes or require changes from plugin developers

More details about each requirement follow:

= Use a CSS framework that will be supported upstream for a long time =
* Users affected: theme designers
* The problem: bootstrap 2 is unsupported
* The proposed solution: create a new theme based on Bootstrap 4
* Criteria for success: New moodle theme using a supported CSS framework with long term support that includes features for RTL and Accessibility and is popular with theme designers, the new theme should show proper styling for all pages
* MDL-55071

= Testing framework needs to be theme independent =
* Users affected: developers
* The problem: feature files are written assuming the theme will be “clean”
* The proposed solution: Theme specific steps need to be identified and the theme should form part of the behat context. Different step implementations should be available for different themes
* Criteria for success: You should be able to specify which theme to run behat with and all tests should pass
* MDL-55072

= Navigation is not intuitive or suitable on touch screens =
* Users affected: new moodle users, experienced moodle users
* The problem: navigation is a complex tree with inconsistent structure
* The proposed solution: Only show the path to the current node in the navigation, and it’s siblings as a flat list.
* Criteria for success: It is easier to determine your location in the navigation tree, it is easier to find pages related to the current page
* MDL-55073

= Intuitively navigate from course to course or section to section =
* Users affected: new moodle users, experienced moodle users
* The problem: If the navigation tree is flattened, it is not possible to change between courses without leaving the course and entering a new one
* The proposed solution: Show a drop down menu for each item in the navbar
* Criteria for success: It is intuitive to quickly jump between courses and sections using the navbar
* MDL-55074

= Promote the content of each page rather than the peripheral sections (blocks) =
* Users affected: new moodle users, experienced moodle users
* The problem: blocks displayed around the content compete for attention and real-estate in the page
* The proposed solution: Move the blocks regions into an expandable menu
* Criteria for success: the content of each page should be the first thing that grabs your focus, blocks should still be discoverable and usable if needed
* MDL-55075

= The visual design of Moodle should look distinct from older versions =
* Users affected: new moodle users, themers
* The problem: We have not updated the look of the default theme in several years
* The proposed solution: Implement some new distinct styling in the new Moodle theme
* Criteria for success: The new moodle theme should look visually distinct. There should only be a minimum amount of custom styling for themers to override when extending this theme
* MDL-55076

= Every page with settings should use a consistent, recognisable UI element to get to the settings =
* Users affected: all moodle users
* The problem: Settings pages are buried in the navigation tree in inconsistent locations
* The proposed solution: Create a settings navigation renderable that shows a gear icon on the top right of the page and takes you straight to the settings page. Update all pages with settings in moodle to use the new thing.
* Criteria for success: All pages with settings in Moodle should show a gear icon which will take you to the settings page when clicked.
* MDL-55077

= Add lots of settings to the new theme so it can be used for many sites without installing a child-theme =
* Users affected: new moodle users
* The problem: Installing themes is hard/not possible in some environments. The new theme should be customisable enough to make it usable just by changing settings.
* The proposed solution: Review settings provided by community themes and add the common ones to this new theme.
* Criteria for success: Colours, fonts, logos should be customisable as well as additional settings supported by most community themes.
* MDL-55078

= Don't break existing themes or require plugin developers to do anything new =
* Users affected: developers and admins
* The problem: Not everyone will be interested in all these new changes, or has the resources to redesign their theme immediately. Likewise developers have enough to do right now and life for everyone will be a lot easier if we can maintain backward compatibility from 3.2.
* The proposed solution: Where core changes are required, make sure they work OK on as many existing themes as possible.
* Criteria for success: Themes still continue working and looking good.
*

Tutorial

2016-05-10T16:30:44Z

Dougiamas: /* How we support 110 languages */

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How to support over 100 languages===

===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=

Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise. If the code is long, it could be placed on separate pages. A good reference for style is [[Moodle_Mobile_Developing_a_plugin_tutorial]] and [[Blocks]].

=See also these older tutorials =
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]
* [https://docs.moodle.org/dev/Category:Tutorial Other tutorials in these docs]

[[Category:Tutorial]]

Tutorial

2016-05-10T16:25:34Z

Dougiamas: /* TODO */

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How we support 110 languages===
===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=

Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise. If the code is long, it could be placed on separate pages. A good reference for style is [[Moodle_Mobile_Developing_a_plugin_tutorial]] and [[Blocks]].

=See also these older tutorials =
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]
* [https://docs.moodle.org/dev/Category:Tutorial Other tutorials in these docs]

[[Category:Tutorial]]

Tutorial

2016-05-10T16:25:18Z

Dougiamas: /* TODO */

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How we support 110 languages===
===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=

Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise. If the code is long, it could be placed on seperate pages. A good reference for style is [[Moodle_Mobile_Developing_a_plugin_tutorial]] and [[Blocks]].

=See also these older tutorials =
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]
* [https://docs.moodle.org/dev/Category:Tutorial Other tutorials in these docs]

[[Category:Tutorial]]

Moodle Mobile 2 (Ionic 1) Developing a plugin tutorial part 2

2016-05-10T16:23:53Z

Dougiamas:

{{Moodle Mobile}}
{{Work in progress}}

== Introduction ==

In this tutorial we are going to extend the notes add-on functionality

== Add-on spec ==

We want to develop a plugin that will display a new option at course level (at the same line that contents, participants and grades).

This option will display all the course notes for all the participants in the course (it's suitable for teachers).

A couple of screenshots with the desired result:

{|
| [[File:MoodleMobile2Tutorial201.png|thumb|Initial view]]
| [[File:MoodleMobile2Tutorial202.png|thumb|Note types view]]
| [[File:MoodleMobile2Tutorial203.png|thumb|Notes view]]
|}

== Steps ==

=== Set up your development environment ===

Please, read [[Setting up your development environment for Moodle Mobile 2]]

=== Set up your Moodle installation ===

Enable debugging, disable caches, etc... the typical settings for developing.

Enable the Mobile Service via Admin / Plugins / Web Services / Mobile

=== Develop the Moodle Web Services you are going to need ===

In this case we'll use an existing web service (core_notes_get_course_notes) that is already available in the Moodle Mobile app service, if you need custom functions you will need to develop a local plugin including there your new Web Services (see https://moodle.org/plugins/view/local_wstemplate) and create a custom service.

=== Develop the Moodle Mobile add-on ===

The full source code can be found here: https://github.com/moodlehq/moodlemobile2/tree/master/www/addons/notes

'''www/addons/notes/main.js'''
<code javascript>
angular.module('mm.addons.notes', [])

.config(function($stateProvider) {

$stateProvider

.state('site.notes-types', {
url: '/notes-types',
views: {
'site': {
templateUrl: 'addons/notes/templates/types.html',
controller: 'mmaNotesTypesCtrl'
}
},
params: {
course: null
}
})

.state('site.notes-list', {
url: '/notes-list',
views: {
'site': {
templateUrl: 'addons/notes/templates/list.html',
controller: 'mmaNotesListCtrl'
}
},
params: {
courseid: null,
type: null
}
});
})

.run(function($mmUserDelegate, $mmaNotesHandlers, $mmCoursesDelegate, $mmaNotes) {

// Register plugin on course list.
$mmCoursesDelegate.registerPlugin('mmaNotes', function() {

if ($mmaNotes.isPluginViewNotesEnabled()) {
return {
icon: 'ion-ios-list',
state: 'site.notes-types',
title: 'mma.notes.notes'
};
}
});
});
</code>

Here we declare the plugin, and register the Plugin (this means that the plugin will be displayed in the course main menu.

Note also that we are declaring the states (views) the plugin will support, in this case there are two views:
* notes-types: Is a list that display the different note types available (site, course, personal).
* notes-lists: that will display a list of notes for the type selected in the previous view.

'''www/addons/notes/templates/types.html''' and '''www/addons/notes/templates/list.html'''

These files contains the templates used for the view, the first one is very simple since it only links to the different note types.

The second one is more complex since requires a controller that is going to do all the logic for retrieving the note and prepare them to be displayed.

'''www/addons/notes/controllers/types.js'''

This is the controller that inject data in the types.html view, the code is pretty simple:

<code javascript>
angular.module('mm.addons.notes')
.controller('mmaNotesTypesCtrl', function($scope, $stateParams) {
var course = $stateParams.course,
courseid = course.id;

$scope.courseid = courseid;

});
</code>

It just make available in the $scope the courseid, that is required because is passed as a state parameter for the list view.

'''www/addons/notes/controllers/list.js'''

This controller is the one that will render in the list view the notes:

<code javascript>
.controller('mmaNotesListCtrl', function($scope, $stateParams, $mmUtil, $mmaNotes, $mmSite, $translate) {

var courseid = $stateParams.courseid,
type = $stateParams.type;
</code>
Here we retrieved the state parameters (the course id and the type of notes) that were declared in the types.html view.

<code javascript>
function fetchNotes(refresh) {
return $mmaNotes.getNotes(courseid, refresh).then(function(notes) {
notes = notes[type + 'notes'];

return $mmaNotes.getNotesUserData(notes, courseid).then(function(notes) {
$scope.notes = notes;
});

}, function(message) {
$mmUtil.showErrorModal(message);
});
}
</code>
The fetchNotes function is responsible of using the Notes service getNotes to retrieve the data, note that we use an additional function getNotesUserData to retrieve the full user profile information (since via getNotes we only get the userid)

<code javascript>
fetchNotes().then(function() {
// Add log in Moodle.
$mmSite.write('core_notes_view_notes', {
courseid: courseid,
userid: 0
});
})
</code>
After retrieving the notes, we do logging in Moodle (so the actions are registered in the web interface)

<code javascript>
$scope.refreshNotes = function() {
fetchNotes(true).finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
</code>
This function is triggered by the "Pull down to refresh" action in order to refresh the view (empty the cache), note that the true parameter in the fetchNotes function means to not use cache.

'''www/addons/notes/services/notes.js'''

The notes services holds all the main plugin logic, it's responsible of checking if the plugin is available, retrieve information for the server and format the information so it can be rendered in the view by the controller.

<code javascript>
self.isPluginViewNotesEnabled = function() {
var infos;

if (!$mmSite.isLoggedIn()) {
return false;
} else if (!$mmSite.canUseAdvancedFeature('enablenotes')) {
return false;
} else if (!$mmSite.wsAvailable('core_notes_get_course_notes')) {
return false;
}

return true;
};
</code>
Here we checked if the plugin is enabled, the user must logged in, enablenotes should be enabled in the Moodle global settings and the core_notes_get_course_notes function should be available.

<code javascript>
self.getNotes = function(courseid, refresh) {

$log.debug('Get notes for course ' + courseid);

var data = {
courseid : courseid
},
presets = {};
if (refresh) {
presets.getFromCache = false;
}

return $mmSite.read('core_notes_get_course_notes', data, presets);
};
</code>
Here we retrieve the notes information from Moodle via Web Services, note that the refresh function is used for invalidating the cache (for example, when the user performs a pull down to refresh).

<code javascript>
self.getNotesUserData = function(notes, courseid) {
var promises = [];

angular.forEach(notes, function(note) {
var promise = $mmUser.getProfile(note.userid, courseid, true);
promises.push(promise);
promise.then(function(user) {
note.userfullname = user.fullname;
note.userprofileimageurl = user.profileimageurl;
}, function() {
// Error getting profile. Set default data.
return $translate('mma.notes.userwithid', {id: note.userid}).then(function(str) {
note.userfullname = str;
});
});
});
return $q.all(promises).then(function() {
return notes;
});
};
</code>
Since getNotes returns only userids, we need to retrieve the complete user information in order to be able to display his full name and profile image. We use the $mmUser service getProfile function.

[[Category: Mobile]]
[[Category: Tutorial]]

Moodle Mobile 2 (Ionic 1) Developing a plugin tutorial

2016-05-10T16:23:27Z

Dougiamas:

{{Moodle Mobile}}
{{Work in progress}}

== Introduction ==

This tutorial describes all the steps needed for developing an add-on for the Moodle Mobile app.

In this tutorial we make the following assumptions:

* You have a medium/good skills/understand of AngularJS/Ionic, PHP and Moodle architecture
* You know what a Web Service is and how it works in Moodle
* The plugin you are going to develop requires a Web Service in your Moodle installation to work

There is a second part of this tutorial where we extend the add-on features [[Moodle Mobile Developing a plugin tutorial part 2]]

== Add-on spec ==

We want to develop a plugin that will display a new button in the user profile for adding new notes to the user. This plugin is suitable for course managers of teachers.

A couple of screenshots with the desired result:

{|
| [[File:MoodleMobile2Tutorial01.png|thumb|Initial view]]
| [[File:MoodleMobile2Tutorial02.png|thumb|Course contents view]]
|}

== Steps ==

=== Set up your development environment ===

Please, read [[Setting up your development environment for Moodle Mobile 2]]

=== Set up your Moodle installation ===

Enable debugging, disable caches, etc... the typical settings for developing.

Enable the Mobile Service via Admin / Plugins / Web Services / Mobile

=== Develop the Moodle Web Services you are going to need ===

In this case we'll use an existing web service (core_notes_create_notes) that is already available in the Moodle Mobile app service, if you need custom functions you will need to develop a local plugin including there your new Web Services (see https://moodle.org/plugins/view/local_wstemplate) and create a custom service.

=== Develop the Moodle Mobile add-on ===

The full source code can be found here: https://github.com/moodlehq/moodlemobile2/tree/master/www/addons/notes

'''www/addons/notes/main.js'''
<code javascript>
angular.module('mm.addons.notes', [])

.run(function($mmUserDelegate, $mmaNotesHandlers) {

$mmUserDelegate.registerPlugin('mmaNotes:addNote', $mmaNotesHandlers.addNote);

});
</code>

Here we declare the plugin, and register the Plugin (this means that the plugin will be displayed in the User profile.

We will use the $mmaNotesHandlers service for holding all the code related to the plugin availability and main functions

There are more delegates for registering your plugin, see:
* www/addons/mod_forum/main.js (Module delegate, and module actions delegate)
* www/addons/messages/main.js (Main side menu delegate, and multiple delegates for the user profile)

'''www/addons/notes/services/handlers.js'''
<code javascript>

self.isEnabled = function() {
return $mmaNotes.isPluginEnabled();
};

self.isEnabledForUser = function(user, courseId) {
// Active course required.
return courseId && user.id != $mmSite.getUserId();
};
</code>

These are mandatory functions that will check our plugin availability, the first one will rely in the $mmaNotes service (isPluginEnabled function), the second ones checks that the user profile is being viewed inside a course (because the WS requires it) and that the current user is not the required user (so you don't see the buttons in your own profile).

<code javascript>

self.getController = function(user, courseid) {

return function($scope) {

// Button title.
$scope.title = 'mma.notes.addnewnote';

$ionicModal.fromTemplateUrl('addons/notes/templates/add.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(m) {
$scope.modal = m;
});

$scope.closeModal = function(){
$scope.modal.hide();
};

$scope.addNote = function(){
// Freeze the add note button.
$scope.processing = true;

$mmaNotes.addNote(user.id, courseid, $scope.note.publishstate, $scope.note.text).then(function() {
$translate('mma.notes.eventnotecreated').then(function(str) {
$ionicLoading.show({
template: str,
duration: 2000
});
});
}, function(error) {
$mmUtil.showErrorModal(error);
}).finally(function() {
$scope.closeModal();
});
};

$scope.action = function($event) {
$event.preventDefault();
$event.stopPropagation();

$scope.note = {
publishstate: 'personal',
text: ''
};
$scope.processing = false;

$scope.modal.show();
};
};
};

</code>

These is the main function code, it does the following:
* $scope.title = 'mma.notes.addnewnote'; This sets the button title, note that we reference to the addnewnote string that is in the www/addons/notes/lang/en.json file (we need to prefix the string id to identify the plugin)
* $ionicModal.fromTemplateUrl - Creates the modal we are going to use for displaying the form, the HTML code of the form is in www/addons/notes/templates/add.html
* $scope.closeModal - Helper function for closing the modal inside the modal via a button
* $scope.addNote - This function will be called when the user clicks the "Add a note" button in the modal, it will use the $mmaNotes service that handles all the logic WS logic for creating the note
* $scope.action - This function will be called when the user clicks the "Add a note" button in the user profile view, it will open the modal and set the default values

'''www/addons/notes/services/notes.js'''
<code javascript>

angular.module('mm.addons.notes')

.factory('$mmaNotes', function($mmSite, $log, $q) {
$log = $log.getInstance('$mmaNotes');

var self = {};

self.addNote = function(userId, courseId, publishState, noteText) {
var data = {
"notes[0][userid]" : userId,
"notes[0][publishstate]": publishState,
"notes[0][courseid]": courseId,
"notes[0][text]": noteText,
"notes[0][format]": 1
};
return $mmSite.write('core_notes_create_notes', data);
};

self.isPluginEnabled = function() {
var infos;

if (!$mmSite.isLoggedIn()) {
return false;
} else if (!$mmSite.canUseAdvancedFeature('enablenotes')) {
return false;
} else if (!$mmSite.wsAvailable('core_notes_create_notes')) {
return false;
}

return true;
};

return self;
});
</code>

This file contains the notes service:
* isPluginEnabled - Checks if the notes functionality is available by checking Moodle settings and the required WS availability
* addNote - Will call the remote WS for adding the note via the $mmSite.write helper method (the $mmService has also a read method for retrieving data)

'''/www/addons/notes/templates/add.html'''
<code html4strict>
<ion-modal-view class="product edit create">
<form name="itemEdit" ng-submit="addNote()">
<ion-header-bar class="bar-header">
<h1 class="title">{{ 'mma.notes.addnewnote' | translate }}</h1>
<a class="button" ng-click="closeModal()">{{ 'mm.core.cancel' | translate }}</a>
</ion-header-bar>
<ion-content has-bouncing="true">
<div class="row">
<div class="col">
<label class="item item-input item-select">
<div class="input-label">
{{ 'mma.notes.publishstate' | translate }}
</div>
<select ng-model="note.publishstate" name="publishstate">
<option value="personal">{{ 'mma.notes.personalnotes' | translate }}</option>
<option value="course">{{ 'mma.notes.coursenotes' | translate }}</option>
<option value="site">{{ 'mma.notes.sitenotes' | translate }}</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input text">
<textarea placeholder="{{ 'mma.notes.note' | translate }}" rows="5" ng-model="note.text" name="text" lose-focus-on-return required="required"></textarea>
</label>
</div>
</div>
<div class="padding">
<button type="submit" class="button button-block" ng-disabled="processing || !note.text.length || note.text.length < 2">
{{ 'mma.notes.addnewnote' | translate }}
</button>
</div>
</ion-content>
</form>
</ion-modal-view>
</code>

This file includes the code for the modal. As you can see the close button will call the closeModal() function meanwhile the Add a note button will submit the form that will invoke the addNote function

For more information, refer to http://ionicframework.com/docs/api/service/$ionicModal/

== See also ==

[[Moodle Mobile Developing a plugin tutorial part 2]]

[[Category: Tutorial]]

Tutorial

2016-05-10T16:20:00Z

Dougiamas: /* See also these older tutorials */

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How we support 110 languages===
===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=
Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise.

=See also these older tutorials =
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]
* [https://docs.moodle.org/dev/Category:Tutorial Other tutorials in these docs]

[[Category:Tutorial]]

Tutorial

2016-05-10T16:18:54Z

Dougiamas: /* See also these older tutorials */

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How we support 110 languages===
===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=
Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise.

=See also these older tutorials =
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]
* [[Category:Tutorial|Other Tutorials in these docs]]

[[Category:Tutorial]]

Tutorial

2016-05-10T16:17:52Z

Dougiamas: /* See also these older tutorials */

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How we support 110 languages===
===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=
Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise.

=See also these older tutorials =
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]

[[Category:Tutorial]]

Tutorial

2016-05-10T16:14:47Z

Dougiamas:

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How we support 110 languages===
===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=
Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise.

=See also these older tutorials =
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]

Tutorial

2016-05-10T16:13:49Z

Dougiamas: /* TODO */

Welcome to Moodle development!

This is a tutorial to help you learn how to write plugins for Moodle from start to finish, while showing you how to navigate the most important developer documentation along the way.

PRE-REQUISITES: We assume you are fairly comfortable with PHP in general and that you are able to install a database and web server on your local machine.

==Background==
===Setting up your development environment===
===The Moodle development framework===
===What type of plugin are you developing?===
==Let's make a plugin==
===The skeleton of your plugin===
===Basic page structure===
===How we support 110 languages===
===Add content to your page===
===Adding your plugin into Moodle's navigation===
===Database queries===
===Creating your own database tables===
===Supporting access permissions: roles, capabilities and contexts===
===Adding web forms===
===Maintaining good security===
===Handling files===
===Adding Javascript===
===Adding events and logging===
===Web Services and AJAX===
===Using caching to improve performance===
===Supporting backup and restore===
===Supporting automated testing===
==Publishing your plugin==
===Adding your plugin to moodle.org===
===Supporting your plugin===

=TODO=
Finishing this tutorial:
# About one or two screens for each section with a very generic overview for beginners, containing links to relevant docs WITH COMMENTS ABOUT QUALITY, USEFULNESS, CAVEATS etc.
# Go through all the linked pages and make sure they are current and accurate.
# Add a worked example to this page, so that each section has suggestions about things to add to the admin tool being built as an exercise.

== See also these older tutorials ==
* [[Blocks|A Step-by-step Guide To Creating Blocks]]
* [[NEWMODULE Tutorial]]
* [http://dev.moodle.org Introduction to Moodle programming (based on Moodle 1.8)]
* [[Moodle_Mobile_Developing_a_plugin_tutorial|Moodle Mobile plugin tutorial]]