Effetti 2. Animazioni Animare l'interfaccia attraverso la modifica del colore e delle classi applicate agli elementi

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Effetti 2. Animazioni Animare l'interfaccia attraverso la modifica del colore e delle classi applicate agli elementi"

Transcript

1 Guida jquery UI di: Marco Solazzi 1. Introduzione Gli obiettivi del progetto; come e dove scaricare jquery UI Effetti 2. Animazioni Animare l'interfaccia attraverso la modifica del colore e delle classi applicate agli elementi 3. Il metodo effect() Creare effetti avanzati con questo metodo specifico di jquery UI Interazioni 4. Generalità Le interazioni in jquery UI: sintassi comune 5. Draggable (trascinare oggetti) Metodi e opzioni per trascinare oggetti sulla pagina 6. Droppable (rilasciare oggetti trascinati) Come e dove posizionare sulla pagina oggetti trascinati con draggable 7. Resizable (ridimensionare finestre ed elementi) Ridimensionare facilmente elementi dell'interfaccia a partire dalle finestre modali 8. Selectable (selezionare oggetti) Selezione multipla con rettangolo o di oggetti non contigui 9. Sortable (ordinare elementi) Ordinare interattivamente elementi di una lista Widget 10. Introduzione ai widget di jquery UI Cosa sono i widget e quando usarli 11. Accordion Nascondere e mostrare elementi in base all'interazione dell'utente 12. Datepicker Analisi del widget di jquery UI destinato alla selezione delle date 13. Dialog Creare e gestire finestre popup, avvisi e messaggi di dialogo 14. Progressbar Il widget per comunicare all'utente il progresso di un'operazione in corso 15. Slider Creare e gestire controlli per la modifica 'a scorrimento' di valori 16. Tabs: opzioni Creare box e pannelli con interfaccia 'a schede' 17. Tabs: eventi e metodi Eventi e metodi per gestire al meglio il widget tab 18. Themeroller e i temi di jquery UI Personalizzare facilmente i temi di jquery UI

2 Introduzione (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 Introduzione Il web e le interfacce utente La User Experience (UX) e lo studio delle User Interface (UI) sono oggetto di studio nel campo dello sviluppo software da molti anni, tanto che tutte le aziende produttrici di sistemi operativi hanno sempre speso molte risorse nella realizzazione e ottimizzazione di linee guida per la creazione di controlli per l'interazione applicazione - utente. Nel web il campo di studi relativo alle interfacce utente è invece stato limitato dalle scarse risorse di interattività offerte dai linguaggi web che fino a poco tempo fa erano rappresentate da link e form. Negli ultimi anni, soprattutto grazie al rinnovamento dei motori di rendering JavaScript e a nuove risorse per i CSS e non ultimo per l'html, è stato possibile sperimentare nuove vie di interazione, applicando e spesso riadattando i controlli utilizzati in ambiente software alle pagine web. L'esigenza in questo caso è stata fin da subito quella di rendere l'ambiente del web il più possibile simile a quello più diffusamente conosciuto dei programmi desktop, applicando pattern come quello delle finestre modali, dei calendari dinamici e dell'aggiornamento dei dati in tempo reale senza bisogno di refresh. JavaScript e AJAX sono i principali protagonisti di questa rivoluzione negli usi e costumi delle interfacce internet, anche grazie all'introduzione di framework e librerie di supporto per gli sviluppatori. jquery UI In questa guida parleremo dell'attuale progetto ufficiale per la realizzazione di interfacce utente di jquery (http://javascript.html.it/guide/leggi/168/guida-jquery/), chiamato jquery UI (http://jqueryui.com/). Il progetto, nonostante alcuni gravi problemi di compatibilità e stabilità delle prime versioni, ha raggiunto ormai una buona maturità ed un'architettura estendibile che lo rendono un ottimo punto di partenza per tutti gli sviluppatori che vogliano dedicarsi alla realizzazione di una moderna applicazione per il web. Partito come un progetto parallelo a jquery, UI è stato ben presto inglobato nello sviluppo della libreria, pur mantenendo un gruppo di sviluppo autonomo ancor oggi guidato da Paul Bakaus, il primo sviluppatore del progetto. Arrivato alla prima versione stabile nel tardo 2007, ha subito numerose revisioni e riscritture fino all'attuale versione 1.7. Un'altro contributo importante al progetto viene da Filament Group (http://www.filamentgroup.com/), l'azienda alla base della struttura grafica dei controlli (o widget) e della loro architettura a temi (che vedremo in una lezione successiva). Al momento jquery UI è suddivisa in 3 macroaree di interesse: effetti grafici (in aggiunta a quelli di jquery); interazioni complesse (ordinamento di elementi, drag and drop, etc); widget (controlli complessi come calendari, finestre modali e navigazione a schede). jquery UI: come, dove, quando Poiché la struttura della libreria è estremamente modulare, sul sito del progetto è disponibile sia un download completo (http://jqueryui.com/download/jquery-ui custom.zip) di tutto il codice (sia sorgente che compresso per la produzione), sia un builder, con il quale ognuno può realizzare una versione personalizzata della libreria e del tema per i controlli in modo da scaricare solo ciò che serve all'applicazione: (http://jqueryui.com/download). In generale, quest'ultima opzione è utile una volta concluso il progetto e definiti gli effetti ed i controlli di cui

3 Introduzione (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 abbiamo veramente bisogno in modo da alleggerire il peso dell'applicazione. Pronti, partenza... La versione di UI che useremo negli esempi è la nel formato "completo" che si basa su jquery 1.3 e versioni successive. In ogni caso, tutti i pacchetti scaricati dal sito sono installabili molto semplicemente. Decomprimete il file scaricato. Troverete tre cartelle: css (contenente il tema dei controlli (nel nostro caso smothness), js (con i file compressi di jquery e jquery UI) e development-bundle (con tutti i sorgenti ed i file dei singoli moduli della libreria). inserite questo codice nella sezione della pagina in cui userete jquery UI: <link type="text/css" href="css/smoothness/jquery-ui custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> Nel caso abbiate già inserito un tag per richiamare jquery, potete omettere la seconda riga. Fate attenzione, comunque, che la versione di jquery UI richiede jquery Vedremo più avanti come poter caricare altri temi e personalizzarli. Al momento iniziamo a scoprire cosa ci offre jquery UI a partire dagli effetti grafici. Per la natura stessa della guida, infine, vi consigliamo di abbinare la sua lettura a quella della Guida jquery (http://javascript.html.it/guide/leggi/168/guida-jquery/) per cogliere al meglio le specificità del progetto e i modi in cui completa l'offerta del framework principale. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

4 Animazioni (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 Animazioni Molto spesso gli sviluppatori sono portati ad utilizzare gli effetti grafici come "contorno ludico" alla vera e propria interazione con l'utente. La diretta conseguenza di questo atteggiamento, è che spesso ci troviamo di fronte a pagine piene di inutili animazioni che ricordano molto dei giochi in Flash o le vecchie pagine anni '90 farcite di gif animate. In realtà, le animazioni sono uno strumento fondamentale per catturare l'attenzione dell'utente, creare relazioni fra gli elementi dell'interfaccia e creare un'interazione più fluida con i visitatori. In jquery UI l'approccio usato dagli sviluppatori è stato quello di implementare gli effetti grafici soprattutto come estensioni dei metodi già presenti nella libreria di base. Animazioni sul colore La libreria estende anzitutto le capacità del metodo.animate() nativo, introducendo le transizioni di colore che permettono di sostituire un colore con un altro con un effetto graduale. Le proprietà CSS che supportano questo effetto sono: backgroundcolor, borderbottomcolor, borderleftcolor, borderrightcolor, bordertopcolor, color, outlinecolor. L'animazione eseguirà una transizione dal colore attuale ad uno impostato in formato esadecimale, rgb o stringa (ad esempio "red", esempio (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti-01.html)). //CSS.error { background-color: #F00; color:#fff; } //JS $("#box").text("errore!").addclass("error",1000); Animazioni "di classe" Seguendo l'approccio ad estensione, UI aggiunge nuove caratteristiche ai metodi per la manipolazione delle classi CSS. Così, passando un numero in millsecondi come secondo parametro di.addclass(), le proprietà CSS definite nella classe saranno applicate con una transizione della durata indicata: $("#box").text("errore!").addclass("error",1000,"linear",function () { alert("errore Notificato!"); }); L'introduzione di questa particolare tipologia di effetti è molto importante, in quanto permette di separare la parte di scripting da quella grafica, semplificando futuri adattamenti grafici o addirittura l'adozione di diversi stili grafici pur mantenendo inalterato il codice JavaScript. Oltre al parametro della durata, il metodo.addclass() accetta altri due argomenti opzionali indicanti l'andamento (easing) dell'animazione ed una funzione da lanciare alla sua conclusione (callback). $("#box").switchclass('classecorrente','nuovaclasse',500,'easeoutbounce',function(){ alert("animazione conclusa!"); }); Ecco un esempio live (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti-02.html).

5 Animazioni (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 Altri metodi coinvolti nell'estensione sono.removeclass() e.toggleclass(); ambedue accettano i tre argomenti come.addclass(). Per concludere è stato aggiunto un quarto metodo,.switchclass(), che permette di animare un'elemento a partire da una classe applicandogli le proprietà di una seconda. Nell'ordine gli argomenti sono: classe iniziale, classe finale, durata, andamento (opzionale) e funzione conclusiva (opzionale): $("#box").switchclass('classecorrente','nuovaclasse',500,'easeoutbounce',function(){ alert("animazione conclusa!"); }); Easing avanzato Il terzo campo nel quale UI estende jquery è il numero di andamenti, in inglese easing, disponibili. Nato come plugin per jquery, questo specifico codice JavaScript permette di modificare la dinamica con cui si svolge l'animazione, simulando effetti elastici o di attrito al fine di rendere più realistica l'animazione. Potete trovare la lista di tutti gli andamenti disponibili sulla home page del progetto (http://gsgd.co.uk/sandbox /jquery/easing/). Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

6 Il metodo effect() (versione per la stampa) Guide JavaScript Javascri di 1 14/06/ :13 Il metodo effect() L'unico nuovo metodo introdotto dalla libreria è.effect(). Nella sua forma più semplice accetta un primo argomento stringa che rappresenta il tipo di effetto che vogliamo applicare alla collezione: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'. Ecco un esempio pratico (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti-03.html) che li mostra dal vivo. Di questi effetti i più interessanti sono highlight (spesso usato per evidenziare cambiamenti all'interno di una pagina, per esempio l'aggiornamento del testo di un box), blind (usato per nascondere un elemento) e transfer (per indicare il rapporto fra due elementi). Oltre al tipo di effetto il metodo accetta ulteriori due argomenti opzionali: un oggetto JavaScript per la personalizzazione dell'effetto ed una funzione da eseguire alla fine dell'animazione. I parametri con i quali è possibile modificare le impostazioni di base degli effetti variano di caso in caso e sono tutti elencati nella documentazione ufficiale (http://docs.jquery.com/ui/effects). Per esempio highlight accetta un oggetto formato da una chiave per il colore (color) da usare ed una per la modalità di visualizzazione ("hide" o "show"), mentre blind sostituisce color con direction ("vertical" o "horizontal") per specificare se l'oggetto va animato in orizzontale o verticale. Scorciatoie di visualizzazione. Parte degli effetti disponibili con in metodo.effect() possono essere realizzati anche con alcuni metodi già presenti in jquery:.show(),.hide() e.toggle(). Questi metodi accettano gli stessi parametri di.effect(), ma mantengono l'azione svolta in jquery, permettendo così di visualizzare un elemento con un effetto a tendina e nasconderlo con una esplosione (esempio (http://www.html.it/guide/esempi/jqueryui/esempi/02-effetti- 03.html)): //Mostra nascondi box $("#mostrabox").click(function () { var box = $('#box'); if (box.is(':visible')) { box.hide('explode'); } else { box.show('blind'); } }); Come detto in precedenza solo alcuni effetti possono essere associati ai metodi.show(),.hide() e.toggle(): Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale. Per tutti gli altri è necessario ricorrere sempre a.effect(). Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

7 Generalità (versione per la stampa) Guide JavaScript Javascript.HT di 1 14/06/ :13 Generalità Una parte molto importante dell'interazione fra utenti ed interfaccia riguarda il tipo di interazione da compiere. Nel web "tradizionale" le possibilità in questo campo erano abbastanza limitate e si riducevano quasi esclusivamente al click e alla digitazione da tastiera in campi di form. Al giorno d'oggi, invece, le librerie UI permettono un'interazione più ricca e molto più vicina a quella diffusa nelle applicazioni desktop. Alcune di queste interazioni riguardano l'ordinamento degli elementi, il loro trascinamento e la selezione. Molti di noi sono ormai abituati al diverso contesto interattivo, ma provate a pensare quanto sia diversa (e più povera) l'interazione che abbiamo con una comune pagina web rispetto al contesto desktop. In questo capitolo vedremo come alcune interazioni complesse siano rese semplici da implementare grazie ai metodi di jquery UI. Sintassi comune Prima di iniziare a vedere nel dettaglio le interazioni, è utile sottolineare che nella maggior parte dei casi è possibile richiamare ed interagire con i metodi di jquery UI nello stesso modo. Così, se la sintassi seguente rende trascinabile un elemento con id box (esempio (http://www.html.it/guide/esempi/jqueryui/esempi /03-draggable-01.html)): $("#box").draggable(); a sua volta il metodo accetta un argomento sotto forma di oggetto JavaScript che permette di personalizzare le opzioni di base. Oltre a tale oggetto, possiamo passare ai metodi degli argomenti come stringa di testo con i quali, ad esempio, disabilitare l'interazione: $("#box").draggable("disable"); per poi riattivarla passando a.draggable() la stringa "enable". Se invece volessimo rimuovere definitivamente l'interazione, dovremo passare come primo argomento "destroy". Un'ultima possibilità è quella di ricavare o impostare un determinato parametro di configurazione anche dopo l'inizializzazione dell'interazione: $("#box").draggable("option","delay"); //ricava un'opzione $("#box").draggable("option","delay",500); //imposta un'opzione Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

8 Draggable (trascinare oggetti) (versione per la stampa) Guide JavaScri di 3 14/06/ :14 Draggable (trascinare oggetti) Sebbene spostare oggetti sia un'interazione particolarmente familiare, nel web essa comporta una serie di considerazioni complesse ed un non meno complesso codice JavaScript per garantire la compatibilità crossbrowser. jquery UI risponde a questa esigenza anzitutto con il metodo.draggable() che, associato ad un elemento, lo rende trascinabile alla pressione del mouse: $("#contenitore div").draggable(); Per permettere la personalizzazione grafica, a tutti gli elementi associati all'interazione, viene aggiunta la classe ui-draggable. In più, per permettere un feedback visivo durante il trascinamento, viene aggiunta anche la classe ui-draggable-dragging. Opzioni Naturalmente non tutto si risolve con il semplice metodo senza argomenti: un'interazione di questo tipo comporta la necessità di essere personalizzabile per aderire al meglio a diverse situazioni ed interfacce. Questi i parametri principali che possono essere passati al metodo in un secondo argomento di tipo { chiave : valore} (e il valore di default): appendto: (elemento, selettore - 'parent') L'elemento o il selettore CSS che sarà individuato come contenitore degli elementi draggabili (trascinabili), il valore di default "parent" indica che verrà usato l'elemento contenitore degli elementi. axis: (stringa - false) Limita il movimento sull'asse orizzontale ('x') o verticale ('y'). cancel: (selettore - ':input,option') Previene l'interazione quando il cursore interagisce con gli elementi indicati nel selettore. Il valore di default, per esempio, evita che un'elemento sia mosso accidentalmente quando si sceglie un'opzione da un menu a tendina o si scrive in un campo form. connecttosortable: (selettore - false) Questa opzione può essere utile quando sono presenti elementi mobili indipendenti che vogliamo poter aggiungere ad una lista di elementi ordinabili (indicata dal selettore CSS). Come vedremo più avanti.sortables() è basato sul drag and drop, ma considera gli elementi mobili come una lista ordinata in cui ognuno occupa una posizione definita. containment: (selettore, elemento, array, stringa - false) Definisce il limite entro il quale gli elementi possono essere trascinati. Alcune opzioni sono: 'parent', 'document', 'window', [x1, y1, x2, y2]. cursor: (stringa - 'auto') Specifica come deve apparire il cursore durante il trascinamento. In questo caso viene usato il valore CSS della regola cursor. Non esiste una vera e propria regola, in questo caso: c'è chi usa 'move' e chi 'pointer'. Personalmente preferisco quest'ultima opzione perché è più intuitiva per l'utente medio. delay: (intero - 0) Indica i millisecondi fra il momento in cui l'utente clicca con il mouse e l'inizio dell'interazione. Può essere utile per evitare click accidentali. Tuttavia un intervallo troppo lungo può essere interpretato come una lentezza dell'applicazione. distance: (intero - 1) Indica di quanti pixel dovrà muoversi il mouse (quando premuto) perché l'elemento inizi a seguirlo. Come

9 Draggable (trascinare oggetti) (versione per la stampa) Guide JavaScri di 3 14/06/ :14 nel caso precedente questa opzione può prevenire interazioni accidentali, tuttavia valori elevati renderanno gli elementi troppo appiccicosi e difficili da spostare. grid: (array - false) Lega il movimento dell'elemento mobile ad una griglia definita in pixel. Questa opzione è utile quando si ha la necessità di ordinare spazialmente più elementi, per esempio nel caso in cui volessimo rendere l'idea di una scacchiera. Il valore passato è un array con un valore per la larghezza ed uno per l'altezza di un blocco della griglia. handle: (elemento, selettore - false) Identifica un elemento da utilizzare come maniglia per il trascinamento. In questo modo l'interazione verrà avviata solo quando l'utente cliccherà e trascinerà quello specifico elemento, ma non in altre parti dell'elemento mobile. helper: (stringa, funzione - 'original') Permette l'utilizzo di elementi di aiuto. Se impostato su 'clone', ad esempio, verrà creato un clone dell'oggetto da trascinare e sarà spostato quest'ultimo invece dell'elemento originale fino al suo rilascio. In alcuni casi è possibile generare con una funzione un elemento DOM che funga da segnaposto per l'elemento (per esempio un piccolo box) in modo da limitare la complessità dell'elemento trascinato, aumentare le performance e semplificare l'interfaccia. Di default viene utilizzato direttamente l'elemento da trascinare. opacity: (decimale - false) Indica l'opacità che deve assumere l'elemento di aiuto. Può essere utile per indicare visivamente lo stato precario dell'elemento e per mostrare gli elementi a lui sottostanti. scope: (stringa - 'default') Viene utilizzato per raggruppare elementi trascinabili con aree di rilascio specifiche. In pratica serve a definire dei contenitori entro i quali poter rilasciare gli elementi. scroll: (booleano - true) Se impostato su true il contenitore dell'elemento trascinato scorrerà (scrolling) seguendo il movimento. Questa opzione è utile per facilitare l'interazione ad utenti con basse risoluzioni o schermi piccoli o in presenza di aree di trascinamento molto estese. snap: (booleano, selettore - false) Se impostato ad un selettore o su true, l'elemento trascinato si incollerà ad un elemento adiacente arrivato ad una certa distanza da questo. snapmode: (stringa - 'both') Definisce a quale limite degli elementi adiacenti si incollerà l'elemento trascinato. I valori possibili sono: 'inner', 'outer', 'both'. snaptolerance: (intero - 20) La distanza entro la quale si verifica lo snap. L'effetto per l'utente sarà quello di una calamita. La lista completa delle opzioni è disponibile su questa pagina (http://docs.jquery.com/ui/draggable), mentre qui (http://www.html.it/guide/esempi/jqueryui/esempi/03-draggable-02.html) sono disponibili alcuni esempi. Eventi associati Oltre alle opzioni è possibile associare all'oggetto passato a.draggable() delle funzioni di callback in base agli eventi dell'interazione, questi sono: start (inizio del trascinamento) stop (fine dell'interazione) drag (durante il trscinamento) Tutte le callback ricevono due argomenti: l'evento nativo del browser e un oggetto ui con le seguenti proprietà: ui.helper - l'oggetto jquery dell'elemento trascinato ui.position - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente all'elemento contenitore ui.offset - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente alla pagina

10 Draggable (trascinare oggetti) (versione per la stampa) Guide JavaScri di 3 14/06/ :14 Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

11 Droppable (rilasciare oggetti trascinati) (versione per la stampa) Guid di 2 14/06/ :14 Droppable (rilasciare oggetti trascinati) L'interazione droppable è strettamente collegata a draggable e insieme concorrono al paradigma del drag'n'drop ormai molto diffuso sul web. Sintetizzando il concetto, droppable realizza il contenitore in cui gli elementi trascinabili possono essere rilasciati. In jquery UI questa interazione è richiamata dal metodo.droppable(): $("#dropbox").droppable(); Opzioni Le opzioni principali che possono essere passate a.droppable() (sempre attraverso un oggetto JavaScript) sono: accept: (selettore, funzione - '*') Indica quali elementi trascinabili sono accettati all'interno del contenitore. Può essere un selettore CSS del tipo "#lista div" oppure una funzione da applicare sull'elemento trascinato e che deve restituire true perché questo venga accettato. Di default ogni elemento può essere rilasciato nel contenitore. greedy: (booleano - false) Se impostato su true previene la propagazione dell'evento di rilascio agli elementi annidati nel contenitore. Questo significa che un elemento risulterà aggiunto al contenitore solo se rilasciato direttamente al suo interno, ma non all'interno di eventuali figli. scope: (stringa - 'default') Permette di accettare solo elementi trascinati che appartengono allo stesso scope (che viene impostato con la stessa modalità in draggable), in modo da poter filtrare gli elementi prima ancora di rilasciarli. tollerance: (stringa - 'intersect') Definisce quando un oggetto può essere rilasciato in modo che possa essere catturato dal contenitore. I valori possibili sono: fit: tutto l'elemento trascinato è sopra al contenitore intersect: almeno metà dell'elemento è sopra il contenitore pointer: il mouse è nel contenitore touch: appena l'elemento tocca il contenitore. Questa opzione è molto importante per quanto riguarda l'esperienza utente, in quanto da essa dipende l'usabilità dell'interazione. In realtà nessuna di esse è più indicata dell'altra, ma tutto dipende dalle dimensioni degli elementi trascinati e dalla distanza fra il punto di inizio e fine del trascinamento. Ad esempio, intersect è un buon compromesso solo nel caso in cui l'oggetto trascinato non sia troppo grande, mentre touch potrebbe attivare l'interazione troppo presto rendendo l'interfaccia imprecisa. Eventi Come per.draggable(), è possibile associare una funzione di callback ad alcuni eventi durante l'interazione. Tutte le funzioni accettano due argomenti: l'evento e un oggetti ui con le seguenti chiavi:.draggable - un oggetto jquery del elemento che trascinato..helper - l'helper dell'oggetto trascinato (che potrebbe essere l'oggetto stesso).

12 Droppable (rilasciare oggetti trascinati) (versione per la stampa) Guid di 2 14/06/ :14.position - la posizione dell'helper in formato oggetto { top:, left: }..offset - la posizione assoluta dell'helper in formato oggetto { top:, left: }. Gli eventi a cui è possibile associare una funzione sono: activate / deactivate: questi eventi sono lanciati quando un elemento a cui è associato.draggable() viene trascinato o rilasciato. Può risultare utile per evidenziare l'area di rilascio solo quando un oggetto viene trascinato per mantenere più pulita l'interfaccia. over / out / drop: questi eventi segnano l'interazione fra l'elemento trascinato e l'area di rilascio, più precisamente quando l'elemento è dentro l'area (vedi l'opzione tollerance), ne esce oppure vi viene rilasciato. Su questa pagina (http://www.html.it/guide/esempi/jqueryui/esempi/04-droppable.html)è possibile vedere alcuni esempi del metodo in azione. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

13 Resizable (ridimensionare finestre ed elementi) (versione per la stampa)... di 2 14/06/ :14 Resizable (ridimensionare finestre ed elementi) Ridimensionare le finestre del nostro sistema operativo è un'operazione che compiamo spesso e che serve a gestire meglio la limitata dimensione del nostro monitor; al contrario, sul web l'esigenza di poter ridimensionare blocchi e finestre a comparsa è stata per molti anni poco sentita, viste le limitate interazioni disponibili per l'utente. Con l'introduzione di finestre modali al posto dei pop-up e successivamente di layout "mobili" e personalizzabili, è stato necessario realizzare anche questo tipo di interazione. jquery UI mette a disposizione il metodo.resizable(), che permette di ridimensionare un elemento con lo stesso tipo di azioni ormai familiari nelle applicazioni desktop semplicemente richiamando su di esso il metodo: $("#box").resizable(); In questo modo verranno aggiunte delle maniglie (di default sul lato destro, basso e nell'angolo inferiore destro del box) con le quali poter allargare o restringere un elemento (esempio (http://www.html.it/guide /esempi/jqueryui/esempi/05-resizable-01.html)). L'utilizzo di questa interazione è molto delicato poiché il ridimensionamento di un elemento potrebbe causare problemi alla visualizzazione di quelli adiacenti o addirittura "scombinare" l'intero layout. Proprio per questo è importante personalizzarne il comportamento per adattarlo alle nostre esigenze. Opzioni Le opzioni di personalizzazione più importanti in questo caso sono: maxheight / maxwidth / minheight / minwidth : (intero - null) imposta dimensioni massime e minime per l'elemento ridimensionato. È un'impostazione importante per evitare che l'utente possa rimpicciolire troppo un box, perdendo la possibilità di interagirvi, oppure al contrario che possa ingrandirlo troppo oltre il layout o il viewport del browser tanto da oscurare altri elementi; containment : (stringa, selettore, elemento - false) indica un elemento che delimiti l'estendibilità dell'oggetto ridimensionabile. Anche in questo caso, se possibile, identificare un contenitore serve a limitare entro limiti ragionevoli le possibilità dell'utente; aspectratio : (booleano, decimale - false) dà la possibilità di forzare una proporzione fra altezza e larghezza durante il ridimensionamento. Se impostato su true verranno mantenute le proporzioni originali altrimenti si possono impostare proporzioni personalizzate come 0.5 o 16/9; handles : (stringa,oggetto - 'e, s, se') indica quali maniglie devono essere create per il ridimensionamento. Le posizioni possibili sono identificate secondo le sigle dei punti cardinali, quindi quelle di default sono est, sud, sudest (destra, sotto, in basso a destra); Fra le opzioni troviamo anche grid, delay e distance, che ricalcano quelle già trovate in.draggable(). Rispettivamente indicano una griglia di ridimensionamento fissa, dopo quanto tempo avviare l'interazione e dopo quanti pixel di trascinamento di una maniglia. La regolazione di questi parametri concorre alla sensazione di "appiccicosità" dell'elemento al layout sottostante. Infine, due tipologie di opzioni contrastanti sono animate e ghost: la prima abilita il ridimensionamento con un'animazione (e specifici valori per andamento e durata), la seconda crea un helper semitrasparente

14 Resizable (ridimensionare finestre ed elementi) (versione per la stampa)... di 2 14/06/ :14 che fa da traccia durante il ridimensionamento. La differenza a livello di interfaccia è sostanziale: come succede nei sistemi desktop, un'animazione risulta senza dubbio più "spettacolare" tuttavia richiede più risorse rispetto ad un helper e soprattutto rallenta l'utente che deve aspettare la fine dell'effetto per continuare il suo lavoro. In generale, se non strettamente necessario, l'animazione risulta superflua e controproducente. Ecco alcuni esempi (http://www.html.it/guide/esempi/jqueryui/esempi/05-resizable-02.html) di personalizzazione del metodo. Eventi Chiudiamo questa lezione con la lista di eventi collegati a.resizable(), che sono start, stop e resize, lanciati all'inizio, alla fine e durante il ridimensionamento. Tutti questi eventi accettano due argomenti: l'evento Javascript e un oggetto ui con le seguenti proprietà:.helper - un oggetto jquery contenente l'helper.originalposition - {top, left} posizione originale dell'elemento.originalsize - {width, height} dimensione originale.position - {top, left} posizione corrente.size - {width, height} dimensione corrente Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

15 Selectable (selezionare oggetti) (versione per la stampa) Guide JavaSc... di 1 14/06/ :15 Selectable (selezionare oggetti) La caratteristica vincente dei file manager grafici rispetto a quelli testuali o alla riga di comando, è la possibilità di selezionare file e cartelle semplicemente selezionandole con un click del mouse, oppure disegnando un rettangolo su più elementi che vengono raggruppati in un'unica selezione. Il metodo.selectable() di jquery UI permette di applicare facilmente questa interazione ad elementi presenti in un interfaccia web, fornendo sia un metodo di selezione multipla "con rettangolo" sia un sistema di selezione di elementi non contigui con l'uso del tasto Ctrl (o Mela) in abbinamento al click sinistro del mouse. Poter selezionare in questo modo degli elementi fornisce un'interazione più veloce e intuitiva con liste di oggetti rispetto a quelle basate, ad esempio, sui tradizionali checkbox dei moduli (provare per credere (http://www.html.it/guide/esempi/jqueryui/esempi/06-selectable-01.html)). Opzioni Le opzioni pù importanti con le quali personalizzare l'interazione sono: filter : (selettore - "*") permette di identificare specifici elementi da rendere selezionabili, per esempio: $("#lista").selectable({filter : "li.selezionabile"}); Eventi delay : (intero - 0) millisecondi dopo i quali selezionare un elemento. distance : (intero - 0) solo dopo che il rettangolo di selezione sarà sovrapposto a un elemento per i pixel specificati questo verrà selezionato. Questa opzione è strettamente legata a quanto impostato in tolerance. tolerance : (stringa - 'touch') se impostato su 'touch' l'elemento sarà selezionato appena il rettangolo di selezione lo toccherà, altrimenti, se impostato su 'fit', tutto l'elemento dovrà essere all'interno del rettangolo di selezione. Anche in questo caso l'opzione migliore è relativa alle dimensioni dell'area di selezione e degli elementi selezionabili. Touch è spesso la risposta migliore ma con elementi molto concentrati potrebbe rendere difficoltosa e frustrante la selezione. Ecco alcuni esempi (http://www.html.it/guide/esempi /jqueryui/esempi/06-selectable-02.html). Gli eventi associati a.selectable() sono: start / stop: lanciati all'inizio e alla fine dell'interazione. selecting / unselecting: lanciati quando un elemento sta per essere selezionato o deselezionato. Potrebbe essere utile per colorarlo diversamente in modo da migliorare il feedback dato all'utente. selected / unselected: lanciati su elementi appena selezionati o deselezionati. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

16 Sortable (ordinare elementi) (versione per la stampa) Guide JavaScript di 3 14/06/ :15 Sortable (ordinare elementi) L'ultima interazione di jquery UI che affrontiamo è.sortable() e nasce dall'unione di più interazioni delle quali condivide molte opzioni:.draggable() e.droppable(). La caratteristica aggiuntiva del metodo rispetto alle interazioni che lo compongono è che gli elementi non vengono solo trascinati e rilasciati, ma vanno a creare un insieme ordinato ricavabile tramite un metodo specifico. In questo modo è possibile offrire all'utente un sistema intuitivo e diretto per ordinare liste di vario genere al posto di metodi più tradizionali come select e campi di testo numerici (esempio (http://www.html.it /guide/esempi/jqueryui/esempi/07-sortable-01.html)). Configurazione Come per le altre interazioni, anche.sortable() ha alcune interessanti opzioni di personalizzazione. Anzitutto condivide opzioni presenti in.draggable(), come axis (per specificare l'asse secondo cui è possibile trascinare un elemento), delay e distance per controllare quando l'interazione fra il mouse e gli elementi deve iniziare, oppure grid per costringere gli spostamenti secondo una griglia in pixel. Il metodo ha anche opzioni proprie, più specifiche per la personalizzazione dell'ordinamento degli elementi: connectwith : (selettore - false) Connette gli elementi ordinabili ad un'altra lista ordinabile, in modo che possano essere trascinati dall'una all'altra. $('.lista').sortable({ connectwith: '.altralista' }); droponempty : (booleano - false) Se impostato su false gli elementi della lista non possono essere rilasciati in una lista collegata (con connectwith) se quest'ultima è al momento vuota. Ecco alcuni esempi (http://www.html.it/guide/esempi/jqueryui/esempi/07-sortable-02.html) di personalizzazione. Eventi Gli eventi associati all'interazione, e ai quali possiamo collegare una funzione di callback, sono: start / sort / stop: lanciato all'inizio, durante ed alla fine dell'interazione. change: lanciato durante l'ordinamento, ma sono quando la posizione dell'elemento trascinato è cambiata. beforestop: lanciato quando l'ordinamento è finito ma l'helper (impostato con l'opzione helper) è ancora disponibile. update: lanciato quando l'utente rilascia un elemento e la sua posizione è cambiata. receive: lanciato quando una lista connessa (con connectwith) riceve un elemento dalla lista corrente. remove: lanciato quando un elemento è rimosso da una lista per essere inserito in una collegata. over / out: lanciato quando un'elemento viene spostato su una lista collegata o ne esce. activate / deactivate: lanciato su tutte le liste collegate quando ha inizio l'interazione sulla lista principale. Tutti gli eventi prevedono due argomenti: l'evento nativo del browser ed un oggetto ui con le seguenti proprietà:

17 Sortable (ordinare elementi) (versione per la stampa) Guide JavaScript di 3 14/06/ :15.helper: l'helpercorrente..position: posizione dell'helper..offset: posizione assoluta dell'helper..item: l'elemento trascinato corrente..placeholder: il segnaposto se definito..sender: la lista di provenienza, solo nel caso in cui ci siano liste collegate a quella principale. Metodi specifici Come per le altre interazioni, anche.sortable() supporta dei metodi generici per inizializzare o rimuovere l'interazione, oppure per cambiare alcune opzioni su un'interazione preesistente: //Inizializza la lista con le opzioni di default $("#lista1").sortable(); //Personalizza un'opzione specifica $("#lista1").sortable("option","connectwith","#lista2"); Oltre a questi metodi, comuni a tutte le interazioni,.sortable() ne offre altri utili per gestire l'ordinamento degli elementi nella lista: cancel: cancella l'ultimo cambiamento avvenuto nella lista. È utile per permettere all'utente di tornare sui propri passi, oppure associato agli eventi stop e receive per rimediare ad eventuali ordinamenti errati: }); $("#lista1").sortable({ stop : function (event,ui) { if (ui.item.is(".bloccato")) { // this si riferisce alla lista $(this).sortable("cancel"); } } refresh: aggiorna gli elementi della lista, aggiungendo quelli non presenti al momento dell'inizializzazione dell'interazione (aggiunti, per esempio, con AJAX). serialize: serializza gli id degli elementi ordinati, restituendo una stringa inviabile via AJAX o attraverso un form. La struttura degli id da assegnare agli elementi della lista segue una regola generale del tipo nomevariable_valore, quindi una lista del tipo: <ul id="lista"> <li id="lista_1">uno</li> <li id="lista_3">tre</li> <li id="lista_2">due</li> </ul> Sarà serializzata nella stringa: "lista[]=1&lista[]=2&lista[]=3" toarray: raccoglie gli id degli elementi nella lista e li restituisce sotto forma di array JavaScript. Riprendendo la lista dell'esempio precedente: var lista = $("#lista").sortable("toarray"); //restituisce // lista[0] = "lista_1" // lista[1] = "lista_3" // lista[2] = "lista_2"

18 Sortable (ordinare elementi) (versione per la stampa) Guide JavaScript di 3 14/06/ :15 Per quanto riguarda il metodo serialize, è possibile modificare il comportamento di default passando un secondo argomento sotto forma di oggetto JavaScript contenente una o più delle seguenti opzioni: key: indica una stringa da sostituire alla prima parte dell'id (corrispondente al nome della variabile) attribute: indica un attributo valido dell'elemento da utilizzare al posto di id expression: filtra il valore di id (o dell'attributo specificato con attribute) con un'espressione regolare per estrarne il valore da inserire nella stringa finale. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

19 Introduzione ai widget di jquery UI (versione per la stampa) Guide J di 2 14/06/ :20 Introduzione ai widget di jquery UI Nelle interfacce delle applicazioni web moderne, i controlli nativi dei browser come select, checkbox e campi di testo, risultano spesso limitativi per le esigenze di interazione con l'utente. In alcuni casi, ad esempio, avere a disposizione un calendario a comparsa per la selezione delle date facilita l'utente rispetto a dover scegliere da tre menu a discesa, magari controllando il giorno della settimana sul calendario del sistema operativo. Questi tipi di controlli web ricadono in jquery UI sotto il nome di Widget. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso associato ad applicazioni del desktop, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l'inserimento dei dati da una pagina web. Quali Widget? Un'altra parte del discorso relativa all'utilizzo dei widget è: quali usare e quando? In linea di principio, è importante utilizzare i widget quando strettamente richiesto, in modo da non sovraccaricare la pagina con eccessivo codice JavaScript in esecuzione, senza lasciarsi abbagliare dai luccichii degli effetti grafici. In definitiva, non sempre i dati vanno divisi in tab o accordion, oppure non sempre mostrare un messaggio con una finestra modale può migliorare il feedback all'utente (chi di voi non ha mai visto alcuni messaggi di errore di Facebook, trovandoli eccessivamente tecnici). Widget disponibili jquery UI comprende nativamente sei tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (http://jqueryui.com/themeroller/) (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione. I widget che vedremo nelle prossime lezioni sono: Accordion Datepicker Dialog Progressbar Slider Tabs Derivando dalle interazioni, tutti i widget ne prevedono una sintassi simile. È quindi possibile passare un oggetto al metodo che inzializza il controllo, come leggerla e modificarla successivamente: //inizializzo un widget $("#accordion").accordion({ active : 2 }); //leggo un'opzione var active = $("#accordion").accordion("option","active"); // imposto un'opzione $("#accordion").accordion("option","active",1); Oltre ad option, in generale i widget accettano altri tre metodi: destroy: rimuove il widget dall'elemento a cui era associato; disable: disabilita temporaneamente il widget; enable: abilita il widget nel caso in cui sia stato disabilitato.

20 Introduzione ai widget di jquery UI (versione per la stampa) Guide J di 2 14/06/ :20 Voglio di più! In un capitolo successivo di questa guida vedremo come estendere jquery UI con widget personalizzati. Questo processo è semplificato da una nomenclatura e una documentazione abbastanza rigorose, ma proprio per questo è necessario rispettare molte regole e non sempre si raggiunge la flessibilità voluta. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/ MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http:///ecdl/powerpoint/ INTERFACCIA UTENTE TIPICA DI UN SOFTWARE DI PRESENTAZIONE APERTURA E SALVATAGGIO DI UNA PRESENTAZIONE

Dettagli

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare.

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare. Capitolo 6 jquery Negli ultimi anni è stata rilasciata una mole incalcolabile di framework JavaScript, più o meno completi, realizzati per supportare nel miglior modo possibile lo sviluppatore web aiutandolo

Dettagli

Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione. Patente Europea di Informatica ECDL Modulo 6

Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione. Patente Europea di Informatica ECDL Modulo 6 Patente Europea di Informatica ECDL Modulo 6 Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione Anno 2009/2010 Syllabus 5.0 Microsoft PowerPoint è un software progettato

Dettagli

Uso del computer e gestione dei file

Uso del computer e gestione dei file Uso del computer e gestione dei file Sommario Uso del computer e gestione dei file... 3 Sistema Operativo Windows... 3 Avvio di Windows... 3 Desktop... 3 Il mouse... 4 Spostare le icone... 4 Barra delle

Dettagli

Introduzione a Word. Prima di iniziare. Competenze che saranno acquisite. Requisiti. Tempo stimato per il completamento:

Introduzione a Word. Prima di iniziare. Competenze che saranno acquisite. Requisiti. Tempo stimato per il completamento: Introduzione a Word Word è una potente applicazione di elaborazione testi e layout, ma per utilizzarla nel modo più efficace è necessario comprenderne gli elementi di base. Questa esercitazione illustra

Dettagli

Strumenti per lo sviluppo

Strumenti per lo sviluppo Strumenti per lo sviluppo Librerie Javascript jquery script.aculo.us Componenti aggiuntivi per i browser firefox e chrome Firebug Web developer Alcune utility on-the-fly Generatore di sorgente di codice

Dettagli

Indice generale. Le persone dietro questo libro...xi. Introduzione...xv. Innamorarsi di jquery...1

Indice generale. Le persone dietro questo libro...xi. Introduzione...xv. Innamorarsi di jquery...1 Indice generale Le persone dietro questo libro...xi Introduzione...xv A chi si rivolge questo libro...xvi Contenuti del libro...xvi Dove trovare informazioni...xviii Il sito web del libro...xix Le newsletter

Dettagli

Creazione di un elemento grafico SmartArt Crea una nuova diapositiva con layout Titolo e contenuto.

Creazione di un elemento grafico SmartArt Crea una nuova diapositiva con layout Titolo e contenuto. G. Pettarin ECDL Modulo 6: Strumenti di presentazione 98 6. Gli Smartart Con gli elementi grafici SmartArt si può rappresentare visivamente le informazioni e i concetti che si vuole illustrare. È possibile

Dettagli

Guida di Keyboard Builder. 2009 Sielco Sistemi Srl

Guida di Keyboard Builder. 2009 Sielco Sistemi Srl Guida di Keyboard Builder Guida di Keyboard Builder Keyboard Builder è uno strumento che permette di costruire tastiere da visualizzare sullo schermo, utili per la realizzazione di applicazioni che operano

Dettagli

Manuale LIM Hitachi FX77- PARTE 1

Manuale LIM Hitachi FX77- PARTE 1 Manuale LIM Hitachi FX77- PARTE 1 Sommario Che cos'è StarBoard Software?... 2 Elementi dello schermo... 2 Guida rapida all'avvio... 3 Selezione di una modalità... 5 Disegno... 6 Disegno con gli strumenti

Dettagli

1. MODALITA' DI LAVORO SUL FOGLIO ELETTRONICO.

1. MODALITA' DI LAVORO SUL FOGLIO ELETTRONICO. 1. MODALITA' DI LAVORO SUL FOGLIO ELETTRONICO. Excel esegue una analisi della riga introdotta o modificata in una cella per stabilire se si tratta di un valore e di che tipo (numero semplice, data, formula,

Dettagli

Microsoft Access - dispensa didattica ECDL Modulo 5 - a cura di Antonino Terranova PAG 1

Microsoft Access - dispensa didattica ECDL Modulo 5 - a cura di Antonino Terranova PAG 1 Microsoft Access - Determinare l input appropriato per il database...2 Determinare l output appropriato per il database...2 Creare un database usando l autocomposizione...2 Creare la struttura di una tabella...4

Dettagli

Foglio di calcolo. Numero Valuta Testo Data e Ora Percentuale

Foglio di calcolo. Numero Valuta Testo Data e Ora Percentuale Foglio di calcolo Foglio di calcolo Foglio organizzato in forma matriciale: migliaia di righe e centinaia di colonne In corrispondenza di ciascuna intersezione tra riga e colonna vi è una CELLA Una cella

Dettagli

Foglio elettronico. OpenOffice.org Calc 1.1.3

Foglio elettronico. OpenOffice.org Calc 1.1.3 Foglio elettronico OpenOffice.org Calc 1.1.3 PRIMI PASSI CON IL FOGLIO ELETTRONICO Aprire il programma Menu Avvio applicazioni Office OpenOffice.org Calc. Chiudere il programma Menu File Esci. Pulsanti

Dettagli

MICROSOFT EXCEL INTRODUZIONE PRIMI PASSI

MICROSOFT EXCEL INTRODUZIONE PRIMI PASSI MICROSOFT EXCEL INTRODUZIONE Si tratta di un software appartenente alla categoria dei fogli di calcolo: con essi si intendono veri e propri fogli elettronici, ciascuno dei quali è diviso in righe e colonne,

Dettagli

UTILIZZO DI WORD PROCESSOR

UTILIZZO DI WORD PROCESSOR UTILIZZO DI WORD PROCESSOR (ELABORAZIONE TESTI) Laboratorio Informatico di base A.A. 2013/2014 Dipartimento di Scienze Aziendali e Giuridiche Università della Calabria Dott. Pierluigi Muoio (pierluigi.muoio@unical.it)

Dettagli

Il foglio elettronico

Il foglio elettronico Il foglio elettronico Foglio di calcolo, Spreadsheet in inglese, Permette di elaborare DATI NUMERICI. E una TABELLA che contiene numeri che possono essere elaborati con FUNZIONI matematiche e statistiche.

Dettagli

Portale cartografico del Servizio Geologico, Sismico e dei Suoli Guida utente

Portale cartografico del Servizio Geologico, Sismico e dei Suoli Guida utente Portale cartografico del Servizio Geologico, Sismico e dei Suoli Guida utente 1. Introduzione Il Portale cartografico del Servizio Geologico, Sismico e dei Suoli (SGSS) rappresenta l evoluzione dell ambiente

Dettagli

MICROSOFT WORD. Funzioni ed ambiente di lavoro

MICROSOFT WORD. Funzioni ed ambiente di lavoro INFORMATICA MICROSOFT WORD Prof. D Agostino Funzioni ed ambiente di lavoro...1 Interfaccia di Word...1 Stesso discorso per i menu a disposizione sulla barra dei menu: posizionando il puntatore del mouse

Dettagli

Istituto Alberghiero De Filippi Laboratorio di informatica Corso ECDL MODULO 6 ECDL. Strumenti di presentazione Microsoft PowerPoint ECDL

Istituto Alberghiero De Filippi Laboratorio di informatica Corso ECDL MODULO 6 ECDL. Strumenti di presentazione Microsoft PowerPoint ECDL Istituto Alberghiero De Filippi Laboratorio di informatica Corso ECDL MODULO 6 ECDL Strumenti di presentazione Microsoft PowerPoint ECDL Gli strumenti di presentazione servono a creare presentazioni informatiche

Dettagli

POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti.

POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti. 1 POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti. Le presentazioni sono composte da varie pagine chiamate diapositive

Dettagli

Crotone, maggio 2005. Windows. Ing. Luigi Labonia E-mail luigi.lab@libero.it

Crotone, maggio 2005. Windows. Ing. Luigi Labonia E-mail luigi.lab@libero.it Crotone, maggio 2005 Windows Ing. Luigi Labonia E-mail luigi.lab@libero.it Sistema Operativo Le funzioni software di base che permettono al computer di funzionare formano il sistema operativo. Esso consente

Dettagli

manuale utente rev. 2.0 powered by

manuale utente rev. 2.0 powered by manuale utente rev. 2.0 powered by www.cantierecreativo.net MANUALE UTENTE REV.2 Indice generale 1 Introduzione... 2 2 Accesso all'area amministrativa...3 3 Sezione Pagine... 4 3.1 Pagine recenti...4 3.2

Dettagli

Manuale di sviluppo Geecom Scritto da Andrea Pastore. versione 2.1 24/11/2014

Manuale di sviluppo Geecom Scritto da Andrea Pastore. versione 2.1 24/11/2014 Manuale di sviluppo Geecom Scritto da Andrea Pastore versione 2.1 24/11/2014 Capitolo 1: creare un template per Geecom La struttura di un template geecom Creare un template personalizzato Sommario Capitolo

Dettagli

MICROSOFT ACCESS. Fabrizio Barani 1

MICROSOFT ACCESS. Fabrizio Barani 1 MICROSOFT ACCESS Premessa ACCESS è un programma di gestione di banche dati, consente la creazione e modifica dei contenitori di informazioni di un database (tabelle), l inserimento di dati anche mediante

Dettagli

Foglio elettronico. Foglio elettronico EXCEL. Utilizzo. Contenuto della cella. Vantaggi EXCEL. Prof. Francesco Procida procida.francesco@virgilio.

Foglio elettronico. Foglio elettronico EXCEL. Utilizzo. Contenuto della cella. Vantaggi EXCEL. Prof. Francesco Procida procida.francesco@virgilio. Foglio elettronico Foglio elettronico EXCEL Prof. Francesco Procida procida.francesco@virgilio.it Il foglio elettronico è un programma interattivo, che mette a disposizione dell utente una matrice di righe

Dettagli

CREARE PRESENTAZIONI CON POWERPOINT

CREARE PRESENTAZIONI CON POWERPOINT CREARE PRESENTAZIONI CON POWERPOINT Una presentazione è un documento multimediale, cioè in grado di integrare immagini, testi, video e audio, che si sviluppa attraverso una serie di pagine chiamate diapositive,

Dettagli

Le sezioni logiche di una pagina web

Le sezioni logiche di una pagina web Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)

Dettagli

Foglio Elettronico. Creare un nuovo foglio elettronico Menu File Nuovo 1 clic su Cartella di lavoro vuota nel riquadro attività

Foglio Elettronico. Creare un nuovo foglio elettronico Menu File Nuovo 1 clic su Cartella di lavoro vuota nel riquadro attività Foglio Elettronico Avviare il Programma Menu Start Tutti i programmi Microsoft Excel Pulsanti 2 clic sull icona presente sul Desktop Chiudere il Programma Menu File Esci Pulsanti Tasto dx 1 clic sul pulsante

Dettagli

Il browser Microsoft Edge

Il browser Microsoft Edge Il browser Microsoft Edge Il nuovo browser della Microsoft, rilasciato con la versione Windows 10, è Microsoft Edge. Esso sembra offrire nuovi modi per trovare contenuti, leggere e scrivere sul Web. Per

Dettagli

Gestione dei contenuti web Ultimi eventi

Gestione dei contenuti web Ultimi eventi Gestione dei contenuti web Ultimi eventi Questo manuale illustra le operazioni più comuni per la manutenzione e aggiornamento del sito web http://terremoti.ingv.it/ultimi eventi/ tramite l interfaccia

Dettagli

Impress è il programma per la creazione di presentazioni della suite OpenOffice.org.

Impress è il programma per la creazione di presentazioni della suite OpenOffice.org. Impress è il programma per la creazione di presentazioni della suite OpenOffice.org. Barra dei menu Menu degli strumenti standard Vista diapositive Pannello delle attività Menu degli strumenti di presentazione

Dettagli

GUIDA DOCENTE PIATTAFORMA E-LEARNING MOODLE

GUIDA DOCENTE PIATTAFORMA E-LEARNING MOODLE GUIDA DOCENTE PIATTAFORMA E-LEARNING MOODLE Università degli Studi di Bergamo Centro per le Tecnologie Didattiche e la Comunicazione GUIDA ANALITICA PER ARGOMENTI ACCESSO...2 RISORSE e ATTIVITA - Introduzione...5

Dettagli

MANUALE DI UTILIZZO VISUALPATH V3 VERSIONE ASP

MANUALE DI UTILIZZO VISUALPATH V3 VERSIONE ASP MANUALE DI UTILIZZO VISUALPATH V3 VERSIONE ASP Revisione 1.4 ultimo aggiornamento: 14/06/2011 SOMMARIO Introduzione... 3 Attivazione... 4 Tracciamento... 4 Codice da inserire nell header del sito... 4

Dettagli

GUIDA RAPIDA ALL USO DI EXCEL

GUIDA RAPIDA ALL USO DI EXCEL GUIDA RAPIDA ALL USO DI EXCEL I fogli elettronici vengono utilizzati in moltissimi settori, per applicazioni di tipo economico, finanziario, scientifico, ingegneristico e sono chiamati in vari modi : fogli

Dettagli

PILLOLE IPERTESTUALI Dove depositare i file Come creare i file Come salvare i file senza senza in caratteri minuscoli nome destinazione

PILLOLE IPERTESTUALI Dove depositare i file Come creare i file Come salvare i file senza senza in caratteri minuscoli nome destinazione PILLOLE IPERTESTUALI Dove depositare i file Creare una cartella di lavoro dove saranno inseriti i file che costituiranno l'ipertesto. Eventuali sottocartelle possono essere create all'interno della cartella

Dettagli

INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH

INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH IMPOSTAZIONE DI UNA IMMAGINE ALL INTERNO DI UNA PAGINA WEB: In questo capitolo è spiegata la procedura di inserimento e modifica di una immagine

Dettagli

Mon Ami 3000 Touch Interfaccia di vendita semplificata per monitor touchscreen

Mon Ami 3000 Touch Interfaccia di vendita semplificata per monitor touchscreen Prerequisiti Mon Ami 3000 Touch Interfaccia di vendita semplificata per monitor touchscreen L opzione Touch è disponibile per le versioni Vendite, Azienda Light e Azienda Pro; per sfruttarne al meglio

Dettagli

Guida OpenOffice.org Writer

Guida OpenOffice.org Writer Guida OpenOffice.org Writer Le visualizzazioni di Writer Writer permette di visualizzare un documento in diverse maniere tramite: Visualizza->Schermo intero: permette di visualizzare il documento Writer

Dettagli

MODULO SUPERMAPPE INDICE

MODULO SUPERMAPPE INDICE INDICE INSTALLAZIONE... 3 LA FINESTRA PRINCIPALE... 4 CREARE LA MAPPA... 5 La struttura - Nodi e Frecce... 5 I contenuti - Testo e Immagini... 6 La personalizzazione - colori, forme e dimensioni... 6 La

Dettagli

Access - Lezione 02. Basi di dati. Parte seconda. (Per andare direttamente su un argomento, fare clic con il mouse sul titolo nell indice sottostante)

Access - Lezione 02. Basi di dati. Parte seconda. (Per andare direttamente su un argomento, fare clic con il mouse sul titolo nell indice sottostante) Access - Lezione 02 Basi di dati Parte seconda (Per andare direttamente su un argomento, fare clic con il mouse sul titolo nell indice sottostante) 1.0 Operazioni di base 1.1 Impostare e pianificare un

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

Manuale utente software Android

Manuale utente software Android Manuale utente software Android 1 1. Specifiche...3 2. Entrare e uscire dal sistema...3 2.1 Login...3 2.2 Logout...3 3. Programma di Editing...4 3.1 Interfaccia del programma...4 3.1.1 Pannello del programma...5

Dettagli

Fogli elettronici, dati e statistiche con LibreOffice 4.1. materiale didattico sul corso Calc avanzato a cura di Sonia Montegiove.

Fogli elettronici, dati e statistiche con LibreOffice 4.1. materiale didattico sul corso Calc avanzato a cura di Sonia Montegiove. Foto di Federica Testani, Flickr Fogli elettronici, dati e statistiche con LibreOffice 4.1 materiale didattico sul corso Calc avanzato a cura di Sonia Montegiove 1 di 24 Gestire i dati con Calc Strutturare

Dettagli

foglio di calcolo celle Lotus 1-2-3 celle macro.

foglio di calcolo celle Lotus 1-2-3 celle macro. Fogli di calcolo Un foglio di calcolo è composto da celle nelle quali è possibile inserire dati. Il programma consente di effettuare calcoli complessi utilizzando valori inseriti nelle celle dalle quali

Dettagli

1. Barra dei menu Consente di visualizzare i comandi di menu per gestire StarBoard Software. 2. Barra di scorrimento Consente di scorrere l'area

1. Barra dei menu Consente di visualizzare i comandi di menu per gestire StarBoard Software. 2. Barra di scorrimento Consente di scorrere l'area 1. Barra dei menu Consente di visualizzare i comandi di menu per gestire StarBoard Software. 2. Barra di scorrimento Consente di scorrere l'area modificabile. 3. Pannello Visualizzato quando viene selezionata

Dettagli

IL MIO PRIMO SITO CON XTOTEM FREESTYLE

IL MIO PRIMO SITO CON XTOTEM FREESTYLE Pagina 1 CON Sommario CON...1 Introduzione...2 Sulla carta...3 Preparo i contributi grafici...4 Inizio con XTOTEM...4 E' la prima volta che accedo a XTOTEM...5 Definisco l' AREA...6 Scelgo l'area su cui

Dettagli

Modulo 4.2 Fogli di calcolo elettronico

Modulo 4.2 Fogli di calcolo elettronico Modulo 4.2 Fogli di calcolo elettronico 1 Finestra principale di Excel 2 Finestra principale di Excel Questi pulsanti servono per ridurre ad icona, ripristinare e chiudere la finestra dell applicazione.

Dettagli

WGDESIGNER Manuale Utente

WGDESIGNER Manuale Utente WGDESIGNER Manuale Utente Pagina 1 SOMMARIO 1 Introduzione... 3 1.1 Requisiti hardware e software... 3 2 Configurazione... 3 3 Installazione... 4 3.1 Da Webgate Setup Manager... 4 3.2 Da pacchetto autoestraente...

Dettagli

Uso di trigger di script in FileMaker Pro

Uso di trigger di script in FileMaker Pro Uso di trigger di script in FileMaker Pro Sommario Info su questo bollettino tecnico... 4 Che cos'è un trigger di script?... 4 Quali trigger di script sono supportati da FileMaker Pro?... 5 Panoramica

Dettagli

CORSO PRATICO WinWord

CORSO PRATICO WinWord CORSO PRATICO WinWord AUTORE: Renato Avato 1. Strumenti Principali di Word Il piano di lavoro di Word comprende: La Barra del Titolo, dove sono posizionate le icone di ridimensionamento: riduci finestra

Dettagli

Foglio elettronico (StarOffice)

Foglio elettronico (StarOffice) Modulo Foglio elettronico (StarOffice) Modulo - Foglio elettronico, richiede che il candidato comprenda il concetto di foglio elettronico e dimostri di sapere usare il programma corrispondente. Deve comprendere

Dettagli

L interfaccia di P.P.07

L interfaccia di P.P.07 1 L interfaccia di P.P.07 Barra Multifunzione Anteprima delle slide Corpo della Slide Qui sotto vediamo la barra multifunzione della scheda Home. Ogni barra è divisa in sezioni: la barra Home ha le sezioni

Dettagli

CORSO D INFORMATICA BASE: I FILE. a cura di Ing. Alejandro Diaz

CORSO D INFORMATICA BASE: I FILE. a cura di Ing. Alejandro Diaz CORSO D INFORMATICA BASE: I FILE a cura di Ing. Alejandro Diaz FILE E CARTELLE I FILE Un file contiene una raccolta di informazioni. I file memorizzati in un computer includono documenti di testo, fogli

Dettagli

EasyPrint v4.7. Impaginatore Album. Manuale Utente

EasyPrint v4.7. Impaginatore Album. Manuale Utente EasyPrint v4.7 Impaginatore Album Manuale Utente Lo strumento di impaginazione album consiste in una nuova funzione del software da banco EasyPrint 4 che permette di organizzare le immagini in maniera

Dettagli

Barra degli strumenti. Barra della formula. Cella. 1) Per creare una cartella di lavoro

Barra degli strumenti. Barra della formula. Cella. 1) Per creare una cartella di lavoro 1 Lezione 1: Nozioni fondamentali del foglio di lavoro Quando si avvia una sessione di lavoro in Excel, viene automaticamente aperta una cartella di lavoro. In genere la cartella di lavoro predefinita

Dettagli

Corso di Informatica

Corso di Informatica Corso di Informatica Modulo T2 A1 - Interfacce grafiche 1 Prerequisiti Utilizzo di un sistema operativo Programmazione elementare ad oggetti Concetto di macchina virtuale Tipi di interfaccia Riferimento

Dettagli

Piattaforma Applicativa Gestionale. Cruscotto informazioni Primi passi Release 8.0

Piattaforma Applicativa Gestionale. Cruscotto informazioni Primi passi Release 8.0 Piattaforma Applicativa Gestionale Cruscotto informazioni Primi passi Release 8.0 COPYRIGHT 2000-2015 by ZUCCHETTI S.p.A. Tutti i diritti sono riservati. Questa pubblicazione contiene informazioni protette

Dettagli

Modulo 6 Strumenti di presentazione - Open Office Impress Ivana Sacchi - 2003

Modulo 6 Strumenti di presentazione - Open Office Impress Ivana Sacchi - 2003 6.1.1 Primi passi con gli strumenti di presentazione 6.1.1.1 Aprire un programma di presentazione. 1. Premi il pulsante Start sulla Barra delle funzioni di Windows. 2. Seleziona il menu Programmi. 3. Cerca

Dettagli

NOMENCLATURA INTERFACCIA DI INTERNET EXPLORER PRINCIPALI PULSANTI DELLA BARRA DEGLI STREUMENTI

NOMENCLATURA INTERFACCIA DI INTERNET EXPLORER PRINCIPALI PULSANTI DELLA BARRA DEGLI STREUMENTI NOMENCLATURA INTERFACCIA DI INTERNET EXPLORER Pagina 6 PRINCIPALI PULSANTI DELLA BARRA DEGLI STREUMENTI Richiama la pagina visualizzata in precedenza Richiama la pagina visualizzata dopo quella attualmente

Dettagli

Nozioni di base per il docente di Moodlerooms

Nozioni di base per il docente di Moodlerooms Nozioni di base per il docente di Moodlerooms [Digitare l'indirizzo dell'azienda] 2015 Moodlerooms Sommario PANORAMICA REGISTRO VOTI DI JOULE... 4 Vantaggi del Registro voti di Joule... 4 Documentazione

Dettagli

EDITOR per la modifica delle pagine

EDITOR per la modifica delle pagine Pagina 1 EDITOR per la modifica delle pagine Sommario EDITOR per la modifica delle pagine...1 Apertura...2 L'EDITOR...3 Procedure...6 Inserire collegamenti...6 Inserire un'ancora...6 Inserire un collegamento...6

Dettagli

MODULO DOMANDE INDICE

MODULO DOMANDE INDICE INDICE INDICE... 2 IL PROGRAMMA... 3 LA VIDEATA PRINCIPALE... 4 IL MENU FILE... 7 Esportare i file... 9 LA FINESTRA DELLA RISPOSTA... 11 TUTTI I MODI PER INSERIRE IL TESTO... 11 I Collegamenti... 12 MODELLI

Dettagli

Guida alla gestione contenuti del sito www.cantinebernabei.com

Guida alla gestione contenuti del sito www.cantinebernabei.com Guida alla gestione contenuti del sito www.cantinebernabei.com INTRODUZIONE Per gestire i contenuti del sito Emporio Vini Cantine G.S. Bernabei, è necessario scrivere nella barra degli indirizzi del proprio

Dettagli

Strumenti Urbanistici on-line: requisiti e struttura del sito... Informazioni sulla procedura di download e installazione di Map Guide Viewer, sulla

Strumenti Urbanistici on-line: requisiti e struttura del sito... Informazioni sulla procedura di download e installazione di Map Guide Viewer, sulla Strumenti Urbanistici on-line: requisiti e struttura del sito... Informazioni sulla procedura di download e installazione di Map Guide Viewer, sulla struttura del sito e sugli elementi degli ambienti di

Dettagli

L interfaccia di Microsoft Word 2007

L interfaccia di Microsoft Word 2007 L interfaccia di Microsoft Word 2007 Microsoft Word 2007 è un Word Processor, ovvero un programma di trattamento testi. La novità di questa versione riguarda la barra multifunzione, nella quale i comandi

Dettagli

Excel Lezione 04. Foglio elettronico. Parte quarta

Excel Lezione 04. Foglio elettronico. Parte quarta Excel Lezione 04 Foglio elettronico Parte quarta (Per andare direttamente su un argomento, fare clic con il mouse sul titolo nell indice sottostante) 1.0 Importare oggetti 1.1 Importare oggetti come immagini,

Dettagli

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php MODULO 3 Microsoft Excel TEST ED ESERCIZI SU: http:///ecdl/excel/index.php Foglio Elettronico - SpreadSheet Un foglio elettronico (in inglese spreadsheet) è un programma applicativo usato per memorizzare

Dettagli

GUIDA DELL'UTENTE PER IL SOFTWARE P-TOUCH EDITOR. PJ-623/PJ-663 Stampante mobile. Versione 0 ITA

GUIDA DELL'UTENTE PER IL SOFTWARE P-TOUCH EDITOR. PJ-623/PJ-663 Stampante mobile. Versione 0 ITA GUIDA DELL'UTENTE PER IL SOFTWARE P-TOUCH EDITOR PJ-6/PJ-66 Stampante mobile Versione 0 ITA Introduzione Le stampanti mobili Brother, modelli PJ-6 e PJ-66 (con Bluetooth), sono compatibili con numerose

Dettagli

Gestione home page. Intranet -> Ambiente Halley -> Gestione homepage

Gestione home page. Intranet -> Ambiente Halley -> Gestione homepage Gestione home page egovernment L home page del portale Halley egovernment permette all Amministrazione di pubblicare contenuti e informazioni e di organizzarle in blocchi. Questa struttura per argomenti

Dettagli

Dispensa per corsi FSE For.em. Lezioni pratiche per il software in corso di apprendimento. prof.apollonio

Dispensa per corsi FSE For.em. Lezioni pratiche per il software in corso di apprendimento. prof.apollonio Dispensa per corsi FSE For.em Lezioni pratiche per il software in corso di apprendimento. prof.apollonio Introduzione I due programmi proposti sono scelti al fine di fornire la capacità di lavorare con

Dettagli

WINDOWS - Comandi rapidi da tastiera più utilizzati.

WINDOWS - Comandi rapidi da tastiera più utilizzati. WINDOWS - Comandi rapidi da tastiera più utilizzati. La prima colonna indica il tasto da premere singolarmente e poi rilasciare. La seconda e terza colonna rappresenta la combinazione dei i tasti da premere

Dettagli

Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto. Approfondimento SOFTWARE PER L ARCHIVIAZIONE

Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto. Approfondimento SOFTWARE PER L ARCHIVIAZIONE APPROFONDIMENTO ICT Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto Approfondimento SOFTWARE PER L ARCHIVIAZIONE ORGANISMO BILATERALE PER LA FORMAZIONE IN CAMPANIA INDICE SOFTWARE PER

Dettagli

Esplora gli argomenti della guida. Requisiti di sistema. Menu laterale - Area Temi. Temi. Legenda. Requisiti di sistema

Esplora gli argomenti della guida. Requisiti di sistema. Menu laterale - Area Temi. Temi. Legenda. Requisiti di sistema Esplora gli argomenti della guida Requisiti di sistema Menu laterale Menu Strumenti principali Menu altri Strumenti Temi Legenda Aggiungere / rimuovere temi Temi per editing Temi per snap Esporta/Carica

Dettagli

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat www.dimi.uniud.it/burigat Aggiungere immagini E' possibile inserire immagini all'interno delle pagine web in due modi: come contenuto

Dettagli

IL PROGRAMMA INSTALLAZIONE

IL PROGRAMMA INSTALLAZIONE INDICE Il Programma... 3 Installazione... 3 La finestra DI AVVIO... 4 Salvare il documento acquisito... 5 MODALITA AVANZATA... 7 Menu File... 8 MENU HOME... 10 MENU MODIFICA... 11 MENU SCANNER... 12 Modalita

Dettagli

INDICE L ambiente di lavoro... 2 Interfaccia di Word... 2 Le visualizzazioni... 5 Digitazione e revisione del testo...6 Modalità di selezione del

INDICE L ambiente di lavoro... 2 Interfaccia di Word... 2 Le visualizzazioni... 5 Digitazione e revisione del testo...6 Modalità di selezione del INDICE L ambiente di lavoro... 2 Interfaccia di Word... 2 Le visualizzazioni... 5 Digitazione e revisione del testo...6 Modalità di selezione del testo... 6 Selezione attraverso il mouse... 6 Selezione

Dettagli

Lezione 4 Introduzione a Microsoft Excel Parte Prima

Lezione 4 Introduzione a Microsoft Excel Parte Prima Lezione 4 Introduzione a Microsoft Excel Parte Prima Cenni preliminari... 1 Elementi sullo schermo... 2 Creazione di una cartella di lavoro... 3 Utilizzo di celle e intervalli... 3 Gestione della cartella

Dettagli

Archivio Parrocchiale

Archivio Parrocchiale BREVI INFORMAZIONI PER L UTILIZZO DEL PROGRAMMA Archivio Parrocchiale 1 INDICE PREMESSA...3 CENNI SUL PROGRAMMA...4 REQUISITI MINIMI DEL PC...5 LA FINESTRA PRINCIPALE...6 I PULSANTI DEL MENU PRINCIPALE...7

Dettagli

Guida per l'utente alla pianificazione OrgPublisher per tutti i browser

Guida per l'utente alla pianificazione OrgPublisher per tutti i browser Guida per l'utente alla pianificazione OrgPublisher per tutti i browser Sommario Guida per l'utente alla pianificazione OrgPublisher per tutti i browser Sommario Accesso alla pianificazione per tutti i

Dettagli

Introduzione a PowerPoint

Introduzione a PowerPoint Office automation - Dispensa su PowerPoint Pagina 1 di 11 Introduzione a PowerPoint Premessa Uno strumento di presentazione abbastanza noto è la lavagna luminosa. Questo strumento, piuttosto semplice,

Dettagli

Microsoft PowerPoint

Microsoft PowerPoint Microsoft introduzione a E' un programma che si utilizza per creare presentazioni grafiche con estrema semplicità e rapidità. Si possono realizzare presentazioni aziendali diapositive per riunioni di marketing

Dettagli

Chiudere il Programma Menu File Esci Pulsanti 1 clic sul pulsante Tasto dx 1 clic sulla barra del titolo Chiudi Tastiera Alt+F4

Chiudere il Programma Menu File Esci Pulsanti 1 clic sul pulsante Tasto dx 1 clic sulla barra del titolo Chiudi Tastiera Alt+F4 Foglio Elettronico PRIMI PASSI CON IL FOGLIO ELETTRONICO Avviare il Programma Menu Start Tutti i programmi Microsoft Excel Pulsanti 2 clic sull icona presente sul Desktop Chiudere il Programma Menu File

Dettagli

Il Foglio Elettronico. Microsoft Excel

Il Foglio Elettronico. Microsoft Excel Il Foglio Elettronico 1 Parte I Concetti generali Celle e fogli di lavoro.xls Inserimento dati e tipi di dati Importazione di dati Modifica e formattazione di fogli di lavoro FOGLIO ELETTRONICO. I fogli

Dettagli

Comandi per i primi passi con Word Tasti di scelta rapida

Comandi per i primi passi con Word Tasti di scelta rapida 2.1 Primi Passi con Word 2.1.1 Cenni storici e versioni di Word Uno dei word processor più diffusi è Microsoft Word. Qui illustriamo in particolare la versione 2000, ma vi sono anche versioni successive

Dettagli

Indice generale. Introduzione...xv. Parte I Per iniziare Capitolo 1 Introduzione allo sviluppo ios con tecnologie web...3

Indice generale. Introduzione...xv. Parte I Per iniziare Capitolo 1 Introduzione allo sviluppo ios con tecnologie web...3 Introduzione...xv A chi si rivolge questo libro...xv Gli argomenti trattati...xv Com è organizzato il libro...xvi Cosa occorre per utilizzare il libro...xvii Convenzioni adottate...xvii Il codice sorgente...xviii

Dettagli

SOFTWARE USER S GUIDE SitagriPro Infinite

SOFTWARE USER S GUIDE SitagriPro Infinite SOFTWARE USER S GUIDE SitagriPro Infinite Prodotto da: FINANCEAGRI c o r p o r a t e CONTENUTI FASE 1 : Installazione del software... p.3 1. Introduzione 2. Download del certificato FASE 2 : Identificazione...

Dettagli

Guida rapida all uso del software LuxiBoard 3.0

Guida rapida all uso del software LuxiBoard 3.0 L avagna I nterattiva M ultimediale Guida rapida all uso del software LuxiBoard 3.0 1. Barra degli strumenti principale La barra principale raggruppa gli strumenti utilizzati più frequentemente. È possibile

Dettagli

APPUNTI DI EXCEL 2002: COME FARE PER (Fonte: F. Bozzaro, R. Candiotto, Laboratorio excel 2002, APOGEO 2003)

APPUNTI DI EXCEL 2002: COME FARE PER (Fonte: F. Bozzaro, R. Candiotto, Laboratorio excel 2002, APOGEO 2003) Appunti di Excel 2002: Come fare per 1 APPUNTI DI EXCEL 2002: COME FARE PER (Fonte: F. Bozzaro, R. Candiotto, Laboratorio excel 2002, APOGEO 2003) Operazioni su cartelle e documenti 1. Lanciare il programma

Dettagli

Calc è il programma per la gestione di fogli di calcolo della suite OpenOffice.org.

Calc è il programma per la gestione di fogli di calcolo della suite OpenOffice.org. Calc è il programma per la gestione di fogli di calcolo della suite OpenOffice.org. Nuovo documento Anteprima di stampa Annulla Galleria Apri Controllo ortografico Ripristina Sorgente dati Salva Controllo

Dettagli

L interfaccia. La barra delle applicazioni. MS Windows Barra delle Applicazioni

L interfaccia. La barra delle applicazioni. MS Windows Barra delle Applicazioni Windows XP In questa sezione, si desidero evidenziare le caratteristiche principali di Windows cercando possibilmente di suggerire, per quanto possibile, le strategie migliori per lavorare velocemente

Dettagli

Università di Firenze Gestione Presenze Interfaccia grafica

Università di Firenze Gestione Presenze Interfaccia grafica Università di Firenze Gestione Presenze Interfaccia grafica Pagina 1 di 29 Versione Emissione Approvazione Modifiche Apportate Autore Data Autore Data 1 Maggini 01/03/06 - - Prima emissione. Pagina 2 di

Dettagli

il foglio elettronico

il foglio elettronico 1 il foglio elettronico ecdl - modulo 4 toniorollo 2013 il modulo richiede 1/2 comprendere il concetto di foglio elettronico e dimostri di sapere usare il programma di foglio elettronico per produrre dei

Dettagli

Istituto Alberghiero De Filippi - Varese Laboratorio di Informatica Corso ECDL MODULO 4 ECDL. Foglio Elettronico

Istituto Alberghiero De Filippi - Varese Laboratorio di Informatica Corso ECDL MODULO 4 ECDL. Foglio Elettronico Istituto Alberghiero De Filippi - Varese Laboratorio di Informatica Corso ECDL MODULO 4 ECDL Foglio Elettronico Microsoft Excel Il foglio di elettronico permette di manipolare in modo rapido dei dati;

Dettagli

Modulo 3 - Elaborazione Testi 3.1 Utilizzo applicazione

Modulo 3 - Elaborazione Testi 3.1 Utilizzo applicazione Università degli Studi dell Aquila Corso ECDL programma START Modulo 3 - Elaborazione Testi 3.1 Utilizzo applicazione Elaborazione testi Per scrivere una lettera, un libro, una tesi, o un semplice cartello

Dettagli

Basi di dati Microsoft Access

Basi di dati Microsoft Access Basi di dati Microsoft Access Importare dati esterni Prof. Francesco Accarino IIS Altiero Spinelli via Leopardi 132 Sesto San Giovanni Breve Introduzione a Microsoft Access 2007 Microsoft Access 2007 è

Dettagli

Manuale per l'utente del software KODAK Create@Home. Versione software 9.0

Manuale per l'utente del software KODAK Create@Home. Versione software 9.0 Manuale per l'utente del software KODAK Create@Home Versione software 9.0 Sommario 1 Benvenuti nel software KODAK Create@Home Caratteristiche... 1-1 Formati di file supportati... 1-1 Requisiti di sistema...

Dettagli

Alcune configurazioni del browser Internet Explorer e del runtime Java necessarie per utilizzare l'interfaccia GIS del sistema gestionale ARTEA.

Alcune configurazioni del browser Internet Explorer e del runtime Java necessarie per utilizzare l'interfaccia GIS del sistema gestionale ARTEA. 16 maggio 2011 Alcune configurazioni del browser Internet Explorer e del runtime Java necessarie per utilizzare l'interfaccia GIS del sistema gestionale ARTEA. Leonardo Danza - leonardo.danza@artea.toscana.it

Dettagli

TRENDAGENTI - Manuale Utente

TRENDAGENTI - Manuale Utente TRENDAGENTI - Manuale Utente Indice: Introduzione...02 La schermata principale...02 Sincronizzazione e download immagini...03 Modifica delle Impostazioni...05 Catalogo...06 Creazione e Gestione Clienti...07

Dettagli

MANUALE D USO Stazione editoriale MIR cms

MANUALE D USO Stazione editoriale MIR cms MANUALE D USO Stazione editoriale MIR cms Come si accede: Per entrare alla parte amministrativa del sito è sufficiente digitare nella barra dell url l indirizzo del sito seguito da: /admin/ nome del sito

Dettagli