mLearnCon: Concurrent Session 103http://slidesha.re/M0vEGm
Parris Khachi: @parrissays
Khoa Lam: @dangkhoa
Tools to Make Cross-platform Web Applications
What’s your beef?
What we’ll cover
What you should already know:
• HTML/CSS• Some knowledge of “Server Side”
applications
Design/Content
• Typography• Responsive Design• Media• Animation Cross Platform• HTML5/Fallbacks• Tools/Frameworks
Development
• Platforms/Libraries• Cloud• Mobile Deployment• Testing• Live Demo
Typography (CSS3)
@font-face
http://www.fontsquirrel.com/
http://typekit.com/
Design/Content
Typography (cont)
http://fittextjs.com/http://letteringjs.com/
Design/Content
The web is not the constitution (media queries)
http://responsive.ishttp://mediaqueri.es/
Design/Content
What about my media? HTML5 audio/video and fallbacks
jPlayer Video/Audio:http://jplayer.org/
VideoJS:http://videojs.com/
Design/Content
What about my media? Multi-res images and fallbacks
Content:- Save your images larger- Some CSS:
img, embed, object, video{ max-width: 100%;}
about img { width: 30%;}
Won’t work in IE6, but there are work-arounds out there!
Image Transparency/Max-width Fixes:http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Handy Media Queries for Backgrounds:.your-image { background:url(picture.png); width: 20px; height: 20px;}
@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ration: 1.5) { .your-image { background-image: url([email protected]); -webkit-background-size: 20px 20px; background-size: 20px 20px; }}
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>
Design/Content
Chill, it’s just a different way to write HTML4
Design/Content
Well how about my animations?
jQuery Basedhttp://visitmix.com/work/glimmer/
CSS3 Based:http://www.sencha.com/products/animator
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/css3transitions-jquery/
Design/Content
That sounds like too much work
http://twitter.github.com/bootstrap/ http://jquerymobile.com/
Design/Content
That sounds like too much work (cont)
http://www.sencha.com/products/touch/
http://www.sencha.com/products/architect/
Design/Content
Oh, dashcode would work too!
It should just come with the iOS SDK
Design/Content
Ahh, I’m a developer,how do I manage this insanity?
Models/Libraries
Views
Middleware
MVC
Design Your Eco-system
With More Insanity!!!
Development
Ahh, I’m a developer, how do I manage this insanity?
Models/Libraries
Views
Middleware
MVC
Design Your Eco-system
With More Insanity!!! Framework Models Middleware Views
x x x
x x
x
x
Sass x
Haml x
x
x
x x
Development
Deployment
How does it get to the end user and not just stay on my machine?
Interacts with…
Which are built on…
Development
How about actual applications?
Wait you actually want to do MORE work?Let’s at least leverage what we already have…
Development
ONE Possible Setup
Framework Models Middleware Views
x x x
x x
x
x
Sass x
Haml x
x
x
x x
Development
ONE Possible Setup (cont)
Development
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 account4. Read and do Hello World Phone Gap app, and use that URL instead of the
default file:/// url they specified5. Your first mobile app using nodejs and express on heroku with phonegap is done
Answer: Let’s write a test for it…
How do we REALLY know it works everywhere?
+
Development
So what now? Oh, Only Everything…
Follow us on twitter:@parrissays@dangkhoa
Download presentation:http://slidesha.re/M0vEGm