Embed Size (px)
DESCRIPTION
Craig Johnston will take you on a tour of platform-neutral mobile application development with HTML, CSS and JavaScript, using code examples and lessons learned from Geekend’s own mobile app, Nine Inch Nails and nbc.com. The session includes implementations of HTML5, CSS3 and Javascript technologies wrapped in native applications. This session is geared toward web developers and designers starting out in mobile development, focusing on iPhone, iPad and Android devices.
Citation preview
mobile application development
for the web developercraig johnston
sudjam, llc
>
sudjam
los angeles
net
dev
web +mobile
mobile
focus
androidiosother
developer driven success
“how many apps does your device have?”
apps
mobile devices run appscomputers run applications
desktop browsers run web applicationsmobile browsers run web apps
native platforms web platform
native stack web stack
objective-cjava
cactionscript
htmlcssjs
native web apps
web platform
internet explorer safari firefox chrome opera
render htmljavascript api
htm
l
enginetrident gecko presto webkit
web platformin native apps
example
UIWebView
WebView
html + js
html + js
html <body>
<div class="loading">
<img src="images/logo_geekend_300x200.png" /><br />
<img src="images/loading.gif" />
</div>
<div id="location" class="page detail">
<div class="header">
<img src="images/logo_geekend_300x200.png" />
</div>
<div class="content title">
<h1 class="title"></h1>
<h2 class="address"></h2>
<h2 class="phone"></h2>
</div>
<div class="content controls">
<a href="#"><img src="images/btn_googlemaps.png" /></a>
</div>
<div class="content body">
</div>
</div>
</body>
jsif(!gApp) { var gApp = {}; }
gApp.populateLocation = function(data) {
x$('#location .content.title .title').inner(data.title);
x$('#location .content.title .address').inner(data.address);
x$('#location .content.title .phone').inner('<a href="tel:' + data.phone + '">' + data.phone + '</a>');
data.description ? x$('#location .content.body').inner(data.description) : null;
data.addressURI = encodeURI(data.address);
x$('#location > .header > img')[0].src = 'http://maps.google.com/maps/api/staticmap?center=' + data.addressURI + '&markers=color:blue|' + data.addressURI + '&zoom=15&size=300x200&sensor=false';
x$('#location > .content.controls a')[0].href = "http://maps.google.com/maps?q=" + data.addressURI;
x$('.loading').css({ display:'none'});
x$('.page').css({ display:'block'});
};
x$
7.8k.xhr().html().setStyle().addClass()...
cross platform web
T yet...
web ui
hardware acceleration
webkit
css animation
designfunction
prototypeweb app
html<div id="header">
<a href="#">Geekend 2010</a>
</div>
<div id="content">
<div id="newsListSection" class="section scroller current">
<div class="sectionHeader">
</div>
<ul id="newsList" class="list">
<li class="listItem newsDigestItem">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</li>
...
</ul>
</div>
</div>
css.current { -‐webkit-‐animation-‐name: slideinfromright;}
@-‐webkit-‐keyframes slideinfromright { from { -‐webkit-‐transform: translate3d(100%,0,0); } to { -‐webkit-‐transform: translate3d(0,0,0); }}
-‐webkit-‐transform: translate3d
jsx$(‘#n .current’).addClass(‘previous’);
x$(‘#n .current’).removeClass(‘current’);
x$(‘#n .next’).addClass(‘current’);
x$(‘#n .current’).removeClass(‘next’);
x$(‘#n .next’).addClass(‘current’);
.current { -‐webkit-‐animation-‐name: slideinfromright;}
phonegapnative wrapper
example
setup
web app
android
essentials
+
cubiq.org/iscroll
objectframework.com
