|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
T Búsqueda en este sitio:


.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

37.- Web local.

p37_weblocal.aia

- Presentación.

- Vamos a construir una web local en el móvil. También vamos a tratar de ver archivos pdf desde nuestra web local.

- Para empezar vamos a crear este archivo web.htm y subirlo a nuestra aplicación.

web.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Cadiz</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head> <body>
<p><font color="#009900" size="6" face="Arial"><b>Bah&iacute;a de C&aacute;diz</b></font></p>
<p><font size="5" face="Arial">- <a href="https://docs.google.com/viewer?url=http://kio4.com/appinventor/imagenes/acueducto.pdf">Acueducto de Gades.</a></font></p>
<p><font size="5" face="Arial">- <a href="file:///mnt/sdcard/AppInventor/assets/sanctipetri.pdf">Sancti Petri.</a></font></p>
<p><font size="5" face="Arial">- <a href="file:///mnt/sdcard/AppInventor/assets/ferrocarril.pdf">Ferrocarril.</a> </font></p>
<p><font size="5" face="Arial">- <a href="file:///mnt/sdcard/AppInventor/assets/puertoreal.txt">Puerto Real.</a></font></p>
<p><font size="5" face="Arial">- <a href="file:///mnt/sdcard/AppInventor/assets/lascanteras.htm">Las Canteras.</a></font></p>
</body>
</html>

_________________
- Diseño.

Subimos a nuestra aplicación estos siete archivos:

- web.htm
- ferrocarril.pdf
- acueducto.pdf
- sanctipetri.pdf
- puertoreal.txt
- lascanteras.htm
- lascanteras.gif

_________________
- Bloques.

____________________________________

- Comentarios.

Cuando pulsamos el botón superior se abre en el navegador el archivo web.htm que contiene enlaces.

Acueducto: funciona mediante el Google viewer.
Sancti Petri: no funciona porque el navegador no lee pdf.
Ferrocarril: tampoco funciona a pesar de estar en la memoria del dispositivo.
Puerto Real: funciona porque es txt
Las Canteras: funciona porque es htm

Cuando pulsamos el botón Activity Starter funciona Sancti Petri que está guardada en la sdcard.

- Para que la página se adapte bien al móvil, es conveniente que tenga, esta línea en la parte del head:

<meta name=viewport content="width=device-width, initial-scale=1">

_____________________________________

- Mientras se está emulando la aplicación hay un directorio assets común:

file:///mnt/sdcard/AppInventor/assets/

- Cuando estamos programando con App inventor y queremos trabajar con un archivo guardado en el directorio assets, pondremos...

file:///mnt/sdcard/AppInventor/assets/index.htm

file:///mnt/sdcard/AppInventor/assets/fuego.gif

file:///mnt/sdcard/AppInventor/assets/kio4.txt

- Pero cuando vayamos a Generar el archivo de instalación .apk, previamente debemos cambiar esas direcciones ya que irá a un directorio asset particular para cada aplicación.

file:///android_asset/index.htm

file:///android_asset/fuego.gif

file:///android_asset/kio4.txt

- ¡ Cuidado con assets y android_asset !

- Un assets termina el s y el otro asset termina en t.

___________________

- Con botones bonitos.

- Modifica el archivo web.htm con el contenido que he puesto en la siguiente tabla.

- Saldrá un botón verde que realizará el enlace.

- Para crear ese botón verde es necesario insertar código CSS

- En esta página puedes ver cómo crear el código CSS para obtener botones personalizados.

web.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Cadiz</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.css_btn_class {
font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #268a16;
padding:9px 18px;
text-decoration:none;
background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
background:-ms-linear-gradient( top, #77d42a 5%, #5cb811 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #77d42a), color-stop(100%, #5cb811) );
background-color:#77d42a;
color:#306108;
display:inline-block;
}.css_btn_class:hover {
background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
background:-ms-linear-gradient( top, #5cb811 5%, #77d42a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #5cb811), color-stop(100%, #77d42a) );
background-color:#5cb811;
}.css_btn_class:active {
position:relative;
top:1px;
}
/* This css button was generated by css-button-generator.com */
</style>
</head> <body>
<p><font color="#009900" size="6" face="Arial, Helvetica, sans-serif"><b>Bah&iacute;a de C&aacute;diz</b></font></p>
<p><font size="5" face="Arial">- <a href="https://docs.google.com/viewer?url=http://kio4.com/appinventor/imagenes/acueducto.pdf">Acueducto de Gades.</a></font></p>
<p><font size="5" face="Arial">- <a href="file:///mnt/sdcard/AppInventor/assets/sanctipetri.pdf">Sancti Petri.</a></font></p>
<p><font size="5" face="Arial">- <a href="http://kio4.com/appinventor/index.htm">Ferrocarril.</a> </font></p>
<p><font size="5" face="Arial">- <a href="file:///mnt/sdcard/AppInventor/assets/puertoreal.txt">Puerto Real.</a></font></p>
<p><font size="5" face="Arial">- <a href="file:///mnt/sdcard/AppInventor/assets/lascanteras.htm">Las Canteras.</a></font></p>
<a href="file:///mnt/sdcard/AppInventor/assets/lascanteras.htm" class="css_btn_class">Las Canteras</a>
</body>
</html>

__________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información