Il diagramma di stato - Modifiche e debugging dell’applicazione web originaria

2. Modifiche e debugging dell’applicazione web originaria

2.1 Il diagramma di stato

La sistemazione delle referenze all’interno del tag head41_{della pagina index.html è stata la prima}

operazione per comparare i due tipi di strutture delle pagina web e dell’applicazione scaricata da Github:

40 La commit è un upload del codice sorgente di un software su una piattaforma.

41 Il tag può includere al suo interno: il titolo per il documento, gli script, i fogli di stile, i metadati e molto altro ancora. HTML5 ha introdotto un metodo per consentire agli web designer di controllare la vista (area visibile dell'utilizzatore di una pagina web) attraverso il tag meta, dentro il tag head. Si può desumere che il tag head e i suoi tag (o meglio nodi) figli, traggono al loro interno molte informazioni, e applicativi, al servizio di una pagina web.

Porzione di codice dopo la sistemazione delle referenze:

Sistemando queste righe di codice HTML, si può osservare il funzionamento dei due modelli particellari a confronto.

In un primo luogo si osserva che nella versione di Github non esiste la pagina introduttiva illustrata nel capitolo 1.1.5, ovvero la pagine aventi il titolo dell’applicazione, e il video illustrativo contenente il moto browniano. Questo fattore ha poca influenza poiché la parte di interesse per il comportamento del software riguarda principalmente il simulatore particellare.

Quindi la prima pagina (homepage) dell’applicazione di Github riguarda proprio il simulatore, esattamente come nell’illustrazione 2.

Avviato il simulatore, la prima differenza risiede nel comportamento del diagramma riguardante i passaggi di stato della materia. A differenza della versione disponibile in rete, l’applicazione di Github ha la sfera sul diagramma che ha un movimento solo in direzione diagonale, e ciò implica uno scorretto funzionamento:

Nonostante l’andamento sfavorevole della sfera del grafico dell’applicazione scaricata da Github, il diagramma dell’applicazione web ha anch’esso dei difetti per quanto concerne il mantenimento della sfera sugli assi del grafico.

Nonostante il codice dell’applicazione web sia stato preso in considerazione come modello sul quale eseguire modifiche, si può asserire che anch’esso presenta diversi difetti in diverse circostanze di esecuzione, intercettabili solo utilizzando il software in molteplici intervalli di temperatura.

18. Illustrazione: Diagrammi delle due applicazioni a confronto con l’aumento della temperatura intorno ai settantacinque gradi rispetto allo stato iniziale

Quindi la prima operazione sul codice è stata quella di aggiustare lo script che gestisce il diagramma illustrativo del passaggio di stato, previa copiatura dello script dell’applicazione web e sostituzione dello script presente sul programma di Github42_.

La parte più laboriosa del progetto ha riguardato la creazione di più diagrammi a seconda dello stato iniziale della materia. Attualmente, ne esiste uno solo (presente nell’illustrazione 8), che risulta essere correttamente illustrativo in sostanze che allo stato iniziale si presentano liquide, come acqua e alcol terziar-butilico, ma per altre sostanze il modello non è corretto.

Sono stati creati quindi altri due grafici, sfruttando il potenziale di SVG, che risultano essere più fedeli in situazioni in cui lo stato iniziale non è liquido, ovvero gassoso e solido.

42 La cartella di lavoro equivarrà alla cartella di Github, poiché dentro di essa sono presenti dei file ai quali non è possibile accedere tramite la visualizzazione del codice sorgente su browser web.

Le modifiche sono state effettuate prevalentemente su codice JavaScript, poiché gli assi del diagramma, le stringhe di testo gli indicatori degli intervalli di temperatura, sono stati creati tramite le funzioni drawLine() e addText().

20. Illustrazione: Diagramma delle sostanze aventi lo stato iniziale solido

Le seguenti schermate mostrano la differenza tra il codice utilizzato in precedenza per il disegno del vecchio diagramma e quello utilizzato per la creazione dei nuovi grafici.

Fino al comandosvg.appendChild(arrow_Y) il codice è rimasto invariato. Successivamente sono state rimosse le righe di testo contenenti gli intervalli di stati (es. solido ↔ liquido) e

sono state sostituite con tre stringhe che esplicano lo stato in determinati intervalli del grafico:

addText(svg, 70, 300, "solido", colorText); addText(svg, 235, 270, "liquido", colorText); addText(svg, 430, 250, "vapore", colorText);

22. Illustrazione: Codice utilizzato per la creazione del diagramma nell’applicazione web e nell’applicazione presente su Github.

Dall’illustrazione soprastante si notano chiaramente tre rami if-else, all’interno dei quali viene disegnato un grafico.

La prima differenza rispetto alla versione precedente risiede nella funzione nominata putAddText. Essa è stata concepita per gestire le stringhe che andranno a posizionarsi lungo l’asse delle ordinate del diagramma all’interno del piano cartesiano. Il codice di putAddText è molto semplice ed è costituito dalle seguenti istruzioni:

function putAddText(h, degrees){

switch(degrees.toString().length) { case 1:

addText(svg, 45, h, degrees, colorText); break;

case 2:

addText(svg, 35, h, degrees, colorText); break;

case 3:

addText(svg, 25, h, degrees, colorText); break;

case 4:

addText(svg, 20, h, degrees, colorText); break;

case 5:

addText(svg, 10, h, degrees, colorText); break;

case 6:

addText(svg, 5, h, degrees, colorText); break;

case 7:

addText(svg, 0, h, degrees, colorText); break;

} }

Tale funzione si occupa di gestire tramite un costrutto switch la lunghezza in termini di caratteri dei numeri che indicano la temperatura tra un passaggio di stato e l’altro. L’idea di questa funzione è di gestire in maniera totalmente automatica il posizionamento di tali valori lungo l’asse delle ordinate, a seconda della lunghezza del numero in termini di caratteri.

Nel documento Sviluppo di un'applicazione ibrida per l'insegnamento del modello particelle nelle scuole secondarie di primo grado (pagine 51-58)