Download - 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
Tuesday, September 18, 12
The Mobile Eco System
Tuesday, September 18, 12
The Mobile Eco SystemAlmost Dead
Dead DeadAlmost Dead
Tuesday, September 18, 12
How We Got Here1990, started using 2G systems
1992, First SMS
1998, First ringtone sale
1999, First mobile internet in Japan
Tuesday, September 18, 12
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
Tuesday, September 18, 12
Modern Mobile Device3G or 3.5G capable
Internet Connectivity
Voice and Video calls
No longer used “just for talking”
Supports Apps
Tuesday, September 18, 12
Major Players
Apple
Nokia
Microsoft
Tuesday, September 18, 12
Apple2007, first iPhone device
iPhone Power
Focus on Design
Use Capacitive Touchscreen
AppStore Built In
Tuesday, September 18, 12
Tuesday, September 18, 12
2005 Google Buys Android Inc
2007 Announcing Android Platform
2008 HTC Dream (first Android Device)
Tuesday, September 18, 12
Nokia
The Oldest player in the game.
World’s largest phone manufacturer.
Owner of the Symbian OS.
Tuesday, September 18, 12
MicrosoftKnown best for its desktop applications.
Its mobile version Windows Mobile was never a success.
Its newest product WinPhone7 looks promising.
Tuesday, September 18, 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
Tuesday, September 18, 12
ALL OF THEM
Tuesday, September 18, 12
Mobile HTML/CSS/JS
Web technology is the one thing all devices have in common
Tuesday, September 18, 12
Mobile HTML/CSS/JS
Using HTML, CSS and JavaScript, we can write applications that will run on any device.
Tuesday, September 18, 12
Mobile HTML/CSS/JS
These apps can run online or offline using HTML5 offline capabilities
Tuesday, September 18, 12
Mobile HTML/CSS/JS
Web apps can integrate special device capabilities to create Hybrid Applications
Music Waste Festival App
Tuesday, September 18, 12
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
Tuesday, September 18, 12
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
Mobile Web Challenges
Develop & Test on many platforms
Adjust UI to various screen sizes
Handle mobile UX
Tuesday, September 18, 12
MOBILE APP USER EXPERIENCE
Tuesday, September 18, 12
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
Tuesday, September 18, 12
The ToolsCode Less, Do More
Tuesday, September 18, 12
Writing AppsSame source editor as the web
Can use:
Komodo Edit
Dashcode
MacVim/gvim/vim
Aptana Studio
Tuesday, September 18, 12
Writing Apps
But you should really just use Webstorm
Tuesday, September 18, 12
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
Tuesday, September 18, 12
Debugging Apps - Device
Use weinre For on device inspection
Tuesday, September 18, 12
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
Tuesday, September 18, 12
Tips: Performance
jQuery is not your friend (consider jqmobi)
Test on a real device throughout development
Think about network traffic
Tuesday, September 18, 12
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/
Tuesday, September 18, 12
Mobile Frameworks
JQuery Mobile
Sencha Touch
jqMobi
Tuesday, September 18, 12
jQuery Mobile
Most hyped mobile framework today, and the one we’ll use in the course.
Built on top of jQuery
Themed UI Widgets
Tuesday, September 18, 12
Sencha Touch
Stable and mature mobile framework
Works best on iPhone & Android
Commercial framework (currently free)
Tuesday, September 18, 12
Q & A
Tuesday, September 18, 12
Thanks For Listening
Ynon Perek
ynonperek.com
Tuesday, September 18, 12