Hi Aaron;
You know HTML5 is just like sex in high school: every body talks about it, but only a few do something about it :)
However, we are working on a presentation app for a medical company. We are using the iPad for the presentation and IceBreak for server stuff.
jqTouch is very transparent. You can use it with out really seeing it in you html code. So you get cool animation features simply by using the class tag in HTML like:
<a class="swap" href="#home" style="position:absolute;left:970px;top:497px;height:150px;width:50px;"></a>
If you click this anchor the webkit animation "swap" will kick in - it looks so cool. No need for "flash" or any plugins.
But the primary reason I think JQT is cool - is the way you can have many "screens" or screen components in the same html simply by a "div" tag. You just mark your main page with class="current" - other "div"s will be hidden. It is just like a good old display file :)
<div id="home" class="current">
The following code contains a small menu with four options. Each option has one ore more "sub" panels - and that is all whats required. Not much "J" to see, but it really works.
You need a webkit based browser before you can use it. iPad or just plain safari will do the trick
Try it on
http://systest.icebreak.org/astellas/index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Astellas</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'rcs/icon.jpg',
addGlossToIcon: false,
startupScreen: 'rcs/icon.jpg',
statusBar: 'black',
preloadImages: [
'themes/jqt/img/back_button.png',
'themes/jqt/img/back_button_clicked.png',
'themes/jqt/img/button_clicked.png',
'themes/jqt/img/grayButton.png',
'themes/jqt/img/whiteButton.png',
'themes/jqt/img/loading.gif'
]
});
$(function(){
// Show a swipe event on swipe test
// Orientation callback event
$('body').bind('turn', function(e, data){
$('#orient').html('Orientation: ' + data.orientation);
});
});
</script>
<style type="text/css" media="screen">
body.fullscreen #home3 .info {
display: none;
}
#home a:hover {
border-style:dotted;
border-width:1px;
color: #fff;
background-color:#000000;
opacity:0.3;
}
#home2 a:hover {
border-style:dotted;
border-width:1px;
color: #fff;
background-color:#000000;
opacity:0.3;
}
</style>
</head>
<body>
<div id="home" class="current">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/forside-vesicare.png');"></div>
<a class="slideup" href="#page1" style="position:absolute;left:0px;top:497px;height:150px;width:237px;"></a>
<a class="slideup" href="#page2" style="position:absolute;left:240px;top:497px;height:150px;width:237px;"></a>
<a class="slideup" href="#page3" style="position:absolute;left:480px;top:497px;height:150px;width:237px;"></a>
<a class="slideup" href="#page4" style="position:absolute;left:720px;top:497px;height:150px;width:237px;"></a>
<a class="swap" href="#home2" style="position:absolute;left:970px;top:497px;height:150px;width:50px;"></a>
</div>
<div id="home2">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/forside-newyork-seminar.png');"></div>
<a class="slideup" href="#page1" style="position:absolute;left:0px;top:497px;height:150px;width:237px;"></a>
<a class="slideup" href="#page2" style="position:absolute;left:240px;top:497px;height:150px;width:237px;"></a>
<a class="slideup" href="#page3" style="position:absolute;left:480px;top:497px;height:150px;width:237px;"></a>
<a class="slideup" href="#page3" style="position:absolute;left:720px;top:497px;height:150px;width:237px;"></a>
<a class="swap" href="#home" style="position:absolute;left:970px;top:497px;height:150px;width:50px;"></a>
</div>
<div id="page1">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/kampagne-present.png');"></div>
<a class="slideup" href="#home" style="position:absolute;left:0px;top:0px;height:40px;width:80px;"></a>
<a class="fade" href="#page1a" style="position:absolute;left:645px;top:0px;height:40px;width:110px;"></a>
<a class="fade" href="#page1b" style="position:absolute;left:0px;top:272px;height:50px;width:235px;"></a>
</div>
<div id="page1a">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/kampagne-kampagnetraning.png');"></div>
<a class="slideup" href="#home" style="position:absolute;left:0px;top:0px;height:40px;width:80px;"></a>
<a class="fade" href="#page1" style="position:absolute;left:535px;top:0px;height:718px;width:110px;"></a>
</div>
<div id="page1b">
<a class="fade" style="position:absolute;left:0px;top:0px;height:20px;" href="#home">Home</a>
<iframe class="fade" frameborder="0" height="728px" width="1024px" style="position:absolute;left:0px;top:20px;" src="hr/HR Introduction Sep 2010.html"></iframe>
</div>
<div id="page2">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/debrief.png');"></div>
<a class="slideup" href="#home" style="position:absolute;left:0px;top:0px;height:40px;width:80px;"></a>
<a class="fade" href="#page2a" style="position:absolute;left:180px;top:0px;height:40px;width:40px;"></a>
</div>
<div id="page2a">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/debrief-opret-kort.png');"></div>
<a class="slideup" href="#home" style="position:absolute;left:0px;top:0px;height:40px;width:80px;"></a>
<select id="lol1" style="position:absolute;left:320px;top:200px;height:30px;width:200px;">
<optgroup label="Praktiserende læge">
<option value="1">Henrik Been</option>
<option value="2">John Erik Dahl</option>
<option value="3">Max Nibelau</option>
</optgroup>
</select>
<select id="lol2" style="position:absolute;left:320px;top:250px;height:30px;width:200px;">
<optgroup label="Sygehus afdeling">
<option value="1">Herlev M10</option>
<option value="2">Herlev M20</option>
<option value="3">Herlev M30</option>
<option value="1">Riget M10</option>
<option value="2">Riget M20</option>
<option value="3">Riget M30</option>
</optgroup>
</select>
<select id="lol3" style="position:absolute;left:320px;top:300px;height:30px;width:200px;">
<optgroup label="Lægehus/Klinik">
<option value="1">Hørsolm</option>
<option value="2">Den danske læger</option>
<option value="3">Lægehust </option>
</optgroup>
</select>
<a class="fade" style="position:absolute;left:320px;top:405px;height:40px;width:100px;" href="#page2" ></a>
</div>
<div id="page3">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/traning-traning.png');"></div>
<a class="slideup" href="#home" style="position:absolute;left:0px;top:0px;height:40px;width:80px;"></a>
<a class="fade" href="#page3a" style="position:absolute;left:480px;top:0px;height:40px;width:110px;"></a>
</div>
<div id="page3a">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/traning-undervisning.png');"></div>
<a class="slideup" href="#home" style="position:absolute;left:0px;top:0px;height:40px;width:80px;"></a>
<a class="fade" href="#page3" style="position:absolute;left:600px;top:0px;height:718px;width:110px;"></a>
</div>
<div id="page4">
<div style="position:absolute;left:0;top:0;height:748px;width:1024px;background-image:url('rcs/corporate_strategier.png');"></div>
<a class="pop" href="#home" style="position:absolute;left:0px;top:0px;height:40px;width:80px;"></a>
</div>
</body>
</html>
Best regards
Niels Liisberg
Chief Technology Officer
System & Method
Håndværkersvinget 8, DK-2970 Hørsholm
Phone: +45 70 20 30 10
Fax: +45 70 20 30 11
Direct: +45 45 166 135
Mobile: +45 31 158 861
E-mail: nli@xxxxxxxxxxxxxxxxx
Web: www.system-method.com and www.Icebreak.org
Den 14/10/2010 kl. 12.12 skrev Aaron Bartell:
The JS overhead has been a concern of mine. The SenchaTouch has just
been "the path of least learning resistance" for me. Would you be
able to share a simple app to show how you are accomplishing a mobile
app with jqTouch?
Also, I thought Sencha purchased jqTouch - so is that library still
being developed outside of Sencha?
Aaron Bartell
http://mowyourlawn.com
http://mowyourlawn.com/blog/
On Wed, Oct 13, 2010 at 6:57 AM, Niels Liisberg <liisberg@xxxxxxxxxxxxx> wrote:
Hi Aaron;
Your app looks cool. I'm a huge ExtJS fan myself, however when it comes to iPhone or iPad I actually prefer plain HTML5 and jqTouch only. It gives you the same look and feel like Sencha Touch / native app, but with a smaller JS overhead.
This is just my findings - some like the daughter - some like the mother .... :)
Best regards
Niels Liisberg
Chief Technology Officer
System & Method
Håndværkersvinget 8, DK-2970 Hørsholm
Phone: +45 70 20 30 10
Fax: +45 70 20 30 11
Direct: +45 45 166 135
Mobile: +45 31 158 861
E-mail: nli@xxxxxxxxxxxxxxxxx
Web: www.system-method.com and www.Icebreak.org
Den 08/10/2010 kl. 21.08 skrev Aaron Bartell:
It is completely separate but uses a lot of the same foundation with
just less features. The actual download is still too big (299k) for
mobile devices in my opinion, though 3g and 4g connected devices will
be fine.
Here is the file with all of the functionality:
http://red.rpg-xml.com/oru11/sencha-touch-beta-0.96/ext-touch.js
Here is a work-in-progress app I am using SenchaTouch for (NOTE IT
ONLY WORKS IN AN HTML5 SUPPORTING BROWSER - Safari and Chrome):
http://red.rpg-xml.com/oru11/dspf/chattygabby.html
Take a look at the above app from your Android or iPhone and see what
I mean by it looks like a native UI and not a web page. My mind is
buzzing with possibilities. Stay tuned for an article :-)
Aaron Bartell
http://mowyourlawn.com
http://mowyourlawn.com/blog/
On Fri, Oct 8, 2010 at 1:17 PM, Nathan Andelin <nandelin@xxxxxxxxx> wrote:
From: Aaron Bartell
I am working on an HTML5/SenchaTouch app right now ...
Do you know the size of the core library for Sencha Touch? Is it completely
independent from ExtJS? Or is it built on top of ExtJS?
Thanks,
-Nathan
--
This is the Web Enabling the AS400 / iSeries (WEB400) mailing list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.
--
This is the Web Enabling the AS400 / iSeries (WEB400) mailing list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.
--
This is the Web Enabling the AS400 / iSeries (WEB400) mailing list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.
midrange.com
