DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
12-03-2014

Un último detalle que olvide explicar en la entrega anterior: Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3), es el uso del atributo HTML dentro de la clase HtmlDrawable, en este artículo realizaremos una aplicación para Android con las mismas características de la aplicación creada en el artículo pasado: Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3), pero esta vez, usaremos el atributo HTML en vez del atributo URI.

Diferencias entre este entrega y la entrega anterior

¿Cuál vendría siendo la diferencia entre crear un cuadro informativo con el atributo HTML en vez del atributo URI? la diferencia consiste en que todo el contenido (HTML) estará dentro del "ra.js" en vez de estar en un archivo aparte, y digo archivo aparte en vez de un archivo alojado en Internet porque URI puede referenciar tantos elementos dentro de la apk:

uri:"<NuestroProyecto>/assets/base/WIkitudeParte3DescripcionLibroComoProgramarEnJavaDeitel.html"

Como fuera de ella:

uri:"http://www.desarrollolibre.net/public/page/wikitude/WIkitudeParte3DescripcionLibroComoProgramarEnJavaDeitel.html"

Nuestro archivo "ra.js" quedará así:

<html>
var World = {
    loaded: false,

    init: function initFn() {
        this.createOverlays();
    },

    createOverlays: function createOverlaysFn() {

	// creamos un objeto de la clase HtmlDrawable
	htmlDrawable = new AR.HtmlDrawable({
	   html:"<div style='font-size:42px;color:#FFF;background: #068;border: 10px solid #059;border-radius: 5px;padding: 5px;height: auto;'><pre>Este libro presenta las tecnologías </pre><pre>de vanguardia para estudiantes, </pre><pre>profesores y desarrolladores de </pre><pre>software.</pre></div>"
	}, 1,{offsetX : -1,rotation:90,opacity : 0.8,scale : 2});

        // inicializamos el Tracker con el Target collection (nuestra caratula del libro Deitel)
        this.tracker = new AR.Tracker("assets/targetcollection.wtc", {
            onLoaded: this.worldLoaded
        });

	// indicamos el nombre del Target en el Tracker, basicamente al momento de que el Target sea rastreado por el Tracker el objeto htmlDrawable sera renderizado en la pantalla del dispositivo
        var javaLibro = new AR.Trackable2DObject(this.tracker, "javaLibro", {
            drawables: {
                cam: htmlDrawable
            }
        });
    }
};

// principal
World.init();

Como podemos ver, tanto el HTML como el CSS están contenidos dentro del div:

html:"<div style='font-size:42px;color:#FFF;background: #068;border: 10px solid #059;border-radius: 5px;padding: 5px;height: auto;'><pre>Este libro presenta las tecnologías </pre><pre>de vanguardia para estudiantes, </pre><pre>profesores y desarrolladores de </pre><pre>software.</pre></div>"

Esto resulta en algo bastante molesto y poco práctico, podríamos pensar que es posible colocar el CSS en un archivo aparte, como por ejemplo dentro de un .css:

/WikitudeParteTresDos/assets/base/css/style.css

o en el index.html:

/WikitudeParteTresDos/assets/base/index.html

Pero si haces esto, Wikitude no busca los estilos en estos sitios y por lo tanto los elementos no tomaran el estilo.

Conclusiones

Entonces, ¿cuál de los dos atributos usamos el HTML o el URI?; depende de lo que queramos hacer, si vamos a tener un contenido estático que no vamos a actualizar y es bastante pequeño tal vez consideres usar el HTML, podría resultar bastante útil si no queremos tener tantos .html; pero si hay mucho contenido y estilos que deseamos actualizarlos con frecuencia el URI podría resultarnos una mejor opción.

Podrás encontrar la aplicación completa en nuestro repositorio de github Android/WikitudeParteTresDos o haciendo clic aquí.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Librería oficial de PayPal para Android

Librería oficial de PayPal  para Android

Generador de launcher para Android sin padding

Generador de launcher para Android sin padding

Templates para Android y iOS

Templates para Android y iOS

Algunos artículos que te pueden interesar

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3)

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3)

En este artículo veremos cómo agregar capas de información cuando los Targets son reconocidos por el Tracker.

Andrés Cruz 06-03-2014

Kotlin para el futuro en el desarrollo de aplicaciones Android

Kotlin para el futuro en el desarrollo de aplicaciones Android

Se habla de Kotlin para el desarrollo de aplicaciones para Android, su integración con Android Studio y algunos recursos que podemos emplear para aprender en el desarrollo de aplicaciones Android con Kotlin.

Andrés Cruz 20-11-2017

Cómo crear una notificación personalizada en Android

Cómo crear una notificación personalizada en Android

Se explica cómo crear una notificación personalizada en Android a través de un layout, además se explica los componentes de una notificación y cómo lanzarla.

Andrés Cruz 17-08-2017