0
Tools to Make Cross-platform Web ApplicationsmLearnCon: Concurrent Session 103http://slidesha.re/M0vEGm          Parris Kh...
What’s your beef?
What we’ll cover      Design/Content                What you should already know:•   Typography                      • HTM...
Design/Content                      Typography (CSS3)@font-face                                     http://www.fontsquirre...
Design/Content                   Typography (cont)http://fittextjs.com/                               http://letteringjs.c...
Design/Content     The web is not the constitution           (media queries)http://mediaqueri.es/      http://responsive.is
Design/Content                What about my media?             HTML5 audio/video and fallbacks                            ...
Design/Content                        What about my media?                      Multi-res images and fallbacksContent:    ...
Design/ContentChill, it’s just a different way to write HTML4
Design/Content            Well how about my animations?                                                   jQuery Based    ...
Design/Content            But it doesn’t work everywhere?                                                            HTML ...
Design/Content         That sounds like too much workhttp://twitter.github.com/bootstrap/   http://jquerymobile.com/
Design/Content        That sounds like too much work (cont)http://www.sencha.com/products/touch/                          ...
Design/ContentThat sounds like too much work (cont)           http://www.codiqa.com/
Design/ContentOh, dashcode would work too!      It should just come with the iOS SDK
Development                   Ahh, I’m a developer,               how do I manage this insanity?With More Insanity!!!Desig...
Development                   Ahh, I’m a developer,               how do I manage this insanity?With More Insanity!!!     ...
Development                               DeploymentHow does it get to the end user and not just stay on my machine?      ...
Development               How about actual applications?Wait you actually want to do MORE work?Let’s at least leverage wha...
DevelopmentONE Possible Setup             Framework   Models   Middleware   Views                x          x          x  ...
Development                     ONE Possible Setup (cont)1. Install nodejs and heroku2. Open command prompt        npm in...
Development How do we REALLY know it works everywhere?Answer: Let’s write a test for it…                                  ...
Follow us on twitter:         Download presentation:@parrissays                http://slidesha.re/M0vEGm@dangkhoa         ...
Upcoming SlideShare
Loading in...5
×

Tools to Make Cross-platform Web Apps (mlearncon2012)

2,362

Published on

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.

Published in: Technology, Design
3 Comments
0 Likes
Statistics
Notes
  • Oh, btw, I remember some of you had questions about html5 caching and getting around size limitations. Checkout this screencast: https://peepcode.com/products/html5-browser-caching

    It should let you know about the current state of affairs.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • As promised, here are our slides from devLearn: http://slidesha.re/MFLirl. It takes a closer look at some of the solutions we're working on.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for attending our session. I'll be posting the audience questions I captured and other notes soon.

    -K
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
2,362
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide
  • Welcome!
  • Transcript of "Tools to Make Cross-platform Web Apps (mlearncon2012)"

    1. 1. Tools to Make Cross-platform Web ApplicationsmLearnCon: Concurrent Session 103http://slidesha.re/M0vEGm Parris Khachi: @parrissays Khoa Lam: @dangkhoa
    2. 2. What’s your beef?
    3. 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. 4. Design/Content Typography (CSS3)@font-face http://www.fontsquirrel.com/http://typekit.com/
    5. 5. Design/Content Typography (cont)http://fittextjs.com/ http://letteringjs.com/
    6. 6. Design/Content The web is not the constitution (media queries)http://mediaqueri.es/ http://responsive.is
    7. 7. Design/Content What about my media? HTML5 audio/video and fallbacks jPlayer Video/Audio: http://jplayer.org/VideoJS:http://videojs.com/
    8. 8. Design/Content What about my media? Multi-res images and fallbacksContent: 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. 9. Design/ContentChill, it’s just a different way to write HTML4
    10. 10. Design/Content Well how about my animations? jQuery Based http://visitmix.com/work/glimmer/CSS3 Based:http://www.sencha.com/products/animator
    11. 11. Design/Content But it doesn’t work everywhere? HTML 5 Shiv: https://github.com/aFarkas/html5shiv/ http://code.google.com/p/html5shivCSS3 Fallbacks to jQuery:http://addyosmani.com/blog/css3transitions-jquery/
    12. 12. Design/Content That sounds like too much workhttp://twitter.github.com/bootstrap/ http://jquerymobile.com/
    13. 13. Design/Content That sounds like too much work (cont)http://www.sencha.com/products/touch/ http://www.sencha.com/products/architect/
    14. 14. Design/ContentThat sounds like too much work (cont) http://www.codiqa.com/
    15. 15. Design/ContentOh, dashcode would work too! It should just come with the iOS SDK
    16. 16. Development Ahh, I’m a developer, how do I manage this insanity?With More Insanity!!!Design Your Eco-systemModels/Libraries MVC Middleware Views
    17. 17. Development Ahh, I’m a developer, how do I manage this insanity?With More Insanity!!! Framework Models Middleware Views x x xDesign Your Eco-systemModels/Libraries MVC x x x Middleware x Sass x Haml x Views x x x x
    18. 18. Development DeploymentHow does it get to the end user and not just stay on my machine? Interacts with… Which are built on…
    19. 19. Development How about actual applications?Wait you actually want to do MORE work?Let’s at least leverage what we already have…
    20. 20. DevelopmentONE Possible Setup Framework Models Middleware Views x x x x x x x Sass x Haml x x x x x
    21. 21. Development ONE Possible Setup (cont)1. Install nodejs and heroku2. 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 master3. 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
    22. 22. Development How do we REALLY know it works everywhere?Answer: Let’s write a test for it… +
    23. 23. Follow us on twitter: Download presentation:@parrissays http://slidesha.re/M0vEGm@dangkhoa So what now? Oh, Only Everything…
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×