You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,8 @@
3
3
Debuggear es una aplicación para ayudar a aquellas personas que estan entrando en el espectacular mundo de la programación y la algoritmia. Esta aplicación permite capturar un algoritmo generado a mano, interpretarlo, y permitir ejecutarlo paso a paso
4
4
5
5
6
-
{acerca de}
7
-
6
+
## ¿Quiénes somos?
7
+
Somos un equipo compuesto por cuatro estudiantes de ingeniería en informática. Debuggear nació como nuestro proyecto final de carrera
8
8
9
9
10
10
@@ -33,4 +33,4 @@ Aunque la aplicación se pensó para soportar varios lenguajes, por ahora sólo
33
33
## Próximos pasos
34
34
- Mejorar forma de compartir (Ya que reconocer extensiones de archivos para la aplicación como PWA esta ["demorado"](https://github.com/w3c/manifest/issues/626)
Copy file name to clipboardexpand all lines: public/index.html
+2-2
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@
7
7
<linkrel='shortcut icon' href='favicon.ico' />
8
8
<title>Debuggear web</title>
9
9
<metaname="title" content="Debuggear web">
10
-
<metaname="description" content="Description">
10
+
<metaname="description" content="Debuggear es una aplicación para ayudar a aquellas personas que estan entrando en el espectacular mundo de la programación y la algoritmia. Esta aplicación permite capturar un algoritmo generado a mano, interpretarlo, y permitir ejecutarlo paso a paso">
<metaproperty="og:description" content="Debuggear es una aplicación para ayudar a aquellas personas que estan entrando en el espectacular mundo de la programación y la algoritmia. Esta aplicación permite capturar un algoritmo generado a mano, interpretarlo, y permitir ejecutarlo paso a paso">
var divConsole = document.getElementById("console-container");
389
-
// divConsole
390
-
//
391
-
},
392
-
*/
393
-
394
-
395
386
generarCrear: function(){
396
387
document.getElementById('intro').innerHTML='<h1>¡Nuevo!</h1><br>Elija una opción debajo para comenzar';
397
388
},
398
389
399
-
400
390
generarInfo: function(){
401
-
document.getElementById('intro').innerHTML='<h1>¡Holis!</h1><br>Proximamente aquí podrá encontrar información de los autores de la aplicación, y como poder contribuir para mejorarla';
391
+
varhtml="<h1 class='mb-3'>Información</h1>";
392
+
393
+
html+="<div style='font-size: 20px;'>";
394
+
395
+
html+="<p>Bienvenidos/as a Debuggear, una web para ayudarte en la resolución de ejercicios de diagramas de programación y bases de datos con una interfaz amigable, intuitiva y simple! </p>";
396
+
html+="<p>Con Debuggear podrás validar, ejecutar y probar tus algoritmos y queries fácilmente paso a paso. Esto te permitirá aprender el funcionamiento de los algoritmos y sentencias fácilmente.</p>";
397
+
html+="<p>La idea es poder brindar una alternativa interactiva para poder comprender aquellos conceptos que normalmente suelen ser complicados debido a su naturaleza abstracta.</p>";
398
+
399
+
html+="<h2 class='my-2'>¿Quiénes somos?</h2>";
400
+
html+="<p>Somos un equipo compuesto por cuatro estudiantes de ingeniería en informática. Debuggear nació como nuestro proyecto final de carrera</p>";
html+="<p class='mt-3'>Para comenzar a escanear acceda a la sección <a href='#' onclick='dg.step.screenMain(); return false;'>Diagrama</a></p>"
409
+
html+="</div>";
410
+
411
+
document.getElementById('intro').innerHTML=html;
402
412
},
403
413
404
414
generarHelp: function(){
405
-
document.getElementById('intro').innerHTML='<h1>¡Holis!</h1><br>Proximamente aquí podrá encontrar información de como utilizar esta aplicación';
415
+
varhtml="<h1 class='mb-3'>Ayuda</h1>";
416
+
417
+
html+="<div style='font-size: 20px;'>";
418
+
419
+
html+="<h2 class='my-2'>¿Cómo funciona la web?</h2>";
420
+
html+="<p>La web tiene dos módulos principales, uno para trabajar con diagramas de programación y otro para bases de datos.</p>";
421
+
html+="<p>El módulo de diagramas permite sacar una foto de un diagrama realizado a mano, o bien seleccionar el archivo desde el dispositivo. Una vez seleccionado el diagrama, la web realiza un análisis del mismo identificando los elementos y el texto contenido en ellos, ambos editables manualmente. Luego se habilita un debug paso a paso del mismo en donde se visualizan los valores de cada variable hasta ver el resultado final del algoritmo. Por último, se puede descargar el código en lenguaje C para su ejecución.</p>";
422
+
html+="<p>El módulo de bases de datos analiza un diagrama DER, reconoce tablas y atributos, crea las tablas y carga datos genéricos automáticamente. Luego permite subir una sentencia SQL y devuelve la tabla resultante junto con un interesante gráfico que da una ayuda visual para analizar las relaciones y filtros utilizados. También permite descargar las sentencias SQL de creación de las tablas, de carga de datos y almacenar los resultados de las sentencias para que puedan reutilizarse.</p>";
423
+
424
+
html+="<h2 class='my-2'>¿Qué tipo de diagramas puedo cargar?</h2>";
425
+
html+="<p>Para algoritmos se pueden cargar los diagramas de programación de la materia elementos de programación. A continuación, algunos ejemplos:</p>";
html+="<h2 class='my-2'>¿Cómo puedo cargar mi diagrama?</h2>";
433
+
html+="<p>Los diagramas, ya sean algoritmos o DER, pueden obtenerse tomando una foto o bien seleccionando un archivo en el dispositivo donde se esté ejecutando la web.</p>";
434
+
html+="<p>Para ello, puedes tomar una foto seleccionando el botón “Capturar” o si quieres elegir una foto de tu galería, puedes seleccionar el botón “Seleccionar”.</p>";
435
+
html+="<p>Si no tienes un diagrama previamente dibujado, puedes crear uno nuevo seleccionando el botón “Crear vacío”. Allí se te abrirá un lienzo en blanco sobre el que podrás agregar figuras en orden secuencial utilizando el botón “+” que encontrarás en la esquina inferior derecha de la pantalla. Luego solo tienes que acomodar las figuras y escribir las operaciones en su interior.</p>";
436
+
437
+
html+="<h2 class='my-2'>¿Puedo guardar diagramas ya analizados?</h2>";
438
+
html+="<p>Sí, la web permite descargar los diagramas que se van utilizando para luego poder reutilizarlos sin necesidad de volver a escanearlos y editarlos manualmente cuando fuera necesario.</p>";
439
+
html+="<p>El botón de descarga de diagramas es: <i class='fa fa-download'></i> Exportar Diagrama</p>";
440
+
html+="<p>Si quieres seleccionar un diagrama exportado previamente, puedes hacerlo seleccionando el botón “Importar diagrama” dentro del menú <b>Nuevo</b>.</p>";
441
+
442
+
html+="<h2 class='my-2'>¿Cómo genero el código ejecutable de mi diagrama?</h2>";
443
+
html+="<p>La web permite descargar el código SQL o C dependiendo del diagrama seleccionado para su ejecución automática sin la necesidad de codificarlo manualmente.</p>";
444
+
html+="<p>El botón de generación de código es: <i class='fa fa-file-code-o'></i> Exportar código</p>";
445
+
446
+
html+="<h2 class='my-2'>¿Qué consideraciones debo tener en cuenta a la hora de subir un diagrama?</h2>";
447
+
html+="<p>Los diagramas deben realizarse sobre una hoja en blanco, con birome negra o azul, en imprenta, el texto no puede superponerse con la figura y letra imprenta lo más prolija posible. En el caso de los DER debe utilizarse letra mayúscula para las tablas y minúscula para los campos o atributos de las tablas.</p>";
448
+
449
+
html+="<h2 class='my-2'>¿Cómo interactúo con mi diagrama?</h2>";
450
+
html+="<p>Una vez que tengas cargada la foto de tu diagrama, puedes editar todo lo que la aplicación haya reconocido. Solo tienes que seleccionar la forma reconocida y podrás editar el texto que contiene. También puedes agregar las formas que desees si es que no se reconoció alguna que dibujaste o te olvidaste de incluirla en tu dibujo. Para agregar formas utiliza el botón “+” que se encuentra en la esquina inferior derecha de la pantalla. </p>";
451
+
html+="<p>Si ya estás conforme con el diagrama, toca el botón “validar” para detectar si hay algún error. Si se encuentra alguna falla la aplicación lo informará y, sino, avanzará a la siguiente fase: la depuración.</p>";
452
+
html+="<p>En la fase de depuración, podrás ejecutar cada paso de tu algoritmo e ir consultando la tabla de símbolos para ver cómo cambian los valores de tus variables. Y lo mejor es que si no te quedó claro un paso, podrás volver atrás sin necesidad de volver a comenzar toda la ejecución.</p>";
453
+
html+="<p>Si deseas modificar el algoritmo puedes utilizar el botón “Editar”. </p>";
454
+
html+="<p>Si deseas descargar el código fuente C de tu algoritmo, puedes utilizar el botón “Exportar código”. </p>";
455
+
html+="<p>Con el botón “Símbolos” puedes consultar la tabla de símbolos en cualquier momento.</p>";
456
+
html+="<p>Y con los botones “Anterior” y “Siguiente” puedes navegar en la ejecución del algoritmo, avanzando (Siguiente) o retrocediendo (Anterior) en cada operación o sentencia.</p>";
0 commit comments