Submit Search
Upload
Techie festival 2012 mobile web
•
0 likes
•
397 views
Scotty Logan
Follow
Intro presentation for https://github.com/scottylogan/nobeldir
Read less
Read more
Technology
Report
Share
Report
Share
1 of 35
Download now
Download to read offline
Recommended
FOWA Miami 2009 - Y!OS
FOWA Miami 2009 - Y!OS
Jonathan LeBlanc
Building Viral Social Experiences
Building Viral Social Experiences
Jonathan LeBlanc
Building an Android client
Building an Android client
rohitnayak
Intro to Bot Framework v3
Intro to Bot Framework v3
Shahed Chowdhuri
Nbt con december-2014-slides
Nbt con december-2014-slides
Behrouz Sadeghipour
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
mrdon
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Jonathan LeBlanc
No Connection? No Problem!
No Connection? No Problem!
Keir Bowden
Recommended
FOWA Miami 2009 - Y!OS
FOWA Miami 2009 - Y!OS
Jonathan LeBlanc
Building Viral Social Experiences
Building Viral Social Experiences
Jonathan LeBlanc
Building an Android client
Building an Android client
rohitnayak
Intro to Bot Framework v3
Intro to Bot Framework v3
Shahed Chowdhuri
Nbt con december-2014-slides
Nbt con december-2014-slides
Behrouz Sadeghipour
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
mrdon
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Jonathan LeBlanc
No Connection? No Problem!
No Connection? No Problem!
Keir Bowden
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
Jesse Rodgers
Titanium Mobile
Titanium Mobile
Axway Appcelerator
2011 08-24 mobile web app
2011 08-24 mobile web app
Sholto Maud
Best Practices for Mobile Web Design
Best Practices for Mobile Web Design
St. Petersburg College
Rum first london web perf meetup
Rum first london web perf meetup
Cliff Crocker
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
Whats New in Android
Whats New in Android
donnfelker
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
Widgets Tools and Doodads for Webmasters - CIL 2008
Widgets Tools and Doodads for Webmasters - CIL 2008
Darlene Fichter
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Seth Ladd
Comprehensive List of Open Source QA Tools
Comprehensive List of Open Source QA Tools
Ashish Bansal
Making The Most Of Mobile
Making The Most Of Mobile
Suzzicks
Microsoft tech talk march 28 2014
Microsoft tech talk march 28 2014
Cory Forsyth
orcreatehappyusers
orcreatehappyusers
tutorialsruby
orcreatehappyusers
orcreatehappyusers
tutorialsruby
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Patrick Lauke
Testing in Android: automatici, di integrazione, TDD e scenari avanzati
Testing in Android: automatici, di integrazione, TDD e scenari avanzati
Alfredo Morresi
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Patrick Meenan
Building Rich Applications with Appcelerator
Building Rich Applications with Appcelerator
Matt Raible
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
More Related Content
Similar to Techie festival 2012 mobile web
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
Jesse Rodgers
Titanium Mobile
Titanium Mobile
Axway Appcelerator
2011 08-24 mobile web app
2011 08-24 mobile web app
Sholto Maud
Best Practices for Mobile Web Design
Best Practices for Mobile Web Design
St. Petersburg College
Rum first london web perf meetup
Rum first london web perf meetup
Cliff Crocker
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
Whats New in Android
Whats New in Android
donnfelker
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
Widgets Tools and Doodads for Webmasters - CIL 2008
Widgets Tools and Doodads for Webmasters - CIL 2008
Darlene Fichter
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Seth Ladd
Comprehensive List of Open Source QA Tools
Comprehensive List of Open Source QA Tools
Ashish Bansal
Making The Most Of Mobile
Making The Most Of Mobile
Suzzicks
Microsoft tech talk march 28 2014
Microsoft tech talk march 28 2014
Cory Forsyth
orcreatehappyusers
orcreatehappyusers
tutorialsruby
orcreatehappyusers
orcreatehappyusers
tutorialsruby
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Patrick Lauke
Testing in Android: automatici, di integrazione, TDD e scenari avanzati
Testing in Android: automatici, di integrazione, TDD e scenari avanzati
Alfredo Morresi
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Patrick Meenan
Building Rich Applications with Appcelerator
Building Rich Applications with Appcelerator
Matt Raible
Similar to Techie festival 2012 mobile web
(20)
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
Titanium Mobile
Titanium Mobile
2011 08-24 mobile web app
2011 08-24 mobile web app
Best Practices for Mobile Web Design
Best Practices for Mobile Web Design
Rum first london web perf meetup
Rum first london web perf meetup
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Whats New in Android
Whats New in Android
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Widgets Tools and Doodads for Webmasters - CIL 2008
Widgets Tools and Doodads for Webmasters - CIL 2008
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Comprehensive List of Open Source QA Tools
Comprehensive List of Open Source QA Tools
Making The Most Of Mobile
Making The Most Of Mobile
Microsoft tech talk march 28 2014
Microsoft tech talk march 28 2014
orcreatehappyusers
orcreatehappyusers
orcreatehappyusers
orcreatehappyusers
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Testing in Android: automatici, di integrazione, TDD e scenari avanzati
Testing in Android: automatici, di integrazione, TDD e scenari avanzati
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Building Rich Applications with Appcelerator
Building Rich Applications with Appcelerator
Recently uploaded
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
V3cube
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
Recently uploaded
(20)
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
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
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 $_; }
Download now