HTML5 Clock

Haciendo clic en la imagen podreis ver mi primera animación hecha en HTML5 Canvas. Comentarios, sugerencias y críticas en los comentarios, ;-)

HTML5 Canvas

Ilusión Óptica con Figura de Papel

Aquí un interesante recortable con el que dejaremos desconcertado a más de uno.

Imagen de previsualización de YouTube

Descarga el pdf para hacerlo tu mismo aqui:

http://www.megaupload.com/?d=Q56KYVWS

Convertir una Botella de Plástico en una Bombilla Solar

Es curioso como el ser humano se crece ante la adversidad y utiliza su potencial para mejorar su calidad de vida. En filipinas ha surgido una iniciativa para iluminar las miles de chavolas que carecen de luz eléctrica, y que a pesar de que en el exterior brille el sol, en su interior reina la oscuridad.

El montaje es bastante simple y el resultado inmejorable.

Imagen de previsualización de YouTube

Desarrollo de listas en Android

Continuando con los tutoriales sobre android explicaré como mostrar una lista de elementos compuestos, es decir, dónde en cada fila aparece más de un elemento.

Paso 1: Diseñar formato de fila

Para empezar habrá que diseñar en XML la composición de las filas, en el formato en el que queremos mostrarlas, y guardaremos el resultado en la carpeta “layout”, dándole un nombre que luego podamos recordar, en este caso “row.xml”. El siguiente código es el utilizado en la aplicación de feria para mostrar la información de los diferentes eventos.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<LinearLayout
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:orientation="vertical"
		android:paddingRight="4px">
		<TextView android:id="@+id/hora"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="16dp"
			android:padding="3dp"
		/>
	</LinearLayout>
	<LinearLayout
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:orientation="vertical"
		android:paddingBottom="5dp">
		<TextView android:id="@+id/nombre"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="20dp"
		/>
		<TextView android:id="@+id/desc1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textSize="14dp"
		/>
	</LinearLayout>
</LinearLayout>

La mayor parte del código forma parte del diseño pero lo realmente importante, como esta señalado, son las id de cada uno de los campos que vamos a rellenar.

Paso 2: Diseño de lista

Ahora es cuando diseñamos la pantalla en la que se mostrará la lista. En el caso de la aplicación de feria, se muestra en la pate superior un menú de navegación, y dos botones en la parte inferior, pero puesto que no son de relevancia para el presente tutorial, no los incluyo en el código de ejemplo.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical"
	xmlns:android="http://schemas.android.com/apk/res/android">

		<ListView android:id="@android:id/list"
      		android:layout_width="fill_parent"
			android:layout_weight="1"
 			android:layout_height="fill_parent"
			android:padding="5dp"
			android:cacheColorHint="#00000000">
		</ListView>

		<TextView android:id="@id/android:empty"
		android:background="@null"
		android:text="NO SE ENCUENTRAN EVENTOS"
		android:layout_height="fill_parent"
		android:layout_width="fill_parent"
		/>

</LinearLayout>

Lo verdaderamente importante de esta pantalla es el elemento ListView con id “@android:id/list”, puesto que el cuadro de texto que aparecería en el caso de que la lista no tuviera elementos no tiene porque estar y del mismo modo tampoco tiene porque ser un cuadro de texto. Si quisieramos que apareciera una imagen cuando la lista estubiera vacía tan solo habría que poner un elemento “ImageView” y asignarle la id “@id/android:empty”.
Alrededor del listado se puede incluir cualquier otro tipo de objeto, y darle a ese listado cualquier propiedad que se quiera, siempre y cuando mantengamos la id del “ListView”.

 

Paso 3: Código de ListActivity

Por último, tan solo queda rellenar la lista desde el código de nuestra actividad. Para ello nos valdremos de la clase “ListActivity” que nos proporcionará unos cuantos métodos bastante útiles para nuestro propósito. Para facilitar la tarea de “copy&paste” del código continúo el tutorial en el mismo:

public class Listado extends ListActivity {

//Mantenemos un Array de elementos en la que podremos guardar
//más información de la que mostraremos en el listado
ArrayList<HashMap<String,String>> Eventos;

//Con los siguientes Arrays establecemos la correspondencia
//entre los elementos del Array de HashMaps de eventos (from)
//con los elementos del diseño en XML de cada una de las filas (to)
String[] from=new String[] {"Time","Name","Desc"};
int[] to=new int[]{R.id.hora,R.id.nombre,R.id.desc1};

@Override
public void onCreate(Bundle savedInstanceState) {

	super.onCreate(savedInstanceState);
	//Establecemos el diseño principal de la Actividad
	setContentView(R.layout.lista);

	// Este método de obtención de elementos puede cambiarse por cualquier otro
	//como leerlos de una BBDD o de un servidor web con JSON
	ArrayList<String[]> lista = new ArrayList<String[]>();

	String[] evento1 = {"11:30","Ofrenda de Flores","Participa la Banda Sinfónica Municipal de Albacete", "1"};
	lista.add(evento1);

	String[] evento2 = {"12:00","Los Redondeles","La ronda de los Redondeles 2011", "2"};
	lista.add(evento2);

	String[] evento3 = {"12:00","Futbol","Albacete Balompie Vs. Tenerife C.D.", "3"};
	lista.add(evento3);

	// Transformamos los elementos String[] en HashMap para
	//posteriormente incluirlos en el Array Global que se utilizará
	//para rellenar la lista
	Eventos = new ArrayList<HashMap<String, String>>();
	for(String[] evento:lista){
		HashMap<String,String> datosEvento=new HashMap<String, String>();

		// Aquí es dónde utilizamos las referencias creadas inicialmente
		//en el elemento "from"
		datosEvento.put("Time", evento[0]);
		datosEvento.put("Name", evento[1]);
		datosEvento.put("Desc", evento[2]);
		datosEvento.put("id", evento[3]);

		Eventos.add(datosEvento);
	}
	// Una vez tenemos toda la información necesaria para rellenar la lista
	//creamos un elemento que nos facilitará la tarea:
	//ListAdapter(Actividad, Array de HashMap con elementos, Fichero XML del
	//diseño de cada fila, Cadenas del HashMap, Ids del Fichero XML del diseño de cada fila)
	ListAdapter ListadoAdapter=new ListAdapter(this, Eventos, R.layout.row, from, to);
	setListAdapter(ListadoAdapter);
}
}

Paso 4: Eventos del listado

Si queremos que nuestro listado tenga un mínimo de funcionalidad, podemos utilizar los “Listeners” que incluye la clase “ListActivity”, esto es, los métodos que se ejecutarán dependiendo del evento ocurrido. Con el siguiente código, que incluiremos en la actividad anterior, iniciaremos otra actividad a la que le pasaremos como información la “id” del elemento pulsado.

@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {
		super.onListItemClick(l, v, position, id);

		Intent intent = new Intent(this,DetalleEvento.class);
		intent.putExtra("id",Eventos.get(position).get("id"));
		startActivity(intent);
	}

Como puede observarse, hacemos uso del Array Global “Eventos” que utilizábamos para rellenar la lista, en el cual almacenamos también la información del “id” sin mostrarla en el listado.

 

Usar nuestra propia Base de Datos SQLite en Android

Comienzo con éste una serie de tutoriales relacionados con la aplicación de la Feria de Albacete 2011 en la que se explicará paso por paso como dotar de diversas características a nuestras aplicaciones.

En este caso explicaré como utilizar una base de datos con datos por defecto, es decir, utilizando un fichero externo de base de datos creado con un editor de bases de datos SQLite.

Paso 1: Preparando el fichero de base de datos SQLite

Una vez tengamos nuestro propio fichero de base de datos tendremos que modificarla un poco. Para editar la base de datos utilizaremos la aplicación de código abierto SQLite Database Browser disponible para Windows Mac y Linux.

Abrimos nuestro fichero de base de datos y añadimos una nueva tabla llamada ‘android_metadata’. Para ello podemos ejecutar el siguiente código SQL:

CREATE TABLE "android_metadata" ("locale" TEXT DEFAULT 'es_ES')

Seguidamente insertamos una nueva fila con el texto ‘es_ES’ en la tabla recién creada.

INSERT INTO "android_metadata" VALUES ('es_ES')

Una vez hecho esto tenemos que cambiar el nombre identificativo de las claves primarias de las tablas de nuestra base de datos a ‘_id’ para que de esta manera Android pueda identificarlas. Para ello podemos hacer clic en el botón , y tras seleccionar la tabla que queremos modificar, podremos editar el nombre del campo.

Finalmente nuestra base de datos tiene que tener un aspecto similar al siguiente:

Paso 2: Manejando la Base de Datos desde nuestra Aplicación Android

Para poder tener acceso desde nuestra aplicación al fichero de base de datos este debe encontrarse en una carpeta dentro de nuestro proyecto llamada ‘assets’. Si ya está creada, copiamos el fichero de base de datos ahi, si no, tendremos que crear la carpeta antes.

El manejo de la base de datos se hará utilizando una clase personalizada que extenderá la clase SQLiteOpenHelper, en la cual podremos incluir todos los métodos relacionados con la base de datos para insertar, actualizar y borrar datos.

Recuerda cambiar en el siguiente código las cadenas “TU_PAQUETE” y “NOMBRE_DE_FICHERO” por el nombre del paquete de tu proyecto, y el nombre del fichero de tu base de datos respectivamente.

public class DBHelper extends SQLiteOpenHelper{

//Ruta por defecto de las bases de datos en el sistema Android
private static String DB_PATH = "/data/data/TU_PAQUETE/databases/";

private static String DB_NAME = "NOMBRE_DE_FICHERO";

private SQLiteDatabase myDataBase;

private final Context myContext;

/**
* Constructor
* Toma referencia hacia el contexto de la aplicación que lo invoca para poder acceder a los 'assets' y 'resources' de la aplicación.
* Crea un objeto DBOpenHelper que nos permitirá controlar la apertura de la base de datos.
* @param context
*/
public DBHelper(Context context) {

super(context, DB_NAME, null, 1);
this.myContext = context;

}

/**
* Crea una base de datos vacía en el sistema y la reescribe con nuestro fichero de base de datos.
* */
public void createDataBase() throws IOException{

boolean dbExist = checkDataBase();

if(dbExist){
//la base de datos existe y no hacemos nada.
}else{
//Llamando a este método se crea la base de datos vacía en la ruta por defecto del sistema
//de nuestra aplicación por lo que podremos sobreescribirla con nuestra base de datos.
this.getReadableDatabase();

try {

copyDataBase();

} catch (IOException e) {
throw new Error("Error copiando Base de Datos");
}
}

}

/**
* Comprueba si la base de datos existe para evitar copiar siempre el fichero cada vez que se abra la aplicación.
* @return true si existe, false si no existe
*/
private boolean checkDataBase(){

SQLiteDatabase checkDB = null;

try{

String myPath = DB_PATH + DB_NAME;
checkDB = SQLiteDatabase.openDatabase(myPath, null, SQLiteDatabase.OPEN_READONLY);

}catch(SQLiteException e){

//si llegamos aqui es porque la base de datos no existe todavía.

}
if(checkDB != null){

checkDB.close();

}
return checkDB != null ? true : false;
}

/**
* Copia nuestra base de datos desde la carpeta assets a la recién creada
* base de datos en la carpeta de sistema, desde dónde podremos acceder a ella.
* Esto se hace con bytestream.
* */
private void copyDataBase() throws IOException{

//Abrimos el fichero de base de datos como entrada
InputStream myInput = myContext.getAssets().open(DB_NAME);

//Ruta a la base de datos vacía recién creada
String outFileName = DB_PATH + DB_NAME;

//Abrimos la base de datos vacía como salida
OutputStream myOutput = new FileOutputStream(outFileName);

//Transferimos los bytes desde el fichero de entrada al de salida
byte[] buffer = new byte[1024];
int length;
while ((length = myInput.read(buffer))>0){
myOutput.write(buffer, 0, length);
}

//Liberamos los streams
myOutput.flush();
myOutput.close();
myInput.close();

}

public void open() throws SQLException{

//Abre la base de datos
try {
createDataBase();
} catch (IOException e) {
throw new Error("Ha sido imposible crear la Base de Datos");
}

String myPath = DB_PATH + DB_NAME;
myDataBase = SQLiteDatabase.openDatabase(myPath, null, SQLiteDatabase.OPEN_READONLY);

}

@Override
public synchronized void close() {
if(myDataBase != null)
myDataBase.close();
super.close();
}

@Override
public void onCreate(SQLiteDatabase db) {

}

@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

}
/**
* A continuación se crearán los métodos de lectura, inserción, actualización
* y borrado de la base de datos.
* */

Paso 3: Métodos útiles de lectura, inserción, actualización y borrado

A continuación pongo ejemplos de los métodos más habituales de uso de base de datos que deberían introducirse en la misma clase DBHelper. Para ello utilizaré como ejemplo la tabla que puede verse en la imagen del Paso 1, que consta de tres columnas (‘_id’, ‘alarma’ y ‘evento’):

//Establecemos los nombres de las columnas
public static final String KEY_ID = "_id";
public final static String KEY_COL1 = "alarma";
public final static String KEY_COL2 = "evento";

//Array de strings para su uso en los diferentes métodos
private static final String[] cols = new String[] { KEY_ID, KEY_COL1, KEY_COL2 };

Los métodos de inserción, borrado y actualización son bastante simples. Para más información sobre ellos podéis echarle un ojo a la información de la clase SQLiteDatabase.

/**
* INSERTAR NUEVA ALARMA
* */
public long insertAlarma(Integer id, Integer alarma, Integer evento) {
ContentValues newValues = new ContentValues();
newValues.put(KEY_ID, id);
newValues.put(KEY_COL1, alarma);
newValues.put(KEY_COL2, evento);
return db.insert(DATABASE_TABLE, null, newValues);
}

/**
* BORRAR ALARMA CON _id = _rowIndex
* */
public boolean removeAlarma(long _rowIndex) {
return db.delete(DATABASE_TABLE, KEY_ID + "=" + _rowIndex, null) > 0;
}

/**
* ACTUALIZAR ALARMA _id = _rowIndex
* */
public boolean updateAlarma(Integer _rowIndex, Integer alarma, Integer evento) {
ContentValues newValues = new ContentValues();
newValues.put(KEY_COL1,alarma);
newValues.put(KEY_COL2, evento);
return db.update(DATABASE_TABLE, newValues, KEY_ID + "=" + _rowIndex, null) > 0;
}

Por otro lado, para la lectura de la base de datos, se utiliza el método ‘query’, el cual nos devuelve un cursor con las filas que se corresponden con el criterio de búsqueda. Mi recomendación para evitar el uso de cursores en nuestra aplicación es crear objetos de una clase propia personalizada para el tipo de datos que vamos a recuperar. De este modo nuestros métodos devolverán el tipo de objetos que realmente vamos a utilizar. Para este ejemplo utilizamos el tipo de objeto “Alarma” que contiene los dos campos de la base de datos que queremos utilizar como variables:

public class Alarma implements Serializable{

private static final long serialVersionUID = 1L;
private Integer Evento;
private Integer Alarma;

public Alarma(Integer idEvento, Integer idAlarma) {
super();
this.idEvento = idEvento;
this.idAlarma = idAlarma;
}

}

De este modo podemos crear dos tipos de métodos para obtener datos. Uno que nos devuelva un único resultado, y otro que nos devuelva un objeto List<Alarma> con todos los resultados. Para más información acerca del método ‘query’ y crear consultas más avanzadas os recomiendo echarle un ojo a la información de la clase SQLiteDatabase:

public Alarma getAlarma(long _rowIndex) {
Alarma alarm = new Alarma();
Cursor result = db.query(true, DATABASE_TABLE,
cols,
KEY_ID + "=" + _rowIndex, null, null, null,
null, null);
if ((result.getCount() == 0) || !result.moveToFirst()) {
//Si la alarma no existe, devuelve una alarma con valores -1 y -1
alarm = new Alarma(-1,-1);

} else {
if (result.moveToFirst()) {
alarm = new Alarma(
result.getInt(result.getColumnIndex(KEY_COL1)),
result.getInt(result.getColumnIndex(KEY_COL2))
);
}
}
return alarm;
}

public List<Alarma> getAlarmas() {
ArrayList<Alarma> alarms = new ArrayList()<Alarma>;
Cursor result = db.query(DATABASE_TABLE,
cols, null, null, null, null, KEY_ID);
if (result.moveToFirst())
do {
alarms.add(new Alarma(
result.getInt(result.getColumnIndex(KEY_COL1)),
result.getInt(result.getColumnIndex(KEY_COL2))
)
);
} while(result.moveToNext());
return alarms;
}

Paso 4: Utilizando la clase DBHelper

Una vez tenemos creada la clase DBHelper el uso de la misma es bastante trivial. Basta con crear un objeto DBHelper y llamar a los métodos open() y close() antes y después de utilizar los métodos de uso que hayamos creado. Mi recomendación es llamar al método open() en los métodos onCreate() y onResume() de la actividad que vaya a utilizar la base de datos y close() en el método onPause().

public class miActividad extends Activity {

private DBHelper BD;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

//Creamos y abrimos la base de datos
BD=new DBAdapter(this);
BD.open();

//Insertamos una nueva alarma con valores _id=1, alarma=1, evento=1
BD.insertAlarma(1, 1, 1);

//Modificamos la alarma anterior dejándola como _id=1, alarma=2, evento=3
BD.updateAlarma(1, 2, 3);

//Obtenemos la alarma creada anteriormente
Alarma alarma = BD.getAlarma(1);

//Borramos la alarma creada anteriormente con índice 1
BD.removeAlarma(1)

//Obtenemos un listado de todas las alarmas
ArrayList<Alarma> alarmas = new ArrayList()<Alarma>;
alarmas =(ArrayList<Alarma>) BD.getAlarmas();

}

@Override
public void onPause() {
super.onPause();
BD.close();
}
@Override
public void onResume() {
super.onResume();
BD.open();
}

Si tenéis cualquier consulta, dejadla en un comentario.

Feria de Albacete 2011

Comienza la Feria de Albacete y para este año, junto con los otros miembros de la Asociación Albandroid, hemos desarrollado una aplicación en la que se podrá encontrar el programa de feria oficial, así como otros eventos que no aparecen en el programa impreso. La principal característica de esta aplicación es el uso de un mapa para localizar todos los eventos, permitiéndonos el cálculo de rutas hacia la posición de éstos desde nuestra posición actual, asi como poder establecer recordatorios para que no se nos olvide ninguno de nuestros eventos favoritos.También hemos incluído las rutas de las tres líneas de autobuses habilitadas para el transporte a la feria para saber siempre cual es la parada más cercana.

La descripción oficial es la siguiente:

Disfruta de la Feria.

Aprovéchate de las posibilidades que te brinda tu Smartphone para disfrutar de la Feria de Albacete 2011, declarada de Interés Turístico Internacional y una de las principales fiestas de España por su historia y su gente.

Vívela como nunca.

Incluye toda la información del programa oficial y aún más. Podrás ver cuando y donde sucederán todos los eventos que se desarrollen durante los 11 intensos días que dura nuestra Feria

Además, sabrás donde se encuentran algunos sitios de interés como cajeros o baños públicos, y dispondrás de las rutas y los horarios de los autobuses públicos que pone a disposición el Ayuntamiento para facilitar el acceso al Recinto Ferial.

Todo bajo un interfaz intuitivo y agradable, para que el uso de la aplicación sea completamente natural.

No pierdas detalle.

Como sabemos que el tiempo en fiestas pasa volando y no queremos que faltes a nada, la aplicación tiene su propio sistema de alarma donde podrás añadir aquellos eventos que no te quieras perder, recordándote con suficiente antelación para que puedas asistir sin problemas.

Diviértete con tu gente.

¿Hay algún acto que te llame la atención? ¡Publícalo en tu Facebook! Con esta aplicación también podrás compartir con todos tus amigos de las redes sociales a donde te gustaría acudir. Así todo el mundo sabrá donde encontrarte o podrás informar de eventos que puedan resultar de interés para tus contactos.

Caracteristicas:

* Uso de Google Maps para geolocalización y creación de rutas.
* Separación de eventos por tipo, hora y lugar.
* Sistema de alarma integrado.
* Posibilidad de compartir eventos via E-Mail, redes sociales, etc.
* Interfaz agradable e intuitivo.
* Incluye el programa oficial de nuestra Feria.
* Rutas de transporte público.

Capturas:

Descarga:

Verdad Verdadera

Página 1 de 76123451020Fin »