Benvenuti alla quarta lezione, nella seconda lezione avete disegnato lo schermo dell'APPContatti utilizzando l'Area Designer di App Inventor, per gestire l'inserimento ed il salvataggio di un contatto, come mostra l'immagine seguente:

Nella terza lezione avete  implementato la logica dell'APPContatti, utilizzando i blocchi di programmazione dell'Area Blocks di App Inventor, ottenendo il risutato seguente:

In questa lezione vedrete come eseguire l'APPContatti, utilizzando l'emulatore del computer oppure l'emulatore del cellulare.

Come eseguire l'APPContatti sul computer con l'Emulatore aiStarter
Per installare l'emulatore sull vostro computer cliccate sul link: scarica emulator e seguite i passi seguenti:

Posizionatevi sullo Step 1 e cliccate sul link che corrisponde al sistema operativo installato sul vostro computer, come mostra l'esempio.

Step 1. Install the App Inventor Setup Software

    Instructions for Mac OS X
    Instructions for Windows
    Instructions for GNU/Linux

Successivamente cliccate sul link: Download the installer per scaricare il file d'installazione.

Dopo il Download, eseguite il file d'istallazione, assicurandovi di essere collegati con un'utenza con diritti di amministrazione. Dopo l'avvio rispondete yes al messaggio seguente per completare l'installazione.

Per avviare l'emulatore, dovete lanciare il programma aiStarter, collegato all'icona seguente.

Successivamente per eseguire l'APPContatti, dovete selezionare i comandi, Connect, Emulator, come mostra l'immagine seguente:

Aspettate qualche minuto per permettere all'emulatore di caricare l'APP, dopodichè la potete testare.

Dopo aver testato l'APP sul vostro computer, chiudete l'emulatore cliccando sulla x in alto a destra, selezionate di nuovo sull'icona aiStarter e premete contemporaneamente i tasti ctrl c nella finestra di aiStarter.

Come eseguire l'APPContatti con un cellulare Android
Scaricate ed Installate sul cellulare l'APP MIT AI2 Companion, utilizzando l'APP Store del cellulare.

Per avviare l'emulatore sul celluare ed eseguire l'APP, assicuratevi che il cellulare sia collegato al WiFi, selezionate Connect, AI Companion, come mostra l'immagine seguente.

Questa operazione, permette di attivare la finestra Connect Companion, con il codice (numero di 6 cifre) oppure il QR Code da leggere per caricare l'APPContatti sul cellulare.

Lanciate l'APP MIT AI2 Companion sul cellulare, inserite il codice di 6 cifre e cliccate sul pulsante connect with code, altrimenti leggete il QRCODE fornito usando il pulsante scan QR code.

Attendete un attimo per poter testare l'APP direttamente sul vostro cellulare.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

Benvenuti alla seconda lezione, nella lezione precerdente avete visto il modello a cascata che descrive tutte le fasi che servono per progettare, implemetare e manutenere un Database.

Tra le fasi previste dal modello a cascata:

1.Analisi
2.Progettazione
3.Implemetazione
4.Validazione
5.Manutenzione

la progettazione è sicuramente quella più importante, perchè vengono prodotti tre artefatti indispensabili per l'implemetazione del Database con il linguaggio SQL:

1. Modello E-R (Schema concettuale)
2. Modello Relazionale (Schema logico)
3. Modello Fisico (Schema fisico).

La fase di progettazione è strutturata nel modo seguente:

Il Team di porgettazione parte dalle Specifiche funzionali fornite dall'Analista funzionale raccolte durante la fase di Analisi e produce tutti gli artefatti che servono per poter implemetare il Database.  

Il Modello E-R

Il Modello Entità-Relazione (E-R) è uno schema concettuale che rappresenta l’artefatto principale della fase di progettazione concettuale, descrive le Entità di un Database, le loro caratteristiche e le relazioni esistenti tra loro. 

Un’Entità è un gruppo omogeneo d’informazioni (libro, lettore, Cliente, Fornitore, …) che potenzialmente potrebbe diventare una Tabella del Database.

Una relazione è l’associazione che esiste tra due Entità, anche una relazione è una potenziale tabella, ma il suo ruolo è quello collegare tabelle diverse tra loro, ad esempio la relazione esistente tra un libro ed un lettore è quella che il lettore può prendere in prestito il libro.

Per disegnare un Modello Entità-Relazione (E-R) si usano i seguenti simboli, chiamati anche diagrammi e associazioni:

L’esempio seguente mostra il Modello/Diagramma E-R per creare un Database per la gestione di libri dati in prestito, con le seguenti specifiche funzionali:

Ad esempio il tipo di relazione che esiste tra un libro ed il suo autore è di uno a molti, perché un libro ha un solo autore, ma un autore può aver scritto più libri.

Invece il tipo di relazione che esiste tra una particolare edizione di un libro ed il suo codice isbn è di uno ad uno, perché il codice isbn di un libro è associato unicamente a quella edizione e non ad altre.

Di solito in un Diagramma E-R oltre ad indicare i tipi di relazioni tra Entità, bisogna espreimere anche la cardinalità.

La cardinalità è un modo più preciso di espreimere l'associazione tra due  Entità, per ogni Entità si può esprimere la cardinalità minima e quella massima nella forma (Min,Max).

Di seguito sono indicati i casi possibili:

(1,1) : obbligatoria, una sola volta

(1,N) : obbligatoria, almeno una volta

(0,1) : opzionale, una sola volta

(0,N) : opzionale, N volte

La   cardinalità   Minima   indica l’obbligatorietà dell’associazione, se è uguale a zero non è obbligatoria, se  è  uguale  o  maggiore   di   uno  è obbligatoria, quella Massima indica quante volte l’associazione con l’Entità corrispondente è possibile, vediamo alcuni esempi:

Le cardinalità Massime indicano che un libro può avere un solo codice_isbn e viceversa. Le cardinalità Minime indicano che  l’associazione è obbligatoria in entrambi i versi. Inoltre osservando le cadinalità massime si può capire il tipo di relazione, in questo caso è un tipo di relazione uno ad uno.

Le cardinalità Massime indicano che lo stesso libro può essere letto da lettori diversi e che lo stesso lettore può leggere libri diversi. La cardinalità Minima, uguale a zero, indica che l’associazione non è obbligatoria in entrambi i versi. In questo esempio il tipo di relazione è molti a molti.

Un libro può essere scritto da un solo autore,  un autore può scrivere più libri. In questo caso l’associazione è obbligatoria in entrambi i versi, perché entrambe le entità hanno la cardinalità Minima uguale ad uno. In questo esempio il tipo di relazione è  uno a molti.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Come sviluppare un Sito con Wordpress

Benvenuti alla terza lezione di APP Mania, nella lezione precedente avete visto i principali componenti dell'area Designer ed avete completato il desegno dello schermo dell'APPContatti,  adesso vedrete l'Area Blocks dov'è possibile implementare la logica per rendere l'applicazione interattiva.

L'Area Blocks è un vero e proprio ambiente di programmazione, qui è possibile implementare la logica dell'applicazione utlizzando un linguaggio visuale composto da blocchi che corrispondono alle istruzioni di un linguaggio di programmazione.

Quest'area è divisa in due parti, a destra c'è la parte Viewer, dove si aggiungono i blocchi che servono per programmare, a sinstra c'è la parte Blocks, dive sono raggrupati tutti i blocchi organizzati per tipo.

Con App Inventor l'applicazione assomiglia ad un puzzle, perché i programmi si scrivono con blocchi interconnessi, ciascuno con un significato diverso.

Per accedere all'Area Blocks, collegatevi ad App Inventor e cliccate sul bottone Blocks, dopo questa oprazione appare la maschera seguente:

I blocchi che servono per sviluppare un'applicazione con App Inventor sono raggruppati per tipi e li trovate nella sezione Built-in, nell'immagine seguente sono descritti tutti i tipi disponibili.

Oltre ai blocchi della sezione Built-in, ci sono anche blocchi associati ai componenti dello schermo, con questi blocchi è possibile modificare le loro proprietà oppure eseguire particolari azioni quando si verifica un evento, come ad esempio il click su un bottone.

Come implementare la logica dell'applicazione APPContatti

La nostra APP deve permettere le seguenti operazioni:

1. Inserimento dati nella maschera di input;
2. Visualizzazione del contatto inserito nella casella risultato, quando si clicca sul bottone Salva;
3. Pulizia dello schermo e posizionamento del cursore nella casella di testo nome, quando si clicca sul bottone Reset.

Per scrivere il programma che vi permette di implementare le operazioni richieste, servono i seguenti blocchi di programmazione:

1) Blocco Evento

Il blocco evento lo trovate cliccando sul nome del bottone corrispondente, basta selezionarlo con il mouse per aggiungerlo all'Area Blocks.

2) Blocco Get

In questo esempio il blocco get restituisce il valore alfanumerico Mario scritto nella casella di testo txt_nome. Il valore Text, indicato sulla destra del blocco, corrisponde alla proprietà Text della casella di testo corrispondente.

Il blocco get lo trovate cliccando sul nome della casella di testo corrispondente, basta selezionarlo con il mouse per aggiungerlo all'Area Blocks.

3) Blocco Set

Nell'esempio seguente viene assegnato alla casella di testo txt_nome il valore alfanumerico Mario:

Il blocco usato per indicare il valore alfanumerico da inserire, lo trovate nel tipo Text della sezione Built-in e corrisponde al blocco seguente:

Il blotcco set è importante soprattutto perché permette di modificare una proprietà qualunque del componente a cui è associato. In questo caso essendo indicata la proprietà Text, si assegna un valore alla casella di testo txt_nome. Usando le freccette presenti sulla destra del nome del componente e del nome della proprietà, si possono modificare componenti diversi e proprietà diverse, come mostrano i due esempi seguenti:

4) Blocco Join

Il blocco join lo trovate nel tipo Text della sezione Built-in.

Come implemetare la logica del bottone Salva

Dopo aver visto quali sono i blocchi da utilizzare per sviluppare la vostra APP, adesso potete procedere con l'implemetazione logica dei blocchi. 

Selezionate il componente but_salva, lo trovate nel pannello Blocks a sinistra dell'Area Blocks e cliccate sul blocco evento Click per aggiungerlo all'Area Blocks.

Successivamente selezionate la casella ti testo txt_risposta e scegliete il blocco set con la proprietà Text.

Trascinate il blocco set appena aggiunto, all'interno del blocco evento click.

Aggiungete un blocco join e predisponetelo in modo da poter concatenare fino a 9 valori alfanumerici, come mostra l'immagine seguente. Per aggiungere più valori alfanimerici al blocco join, dovete cliccare sull'asterisco blu e trascinare il blocco string nel blocco join.

Dopo aver aggiunto 9 blocchi string al blocco join, associatelo al blocco set txt_risultato.

L'obiettivo è quello di visualizzare, quando si clicca sul bottone salva, i valori inseriti nella maschera di input (contatto),  nella casella di testo txt_risultato, separando i valori con la virgola.

Per ottenre questo risultato, dovete concatenare tra loro tutte le caselle di testo, aggiungendo una virgola dopo ogno valore, come mostrano l'immagini seguenti.

Come implemetare la logica del bottone Reset

Il bottone Rest serve per pulire lo schermo e posizionare il cursore nella casella di testo txt_nome, per implementare la logica che serve per eseguire queste azioni eseguite i passaggi seguenti.

Selezionate il componente but_reset, lo trovate nel pannello Blocks a sinistra dell'Area Blocks e cliccate sul blocco evento Click per aggiungerlo all'Area Blocks.

Poi aggiungete al blocco evento Click, i seguenti blocchi get: txt_nome, txt_cognome, txt_cellulare, txt_mail, txt_skype e txt_risultato.

Ad ogni blocco get appena aggiunto, associate un valore alfanumerico vuoto, serve per pulire le caselle di testo.

Per concludere dovete aggiungere al blocco evento Click, il blocco di controllo RequestFocus che serve per spostare il cursore nella casella di testo txt_nome.

Il blocco di controllo RequestFocus lo trovate nel pannello Blocks a sinistra dell'Area Blocks, selezionando il componente txt_nome e corrisponde al blocco seguente.

L'immagine seguente mostra il blocco evento Click, associato al bottone but_reset, implemetato.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

In questa lezione trasformerete la cartella di lavoro di Excel in un'Agenda in cui annotare i vostri appuntamenti oppure le vostre attività.

Per iniziare aprite una nuova cartella di lavoro e salvatela subito con il nome agenda2016, così eviterete di perdere il lavoro che farete.

Dopo il salvataggio posizionatevi nella cella A1 e scrivete Gennaio, poi selezionate la cella B2, inserite la data 01/01/2016.

Posizionatevi con il mouse sullo spigolo inferiore destro della cella B2, quando il puntatore del mouse diventa una croce +, premete il pulsante sinistro del mouse e trascinatelo verso destra fino alla cella AF2, questa operazione vi permetterà di ottenere automaticamente tutti i giorni del mese di gennaio, come mostra l'immagine seguente.   

Adesso selezionate tutte le celle dalla B2 a quella AF2, per farlo velocemente con la tastiera, posizionatevi nella cella B2 e premete contemporaneamente i tasti ctrl shift e freccia a destra, altrimenti usate il mouse. Dopo aver selezionato tutte le celle, impostate la larghezza delle colonne al valore 20, cliccando sull'icona Formato della scheda Home, come mostra l'immagine seguente.

Mantenedo la selezione da B2 ad AF2 attiva, copiate tutte le date del mese di gennaio nella riga successiva, come nell'immagine seguente.
Per copiare, posizionate il puntatore del mouse sulla selezione, premere il tasto destro del mouse e cliccare sul comando copia, poi posizionatevi nella cella B3 e premete invio. 

Ora dovete trasformare le date inserite nella prima riga del foglio, nei corrispondenti nomi dei giorni della settimana. Per ottenere questo risultato selezionate di nuovo le celle da B2 ad AF2, rimanendo sulla selezione attiva, premete il pulsante destro del mouse e cliccate sul comando Formato celle..., come mostra l'immagine seguente.

Nella scheda Formato celle, cliccate sulla voce personalizzato e come tipo inserite gggg, confermate cliccando su OK, come avviene nell'immagine seguente.

Ripetendo le stesse operazioni precedenti, adesso dovete trasformare le date inserite nella seconda riga, nei progressivi numerici dei giorni corrispondenti. Per ottenre questo risultato, quando vi trovate nella scheda Formato celle, dovete inserire come tipo solo una g, come mostra l'immagine seguente.

Salvate!!!

Per aggiungere gli orari degli appuntamenti, posizionatevi nella cella A4 ed inserite 08:00, poi spostatevi nella cella A5 ed inserite 08:15. Successivamente selezionate le due celle A4 ed A5 e posizionatevi con il mouse sullo spigolo inferiore destro della cella A5, quando il puntatore del mouse diventa una croce +, premete il pulsante sinistro del mouse e trascinatelo verso il basso fino alla cella A52, dove dovrebbe apparire il valore corrispondente alle ore 20:00.

L'immagine seguente mostra il risultato dell'oprazione precedente.

Per creare gli spazi dove inserire le informazioni dell'Agenda, selezionate le celle da A4 ad A52, posizionatevi sulla scheda Home, cliccate sull'icona Formato, cliccate sul comando Altezza righe... ed inserite il valore 80.

Mantenendo la selezione, centrate sia orizzontalmente, sia verticalmente, come mostra l'immagine seguente.

Salvate!!!

Per completare il lavoro dovete formattare il foglio:

1. Selezionate la cella A1, scegliete come tipo carattere Andalus, grandezza 28 ed impostate l'altezza della riga a 50
2. Selezionate le celle da A1 ad AF1 ed impostate il colore desiderato
3. Selezionate le celle da A2 ad AF2 , scegliete come tipo carattere Andalus, grandezza 14 ed impostate il colore desiderato
4. Selezionate le celle da A3 ad AF3 , scegliete come tipo carattere Andalus, grandezza 14 ed impostate il colore desiderato
5. Impostate un colore anche per tutte le altre righe del foglio
6. Premete il tasto F5, come riferimento inserite B4:AF52 per selezionare l'area corrispondente ed impostate Testo a capo , come mostra l'immagine seguente:
   
7. Premete il tasto F5, come riferimento inserite A4:AF52 per selezionare l'area corrispondente ed impostate Tutti i bordi, come mostra l'immagine seguente:
   

Per rinominare il foglio, posizionatevi con il puntatore del mouse sull'etichetta in basso, dov'è scritto Foglio1, premete il tasto destro del mouse, cliccate sul comando rinomina e inserite il nome del mese, Gennaio, come mostra l'immmagine seguente.

Salvate!!!

Per aggiungere gli altri mesi, copiate il foglio appena creato e cambiate le date inserite negli intervalli B2:AF2 e B3:AF3.

Salvate e chiudete!!!

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

Nella lezione precedente abbiamo visto che cos'è l’HTML e come è strutturata una pagina Web, questo linguaggio non è importante solo perchè permette di trasmettere informazioni formattate attraverso Internet, ma è importante soprattutto perchè con esso nasce l'era del World Wide Web.

All'inizio era WEB 1.0,  puro e semplice HTML, dove le pagine Web erano una sorta di “vetrine” per aziende o imprese usate per trasmettere il loro Company Profile, eravamo nell'era dei Siti Web.

Successivamente diventò Web 2.0, pagine Web dinamiche ed interattive, create all'occorrenza combinando l'HTML con linguaggi di tipo backend, come PHP, Java e C#, eravamo passati all'era dei Siti, dei Portali e degli E-Commerce.

Oggi siamo nell'era del Web 3.0, dove l’HTML non è più il “protagonista principale”, siamo  nell’era dei Social media dove l'internauta non è più solo un visitatore di “vetrine”, ma è diventato l'attore principale del mondo Web.

Non essendo l’HTML un linguaggio di programmazione, per renderlo “dinamico” occorre integrarlo con un linguaggio di programmazione tipo PHP, grazie a Wordpress possiamo far vivere in "simbiosi" il linguaggio statico HTML con il linguaggio di programmazione PHP, ma prima di vedere come i due linguaggi coesistono, è importante capire che cosa sono i fogli di stile CSS.

Fogli di stile CSS
I fogli di stile CSS (Cascading Style Sheets), sono un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, le prime regole per delineare il CSS furono emanate nel 1996 dal W3C (World Wide Web Consortium).

Questo linguaggio permette tramite direttive di formattare le pagine e i suoi elementi sia di tipo testuali (es. colore, font, grandezza caratteri), che multimediali (es. Immagini, Video, etc.).

Queste regole di formattazione possono essere salvate in un file esterno, permettendo alle pagine Web di essere formattate direttamente senza dover ripetere il codice, creando un vero e proprio layout generale del sito.

La struttura di una regola CSS è formata da un selettore e dalle proprietà con il relativo valore ad esempio:

                                               p{ Color:red ; Font-Family:”Open Sans”; }

Il Selettore è l’elemento HTML che si vuole formattare, la proprietà e il tipo di formattazione che si vuole applicare che avrà il valore che si imposta.

In questo esempio tutti i tag p avranno il colore del testo rosso e il tipo di font Open Sans. Il selettore utilizzato nell'esempio viene chiamato Selettore di tipo, cioè seleziona il tipo di elemento HTML che si vuole formattare.

Esistono anche i Selettori di classe che rendono specifica la formattazione solo per gli elementi con quella specifica classe associata ad esempio:

Le classi si indicano nel foglio di stile indicando il nome preceduto da un punto e le proprietà con i valori indicate tra le parentesi graffe.

Un altro modo per impostare un selettore è tramite l’ID, un nome identificativo che si applica ad un solo elemento della pagina HTML (L’ID in informatica è un valore univoco che si dà ad un elemento o un tipo di dato).

Per impostare un selettore di tipo ID la sintassi è la seguente:

Nel CSS il nome dell’ID, a differenza della classe è preceduto dal cancelletto.

Esistono centinaia di proprietà del CSS che lavorano sui colori, sulla disposizione degli elementi o sulla forma. 

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• APP Mania