3 of 67

Interfacce Utente Grafiche

L'interfaccia utente grafica (GUI) è un tipo di interfaccia utente che utilizza elementi visivi come icone e finestre per interagire con un computer o un dispositivo. La GUI consente agli utenti di interagire con i programmi e i sistemi operativi tramite il mouse e la tastiera invece di utilizzare comandi testuali. Ciò rende l'interazione con il computer più intuitiva e facile per gli utenti.

4 of 67

Indice

Introduzione

Proprietà
Metodi
Eventi

Introduzione alle interfacce grafiche utente (GUI)

Cos'è una GUI e perché è importante
Storia delle interfacce grafiche utente
Elementi comuni delle interfacce grafiche utente

Concetti di base di progettazione di interfacce utente

Progettazione dell'interfaccia utente: principi e metodi
Usabilità e accessibilità
Progettazione di interfacce utente per dispositivi mobili
Splash screen

Introduzione ai framework di sviluppo di interfacce utente

Scelta del framework adatto al progetto
Sviluppo di interfacce utente utilizzando i framework: TkInter

Eventi e gestione degli eventi

Come gestire gli eventi in un'interfaccia utente
Eventi di input: mouse e tastiera
Eventi di sistema: ridimensionamento, minimizzazione, chiusura

Elementi di interfaccia utente comuni

Pulsanti, caselle di testo, etichette, menu e barre degli strumenti
Elementi di interfaccia utente avanzati: tabelle, alberi, elenchi

Layout e disposizione degli elementi

Metodi di disposizione degli elementi: assoluti, flessibili, a griglia
Progettazione di layout responsive

Sicurezza delle interfacce utente

Introduzione alla sicurezza delle interfacce utente
Tecniche per garantire la sicurezza delle interfacce utente
Sviluppo di interfacce utente sicure utilizzando tecnologie come la crittografia e l'autenticazione

Test e manutenzione delle interfacce utente

Introduzione al test e alla manutenzione delle interfacce utente
Tecniche per testare e manutenere le interfacce utente
Utilizzo di strumenti per il test e la manutenzione delle interfacce utente, come Selenium e JUnit

Esercitazione
Approfondimenti

5 of 67

Indice

Interfacce utente per le applicazioni web

Introduzione alle interfacce utente per le applicazioni web
Sviluppo di interfacce utente per le applicazioni web utilizzando HTML, CSS e JavaScript

Interfacce utente per le applicazioni mobili

Introduzione alle interfacce utente per le applicazioni mobili
Sviluppo di interfacce utente per le applicazioni mobili utilizzando framework come React Native e Flutter

Interfacce utente per le applicazioni multimediali

Introduzione alle interfacce utente per le applicazioni multimediali
Sviluppo di interfacce utente per le applicazioni audio e video utilizzando framework come DirectShow e Media Foundation

Interfacce utente per le applicazioni di gioco

Introduzione alle interfacce utente per le applicazioni di gioco
Progettazione di interfacce utente per giochi 2D e 3D
Sviluppo di interfacce utente per giochi utilizzando framework come Unity e Unreal Engine

Interfacce utente per le applicazioni di realtà virtuale e aumentata

Introduzione alle interfacce utente per le applicazioni di realtà virtuale e aumentata
Progettazione di interfacce utente per dispositivi VR e AR
Sviluppo di interfacce utente per le applicazioni VR e AR utilizzando framework come Oculus SDK e ARKit

Interfacce utente per le applicazioni di Intelligenza Artificiale

Introduzione alle interfacce utente per le applicazioni di Intelligenza Artificiale
Progettazione di interfacce utente per le applicazioni di Intelligenza Artificiale
Sviluppo di interfacce utente per le applicazioni di Intelligenza Artificiale utilizzando framework come TensorFlow e Keras

Interfacce utente per le applicazioni di Internet delle Cose

Introduzione alle interfacce utente per le applicazioni di Internet delle Cose
Progettazione di interfacce utente per dispositivi IoT
Sviluppo di interfacce utente per le applicazioni IoT utilizzando framework come Node-RED e AWS IoT.

Progetto finale

Sviluppo di un'interfaccia utente completa utilizzando i concetti e le tecniche apprese durante il corso
Presentazione e revisione del progetto finale

Conclusione

Riepilogo dei principali concetti e tecniche appresi durante il corso
Risorse per continuare a imparare e migliorare le competenze di sviluppo di interfacce utente.

6 of 67

Indice - Scratch

Introduzione a Scratch

Cos’è Scratch
L’ambiente di lavoro

Programmare con Scratch

Gli elementi di un programma
Primo programma - saltiamo sul letto

Altro

Definizione degli sprite
Arricchiamo lo script
I blocchi di comando
Creare la tua prima animazione
Creare e gestire sprite

Suoni e animazioni
Sprite e movimento

Definizione del movimento
Animare gli sprite
Muovere gli sprite

Interazione e controllo

Aggiungere interazione ai tuoi progetti

Controllare il flusso del programma
Usare variabili e dati
Suono e musica
Aggiungere suoni e musica ai tuoi progetti
Creare effetti sonori
Comporre musica
Progetti avanzati
Creare un semplice videogioco
Condividere i tuoi progetti online
Imparare da altri progetti

7 of 67

Introduzione

8 of 67

Interfaccia utente

Una interfaccia utente (UI, dall'inglese User Interface) è l'insieme di elementi di un sistema informatico attraverso cui un utente interagisce con il sistema stesso. L'interfaccia utente include tutti gli elementi che l'utente può vedere e utilizzare per interagire con il sistema, come ad esempio le finestre, i pulsanti, i menu, le caselle di testo, le immagini, etc.

L'obiettivo di una buona interfaccia utente è quello di rendere l'utilizzo di un sistema il più semplice e intuitivo possibile, in modo da permettere all'utente di raggiungere facilmente gli obiettivi che si propone. Per questo motivo, la progettazione di un'interfaccia utente richiede un'attenta valutazione delle esigenze dell'utente e delle caratteristiche del sistema.

Le interfacce utente possono essere di diversi tipi, come ad esempio:

Interfaccia a riga di comando: è una interfaccia testuale che permette all'utente di interagire con il sistema mediante l'utilizzo di comandi da digitare al prompt di sistema.
Interfaccia grafica: è un'interfaccia che utilizza elementi grafici, come ad esempio finestre, pulsanti, menu, etc., per facilitare l'interazione dell'utente con il sistema.
Interfaccia web: è una interfaccia che utilizza il protocollo HTTP (Hypertext Transfer Protocol) per consentire all'utente di interagire con il sistema mediante un browser web.
Interfaccia mobile: è un'interfaccia progettata per essere utilizzata su dispositivi mobili come smartphone e tablet.

9 of 67

Elementi di una interfaccia grafica

Gli elementi di una interfaccia grafica sono gli elementi visivi attraverso cui l'utente interagisce con il sistema. Ci sono diversi tipi di elementi che possono essere presenti in una interfaccia grafica, tra cui:

Controlli: sono elementi che permettono all'utente di impartire un comando al sistema, come ad esempio pulsanti, caselle di controllo, menu a tendina, etc.
Contenitori: sono elementi che permettono di organizzare altri elementi in modo da renderli più facilmente leggibili e gestibili. Ad esempio, una finestra è un contenitore che può contenere altri elementi come pulsanti, caselle di testo, etc.
Componenti: sono elementi che permettono di visualizzare informazioni o di inserire dati nel sistema. Ad esempio, una casella di testo è un componente che permette all'utente di inserire un testo, mentre un'etichetta è un componente che permette di visualizzare un testo.

Inoltre, in un'interfaccia grafica è anche possibile trovare altri elementi come ad esempio immagini, icone, barre di scorrimento, etc. Tutti questi elementi devono essere organizzati in modo da rendere l'interfaccia il più semplice e intuitiva possibile per l'utente.

10 of 67

Elementi di una interfaccia grafica

Gli elementi di una interfaccia grafica (GUI, dall'inglese Graphical User Interface) sono tutti gli elementi visivi che l'utente può vedere e utilizzare per interagire con il sistema. Alcuni esempi di elementi di una interfaccia grafica sono:

Finestre: sono aree di schermo che mostrano le informazioni e le funzionalità di un'applicazione o di un sistema operativo.
Pulsanti: sono elementi che permettono all'utente di avviare un'azione, ad esempio aprire una finestra o eseguire un comando.
Menu: sono liste di opzioni che permettono all'utente di scegliere tra diverse funzionalità.
Caselle di testo: sono elementi in cui l'utente può digitare del testo.
Barre di scorrimento: sono elementi che permettono di muoversi all'interno di una finestra o di una pagina web quando il contenuto è troppo grande per essere visualizzato tutto in una volta.
Barre di stato: sono elementi che mostrano informazioni sullo stato attuale del sistema, come ad esempio il numero di oggetti selezionati o il livello di carica della batteria.
Immagini: sono elementi grafici che possono essere utilizzati per decorare l'interfaccia o per illustrare le funzionalità del sistema.
Icone: sono piccole immagini che rappresentano le funzionalità o gli oggetti di un sistema.

11 of 67

Componenti comuni di una interfaccia grafica

Barre di menu: una barra di menu è una barra orizzontale situata in alto sulla finestra che contiene voci di menu con opzioni di programma. Ad esempio, la voce "File" potrebbe contenere opzioni come "Apri", "Salva" e "Esci".
Caselle di selezione: una casella di selezione è un elemento di interfaccia che permette all'utente di selezionare un'opzione da un elenco di opzioni. Ad esempio, una casella di selezione può essere utilizzata per selezionare il proprio sesso in un modulo di registrazione.
Menu a discesa: un menu a discesa è un elemento di interfaccia che mostra un elenco di opzioni quando viene cliccato. L'utente può quindi selezionare un'opzione dal menu a discesa. Ad esempio, un menu a discesa può essere utilizzato per selezionare una data di nascita in un modulo di registrazione.

12 of 67

Storia delle interfacce grafiche utente

La storia delle interfacce grafiche utente (GUI) ha inizio negli anni '60 con il lancio del sistema operativo SAGE (Semi-Automatic Ground Environment) dell'Aeronautica degli Stati Uniti. SAGE utilizzava una GUI basata su schermo cathode ray tube (CRT) per visualizzare informazioni sulla posizione degli aerei in tempo reale.

Anni '60 - 70: I primi sistemi con interfacce grafiche vennero sviluppati in ambito di ricerca. Nel 1963, Ivan Sutherland sviluppò Sketchpad, uno dei primi sistemi con interfaccia grafica per il disegno tecnico.

Nel 1968, il sistema operativo chiamato NLS (o oNLine System) sviluppato da Douglas Engelbart e dal suo gruppo al Augmentation Research Center (ARC) della SRI International, introdusse la possibilità di utilizzare un mouse come dispositivo di input per interagire con l'interfaccia.

Nel 1973, Xerox PARC (Palo Alto Research Center) ha sviluppato il sistema operativo Alto, che ha introdotto la barra delle applicazioni, finestre multiple, icone e il concetto di "puntare e cliccare" per interagire con il computer.

Nel 1984, Apple ha lanciato Macintosh, il primo personal computer ad utilizzare una interfaccia grafica utente completa basata su finestre, icone e menu.

Nel 1985 Commodore International ha lanciato il computer Amiga dotato di un sistema operativo che ha introdotto una interfaccia grafica utente avanzata con caratteristiche come finestre multiple, icone e un ambiente desktop.

1985 - Windows 1.0: Microsoft rilasciò Windows 1.0, un'interfaccia grafica per MS-DOS ispirata al Macintosh. Inizialmente non ebbe molto successo, ma gettò le basi per lo sviluppo di Windows.

13 of 67

Storia delle interfacce grafiche utente

1990 - Windows 3.0: Microsoft lanciò Windows 3.0 con un'interfaccia grafica più avanzata e un ambiente desktop vero e proprio. Divenne rapidamente popolare e aiutò a diffondere le GUI sul mercato PC.

1995 - World Wide Web: L'avvento del World Wide Web e dei browser web portò le interfacce grafiche su internet. Le applicazioni web divennero un nuovo ambito di sviluppo di GUI.

2007 - Interfacce touch: L'iPhone di Apple introdusse le interfacce touch basate su gesti, aprendo la strada alle GUI per dispositivi mobili e tablet.

Negli anni successivi, la maggior parte dei sistemi operativi per personal computer e dispositivi mobili ha adottato interfacce grafiche utente simili a Macintosh e Windows, rendendo le interfacce grafiche utente la norma per l'interazione con i computer.

Oggi: Le interfacce grafiche continuano ad evolversi, con tendenze come il design material, le animazioni fluide, le interfacce vocali e gestuali, la realtà aumentata/virtuale e l'intelligenza artificiale per migliorare l'interazione uomo-computer. Le interfacce grafiche sono passate da progetti di ricerca a prodotti di massa, diventando fondamentali per PC, dispositivi mobili, applicazioni web e vari altri sistemi. La loro evoluzione ha reso possibile l'utilizzo di computer e software da parte di un pubblico sempre più vasto.

14 of 67

Proprietà

15 of 67

Proprietà

Le proprietà degli elementi grafici di una applicazione utente sono le caratteristiche di un elemento che ne determinano il comportamento e l'aspetto. Ad esempio, le proprietà di un pulsante possono includere il testo visualizzato sul pulsante, il colore di sfondo, il font utilizzato per il testo, la posizione del pulsante all'interno dell'interfaccia, etc.

Le proprietà degli elementi grafici possono essere modificate a runtime, cioè durante l'esecuzione dell'applicazione, per influire sul comportamento e l'aspetto dell'elemento. Ad esempio, è possibile modificare il testo visualizzato sul pulsante per cambiare il comando associato al pulsante, o modificare il colore di sfondo per evidenziare una particolare opzione.

Inoltre, le proprietà degli elementi grafici possono essere utilizzate per legare l'elemento ai dati presenti nell'applicazione, in modo da permettere all'elemento di mostrare o modificare i dati in modo dinamico. Ad esempio, è possibile utilizzare una casella di testo per visualizzare il valore di una variabile, o una tabella per mostrare i dati di un database.

16 of 67

Metodi

17 of 67

Metodi

I metodi sono funzioni presenti all'interno di un oggetto o di una classe che permettono di eseguire delle azioni o di ottenere dei risultati. Ad esempio, in un oggetto che rappresenta una finestra, potrebbero essere presenti i metodi "apri" e "chiudi" per aprire e chiudere la finestra, o il metodo "ridimensiona" per cambiare le dimensioni della finestra.

I metodi vengono solitamente utilizzati per esporre le funzionalità di un oggetto o di una classe agli altri elementi del sistema, in modo da poterli utilizzare facilmente. Ad esempio, se si vuole aprire una finestra, si può semplicemente chiamare il metodo "apri" dell'oggetto finestra, senza doversi preoccupare dei dettagli di implementazione del metodo stesso.

I metodi possono anche accettare dei parametri, cioè dei valori che vengono passati al metodo al momento della chiamata e che possono essere utilizzati all'interno del metodo per determinare il comportamento da eseguire. Ad esempio, il metodo "ridimensiona" potrebbe accettare come parametri le nuove dimensioni della finestra.

Inoltre, i metodi possono anche restituire un risultato, cioè un valore che viene restituito al chiamante al termine dell'esecuzione del metodo. Ad esempio, il metodo "trova" potrebbe restituire il primo elemento che soddisfa una determinata condizione all'interno di una collezione di elementi.

18 of 67

Metodi

Gli elementi grafici di una applicazione utente (ad esempio pulsanti, caselle di testo, etc.) sono spesso dotati di metodi che permettono di modificarne il comportamento o di ottenere informazioni su di essi. Ad esempio, un pulsante potrebbe avere un metodo "setText" che permette di impostare il testo visualizzato sul pulsante, un metodo "getText" che permette di ottenere il testo visualizzato sul pulsante, e un metodo "setEnabled" che permette di abilitare o disabilitare il pulsante.

I metodi degli elementi grafici sono spesso utilizzati dallo sviluppatore per creare un'interfaccia dinamica che reagisce agli input dell'utente o per ottenere informazioni sullo stato dell'interfaccia.

Ecco alcuni esempi di metodi comuni che possono essere presenti negli elementi grafici di una applicazione utente:

setText: permette di impostare il testo visualizzato sull'elemento.
getText: permette di ottenere il testo visualizzato sull'elemento.
setEnabled: permette di abilitare o disabilitare l'elemento.
setVisible: permette di mostrare o nascondere l'elemento.
setSize: permette di impostare le dimensioni dell'elemento.
addActionListener: permette di aggiungere un gestore eventi che viene eseguito quando l'elemento viene attivato (ad esempio quando viene cliccato un pulsante).

Questi sono solo alcuni esempi di metodi che possono essere presenti negli elementi grafici di una applicazione utente. Ogni elemento può avere un insieme di metodi specifici a seconda delle sue caratteristiche e delle sue funzionalità.

19 of 67

Eventi

20 of 67

Eventi

Gli eventi sono cambiamenti che possono verificarsi in un'interfaccia utente e che possono essere gestiti dal sistema. Ad esempio, quando l'utente clicca su un pulsante, viene generato un evento di click; quando l'utente digita un testo in una casella di testo, viene generato un evento di modifica del testo; quando si muove il mouse su un elemento dell'interfaccia, viene generato un evento di mouse-over, etc.

Gli eventi possono essere gestiti dal sistema mediante la definizione di una routine di codice (detto "gestore eventi") che viene eseguita ogni volta che si verifica un determinato evento. In questo modo, è possibile creare un'interfaccia dinamica che reagisce agli input dell'utente in modo appropriato.

Inoltre, gli eventi possono anche essere utilizzati per scatenare azioni asincrone, come ad esempio la richiesta di dati da un server o l'aggiornamento di una parte dell'interfaccia senza ricaricare l'intera pagina.

22 of 67

Indice

Introduzione a Tkinter

Cos'è Tkinter e perché è importante
Installazione di Tkinter
Struttura di base di un programma Tkinter

Widget Tkinter

Pulsanti, caselle di testo, etichette, menu e barre degli strumenti
Widget avanzati: tabelle, alberi, elenchi
Personalizzazione dei widget

Layout e disposizione degli elementi

Metodi di disposizione degli elementi: assoluti, flessibili, a griglia
Progettazione di layout responsive

Eventi e gestione degli eventi

Come gestire gli eventi in un'interfaccia utente Tkinter
Eventi di input: mouse e tastiera
Eventi di sistema: ridimensionamento, minimizzazione, chiusura

Interfacce utente multi-finestra

Creazione e gestione di finestre multiple
Utilizzo di moduli come tkinter.ttk per creare interfacce utente moderne

Grafica e immagini

Utilizzo di canvas e figure per disegnare elementi grafici
Gestione delle immagini e dei file multimediali

Interfacce utente per le applicazioni web

Utilizzo di Tkinter per creare interfacce utente per le applicazioni web
Integrazione con altri framework web come Flask e Django

Database e Tkinter

Introduzione ai database e al loro utilizzo con Tkinter
Connessione ai database e manipolazione dei dati
Creazione di interfacce utente per la visualizzazione e la modifica dei dati del database

Progetto finale

Sviluppo di un'interfaccia utente completa utilizzando i concetti e le tecniche apprese durante il corso
Presentazione e revisione del progetto finale

Conclusione

Riepilogo dei principali concetti e tecniche appresi durante il corso
Risorse per continuare a imparare e migliorare le competenze di sviluppo di interfacce utente con Tkinter.

23 of 67

Introduzione a Tkinter

24 of 67

Tkinter

Tkinter è un modulo Python per lo sviluppo di interfacce utente grafiche. Fornisce una serie di widget (elementi dell'interfaccia utente) come pulsanti, caselle di testo, etichette, menu e barre degli strumenti, che possono essere utilizzati per creare interfacce utente complesse. Tkinter è incluso con Python e supporta la creazione di interfacce utente per Windows, macOS e Linux.

Tkinter utilizza un sistema di layout manager per organizzare gli elementi dell'interfaccia utente sullo schermo, e include un sistema di gestione degli eventi per gestire gli input dell'utente.

Tkinter è una libreria semplice e facile da usare, ma non offre tutte le funzionalità avanzate che si possono trovare in altri framework di sviluppo di interfacce utente.

25 of 67

Tkinter

L'installazione di Tkinter dipende dalla piattaforma che si sta utilizzando.

In generale Tkinter è già incluso in Python come modulo di base e non richiede alcuna installazione aggiuntiva. Tuttavia, in alcune piattaforme, potrebbe essere necessario installare manualmente il pacchetto Tkinter.

Per Windows:

Tkinter è già incluso in Python per Windows. Non c'è bisogno di alcuna installazione aggiuntiva.

Per MacOS:

Tkinter è già incluso in Python per MacOS. Non c'è bisogno di alcuna installazione aggiuntiva.

Per Linux:

Tkinter è già incluso in Python per la maggior parte delle distribuzioni Linux. Tuttavia, in alcune distribuzioni, potrebbe essere necessario installare manualmente il pacchetto Tkinter.

Esempio di installazione su Ubuntu:

sudo apt-get install python3-tk

In caso di dubbio se Tkinter sia installato o meno, è possibile controllare importando il modulo Tkinter all'interno di una shell Python e vedere se genera un errore di importazione.

26 of 67

Struttura di base di un programma Tkinter

La struttura di base di un programma Tkinter consiste in alcuni passi fondamentali:

Importare il modulo Tkinter:�import tkinter as tk o from tkinter import *
Creare la finestra principale (chiamata "root"):�root = tk.Tk()
Creare i widget (pulsanti, caselle di testo, etichette, ecc.) che compongono l'interfaccia utente:�widget = tk.Widget(root, options)
Posizionare i widget all'interno della finestra utilizzando un layout manager:�widget.pack() o widget.grid() o widget.place()
Creare un ciclo di attesa degli eventi (chiamato "main loop"):�root.mainloop()

27 of 67

Struttura di base di un programma Tkinter

Ecco un esempio di codice che mostra la struttura di base di un programma Tkinter:

import tkinter as tk

root = tk.Tk() # Creare la finestra principale

label = tk.Label(root, text="Hello World!") # Creare una etichetta

label.pack() # posizionare l'etichetta nella finestra

root.mainloop() # Avviare il ciclo di attesa degli eventi

In questo esempio, si crea una finestra con un'etichetta che mostra il testo "Hello World!", e l'etichetta viene posizionata nella finestra utilizzando il metodo pack(). Infine, si avvia il ciclo di attesa degli eventi con root.mainloop()

28 of 67

Ambiente di sviluppo

29 of 67

Ambiente di sviluppo

https://github.com/filippo-bilardo/INFORMATICA2_GUI

30 of 67

Widget Tkinter

31 of 67

Widget Tkinter

Tkinter fornisce una serie di widget (elementi dell'interfaccia utente) che possono essere utilizzati per creare interfacce utente. Ecco alcuni esempi di widget comuni in Tkinter:

Label: per visualizzare testo o immagini
Button: per creare pulsanti che possono essere cliccati dall'utente
Entry: per creare campi di testo in cui l'utente può inserire dati
Text: per creare una casella di testo in cui l'utente può inserire una quantità maggiore di testo
Checkbutton: per creare caselle di controllo che possono essere selezionate o deselezionate dall'utente
Radiobutton: per creare gruppi di pulsanti di opzione in cui l'utente può selezionare una sola opzione
Listbox: per creare liste di elementi da cui l'utente può scegliere
Combobox: per creare una casella di testo con un elenco di opzioni da scegliere
Menu: per creare menu a tendina o barre dei menu per l'interfaccia utente
Canvas: per creare un'area di disegno in cui è possibile disegnare forme e immagini

Ogni widget ha una serie di opzioni e metodi che possono essere utilizzati per personalizzarne l'aspetto e il comportamento.

32 of 67

Pulsanti

I pulsanti sono utilizzati per permettere all'utente di avviare un'azione, come la conferma di un'operazione o la chiusura di una finestra. In Tkinter, i pulsanti possono essere creati utilizzando il widget Button. Ad esempio:

import tkinter as tk

root = tk.Tk()

button = tk.Button(root, text="Click me!")

button.pack()

root.mainloop()

33 of 67

Caselle di testo

le caselle di testo consentono all'utente di inserire dati in un'interfaccia utente. In Tkinter, le caselle di testo possono essere create utilizzando il widget Entry. Ad esempio:

import tkinter as tk

root = tk.Tk()

entry = tk.Entry(root)

entry.pack()

root.mainloop()

34 of 67

Etichette

Le etichette sono utilizzate per visualizzare informazioni testuali all'utente. In Tkinter, le etichette possono essere create utilizzando il widget Label. Ad esempio:

import tkinter as tk

root = tk.Tk()

label = tk.Label(root, text="Hello World!")

label.pack()

root.mainloop()

35 of 67

I menu consentono all'utente di selezionare opzioni da un elenco a tendina. In Tkinter, i menu possono essere creati utilizzando il widget Menu. Ad esempio:

import tkinter as tk

root = tk.Tk()

menubar = tk.Menu(root)

file_menu = tk.Menu(menubar, tearoff=0)

file_menu.add_command(label="Open")

file_menu.add_command(label="Save")

menubar.add_cascade(label="File", menu=file_menu)

root.config(menu=menubar)

root.mainloop()

36 of 67

Barre degli strumenti

le barre degli strumenti sono utilizzate per fornire una serie di pulsanti o icone per l'accesso rapido alle funzioni più comuni. In Tkinter, le barre degli strumenti possono essere create utilizzando il widget `Frame` e i widget per i pulsanti. Ad esempio:

import tkinter as tk

root = tk.Tk()

toolbar = tk.Frame(root)

open_button = tk.Button(toolbar, text="Open")

save_button = tk.Button(toolbar, text="Save")

open_button.pack(side="left")

save_button.pack(side="left")

toolbar.pack(side="top", fill="x")

root.mainloop()

38 of 67

Interfacce utente con Javascript

Alcuni dei principali framework per la creazione di interfacce utente per desktop con JavaScript sono:

Electron: è un framework open source che permette di sviluppare applicazioni desktop native utilizzando tecnologie web come HTML, CSS e JavaScript.
NodeGUI, Meteor,
NW.js: è un altro framework open source, precedentemente noto come node-webkit, che offre le stesse funzionalità di Electron, con l'aggiunta di supporto per le librerie grafiche OpenGL e WebGL.
Proton Native: Questo framework ti permette di creare app desktop native per Windows, Mac e Linux utilizzando JavaScript e React. Proton Native offre un'interfaccia di sviluppo simile a quella di React Native per lo sviluppo di app mobile, rendendo più facile per gli sviluppatori di app mobile passare allo sviluppo di app desktop.
React-desktop: è una libreria di interfacce utente basata su React che offre componenti per l'interfaccia utente desktop come finestre, barre dei menu, barre di scorrimento e altro ancora.
AppJS: Questo framework ti permette di creare app desktop per Windows, Mac e Linux utilizzando JavaScript, HTML e CSS. AppJS offre accesso alle API del sistema operativo e include anche il motore di rendering WebKit.

39 of 67

Interfacce utente con Altri linguaggi

Qt: è un framework di sviluppo multi-piattaforma che offre una vasta gamma di componenti per la creazione di interfacce utente desktop con una varietà di linguaggi di programmazione, tra cui JavaScript.
GTK: è un altro framework di sviluppo multi-piattaforma che fornisce una vasta gamma di componenti per la creazione di interfacce utente desktop con una varietà di linguaggi di programmazione, tra cui JavaScript.

40 of 67

Esercitazioni

41 of 67

Esercizi

42 of 67

Esercizi

creare un form di login che permetta all'utente di accedere a una parte protetta del sistema solo inserendo le credenziali corrette.

Il form di login deve includere due caselle di testo per l'inserimento dell'username e della password, due etichette per indicare all'utente cosa deve inserire in ciascuna casella di testo, un pulsante per l'invio delle credenziali e una etichetta per visualizzare un messaggio di errore in caso di username o password errati.

Quando viene cliccato il pulsante di login, deve essere eseguita una routine di codice (detto "gestore eventi") che verifica che l'username e la password siano corretti. Se lo sono, deve essere aperta una nuova finestra o pagina con il contenuto protetto. Se non lo sono, viene visualizzato un messaggio di errore nell'etichetta apposita.

43 of 67

Esercizi con checkbox

Creazione di un form di scelta multipla: Creare un form in cui gli studenti possano selezionare più opzioni tra un elenco utilizzando le checkbox. Ad esempio, si può chiedere agli studenti di selezionare tutti gli sport che praticano o tutte le materie che preferiscono.
Creazione di una lista di controllo: Creare una lista di attività da fare e utilizzare le checkbox per segnalare quali attività sono state completate e quali no.
Creazione di un form di selezione di opzioni avanzate: Creare un form in cui gli studenti possono selezionare opzioni avanzate utilizzando le checkbox, ad esempio l'attivazione o meno di un'opzione di stampa in un'applicazione.
Creazione di un quiz: Creare un quiz in cui gli studenti devono selezionare le risposte esatte utilizzando le checkbox.
Creazione di un'applicazione di gestione dei file: Creare un'applicazione che consenta agli studenti di selezionare i file da eliminare o copiare utilizzando le checkbox

44 of 67

Esercizi

radiobutton
ComboBox
ListBox: Selezione degli alunni assenti, spostare quelli selezionati nella prima lista nella seconda, usando i pulsanti “>” e “<”
Scrivi una applicazione che da una serie di dati generi una fattura
realizzare un'applicazione per il controllo domotico
realizzare un convertitore binario decimale

45 of 67

Esercizi

Esercizio presenze: Realizziamo una semplice interfaccia per selezionare gli alunni presenti e/o assenti disponendoli in due elenchi. I pulsanti permettono lo spostamento tra le due liste

46 of 67

Esercizi

47 of 67

Esercizi

48 of 67

Esercizi

49 of 67

Esercizi

51 of 67

Introduzione a Scratch

52 of 67

Cos’è Scratch

Scratch è un ambiente di programmazione visuale gratuito pensato specialmente per chi si avvicina per la prima volta al mondo del coding.

Invece di dover scrivere righe incomprensibili di codice, Scratch utilizza dei blocchi colorati che si incastrano tra loro come Lego. Combinando questi blocchi in modo creativo puoi creare animazioni, storie interattive, semplici videogiochi e tanto altro!

Scratch è pensato soprattutto per i bambini e ragazzi ma può essere un ottimo strumento per chiunque voglia imparare le basi della programmazione in maniera divertente e intuitiva. Inoltre è completamente gratuito ed è disponibile online sul sito del MIT [Massachusetts Institute of Technology] che lo ha sviluppato.

53 of 67

L’ambiente di lavoro

L'ambiente di lavoro di Scratch è suddiviso in diverse aree:

Barra dei menu, contiene i menu principali di Scratch, tra cui:

File: Per creare nuovi progetti, aprire progetti esistenti, salvare e stampare progetti.
Modifica: Per annullare e ripristinare le modifiche, copiare, incollare e tagliare blocchi.
Progetto: Per gestire gli sprite, gli sfondi e i suoni del progetto.
Condividi: Per condividere i tuoi progetti online o salvarli sul tuo computer.
Tutorials: Per accedere alla documentazione e ai tutorial di Scratch.

54 of 67

L’ambiente di lavoro

Area di scripting, è dove si creano i programmi per gli sprite. È composta da:

Palette dei blocchi: Contiene tutti i blocchi di comando che possono essere utilizzati per programmare gli sprite.
Area di lavoro: È dove si trascinano e si incastrano i blocchi per creare i programmi.
Barra di scorrimento: Permette di scorrere l'area di lavoro quando il programma è molto lungo.

Palco, è l'area dove vengono visualizzate le animazioni e i giochi creati con Scratch.
Sprite, sono i personaggi che si muovono sul palco. Ogni sprite ha il proprio set di costumi e di blocchi di comando.

55 of 67

L’ambiente di lavoro

Barra degli strumenti, contiene alcuni strumenti utili per la creazione di animazioni e giochi, tra cui:

Strumento di selezione: Per selezionare gli sprite e gli oggetti sul palco.
Strumento di testo: Per aggiungere testo al palco.
Strumento di disegno: Per disegnare forme e linee sul palco.
Strumento di gomma: Per cancellare le forme e le linee sul palco.

Area di informazioni, visualizza informazioni sullo sprite selezionato, come la sua posizione, la sua direzione e il suo costume attuale
Pulsante con menu a comparsa per sprite e sfondo che permette di accedere ad alcune funzioni specifiche, tra cui:

Search: Per cambiare il costume dello sprite o lo sfondo.
Paint: Per disegnare uno sprite nuovo o uno sfondo.
Surprise: per inserire un elemento a sorpresa.
Upload: Per caricare un elemento da file.

Altri menu:

Menu di scelta rapida: Cliccando con il tasto destro del mouse su un blocco o su un'area vuota dell'area di scripting si apre un menu di scelta rapida con alcune opzioni utili.

56 of 67

Programmare con Scratch

57 of 67

Gli elementi di un programma

Un programma Scratch è composto da tre elementi principali:

Stage: Lo stage è l'area rettangolare bianca dove si svolge l'animazione o il gioco. È come il palcoscenico di un teatro.
Sprite: Gli sprite sono i personaggi che si muovono sul palco. Possono essere persone, animali, oggetti o qualsiasi altra cosa tu possa immaginare. Ogni sprite ha il proprio set di costumi e di blocchi di comando.
Script: Gli script sono i programmi che controllano gli sprite. Sono composti da blocchi di comando che si incastrano come i Lego. I blocchi di comando dicono agli sprite cosa fare, come muoversi, parlare, interagire con altri sprite e così via.

58 of 67

Primo programma - saltiamo sul letto

Creiamo un primo semplice programma:

Scegli uno sfondo: Per iniziare, scegliamo come sfondo una stanza con un letto
Crea uno sprite: Scegliamo come sprite un animale a nostra scelta
Programma lo sprite: Per animare lo sprite, devi programmarlo usando i blocchi di comando. Trascina i blocchi dalla tavolozza dei blocchi nell'area di scripting e incastonali come i Lego.

59 of 67

Primo programma - saltiamo sul letto

quando clicco sulla bandiera verde

vai a x: -100 y: -150

quando premo freccia a destra

vai a x: 24 y: 13

quando premo freccia su

vai a x: 24 y: 75

aspetta 200msec

vai a x: 24 y: 13

1 of 67

2 of 67

3 of 67

4 of 67

5 of 67

6 of 67

7 of 67

8 of 67

9 of 67

10 of 67

11 of 67

12 of 67

13 of 67

14 of 67

15 of 67

16 of 67

17 of 67

18 of 67

19 of 67

20 of 67

21 of 67

22 of 67

23 of 67

24 of 67

25 of 67

26 of 67

27 of 67

28 of 67

29 of 67

30 of 67

31 of 67

32 of 67

33 of 67

34 of 67

35 of 67

36 of 67

37 of 67

38 of 67

39 of 67

40 of 67

41 of 67

42 of 67

43 of 67

44 of 67

45 of 67

46 of 67

47 of 67

48 of 67

49 of 67

50 of 67

51 of 67

52 of 67

53 of 67

54 of 67

55 of 67

56 of 67

57 of 67

58 of 67

59 of 67

60 of 67

61 of 67

62 of 67

63 of 67

64 of 67

65 of 67

66 of 67

67 of 67