|
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
____________________________
37B.- Web local sitio.
 p37B_web_local_sitio.aia
- Esto es una continuación del tutorial anterior sobre cómo tener un sitio web local en nuestro móvil.
 
_________________
- Diseño.
He puesto un Botón y un VisorWeb
En los bloques del VisorWeb establezco esta dirección.
file:///mnt/sdcard/AppInventor/assets/index.htm
IMPORTANTE: actualmente, en vez de poner la dirección anterior, podemos poner http://localhost/index.htm, servirá para el emulador y para la instalación.
Además subo una serie de archivos htm y gráficos.
Aquí tienes los archivos que he subido: weblocal.zip
En este caso los he subido uno a uno. Podría haber creado un directorio en Android y copiarlos todos en ese directorio mediante Web PC Suite.
_________________
- Bloques.
____________________________________
___________________
- Con botones bonitos.
Para crear los botones verdes 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> |
__________________________________
|
