[Mobile] web Apps

• 1991: HTML
• 1994: HTML 2
• 1996: CSS 1, JavaScript
• 1997: HTML 4
• 1998: CSS 2
• ...[Flash]...
• 2009: HTML 5 / CSS 3

• Built sites with simple HTML & CSS
• Used JavaScript sparingly

• browsername=navigator.appName;
  if (browsername.indexOf("Netscape")!=-1) {browsername="NS"}
  else if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}
  
  browserversion="0";
  if (navigator.appVersion.indexOf("2.")!=-1){browserversion="2"};
  if (navigator.appVersion.indexOf("3.")!=-1){browserversion="3"};
  

• Relied heavily on server-side code for dynamic functionality
• Used a lot of Flash.  A lot.

• Sites are being updated to be more "mobile friendly"
• Sites are replacing Flash content with JavaScript
• jQuery to the rescue
• 9800+ lines of code so you can do this:

• //Load current temperature from an external webservice
  //by passing a zipcode...all without reloading the page$.ajax({url: "/api/getWeather", data: {zipcode: 90210},
    success: function( data ) {
      $( "#temp" ).html(data + " degrees" );
    }
  });

• CSS
• Twitter Bootstrap, PureCSS
• CSS Pre-processors
• Sass, LESS, Compass
• JavaScript UI
• jQueryUI, YUI
• JavaScript Architecture
• Backbone.js, Knockout
• Templating
• Mustache, Underscore

• Responsive Web Design
• Mobile-first approach
• Single page websites
• AJAX
• Responsive/Adaptive images
• For Retina and other high-resolution displays
• Lighter page load
• Few "standards"

 $(document).ready(function() {
  // All your jQuery code goes here.

});

 <h1>{{article.title}}</h1>

{{#each articles.[10].[#comments]}}
  <h1>{{subject}}</h1>
  <div>
    {{body}}
  </div>
{{/each}}

• Mustache
• Built on Handlebars
• https://github.com/janl/mustache.js/
• Ember (easier version of Handlebars)
• http://emberjs.com/
  
• Recommended
• _Underscore
• http://underscorejs.org/
  
• More of a utility library

• http://www.html5rocks.com/
  
• http://www.w3schools.com/
  
• http://html5boilerplate.com/
  

• http://todomvc.com/
  

• http://jasonweaver.name/lab/offcanvas/
  
• http://alistapart.com/article/fluidgrids
  
• https://github.com/scottjehl/picturefill
  
• JS, CSS Minify/Beautify
• http://javascript-minifier.com/
• Better to use a compiler like nodejs
• http://screensiz.es/
  
• http://blog.easelsolutions.com/2011/03/testing-mobile-websites-with-xmapp/