<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> <![endif]--> <div class="main-container"> <div class="main wrapper clearfix"> <article > <h1 class="page_title">OfficeJS Preliminary Specification</h1> <p>Version: 001 - 2013-11-19</p> <p>This documents defines the specification of OfficeJS offline HTML5 applications. </p> <h2>Dependencies</h2> <p>OfficeJS applications depends on the following libraries:</p> <ul> <li><a href="http://jquerymobile.com/">jQuery Mobile</a>: platform independent user interface widgets (<a href="http://jquerymobile.com/gbs/">more than 30 Web browsers supported</a>)</li> <li><a href="http://j-io.org/">J-IO</a>: backend independent persistent data management (offline, online, replication, encryption, etc.)</li> <li><a href="http://renderjs.org/">RenderJS</a>: reusable component system (optional)</li> </ul> <p>Applications submitted to OfficeJS HTML5 appstore must provide support for these libraries based on the following rules:</p> <p> <table border="1" align="center"> <tr> <th></th> <th>jQuery Mobile</th> <th>JIO</th> <th>RenderJS</th> </tr> <tr> <td>Application has no persistent data</td> <td>recommended</td> <td>optional</td> <td>optional</td> </tr> <tr> <td>Application has persistent data</td> <td>recommended</td> <td>required</td> <td>optional</td> </tr> <tr> <td>Application data can be embedded by another application</td> <td>recommended</td> <td>required</td> <td>required</td> </tr> </table> </p> <h2>Structure</h2> <p>An OfficeJS application is an HTML5 file that defines metadata and dependencies (CSS, JS) of the application. You can use the OfficeJS application template below to start.</p> <code><pre style="font-size:80%"> &lt;!DOCTYPE html&gt; &lt;html manifest="manifest.appcache"&gt; &lt;head> &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt; &lt;!-- required meta tags/information --&gt; &lt;title>Application Title&lt;/title&gt; &lt;meta name="description" content="Application Description"/&gt; &lt;meta name="keywords" content="Category_1, Category_2"> &lt;meta name="author" content="John Doe|johndoe@internetl.com"/&gt; &lt;!-- CSS --&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"&gt; &lt;!-- Custom Stylesheets --&gt; &lt;link rel="stylesheet" href="path/to/stylesheet_a"&gt; &lt;!-- JQUERY/JQUERY MOBILE --&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"&gt;&lt;/script&gt; &lt;!-- JIO --&gt; &lt;script type="text/javascript" src="path/to/sha256.amd.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/rsvp-custom.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/jio.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/complex_queries.js"&gt;&lt;/script&gt; &lt;!-- JIO storages, for example --&gt; &lt;script type="text/javascript" src="path/to/localstorage.js"&gt;&lt;/script&gt; &lt;!-- RenderJS --&gt; &lt;script type="text/javascript" src="path/to/renderjs.js"&gt;&lt;/script&gt; &lt;!-- 3rd Party Plugins/Custom Scripts --&gt; &lt;script type="text/javascript" src="path/to/plugin_a.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/plugin_b.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Content of application --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p> <b>Please note:</b> <ul> <li>Applications should have a manifest file specifying files to be cached</li> <li>Custom script and additional plugins can simply be added at the end of the HTML5 file's body. Examples of easy to integrate plugins include: <ul> <li>Form Validation - <a href="http://validval.frebsite.nl/">Validval</a></li> <li>i18n Support - <a href="http://jamuhl.github.io/i18next/">i18next</a></li> </ul> </li> <li>Beware of the <a href="http://view.jquerymobile.com/master/demos/navigation/">jQuery Mobile Ajax based navigation</a> when creating an HTML5 application.</li> </ul> </p> <h2>Application Examples</h2> <ul> <li><a href="http://www.officejs.com/app/task_manager/">Task Manager</a> provides a simple JQuery Mobile example of a persistent application based on JIO.</ul> </ul> <br /> <h2>Submitting your own application</h2> <p>You can submit your own applications here: &nbsp; <a href="http://officejs.com/#apps">Submit application on officejs.com</p> </article> </div> <!-- #main --> </div> </body> </html>