01 Mobile Web Introduction

Mobile Web Is Here

Tuesday, September 18, 12

Agenda

The Mobile Eco System

Challenges for Mobile Developers

Mobile Web To The Rescue

Online Resources


The Mobile Eco System


The Mobile Eco SystemAlmost Dead

Dead DeadAlmost Dead


How We Got Here1990, started using 2G systems

1992, First SMS

1998, First ringtone sale

1999, First mobile internet in Japan


How We Got Here2G was good for talk, not good enough for data

2001, First 3G network in Japan

2007, 295 Mil subscribers on 3G networks worldwide


Modern Mobile Device3G or 3.5G capable

Internet Connectivity

Voice and Video calls

No longer used “just for talking”

Supports Apps


Major Players

Apple

Google

Nokia

Microsoft


Apple2007, first iPhone device

iPhone Power

Focus on Design

Use Capacitive Touchscreen

AppStore Built In


Google

2005 Google Buys Android Inc

2007 Announcing Android Platform

2008 HTC Dream (first Android Device)


Nokia

The Oldest player in the game.

World’s largest phone manufacturer.

Owner of the Symbian OS.


MicrosoftKnown best for its desktop applications.

Its mobile version Windows Mobile was never a success.

Its newest product WinPhone7 looks promising.


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


ALL OF THEM


Mobile HTML/CSS/JS

Web technology is the one thing all devices have in common


Mobile HTML/CSS/JS

Using HTML, CSS and JavaScript, we can write applications that will run on any device.


Mobile HTML/CSS/JS

These apps can run online or offline using HTML5 offline capabilities


Mobile HTML/CSS/JS

Web apps can integrate special device capabilities to create Hybrid Applications

Music Waste Festival App


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


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”


Mobile Web Challenges

Develop & Test on many platforms

Adjust UI to various screen sizes

Handle mobile UX


MOBILE APP USER EXPERIENCE


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


The ToolsCode Less, Do More


Writing AppsSame source editor as the web

Can use:

Komodo Edit

Dashcode

MacVim/gvim/vim

Aptana Studio


Writing Apps

But you should really just use Webstorm


Debugging Apps - Desktop

Use Safari/Chrome inspector tools to debug

Use Ripple to test your hybrid app from chrome

Use iPhone/Android Emulator

Use BrowserStack


Debugging Apps - Device

Use weinre For on device inspection


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


Tips: Performance

jQuery is not your friend (consider jqmobi)

Test on a real device throughout development

Think about network traffic


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/


Mobile Frameworks

JQuery Mobile

Sencha Touch

jqMobi


jQuery Mobile

Most hyped mobile framework today, and the one we’ll use in the course.

Built on top of jQuery

Themed UI Widgets


Sencha Touch

Stable and mature mobile framework

Works best on iPhone & Android

Commercial framework (currently free)


Q & A


Thanks For Listening

Ynon Perek

[email protected]

ynonperek.com


mailto:[email protected]

mailto:[email protected]

http://www.ynonperek.com

http://www.ynonperek.com

01 Mobile Web Introduction

Technology

Transcript of 01 Mobile Web Introduction