Mobile Application Development for the Web Developer

mobile application
development
for the web developer
craig johnston
sudjam, llc
>

developer driven success
“how many apps does your device have?”

mobile devices run apps
computers run applications

desktop browsers run web applications
mobile browsers run web apps

objective-c
java
c
actionscript
html
css
js

internet explorer
safari
ﬁrefox
chrome
opera

engine
trident gecko presto webkit

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>

js
if(!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'});
};

7.8k.xhr()
.html()
.setStyle()
.addClass()
...

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
{

translate3d(0,0,0);

}
}

translate3d

js
x$(‘#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;
}

Mobile Application Development for the Web Developer

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Mobile Application Development for the Web Developer

Similar to Mobile Application Development for the Web Developer (20)

Recently uploaded

Recently uploaded (20)

Mobile Application Development for the Web Developer