Mobile Web Introduction

Transcript

1. Writing Mobile Web Applications Thursday, July 12, 12

2. Agenda The Mobile Eco System Challenges for Mobile Developers Mobile

   Web To The Rescue Online Resources Thursday, July 12, 12

3. The Mobile Eco System Thursday, July 12, 12

4. How We Got Here 1990, started using 2G systems 1992,

   First SMS 1998, First ringtone sale 1999, First mobile internet in Japan Thursday, July 12, 12

5. 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 worldwide Thursday, July 12, 12

6. Modern Mobile Device 3G or 3.5G capable Internet Connectivity Voice

   and Video calls No longer used “just for talking” Supports Apps Thursday, July 12, 12

7. Major Players Apple Google Nokia Microsoft Thursday, July 12, 12

8. Apple 2007, first iPhone device iPhone Power Focus on Design

   Use Capacitive Touchscreen AppStore Built In Thursday, July 12, 12

9. Google 2005 Google Buys Android Inc 2007 Announcing Android Platform

   2008 HTC Dream (first Android Device) Thursday, July 12, 12

10. Nokia The Oldest player in the game. World’s largest phone

    manufacturer. Owner of the Symbian OS. Thursday, July 12, 12

11. Microsoft Known best for its desktop applications. Its mobile version

    Windows Mobile was never a success. Its newest product WinPhone7 looks promising. Thursday, July 12, 12

12. 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 .NET Thursday, July 12, 12

13. ALL OF THEM Thursday, July 12, 12

14. Mobile HTML/CSS/JS Web technology is the one thing all devices

    have in common Using HTML, CSS and JavaScript, we can write applications that will run on any device. These apps can run online or offline using HTML5 offline capabilities Web apps can integrate special device capabilities to create Hybrid Applications Thursday, July 12, 12

15. Web Vs. Native Coding Write once, test everywhere Write everywhere,

    Test everywhere Caps Use limited device capabilities Use full device capabilities Look & Feel Build your own UI components Use device UI components Thursday, July 12, 12

16. Web Vs. Native Typical Use Cases Typical Use Cases Provide

    information about service/ business (home page) Photo taking app M-Commerce (mobile online shop) Targeting specific audience Simple games 3D or complex games Thursday, July 12, 12

17. 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” Thursday, July 12, 12

18. Mobile Web Challenges Develop & Test on many platforms Adjust

    UI to various screen sizes Handle mobile UX Thursday, July 12, 12

19. Mobile UX Thursday, July 12, 12

20. 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 SMS Thursday, July 12, 12

21. Mobile Do’s Use responsive web site Thursday, July 12, 12

22. Mobile Do’s Use large UI components (finger size is 44x44)

    Thursday, July 12, 12

23. Mobile Do’s Be prepared for users jumping in and out

    of your app Thursday, July 12, 12

24. The Tools Code Less, Do More Thursday, July 12, 12

25. Writing Apps Same source editor as the web Can use:

    Komodo Edit Dashcode MacVim/gvim/vim Webstorm (Recommended) Thursday, July 12, 12

26. Debugging Apps - Desktop Use Safari/Chrome inspector tools to debug

    Use Ripple to test your hybrid app from chrome Use Weinre Consider BrowserStack (paid, recommended) Thursday, July 12, 12

27. Debugging Apps - Device Use weinre For on device inspection

    Use debug CSS to debug style sheets Use jsfiddle test test snippets on mobile Thursday, July 12, 12

28. 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 files Thursday, July 12, 12

29. Tips: Performance jQuery is not your friend (consider zepto.js) Test

    on a real device throughout development Think about network traffic Thursday, July 12, 12

30. HTML5 Boilerplate A ready made starter for html5 mobile apps

    Cross-platform compatible (Android, iOS, Blackberry, Symbian) Supports all devices and overcomes many glitches http://html5boilerplate.com/mobile/ Thursday, July 12, 12

31. Mobile Frameworks JQuery Mobile Sencha Touch jqMobi Thursday, July 12,

    12

32. jQuery Mobile Most hyped mobile framework today, and the one

    we’ll use in the course. Built on top of jQuery Themed UI Widgets Thursday, July 12, 12

33. Sencha Touch Stable and mature mobile framework Works best on

    iPhone & Android Commercial framework (currently free) Latest version 2 is still buggy Thursday, July 12, 12

34. Q & A Thursday, July 12, 12

35. Thanks For Listening Ynon Perek [email protected] Keynote is also available

    at: ynonperek.com Thursday, July 12, 12