Category Archives: HTML5

Desarrollo dedicado a html5

Respaldo parcial de tablas MySQL

En ocasiones ocupamos realizar un respaldo de alguna tabla gigante y en definitiva no es opción hacer un respaldo completo, para llevar acabo dicha tarea he pensado en una solución alternativa a mysqldump y es la siguiente:

Crear una tabla con diferente nombre pero misma estructura que la tabla a respaldar, cuando este lista solo realizamos la siguiente consulta:

 SQL | 
 
 copy code |
?

  1. INSERT INTO tbl_espejo (campo1, campo2) SELECT campo1, campo2 FROM tbl_original

y si queremos podemos hacer mas un respaldo parcial mas filtrado podemos incluir la lcausual where de la siguiente manera:

 SQL | 
 
 copy code |
?

  1. INSERT INTO tbl_espejo (campo1, campo2) SELECT campo1, campo2 FROM tbl_original where campoN= 'valor' and campoN2 = 3 order by campoN3 desc

salu2

Tutorial app con phonegap

Phonegap es la tecnología que nos permite crear apps para dispositivos móviles multi plataforma usando HTM5 CSS y JS sin pasar por objetive c

Para este ejemplo usaremos jquery mobile, que es una tecnología para crear aplicaciones web móviles simples.

Al utilizar esta tecnología como alternativa para crear apps debemos cambiar la forma de estructurar nuestra web app  ya no se tiene que pensar en sitios multi pagina en las que por cada sección de nuestro sitio existe una página por separado, si no que ahora todo estará dentro de una misma. En jquery mobile a cada sección de nuestra página que actuara como vista(activity) dentro de la app se le asigna un “ROL” por ejemplo para declarar una vista(activity)  se coloca “data-role= page” y dentro de cada página se asignan 3 roles más, que pueden no ser asignados pero que comúnmente se usan y son: un encabezado un contenido y un pie.

Dicho lo anterior nos poneos manos a la obra:

En primer lugar debemos tener instalado eclipse y el sdk de android como lo explique en mi anterior articulo.

Segundo, crearemos nuestro html que actuara como app y que debe contener la siguiente estructura:

 HTML | 
 
 copy code |
?

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5.     <!-- declaramos la escala del contenido de nuestra app  y esto ayuda a adapterse al dispositivo que corra la app-->
  6.     <meta name="viewport" content="width=device-width, initial-sacle=1">
  7.     <!-- importamos jquery y la hoja de estilos -->
  8.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  9.     <script src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>
  10.     <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" ></script>
  11.   <title>Mi app</title>
  12.     
  13. </head>
  14. <body>
  15. <div data-role="page">
  16.      <!-- En el header de la app comunmente vienen los botones de "atras"-->
  17.             <div data-role="header">
  18.          <h1 id="_title">App1</h1>
  19.         </div>
  20.         <!-- Cuerpo de la app -->
  21.         <div data-role="content">
  22.             <p id="_desc">HOLA MUNDO</p>
  23.         </div>
  24.         <!-- En la parte del footer es donde van los botones de las apps -->
  25.         <div data-role="footer">
  26.          <h4>pie de la APP</h4>
  27.         </div>
  28.     </div>
  29. </body>
  30. </html>

Lo guardamos como index.html

Abrimos eclipse y seguimos estos pasos:

Creamos un proyecto nuevo de android en File > project > Android > Android Aplication Project

a)      Le colocamos nombre.

pantalla1

b)      En la siguiente ventana dejamos los parámetros por defecto

pantalla2

c)      Asignamos un icono a nuestra app

pantalla3

d)      Seleccionamos “Blank activity”

pantalla4

e)      Le damos el nombre al activity que para este ejemplo le dejaremos la que viene por defecto

pantalla5

f)       Finish

Nota: debe de mostrarse del lado izquierdo el “Package Explorer” si no es asi vamos a :

 pantalla6

Ya creado el proyecto, creamos una carpeta “www” dentro de assets

Creamos una carpeta “libs” en la raiz del proyecto

Vamos a http://phonegap.com/install/ y descargamos el phonegap, para este ejemplo use phonegap-2.9.0

Después de descomprimir el zip phonegap que descargamos del sitio abrimos la subcarpeta lib > android y arrastramos él “.jar” y el “.js” a la carpeta libs, el js nos ayuda cuando nuestras apps trabajan con los recursos de los dispositivos como la cámara y demás, en este ejemplo no se ocupa pero por costumbre lo hacemos ya que no está de más.

También arrastramos la carpeta “xml” a la carpeta “res” de nuestro proyecto

Copiamos nuestro HTML a la carpeta www que creamos, ya solo quedan un par de cambios

pantalla8

vamos a la carpeta “src” > “nombre_de_nuestra_app” > “MainActivity.java” y modificamos para que quede de esta manera:

 Java | 
 
 copy code |
?

  1. package com.nalonsor.demoapp;
  2. //importamos cordova
  3. import org.apache.cordova.*;
  4. import android.os.Bundle;
  5. //ahora deriva de Droidgap
  6. public class MainActivity extends DroidGap {
  7.        @Override
  8.        public void onCreate(Bundle savedInstanceState) {
  9.              super.onCreate(savedInstanceState);
  10.              //llmamamos a nuestro html
  11.              super.loadUrl("file:///android_asset/www/index.html");
  12.        }
  13. }

Ahora nos dirigimos al AndroidManifest.xml lo abrimos con doble clic, vamos a la pestaña “AndroidManifest.xml” localizamos lo siguiente:

 XML | 
 
 copy code |
?

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3.     package="com.example.lectorfeednalonsor"
  4.     android:versionCode="1"
  5.     android:versionName="1.0" >

y despues de esas lineas pegamos lo siguiente:

 XML | 
 
 copy code |
?

  1. <supports-screens
  2.    android:largeScreens="true"
  3.    android:normalScreens="true"
  4.    android:smallScreens="true"
  5.    android:resizeable="true"
  6.    android:anyDensity="true" />
  7. <uses-permission android:name="android.permission.CAMERA" />
  8. <uses-permission android:name="android.permission.VIBRATE" />
  9. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  10. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  11. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  12. <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  13. <uses-permission android:name="android.permission.INTERNET" />
  14. <uses-permission android:name="android.permission.RECEIVE_SMS" />
  15. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  16. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  17. <uses-permission android:name="android.permission.READ_CONTACTS" />
  18. <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  19. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  20. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  21. <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  22. <uses-permission android:name="android.permission.BROADCAST_STICKY" />

Tu aplicación esta lista para ser probada:

pantalla7

Esta es la base para realizar app con eclipse y phonegap ya solo resta que pongas en práctica tus conocimientos es css, html5 y jquery para mejorarla y con la ayuda de la documentación de phonegap seguro logras apps muy potentes.