La ventaja de hacer una aplicación móvil con HTML5 es que la puedes hacer funcionar igual de bien en cualquiera de los SO para móviles que hay actualmente sin necesidad de cambios.
Yo he estado haciendo una pequeña prueba de concepto a ver como funciona y la verdad es que me ha gustado mucho. De momento he probado con Android, con Windows Phone espero poder probarlo estas navidades y con IPhone y BlackBerry me tengo que fiar de todo lo que he leído y doy por echo que también funciona.
Para estas prueba he usado:
- Eclipse con el Android SDK para crear la app que contiene la página HTML5.
- JQuery Mobile. para el estilo y las transiciones entre páginas.
Bien, pues vamos con el código, es muy sencillo pero creo que perfecto para poder hacernos una idea de como funciona esto.
Lo primero que he hecho ha sido crear una aplicación Android 2.2 (no explico todos los pasos de como la he creado por que no es el objetivo del artículo, si alguien quiere o necesita que explique como se crea un proyecto en Android, que lo diga en los comentarios y ya hare algo) y lo que hago es crear un objeto del tipo WebView que contendrá la pagina web.
1: public class PruebaActivity extends Activity {
2: /** Called when the activity is first created. */
3: @Override4: public void onCreate(Bundle savedInstanceState) {
5: super.onCreate(savedInstanceState);
6: setContentView(R.layout.main); 7: 8: WebView webView = (WebView)findViewById(R.id.webView); 9: webView.getSettings().setJavaScriptEnabled(true);10: //webView.getSettings().setGeolocationEnabled(true);
11: webView.setWebChromeClient(new WebChromeClient());
12: webView.loadUrl("file:///android_asset/www/index.html");
13: 14: 15: } 16: }Después solo hay que crear la página html que contendrá la aplicación:
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <!--<meta charset="utf-8">-->
5: <meta name="viewport" content="width=device-width, initial-scale=1">
6: <title>Web App</title>
7: 8: <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
9: <script type="text/javascript" src="jquery-1.5.min.js"></script>1:2: <script type="text/javascript" src="jquery.mobile-1.0rc2.min.js"></script>
10: 11: </head>
12: <body>
13: 14: <div data-role="page" id="page">
15: <div data-role="header">
16: <h1>Página 1</h1>
17: </div>
18: <div data-role="content">
19: <ul data-role="listview">
20: <li><a href="#page2">Página 2</a></li>
21: <li><a href="#page3">Página 3</a></li>
22: </ul>
23: </div>
24: <div data-role="footer">
25: <h4></h4>
26: </div>
27: </div>
28: 29: <div data-role="page" id="page2" data-title="Page 2" data-add-back-btn="true">
30: <div data-role="header">
31: <h1>Página</h1>
32: </div>
33: <div data-role="content">
34: Contenido de la página 35: </div>
36: <div data-role="footer">
37: <h4></h4>
38: </div>
39: </div>
40: 41: <div data-role="page" id="page3" data-title="Page 3" data-add-back-btn="true">
42: <div data-role="header" >
43: <h1>Otra página</h1>
44: </div>
45: <div data-role="content">
46: mas contenido! 47: </div>
48: <div data-role="footer">
49: <h4></h4>
50: </div>
51: </div>
52: 53: </body>
54: </html>
Creo que poco se puede comentar este código ya que es muy simple.
Usando jQuery Mobile es muy sencillo crear webs móviles con un aspecto muy similar al que tendriamos con Android o IPhone, además tiene eventos para controlar el scroll, el touch, etc.
Un ejemplo del aspecto que se puede conseguir usando los estilos de jQuery Mobile:
Y para finalizar, arranco todo esto a ver como queda:
Y esta ha sido mi primera entrada, no seais muy duros, espero ir mejorando poco a poco. Nos leemos!
