Transcript
Page 1: Tools to Make Cross-platform Web Apps (mlearncon2012)

mLearnCon: Concurrent Session 103http://slidesha.re/M0vEGm

Parris Khachi: @parrissays

Khoa Lam: @dangkhoa

Tools to Make Cross-platform Web Applications

Page 2: Tools to Make Cross-platform Web Apps (mlearncon2012)

What’s your beef?

Page 3: Tools to Make Cross-platform Web Apps (mlearncon2012)

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

Page 4: Tools to Make Cross-platform Web Apps (mlearncon2012)

Typography (CSS3)

@font-face

http://www.fontsquirrel.com/

http://typekit.com/

Design/Content

Page 5: Tools to Make Cross-platform Web Apps (mlearncon2012)

Typography (cont)

http://fittextjs.com/http://letteringjs.com/

Design/Content

Page 6: Tools to Make Cross-platform Web Apps (mlearncon2012)

The web is not the constitution (media queries)

http://responsive.ishttp://mediaqueri.es/

Design/Content

Page 7: Tools to Make Cross-platform Web Apps (mlearncon2012)

What about my media? HTML5 audio/video and fallbacks

jPlayer Video/Audio:http://jplayer.org/

VideoJS:http://videojs.com/

Design/Content

Page 8: Tools to Make Cross-platform Web Apps (mlearncon2012)

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

Page 9: Tools to Make Cross-platform Web Apps (mlearncon2012)

Chill, it’s just a different way to write HTML4

Design/Content

Page 10: Tools to Make Cross-platform Web Apps (mlearncon2012)

Well how about my animations?

jQuery Basedhttp://visitmix.com/work/glimmer/

CSS3 Based:http://www.sencha.com/products/animator

Design/Content

Page 11: Tools to Make Cross-platform Web Apps (mlearncon2012)

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

Page 12: Tools to Make Cross-platform Web Apps (mlearncon2012)

That sounds like too much work

http://twitter.github.com/bootstrap/ http://jquerymobile.com/

Design/Content

Page 13: Tools to Make Cross-platform Web Apps (mlearncon2012)

That sounds like too much work (cont)

http://www.sencha.com/products/touch/

http://www.sencha.com/products/architect/

Design/Content

Page 14: Tools to Make Cross-platform Web Apps (mlearncon2012)

That sounds like too much work (cont)

http://www.codiqa.com/

Design/Content

Page 15: Tools to Make Cross-platform Web Apps (mlearncon2012)

Oh, dashcode would work too!

It should just come with the iOS SDK

Design/Content

Page 16: Tools to Make Cross-platform Web Apps (mlearncon2012)

Ahh, I’m a developer,how do I manage this insanity?

Models/Libraries

Views

Middleware

MVC

Design Your Eco-system

With More Insanity!!!

Development

Page 17: Tools to Make Cross-platform Web Apps (mlearncon2012)

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

Page 18: Tools to Make Cross-platform Web Apps (mlearncon2012)

Deployment

How does it get to the end user and not just stay on my machine?

Interacts with…

Which are built on…

Development

Page 19: Tools to Make Cross-platform Web Apps (mlearncon2012)

How about actual applications?

Wait you actually want to do MORE work?Let’s at least leverage what we already have…

Development

Page 20: Tools to Make Cross-platform Web Apps (mlearncon2012)

ONE Possible Setup

Framework Models Middleware Views

x x x

x x

x

x

Sass x

Haml x

x

x

x x

Development

Page 21: Tools to Make Cross-platform Web Apps (mlearncon2012)

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

Page 22: Tools to Make Cross-platform Web Apps (mlearncon2012)

Answer: Let’s write a test for it…

How do we REALLY know it works everywhere?

+

Development

Page 23: Tools to Make Cross-platform Web Apps (mlearncon2012)

So what now? Oh, Only Everything…

Follow us on twitter:@parrissays@dangkhoa

Download presentation:http://slidesha.re/M0vEGm


Top Related