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

Benvenuti alla seconda lezione di APP Mania, dopo aver visto come si crea un nuovo progetto con App Inventor, in questa lezione imparerete ad usare i principali componenti dell'area Designer.

Per iniziare dovete collegarvi al link seguente: https://ai2.appinventor.mit.edu, se durante la lezione precedente avete già creato il nuovo progetto APPContatti, dovreste già trovarvi nell'area di Designer, altrimenti dovete creare un nuovo progetto cliccando sul bottone Start new project, in alto a sinistra ed inserire il nome del nuovo progetto "APPContatti". 

Area Designer
L'area di Designer è composta da 4 parti fondamentali: Palette, Viewer, Components e Proprties. 

Nella parte Palette trovate tutti i componenti che servono per disegnare l'App Android, i componenti, in base alla loro funzionalità sono organizzati in cartelle diverse, i componenti principali li trovate nella cartella User Interface.

Lo schermo lo trovate nella parte Viewer, qui dovete inserire i componenti che servono, trascinandoli con il mouse. Attenzione i componenti trascinati nello schermo verranno posizionati in modo verticale, per disposrli diversamente dovete usare i Layout. 

Tutti i componenti inseriti sullo schermo li troverete indicati nella parte Components, da qui li potete selezionare, rinominare e cancellare.

Nella parte Properties, potete assegnare le proprietà del componente selezionato.

L'immagine seguente descrive le parti principali dell'area di Designer di App Inventor.

Come creare la maschera di input
Per cominciare disegnarete la maschera di input per l'inserimento del contatto, utilizzando tre tipi di componenti: Label (per indicare in nomi dei campi da inserire), TextBox (caselle di testo in cui scrivere i dati) e HorizontalArrangement (Layout per disporre i componenti in modo orizzontale).

I primi due componenti sono nella cartella User Interface, il terzo è nella cartella Layout.

Per iniziare a disegnare la maschera di input procedete nel modo seguente:

1. Trascinate una Label sullo schermo e impostate la proprietà Text con il valore Contattto;
2. Aprite la cartella Layout e trascinate sullo schermo 5 componenti di tipo HorizontalArrangement;
3. Per utilizzare tutta la larghezza dell schermo, Impostate la proprietà Width di tutti i componenti HorizontalArrangement e di tutte le TextBox al valore Fill parent, come mostra l'immagine seguente:
   
4. Trascinte in ogni HorizontalArrangement una Label ed una TextBox, come mostra l'immagine seguente:
   
5. Impostate la proprietà Width di tutte le Label al valore di 80 pixels, come mostra l'immagine seguente:
   
6. Infine, assegnate alle Label i valori corrispondenti (Nome, Cognome, Cellulare, E-Mail, Skype), utilizzando la proprietà Text di ciascuna Label.

Alla fine l'aspetto dello schermo dovrebbe essere il seguente:

Per completare la maschera di input, dovete assegnare un nome ad ogni TextBox inserita nello schermo. Questa operazione è molto semplice, basta selezionare la TextBox da rinominare in Components, cliccare sul bottone Rename ed inserire il nome che si vuole dare al componente, come mostra l'immagine seguente:

I nomi che dovete assegnare ai componenti sono i seguenti:

1. TexBox (Nome) = txt_nome;
2. TextBox (Cognome) = txt_cognome;
3. TetxtBox (Cellulare) = txt_cellulare;
4. TextBox (E-Mail) = txt_mail;
5. TextBox (Skype) = txt_skype.

Come rendere l'APPContatti interattiva
Per rendere l'applicazione interattiva dovete inserire due Button di controllo, Salva e Reset ed una TextBox multilinea, dove visualizzare il contattto inserito.

Il Bottone Salva verrà usato per visualizzare nell'area di output il contatto inserito nella maschera di input.

Il Bottone Reset verrà usato per pulire lo schermo e permettere l'inserimento di un nuovo contatto.

Per posizionare i due Bottoni in posizione orizzontale, dovete prima aggiungere allo schermo un Layout di tipo HorizontalArrangement e poi dovete trascinare all'interno del componente i due Button. Ai due Button assegnate rispettivamente i nomi: but_salva e but_reset.

Per creare l'area di output trascinate nello schermo prima una Label e poi una TextBox e procedete nel modo seguente:

1. Assegnate alla proprietà Text della Label il valore Risultato
2. Selezionate la proprità Multiline della TextBox
3. Impostate la proprietà Width della TextBox con il valore Fill Parent
4. Rinominare la TextBox assegnandogli il nome txt_risultato

L'immagine seguente mostra lo schermo finale dopo l'aggiunta dell'area di output:

<< 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

Se intendete lavorare nel settore informatico, in particolare nel campo della gestione dei dati oppure in quello dello sviluppo applicativo, non potete trascurare la conoscenza del linguaggio SQL.

Questo potente e allo stesso tempo semplice linguaggio è indispensabile per i seguenti ruoli professionali: Database Administrator (DBA), PL/SQL Developer, T-SQL Developer, Esperto di Analisi dati e BI, Web Developer, Java/C# Developer, App Developer.

Il Linguaggio SQL è stato creato dall’IBM nel 1974, nasce come strumento per gestire Database relazionali.

Inizialmente fu chiamato SEQUEL, solo in seguito divenne SQL (Structure Query Language), linguaggio strutturato per le interrogazioni dei database relazionali.

Nel 1983 l’IBM crea il DB2, il primo DBMS relazionale, ancora molto diffuso oggi all’interno di grandi aziende.

Ben presto il linguaggio SQL ebbe una grossa diffusione in tutto il mondo, al punto da essere riconosciuto nel 1986 dall’ANSI (American National Standard Institute), nasce lo standard SQL/86. Da allora gli standard si sono susseguiti con l’obiettivo di creare un linguaggio unico per la gestione di tutti i database relazionali.

Con il tempo il linguaggio SQL è stato esteso, fino a diventare un vero e proprio linguaggio di programmazione, con la capacità di implementare la logica applicativa.

I linguaggi di tipo SQL, che permettono di scrivere programmi server-side sono:

1.PL/SQL della Oracle
2.TS-SQL della Microsoft

Per iniziare a lavorare con il linguaggio SQL bisogna prima saper progettare un Database, perché tutti i comandi del linguaggio SQL servono per creare, gestire ed interrogare una Banca dati.

Una Banca dati o Database è un insieme di informazioni logicamente correlate tra loro, organizzate e memorizzate secondo una struttura definita da un modello dati particolare, al fine di poter essere oggetto di ricerca e di analisi.

Esistono tre tipologie di Database: GERARCHICI, RELAZIONALI, RETICOLARI, a noi interessano qulli relazionali composti da tabelle relazionate tra loro per associare le informazioni presenti in più tabelle.

I Principali oggetti di un Database RELAZIONALE sono le Tabelle, le Viste, gli Indici, i Vincoli e gli Utenti.

Le Tabelle sono strutture composte da righe e colonne in cui si inseriscono le entità da memorizzare, ad esempio prodotti, fornitori, clienti, studenti, etc.. Le righe si chiamano record (o anche tuple) e contengono tutti i campi che servono a descrivere l’entità inserita, l’insieme dei campi di tutte le entità inserite in una tabella corrisponde alle colonne.

Le Viste o Query sono tabelle temporanee che servono per creare prospetti personalizzati, leggendo le informazioni da una o più tabelle. 

Gli Indici sono particolari chiavi che si possono associare alle colonne delle Tabelle, una ricerca fatta su una colonna indicizzata è molto più veloce, quindi più performante.

I Vincoli sono particolari tipi di indici che si  associano alle colonne delle Tabelle per eseguire controlli, principalmente nei Database relazionali si usano i seguenti tipi di vincoli:

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

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

Quando nel lontano 1987 Microsoft rilasciava la prima versione di Excel per Windows, nessuno avrebbe mai immaginato che sarebbe diventato uno degli strumenti aziendali più potenti a nostra disposizione.

Allora l’utilità dei fogli di calcolo (Spreadsheet) era già nota, grazie ai predecessori di Excel, come VisiCalc, Lotus 123 e Multiplan, ma Excel non era solo un foglio di calcolo era molto, molto, di più.

VISICALC	MULTIPLAN
LOTUS 123	EXCEL 2.2

Non c’è dubbio che chi sa usare bene Excel, ne riceve un vantaggio competitivo notevole, perché oltre ad essere un foglio di calcolo è anche un database, un potente strumento di simulazione, di analisi dei dati e di supporto decisionale, utile anche a chi fa business intelligence.

Inoltre Excel, grazie al linguaggio VBA (Visual Basic for Application), Object Oriented, è anche programmabile.

Se usato in ambito educativo, è un ottimo strumento di formazione, perché favorisce lo sviluppo delle competenze professionali richieste dai principali ruoli aziendali.

Per conoscere le potenzialità di Excel vediamo alcune delle cose che permette di fare.

Organizzazione e gestione attività (Planning)

Excel permette di organizzare e gestire le attività di lavoro o di un progetto attraverso la pianificazione, la programmazione ed il controllo degli appuntamenti, delle scadenze e delle risorse sia umane, sia finanziarie.

Utilizzando i filtri e le tecniche di ordinamento si possono di visualizzare le informazioni utili, applicando la colorazione del testo si può mettere in evidenza lo stato delle attività in corso.

Con Excel, anche gli utenti meno esperti, possono creare una semplice agenda, con un pò di maggiore esperienza si possono creare modelli più professionali per gestire progetti anche molto complessi, che includono calendari delle attività e diagrammi di Gantt.

Contabilità e Controllo di Gestione

La potenza del foglio di calcolo, combinata con la possibilità di impostare formule e funzioni anche molto complesse, permette di gestire qualunque tipo di operazione contabile, come ad esempio le Registrazioni cronologiche della partita doppia, il Piano dei conti, il Libro mastro ed il Bilancio.

Inoltre Excel è un ottimo strumento per il controllo di gestione, che permette di creare anche Business Plan, Budget e Flussi di cassa.

Presentazione e Comunicazione

Con Excel si possono anche creare presentazioni molto efficaci, per comunicare in sintesi, attraverso l’utilizzo di tabelle e grafici, informazioni anche molto complesse.

Le tabelle ed i grafici di Excel, possono diventare ancora più professionali se inseriti in presentazioni Power Point.

In Excel 2013 è anche presente l'applicazione Power View, uno strumento potentissimo che permettte di creare presentazioni commerciali interattive di alta qualità.

Analisi dei Dati e Supporto decisionale

Excel si integra perfettamente con i più importanti Database in commercio, come ad esmpio Access ed SQL Server, permettendo l’analisi dei dati importati nel foglio di lavoro. Queste caratteristiche rendono Excel un dei prodotti di Business Intelligence più potenti e semplici da usare.

Oltre alle tabelle di pivot, sono disponibili anche strumenti per creare subtotali, consolidare e raggruppare dati e gestire attività di analisi e simulazione di tipo what if (cosa accade se ...).

Comunque la novità delle ultime versioni di è senza dubbio l'applicazione PowerPivot!!!

PowerPivot è un applicativo di che consente di eseguire un'analisi avanzata dei dati. Grazie alle funzionalità di Business Intelligence disponibili, consente di importare i dati da diverse origini, tra cui database aziendali di grandi dimensioni presenti nella rete Intranet, feed di dati pubblici, fogli di calcolo e file di testo presenti nei computer degli utenti. I dati vengono importati in PowerPivot sotto forma di tabelle, mostrate come fogli separati, le tabelle possono anche essere relazionate tra loro.

PowerPivot archivia i dati in un database analitico nella cartella di lavoro di Excel e un motore locale potente provvede a  sottoporli a query.

Oltre agli strumenti grafici che consentono di analizzare i dati, in PowerPivot è incluso il linguaggio DAX (Data Analysis Expressions), che permette di estendere le funzionalità di modifica dei dati di Excel per consentire operazioni di raggruppamento, calcolo e analisi più sofisticate e complesse.

Sviluppo Applicazioni

Il linguaggio VBA (Visual Basic for Application) è un potente linguaggio Object Oriented, che permette di creare vere e proprie applicazioni basate su Excel.

Una cartella di Excel è composta da fogli, righe, colonne e celle, con il linguaggio VBA è possibile controllare tutti questi elementi e gestirli in modo automatico, per implementare qualunque tipo di attività e di soluzione.

Per i meno esperti Excel permette di creare macro VBA registrando le sequenza delle azioni richieste per svolgere un'attività. Quando la macro viene richiamata, le azioni registrate vengono eseguite nuovamente in modo automatico.

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

Wordpress è uno dei più diffusi CMS (Content Management System),  utilizzando questo prodotto è  possibile creare un vero e proprio sito web, composto da elementi ipertestuali e multimediali, gestibili attraverso un pannello di controllo molto semplice da usare.

Per iniziare a lavorare con questo potente CMS, occorre partire dal principio, ovvero da che cosa è l'HTML.

Tutto ha inizio nei lontani anni ’90 ...

Con la diffusione di internet nacque l’esigenza di creare un linguaggio semplice e leggero per formattare ed organizzare contenuti che si potessero trasmettere via Web e che potessero essere visualizzati con un  browser, per soddisfare questa esigenza nasce il linguaggio HTML.

Il W3C (World Wide Web Consortium) definì il linguaggio HTML per la prima volta nel giugno del 1993, basato sul metalinguaggio SGML (Standard Generalized Markup Language).

Per permettere lo scambio di pagine Web, scritte con il linguaggio HTML, venne creato il protocollo applicativo HyperText Transfer Protocol (protocollo di trasferimento di un ipertesto) o meglio conosciuto come https, usato per regolare lo scambio di pagine HTML tra un client ed un Server.

HTML stà per Hypertext Markup Language, non è un linguaggio di programmazione, ma è un linguaggio di marcatura che riceve istruzioni attraverso "tag".

I tag di formattazione sono marcatori o etichette contenute tra parentesi angolari che specificano il ruolo che quel determinato elemento dovrà possedere.

I tag contengono il nome, eventuali attributi e omonimo tag di chiusura.

In particolare la formattazione delegata ai tag riguarda caratteristiche come: il font, il colore, le dimensioni, la posizione relativa all'interno della pagina.

STRUTTURA DI UNA PAGINA HTML

La struttura generica di una pagina HTML prevede che l’intero documento sia contenuto tra i tag html

La pagina HTML si suddivide in 2 aree:

1) L’HEADER: porzione della pagina che contiene i tag d'intestazione racchiusi tra i tag head, di solito il titolo della pagina.

2) Il CORPO DELLA PAGINA: porzione della pagina in cui troviamo, compresi tra i tag body, tutto il contenuto della pagina.

L’HEADER

Contiene tutte le informazioni relative alla pagina web come ad esempio gli script Javascript, i collegamenti a fogli di stile CSS, i meta-tag e il titolo della pagina.

I fogli di stile vennero introdotti successivamente a fine dicembre del 1996, essi sono un linguaggio usato per definire la formattazionei dei documenti HTML con tecniche più avanzate, che garantiscono anche il riutilizzo del codice ed una facile manutenzione, l’approfondimento dei CSS verrà fatto nelle prossime lezioni.

Il linguaggio Javascript è invece un linguaggio orientato agli oggetti e agli eventi, comunemente utilizzato nella programmazione Web lato client (front-end) per rendere le pagine HTML più interattive, viene utilizzato soprattutto per fare controlli lato client oppure per rendere la pagine asincrone, se combinato con XML (Ajax), anche Javascript verrà visto nelle prossime lezioni.

I meta-tag, sono metadati utilizzabili nell'HTML per veicolare informazioni aggiuntive correlate alla pagina Web che ne fa uso. Sono in genere utilizzati per inviare queste informazioni ai motori di ricerca oppure da qualche anno a questa parte, attraverso meta-tag specifici, ai più diffusi social media (es. Facebook, Google+, Twitter) in modo da far integrare al meglio le  pagine HTML con i social.

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
• Ricominciamo ... dal Linguaggio SQL