Techie festival 2012 mobile web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Techie festival 2012 mobile web

on

  • 142 views

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

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

Statistics

Views

Total Views
142
Views on SlideShare
142
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Techie festival 2012 mobile web Presentation Transcript

  • 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
  • 7. Safari YSlow Extension Safari Developer Menu
  • 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
  • 13. http://en.wikipedia.org/wiki/Model–view–controller
  • 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
 ...
  • 18. http://stanford.edu/~swl/nobeldir/ or http://stanford.edu/~you/nobeldir/
  • 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
  • 26. aka “Content First”
  • 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. git checkout 5_basic
  • 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 $_;
 }