| 1 |
Mouchak |
| 2 |
======= |
| 3 |
|
| 4 |
A Javascript framework for building single page websites or web apps. |
| 5 |
|
| 6 |
It takes the content of the website as a JSON. The JSON file can contain |
| 7 |
text or multimedia content(images, audio, video). |
| 8 |
|
| 9 |
Mouchak can also load external JS/CSS files through the JSON. This gives the website to load |
| 10 |
plugins to enhance/customize the website either through JS or CSS. |
| 11 |
|
| 12 |
|
| 13 |
How to use it |
| 14 |
============= |
| 15 |
|
| 16 |
Either download this codebase or git clone the repo. |
| 17 |
|
| 18 |
Once you have downloaded or cloned the repo, load the index.html file in your browser. |
| 19 |
This loads the example content from example.json. |
| 20 |
|
| 21 |
Use the index.html file as the boilerplate file of your index.html file. |
| 22 |
Modify the code in the script tag, which loads the example.json, and change |
| 23 |
the URL to point to your JSON file. |
| 24 |
Remember the JSON files is loaded in the client side. Hence your JSON file should |
| 25 |
be from the same domain where this app is loaded. |
| 26 |
See cross-domain policies for details. |
| 27 |
|
| 28 |
The global object for this framework is exposed as the variable M. This can be |
| 29 |
inspected in the console. |
| 30 |
|
| 31 |
The M.filterTags() method takes an array of strings representing the tags to filter. |
| 32 |
It returns an array of the content objects with the matched tags. |
| 33 |
|
| 34 |
|
| 35 |
How it works |
| 36 |
============ |
| 37 |
|
| 38 |
It takes the content of the site in the form of JSON. The JSON should describe the content |
| 39 |
(in terms of type like text, audio or image) and also provide the content (in case of text |
| 40 |
the content is as it is, in case images urls are given). The JSON should also describe the |
| 41 |
content semantically by giving it tags. |
| 42 |
More details about the JSON format in example.json file. |
| 43 |
|
| 44 |
The framework provides an easy way to pull up related content by just specifying the tags. |
| 45 |
|
| 46 |
Backbone models are used to model the content. Different content has different types. |
| 47 |
Again all types are derived from one base type. |
| 48 |
Each model has a corresponding view as well. The views manage how the content are rendered. |
| 49 |
|
| 50 |
Each page is made of multiple content (content objects). |
| 51 |
Pages are also modeled in Backbone models and their view is managed via Backbone views. |
| 52 |
|
| 53 |
The framework also use Backbone router to handle client side routing. |
| 54 |
|
| 55 |
|
| 56 |
What it uses |
| 57 |
============ |
| 58 |
|
| 59 |
Mouchak uses HTML5 Boilerplate and Bootstrap project as a boilerplate code for the website. |
| 60 |
Mouchak also leverages powerful libraries like Backbone.js and Underscore.js to manage and render |
| 61 |
content. This gives more flexibility to the content of the website. |
| 62 |
|
| 63 |
The main code resides in js/mouchak.js. The HTML markup it uses is in index.html. |
| 64 |
|
| 65 |
Javascript libary files are in js/lib. We use backbone.js, underscore.js and jquery in this |
| 66 |
framework. |
| 67 |
|
| 68 |
Boilerplate code/files: |
| 69 |
404.html - error template |
| 70 |
crossdomain.xml - cross-domain policies to be obeyed by the client |
| 71 |
css/bootstrap.css - boilerplate css |
| 72 |
css/normalize.css - boilerplate css |
| 73 |
css/main.css - boilerplate css |
| 74 |
humans.txt - write your own credits |
| 75 |
img/ - directory for images |
| 76 |
robots.txt - crawl spider rules |
| 77 |
|
| 78 |
|
| 79 |
Support |
| 80 |
======= |
| 81 |
|
| 82 |
Email to rayanon at janastu dot org for any kind of feedback. |
| 83 |
|
| 84 |
|
| 85 |
Issues |
| 86 |
====== |
| 87 |
|
| 88 |
Report issues at http://bugzilla.pantoto.org/bugzilla3/ |
