Slide 1

Slide 1 text

Writing Mobile Web Applications Thursday, July 12, 12

Slide 2

Slide 2 text

Agenda The Mobile Eco System Challenges for Mobile Developers Mobile Web To The Rescue Online Resources Thursday, July 12, 12

Slide 3

Slide 3 text

The Mobile Eco System Thursday, July 12, 12

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Apple 2007, first iPhone device iPhone Power Focus on Design Use Capacitive Touchscreen AppStore Built In Thursday, July 12, 12

Slide 9

Slide 9 text

Google 2005 Google Buys Android Inc 2007 Announcing Android Platform 2008 HTC Dream (first Android Device) Thursday, July 12, 12

Slide 10

Slide 10 text

Nokia The Oldest player in the game. World’s largest phone manufacturer. Owner of the Symbian OS. Thursday, July 12, 12

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ALL OF THEM Thursday, July 12, 12

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Mobile Web Challenges Develop & Test on many platforms Adjust UI to various screen sizes Handle mobile UX Thursday, July 12, 12

Slide 19

Slide 19 text

Mobile UX Thursday, July 12, 12

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Mobile Do’s Use large UI components (finger size is 44x44) Thursday, July 12, 12

Slide 23

Slide 23 text

Mobile Do’s Be prepared for users jumping in and out of your app Thursday, July 12, 12

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Writing Apps Same source editor as the web Can use: Komodo Edit Dashcode MacVim/gvim/vim Webstorm (Recommended) Thursday, July 12, 12

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Q & A Thursday, July 12, 12

Slide 35

Slide 35 text

Thanks For Listening Ynon Perek [email protected] Keynote is also available at: ynonperek.com Thursday, July 12, 12