submodulo 1

lunes, 10 de junio de 2013

martes, 16 de abril de 2013

TRANSCRITO DE APUNTES

DOCUMENTOS

Marcas

Las marcas delimitan el tamaño y los elementos de un documento como cabeceras, párrafos, etc. Y son utilizados para dar un tratamiento diferente al texto que se encuentre entre las marcas.

->HTML: las marcas de debilitan con signos para cubrir menor que y cubrir mayor que, (abrir < inferior a y cerrar > superior a).

Atributos de las marcas

Algunas marcas pueden admitir atributos pudiendo tener cada uno de estos atributos un valor como por ejemplo ancho, alto, color, formato, estilo. Este valor ira entre comillas su dicho valor es alfanumérico.

Estructura de los números

Cabecera: se emplea para facilitar información acerca del documento y esté delimitada por: <HEAD>…texto… </HEAD>. Dentro de la cabecera podemos destacar el título que indica el nombre del documento.

Ejemplo:

<HTML>
<HEAD>
<TITLE> Bienvenido </TITLE>

</HEAD>

</HTML>

Cuerpo

El resto del documento recibirá entre las marcas <BODY> y </BODY>

Ejemplo:

<HTML>

<HEAD>

<TITLE>...Bienvenida…</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Encabezado

Los encabezados se emplean para dividir los documentos en secciones para marcar los títulos de esas secciones. Las marcas son entre 1 y 6 donde el uno tiene mayor tamaño.

Ejemplo:

<H1> Tamaño mayor </H1>

<H6> TAMAÑO MENOR </H6>

Definición de bloques

Para definir y separar bloques de texto se emplea una serie de marcas que definen párrafos, texto pre formateado o bloques con significado especial como direcciones o citas:

<P> y </P>: se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo.La marca inicial y final son … <P> y </P>

<PRE>: el texto insertado entre las marcas <PRE> y </PRE> será visualizado respetando el formato con el que fue escrito en el fichero fuente HTML.

<ADDPESS>: Empleada para aplicar que un texto representa una dirección o una firma. Generalmente se activa en cursiva y suele estar tabulado.

<BLOCK QUOTE>: Se suele representar con tabulaciones a la izq. y der. y en cursiva. En sistemas que no permiten representar en cursiva se puede emplear algún tipo de símbolo al principio de las líneas.

<BR>: Este elemento solo tiene marca inicial e indica un salto de línea.

<HR>: Solo tiene marca inicial y se emplea para representar una línea horizontal.

COMENTARIOS

Todo texto que empiece por </… comentario…> será ignorado por el buscador por lo tanto no será visible esto sirve al autor del documento para comentar en su archivo fuente.

FONDOS Y COLORES DE TEXTO

Un cierto numero de atributos de la marca <BODDY>, permite controlar el color de fondo de la ventana, el color de los caracteres del texto y finalmente el color de los enlaces: atributo <BGCOLOR>; este atributo permite escoger un color para el formato de la pagina.

<BODY BGCOLOR=”#rrggbb”> donde:”rr””gg” y ”bb”” son valores hexadecimales entre 00 y FF.

ATRIBUTO BACKGROUND

Este atributo especifica una imagen recidente en el servidor la cual se utilizara como fondo de pagina <BODY BACKGROUND=”archiv.gif”>

TEXT

Permite controlar el color del texto estándar es decir todo texto que no especifique un enlace <BODY TEXTO=”#rrggbb”>

LINK

Color de enlace que aun no ha sido visitado <BODY LINK=”#rrbbgg”>

ALINK

Color muy fugaz que aparece cuando se hace clic sobre el enlace <BODY ALINK=”#rrggbb”>.

VLINK

Es el color de un enlace que ya ha sido visitado <BODY VLINK=”#rrggbb”>

LETRA

Es la marca que asigna el tamaño de los caracteres, donde “n” varía del 1 a 6. Los más grandes tiene valor uno y los más pequeños valor 6. El texto entre estas marcas se trata en negrita <Hn>

TAMAÑO DE LETRA Y COLOR

La marca FONT permita actuar sobre bloques distintos de caracteres situados en la misma línea. El atributo SIZE: regula la altura de los caracteres entre el rango de (1 - 7).

El atributo COLOR: especifica el color de los caracteres. Ejemplo. <FONT SIZE=3COLOR=#008000>…TEXTO…</FONT>

ESTILO FISICO O ESTILO DE CARACTERES

<B>Negrita <b>hola!</b> hola!

<I>Cursiva <i>hola!</i> hola!

<V>Subrayado <v>hola!</v> hola!

Estilos lógicos, estilo de párrafo

<CITE> Cita

<CODE> Codigo fuente

<DFN> Definido

<EM> Enfatiza

<KDB> Palabra clave

<SAMP> Ejemplo

<STRONG> Resalta

<VAR> Variable

Combinacion de tamaño y estilo

La ventana trabaja bajo el efecto de solo un parcerrado de marcas ejemplo:

<i>

<b> Hola, </b> como

<Font size=6> estas? </font>

</font>

</i>

HIPERENLACE

El lector explira un docuento en el WEB haciendo clic sobre las zonas activas para asi hacer aparecer nuevos documentos. El <HTMLL> definimos una zona activa (que puede ser un texto o una imagen) que se asocia al URL (protocolo de direccionamiento) del documento que sustituirá al documento visuallizado cuando se haga clic sobre esta zona. Un ancla por loo tanto sirve para especificar la partida y la llegada de un enlace hipertexto <A>.

El atributo HREF, ancla de partida hacia un enlace externo crea un enlace hacia un servidor situado en algún punto de internet hacia un documento propuesto por dicho servidor. La marca especifica el atributo HREF cuyo valor precisa URL del documento a recuperar: <AHREF=”URL_D_DESTINO”> zona_activable </A>

1.El atributo HREI, ancla de partida a un enlace interno; crea a un enlace a un punto determinado del fichero en ejecucion. Para ello hay que colocar un ancla activa (ancla de partida) y un ancla de inactiva (ancla de llegada). El ancla de partida se define de la siguiente forma:

3 una activable con atributos visibles <AHAREF=#etiqueta> zona_activable_con_atributo_visuales </A>.

2. El atributo NAME, ancla de llegada define el ancla de llegada, lugar que se podrá acceder haciendo clic sobre un ancla de partida.

3 una no activable sin atributos visuales:

<ANAME=”Label”> zona_no_activable_sin_atributos_visuales </A>

…………………………………………………………………………………………………………………………………….

TABLA

Una tabla se define entre las marcas entre <TABLE> y </TABLE>. Esta primer amarca regula a presentación general de la tabla mediante tres atributos:

*BORDER: define el grosor del marco exterior.

*CELPADDING: define el espacio alrededor del texto de una celda.

*CELLPACING: define el espacio entre celdas.

*WIDTH: define la anchura de la tabla relativa a la ventana.

MARCAS

Las marcas que definen una nueva fila son:

<TR> y </TR> que admiten los siguientes atributos de alineación del texto en el interior de todas las celdas de la fila:

*VALIGN (alineación vertical): que puede tomar los valores.

-TOP: coloca el texto en la parte superior de la celda.

-BOTTOM: colca el texto en la parte inferior de la celda.

-MIDDLE: coloca ell texto en el centro de la celda.

*ALIGN (alineación horizontal): que puede tomar los valores.

-RIGHT: coloca el texto a la derecha de la celda.

-LEFT: coloca el texto a la izquierda de la celda.

-CENTER: centra el texto en la celda.

La marca <TD> es el elementyo del inicio de una columna. Puede completarse con los atributos <VALIGN> y <ALIGN> que será entonces prioritarios sobre los mismos valores definidos en la marca <TR>.

La marca <TH> esta marca funciona de forma similar a <TD> admitieno los mismos atributos pero se considera como una marca de titulo de celda. Atomaticamente centra el texto y lo pone en negrita.

La marca <IMG> permite incluir una imagen. Esta marca ira siempre complementada con el atributo <SCR> que permite dar la dirección del fichero grafico (imagen, foto, animacion) que contiene la imagen.

El valor del atributo <SCR> permite especificar un URL y es por tanto correcto encontra imágenes definidas como sigue.

ALINEACION DE IMAGENES

La marca <IMG> admite el atributo ALIGN que permite situar la imagen en relacion a la linea de texto actual y permite tomar los siguientes valores.

*TOP: para alinear la parte superior de la imagen.

*MIDDLE: para alinear el centro de la imagen.

*BOTTM: para alinear la base de la imagen.

Ejemplo:

IMAGENES EXTERNAS

Este tipo de imagines no aparecen en la pantalla cuando se carga la pagina, si no se crea un enlace hipertexto cuyo extremo podrá ser una imagen.

Ejemplo:

<A HREF=”imagen/new.gif”> hacer clic aqui </A>

IMAGENES COMO ANCLAS

Se pueden reemplazar el texto de una ancla por marca que define una imagen. En este caso la imagen tiene un borde de color para indicar que se trata de un enlace hipertexto, sobre el que se puede hacer un clic.

Ejemplo:

FORMULARIOS

Un formulario es una pantalla para representar un conjunto de datos y generar en la pantalla cuadros de dialogo con el lector. Como un formulario en papel, se podrán tener zonas en las que se introducirá, casillas de verificación, listas de seleccion, etc.

El ususario rellenara zonas en su formulario que se identifican con un nombre simbolico. Cuando el formulario se envía al programa que lo va a tratar, este recibe identificador de cada zona y es el valor introducido.

Es importante señalar que la utilidad de los formularios esta limitada al uso de las paginas junto con sus servidores, ya que las acciones asociadas son programas (generalmente scripts de CGI) estos programas deben funcionar en un servidor al que se le proporcioan los datos de un formulario para ser procesados.

DECLARACION DEL FORMULARIO

La marca <FORM> y </FORM> define un formulario y entre ellos se situara todas las marcas que genera los diversos elementos que componen un formulario. Esta maraca debe de ir acompñada obligatoriamente por dos …..

1.El atributo METHOD esta dirigido al programador codifica el script. Al que pueden darse el valor POST o GET que define en le modo de transferencia de los datos hacia el script.

2. El atributo ACTION que define el URL de un programa (script) encargado de tratar los datos adquiridos desde el formulario.

MARCAS

Todas las marcas que se definirán tienen los siguientes atributos comunes :

1.El atributo “NAME” define el nombre que permitirá al script identificar el origen de los datos. Este nombre de ser único NAME=nombre_d_la_variable_asociado.

2.El atributo “VALUE” definido pára un campo de 2 puntos de un texto; permite definir el contenido del campo.

3.El botón “SUBMINT” indica el texto a escribir en el botón.

4.El botón “RADIO” y “CHECXBOX”: valor asociado al botón cuando esta pulsado. “NAME” identifica el bloque de botones.

CAMPOS DE ENTRADA

La marca INPUT servirá para definir campos para encontrar un texto y botones que permiten escoger opciones.

El atributo “TYPE” asociado a la marca <INPUT> permite la selección del elemnto de entrada. Puede tomar los siguientes valores:

*SUBMINT:de ser cadena el envío del formulario hacia el script; el texto definido en “VALUE” se escribirá en el botón:

Ejemplo:

salida

<form>

</form>

*RESET: permite borrar los datos ya entrados.

Ejemplo:

Borrar

<form>

*PASSWORD: permite entrar un palabra de forma clave confidencial.

Ejemplo:

Contraseña

<form>

</form>

*CHECXBOX: cea un bloque de botones que permiten una seleccion multiple de opciones.

Ejemplo:

<form>

<input type=”checxbox” name=”micro” value=”mac”> Macintosh

< <input type=”checxbox” name=”micro” value=”pc”> PC

</form>

*RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones.

Ejemplo:

<from>

<input type=”radio” name=”media” value=”cd” checked> CD-ROM

<input type=”radio” name=”media” value=”disquete” checked> DISQUETE

*HIDDEN: sirve para pasar datos adquiridos de un formularios a otro sin que aparezca nada en pantalla.

Ejemplo:

CAMPOS DE SELECCIÓN

La marca <SLECT> permite genera listas de selección simple o de selección variable. Seprograma con una lista en la que los ítems se especifica mediante la marca <OPTION>. La presentación de la lista depende del atributo <SIZE>; si su valor es inferior a dos o esta ausente la lista se interpreta como u menu despegable (pop-list), en caso contrario la lista se visulizara en una ventana con barra de desplazamiento. El valor dado entonces al atributo <SIZE> dan entonces el numero de líneas visibles en la ventana. La opción de selección multiple se deriva de la presencia del atributo MULTIPLE.

Ejemplo:

“MENÚ DESPEGABLE”

<form>

<option> entrada indirecta

<option> entrada lateral

<option SELECTED> entrada directa

</selct>

</form>

“VENTANA CON BARRA DE DESPLAZAMIENTO”

<form>

<option SELECTED> Ada

<option>C++

<option>Clipper

</select>

</form>

AREA DE TEXTO

La marca <TEXTAREA> permite crear una venta con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El valor dado a los atributos Rows (lineas) y Cols (columnas) delimita el tamaño de esta ventana.

Ejemplo:

<form>

Intoduzca aqui sus comentarios

</textarea>

</form>

martes, 12 de marzo de 2013

android

¿que es android?

Este mes, Movistar está lanzando en el Perú los primeros celulares con el sistema operativo Android. Este artículo, servirá para explicar exactamente qué es Android, y qué ventajas nos ofrece frente a otros sistemas operativos.

En el pasado, calificar como “smartphone”, o teléfono inteligente implicaba algunas cosas: la posibilidad de ver (y editar) documentos de Oficina (Word, Excel, etcétera), una buena aplicación para revisar correos electrónicos, un navegador Web y, por lo general, mejores características (un procesador más rápido, más memoria de almacenamiento). Características que los separaban del resto de teléfonos que simplemente se dedicaban a llamadas, quizás una cámara, y por supuesto, reproducir música.

Hoy en día, la idea de un smartphone ha cambiado. Ya no son teléfonos sólo para empresarios, o personas de negocios. Ya no se trata sólo de poder revisar documentos de Oficina, o poder escribir uno que otro correo. Hoy, todos queremos estar conectados siempre, ya sea a las redes sociales, a los blogs que seguimos, a la mensajería instantánea, y mucho más. Hoy, las funciones y posibilidades que nos dan los smartphones los acercan mucho más a lo que acostumbramos a hacer con una computadora.

Lo cierto es que estos “smartphones” dejarán de ser denominados como tales, para reemplazar, por completo, a los teléfonos existentes. El uso de smartphones y sus funciones se extienden mucho más que a empresarios, pues cualquier persona puede sacarles provecho. En pocas palabras, ya no se trata de simples teléfonos, sino prácticamente, computadoras de bolsillo. Y Android, es uno de los encargados de llevar este concepto, a la realidad.

¿Pero qué es Android?
Android es la respuesta de Google para este nuevo mercado. Es un sistema operativo para dispositivos móviles muy avanzado, pero con una amigable interfaz que nos permite hacer mucho más que simples llamadas por teléfono, enviar mensajes de texto, escuchar música, o tomar fotos.

Es, en pocas palabras, una plataforma donde podemos ver aplicaciones capaces de realizar todo tipo de funciones, donde el límite de funcionalidad está limitado sólo por nuestra imaginación (o bueno, la de los desarrolladores de aplicaciones). Es un concepto, como les mencionaba, que se acerca más a las posibilidades alcanzables con una PC, que las de un simple teléfono.

Ejemplos de uso
En lugar de poner situaciones puntuales, creo que el mejor ejemplo que puedo dejarles, es cómo uso yo mi teléfono, un smartphone, en estas semanas que he estado probando los diferentes modelos que ha lanzado Movistar.

En la mañana, por supuesto, funciona como despertador (nada nuevo). Mientras me cepillo los dientes, abro Mail y empiezo a revisar los correos, dándoles prioridad mentalmente para ser respondidos luego.

Durante el desayuno, abro el navegador Web y empiezo a revisar las noticias más relevantes del día (¿periódico? ¿Qué es eso?), ya sea a través de Google News o mi favorito, Google Reader. Si me sobra un poco de tiempo, abro DailyHoroscope, que también me da el horóscopo del día.

Luego, paso a sincronizarlo con la PC, copiando unos cuantos Mp3 para escuchar en el camino al gimnasio. En el gimnasio, lanzo la aplicación BodyFitness, que no sólo me permite ver y calcular el peso diario, sino que además, me recomienda qué ejercicios realizar para ciertos músculos del cuerpo. ¡Incluso puede recomendarnos rutinas a seguir!

Durante el día, quizás me llegue algún documento que tengo que revisar por algun motivo u otro. Pues basta con abrir Gmail, descargar el documento, y simplemente utilizar QuickOffice para saber de qué se trata, o qué cambios serán necesarios.

Si tengo que ir al banco o a hacer alguna transacción en algún lugar, el smartphone con Android es el perfecto aparato de entretenimiento; tengo una saludable colección de juegos juegos gratuitos que definitivamente hacen que las colas en bancos u otros lugares pasen volando.

Si voy de compras y encuentro un DVD que me interesa, con Google Goggles simplemente puedo tomarle una foto a la carátula o al código de barras, e inmediatamente Android buscará información al respecto, dándome reseñas de la película (para saber si vale la pena o no), quién la dirigió, qué actores participan, y mucho más. Y esto no sólo se aplica a películas o carátulas. Una reciente actualización a Google Goggles lo ha convertido en el perfecto compañero para el viajero: simplemente apuntamos la cámara a cualquier texto (un menú de restaurante, por ejemplo) y tras unos segundos, ¡Goggles nos ofrecerá la opción de traducir el texto!

Finalmente, en la noche, antes de dormir, sufro de la manía de tener que leer un libro y, adivinaron, el teléfono con Android es el que cumple de lector de libros. En la tienda de aplicaciones encontrarán no sólo un montón de libros gratuitos, sino programas que nos permitirán leer los que ya tenemos guardados.

A lo que voy con todo esto, es que el mundo ha cambiado. Y por lo tanto, los celulares, quizás los dispositivos tecnológicos más importantes en nuestras vidas, también tenían que evolucionar. Android es parte de esta evolución, y es gracias a las aplicaciones, que podemos tenerlo como un verdadero asistente digital personal, como veremos en las ventajas que el aparato ofrece.

Ventajas de Android
Android Marketplace - Al ser comparable ya a lo que podemos realizar con una PC, uno de los aspectos más importantes de un sistema operativo tan avanzado, es la cantidad de aplicaciones disponibles. Si bien el Android Marketplace todavía no cuenta con la misma cantidad de aplicaciones que el iPhone, por ejemplo, el número de “Apps” disponibles está aumentando considerablemente con el tiempo.

Tanto así, que la mayoría de redes sociales importantes (Facebook, Foursquare, LinkedIn, Twitter), cuentan con clientes disponibles para la aplicación. Todos se integran de manera transparente a Android, por lo que podemos recibir notificaciones instantáneas apenas alguien comenta en nuestro perfil, por ejemplo. Y eso no es todo; con cada aplicación, podemos sincronizar diferentes detalles de diferentes redes sociales, con nuestros contactos existentes. ¿Tenemos un amigo que tiene cuentas en Facebook, Twitter, LinkedIn, y además está en nuestra libreta de direcciones? Todo esto quedará sincronizado automáticamente, anexando la información proporcionada en cada una de las redes sociales, y unificándola bajo un solo contacto.

Y todo esto, está disponible bajo “Market”. Atrás quedaron los días de ir cazando aplicaciones en diferentes páginas web, porque ahora tenemos a todas disponibles bajo un mismo techo.

Es simple. Pero poderoso – En los primeros días de los smartphones, éstos ofrecían muchas funciones pero, a la vez, traían algo más: complicaciones innecesarias. No era raro, por ejemplo, tener que saltar menú tras menú para realizar una función tan simple, como leer nuestros SMS. Seguramente han escuchado a personas decir, en el pasado (o quizás sean ustedes mismos los que lo hagan) que prefieren un teléfono Nokia por lo simple que resultaba navegar entre menús, ¿verdad? Pues bien, uno de los puntos centrales de Android, es mantener esta simplicidad en todas las opciones.

No importa qué modelo de Android compremos, todos tendrán menús idénticos para llegar a la mayoría de opciones. Todos los teléfonos con Android tienen, por defecto, cuatro botones: el botón de retroceder, el botón de menú, el botón “Home”, que nos lleva a la pantalla principal, y el de “búsqueda” (es un sistema operativo de Google, después de todo; este botón de búsqueda no sólo busca entre nuestras aplicaciones y archivos, sino que además, puede buscar en la web directamente).

Y esta simplicidad en el manejo, se refleja también en todas las opciones de la interfaz. La mayoría de tareas, está a un par de “taps” (porque ya no podemos llamarlos “clicks”) de distancia.

Es un sistema simple, pero gracias a las aplicaciones, tan poderoso, como una PC de escritorio.

El más elegante sistema de multitasking. Otros teléfonos limitan las aplicaciones que podemos correr simultáneamente. Es decir, si estamos jugando algún juego, por ejemplo, y queremos saltar a revisar nuestro correo, en otros sistemas operativos tenemos que cerrar una aplicación, ir a nuestra aplicación de correo electrónico, volver a cerrar la aplicación de correo, para finalmente poner a cargar nuevamente el juego. En Android, es posible mandar al juego “a dormir”, poniéndolo en pausa, mientras saltamos al correo. Basta con volver a abrir el juego para continuar donde nos quedamos.

De hecho, con Android ni siquiera tenemos que estar abriendo la aplicación de correo: el teléfono automáticamente nos avisará, por ejemplo, cuando lleguen nuevos mensajes, o cuando alguien nos deje un mensaje instantáneo. Simplemente deslizamos el dedo por la parte superior de la pantalla hacia abajo, y veremos todo tipo de notificaciones.

En que se utiliza android

Actualmente, hay dos grandes plataformas que lideran los teléfonos móviles o Smartphone:IOS y Android. Según varios estudios y la propia de experiencia de cada uno, al final se pueden extraer muchas conclusiones del tipo de persona que usa un sistema operativo u otro, leyendo entre líneas y analizando ciertos aspectos como la edad, ocupación, situación económica, etc.
usuario android

Eso es precisamente lo que vemos en esta infografía, donde se nos muestran los resultados de un estudio que nos dice cómo se usa Android y que perfil de usuario es más común en la plataforma.

Según podemos ver, el 45% de los usuarios de Android ha optado por el OS en su primera experiencia con un Smartphone. Un 8% del total vienen de iPhone y, curiosamente, resulta que un 60% de los usuarios de Android tienen menos de 34 años.

infografia android usuarios

Con respecto a cómo se usa Android, los datos apuntan a que el 37% del tiempo, el usuario lee el email, gasta un 31% en juegos y un 8% en navegar por mapas o usar el GPS. Según parece, los usuarios de Android instalan 17 aplicaciones (como media) en su teléfono, frente a 28 aplicaciones de los usuarios de iPhone.

Que software desarrolla paginas web android

n ocasiones crear una aplicación basada en una arquitectura mixta entre una aplicación nativa y una aplicación web y comunicarlas en base a nuestras necesidades puede ser muy adecuado y ahorrarnos mucho tiempo de desarrollo.

Todos estaremos deacuerdo en que:

Una aplicación web (html, javascript, css, etc) tiene la ventaja de que no hay que distribuir la aplicación cuando hay un cambio en la misma, con cambiar el código en el servidor bastaría.
Una aplicación web no puede acceder directamente a los recursos del dispositivo: GPS, camara de fotos, agenda, etc.

Y digo yo, ¿por qué no una mezcla que aproveche ambas ventajas?.. pues bien, de eso se trata este pequeño tutorial.. ver como comunicarnos entre ambas partes web y nativa

Si quieres trastear, puedes descargarte el código fuente desde clic aquí. Si quieres probarlo directamente en tu dispositivo puedes descargarte la aplicación desde clic aquí

Construcción de una aplicación mixta en Android

El código fuente está autocomentado, no creo que tengas problemas si tienes una base de programación en Android.

Captura de pantalla de la aplicación a construir:

assert/carlos-garcia.html

única página web que compone la aplicación, aunque podría haber sido generada dinámicamente en un servidor, en este ejemplo está ubicada como un estático en la carpeta assert del proyecto.

view plain print ?

1. <html>

2. <head>

3. <title>Android WebView y NativeApp</title>

4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

5. <script language="javascript">

6. function callFromAndroidToJS(texto) {

7. document.getElementById("target").innerHTML=texto;

8. }

9. function callFromJSToAndroid() {

10. jsNativeInterface.metodoDemo1();

11. }

12. function callFromJSToAndroidForReadJson() {

13. var datosJson = eval('(' + jsNativeInterface.metodoDemo2() + ')');

14. document.getElementById("target").innerHTML=datosJson.timestamp;

15. }

16. </script>

17. <style type="text/css">

18. a { color: green; text-decoration: underline;}

19. </style>

20. </head>

21. <body>

22. <h1>carlos-garcia.es</h1>

23. <ul>

24. <li><p>Prueba 1: <a onclick="callFromJSToAndroid();">Haga clic aquí</a> para invocar desde el JavaScript a la aplicación Android</p></li>

25. <li><p>Prueba 2: <a onclick="callFromJSToAndroidForReadJson();">Haga clic aquí</a> para invocar desde el JavaScript a la aplicación Android y leer JSON</p></li>

26. <li><p>Prueba 3: <span id="target">Este texto será sustituido desde la aplicación nativa</span></p></li>

27. </ul>

28. </body>

29. </html>

Ten mucha precaución con la parte de javascript, pues si tienes un error como por ejemplo poner "var" en los parámetros de los métodos no ves errores en los los, simplemente NO funciona la comunicación.

res/layout/main.xml

Interface gráfico de la aplicación, observe que abajo hay un WebView que será donde se muestre la parte web.

view plain print ?

1. <?xml version="1.0" encoding="UTF-8"?>

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

5. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">

6. <EditText android:id="@+id/txt1" android:hint="Escribe algo y acepta" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

7. <Button android:id="@+id/btn1" android:text="Aceptar" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

8. </LinearLayout>

10. <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"/>

11. </LinearLayout>

es.carlosgarcia.android.MyAndroidToJsInterface

Interface de comunicación entre la parte web y la parte no web (nativa).

view plain print ?

1. package es.carlosgarcia.android;

3. /**

4. * Pequeño ejemplo de aplicación mixta: Web y Nativa. Invocar desde JavaScript a la parte Nativa y viceversa.

5. * @author Carlos García Pérez.

6. * @see http://carlos-garcia.es

7. */

8. public interface MyAndroidToJsInterface {

9. public void metodoDemo1();

10. public String metodoDemo2();

11. }

es.carlosgarcia.android.WebDemoActivity

Actividad de la aplicación.

view plain print ?

1. package es.carlosgarcia.android;

3. import org.json.JSONException;

4. import org.json.JSONObject;

6. import android.app.Activity;

7. import android.os.Bundle;

8. import android.view.KeyEvent;

9. import android.view.View;

10. import android.view.View.OnClickListener;

11. import android.webkit.WebView;

12. import android.widget.Button;

13. import android.widget.EditText;

14. import android.widget.Toast;

15.

16. /**

17. * Pequeño ejemplo de aplicación mixta: Web y Nativa. Invocar desde JavaScript a la parte Nativa y viceversa.

18. * @author Carlos García Pérez.

19. * @see http://carlos-garcia.es

20. */

21. public class WebDemoActivity extends Activity implements MyAndroidToJsInterface, OnClickListener {

22. private WebView browser;

23. private EditText txt1;

24.

25. @Override

26. public void onCreate(Bundle savedInstanceState) {

27. super.onCreate(savedInstanceState);

28. this.setContentView(R.layout.main);

29.

30. browser = (WebView) findViewById(R.id.webview);

31. Button btn1 = (Button) findViewById(R.id.btn1);

32. txt1 = (EditText) findViewById(R.id.txt1);

33.

34. browser.getSettings().setJavaScriptEnabled(true);

35. browser.addJavascriptInterface(this, "jsNativeInterface");

36. browser.loadUrl("file:///android_asset/carlos-garcia.html");

37. btn1.setOnClickListener(this);

38. }

39.

40. @Override

41. public boolean onKeyDown(int keyCode, KeyEvent event) {

42. if ((keyCode == KeyEvent.KEYCODE_BACK) && browser.canGoBack()) {

43. browser.goBack();

44. return true;

45. }

46. return super.onKeyDown(keyCode, event);

47. }

48.

49. /**

50. * Llamamos desde Android a Javascript

51. * android.view.View.OnClickListener

52. */

53. public void onClick(View v) {

54. browser.loadUrl("javascript:callFromAndroidToJS('" + txt1.getText().toString() + "')");

55.

56. }

57.

58. /**

59. * Este método es invocado desde JavaScript => Muestra un mensaje por pantalla

60. * MyAndroidToJsInterface

61. */

62. public void metodoDemo1() {

63. Toast.makeText(this, "Invocado el metodo: metodoDemo1", Toast.LENGTH_SHORT).show();

64. }

65.

66. /**

67. * Este método es invocado desde JavaScript => Devuelve un objeto JSON desde la aplicación Nativa

68. * MyAndroidToJsInterface

69. */

70. public String metodoDemo2() {

71. String toReturn = null;

72.

73. try {

74. JSONObject json = new JSONObject();

75. json.put("timestamp", System.currentTimeMillis());

76. json.put("autor", "http://www.carlos-garcia.es");

77. toReturn = json.toString();

78. } catch (JSONException e) {

79. // no se dará

80. }

81.

82. return toReturn;

83. }

84.

85. }

AndroidManifest.xml

Archivo de configuración de la aplicación.

view plain print ?

1. <?xml version="1.0" encoding="UTF-8"?>

2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"

3. package="es.carlosgarcia.android"

4. android:versionCode="1"

5. android:versionName="1.0">

7. <application android:icon="@drawable/icon" android:label="@string/app_name" android:debuggable="true">

8. <activity android:name=".WebDemoActivity" android:label="@string/app_name">

9. <intent-filter>

10. <action android:name="android.intent.action.MAIN" />

11. <category android:name="android.intent.category.LAUNCHER" />

12. </intent-filter>

13. </activity>

14. </application>

15.

16. <uses-sdk android:minSdkVersion="3" />

17. <uses-permission android:name="android.permission.INTERNET"/>

18. </manifest>

submodulo 1

lunes, 10 de junio de 2013

martes, 16 de abril de 2013

apuntes de libreta

Trabajos

TRANSCRITO DE APUNTES

martes, 12 de marzo de 2013

android