Techie festival 2012 mobile web

270 views
181 views

Published on

Intro presentation for https://github.com/scottylogan/nobeldir

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
270
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Techie festival 2012 mobile web

  1. 1. Creating a Mobile Web App Scotty Logan Mark Branom ! ! ! Stanford Techie Festival 2012 http://www.flickr.com/photos/garryknight/5621240253/
  2. 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. 3. More Tools JS & CSS Minimizers / Compressors CSS Meta tools SASS, Less, Compass Scaffolding Testing Automation http://www.flickr.com/photos/booleansplit/3055314411/
  4. 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. 5. Firefox Test Profiles: firefox -ProfileManager /Applications/Firefox.app/Contents/ MacOS/firefox -ProfileManager FireBug, Dust-me Selectors, YSlow
  6. 6. Chrome Incognito mode Window Resizer Developer tools Google PageSpeed Adobe Shadow Chromium
  7. 7. Safari YSlow Extension Safari Developer Menu
  8. 8. Internet Explorer? Test with it, because people will use it
  9. 9. Our App Department directory ... IT Services doesn’t have staff photos
  10. 10. Our App Directory of Stanford’s
 Nobel Laureates http://news.stanford.edu/news/2001/october3/nobel-103.html
  11. 11. Mobile Only App
  12. 12. Sencha Touch Toolkit Model-View-Controller architecture Javascript, CSS and HTML http://sencha.com/products/touch/ Can build native apps! Setup needed
  13. 13. http://en.wikipedia.org/wiki/Model–view–controller
  14. 14. Distributed Version Control System ! http://git-scm.com/ http://git-scm.com/book
  15. 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. 16. First Version
  17. 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
 ...
  18. 18. http://stanford.edu/~swl/nobeldir/ or http://stanford.edu/~you/nobeldir/
  19. 19. Change Ordering
  20. 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. 21. Native Apps? > git checkout 4_senchaNative
 Switched to branch '4_senchaNative' > sencha package run ios.json
 ... > sencha package run android.json
 ...

  22. 22. Are we done?
  23. 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. 24. Time Travel
  25. 25. Mid 1990s Simple web pages Terrible tools Windows Notepad and Netscape vi and Mosaic
  26. 26. aka “Content First”
  27. 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>

  28. 28. git checkout 5_basic
  29. 29. Desktop
  30. 30. Mobile
  31. 31. Mobile First Set viewport: <meta name="viewport"
 content="width=device-width,
 initial-scale=1" />
  32. 32. Mobile... better
  33. 33. Theft, again I’m stealing from Brad Frost @brad_frost ! http://www.html5rocks.com/en/ mobile/responsivedesign/
  34. 34. CSS Breakpoints Default to narrow screen Use em min-width @media queries to create breakpoints 27em ~= 400px 45em ~= 720px 60em ~= 960px
  35. 35. Inlining Images while(<>) {
 if (/img src="([^:]*)">/) {
 $b = `base64 $1`;
 s#$1#data:image/jpg;base64,${b}#;
 }
 print $_;
 }

×