Tools to Make Cross-platform Web Apps (mlearncon2012)

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

description

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.

Transcript of Tools to Make Cross-platform Web Apps (mlearncon2012)

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