Oggi vedremo come risolvere i giochi matematici che si svolgono alla Bocconi con Scratch. Proponiamo un gioco matematico della Bocconi:
Carla prende un numero (intero positivo) di due cifre, lo moltiplica per 4 e poi sottrae 3 al risultato così ottenuto. Magia! Il numero che Carla alla fine trova si scrive con le stesse cifre del numero di partenza, ma in ordine inverso. Qual era il numero di partenza?
Bene, proveremo a risolverlo con Scratch, presentando prima la risoluzione matematica.
Giochi matematici Bocconi – risoluzione
Studiamo la risoluzione del quesito.
Il numero cercato ha due cifre, le chiamo xy.
Dunque avremo che:
xy*4-3=yx
La prima cifra e la seconda cifra possono variare da 1 a 9, ma ci sono delle considerazioni da fare.
Possiamo infatti sicuramente tralasciare lo zero per la prima cifra perché abbiamo detto che il numero deve avere due cifre. Possiamo anche tralasciare lo zero per la seconda cifra, perché ovviamente il numero letto al contrario altrimenti inizierebbe per zero.
Quindi il numero da cui partire sarà 11.
Siccome non deve essere un numero a tre cifre e la differenza (-3) che è applicata al risultato del prodotto non raggiunge la cifra per cui il numero viene moltiplicato, possiamo concludere che il numero maggiore che possiamo tenere in considerazione è 100/4=25.
Quindi per queste considerazioni il numero cercato è compreso tra 11 e 25.
Se procediamo per tentativi, escludendo chiaramente i numeri 11, 22 e 20, otterremo il nostro numero che è 16 che con le cifre invertite corrisponde a 61.
Risoluzione con un algoritmo in Scratch
E’ possibile costruire una risoluzione di questo gioco matematico proposto al test della Bocconi con Scratch.
Il numero è composto da due cifre x e y.
Per il ragionamento fatto sopra il numero è compreso tra 11 e 25, quindi la prima cifra può essere o 1 oppure 2.
La seconda cifra invece la facciamo variare da 1 a 9 per coprire tutti i numeri da 11 a 25.
Quindi realizziamo due cicli uno che si fermerà quando la prima cifra raggiungerà 2 e l’altro che si fermerà quando la seconda cifra raggiungerà 9.
In pratica è come avere i due indici i e j per chi è abituato a lavorare con i linguaggi di programmazione.
Quindi il programma prima prende il numero 11 e vedrà se vale la condizione per cui xy*4-3=yx, poi il numero 12 ecc…
Si fermerà quando troverà la soluzione.
Realizziamo un piccolo giochino con Scratch che chiederà all’utente di inserire la soluzione, la confronterà con il numero trovato e dirà se la soluzione è corretta oppure no.
Ho utilizzato due sfondi, uno semplice ed uno con il testo del problema. Così, dopo aver fatto dire due paroline al gattino, cambiamo sfondo, così come mostrato in figura sotto.
Quindi con Scratch è possibile risolvere anche i giochi matematici proposti alla Bocconi.
Il linguaggio HTML permette di creare le strutture delle pagine web. Chiaramente da solo non basta per creare un sito web, infatti servirà conoscere anche i CSS, JavaScript e se si desidera sviluppare delle applicazioni lato backend anche il PHP.
Infatti l’HTML non è un linguaggio di programmazione in quanto mancano i costrutti di selezione e quelli iterativi.
Il linguaggio HTML – quando nasce
Questo linguaggio è stato sviluppato da Tim Berners Lee verso la fine degli anni ’80, ma ebbe la sua piena diffusione negli anni ’90, quando si diffuse un utilizzo commerciale del web. Rimandiamo al link su Wikipedia per un maggior approfondimento: Tim Berners Lee.
HTML sta per HyperText Markup Language, ovvero tradotto letteralmente vuol dire linguaggio di marcatori per ipertesti. Gli ipertesti sono le pagine web che sono fruibili non sequenzialmente ma attraverso i link che sono contenuti in esse. Ed è questa la grande potenzialità degli ipertesti.
Linguaggio a marcatori vuol dire che è un linguaggio che fa uso di tag per descrivere i dati, andando avanti nella guida vi spiegherò come si utilizzano e quali sono.
Il linguaggio HTML non è l’unico linguaggio di markup, ci sono altri linguaggi come ad esempio l’XML, utileper creare le app su Android e non solo, infatti la potenzialità dell’XML assieme ad altri linguaggi come ad esempio l’RDF permette di proiettarci verso un web semantico.
Perché studiare HTML e CSS, dato che oggi ci sono tanti CMS gratuiti? Anche se oggi ci sono tanti CMS gratuiti che consentono di creare siti web, tante volte bisogna comunque mettere mano al codice e intervenire su vari punti se si vogliono ottenere i risultati sperati. Inoltre non sempre è conveniente utilizzare dei CMS, tutto dipende da cosa si vuole realizzare! Inoltre spesso non vengono incontro alle nostre esigenze e spesso ci troveremo a divertirci nella scrittura di codice puro, senza il loro utilizzo!
Struttura di un file in linguaggio HTML
Iniziamo dunque a creare la nostra prima pagina web, presentando i tag necessari per la struttura di base di una pagina web.
Un file scritto in linguaggio HTML presenta una struttura di questo tipo:
<!DOCTYPE html>
<html lang=”it”>
<head><title> Titolo della pagina </title></head>
<body>
Corpo della pagina
</body>
</html>
Questa è la struttura base della pagina HTML che si apre con il il tag <html> e si chiude con il tag </html>.
In genere è buona norma inserire nel tag html la proprietà lang ed impostarla con la lingua che si usa per lo sviluppo del sito web.
Ad esempio, nel mio caso ho inserito: <html lang=”it”>. Per la versione in inglese del sito potrei utilizzare invece <html lang=”en”>.
Avete sicuramente notato che sopra il tag html c’è la scritta <!DOCTYPE html>. Questa dicitura non è fondamentale, ma serve al browser a capire di che tipo di documento si tratta, in questo caso proprio di un file html.
Potete sicuramente esservi imbattuti in altre diciture inerenti il doctype, io vi ho illustrato la più recente che si riferisce all’HTML 5, ovvero l’ultima versione del linguaggio fino ad ora.
Le sezioni principali del documento html sono dunque due: la testa (head) e il corpo (body).
Tag head
Continuiamo a parlare dei tag del linguaggio HTML e dunque del tag head che si posiziona dopo il tag html. All’interno della sezione head va il tag title ma più avanti vedremo che in questa sezione si inseriranno anche i collegamenti ai fogli di stile, i meta tag, ecc…
Tag title
Il tag title, in linguaggio html, serve ad inserire il titolo della pagina ed è un tag importantissimo per poter indicizzare un sito web. Infatti, se andiamo nei motori di ricerca compare proprio la dicitura del titolo.
Ad esempio se inserisco su google la parola chiave: frazioni con scratch, mi compaiono subito alcuni risultati.
Come potete notare l’articolo di coding creativo, sebbene sia stato creato solo 4 giorni fa, compare più in alto degli altri.
Title e SEO
Il merito è dovuto ad alcune tecniche SEO, che vi spiegherò più avanti e una di queste (ce ne sono molte altre, credetemi!) consiste proprio nel costruire un titolo ad hoc.
Notate adesso il testo che compare su Google ovvero ‘Frazioni con scratch, frazioni proprie, improprie e apparenti con scratch ‘. É proprio il testo contenuto nel tag title. Vi allego infatti cosa ho inserito nel codice: <title>Frazioni con scratch, frazioni proprie, improprie e apparenti con scratch</title>
Proprio quello che visualizzo su Google!
Ci sono alcune regole da seguire per il tag title, una di queste è la lunghezza. Non bisogna eccedere i 70 caratteri, in quanto Google taglierebbe i caratteri eccedenti. In realtà in questo caso specifico non è successo anche se i caratteri (compresi gli spazi vuoti) sono 73.
Il mio consiglio comunque è, se possibile, cercare di mantenersi tra i 60-70 caratteri circa.
Title e social
Il tag title, nel linguaggio HTML, è importantissimo anche per la condivisione sui social.
Infatti, se vedete la figura in basso, quando si condivide un articolo si legge il titolo della pagina sotto la figura.
Quindi occhio a questo tag! È importantissimo saper impostare le parole chiavi giuste per essere trovati nei motori di ricerca.
Un’altra accortezza è quella di impostare un title diverso per ciascuna pagina del sito web. Ad esempio se il sito è composto da 5 pagine utilizzate per ciascuna un title diverso. Occhio perché se non lo fate l’algoritmo di Google se ne accorgerà e vi penalizzerà.
Comunque più avanti vi dirò quali strumenti utilizzare per vedere se avete commesso degli errori nei tag title del vostro sito e come correggerli.
Presto creeremo un esempio di pagina web utilizzando il linguaggio HTML ed i CSS.
In questo articolo parleremo di come creare la struttura di un sito web. Infatti, dopo aver registrato il dominio e assicurato il nome del logo, possiamo procedere alla realizzazione della struttura del sito web.
Ma come fare per crearla? A chi possiamo affidare il lavoro? Puoi fare da solo la struttura?
Se non hai abbastanza soldi da investire per affidarti ad un professionista sappi che oggi esistono vari strumenti per creare un sito web da soli, ma ci vuole tempo e pazienza.
Se ne hai, ti spiegherò come utilizzare uno strumento utile e potente come WordPress, ma ti farò vedere anche come creare la struttura di un sito web da zero, con qualche linea di codice HTML, CSS, JavaScript e PHP.
Vediamo, dunque, in dettaglio quali sono i passi da seguire.
Primo passo
Come creare la struttura di un sito web – I contenuti
Innanzitutto occorre organizzare i contenuti del sito web e disegnare uno storyboard funzionale.
Lo storyboard non è altro che lo schizzo o disegno-progetto di come intendi strutturare il tuo sito web.
Tranquillo, per farlo puoi semplicemente prendere carta e penna oppure se ti va ti puoi dilettare utilizzando tool online gratuiti come Canva.
Canva ti offre una serie di immagini da poter utilizzare gratis, oppure ti permette di caricarne delle tue. Offre anche delle immagini a pagamento che non sei obbligato ad acquistare.
In questo modo potrai disegnare il tuo accattivante storyboard in poco tempo e discuterne magari con qualcuno che condivide il tuo progetto per apportare delle migliorie e/o aggiunte.
Dopo queste premesse scegli con cura il colore per creare il tuo sito web, sicuramente in questo modo sarai in grado di comunicare meglio quello che vorrai!
Contemporaneamente alla creazione del tuo storyboard, per preparare la struttura di un sito web, segui anche la seconda parte del tutorial. Impareremo a scegliere i colori giusti e i font per la creazione di un sito web.
In questa lezione studieremo alcune funzioni della libreria string.h in C ed in particolare le funzioni strcmp(), strcpy(), strcat(), strncmp(), strncpy(), strncat().
Nella lezione precedente abbiamo visto degli esempi sulla concatenazione delle stringhe senza far uso delle funzioni di libreria.
La prima funzione che vedremo è la funzione strcmp(stringa1, stringa2).
Questa funzione restituirà zero se le stringhe sono identiche, altrimenti darà un numero positivo se la prima stringa è maggiore della seconda, altrimenti restituirà un valore negativo.
Affronteremo dunque un esempio dove confronteremo due stringhe inserite nel programma.
Le stringhe prese in esame, solo a scopo dimostrativo, sono ‘Coding creativo’ e ‘www.codingcreativo.it’.
Non hanno lunghezza uguale ma chiaramente la seconda stringa è più lunga della prima.
Ecco quindi il codice completo utilizzando strcmp della libreria string.h in C:
#include<stdio.h>
#include <string.h>
int main() {
char coding[40]="Coding creativo ";
char sito[40]="www.codingcreativo.it";
int x;
if ((x=strcmp(coding,sito))==0)
printf("sono uguali");
else if(x>0)
printf("la prima e' maggiore della prima");
else
printf("la seconda e' maggiore della prima");
return 0;
}
L’esempio sopra mi restituirà un numero negativo, quindi visualizzerà: ‘la seconda è maggiore della prima’. La relazione d’ordine tra le stringhe è definita chiaramente dalla relazione d’ordine della codifica ASCII dei caratteri che la compongono:
La funzione strncmp(stringa1,stringa2,n); confronta invece solo i primi n caratteri.
Questa funzione si comporta come la strcmp.
Esempio sulla funzione strncmp
Ecco dunque un semplice esempio d’uso della funzione strncmp della libreria string.h in C:
#include<stdio.h>
#include <string.h>
int main() {
char coding[40]="Coding creativo ";
char sito[40]="Coding";
int x;
if ((x=strncmp(coding,sito,6))==0)
printf("sono uguali");
else if(x>0)
printf("la prima e' maggiore");
else
printf("la seconda e' maggiore");
return 0;
}
In questo caso viene restituito zero perché confronta solo i primi 6 caratteri delle due stringhe che sono uguali. Quindi verrà visualizzato in output il messaggio: ‘sono uguali’.
In questa lezione abbiamo visto un esempio di applicazione di string.h e delle sue funzioni, nelle prossime lezione parleremo ancora di questa libreria.
L’array coding dovrà contenere anche la seconda stringa che andrò ad aggiungere alla fine. Quindi la sua dimensione sarà prima stringa + seconda stringa + carattere terminatore. La prima stringa ha lunghezza 39, la seconda ha lunghezza 40 + \0. Quindi in totale dichiariamo char coding di 80 caratteri.
Dunque procediamo alla concatenazione.
Utilizzo un ciclo while che scorre l’array sito e termina quando incontra il carattere terminatore. A ogni nuova iterazione il valore della variabile i viene incrementato di 1. Quindi aggiunge ad uno ad uno ciascun carattere dell’array sito dopo il carattere terminatore dell’array coding. Infine, al termine aggiunge \0.
int j=0; while(sito[j]!=’\0′) coding[j+39]=sito[j++]; coding[j+39]=’\0′;
Sebbene questa notazione è più semplice sarebbe da preferire la notazione con il for in quanto ha prestazioni migliori.
for(j=0; (coding[j+39]=sito[j])!=’\0′; j++) ;
Questa infatti è una notazione che in linguaggio C viene utilizzata molto spesso.
Allego il listato completo del programma per concatenare due stringhe in C.
#include<stdio.h>
int main() {
int j;
char coding[79]="fare coding divertendosi e' possibile, ";
char sito[42]="troverete esempi sul sito coding creativo";
for(j=0; (coding[j+39]=sito[j])!='\0'; j++)
;
printf("%s",coding);
return 0;
}
Altro esempio di concatenazione tra due stringhe in C
Faccio un altro esempio di concatenazione, ma questa volta la seconda stringa la facciamo inserire da tastiera.
Quindi ad esempio pensiamo di prendere una stringa nome e di unirla alla stringa saluto.
char saluto[27]=”Ciao, mi chiamo “;
All’array nome assegniamo ad esempio un massimo di 11 caratteri, ipotizzando che un nome di una persona in genere non sia così lungo, chiaramente impostate voi in base alle vostre esigenze.
Dunque il nome lo facciamo inserire da tastiera ad esempio con quest’istruzione:
printf(“inserisci il nome: “); scanf(“%s”, nome);
L’istruzione scanf inserirà la stringa inserita dall’utente nell’array nome.
Non conosciamo quanti caratteri esattamente ha la stringa nome, abbiamo solo impostato il limite a 11.
Adesso dobbiamo scorrere tutto l’array saluto fino al carattere terminatore:
int i=0; while(saluto[i]!=’\0′) i++;
in modo analogo si poteva utilizzare il ciclo for
for(i=0; (saluto[i])!=’\0′; i++)
;
Quando il ciclo sarà terminato i conterrà l’indice dell’elemento del vettore dove si trova il carattere terminatore.
Adesso dobbiamo aggiungere la stringa nome e per farlo utilizziamo questo ciclo:
int j=0; while(nome[j]!=’\0′) saluto[i++]=nome[j++]; saluto[i]=’\0′;
In modo analogo si poteva utilizzare il ciclo for:
for(j=0; (saluto[i]=nome[j])!=’\0′; i++, j++);
;
L’indice i scorre saluto, l’indice j scorre nome a partire dalla sua prima posizione fino al carattere terminatore.
Alla prima iterazione il carattere \0 della stringa saluto viene sostituito dal primo carattere della stringa nome e successivamente vengono aggiunti tutti gli altri caratteri. Alla fine viene aggiunto il carattere \0.
Allego sotto il listato completo del programma che concatena due stringhe in C
int main() {
int i,j;
char saluto[27]="Ciao, mi chiamo ";
char nome[11];
printf("inserisci il nome: ");
scanf("%s", nome);
for(i=0; (saluto[i])!='\0'; i++)
;
for(j=0; (saluto[i]=nome[j])!='\0'; i++, j++);
;
printf("%s",saluto);
return 0;
}
Libreria string.h
A questo punto vi posso presentare la funzione di libreria che si occupa di concatenare due stringhe in C.
Ebbene si, esistono delle funzioni che copiano o concatenano due stringhe in C, ma riuscire a farlo senza la funzione è importante per affinare il ragionamento e capire maggiormente come funzionano gli array.
La funzione della libreria string.h che si occupa di copiare una stringa in un’altra è:
strcpy (stringa1, stringa2); In questo caso copierà la stringa2 su stringa 1.
La funzione che si occupa di copiare i primi n caratteri di una stringa in un’altra è:
strncpy (stringa1, stringa2, n); In questo caso copierà n caratteri di stringa2 in stringa1.
La funzione che permette di concatenare due stringhe è:
strcat (stringa1, stringa2);
La funzione che consente di confrontare due stringhe è:
strcmp (stringa1, stringa2); In questo caso confronta stringa1 con stringa2, se sono uguali viene restituito zero, se stringa1 è maggiore di stringa2 viene restituito un valore positivo, altrimenti viene restituito un valore negativo.
Seguitemi nel prossimo articolo vi darò alcuni esempi di come utilizzare le funzioni appena elencate.
