PhoneGap allows developers to create mobile apps using web technologies like HTML, CSS, and JavaScript. It works by wrapping web content in a native container, allowing access to native device APIs. The document discusses trends in mobile usage surpassing PCs, and time spent on mobile activities like social media and apps. It provides examples of creating a PhoneGap app using the WebView API and DroidGap class. Key APIs exposed include accelerometer, camera, contacts and notifications. Apps can be built with PhoneGap Build and published to app stores for multiple platforms. JQuery Mobile is presented as a framework for PhoneGap development. The conclusion discusses the growing mobile space and changing role of web designers.

1. HTML5&CSS3 “Mobile”:
PhoneGap
Catania, 19 Maggio 2012
GTUG BootCamp pre Startup Weekend

2. Mercato Mobile
2011
Vendite Smartphone
480.000 unità
Vendite PC
410.000 unità

3. Previsioni
2013
Rapporto 2 a 1 tra dispositivi
mobile e PC.

4. Tempo
32%
32% Telefonia 47%
9% Posta Elettronica
9%
12%
12% Navigazione Web
47% Applicazioni (Social Network,
mappe, ecc) Telefonia Email
Web App

5. Stats Browser OS
01/2011
8% 1% 9% 2%
5%
5%
31%
52%
28%
46% 9%
1%
1%4%
Win7 Vista
Win2003 WinXP
Linux
Mobile
Mac
04/2012

6. Stats Browser Mobile
13% 17%
iPhone iPad
iPod Android
31%
Others
37%
3%

7. Android Versions

8. PhoneGap

9. Esempio webapp con
WebView()
package web.app;
import android.app.Activity;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.os.Bundle;
public class WebAppActivity extends Activity {
/** Called when the activity is first created. */
WebView myWebView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl("http://www.blogf1.it");
}
}

10. Esempio con PhoneGap
package blogF1;
import org.apache.cordova.*;
import android.os.Bundle;
public class itAppActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}

11. API Native (alcune)
Accelerometro
Camera
Connessioni
Contatti
Notifiche

12. Pubblicazione
Get cross-platform mobile apps in three
easy steps
1.Write your app using HTML, CSS and JavaScript
2.Upload it to the PhoneGap Build service
3.Get back app-store ready apps for Apple iOS,
Google Android, Windows Phone 7, Palm,
Symbian, Blackberry and more.

13. PhoneGap Build
Center

14. JQueryMobile

15. Conclusioni
Il mondo mobile è in continua
espansione e da oggi spazio a nuove
figure professionali.
I webdesigner di ieri devono oggi
scontrarsi con i dispositivi mobile.
Applicazione Nativa vs WebApp?