Your SlideShare is downloading. ×
  • Like
01 Mobile Web Introduction
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

01 Mobile Web Introduction


An introductory keynote to mobile web development history and challanges

An introductory keynote to mobile web development history and challanges

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Mobile Web Is HereTuesday, September 18, 12
  • 2. Agenda The Mobile Eco System Challenges for Mobile Developers Mobile Web To The Rescue Online ResourcesTuesday, September 18, 12
  • 3. The Mobile Eco SystemTuesday, September 18, 12
  • 4. The Mobile Eco System Almost Dead Almost Dead Dead DeadTuesday, September 18, 12
  • 5. How We Got Here 1990, started using 2G systems 1992, First SMS 1998, First ringtone sale 1999, First mobile internet in JapanTuesday, September 18, 12
  • 6. How We Got Here 2G was good for talk, not good enough for data 2001, First 3G network in Japan 2007, 295 Mil subscribers on 3G networks worldwideTuesday, September 18, 12
  • 7. Modern Mobile Device 3G or 3.5G capable Internet Connectivity Voice and Video calls No longer used “just for talking” Supports AppsTuesday, September 18, 12
  • 8. Major Players Apple Google Nokia MicrosoftTuesday, September 18, 12
  • 9. Apple 2007, first iPhone device iPhone Power Focus on Design Use Capacitive Touchscreen AppStore Built InTuesday, September 18, 12
  • 10. Tuesday, September 18, 12
  • 11. Google 2005 Google Buys Android Inc 2007 Announcing Android Platform 2008 HTC Dream (first Android Device)Tuesday, September 18, 12
  • 12. Nokia The Oldest player in the game. World’s largest phone manufacturer. Owner of the Symbian OS.Tuesday, September 18, 12
  • 13. Microsoft Known best for its desktop applications. Its mobile version Windows Mobile was never a success. Its newest product WinPhone7 looks promising.Tuesday, September 18, 12
  • 14. Which One Should You Choose ? iPhone apps are written in Objective C. Android apps are written in Java. Symbian apps are written in C++. Blackberry apps are written in Java (but not the same Java as Android). WinPhone apps are written in .NETTuesday, September 18, 12
  • 15. ALL OF THEMTuesday, September 18, 12
  • 16. Mobile HTML/CSS/JS Web technology is the one thing all devices have in commonTuesday, September 18, 12
  • 17. Mobile HTML/CSS/JS Using HTML, CSS and JavaScript, we can write applications that will run on any device.Tuesday, September 18, 12
  • 18. Mobile HTML/CSS/JS These apps can run online or offline using HTML5 offline capabilitiesTuesday, September 18, 12
  • 19. Mobile HTML/CSS/JS Web apps can integrate special device capabilities to create Hybrid Applications Music Waste Festival AppTuesday, September 18, 12
  • 20. Web Vs. Native Write once, test Write everywhere, Coding everywhere Test everywhere Use limited device Use full device Caps capabilities capabilities Build your own UI Use device UI Look & Feel components componentsTuesday, September 18, 12
  • 21. Mobile HTML/CSS/JS The App is a single html file, with many stylesheets and script files. Modular and OO JavaScript is used, to keep “state”Tuesday, September 18, 12
  • 22. Mobile Web Challenges Develop & Test on many platforms Adjust UI to various screen sizes Handle mobile UXTuesday, September 18, 12
  • 23. MOBILE APP USER EXPERIENCETuesday, September 18, 12
  • 24. Mobile UX App is used in short bursts - waiting for the bus or subway App is used while watching TV App is interrupted by incoming call or SMSTuesday, September 18, 12
  • 25. The Tools Code Less, Do MoreTuesday, September 18, 12
  • 26. Writing Apps Same source editor as the web Can use: Komodo Edit Dashcode MacVim/gvim/vim Aptana StudioTuesday, September 18, 12
  • 27. Writing Apps But you should really just use WebstormTuesday, September 18, 12
  • 28. Debugging Apps - Desktop Use Safari/Chrome inspector tools to debug Use Ripple to test your hybrid app from chrome Use iPhone/Android Emulator Use BrowserStackTuesday, September 18, 12
  • 29. Debugging Apps - Device Use weinre For on device inspectionTuesday, September 18, 12
  • 30. Deploying Apps For online apps, every web server will do. For offline apps, consider PhoneGap Before deployment, use a build script to minimize js/css filesTuesday, September 18, 12
  • 31. Tips: Performance jQuery is not your friend (consider jqmobi) Test on a real device throughout development Think about network trafficTuesday, September 18, 12
  • 32. HTML5 Boilerplate A ready made starter for html5 mobile apps Cross-platform compatible (Android, iOS, Blackberry, Symbian) Supports all devices and overcomes many glitches, September 18, 12
  • 33. Mobile Frameworks JQuery Mobile Sencha Touch jqMobiTuesday, September 18, 12
  • 34. jQuery Mobile Most hyped mobile framework today, and the one we’ll use in the course. Built on top of jQuery Themed UI WidgetsTuesday, September 18, 12
  • 35. Sencha Touch Stable and mature mobile framework Works best on iPhone & Android Commercial framework (currently free)Tuesday, September 18, 12
  • 36. Q&ATuesday, September 18, 12
  • 37. Thanks For Listening Ynon Perek ynonperek.comTuesday, September 18, 12