899c2c7 by Anon Ray at 2013-01-25 |
1 |
Mouchak |
846083c by Arvind at 2012-11-23 |
2 |
======= |
|
3 |
|
899c2c7 by Anon Ray at 2013-01-25 |
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/ |
|
89 |
|