Archivo de la categoría ‘programación’

« Entradas más antiguas

HelloAndroid (Android II)

Domingo, 15 de Noviembre de 2009

En la pasada entrega de Android vimos como instalar la versión 1.5 (Donut) de Android sobre la versión 3.5 de Eclipse (Galileo). En la actualidad ya se puede instar la versión 2.0 (Eclair) de Android, para ello ir a la página de desarrollo de Android [1]. Otra opción de pasar a las últimas versiones es instalar el Motorola MOTODEV[2], que no es más que el Eclipse 3.5 ya configurado y con un instalador, además cuando hay actualizaciones te mandan correos, para este artículo lo voy a utilizar, ya que es ideal para los nuevos usuarios. Para configurarlo utilizar la documentación de Motorola, pero en mi caso no he tenido que hacer nada, ya que tenía el Eclipse 3.5 ya configurado y me ha cogido todos los dispositivos virtuales que ya tenía.

Lo primero que hacemos, una vez que MOTODEV nos ha pedido que nos actualicemos, por si hubiera algo nuevo. Ya cuando reiniciemos el MOTODEV nos pondremos manos a la obra. Para ello lo que tenemos que hacer es crear un nuevo proyecto de Android, para ello seleccionaremos la opción del menú principal File -> New -> Project y se nos abrirá la siguiente ventana.

Pincharemos sobre Android Project, una vez que hemos pulsado sobre Android en el árbol de Asistentes (Wizards).

Seleccionar el tipo de proyecto Android

Seleccionar el tipo de proyecto Android

Tras esto nos aparecerá la siguiente ventana de configuración del proyecto Android.

Configuración del proyecto Android

Configuración del proyecto Android

En la imagen se puede ver que se han marcado con números los campos más importantes de configuración del proyecto.

  1. Nombre del proyecto.
  2. Plataforma Android para la que vamos a desarrollar nuestro programa, en el ejemplo he marcado Android 1.5 (CupCake).
  3. Nombre de la aplicación, la que nos aparecerá en el menú de aplicaciones del móvil Android.
  4. Nombre del paquete. En realidad se podría poner el nombre del proyecto, pero desde google nos hacen la recomendación de poner primero un identificador del programador o empresa desarrolladora de la aplicación, en el ejemplo plf, de Petra Link Factory, punto y el nombre del proyecto.
  5. Nombre de la clase de tipo Activity de nuestra aplicación. No es obligatoria, pero sí recomendable.
  6. Botón de Finalizar para terminar de configurar el proyecto Android.

Tras esto podremos ver que se autogeneran la siguiente estructura del proyecto, que podemos ver en la image.

Estructura del programa HelloAndroid

Estructura del programa HelloAndroid

Podemos ver que el proyecto cuelgan varios items, que a su vez tienen otros items.

  • En la carpeta src nos encontramos las clases que vayamos a programar para nuestro programa, por esto encontramos el nombre del paquete, y debajo fichero holoAndroid.java, que contiene la clase Activity de nuestra aplicación.
  • En la carpeta gen nos encontramos los fichero que se autogeneran al manipular otro ficheros.
  • Android 1.5. En esta carpeta nos encontramos todos los archivos necesarios de Android 1.5 (el que configuramos en nuestra aplicación).
  • assets: la verdad es que no tengo idea de lo que va en esta carpeta, que se puede ver que está vacía, yo soy un novato en esto del Android, con lo que os pido perdón.
  • res: en esta carpeta estarán los ficheros que nos servirán para la parte gráfica de nuestra aplicación.
    • drawable: aquí guardaremos los archivos de imágenes. El archivo icon.png será el archivo de nuestra aplicación, que podremos cambiar, debe ser un PNG de 48×48 pixeles. Para que funcione bien, el PNG no debe tener capas y puede ser transparente.
    • layout: en esta carpeta estarán los ficheros xml que definirán las ventanas de nuestra aplicación. Para su desarrollo tenemos un editor, con lo que no será necesario que abramos el fichero xml y editarlo a mano.
    • values: en esta carpeta podremos poner ficheros de xml de constantes, al igual que en el caso anterior tenemos un editor de este tipo de ficheros.
  • AndroidManifiest.xml: Este es el fichero donde se indican datos del programa, como la versión, nombre de la empresa desarrolladora, o desarrollador del programa, …
  • default.properties: este fichero no hay que tocarlo, puesto que de su modificación se encarga el plugin ADT de Eclipse

Por defecto ya tenemos el HolaAndorid en el proyecto. Si abrimos el fichero strings.xml dentro de la carpeta values veremos la cadena con el nombre “hello” y el valor “Hello World, helloAndroid!“.

Cómo se está mostrando este texto en la pantalla. Pues para ello vamos al fichero main.xml que está dentro de la carpeta layout. Ahí vemos el editor de la ventana.

Editor de la ventana de Android

Editor de la ventana de Android

Podemos ver que en el ejemplo de helloAndroid hay una TextView. En la barra de la izquierda podemos encontrar dos tipos de Items, Layout que son los tipos de panel para la disposición de los demás componentes de la ventana, y Views que son los componentes con los que podemos ver en la pantalla, botones, campos de texto, …

Para el primer ejemplo ya hemos visto muchas cosas, ya a medida que vayamos viendo otros ejemplos iremos viendo más cosas, así como el uso de los demás ficheros. Ya solo nos queda ver cómo queda nuestra aplicación en el emulador. Para ello pulsamos el botón Run (un círculo verde con un triángulo blanco dentro) que hay en la barra de herramientas. A continuación nos aparecerá el emulador de Android, con el texto A N D R O I D. Tened paciencia puesto que tarda un poco en cambiar al logotipo de Android, y luego un poco más hasta que nos aparece el sistema cargado, lo que tengáis un teléfono Android os daréis cuenta que tarda más o menos lo que tarda vuestro móvil en arrancar.

HelloAndroid en el Emulador de Android

HelloAndroid en el Emulador de Android

En la última imagen del emulador la he puesto para mostrar cómo quedaría un icon.png diferente al que viene por defecto, por esto que los dos iconos estén remarcados con un círculo rojo.

Si no tienes paciencia y quieres ver otros sitos webs con programación en castellano de Android te recomiendo que vayas a los blogs y foros específicos de este tema como and.roid.es y android-spa, donde hay gente muy maja detrás de estos dos sitios webs y que saben mucho sobre el tema, además que se dedican a desarrollar aplicaciones en Android.

Enlaces:

[1] Página oficial de instrucciones del instalador del plugin ADT para eclipse: http://developer.android.com/sdk/eclipse-adt.html

[2] MOTODEV:  http://developer.motorola.com/docstools/motodevstudio/

Etiquetas:, , ,
Publicado en android, java, programación | No hay comentarios »

Android (I)

Sábado, 4 de Julio de 2009

Durante unas cuantas entradas, y siempre y cuando me lo permita el tiempo, voy a realizar unos cuantos artículos relacionados la programación sobre este sistema operativo para móviles.

El por qué dedicar tiempo a este sistema operativo en vez de iPhone o Windows Mobile es que considero que este va a ser el Sistema que revolucione la programación de los móviles, de hecho creo que va a ser como el Windows 3.1 para lo que hoy en día es la informática, que existían cosas mejores, como los primeros entornos UNIX (el iPhone u otros sistemas Linux) pero que no son tan abiertos y documentados como lo es Android.

A día de hoy solo existen 3 móviles en el mercado, y los 3 son de HCT (Dream[G1], Magic [G2] y Hero), en breve otros fabricantes como Sansung, Motorola, Sony Ericsson, … empezarán a sacar sus móviles con dicho sistema operativo.

Además otras industrias, que no tienen nada que ver con los móviles, están planteando utilizar el sistma operativo Android para otros dispositivos electónicos con valor añadido, como por ejemplo marcos digitales, que con una tarjeta wifi se pueda conectar a Flickr y mostrar las fotos desde ahí, o implementar juegos.

En la industria del automóvil también se estaba hablando utilizar el sistema Android para montar la información de la consola del vehículo, como un ordenador multimedia y el sistema de navegación, control del aire acondicionado, …

Bueno, manos a la obra.

Lo primero es descargarnos los programas. Hay que decir que se puede programar en los 3 sistemas operativos principales de hoy en día, Linux, Windows y OSX. Yo voy a hacer las pruebas en Windows o en Linux, puesto que mi Mac es un mini con un procesador Motorola G4 y el SDK de Android solo funciona en los equipos con Intel.

El primer programa que tenemos que descargarnos es el entorno de programación. Para programar en Android, en principio, el lenguaje por defecto es Java, aunque hoy en día ya hay otros lenguajes, como JavaScript, C. C++ o C# bajo mono. En estos artículos solo vamos a ver Java, puesto que es de lo que he encontrado más documentación, pero puesto que Android es un Linux modificado, se pueden programar en todos los lenguajes que en Linux se programan, con lo que con el tiempo irán apareciendo nuevos ports y liberías para dichos lenguajes. En la actualidad, Google nos recomienda utilizar eclipse[1] como entorno de desarrollo, aunque también se puede hacer en cualquier entorno de desarrollo Java. En estos artículos utilizaremos eclipse, que es muy fácil de utilizar. Para desarrollar software para Android deberemos descargarnos el Eclipse IDE for Java Developers. A día de hoy estamos en la versión 3.4.

Una vez que nos hemos descargado el IDE, que vienen en un fichero ZIP, lo descomprimimos y lo guardamos en la carpeta de programas (en Windows XP C:\Archivos de Programa\eclipse\

Ahora nos descargamos el SDK de Android [2]. Una vez que se haya descargado, descomprimeló y mueveló hacia el raíz de C u otra carpeta fuera del escritorio, que sino lo borrarás algún día por error y dejará de funcionar, yo te recomiendo en C:\Archivos de Programa\Android_SDK_1_5\

Bueno, ahora nos toca configurar el para poder programar con eclipse. Para ello ejecuta el eclipse y pulsa sobre el item del menú Help y luego pulsa sobre Install New Software… Se nos abrirá una ventana, en ésta ventana hay el botón Add, pulsaló y escribe un nombre, por ejemplo Android Plugin y luego pon la dirección https://dl-ssl.google.com/android/eclipse/

Tras un momento, lo que tarda en acceder a dicha dirección y obtener la información relativa, nos aparecerá el item Developer Tool. Lo marcamos y pulsamos sobre el botón Next. Seguimos con el asistente y por último aceptamos las condiciones de uso del plugin, tras lo que pulsamos Finish. Una vez que ha terminado de instalarse, nos peide que reiniciemos Eclipse.

Al volver del reinicio de Eclipse, lo que hacemos es ir a item del menú Window y seleccionamos Preferences. Marcamos el item del árbol Android y seleccionamos la carpeta donde hemos instalado el SDK de Android, en nuestro caso C:\Archivos de Programa\Android_SDK_1_5\. Tras esto Eclipse buscará el contenido del SDK y cuando acabe ya tendremos configurado todo lo que nos hace falata para desarrollar software en Android con Eclipse.

En la siguiente entrega veremos cómo crear el HolaMundo de manera que iremos viendo paso a paso cómo está compuesta una herramienta de Android.

Enlaces

[1] Dirección de descarga de eclipse: http://www.eclipse.org/downloads/

[2] Dirección de descarga del SDK 1.5 de Android: http://developer.android.com/sdk/1.5_r2/index.html

Otras Direcciones interesantes para estar al día o aprender a programar Android

  • http://and.roid.es : blog donde podemos estar al día con todas las noticias que rodean al mundo Android. En esta web encontramos un foro y un curso, en el que podemos encontrar solo la teoría, me imagino que está muy liado y no le ha dado tiempo de hacer ningún ejemplo de programación.
  • http://www.android-spa.com : al igual que la web anterior podemos encontrar un blog con las noticias que rodean al mundo de Android. En la zona del foro, hay secciones para principiantes, donde podemos encontrar manuales y muchos ejemplos.
  • http://developer.android.com : Página principal del proyecto Android, en inglés.

Etiquetas:, ,
Publicado en android, programación | No hay comentarios »

Instaladores

Viernes, 27 de Febrero de 2009

Una parte muy importante de nuestros programas de escritorio, y a los que muy poca gente le hecha cuenta es el instalador que vamos a utilizar. La importancia del instalador en nuestros programas en muy grande, puesto que no sirve de nada tener el mejor programa del mundo si luego la instalación es muy complicada. Podéis ver la importancia de ésto en Linux, las distribuciones con más aceptación por la gente que no entiende de programación son Ubunto (y derivados) y SuSe (y derivados) puesto que son las que han realizado mayor esfuerzo en hacer programas que faciliten la instalación de las fuentes sin la necesidad de paquetes dependencias, …, cosa que ha hecho que las demás distribuciones de Linux trabajen en este camíno, facilitar la distribución de los programas.

En este artículo vamos a ver instaladores para Windows, puesto que por ahora no he programdo para otra plataforma, todavía nadie me ha pedido software para Linux y para Mac, que también tienen sus instaladores.

NSIS (Nullsoft Scriptable Install System) [1]

Este instalador, tal y como dice su nombre, fue creado por la empresa Nullsoft (la misma que creó el WinAmp). Para realizar el instalador hay que hacer un pequeño script. La sintaxis no es muy complicada. Este es el que yo siempre utilizo, pero en vez de saberme la sintaxis del script utilizo un editor para dicho script que tiene un wizard muy sencillo de utilizar. El programa es HM NIS EDIT [2].

Además de editor, cuando se quiere hacer algo más de lo que te permite hacer el Wizard (como comprobar si tienes instalada la versión de Framework.NET que tu aplicación necesita) puedes buscar código para realizar esto en el Wiki que encuentras en la web de NSIS.

Una de las ventajas más importantes de este instalador es que se puede ejecutar en modo comandos, con lo que es muy útil para hacer instaladores On-The-Fly desde una web, tal y como se hace en  la web de Beon para la Beon Factory (al menos cuando trabaja yo allí lo hacíamos así, que se lo curró JuanMa).

Las imágnes del instalador también se pueden cambiar, para personalizar el instalador, el problema es que el instalador aumenta su tamaño consideramente.

Otra opción que nos permite dicho insalador, es que nos permite tener varios idiomas del instalador.

Microsoft Windows Installer [3]

Este es el instalador de microsoft. Aquellos que programéis sobre VisualStudio, cuando se crea un paquete de instalación desde el VisualStudio estáis utilizando este fabuloso instalador.

Yo no he realizado muchos instaladores con este instalador, solo para hacer pruebas y aprender cómo se utiliza el empaquetador del VisualStudio.

InstallShield [4]

Qué decir de éste magnífico instalador. Posiblemente uno de los más utilizados por los grandes fabricantes de software, debido a la gran cantidad de opciones que posee.  Yo lo usé en los tiempos que trabajaba en Neoinnova S.L., puesto que los primeros Widget de Beon S.L. Una de las mejores cosas que tiene este instalador es la posibilidad de hacer instaladores parametrizando por scripts, lo que nos permitía poder tener programas muy similares y hacer los instaladores en cuestión de segundos. La mayor pega que tiene este instalador es que es de pago y ocupa mucho espacio en disco, pero es completamente visual.

GkWare [5]

Este instalador lo he conocido haciendo preparando este post. No lo he podido probar a fondo, pero por lo que he visto, te permite hacer entradas en el registro y ejecutar programas después de la instalación o antesd de la desinstalación, muy útilies cuando tu aplicación tienen algún tipo de servicio. La verdad es que no tiene mala pinta, lo único malo que le veo es que es un instalador de esos que se ejecutan en una ventana a tamaño maximizado con el fondo azul, muy retro, como los instaladores de Windows 3.1 ó Windows 95/98.

Conclusión:

Desde mi punto de vista el mejor, es el NSIS, con la ayuda del HM NIS EDIT, y quizás es algo un poco rudo para gente que nunca haya realizado instaladores antes. Para aprender está muy bien bajarse la trial del InstallShield, puesto que con él se va a prendiendo las cosas que van haciendo falta para un programa, como son la licencia, los iconos, … La lastima es su precio (€654.88 la versión express), lo que te obliga a vender mucho para sacar rendimientos. Desde mi punto de vista, lo más importante del NSIS es la gran cantidad de scrips que podéis encontrar en el Wiki, la verdad es que se puden hacer muchas cosas con este instalador, lo único es que casi que hay que aprender otro lenguaje más de programación.

Hay muchos más instaladores en el mercado, pero yo solo he hablado de los que conozco un poquito, con esto si no te gustan ninguno ponte a investigar del tema.

Enlaces:

[1] http://nsis.sourceforge.net

[2] http://hmne.sourceforge.net/

[3] http://www.microsoft.com/downloads/details.aspx?displaylang=es&FamilyID=889482fc-5f56-4a38-b838-de776fd4138c

[4] http://www.acresso.com/products/is/installshield-overview.htm

[5] http://www.gkware.com/gksetup/index.htm

Etiquetas:,
Publicado en Escritorio, Instalación, Windows, programación | No hay comentarios »

Crear un tema para Moodle (I)

Domingo, 1 de Febrero de 2009

Una vez que ya se ha instalado el LCMS Moodle lo que debemos hacer es crear un tema para personalizar el Moodle a nuestro sitio web.

Hay que decri que en la Web de Moodle hay un directorio con muchos temas que pueden ser modificados libremente [1]. En esta serie de artículos vamos a ver como hacer un tema utilizando como base otro ya existente. Para ello lo que debemos hacer duplicar el tema `standard` y ponerle el nombre que deseemos, en mi caso será `plf`. Utilizamos el tema standard puesto que nos aseguraremos que va a funcionar correctamente, puesto que tendrá todos los ficheros necesarios del tema.

Dentro de la carpeta nos encontramos una serie de archivos:

  • config.php: Fichero de configuración del tema.
  • docstyles.php: Fichero encargado de cargar los CSS, este fichero también puede contener sintaxis CSS.
  • favicon.ico: Icono que queremos que se vea en nuestro navegador. El que viene por defecto es el logotipo de Moodle. Si quieres crear un favicon a partir de una imagen te recomiendo que lo hagas desde Dynamic Drive [2].
  • footer.html: Fichero que contiene la platilla html del pie del sitio web.
  • gradient.jpg: Este fichero contiene el degradado del tema standar. En mi caso no lo voy a utilizar y lo borraré.
  • header.html: Fichero que contiene la plantilla html de la cabecera del sitio web.
  • meta.php:  Fichero en el que se pueden insertar tags metas para al cabecera.
  • README.html: Fichero de información del tema.
  • rtl.css: Fichero para estilo cuando la dirección del texto es de derecha a izquierda.
  • screenshot.jpg: Fichero con un pantallazo del tema (Este fichero se cambiará al final de terminar el tema).
  • styles.php: Fichero de configuración de los estilos.
  • styles_color.css: Fichero para poner los colores de los estilos.
  • styles_fonts.css: Ficheros para poner las fuentes de los estilos.
  • styles_ie6.css: Ficheros para las cosas específicas de Internet Explorer 6.0.
  • styles_ie7.css: Ficheros para las cosas específicas de Internet Explorer 7.0.
  • styles_layout.css: Fichero de definición de los estilos.
  • styles_moz.css: Fichero para las cosas específicas de Mozilla Fire Fox.

Manos a la obra

Lo perimero que tenemos que hacer es cambiar el fichero README.html, para poner el nombre de nuestro tema y la información que nos apetezca.

Lo segundo que haremos será modificar el favicon.ico (si es que querremos).

Bueno, ahora entramos en el Moodle y cambiamos el tema, para ello una vez que entramos como administrador de Moodle y nos dirigimos a Apariencia -> Temas -> Selector de Temas y seleccionamos nuestro tema. Como solo hemos cambiado el fichero README.html (para ver su contenido en el selector de temas podremos ver el enlace información) y favicon.ico, con lo que la apariencia será la misma que la del tema standard. Lo seleccionamos y empezaremos a cambiar las cosas.

En el siguiente artículo veremos cómo ir modificando los demás ficheros.

Enlaces.

[1] Temas de Moodle: http://moodle.org/mod/data/view.php?id=6552

[2] Dynamic Drive favicon generator: http://tools.dynamicdrive.com/favicon/

Etiquetas:, , , , ,
Publicado en Diseño, LCMS, php, programación | No hay comentarios »

html2pdf

Domingo, 28 de Septiembre de 2008

De las librerías que se vieron en el anterior post, esta librería es la que me parece más fácil de utilizar.

Lo primero que tenmos que hacer es descargarnos el fichero dese la web de la librería [1]. El sitio está en Francés, por lo que voy a poner el enlace directo de la descarga de la versión actual a día de hoy es la 3.13 [2].

Una vez que ya está descargado descomprimimos el contenido en un directorio.

Nos encontramos con 4 directorios y 6 archivos, de aquí solo nos quedaremos con 3 directorios (_fpdf, _mypdf y languages) y con 3 ficheros (html2pdf.class.php, parsingHTML.class.php y styleHTML.class.php). Yo te recomiendo que guardes todo esto en un directorio dentro del directorio donde guardes los includes en tus proyectos, en mi caso es includes.

En este artículo voy a enseñar 3 ejemplos que son bastante censillos.

Ejemplo 1:

Este ejemplo es muy sencillo, no es más que poner un texto y generar un PDF con dicho texto.

Lo primero que vamos a ver en este ejemplo son los tags especiales. Hay 3:

  • page: con este tag delimitamos el contenido de una página. En este indicamos el tipo de documento y los margenes left y top, el bottom y right no se pueden poner. 
    <page backtop="10mm" backbottom="10mm" backleft="10mm"> ... </page>

    El contenido que hay dentro de este tag es lo que se muestra en la página del PDF.
    Cuando insertes el código HTML recuerda que las propiedades las debes poner en el parametro style, como por ejemplo en una tabla, deberías poner <table style=”width: 100%px; color: black;”>

  • page_footer: Pie de página. Esta etiquieta debe estar dentro de la etiqueta page y su contenido puede ser un html.
  • page_header: cabecera. Esta etiquieta debe estar dentro de la etiqueta page y su contenido puede ser un html.

Aquí puedes ver el fichero pdf generado en este primer ejemplo.

Ejemplo 2:

En este caso el contenido de lo que vamos a mostrar lo vamos a recoger de una plantilla y sustituimos datos de dicha plantilla desde el código.

Aquí puedes ver el fichero pdf generado en este primer ejemplo.

Ejemplo 3:

En este último ejemplo lo que vamos a ver los distintos códigos de barras que puede sacar la librería html2pdf.

Aquí puedes ver el fichero pdf generado en este primer ejemplo.

Documentos del artículo.

Desde aquí te puedes descargar todos los ficheros del artículo.

Enlaces:

[1] http://html2pdf.spipu.net/

[2] http://prgm.spipu.net/?id=29&download

Etiquetas:, , ,
Publicado en programación | 1 comentario »

« Entradas más antiguas