[Mobile] web Apps
Dustin Tauer
Easel Solutions
Dustin@easelsolutions.com
@dtauer
slid.es/dtauer
Introductions
- Who you are
 - What you do/teach
 - Design?
 - Web development?
 - Ballroom dancing?
 - HTML/CSS/JavaScript experience
 
Schedule
Day 1
- JavaScript Syntax
 - jQuery
 - Modernizr
 - Twitter Bootstrap
 - JavaScript Templating
 - ...
 
Emphasis on different techniques
Schedule
Day 2
- Architecture
 - Managing Data
 - States/Routes
 - Building a single-page app
 
        Practical use
    Schedule
Day 3 (half-day)
        Lab Time
    Schedule
Um, where's the mobile part?
Before We start
- Course Files
 - Dreamweaver
 - Any text editor will do
 - Source Code Pro font
 - XAMPP (windows, mac)
 - MAMP (mac)
 - 
Developer Tools
 - Google Chrome (F12)
 - 
IE (F12), Firefox (install Firebug, F12)
 - 
Safari (enable in preferences)
 
Past | Present | Future
- 1991: HTML
 - 1994: HTML 2
 - 1996: CSS 1, JavaScript
 - 1997: HTML 4
 - 1998: CSS 2
 - ...[Flash]...
 - 2009: HTML 5 / CSS 3
 
Note: Aside from adding AJAX in 2005, 
JavaScript hasn't changed
Past | Present | Future
- 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.
 
Past | Present | Future
- 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" ); } }); 
Past | Present | Future
The Framework Era 
- CSS
 - Twitter Bootstrap, PureCSS
 - CSS Pre-processors
 - Sass, LESS, Compass
 - JavaScript UI
 - jQueryUI, YUI
 - JavaScript Architecture
 - Backbone.js, Knockout
 - Templating
 - Mustache, Underscore
 
Past | Present | Future
- 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"
 
Past | Present | Future
"Build it in HTML 5"
Past | Present | Future
HTML 5 is not mobile
HTML 5 is not the replacement for Flash
    HTML 5 ~= HTML + CSS + JavaScript 
Past | Present | Future
- 
HTML 5.0
: Q4, 2014
 - Yep, it's not done yet
 - 
HTML 5.1
: 2016
 - 
HTML 5.2
: 2018
 
- 
No more "mobile" websites
 - Browser consistency
 
JavaScript
- Variables
 - Functions
 - Scope
 - Objects
 - Classes
 
jquery
Write less, do more
All about the $
$("div").hide();
$("a[href]$='http://'").css("text-decoration", "underline");
jQuery
Wait for jQuery to be ready
$(document).ready(function() {// All your jQuery code goes here.});
Twitter Bootstrap
Front-end framework for building 
user interfaces faster
user interfaces faster
- CSS
 - JavaScript
 - Responsive
 
Modernizr
Detects HTML5/CSS3 features in a browser
No more browser detection
- If > Firefox 3.6
 
CSS Detection
- Classes are added: no-css-columns, css-transitions
 
JavaScript API
- if(Modernizr.Geolocation){ ... }
 
Handlebars
HTML client-side Templating
 <h1>{{article.title}}</h1>Handlebars
{{#each articles.[10].[#comments]}}
  <h1>{{subject}}</h1>
  <div>
    {{body}}
  </div>
{{/each}}HANDLEBARS
Alternatives
- 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
 
Resources
HTML5
RESOURCES
JavaScript
Resources
Other
- 
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/
 
Resources
Twitter
- @seb_ly
 - @ccoenraets
 - @rwd
 - @thibault_imbert
 - @mesh
 - @smashingmag
 
fundamentals are the key
Front End:
HTML  |  CSS  |  JavaScript
Back End:
Java  |  C#  |  PHP
Thanks!
dustin@easelsolutions.com
Lab Ideas
- Develop a responsive version of a website
 - Use your school (or any other ) website as inspiration
 - Use http://imsky.github.io/holder/ for temp images
 - Single Page jQuery Tutorial
 - Download starting files
 - Tutorial
 
- Get to know CodePen: http://codepen.io/
 - Discuss curriculum, technology, mobile testing, etc.
 
Download Sides
Faculty Academy 2013 | Mobile Web Apps
By Dustin Tauer
Faculty Academy 2013 | Mobile Web Apps
- 1,605