Creando manualmente un proyecto en CodeIgniter 4.6.1

• Descargar el archivo zip.
• Descomprimir y guardar en la carpeta htdocs de XAMP.
• Establecer un nombre adecuado para la carpeta. En mi caso le voy a llamar agenda
• Dentro de la carpeta renombrar el archivo env a .env. Dentro del archivo .env establecer el entorno de trabajo a desarrollo en vez de producción. Para ello se descomenta la linea # CI_ENVIRONMENT = production y se modifica para que quede así: CI_ENVIRONMENT = development
• En este punto se puede probar que se ha iniciado el proyecto adecuadamente. Se inicia Apache y en la barra de direcciones del navegador se escribe localhost/agenda. Se ingresa a public y allí deberá aparecer el mensaje de bienvenida y en la parte de abajo un mensaje indicando que está en modo de desarrollo.

Instalando XAMP y dejando todo listo para empezar

• Descargar XAMP for Windows.
• Ejecutar el instalador como administrador.
• Tal vez haya que modificar el UAC (User Account Control) pero en mi caso no tuve que hacer nada.
• Desde el panel de control de XAMP abrir el archivo de configuración php.ini y activar la extensión intl.
• Ejecutar el Servidor Apache y MySQL.
• En la primera ejecución se pedirá permiso para que el firewall de windows no los bloquee.
• Escribir en la barra de direcciones del navegador localhost para verificar que todo esté funcionando bien.

Una nueva forma de crear aplicaciones webs ... para mi.

Me gusta mucho el lenguaje PHP, pero hasta ahora solo lo he usado en su versión estructurada y sin un framework. Es hora de iniciar un proceso para crear una app web usando herramientas más profesionales. Estas son:

• XAMP for Windows 8.0.30
• Codeigniter 4.6.1
• Visual Studio Code

Agrupada bajo una misma etiqueta, la intención es ir registrando todo lo necesario para crear una aplicación web de manera más profesional y aplicando los mejores practicas de programación.

Mejorar el rendimiento de computador con Windows 11

1. Desactivar programas que inician con Windows. Presionar Ctrl + Shift + Esc para abrir el Administrador de tareas, ir a la pestaña Aplicaciones de Arranque, revisar la columna Impacto de inicio y desactivar los que tengan Alto y no sean esenciales.

2. Desinstalar programas que no se usan. Ingresar a Configuración → Aplicaciones → Aplicaciones instaladas y eliminar programas que no se utilizan.

3. Presionar Tecla Windows + R para abrir el cuadro de dialogo Ejecutar. Escribir y ejecutar temp. Aparece la carpeta de archivos temporales de windows. A continuación se procede a borrar los archivos y carpetas temporales que aparezcan. Para ello se puede presionar CTRL + E para seleccionarlos y luego DEL o SUPR para enviarlos a la papelera de reciclaje.

4. De manera parecida al paso anterior, con la diferencia de que se va a ejecutar %temp%. Esta orden abre la carpeta de los archivos y carpetas temporales del usuario actual.

5. Se procede de la misma forma y se ejecuta prefetch. Esta carpeta almacena información sobre los programas que se usan con frecuencia para que se carguen más rápido al iniciarlos.

6. Usar la herramienta Liberador de espacio en disco.

Fabricar un prototipo de imprenta

• Papel Foami liso tamaño carta color claro.
• Tapas de gaseosa (12) del mismo tamaño.
• Gota mágica (2).
• hojas bloc papel carta sin raya.
• Tijeras punta roma.
• Esponja.
• Tinta.
• Guantes.

Machetornis rixosa

Milvago Chimachima

Crear abono para plantas a partir de residuos orgánicos

En vez de fabricar el compost directamente este metodo se centra en secar los residuos organicos para luego ser usados directamente en la planta. La razón de hacer esto está en evitar que se produzcan malos olores, en hacerlo rápidamente pero especialmente en evitar que en el proceso se formen jejenes.

• Recolecta residuos orgánicos.
• Cortarlos en pedazos pequeños.
• Extender sobre una plancha o tabla los residuos previamente cortados y déjalos secar al sol hasta que queden totalmente crujientes.
• Moler los residuos y guardalos en bolsa resellable para su uso.

Lugares para visitar en Bogotá y en los alrededores

1. MUSEO DEL ORO
Descripción: Museo arqueológico con colección de orfebrería prehispánica colombiana.
Entrada: $5.000 por persona
Sitio Web: https://www.banrepcultural.org/bogota/museo-del-oro/programe-su-visita
Observaciones:Desde este lugar se puede llegar a pie a otros museos y a la plaza de Bolívar.

2. MALOKA
Descripción: Maloka es un museo interactivo que fomenta la pasión por el aprendizaje partir de los lazos entre ciencia, tecnología, innovación y sociedad. Hay sala de exposición, cine-domo, cine 3D, laboratorios.
Entrada: Cada actividad tiene su precio. Por ejemplo: Recorrido Exploratorio $32.300, Laboratorios $21.000, Cine $13.900. Comprando una manilla sale un poco más cómodo.
Sitio Web: https://maloka.org/
Observaciones: Este museo está enfocado principalmente a niños y jóvenes que están en la escuela y a cualquiera amante de la ciencia.

3. JARDÍN BOTANICO JOSÉ CELESTINO MUTIS
Descripción: El Jardín Botánico es un centro de investigación distrital con énfasis en ecosistemas altoandinos y de páramo.
Entrada: Hay una tarifa entrada general nacionales de $6.000 y otras tarifas que se detallan en el sitio web.
Sitio Web: https://bogota.gov.co/mi-ciudad/cultura-recreacion-y-deporte/costo-de-entrada-al-jardin-botanico-de-bogota-2024
Observaciones: En este sitio se van a encontrar plantas... muchas, muchas plantas.

4. PARQUE DE DIVERSIONES MUNDO AVENTURA
Descripción: Parque donde el visitante puede disfrutar de la más completa y variada diversión con: Atracciones Mecánicas, Juegos de Destrezas y Escenarios Naturales.
Entrada: Los precios varían de acuerdo a las actividades que se quieran realizar. Se pueden comprar pasaportes para varias actividades con precios de $55.000 en adelante.
Sitio Web: https://mundoaventura.com.co/planea-tu-visita/precios/
Observaciones: No he ido pero me cuentan que es bastante parecido a las llamadas ciudades de hierro, pero con más cosas. Está enfocado a la diversión y actividades extremas.

5. PARQUE SALITRE MÁGICO
Descripción: Parque de atracciones mecánicas, igual que mundo aventura.
Entrada: Los precios varían de acuerdo a las actividades que se quieran realizar. Se pueden comprar pasaportes para varias actividades con precios de $50.000 en adelante.
Sitio Web: https://salitremagico.com.co/
Observaciones: Tiene una temática parecida a Mundo aventura.

6. PARQUE METROPOLITANO SIMÓN BOLIVAR
Descripción: Área verde urbana con recorridos para caminantes y ciclistas, lago para andar en bote y un área de juego. Entrada: Gratis.
Sitio Web: https://www.idrd.gov.co/parques/parques-estructurantes/parque-metropolitano-simon-bolivar
Observaciones: En el 2013 llegamos a este lugar después de hacer un recorrido y regresar a Facatativá. Es un espacio público para caminar o hacer ejercicios. Allí se realizan conciertos.

7. PARQUE JAIME DUQUE
Descripción: Parque temático de enfoque familiar.
Entrada: Los precios varían de acuerdo a las actividades que se quieran realizar. Se pueden comprar pasaportes para varias actividades con precios de $52.000 en adelante.
Sitio Web: https://parquejaimeduque.com/
Observaciones: Se encuentra fuera de Bogotá, a una hora en transporte terrestre.

8. CERRO DE MONSERRATE
Descripción: Es una montaña a la cual se puede subir a pie, en funicular y en teleférico. En su parte alta hay una iglesia, restaurantes y un mirador de la ciudad.
Entrada: Subir a pie no tiene costo. Funicular o Teleférico Ida y Vuelta Desde $29.500
Sitio Web: https://monserrate.co/
Observaciones: Se encuentra cerca del centro de Bogotá.

9. MUSEO BOTERO
Descripción: El Museo Botero cuenta con una de las más importantes colecciones de arte internacional que se puedan encontrar en Latinoamérica.
Entrada: Gratis.
Sitio Web: https://www.banrepcultural.org/bogota/museo-botero
Observaciones: Se encuentra cerca del museo del oro.

10. MUSEO NACIONAL DE COLOMBIA
Descripción: Ofrece a sus visitantes diecisiete salas de exposición permanente, en las cuales se exhiben alrededor de 2.500 obras y objetos, símbolos de la historia y el patrimonio nacional.
Entrada: Adultos $6.000 .
Sitio Web: https://www.museonacional.gov.co/
Observaciones: Para los amantes de la historia de Colombia.

11. A continuación les comparto información sobre el Parque Arqueológico Piedras del Tunjo en Facatativá:
Tarifas: Nacionales colombianos $13.500; Extranjeros $65.000 (Temprano en la mañana el parque está abierto al público de manera gratuita)
Sitio Web: http://www.colparques.net/FACA

Otros lugares: El planetario, la casa museo Simón Bolivar, Tren turistico de la sabana: Turistren.

GIMP

1. Crear un marco sencillo para una fotografía.

2. Transparencia y recortar imagen

Fabricación de un biodigestor casero didáctico

El objetivo de esta actividad era crear un biodigestor pequeño pero funcional. Una vez terminado y habiendo comprobado su funcionamiento se les darían las instrucciones a los estudiantes para que ellos construyan el suyo y puedan producir su propio biogas.

Prototipo 1.0

Se usó excremento de vaca disuelto en agua. El primer prototipo parecía prometedor. Sin embargo, algo ocurría: en cuanto empezaba a llenarse el globo perdía presión.

Prototipo 2.0

El segundo prototipo tenía como objetivo determinar la razón por la que había la perdida de gas. Sospechaba que la tubería quedaba con agujeros. Me dí cuenta de que el pico de la botella rasgaba el globo.

Prototipo 3.0

Para evitar el problema anterior se construyó el tercer prototipo. Un examen cuidadoso arrojó donde estaba el problema: el globo tenía agujeros muy pequeños. Entonces no se podía usar globos para almacenar el biogas. En vez de globo se usó una bolsa plástica. Debido a que no se aseguró bien al tubo había perdida de presión.

Prototipo 4.0

El prototipo cuatro es la primera versión funcional. Se había asegurado bien la bolsa para que no hubiese perdida de presión. La bolsa se llenó de biogas después de unos cuantos días. Cuando se hizo la prueba el biogás ardió por unos pocos segundos.

Mi nuevo autor favorito

Si alguna vez alguien ha estado siguiendo las entradas a este blog ya habrá notado que me encanta la ciencia ficción. Hace aproximadamente seis meses (no recuerdo cómo, ni por que) empecé a escuchar en audiolibros los cuentos y novelas del escritor Isaac Asimov. Simplemente he quedado encantado con las historias de ciencia ficción. Un cuento que me ha llamado mucho la atención es Una estatua para papá.

Quiero mencionar que en especial "me enganché" en escuchar en audiolibro las novelas de Serie de la fundación. El siguiente cuadro resume el orden en que fueron apareciendo. Además es el orden en el que suguiero que se vayan leyendo. No están totalmente en orden cronologico. Algo que me ha encantado son los giros inesperados en las historias: cuando uno se espera algo y luego resulta que todo el tiempo el autor nos ha tenido engañado. En el libro Fundación y tierra he notado un ligero cambio, que me ha incomodado, en la forma como se ha venido contando la historia y al final quedo cómo diciendo "¿Qué ha pasado aquí? Pero en general me ha encantado la serie.

Asimov creó otras novelas que tambien están organizadas en series, como La serie de los robots o La serie del imperio galáctico que existen en el mismo universo de la fundación.

Quedan para el recuerdo algunas ilustraciones que he encontrado acerca de escenas de las novelas y que evocan aventuras o situaciones vividas por los personajes.

Star trek

No me considero un fanático de esta franquicia, solo he visto la mayoría de peliculas y series, algunas me disgustan, otras me gustan y otras me encantan. Pero puedo decir que es la mejor franquicia de ciencia ficción y aventuras que existe y está en vigencia por el momento.

Voyager fue la primera serie de Star trek que vi completa. Ya había visto de niño algunos episodios de La nueva generación pero no me habían llamado demasiado la atención. Sin embargo, esta serie me enamoró de la franquicia.

Esta pelicula del 2009 fue concebida para atraer al público joven a la franquicia. A mi me encantó y me hizo querer ver más.

Sin embargo, a mi parecer la mejor pelicula de todas es Primer Contacto ¿Que tiene de especial? Por un lado una trama cautivadora, ha envejecido muy bien y sus antagonistas: Los Borg.

Banco de ideas para proyectos de Tecnología e informática

1. Tren electrico sobre rieles.
2. Tren de levitación magnetica.
3. Motor Stirling.
4. Lector de tarjetas perforadas.
5. Telar.
6. Sumadora con engranajes (Pascalina).
7. Cartel de luces LED (Arduino y/o Micro Bits)
8. Telegráfo.
9. Bote de basura de pedal.
10. Pantografo.
11. Dibujar una imagen con tapas de gaseosa de colores o con stickers sobre una cartulina gigante.
12. Robot Tortuga Logo.
13. Videojuego con unity y Blender.
14. Clip de video y/o película.
15. Fabricar jabón casero.
16. Letrero LED programable.
17. Receptor de ondas sonoras.
18. Limpieza de aguas grises con Alumbre.
19. Sistema de persianas en las ventanas.
20. Animación Stop-Motion
21. Animación usando powerPoint.
22. Vara para bajar papaya o mango.
23. Paracaidas.
24. Lanzamiento de aviones que vuelan.
25. Biodigestor didactico.
26. Candelabro casero.
27. Detector de metales.

PHP: Una arquitectura de aplicación personalizada

Intentando resolver el problema planteado en esta entrada, me había puesto a crear (con mucha ayuda) un sistema MVC personalizado para aplicaciones PHP tal como se muestra en esta otra entrada. Tambien consideré aprender a fondo Codeigniter e incluso Laravel. Después de darle vueltas al asunto me he propuesto crear una arquitectura parecida a la MVC pero un poco más sencilla, que permita implementar buenas practicas de programación. Las principales características de esta opción son las siguientes:

• No usa POO. Me parece que con la programación estructurada se mantiene más sencillo el código y a efectos prácticos, para los proyectos que pienso manejar, funciona bien.
• Se divide el proyecto en dos bloques: Del lado dl cliente y del lado del servidor.
• Se elimina el controlador principal que se usa en la arquitectura MVC.
• Básicamente solo quedan las vistas y los modelos, las cuales se encuentran en carpetas distintas pero tienen los mismos nombres. Los controladores individuales se ha fusionado con el modelo pero su presencia es casi inperceptible.
• Siempre se invoca primero el modelo y luego la vista: siempre en ese orden.

Estructura de la carpeta

El siguiente código es mi versión personalizada de una aplicación hecha con la arquitectura personalizada que he planteado.

index.php

<a href="mo/estudiante_listar.php"> Listar </a>

---

mo/a_conectar.php

<?php 

if (!($link=mysqli_connect("localhost","root","9810402254"))) 
   
	{ 
      
	echo "Error conectando a la base de datos.";
  
      exit(); 
   
	} 

if (!mysqli_select_db($link,"colegio")) 
   
	{ 
      
	echo "Error seleccionando la base de datos.";
  
      exit(); 
  
	}
  
?>

---

mo/estudiante_listar.php

<?php 
$dato = array();

require("a_conectar.php");
$rs = mysqli_query($link," select * from estudiantes ");

while($f = mysqli_fetch_array($rs))
        {  
	$dato[] = $f;
	}

mysqli_free_result($rs);
mysqli_close($link); 

require("../vi/estudiante_listar.php");
?>

---

vi/estudiante_listar.php

<table>
<tr>
<td>ID</td>
<td>NOMBRES</td>
<td>APELLIDOS</td>
</tr>
 
<?php foreach ($dato as $d): ?>
   <tr>
   <td><?php echo $d['id'] ?></td>
   <td><?php echo $d['nombres'] ?></td>
   <td><?php echo $d['apellidos'] ?></td>
   </tr>
<?php endforeach; ?>

</table>

PHP: Creando una aplicación MVC personalizada con POO

El siguiente código es una versión personalizada de una aplicación hecha en PHP que permite realizar la misma acción que la de esta entrada. Precisamente la única diferencia es que se implementa en una arquitectura MVC y la mayoría ha sido adaptado de otros códigos encontrados en Internet.

Estructura de carpetas

index.php

<?php 

require_once 'conf/config.php';

if(!isset($_GET["c"])) $_GET["c"] = constant("DEFAULT_CONTROLLER");
if(!isset($_GET["a"])) $_GET["a"] = constant("DEFAULT_ACTION");

// Establece la ruta donde se encuentra el controlador
$controller_path = 'controladores/'.$_GET["c"].'.php';

// Pregunta si el archivo con el controlador existe.
if(!file_exists($controller_path)) $controller_path = 'controladores/'.constant("DEFAULT_CONTROLLER").'.php';

/* Load controller */
require_once $controller_path;
$controllerName = $_GET["c"].'Controlador';
$controller = new $controllerName();

// crea $dato como un arreglo vacío
$dato = array();
// Si el método existe lo ejecuta y recibe el resultado en el arreglo $dato
if(method_exists($controller,$_GET["a"])) $dato = $controller->{$_GET["a"]}(); 


// Carga las vistas
require_once 'vistas/plantillas/cabeza.php';
require_once 'vistas/'.$controller->vista.'.php';
require_once 'vistas/plantillas/pie.php';

?>

---

conf/config.php

<?php

/* Valores de conexión a la base de datos*/
define("DB_HOST", "localhost");
define("DB", "colegio");
define("DB_USER", "root");
define("DB_PASS", "9810402254");

/* Controlador y acción (método) por defecto. */
define("DEFAULT_CONTROLLER", "estudiante");
define("DEFAULT_ACTION", "listar");

?>

---

controladores/estudiante.php

<?php 

// Este controlador usa un modelo 
require_once 'modelos/estudianteModelo.php';


class estudianteControlador 
	{
	//la variable vista contiene el archivo que mostrará la vista al usuario 
	public $vista ;

	public function __construct() 
		{
		
		}

		public function listar()
		{
		// Se asigna el nombre de la vista que se mostrará al usuario como resultado de esta acción 
		$this->vista = "estudianteListar";
		//Creación del modelo que accederá a la base de datos. 
		$m = new estudianteModelo();
		// Se ejecuta el método para listar y se obtiene el resultado en la variable rs
		$rs = $m->obtenerEstudiantes();
		// Se devuelve el arreglo obtenido. 
		return $rs;
		}

	}


?>

---

modelos/bd.php

<?php 

// Establece una conexión con la base de datos usando PDO y de acuerdo a los valores que se encuentran en el archivo de configuración.

require_once 'conf/config.php';

class bd {

	private $host;
	private $db;
	private $user;
	private $pass;
	public $conection;

	public function __construct() {		

		$this->host = constant('DB_HOST');
		$this->db = constant('DB');
		$this->user = constant('DB_USER');
		$this->pass = constant('DB_PASS');

		try {
           $this->conection = new PDO('mysql:host='.$this->host.'; dbname='.$this->db, $this->user, $this->pass);
        } catch (PDOException $e) {
            echo $e->getMessage();
            exit();
        }

	}

}

?>

---

modelos/estudianteModelo.php

<?php 

require_once 'modelos/bd.php';

class estudianteModelo {

	// la variable con guardará la conexión.
	private $con;

	public function __construct() 
			{

			}

	// Establece y guarda el valor de la conexión.
	public function establecerConeccion(){
		$dbObj = new bd();
		$this->con = $dbObj->conection;
	}


	public function obtenerEstudiantes(){
		
		// Establece la conexión.
		$this->establecerConeccion();
		// Realiza la consulta y guarda el resultado.
		$sql = "SELECT * FROM ESTUDIANTES";
		$s = $this->con->prepare($sql);
		$s->execute();
		// fetchAll — Devuelve un array que contiene todas las filas del conjunto de resultados.
		$rs = $s->fetchAll();
		// Retorna el valor del resutado.
		return $rs;
	}

// Considerar establecer un destructor para cerrar la conexión a la base de datos. Aunque el recolector de basura de PHP también se encargrá de esta operación.
	
}

?>

---

vistas/estudianteListar.php

<table>
    <tr>
        <th>Id</th>
        <th>Nombres</th>
        <th>Apellidos</th>

    </tr>
    <?php foreach ($dato as $r): ?>

        <tr>
            <td><?php echo $r["id"] ?></td>
            <td><?php echo $r["nombres"] ?></td>
            <td><?php echo $r["apellidos"] ?></td>

        </tr>

     <?php endforeach; ?>
</table>

---

vistas/plantillas/cabeza.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

---

vistas/plantillas/pie.php

</div>
</body>
</html>

La increíble vida de Walter Mitty

No es ni de cerca mi actor ni director favorito. Sus películas, por lo general perteneciente al genero cómico, siempre me han parecido banales. Pero a cada quien lo suyo. Esta pelicula es una joya: construccion de personajes, banda sonora, fotografía, su trama y su mensaje por mencionar algunos aspectos. En pocas palabras: es una de las mejores peliculas bien hecha que he podido ver. No tiene presa mala. He aquí una de sus escenas más memorables.

Arte Pixel

CORAZÓN 1  Ancho: 11 B14 N2 B1 N2 B3 B2 N1 B2 N1 B2 N1 B2 B1 N1 B7 N1 B1 B1 N1 B7 N1 B1 B2 N1 B5 N1 B2 B3 N1 B3 N1 B3 B4 N1 B1 N1 B4 B5 N1 B5 B11

MUJER   Ancho: 34 B16 N6 B25 N12 B20 N16 B17 N15 B1 N3 B14 N16 B2 N3 B12 N18 B1 N4 B10 N19 B1 N5 B9 N19 B1 N5 B8 N20 B1 N6 B7 N5 B1 N14 B1 N6 B6 N5 B3 N13 B1 N6 B6 N2 B2 N1 B3 N1 B2 N10 B1 N6 B6 N1 B11 N9 B1 N7 B4 N2 B11 N9 B1 N7 B4 N3 B4 N1 B4 N10 B1 N7 B4 N1 B5 N3 B5 N5 B5 N6 B3 N1 B5 N2 B1 N2 B5 N2 B8 N5 B3 N2 B5 N3 B5 N2 B9 N5 B3 N4 B4 N1 B4 N3 B11 N4 B2 N4 B11 N1 B13 N3 B2 N4 B11 N2 B12 N3 B2 N5 B2 N1 B3 N1 B2 N5 B10 N3 B2 N8 B3 N4 B3 N2 B9 N3 B2 N9 B1 N6 B3 N2 B4 N7 B2 N11 B2 N4 B3 N1 B2 N8 B3 N9 B5 N6 B2 N2 B3 N4 B2 N9 B8 N3 B3 N9 B2 N8 B14 N2 B1 N7 B2 N8 B14 N1 B4 N5 B2 N8 B14 N1 B4 N4 B3 N8 B14 N1 B3 N5 B3 N9 B10 N2 B1 N1 B3 N5 B2 N10 B11 N3 B2 N5 B3 N11 B14 N6 B3 N12 B6 N5 B1 N7 B3 N13 B5 N2 B1 N10 B3 N14 B5 N13 B2 N15 B6 N11 B2 N17 B3 N12 B2 N32 B2

PINGUINO  Ancho: 10 B4 A2 B7 A4 B5 A6 B3 N1 B1 N1 B2 N1 B1 N1 B2 N1 B2 J2 B2 N1 B2 A8 B1 N3 B4 N3 B1 N3 B2 N3 B2 N3 B2 N3 B3 N6 B3 J2 B4 J2 B1

CORAZÓN 2  Ancho: 13 B3 N3 B1 N3 B5 N1 R3 N1 R3 N1 B3 N1 R6 B1 R2 N1 B2 N1 R7 B1 R1 N1 B2 N1 R9 N1 B3 N1 R7 N1 B5 N1 R5 N1 B7 N1 R3 N1 B9 N1 R1 N1 B11 N1 B6

En el siguiente script se puede probar las instrucciones para generar Arte Pixel:

Ancho:

Instrucciones:

Código fuente del generador de Arte Pixel en JavaScript:

<div>
<form  style="background-color: lightgrey;" > 
Ancho:<br> <input type = text id =ancho placeholder="Ancho"  /> <br>
Instrucciones:<br> <textarea rows="30" cols="20" id="texto" placeholder="Instrucciones">


</textarea>
<p> <button onclick="armar()" type="button">Armar</button> </p>   
<p> <button onclick="borrar()" type="button">Borrar</button> </p>   
</form>
</div>

<div id ="tabla">

</div>

<script>  

function armar() 
 {  
  var s,text,a,color,pasos,linea,i,ancho,anchoactual,j,canlineas,colorcelda;
  s = document.getElementById("texto").value;
  ancho = parseInt(document.getElementById("ancho").value);
  a = s.split(/\n/);
  text = "<table border = 1  cellpadding= 0 cellspacing = 0>";
   i=0;
   anchoactual = 0;
   canlineas = a.length;
   while (i < canlineas)
   {
    linea = a[i];
    color = linea[0];
    pasos = parseInt(linea.slice(1));
    for (j=1;j<=pasos;j++)
    {
      
      if (anchoactual==0)
      {
        text = text + "<tr>";        
      }

      colorcelda = " ";
      if (color == "N" || color == "n" )
        {
          colorcelda = " bgcolor = black ";
        }
        else if (color == "A" || color == "a" )
        {
          colorcelda = " bgcolor = blue ";
        }
        else  if (color == "J" || color == "j" )
        {
          colorcelda = " bgcolor = orange ";
        }
        else if (color == "M" || color == "m" )
        {
          colorcelda = " bgcolor = brown ";
        }
        else if (color == "V" || color == "v" )
        {
          colorcelda = " bgcolor = green ";
        }
        else if (color == "R" || color == "r" )
        {
          colorcelda = " bgcolor = red ";
        }
        else if (color == "G" || color == "g" )
        {
          colorcelda = " bgcolor = gray ";
        }
        else
        {
          colorcelda = "  ";
        }

      text = text + "<td "+colorcelda+">    </td>";
      anchoactual++;
      if (anchoactual>=ancho)
      {
        text = text + "</tr>";
        anchoactual=0;
      }
    }
    i++;  
   }
   text = text+"</table>";
   document.getElementById("tabla").innerHTML = text;  
 }  

function borrar() 
 {  
  var text;
  text = "";
   document.getElementById("tabla").innerHTML = text;  
 }  


</script>  

Arma el código

Enlace de descarga

ArmaElCodigo_1.1.apk

Introducción a Appinventor 2 (Offline)

Para mí, App Inventor 2 es la manera más fácil y sencilla de crear aplicaciones para Android. Existe una forma de trabajar on-line que es la que normalmente uso y tambien la forma off-line la cual uso en entornos donde no es posible o es muy dificil el accesso a Internet.