Vediamo oggi come creare un algoritmo per riconoscere gli angoli con Scratch.
Innanzitutto diamo le seguenti definizioni di angoli.
Un angolo è:
Retto: se è la metà di un angolo piatto e la cui misura dell’ampiezza in gradi è 90°.
Piatto: se la misura dell’ampiezza in gradi è 180°.
Giro: se la misura dell’ampiezza in gradi è 360°.
Acuto: se è un angolo la cui ampiezza è inferiore ad un angolo retto.
Ottuso: se è un angolo la cui ampiezza è superiore ad un angolo retto.
Detto ciò, seguiamo questo ragionamento:
Innanzitutto se inseriamo un valore minore di zero e maggiore di 360 diciamo che deve inserire un valore compreso tra 0 e 360.
Dopo controlliamo se l’angolo è uguale a 0 e allora è nullo; altrimenti controlliamo se è uguale a 90 e allora è un angolo retto; se falso controlliamo se è uguale a 180 e allora è un angolo piatto; altrimenti se è uguale a 360 è un angolo giro; se nessuna di queste opzioni è verificata il programma mi dice se l’angolo è acuto oppure ottuso.
Creiamo l’algoritmo per riconoscere gli angoli con Scratch
Dapprima scegliamo uno sprite e uno sfondo qualsiasi.
Poi realizziamo lo script come da figura sotto, seguendo il ragionamento fatto.
Si potrebbe anche fare in modo che l’algoritmo richieda di inserire l’angolo se si immette un valore minore di 0 o maggiore di 360.
Basta inserire un ciclo ripeti fino a quando
non ((angolo<0) || (angolo>360))
ovvero finché l’utente non immette un valore compreso tra 0 e 360.
Ecco alcune possibili soluzioni per riconoscere gli angoli con Scratch.
Chiaramente si possono proporre tante varianti, dite pure la vostra nei commenti sotto.
I tag semantici sono stati introdotti con l’HTML 5. Questo perché l’HTML si è evoluto sulla base del web semantico. I tag semantici come abbiamo già detto sono importanti per la SEO.
Analizziamo innanzitutto quali vantaggi ci sono nell’utilizzarli:
Innanzitutto la leggibilità del codice da parte dei motori di ricerca. I tag semantici hanno lo scopo di specificare ai motori di ricerca di cosa si sta parlando;
Miglioramento della leggibilità del codice durante la fase di progettazione, da parte del web-master;
Miglioramento della struttura della pagina web stessa, sia in fase di creazione che in fase di modifica.
Minore possibilità di fare errori nella struttura della pagina.
Vediamo quindi quali tag semantici si usano per strutturare una pagina web.
Elenchiamo alcuni tra i tag semantici più utilizzati
Il tag semantico header
Il tag <header>…</header> è utilizzato, come facilmente intuibile, per inserire all’interno elementi che si trovano in alto nella pagina web.
In genere fra i due tag si includono, il logo e/o una frase con i titoli h1, h2 e/o un’immagine, ecc…
Il tag semantico footer
Il tag <footer>…<footer> è utilizzato per inserire elementi in fondo alla pagina. Ad esempio si inserisce il copyright, l’autore del sito web, ecc…
Il tag semantico nav
Il tag <nav>…<nav> specifica che in quell’area ci sono gli strumenti di navigazione del sito, ovvero il menù. In sostanza in quell’area si collocano gli elementi del menù.
I tag semantici article
Il tag <article>…</article> è utilizzato per definire ad esempio un articolo di un blog o di una rivista. All’interno ci possono essere più sezioni.
I tag semantici section
Il tag section <section>…<section> è utilizzato ad esempio per specificare una sezione nella pagina web per un raggruppamento tematico degli articoli. Ad esempio un capitolo può essere suddiviso in più section.
Il tag semantico aside
Il tag <aside>…</aside> specifica gli elementi che sono nella barra laterale, cioè la sidebar.
Esempio di struttura con i tag semantici
Adesso sviluppiamo una struttura semplificata di un sito utilizzando i tag semantici. Consideriamo uno schema come questo:
Inserendo le varie parti si ottiene quindi questo codice:
<!DOCTYPE html>
<html lang="it">
<head><title>Coding Creativo</title>
</head>
<body>
<header>
<h1>Coding Creativo</h1>
<h2>Fare coding divertendosi</h2>
</header>
<nav>
<ul><li><a href="https://www.codingcreativo.it/scratch/">Scratch</a><li>
<li><a href="https://www.codingcreativo.it/algobuild/">Algobuild</a></li>
<li><a href="https://www.codingcreativo.it/siti-web/html/">HTML</a>
</li>
<li><a href="https://www.codingcreativo.it/linguaggio-c/">C</a></li>
</ul>
</nav>
<article>
<section>
<h2><a name="scratch">Scratch</a></h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding.
<br>L'interfaccia grafica è molto intuitiva e semplice da usare.
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi su scratch.
...
</p>
</section>
<section>
<h2><a name="algobuild">Algobuild</a></h2>
<p>Algobuild è un programma molto utile per disegnare ed eseguire gli algoritmi.
<br>Con algobuild è possibile utilizzare il diagramma a blocchi.
<br>Sul sito
<a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi realizzati con algobuild.</p>
</p>
</section>
</article>
<aside>
...
</aside>
<footer>
<p>Creato da Coding creativo</p>
</footer>
</body></html>
A conclusione di quanto detto, cerchiamo di utilizzare questi tag per indirizzarci verso un web semantico.
Adesso diventa indispensabile affrontare div e i fogli di stile per rendere il sito web più gradevole.
Realizziamo alcuni algoritmi di selezione per confrontare due numeri.
Esempio 1 di algoritmo di selezione per confrontare due numeri
Dati due numeri naturali X e Y, aggiungere al più piccolo la somma dei due numeri, se uguali visualizzare semplicemente che i numeri sono uguali.
Per realizzare l’algoritmo servono le seguenti forme:
Ellisseper l’inizio e per la fine;
Parallelogramma per inserire l’input, ovvero in questo caso i due numeri X e Y e per visualizzare in output il risultato;
Rettangoloper compiere le operazioni;
Romboper effettuare un test che può essere vero o falso. In questo caso si chiede: X è minore di Y? E nuovamente si usa per chiedere X è maggiore di Y?
Quindi prendo in input X e Y e dopo faccio la somma dei due numeri.
Poi chiedo se X è minore di Y, se vero aggiungo a X la somma; se falso controllo se Y è minore e se è vero aggiungo a Y la somma; altrimenti vuol dire che i numeri sono uguali.
Ecco il programma realizzato con i diagrammi a blocchi tramite il software Algobuild.
Esempio 2 di algoritmo di selezione per confrontare due numeri
Dati 2 numeri naturali X e Y, aggiungere al più piccolo la quantità necessaria per essere uguale al più grande, se uguali visualizzare semplicemente che i numeri sono uguali.
Per realizzare l’algoritmo servono dunque le seguenti forme:
Ellisseper l’inizio e per la fine;
Parallelogramma per inserire l’input, ovvero in questo caso i due numeri X e Y e per visualizzare in output il risultato;
Romboper effettuare un test che può essere vero o falso. In questo caso si chiede: X è minore di Y? E nuovamente si usa per chiedere X è maggiore di Y?
Anche qui prendo in input X e Y e dopo chiedo se X è minore di Y, se vero aggiungo a X la differenza tra Y e X; se falso controllo se Y è minore e se è vero aggiungo a Y la la differenza tra X e Y, altrimenti vuol dire che i numeri sono uguali.
Ecco il flow chart realizzato con Algobuild.
Esempio 3 di algoritmi di selezione per confrontare due numeri
Dati 2 numeri naturali X e Y, aggiungere 100 al più grande, se uguali visualizzare semplicemente che i numeri sono uguali.
Per realizzare l’algoritmo servono quindi le seguenti forme:
Ellisseper l’inizio e per la fine;
Parallelogramma per inserire l’input, ovvero in questo caso i due numeri X e Y e per visualizzare in output il risultato;
Romboper effettuare un test che può essere vero o falso. In questo caso si chiede: X è minore di Y? E nuovamente si usa per chiedere X è maggiore di Y?
Anche qui prendo in input X e Y e dopo chiedo se X è minore di Y, se vero aggiungo a Y il valore 100; se falso controllo se Y è minore e se è vero aggiungo a X il valore 100; altrimenti i numeri sono uguali.
Ecco il diagramma di flusso realizzato con Algobuild.
Questi sono solo alcuni esempi di algoritmi di selezione con il confronto tra due numeri, presto ne metterò degli altri.
Affrontiamo altri algoritmi di selezione sugli angoli.
Esempio 1 di algoritmo di selezione sugli angoli
Stabilire se un angolo è acuto, ottuso o retto.
Partiamo dando alcune semplici definizioni.
Un angolo è:
Retto: Un angolo retto è un angolo che è la metà di un angolo piatto e la cui misura dell’ampiezza in gradi è 90°.
Acuto: Un angolo acuto è un angolo la cui ampiezza è inferiore ad un angolo retto.
Ottuso: Un angolo ottuso è un angolo la cui ampiezza è superiore ad un angolo retto.
Detto ciò quindi diventa molto semplice risolvere l’algoritmo.
Infatti basterà controllare dapprima se l’angolo è maggiore di 90 (attenzione potrei anche partire con minore o uguale, non c’è alcuna differenza nel ragionamento logico) e quindi se è vero l’angolo è ottuso; altrimenti controllare se è uguale a 90. Se ciò è vero allora l’angolo è retto, se invece è falso l’angolo per esclusione è acuto.
N.B. In input chiaramente non va inserito il simbolo del grado °.
Per realizzare l’algoritmo servono dunque le seguenti forme:
Ellisseper l’inizio e per la fine;
Parallelogramma per inserire l’input, ovvero in questo caso l’angolo e per visualizzare in output il tipo di angolo;
Romboper effettuare un test che può essere vero o falso. In questo caso si chiede: angolo è maggiore di 90? Se il test è vero l’angolo è ottuso, altrimenti si controlla se l’angolo è retto e se vero si visualizza il risultato; se falso l’angolo è acuto.
Ecco il diagramma a blocchi che risolve l’algoritmo, realizzato con Algobuild.
Ricordiamo che il confronto si effettua con il doppio uguale.
Facciamo altri esempi di algoritmi di selezione sugli angoli.
Esempio 2 di algoritmo di selezione sugli angoli
Stabilire se un angolo è retto, piatto, giro o qualsiasi.
Diamo le definizioni di angolo retto, piatto e giro.
Un angolo è:
Retto: Un angolo retto è un angolo che è la metà di un angolo piatto e la cui misura dell’ampiezza in gradi è 90°.
Piatto: Un angolo piatto è un angolo la cui misura dell’ampiezza in gradi è 180°.
Giro: Un angolo giro è un angolo la cui misura dell’ampiezza in gradi è 360°.
Per realizzare l’algoritmo servono quindi le seguenti forme:
Ellisseper l’inizio e per la fine;
Parallelogramma per inserire l’input, ovvero in questo caso l’angolo e per visualizzare in output il tipo di angolo;
Romboper effettuare un test che può essere vero o falso. In questo caso si chiede: angolo è uguale a 90? Se il test è vero l’angolo è retto, altrimenti si controlla se l’angolo è piatto e se vero si visualizza il risultato; se falso si controlla se l’angolo è giro. Se nessuna di queste condizioni è verificata allora è un angolo qualsiasi.
Ecco il diagramma di flusso sviluppato con Algobuild, ma si può sviluppare anche semplicemente su un foglio.
Vediamo una serie di esempi con gli algoritmi di selezione, cioè di algoritmi che utilizzano le istruzioni condizionali come la funzione if … else.
Esempio 1 di algoritmo di selezione
In un supermercato c’è la promozione 3×2. Se si acquistano 3 pezzi se ne pagano solo 2. La promozione è cumulativa, ovvero se si acquistano 6 pezzi se ne pagano 4 e così via. Per quantità inferiori a 3 il prezzo rimane invariato.
Per realizzare questo algoritmo di selezione servono quindi le seguenti forme:
Ellisseper l’inizio e per la fine;
Parallelogramma per inserire l’input, ovvero in questo caso il prezzo e la quantità (q) e per visualizzare in output il prezzo finale da pagare;
Rettangoloper effettuare le operazioni;
Romboper effettuare un test che può essere vero o falso. In questo caso si chiede: q è maggiore o uguale a 3? Se il test è vero si applica lo sconto, altrimenti si pagano i prodotti a prezzo intero.
Quindi chiedo in input il prezzo e la quantità che per brevità chiamo q.
Dopo controllo se q è maggiore o uguale a 3 (in alternativa avrei anche potuto mettere q>2). Se è falso allora calcolo il totale da pagare senza sconto memorizzandolo nella variabile T; se invece è vero calcolo la divisione arrotondata per difetto di q/3 ovvero utilizzo la funzione floor() di Algobuild, che è comune a molti linguaggi di programmazione. Il risultato di questa operazione non è altro che la quantità che devo sottrarre alla quantità richiesta in input.
Ecco il diagramma di flusso completo dell’algoritmo di selezione, che utilizza l’istruzione condizionale if…else, realizzato con Algobuild.
Facciamo altri esempi di algoritmi di selezione con le istruzioni condizionali.
Esempio 2 di algoritmo di selezione
Data una temperatura T, visualizzare se si tratta di una temperatura: “sotto lo zero”, “uguale a zero” o “sopra lo zero”. Visualizzare il messaggio in output.
Per realizzare questo algoritmo servono dunque le seguenti forme:
Ellisseper l’inizio e per la fine;
Parallelogramma per inserire l’input, ovvero in questo caso la temperatura (T) e per visualizzare in output il messaggio;
Romboper effettuare un test che può essere vero o falso. In questo caso si chiede: T è maggiore di 0? Se il test è vero si visualizza “La temperatura è sopra lo zero“; altrimenti si effettua un ulteriore controllo chiedendo: T è uguale a 0? Se vero si visualizza il messaggio “La temperatura è uguale a zero“; altrimenti si visualizza il messaggio; “La temperatura è sotto lo zero“.
Ecco quindi l’esempio di algoritmo che utilizza più istruzioni condizionali.
Ricordiamo che l’operatore di confronto si indica con il doppio uguale.
