Dozens of tools can be used to create cross-platform Web applications. These tools should help to reduce development costs and time and decrease code redundancy. However, which tools make cross-platform, cross-browser applications, and how do they work? Participants in this session will examine various tools, libraries, and frameworks commonly used to create cross-platform applications including Plain HTML, HTML5, jQuery Mobile, Appcelerator, and PhoneGap. You'll get high-level overviews about potential ways to deploy your applications effectively using Amazon Web Services, Heroku with CakePHP, or Ruby on Rails. Other useful tools that you'll see outlined include videos and jPlayer for completely cross-platform video/audio playback. You'll learn about jQuery templates/mustache-js for templating in js, when to use JSON vs XML vs YML, and when to use or not use RSS. You will get a good sense of which tools are available and when it is best to use them. In this session, you will learn: How to select the right tool to create your next Web application How and when to use Web applications as opposed to standard app development How to use multiple tools at one time When Flash is actually useful Technology discussed in this session: HTML4, HTML5, CSS3, jQuery Mobile, Appcelerator, PhoneGap, Amazon Web Services, Heroku, CakePHP, Ruby on Rails, VideoJS, jPlayer, jQuery Templates, Mustachejs, jsFiddle, and potentially more. Audience: Intermediate designers, developers, and project managers who are familiar with HTML/CSS and who have experience with app development.

1. Tools to Make Cross-platform Web Applications
mLearnCon: Concurrent Session 103
http://slidesha.re/M0vEGm
Parris Khachi: @parrissays
Khoa Lam: @dangkhoa

2. What’s your beef?

3. What we’ll cover
Design/Content What you should already know:
• Typography • HTML/CSS
• Responsive Design • Some knowledge of “Server Side”
• Media applications
• Animation Cross Platform
• HTML5/Fallbacks
• Tools/Frameworks
Development
• Platforms/Libraries
• Cloud
• Mobile Deployment
• Testing
• Live Demo

4. Design/Content
Typography (CSS3)
@font-face
http://www.fontsquirrel.com/
http://typekit.com/

5. Design/Content
Typography (cont)
http://fittextjs.com/
http://letteringjs.com/

6. Design/Content
The web is not the constitution
(media queries)
http://mediaqueri.es/ http://responsive.is

7. Design/Content
What about my media?
HTML5 audio/video and fallbacks
jPlayer Video/Audio:
http://jplayer.org/
VideoJS:
http://videojs.com/

8. Design/Content
What about my media?
Multi-res images and fallbacks
Content: Handy Media Queries for Backgrounds:
- Save your images larger .your-image {
- Some CSS: background:url(picture.png);
width: 20px;
height: 20px;
img, embed, object, video{ }
max-width: 100%;
} @media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
about img { only screen and (min-device-pixel-ration: 1.5) {
width: 30%; .your-image {
} background-image: url(picture@2x.png);
-webkit-background-size: 20px 20px;
Won’t work in IE6, but there are work-arounds background-size: 20px 20px;
out there! }
}
Image Transparency/Max-width Fixes:
http://msdn.microsoft.com/en-
us/library/ms532969(v=vs.85).aspx
File-size Considerations:
Picture Fill: http://scottjehl.com/picturefill/
<picture alt=“blah”>
<source src=“something.jpg” />
<source src=“something-big.jpg” media=“(min-width:800px)” />
<noscript><img src=“something.jpg” alt=“blah” /></noscript>
</picture>

9. Design/Content
Chill, it’s just a different way to write HTML4

10. Design/Content
Well how about my animations?
jQuery Based
http://visitmix.com/work/glimmer/
CSS3 Based:
http://www.sencha.com/
products/animator

11. Design/Content
But it doesn’t work everywhere?
HTML 5 Shiv:
https://github.com/aFarkas/html5shiv/
http://code.google.com/p/html5shiv
CSS3 Fallbacks to jQuery:
http://addyosmani.com/blog/css3t
ransitions-jquery/

12. Design/Content
That sounds like too much work
http://twitter.github.com/bootstrap/ http://jquerymobile.com/

13. Design/Content
That sounds like too much work (cont)
http://www.sencha.com/products/touch/
http://www.sencha.com/products/architect/

14. Design/Content
That sounds like too much work (cont)
http://www.codiqa.com/

15. Design/Content
Oh, dashcode would work too!
It should just come with the iOS SDK

16. Development
Ahh, I’m a developer,
how do I manage this insanity?
With More Insanity!!!
Design Your Eco-system
Models/Libraries
MVC
Middleware
Views

17. Development
Ahh, I’m a developer,
how do I manage this insanity?
With More Insanity!!! Framework Models Middleware Views
x x x
Design Your Eco-system
Models/Libraries
MVC x x
x
Middleware
x
Sass x
Haml x
Views
x
x
x x

18. Development
Deployment
How does it get to the end user and not just stay on my machine?
Interacts with…
Which are built on…

19. Development
How about actual applications?
Wait you actually want to do MORE work?
Let’s at least leverage what we already have…

20. Development
ONE Possible Setup
Framework Models Middleware Views
x x x
x x
x
x
Sass x
Haml x
x
x
x x

21. Development
ONE Possible Setup (cont)
1. Install nodejs and heroku
2. Open command prompt
 npm install –g expresss
 express your-project
 cd your-project
 npm install backbone
 git init
 git add .
 git commit –m “init”
 heroku create - - stack cedar
 git push heroku master
3. Find Heroku URL from your account
4. Read and do Hello World Phone Gap app, and use that URL instead of the
default file:/// url they specified
5. Your first mobile app using nodejs and express on heroku with phonegap is done

22. Development
How do we REALLY know it works everywhere?
Answer: Let’s write a test for it…
+

23. Follow us on twitter: Download presentation:
@parrissays http://slidesha.re/M0vEGm
@dangkhoa
So what now? Oh, Only Everything…