Making the Most of Existing Public Web Development Frameworks WEB04
jquery Mobile Write less, do more 2
The jquery Suite UI Overhaul Look and Feel Transitions Interactions Touch, Mouse, Keyboard Don t Break The Web AJAX Navigation Cross Platform 3
10+ Billion Web Enabled Devices on the Internet Title Source: ITU, Mark Lipacis, Morgan Stanley Research Chart Source: Stats Counter, Global Stats April 2012
Graded Browser Support A-grade Full jquery Mobile Support BlackBerry 10, BlackBerry 6+, ios 3.2+, Android 2.1+, Windows Phone 7+ B-grade Almost full support, no AJAX navigation BlackBerry 5, Opera Mini 5.0 6.5, Nokia Symbian C-grade Non-enhanced HTML experience BlackBerry 4.x, Windows Mobile A browser that does not support media queries (with the exception of Internet Explorer 7+) will automatically be demoted to C grade. 5
Progressive Enhancement You provide: Clean, semantic HTML HTML5 data- attributes for configuration jquery Mobile provides: Automatic initialization Appropriate functionality based on browser support Automatic enhancement of form elements Automatic AJAX navigation and page transitions (A-grade browsers) 6
Customize Your Themes http://jqueryui.com/themeroller 7
Inspiration http://www.jqmgallery.com 8
Including jquery Mobile <head> <title>welcome!</title> <meta name="viewport content="width=device-width, initial-scale=1"> <link rel="stylesheet href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> 9
Listen, Intercept, Handle w/ AJAX 1. User taps on a link 2. Link is intercepted 3. Loading indicator is shown 4. Original link is loaded via AJAX 5. New page is enhanced by jquery Mobile 6. Loading indicator is hidden 7. Page is animated in to view 10
Auto Enhanced UI 11
Anatomy of a Page <body> <div data-role="page"> <div data-role="header"></div> <div data-role="content"></div> <div data-role="footer"></div> </div> </body> 12
Web to Native BlackBerry WebWorks (Formerly PhoneGap) 13
Resources http://jquerymobile.com/resources 14
Books 15
Get Involved github.com/jquery/jquery-mobile
Sencha Touch HTML5 mobile framework 17
Sencha Touch HTML5 mobile framework Cross-browser normalization Offline storage proxy Rich animation, styles & themes Pre-built UI components Touch & orientation events Accessibility
Touch Charts Available in Sencha Touch Built with HTML5 & CSS3 Cross browser compatible Hardware accelerated Optimized for performance Natural feeling gestures
Sencha Touch 2.0 Performance improvements Events Layout Scrolling Theming Easier to use Simplified component configs New documentation center and format
Sencha Touch 2.0 Touch event handling Layouts Improved layout system Faster tablet rendering Themes Automatic image-based themes Scrolling Platform-specific implementations
Dojo Instantly better web apps 22
Dojo Toolkit Build sophisticated Web apps http://dojotoolkit.org/ Supports multiple browsers Enables rapid development Philosophy: Push the limits (SVG, WebGL, HTML5) Define & adopt defacto standards Developer productivity & tools Open, free & liberally licensed
Dojo Toolkit : Project Goals Unified JavaScript toolkit Superior web & mobile apps Be awesome Fast, powerful, efficient, modular, extensible Business friendly Grids, charts, forms & data Rich UI widgets Calendars, 3D carousel, etc
Zepto A minimalist JavaScript library 25
Zepto.js A minimalist JavaScript library Looks and feels like jquery Designed to be more lightweight and faster http://zeptojs.com/ If you use jquery, you already know how to use Zepto <script src="zepto.min.js"></script> <script> $('ul').append('<li>new item</li>') </script>
Zepto.js Smaller and faster than jquery Zepto is only 8.4 Kb (jquery is 100+ Kb) Doesn t have all jquery capabilities just the basics Scalable Uses mobile WebKit features as much as possible Easily replaceable with larger libraries if your app grows
Modernizr Front-end development done right 28
Polyfills Its not just a buzz word! Code that fills in missing native browser features (e.g. HTML5 APIs) Also known as a shim Flattens API landscape Example libraries: Modernizr.js Yepnope.js Webshims Lib
Modernizr A JavaScript library for browser feature detection HTML5 CSS3 http://modernizr.com/ Purpose Write content for all browsers Avoid lowest-common denominator Goal is fewer runtime errors Make websites that work exactly right no matter what browser or device your visitors use
Modernizr Example: Check for geolocation API support Fall back to alternative code (polyfill) if geolocation is not available Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); Open source https://github.com/modernizr/modernizr
three.js JavaScript 3D library 32
three.js JavaScript 3D library http://mrdoob.github.com/three.js/ Choose rendering surface: Canvas, WebGL or SVG Create cameras, objects, lights, materials & more Getting started http://learningthreejs.com/
Drawing a rectangle Using WebGL var square = gl.createbuffer(); var square_vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; gl.bindbuffer(gl.array_buffer, square); gl.bufferdata(gl.array_buffer, new Float32Array(square_vertices), gl.static_draw); square.itemsize = 3; square.numitems = 4;
Drawing a rectangle Using three.js var rect = new THREE.Rectangle(); rect.set(0, 0, 100, 100); Designed to make 3D graphics development easier
Three.js Open Source project https://github.com/mrdoob/three.js BlackBerry contributions Making three.js better for BlackBerry developers
CreateJS Enable rich interactive HTML5 content 37
createjs Suite of modular JavaScript libraries & tools Uses open web technologies (HTML5) Enables rich interactive content Includes: EasleJS TweenJS SoundJS PreloadJS Zoe 38
createjs EasleJS Simplifies using HTML5 canvas JavaScript API familiar to Flash developers SoundJS Cross-browser JavaScript API Makes working with HTML5 audio a breeze PreloadJS Manage & coordinate asset loading Images, sounds, JavaScript, data, etc.
createjs Example http://www.pirateslovedaisies.com/
THANK YOU WEB04