# Overview
{id: mobile-overview}


## Introduction
{id: intro-mobile}

* Build a web site that is mobile enabled.
* Build an application that can be installed on mobile devices via the Appstore or Google play or ...


{aside}

The first is obviously needs web techniques such as HTML/CSS and Javascript.
For the second one we could use native technologies but we are going to the same web technologies there too.
{/aside}



## Technologies used
{id: mobile-technologies-used}

* HTML, HTML5
* CSS, CSS3
* JavaScript
* HTML DOM and JavaScript events
* JQuery and JQuery Mobile
* Ajax
* Perl
* Perl Dancer



## Background and overview
{id: background}


## Platforms
{id: platforms}

* Android
* iPhone
* Windows Phone


Others


* Symbian (Nokia)
* BlackBerry
* MeeGo
* bada
* Firefox OS
* Ubuntu
* ...



## Capabilities
{id: capabilities}

* 3G, 3.5G
* Internet
* Voice and Video calls
* Applications



## Development Languages
{id: development-languages}

* iPhone - Objective C
* Android - Java
* Symbian - C++
* Blackberry - Java
* Microsoft - .NET



## Web based development
{id: web-based}

* HTML5/CSS3/JS all the Operating Systems and devices
* PhoneGap to package


{aside}

Using PhoneGap to generate stand-alone application using a chrome-less
version of the built-in browser of the device.

Using an API to use the specical features of the device to create a Hybrid Application.
{/aside}


## Compare
{id: compare}
|  | HTML/CSS/JS | Native |
| Coding | Write once, Test everywhere | Write Everywhere, Test Everywere |
| Capabilities | Limited device capabilities | All the deveice capabilities |
| Look and Feel | Build your own UI components | Use deveice UI components |
| Developers | Many and cheap | Few and expensive |


## Browsers
{id: browsers}

* Firefox
* Google Chrome
* Safari
* Opeara
* IE - Internet Explorer 9



## Web browser engines
{id: web-browser-engines}

* WebKit (by Apple): Safari
* Blink (a WebKit fork) Chromium, Google Chrome, Opera
* Gecko (Mozilla) Firefox
* Trident (Microsoft) IE
* Presto (old Opera)



## Mobile web challenges
{id: mobile-challenges}

* Develop and Test on many platforms
* Adjust UI to various screen sizes - much smaller than Desktop
* Browser diversity in capabilities
* Handle mobile UX (User experience)



## Screen resolution
{id: screen-resolution}

```
Sizes                     diagonal  resolution ppi (pixe/inch)
                          in inch
iPod touch 123x58  mm     (4   )    1136x640  (326 )
iPhone 5   123x58  mm     (4   )    1136x640  (326 )
iPad mini  200x134 mm     (7.9 )    1024x768  (163 )
iPad       241x185 mm     (9.7 )    2048x1536 (264 )
MacBook Air               (11.6)    1366x768
MacBook Air               (13.3)    1440x900
MacBook Pro               (13.3)    2560x1600 (227 )
MacBook Pro               (15.4)    2880x1800 (220 )
Nexus 4                   (4.7 )    1280x768  (320 )
Nexus 7                   (7   )    1280x800  (216 )
Nexus 10                  (10  )    2560x1600 (300 )
Samsung Galaxy Y GT-S5360 (3   )    320x240   (133 )
Samsung S 4               (5   )    1920x1080 (441 )
Galaxy Tab 2              (10.1)    1280x800
```


## Mobile User Experinece (UX)
{id: mobile-user-experience}

* 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.
* It is much harder to type.



## Development Environments
{id: development-environment}

* [Dashcode](http://en.wikipedia.org/wiki/Dashcode) (Part of Apple's Xcode)
* [Aptana Studio](http://www.aptana.com/) (Eclipse based, Open Source)
* [Webstorm](http://www.jetbrains.com/webstorm/) (IntelliJ IDEA based, $$$)
* Vim
* Emacs


## Debugging Applications - Desktop
{id: debugging-applications-desktop}

* Use Safari/Chrome inspector tools to debug (Free) [Chrome developer tools](https://developers.google.com/chrome-developer-tools/)
* Use iPhone/Android Emulator (Free)
* Use [Ripple](http://ripple.incubator.apache.org/) to test your hybrid app from Chrome (Open Source)
* [BrowserStack](http://www.browserstack.com/) (Live, Web-Based Browser Testing, $$$)
* [Browserling](https://browserling.com/) (Interactive cross-browser Testing, $$$)


## Debugging Applications - Device
{id: debugging-applications-device}

* Use [weinre](http://people.apache.org/~pmuellr/weinre/) for on device inspection (Open source)


## Deplyoing Applications
{id: deploying-applications}

* For online apps every web server will do
* For offline apps, [Adobe PhoneGap](https://phonegap.com/) (Open Source), [service](https://build.phonegap.com/)
* Before deployment use a build script to minimize js/css/html files.




## HTML starter toolkits
{id: html-starter-toolkits}

* [HTML Boilerplate](http://html5boilerplate.com/)
* [Twitter Bootstrap](http://twitter.github.io/bootstrap/)


## HTML 5 Boilerplate
{id: html-boilerplate}

* A ready made starter for html5 mobile apps
* Cross-platform compatible (Android, iOS, Blackberry, Symbian)
* Supports all the devices and overcomes many glitches
* [HTML 5 Boilerplate](http://html5boilerplate.com/mobile)


## Twitter Bootstrap
{id: twitter-bootstrap}

* Customizable [Bootstra](http://twitter.github.io/bootstrap/)
* Used by the Perl Maven site ...



## Mobile frameworks
{id: mobile-frameworks}

* JQuery Mobile
* Sencha Touch
* jqMobi




## jQuery Mobile
{id: jquery-mobile}

* Most hyped mobile framework today
* Built on top of jQuery (slow, big)
* Themed UI Widgets
* [JQuery Mobile](http://jquerymobile.com/)


## Sencha Touch
{id: sencha-touch}

* Stable and mature mobile framework
* Works best on iPhone and Android
* Commercial framework ($$$)
* [Sencha Touch](http://www.sencha.com/products/touch)


## jqMobi (Intel App Framework)
{id: jqmobi}

* [jqMobi](http://www.jqmobi.com/)
* [Intel App Framework](http://app-framework-software.intel.com/)

