Techie festival 2012 mobile web
•
0 likes•397 views
Intro presentation for https://github.com/scottylogan/nobeldir
Recommended
More Related Content
Similar to Techie festival 2012 mobile web
Similar to Techie festival 2012 mobile web (20)
Recently uploaded
Recently uploaded (20)
Techie festival 2012 mobile web
- 1. Creating a Mobile Web App Scotty Logan Mark Branom ! ! ! Stanford Techie Festival 2012 http://www.flickr.com/photos/garryknight/5621240253/
- 2. Basic Tools Editor Web Server (stanford.edu/~you) Version Control (git) Emulators (Android), Simulators (iOS) Devices (iOS, Android) Browsers (Chrome, Firefox, Safari) http://www.flickr.com/photos/44456430@N04/6814917044/
- 3. More Tools JS & CSS Minimizers / Compressors CSS Meta tools SASS, Less, Compass Scaffolding Testing Automation http://www.flickr.com/photos/booleansplit/3055314411/
- 4. http://yeoman.io “a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build beautiful web applications”
- 5. Firefox Test Profiles: firefox -ProfileManager /Applications/Firefox.app/Contents/ MacOS/firefox -ProfileManager FireBug, Dust-me Selectors, YSlow
- 6. Chrome Incognito mode Window Resizer Developer tools Google PageSpeed Adobe Shadow Chromium
- 8. Internet Explorer? Test with it, because people will use it
- 9. Our App Department directory ... IT Services doesn’t have staff photos
- 10. Our App Directory of Stanford’s Nobel Laureates http://news.stanford.edu/news/2001/october3/nobel-103.html
- 11. Mobile Only App
- 12. Sencha Touch Toolkit Model-View-Controller architecture Javascript, CSS and HTML http://sencha.com/products/touch/ Can build native apps! Setup needed
- 14. Distributed Version Control System ! http://git-scm.com/ http://git-scm.com/book
- 15. Got Code? cardinal1 ~> cd WWW > git clone -b 1_sencha ? http://github.com/scottylogan/nobeldir.git Cloning into 'nobledir'... ... Receiving objects: ..., done. Resolving deltas: ..., done. > cd nobeldir > git status # On branch 1_sencha nothing to commit (working directory clean)
- 16. First Version
- 17. > git checkout 2_senchaNobel Switched to branch '2_senchaNobel' > git diff 1_sencha 2_senchaNobel --name-only ... app/controller/Application.js app/model/Laureate.js app/view/Laureates.js ... laureates.json ... resources/css/app.css resources/images/headshots/Arrow_68.jpg ... resources/images/photos/Arrow_180.jpg ...
- 19. Change Ordering
- 20. > git checkout 2_senchaNobelYear Switched to branch '2_senchaNobelYear' > git diff 2_senchaNobel 2_senchaNobelYear ... --- a/app/store/Laureates.js +++ b/app/store/Laureates.js @@ -4,10 +4,10 @@ Ext.define('NobelDir.store.Laureates', { config: { model: 'NobelDir.model.Laureate', autoLoad: true, sorters: 'year', + sorters: 'displayCategory', grouper: { groupFn: function (record) { return record.get('displayCategory'); + return record.get('year'); } }, proxy: {
- 21. Native Apps? > git checkout 4_senchaNative Switched to branch '4_senchaNative' > sencha package run ios.json ... > sencha package run android.json ...
- 22. Are we done?
- 23. We need at least 2 apps different frameworks for mobile vs non-mobile What about “other” browsers? TV? Heavy! 18MB for our app, but can be 1.2MB
- 24. Time Travel
- 25. Mid 1990s Simple web pages Terrible tools Windows Notepad and Netscape vi and Mosaic
- 27. <!DOCTYPE html> <html> <head> <title>Nobel Laureates</title> </head> <body> <article> <h1>Kenneth J. Arrow</h1> <img src=”images/Arrow_68.jpg”> <a href=”arrow.html”>Economics, 1972</a> </article> ... </body> </html>
- 29. Desktop
- 30. Mobile
- 31. Mobile First Set viewport: <meta name="viewport" content="width=device-width, initial-scale=1" />
- 32. Mobile... better
- 33. Theft, again I’m stealing from Brad Frost @brad_frost ! http://www.html5rocks.com/en/ mobile/responsivedesign/
- 34. CSS Breakpoints Default to narrow screen Use em min-width @media queries to create breakpoints 27em ~= 400px 45em ~= 720px 60em ~= 960px
- 35. Inlining Images while(<>) { if (/img src="([^:]*)">/) { $b = `base64 $1`; s#$1#data:image/jpg;base64,${b}#; } print $_; }