[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,584