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ía de Cá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ía de Cá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> |
__________________________________
|