moparisthebest/app-UI
1
0
Fork 0
mirror of https://github.com/moparisthebest/app-UI synced 2024-11-15 13:45:04 -05:00
Code Issues Releases Wiki Activity
a702fc0038
app-UI/index.html

177 lines
9.4 KiB
HTML
Raw Normal View History

Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>app-UI by triceam</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>app-UI</h1>
<p>If you're going to build an app, use this.</p>
<p class="view"><a href="https://github.com/triceam/app-UI">View the Project on GitHub <small>triceam/app-UI</small></a></p>
<ul>
<li><a href="https://github.com/triceam/app-UI/zipball/master">Download <strong>ZIP File</strong></a></li>
<li><a href="https://github.com/triceam/app-UI/tarball/master">Download <strong>TAR Ball</strong></a></li>
<li><a href="https://github.com/triceam/app-UI">Fork On <strong>GitHub</strong></a></li>
</ul>
</header>
<section>
updated microsite content
2012-04-20 14:51:00 -04:00
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
more updates to index.html
2012-04-24 22:17:22 -04:00
<p><strong>app-UI</strong> is a free &amp; open source collection of reusable "application container" user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress - it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (<a href="http://www.phonegap.com" target="_blank">http://www.phonegap.com</a>). app-UI can easily be styled/customized using CSS.</p>
added video to index.html
2012-04-23 13:33:53 -04:00
updated video link
2012-04-23 14:24:04 -04:00
<p><iframe width="560" height="315" src="http://www.youtube.com/embed/gSJAN6BBRj4?rel=0" frameborder="0" allowfullscreen></iframe></p>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated microsite content
2012-04-20 14:51:00 -04:00
<p><em>Disclaimer: Please keep in mind that things will change as the project is improved and matured - this is a beta/early prototype.</em></p>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated content on index.html
2012-04-22 21:23:09 -04:00
<p>All of app-UI was created using HTML, CSS, & JavaScript. All animations are rendered using CSS3 translate3d, so that they are hardware accelerated (where supported). app-UI works well on iOS, Android and BlackBerry browsers (others not tested), and works well on the latest releases of most desktop browsers.</p>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated microsite content
2012-04-20 14:51:00 -04:00
<hr />
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated content on index.html
2012-04-22 21:23:09 -04:00
<h3>Why?</h3>
<p>You might be wondering "why create this?" when there are other open source alternatives like <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a>. The primary motivation for creating app-UI was to have reusable application containers that are highly performant, and do not force any prescriptive development paradigms. With respect to animations/transitions, app-UI outperforms the alternatives, particularly on mobile devices.</p>
fixes typo
2012-04-24 11:09:46 -04:00
<p>app-UI can be used with many different existing frameworks - app-UI only requires <a href="http://jquery.com/" target="_blank">jQuery</a> as a solution accelerator framework. It will work with existing UI widget frameworks (<a href="http://jqueryui.com/" target="_blank">jQuery UI</a>, <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a>, etc...), and will work with existing templating frameworks (<a href="https://github.com/janl/mustache.js" target="_blank">Moustache</a>, <a href="http://knockoutjs.com/" target="_blank">Knockout</a>, <a href="http://handlebarsjs.com/" target="_blank">Handlebars</a>, etc...). </p>
updated content on index.html
2012-04-22 21:23:09 -04:00
<hr/>
updated microsite content
2012-04-20 14:51:00 -04:00
<h3>Application Containers</h3>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated content on index.html
2012-04-22 21:23:09 -04:00
<p>app-UI currently has three application containers, and at this time it is not intended to be a complete UI widget framework.</p>
updated microsite content
2012-04-20 14:51:00 -04:00
<p><em>Please see the "samples" directory for usage scenarios - there is no documentation yet.</em></p>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated microsite content
2012-04-20 14:51:00 -04:00
<h5>ViewNavigator</h5>
<p>The ViewNavigator component allows you to create mobile experiences with an easily recognizable mobile UI paradigm. You use this to push & pop views from the stack.</p>
<p>Samples:
<ul>
<li><a href="examples/samples/01 - viewnavigator/01 - basic/index.html" target="_blank">Simple ViewNavigator</a></li>
<li><a href="examples/samples/04 - browser history/index.html" target="_blank">Simple ViewNavigator w/ Browser History Integration</a></li>
</ul></p>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated microsite content
2012-04-20 14:51:00 -04:00
<h5>SplitViewNavigator</h5>
<p>The SplitViewNavigator component allows you to create tablet experiences with an easily recognizable mobile UI paradigm. The SplitViewNavigator allows you to have side-by-side content in the landscape orientation, and the sidebar is hidden in portrait orientation.</p>
<p>Samples:
<ul>
<li><a href="examples/samples/02 - splitviewnavigator/01 - basic/index.html" target="_blank">Simple SplitViewNavigator</a></li></a></li>
</ul></p>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
updated microsite content
2012-04-20 14:51:00 -04:00
<h5>SlidingView</h5>
<p>The SlidingView allows content to slide to the side using a horizontal swipe gesture, revealing a navigation container "underneath". This is very similar to the behavior in Facebook's iPad application.
<p>Samples:</p>
<p>Just swipe horizontally with a finger or the mouse...
<ul>
<li><a href="examples/samples/03 - slidingView/01 - basic/index.html" target="_blank">Basic SlidingView</a></li></a></li>
<li><a href="examples/samples/03 - slidingView/02 - view navigators/index.html" target="_blank">Layered ViewNavigators in SlidingView</a></li></a></li>
</ul></p>
<hr />
updated content on index.html
2012-04-22 21:23:09 -04:00
<h3>Bugs & Features</h3>
updated microsite content
2012-04-20 14:51:00 -04:00
fixed typo
2012-04-23 16:23:14 -04:00
<p>No software is ever bug-free. If you encounter an issue, have feedback, or have feature requests, please log them at: <a href="https://github.com/triceam/app-UI/issues" target="_blank">https://github.com/triceam/app-UI/issues</a></p>
updated microsite content
2012-04-20 14:51:00 -04:00
<p>-OR-</p>
<p>Fork it, fix it, and send me a pull request. </p>
<p>Please do not just complain.</p>
<hr />
updated content on index.html
2012-04-22 21:23:09 -04:00
<h3>Real World Usage</h3>
updated microsite content
2012-04-20 14:51:00 -04:00
<p>You can see this framework in the following real-world apps:
<ul>
<li>US Census Browser:
<ul>
added link to census browser on android (google play)
2012-04-25 21:45:54 -04:00
<li><strong>iOS:</strong> <a href="http://itunes.apple.com/us/app/us-census-browser/id483201717?mt=8" target="_blank">http://itunes.apple.com/us/app/us-census-browser/id483201717?mt=8</a></li>
<li><strong>Android:</strong> <a href="https://play.google.com/store/apps/details?id=com.tricedesigns.CensusBrowser" target="_blank">https://play.google.com/store/apps/details?id=com.tricedesigns.CensusBrowser</a></li>
<li><strong>Web:</strong> <a href="http://tricedesigns.com/census" target="_blank">http://tricedesigns.com/census</a></li></ul></li>
updated microsite content
2012-04-20 14:51:00 -04:00
</ul>
<p>If you have built your own app using this framework, please let me know! (<a href="https://twitter.com/#!/andytrice" target="_blank">@andytrice</a> on twitter)</p>
<hr />
<h3>Dependencies</h3>
<p>The required dependencies are contained within this code repository, with links to the original files/sources. Dependencies include:
<ul>
<li>jQuery - <a href="http://jquery.com/" target="_blank">http://jquery.com/</a></li>
<li>jQuery Animate Enhanced - <a href="https://github.com/benbarnett/jQuery-Animate-Enhanced" target="_blank">https://github.com/benbarnett/jQuery-Animate-Enhanced</a></li>
<li>iScroll 4 - <a href="http://cubiq.org/iscroll-4" target="_blank">http://cubiq.org/iscroll-4</a></li>
<li>NoClickDelay - <a href="http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone" target="_blank">http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone</a></li>
</ul>
</p>
<hr />
<h3>LICENSE</h3>
<pre>
Copyright 2011 Andrew M. Trice. All rights reserved, except where otherwise noted.
Redistribution and use in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of
conditions and the following disclaimer.
THIS SOFTWARE IS PROVIDED BY ANDREW M. TRICE ''AS IS'' AND ANY EXPRESS OR IMPLIED
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ANDREW M. TRICE OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</pre>
updated index.html
2012-04-24 22:13:57 -04:00
<hr/>
playing with layout & attribution on index.html
2012-04-24 22:15:24 -04:00
updated microsite content
2012-04-20 14:51:00 -04:00
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
</section>
<footer>
playing with layout & attribution on index.html
2012-04-24 22:15:24 -04:00
<p>app-UI was created by Andrew Trice
<ul>
<li>blog: <a href="http://tricedesigns.com" target="_blank">http://tricedesigns.com</a></li>
updated index.html
2012-04-24 22:16:08 -04:00
<li>twitter: <a href="https://twitter.com/#!/andytrice" target="_blank">@andytrice</a></li>
playing with layout & attribution on index.html
2012-04-24 22:15:24 -04:00
</ul>
</p>
Created gh-pages branch via GitHub
2012-04-20 13:32:49 -04:00
<p>This project is maintained by <a href="https://github.com/triceam">triceam</a></p>
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-31064033-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
Reference in New Issue Copy Permalink