01 Mobile Web Introduction

transcript

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

Google

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)

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)

Thanks For Listening

Ynon Perek

ynonperek@yahoo.com

ynonperek.com

01 Mobile Web Introduction

Technology