AngularJS: un framework di frontiera per la realizzazione di siti Web

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "AngularJS: un framework di frontiera per la realizzazione di siti Web"

Transcript

1 Università degli Studi Mediterranea di Reggio Calabria Dipartimento di Ingegneria dell Informazione, delle Infrastrutture e dell Energia Sostenibile Corso di Laurea in Ingegneria dell Informazione Tesi di Laurea AngularJS: un framework di frontiera per la realizzazione di siti Web Relatore Prof. Domenico Ursino Candidato Cristiano Antonio Capanna Anno Accademico

2

3 Siamo prog ammati per andare avanti

4

5 Indice Introduzione 1 Capitolo 1 Che cos è AngularJS La storia Le principali caratteristiche Template Directive Expression Data-Binding Module Capitolo 2 Come utilizzarlo L installazione Primo esempio Secondo esempio Capitolo 3 Alcune applicazioni Web SEO e AngularJS Dispositivi mobili Responsive web app Applicazioni native con Cordova Capitolo 4 Analisi dei concorrenti Altri framework Ember.js Backbone.js Knockout.js AngularJS vs jquery? I due Data-Binding I

6 4.2.2 La verità è Capitolo 5 Le ultime battute Riepilogando AngularJS Ringraziamenti Bibliografia.. 57 II

7 III

8 IV

9 Introduzione L HTML è un linguaggio di markup solitamente usato per la formattazione e l impaginazione di documenti ipertestuali. I documenti HTML sono in grado di incorporare molte tecnologie che offrono la possibilità di aggiungere al documento ipertestuale interazioni dinamiche con l utente, animazioni interattive, contenuti multimediali, e molto altro ancora. Si tratta di linguaggi CSS, JavaScript, jquery, XML e JSON. JavaScript è un linguaggio di scripting orientato agli oggetti e agli eventi, comunemente utilizzato nella programmazione web lato client; esso viene impiegato all interno di altri linguaggi come, ad esempio, HTML. Per dar vita ad una pagina web si può utilizzare contemporaneamente HTML (per creare il template) e JavaScript (per creare la parte dinamica). Ma, nonostante la presenza di questi due linguaggi, definire la struttura di una pagina risulta difficile; per superare tali differenze che vengono in aiuto i framework. Un framework è un architettura logica di supporto su cui un software può essere progettato e realizzato, spesso facilitandone lo sviluppo da parte del programmatore. Sono molti i framework esistenti nel mondo dell open-source, e non ne esiste uno migliore in assoluto; la scelta dipende, ovviamente, dall utente che vuole utilizzarlo. Quello che presenteremo oggi sarà AngularJS. AngularJS è un framework JavaScript che permette di utilizzare il linguaggio HTML, assieme ad un insieme di suoi costrutti nativi, per sviluppare applicazioni single web page. Tale framework, basato sul pattern MVC, ha avuto un gran successo, soprattutto negli ultimi anni, grazie ad investimenti ricevuti da Google per svilupparne le capacità. AngularJS fu ideato nel 2009 da due sviluppatori, Misko Hevery e Adam Abrons. Il secondo abbandonò il progetto quando il primo, dopo essere stato assunto dalla Google, iniziò ad utilizzarlo per agevolare la scrittura del codice su cui stava lavorando. La multinazionale capì subito le potenzialità di AngularJS; infatti, iniziò ad utilizzarlo per riscrivere le applicazioni delle compagnie che andava via via acquisendo. Google creò un team che iniziò a lavorare esclusivamente sul framework aggiornandolo e mantenendolo all avanguardia. Le caratteristiche principali che fanno di AngualrJS uno tra i framework più cliccati ed utilizzati sono: Template; permette di utilizzare HTML in cooperazione con attributi specifici di AngularJS. Dal momento che AngularJS si basa sul pattern MVC, possiamo considerare il Template come la View che raccoglie informazioni provenienti dal Model e dal Controller.

10 Directive; sono le componenti fondamentali dell applicazione AngularJS; di default, ci viene offerta una vasta gamma di Directive; ciò non toglie che è possibile creare le nostre, in modo da personalizzare completamente l applicazione creata. Expression; è considerata la parte dinamica del codice, che può sostituire o lavorare in cooperazione con JavaScript. Data-Binding; è l innovazione più importante di AngularJS, e rappresenta la sincronizzazione automatica del codice tra View, Model e Controller. La differenza del Data-Binding con gli altri framework è che questa sincronizzazione viene effettuata automaticamente da Angular, e non manualmente, come negli altri framework. Module; è ciò che rende snodabile il codice delle pagine web create; possiamo, quindi, vederle i Module come contenitori che racchiudono le diverse parti del sito. Come detto, AngularJS non è l unico framework open source per costruire applicazioni single web page; infatti, ne esistono diversi, ciascuno dei quali presenterà vantaggi e svantaggi rispetto ad AngularJS. I principali concorrenti sono: Ember.js; basato sul pattern MVC, si pone come obiettivi quelli di: aiutare l utente a creare la parte client side delle applicazioni, adattarsi e, al contempo, evolversi rispetto alle nuove tecnologie. È un framework più vecchio rispetto ad AngularJS in quanto, la sua creazione risale al 2007; in un secondo momento il suo sviluppo è stato portato avanti dalla Apple. Backbone.js; è un framework famoso per la sua leggerezza; ha un interfaccia Restfull JSON basata sul pattern MVC. La sua leggerezza è sia un vantaggio, sia uno svantaggio, in quanto se da un lato lo rende estremamente rapido, con una curva di apprendimento lineare, dall altro non gli consente di garantire allo sviluppaotre la possibilità di realizzare un architettura stabile. Knockout.js; è una libreria che si basa sul pattern MVVM (variante del pattern MVC). Questa libreria non fornisce aiuti nella gestione del DOM, ma si focalizza sulla creazione dell interfaccia utente, riducendo la quantità del codice da scrivere. In ultimo, abbiamo la libreria jquery; questa aiuta gli sviluppatori nella manipolazione del DOM attraverso l uso di API chiare e semplici. jquery è stata rilasciata per la prima volta nel 2006, ed è un progetto tutt ora in via di sviluppo grazie anche all apporto di Microsoft. Molti sviluppatori considerano jquery come un concorrente di AngularJS; in realtà, vi è la possibilità di cooperazione tra il framework e la libreria (o meglio, i suoi plugin), soprattutto grazie all ultima versione di AngularJS che sarà rilasciata (AngularJS 1.4) L uso di AngularJS non si limita alla creazione di applicazioni single web page; il framework, infatti, può essere utilizato anche per la creazione di applicazioni per dispositivi mobili. Ovviamente, quest ultime saranno applicazioni di tipo ibride, soprattutto se create in cooperazione con Cordova. AngularJS fornirà dei vantaggi e degli svantaggi; in particolare la snodabilità viene senz altro aumentata grazie, anche, all aiuto di AngularJS. VI Cristiano Antonio Capanna

11 AngularJS: un framework di frontiera per la creazione di siti Web Il presente lavoro di tesi è strutturato come di seguito specificato: Nel primo capitolo vengono presentate la storia che sta alla base della nascita del framework AngularJS, le sue caratteristiche e, per le più importanti tra queste ultime, una descrizione più dettagliata. Il secondo capitolo spiegherà in che modo poter avere Angular nella nostra piattaforma di sviluppo; saranno presentati due facili esempi per vederne le potenzialità rispetto alla programmazione web. Nel terzo capitolo saranno descritti i vantaggi nell utilizzo web sia rispetto la programmazione sia rispetto alla visibilità all interno del web (dando un occhiata alla tecnologia SEO); in più, verrà descritta la possibilità di utilizzare Angular anche per lo sviluppo di applicazioni su dispositivi mobili. Il quarto capitolo presenterà i framework concorrenti di AngularJS, ne espliciterà i vantaggi e gli svantaggi e spiegherà la possibilità di integrare Angular con jquery. Infine, nel quinto capitolo verranno tratte le conclusioni e verranno illustrati alcuni possibili sviluppi futuri. Cristiano Antonio Capanna VII

12 VIII Cristiano Antonio Capanna

13 Capitolo 1 Che cos è AngularJS AngularJS è un framework di JavaScript, patrocinato da Google. È open-source ed è rilasciato sotto la licenza MIT (una licenza di software libero creata dal Massachusetts Institute of Technology). Il suo obiettivo è quello di risolvere i problemi riguardanti la creazione di Single Page Web Application. Questo framework ci permette di utilizzare HTML come linguaggio di template. La sua logica è basata sul pattern MVC. In questo capitolo vedremo la storia e le principali caratteristiche che fanno di AngularJS uno dei più utilizzati framework degli ultimi anni.

14 1.1 La storia AngularJS è stato creato, come progetto parallelo, nel 2009 da due sviluppatori, Misko Hevery e Adam Abrons. I due, inizialmente, immaginavano che il loro progetto, GetAngular, sarebbe diventato un strumento end-to-end e che avrebbe permesso ai designer di interagire sia con il front-end sia con il back-end. Hevery iniziò a lavorare per un progetto della Google chiamato Google Feedback. Lui e altri due sviluppatori scrissero linee di codice in un periodo che andava fino ad oltre i sei mesi. Ma, mentre la grandezza del codice andava aumentando, la pazienza di Hevery andava diminuendo; si sentiva sempre più frustrato per le difficoltà riscontrate nel testare e modificare il codice che lui ed il suo team avevano scritto. Quindi Hevery fece una scommessa con il suoi project-manager, Brad Green: sarebbe riuscito a riscrivere l intera applicazione usando la parte di progetto di GetAngular in sole due settimane riducendo drasticamente le linee di codice. Hevery perse la scommessa in quanto non riuscì a riprodurlo riprodurlo nei giusti tempi ma impiegò tre settimane. In compenso, riuscì ad eliminare dalle linee di codice più del 90% riducendole a sole Green prese ovviamente nota del successo dello sviluppatore e quello fu il punto di partenza che iniziò a dar vita a AngularJS. Il secondo creatore di GetAngular, Adam Abrons smise di lavorare al progetto quando Hevery e il suo projectmanager lo trasformarono in un nuovo progetto chiamato, appunto, AngularJS. Costruirono un team per elaborare e mantenere il nuovo progetto all interno della stessa Google. Una delle vittorie più grandi di Angular, internamente a Google, si ebbe quando una compagnia acquisita dalla multinazionale, DoubleClick, iniziò a riscrivere parte della sua applicazione utilizzando AngularJS. Dato l iniziale successo che DobleClick ebbe, Google investì più risorse nel suo nuovo framework, dando la possibilità di gestire sia la parte interna a DoubleClick, sia quella esterna. Iniziarono ad aumentare le persone che si occupavano dello sviluppo e il framework inizò a crescere rapidamente. I principali sviluppatori di questo framework fanno parte, appunto, di Google, come si può notare anche dalla tabella 1.1 e 1.2: 10 Cristiano Antonio Capanna

15 AngularJS: un framework di frontiera per la realizzazione di siti Web Tabella Sviluppatori di AngularJS dalla creazione al 08/02/2014 Tabella Sviluppatori di AngularJS dalla creazione al 25/08/2014 Cristiano Antonio Capanna 11

16 È inusuale ed, economicamente parlando, rischioso vedere un framework controllato da un'unica entità, ma, al contempo, ci sono molti vantaggi in ciò, uno tra i quali evitare le lotte per accaparrarsi l esclusiva. Nel mondo dell open-source queste lotte sono pubbliche, cattive e distruttive per il software stesso o per i clienti che vogliono utilizzarlo (un esempio di scontro tra due compagnie può essere quello dietro Node.js, e le due compagnie sono: Jovyent e Strongloopp). È ovvio che esistano contributi da parte di sviluppatori che non fanno parte della Google family, il primo che possiamo notare è Sahahar Talmi facente parte della compagnia chiamata Wix (potremmo inserire all interno dei no-googler Ken Sheedlo, ma, in realtà, la maggior parte dei suoi lavori per AngularJS furano fatti mentre era all interno di Google). Un altro importantissimo fatto da assumere è che i più importanti sviluppatori di Angular non hanno iniziato con Google, ma, dopo l apporto al framework, sono stati assunti dalla multinazionale. Questo ci fa capire l importanza degli investimenti che Google fa su AngularJS. 1.2 Le principali caratteristiche Le caratteristiche che fanno di AngularJS uno dei framework più utilizzati sono: Templates: è formato dal linguaggio HTML con markup addizionali; Directive: estendono il linguaggio HTML con attributi ed elementi; Model: riporta i dati che l utente vede nella View e con cui interagisce; Scope: è il contesto in cui il Model e il Controller sono collocati e dove le Directive e le Expression possono accedervi; Expression: variabili d accesso e funzioni provenienti dallo Scope; Compiler: analizza il template, le Directive e le Expression; View: quello che l utente vede (il DOM); Data Binding: sincronizza i data tra Model e View; Controller: la logica di business dietro la View; Dependency Injection: crea e collega gli oggetti e le funzioni; Injector: contenitore del Dependency Injector; Module: un contenitore per le differenti parti di un applicazione, inclusi Controller, Services, Filter, Directive, che configurano l Injector; 12 Cristiano Antonio Capanna

17 AngularJS: un framework di frontiera per la realizzazione di siti Web Service: logica di business riutilizzabile, indipendente dalla View. Nelle prossime sezioni descriveremo alcune di tali caratteristiche Template In AngularJS, il Template è scritto tramite HTML che contiene elementi e attributi specifici di Angular. Tale framewok combina il Template con informazioni provenienti dal Model e dal Controller per rendere dinamica la View, cioè quello che l utente vede all interno del Browser. Gli elementi che contribuiscono al dinamismo della View sono: Directive (che descriveremo meglio in seguito); Markup: la notazione a doppia parentesi graffa { { } } che ci indica la costruzione di un elemento o di un attributo; Filter: il formato dei data per il display; Form control: validazione degli input utente. In una semplice applicazione, il Template consiste in un insieme di codici HTML, pagine CSS e Directive contenute in un file HTML (genericamente index.html). In un applicazione più complessa è possibile visualizzare più viste all interno di una pagina principale, con alcuni segmenti di Template localizzati in file di HTML separate. Possiamo utilizzare la Directive ngview per caricare questi segmenti Directive Le Directive sono le componenti più importanti di ogni applicazione Angular. Sebbene tale framework abbia al suo interno un vasta gamma di Directive, possiamo comunque introdurre e creare Directive semplici nel momento in cui vogliamo creare una nuova applicazione. Una Directive è qualcosa che introduce una nuova sintassi. Le Directive sono marcatori degli elementi del DOM, che forniscono ad essi degli specifici comportamenti. Per esempio, il linguaggio statico di HTML non saprebbe come creare e mostrare un data picker widget (cioè un applicazione per visualizzare i dati). Per "insegnare" al linguaggio HTML questa nuova sintassi abbiamo bisogno delle Directive. Le Directive, in qualche modo, creeranno un elemento che si comporterà da data picker. Le Directive più semplici che possiamo elencare sono: ng-model; ng-show; ng-repeat. Cristiano Antonio Capanna 13

18 Tutte queste Directive fanno assumere agli elementi del DOM un determinato comportamento, ad esempio ng-repeat ripete uno specifico elemento e ng-show mostra un elemento. Se volessimo rendere un elemento trascinabile potremo creare una Directive per farlo. L'idea di base dietro le Directive è veramente semplice: esse rendono il nostro codice HTML estremamente interattivo allegando comportamenti differenti ai vari DOM. Le Directive di Angular sono disponibili in quattro aspetti differenti: un nuovo elemento HTML (ad esempio, <data-picker></date>); un attributo su un elemento (ad esempio, <input type= text datapicker/>); una classe (ad esempio, <input type= text class= data-picker />); un commento (ad esempio, <!- -directive:data-picker- ->). Ovviamente, abbiamo il controllo di come le nostre Directive appariranno nel codice HTML Expression Le Expression in Angular sono come codici JavaScript inserite genericamente all interno delle doppie parentesi graffe ( {{expression}} ). Alcuni esempi di Expression valide all interno di Angular sono i seguenti: 1+2; a+b; user.name; Item[index]. Per quanto riguarda le differenze che intercorrono tra le Expression di AngularJS e quelle di JavaScript possiamo osservare che: Le Expression di AngularJS, a differenza delle espressioni JavaScript, non hanno accesso alle variabili globali come window, document o location. Questa restrizione è intenzionale, in quanto proviene bug all interno dell applicazione. A parte l operatore ternario (a? b : c ), non si può utilizzare un flusso di controllo all interno di un Expression. La ragione dietro questa impossibilità è data dalla filosofia di AngularJS, cioè la logica delle applicazioni deve essere esclusivamente contenuta all interno del Controller, non nella View. Se necessitiamo di una vera condition, di un loop o, comunque, di un flusso dobbiamo delegare il tutto a metodi di JavaScript e non di AngularJS. 14 Cristiano Antonio Capanna

19 AngularJS: un framework di frontiera per la realizzazione di siti Web Non possiamo dichiarare le funzioni o le espressioni regolari (cioè un insieme di stringhe) all interno delle Expression; questo per evitare che modelli complessi vadano a trasformare in qualche modo qualcosa all interno dei Template. Quindi, è preferibile porre le funzioni e le espressioni regolari all interno di un filtro dedicato o di un controllore in modo da poter essere testate correttamente. Non possiamo utilizzare operazioni con comma e void. Possiamo utilizzare Filter all interno delle Expression per formattare i data prima che questi vengano visualizzati. Siamo perdonati quando utilizziamo valori del tipo undefined e null. Se volessimo utilizzare dei codici JavaScript più complessi di quelli copiabili da Angular dovremmo dichiararlo anticipatamente per poi richiamarlo all interno della View Data-Binding Come detto, AngularJS basa la sua logica sul design pattern MVC (Model-View-Controller), cioè sulla separazione delle responsabilità. Possiamo dare i seguenti significati alle tre componenti del pattern: Model: questa classe si occupa solo dello stato e della logica dell applicazione; View: questa classe si occupa solo della gestione delle interfacce utente in risposta ad aggiornamenti generici che riceve dal Model; Controller: questa classe si occupa di tradurre l input dell utente in aggiornamenti che vengono poi passati al Model; Con il termine Data-Binding, nelle applicazioni AngularJS, si intende la sincronizzazione automatica dei dati tra i componenti del Model e della View. Il modo con cui Angular implementa il Data-Binding fa sì che il Model possa essere considerato come l unica fonte di verità della nostra applicazione; la View può essere vista come una proiezione del Model. Quando il Model cambia, la View riflette i cambiamenti, e viceversa. Molti dei sistemi classici di templating hanno il Data-Binding in un unica direzione, ovvero uniscono il Template e le componenti del Model all interno della View. Dopo l unione, però, i cambiamenti al Model o alle relative sezioni della View non vengono automaticamente riflessi. Allo stesso modo, i Cristiano Antonio Capanna 15

20 cambiamenti che vengono fatti all interno della View non sono riflessi all interno del Model. Questo significa che gli sviluppatori devono sincronizzare manualmente la View con il Model, e viceversa, ogniqualvolta vengono effettuati dei cambiamenti. Il Template di Angular lavora differentemente. Prima esso (che consiste in codice HTML non compilato, insieme a qualsiasi altro markup o Directive supplementare) viene compilato nel browser. Gli step di compilazione producono una View in diretta. Ogni cambiamento all interno della View è immediatamente riflesso nel Model e ogni cambiamento del Model è immediatamente riflesso nella View. Il Model sarà l unica fonte di verità per l applicazione semplificando notevolmente la vita al programmatore. Possiamo pensare, quindi, che la View è semplicemente una riflessione istantanea del Model. Dal momento che la View è una proiezione del Model, il Controller è completamente separato dalla View ed ignora la sua esistenza; questo ci aiuta anche nel testing, che sarà molto più semplice e veloce Module Possiamo pensare un Module come un contenitore per le differenti parti di un applicazione: Controller, Service, Filter, Directive, etc. Perché utilizzare i Module? Molte applicazioni hanno un metodo principale (main method) che istanzia e collega le altre parti. Le applicazioni in Angular non hanno questo metodo; saranno le specifiche dichiarate all interno del Module a dirci come inizializzare l applicazione. Ci sono, ovviamente, importanti vantaggi nell utilizzare tale approccio: Il processo dichiarativo è più facile da comprendere. È possibile impacchettare il codice come Module riutilizzabili. I Module possono essere caricati in qualunque ordine (o eventualmente in parallelo, eccetto quando sono dipendenti l uno dell altro). La Unit Test (cioè il caricamento di piccoli sottoinsiemi dell applicazioni che vengono sottoposti a stimoli da parte dei Module) deve caricare solo i Module rilevanti, ovvero quelli destinati direttamente al testing, cosa molto più semplice rispetto al caricamento completo di tutti i Module o, comunque, di parti che non hanno niente a che fare con il testing. Ciò rende estremamente concentrato il nostro codice. Il Test end-to-end può usare i Module per sovrascrivere le configurazioni. Possiamo provare a dare ai Module una nuova definizione: un Module è un insieme di blocchi di configurazione e di blocchi di esecuzione che vengono applicati durante l inizializzazione di un 16 Cristiano Antonio Capanna

21 AngularJS: un framework di frontiera per la realizzazione di siti Web processo. Se teniamo in considerazione questa semplice definizione, un Module consiste in una collezione di due tipi di blocchi: Blocchi di configurazione: vengono eseguiti durante le registrazioni del provider in fase di configurazione. All interno di tali blocchi possiamo inserire solo i provider e delle costanti; evitiamo, in tal modo, che ci siano istanze prima del completamento delle configurazioni. Blocchi di esecuzione: vengono eseguiti dopo che l iniettore è stato creato e usato per l inizio dell esecuzione. All interno di tali blocchi possiamo inserire esclusivamente le istanze e alcune costanti; in questo modo preveniamo la presenza di configurazioni durante l esecuzione dell applicazione. I Module possono avere delle dipendenze tra di loro, cioè un Module può richiedere le prestazioni di un altro Module. Le dipendenze dei Module implicano che dapprima bisogna caricare il Module richiesto e, solo successivamente, il Module richiedente. In altre parole il blocco di configurazione del Module richiesto viene eseguito prima di quello richiedente. La stessa cosa avviene per quanto riguarda i blocchi di esecuzione. Un Module può essere caricato una sola volta anche se viene richiesto da più Module. Cristiano Antonio Capanna 17

22 18 Cristiano Antonio Capanna

23 AngularJS: un framework di frontiera per la realizzazione di siti Web Capitolo 2 Come utilizzarlo La prima parte di questo capitolo spiegherà come impostare il nostro dispositivo per lo sviluppo tramite AngulaJS. La seconda parte presenterà una facile demo delle prestazioni del framework. Cristiano Antonio Capanna 19

24 2.1 L installazione L'utilizzo di AngularJS è affidato a due metodi: con il primo avremo la necessità di importare il pacchetto JavaScript ogni volta che iniziamo il progetto, nella parte interessata, oppure nell'header; il secondo ci porta a scaricare AngularJS attraverso GitHub (un servizio di web hosting per lo sviluppo di progetti software che può essere utilizzato per la condivisione e la modifica di file di testo e documenti revisionabili) e Node.JS (si tratta di un framework relativo all'utilizzo server-side di JavaScript) così da poterlo avere a nostra disposizione immediatamente durante la compilazione del codice. Per il primo metodo abbiamo bisogno solo di copiare e incollare una linea di codice all'interno dell'header, facendolo, però, per ogni progetto che iniziamo. Per il secondo dovremo dedicare qualche minuto in più: vediamo come. Possiamo scaricare e installare GitHub da Dopo aver eseguito i tradizionali passi per l installazione, passiamo a Node.JS; il link in cui trovarlo è anche in questo caso dovremo compiere i soliti passi per l installazione. Figura 2.1 Informazioni di Git visualizzati dal prompt dei comandi 20 Cristiano Antonio Capanna

25 AngularJS: un framework di frontiera per la realizzazione di siti Web Figura Informazioni di Node.JS visualizzati dal prompt dei comandi Potremo verificare la corretta installazione dei due programmi attraverso la finestra terminale (il prompt dei comandi), inserendo prima il codice git, che farà apparire una serie di informazioni riguardanti la versione e alcuni comandi da poter utilizzare (Figura 2.1). Analogo discorso potrà essere fatto con Node.JS; il comando che verrà utilizzato per vedere le informazioni sarà npm (Figura 2.2). Per quanto riguarda GitHub i comandi che dovremo conoscere, da inserire all interno del prompt, saranno esclusivamente due: git clone: per copiare un repository remoto all interno del nostro PC; git checkout: per estrarre una particolare versione del codice che sarà successivamente utilizzato. Utilizziamo il primo dei due codici elencati associando l indirizzo in cui è contenuto il repository di AngularJS: git clone In seguito a ciò creata una directory in cui sono contenuti tutti i file del repository. Entriamo in questa cartella attraverso il codice cd angular-phonecat e con il comando npm install, importeremo i tool di cui avremo bisogno. A questo punto installeremo Bower (cioè un package contenente i codici client-side di AngularJS da ad utilizzare); il codice che utilizzeremo sarà bower install. Al termine di questi passi, all interno della cartella app contenuta nella directory anguar-phonecat, avremo un file index.html che apriremo con il nostro browser (ma, in questo caso, risulterà una pagina bianca) o con l aiuto di un area di sviluppo come Notepad++ (Figura 2.3). Cristiano Antonio Capanna 21

26 Figura File index.html visualizzato tramite Notepad++ Tutto quello che vediamo all interno di questo codice non è altro che i pacchetti di AngularJS che sono stati importati e che quindi sono pronti all uso. A questo punto, possiamo creare il nostro esempio all interno di questo stesso file. 2.2 Primo esempio Come specificato nella sessione precedente, i modi per importare la libreria Angular sono due; noi stiamo considerando il secondo (che prevede importare tutti i pacchetti prima, attraverso Bower), ma se dovessimo tenere in considerazione il primo, il riferimento alla libreria sarà, ovviamente, necessario affinché Angular sia attivo. Quello che avviene in corrispondenza del caricamento del codice della libreria è il cosiddetto bootstrap di AngularJS. In sintesi, dopo il caricamento del documento HTML da parte del browser, vengono creati alcuni oggetti di sistema e viene effettuata la compilazione del DOM a partire dall elemento marcato con il tag ng-app, elaborando ogni Directive, binding ed Expression incontrati. Al termine della fase di bootstrap, AngularJS si mette in attesa del verificarsi di eventi sul browser. 22 Cristiano Antonio Capanna

27 AngularJS: un framework di frontiera per la realizzazione di siti Web Cerchiamo di capire immediatamente a cosa serve il primo tag di AngularJS che abbiamo introdotto, ovvero ng-app; questo attributo rappresenta una Directive del framework e indica al sistema quale elemento della pagina deve essere considerato come elemento base dell applicazione. In altre parole, AngularJS prenderà il controllo della porzione di DOM le cui basi vengono marcate con la direttiva ng-app. Figura Codice del primo esempio Andiamo quindi all interno dell elemento <body> (tag di HTML che conterrà il corpo del codice) e creiamo un elemento strutturale della pagina attraverso l attributo <div>. All interno di esso inseriremo due <input>: Cristiano Antonio Capanna 23

28 <input type= number ng-model= addendo1 />; <input type= number ng-model= addendo2 />; Gli <input> sono tag che rientrano nella categoria <form>, cioè elementi che danno la possibilità di interagire con il contenuto della pagina. Nel nostro specifico caso ci daranno l opportunità di inserire un valore numerico. Veniamo, quindi, all elemento chiave della nostra pagina cioè la stringa {{addendo1 + addendo2}}. Questa rappresenta una Expression di AngularJS e viene valutata ed inserita nel DOM del framework. Una Expression, tuttavia, non viene valutata soltanto in fase di compilazione; infatti viene generato un aggiornamento automatico (binding) che aggiorna il risultato dell Exspression ogniqualvolta cambia il suo valore. Vediamo, nella Figura 2.4, il codice completo e, nella Figura 2.5, il risultato. Figura Esecuzione del primo esempio 2.3 Secondo esempio In questo secondo esempio, proveremo a creare un catalogo di foto on-line. Come detto, AngularJS si basa sul pattern MVC; proviamo, quindi, a gestire l implementazione di questo catalogo creando prima la View, poi il Controller (il Model sarà creato automaticamente con l implementazione del Controller). Portiamoci all interno del tag <body> e scriviamo il seguente codice: 24 Cristiano Antonio Capanna

29 AngularJS: un framework di frontiera per la realizzazione di siti Web <body ng-controller= PhotoListCtrl > L elemento ng-controller indica, semplicemente, qual è il Controller associato all elemento (la sua dichiarazione verrà esplicitato in seguito). Creiamo, all interno del body, una elenco non ordinato attraverso i tag <ul> e <li>, inserendo, in quest ultimo, l elemento ng-repeat= photo in photos, che indica al sistema di generare tanti elementi <li> per quante sono le foto contenute nel Model, basandosi sull espressione photo in photos, come vedremopiù avanti. In corrispondenza a ciascun elemento <li> saranno valutate le espressioni specificate in base al contesto corrente, cioè in base alla foto corrente. A questo punto apriamo un paragrafo con <p> inserendo al suo interno il codice: <img ng-src= photos/thumb/{{photo.file}} alt={{photo.description}} />alt={{photo.description}} /> Questo tag, o meglio l elemento ng-src, sostituisce l attributo standard src (che sta per source, cioè origine, ed è il percorso in cui il browser troverà il file da mostrare) dell elemento <img> (in HTML è l elemento che viene utilizzato per inserire e formattare le immagini, i diagrammi grafici e le fotografie) ed impedisce che il browser interpreti l espressione {{photo.file}} come l URL delle immagini da caricare ed effettui un infruttuosa richiesta al server. Prima di chiudere il paragrafo con (</p>) scriviamo l espressione {{photo.description}}. Chiudiamo, quindi, il paragrafo e anche l elenco (figura 2.6). Passiamo, quindi, alla definizione del Controller che si limiterà a creare il Model per la nostra applicazione; tale Controller sarà costituito da un array di oggetti JSON (formato per lo scambio di dati) con due proprietà: l URL della foto e la relativa descrizione. La cosa interessante è che la funzione riceve dal sistema lo Scope corrente, cioè l oggetto di sistema che consente la sincronizzazione tra Model e View, tramite il parametro $scope. Da notare che per convenzione tutti gli oggetti di sistema di AngularJS hanno il nome che inizia per $. Lo Scope corrente sarà l ambiente di valutazione delle espressioni incluse all interno dell elemento gestito dal Controller, nel nostro caso l elemento <body>. All interno di questo Scope verrà creato un array di oggetti JSON che rappresentano l elenco delle foto, quindi vengono valutate le espressioni assegnate ad essa. Nel nostro specifico caso l espressione ng-repeat photo in photos consente di selezionare, per ciascuna ripetizione, un elemento dell array photos assegnandolo alla variabile photo. Tramite questa variabile abbiamo accesso alle singole proprietà dell oggetto che rappresenta la foto. Il risultato è mostrato dalla Figura 2.8. In ultimo, proviamo ad introdurre nel catalogo fotografico la possibilità di filtrare l elenco delle foto. AngularJS ci consente di realizzare questa funzionalità in maniera abbastanza semplice. Cristiano Antonio Capanna 25

WEB TECHNOLOGY. Il web connette. LE persone. E-book n 2 - Copyright Reserved

WEB TECHNOLOGY. Il web connette. LE persone. E-book n 2 - Copyright Reserved WEB TECHNOLOGY Il web connette LE persone Indice «Il Web non si limita a collegare macchine, ma connette delle persone» Il Www, Client e Web Server pagina 3-4 - 5 CMS e template pagina 6-7-8 Tim Berners-Lee

Dettagli

Siti interattivi e dinamici. in poche pagine

Siti interattivi e dinamici. in poche pagine Siti interattivi e dinamici in poche pagine 1 Siti Web interattivi Pagine Web codificate esclusivamente per mezzo dell HTML non permettono alcun tipo di interazione con l utente, se non quella rappresentata

Dettagli

Analisi e utilizzo di un framework per lo sviluppo di applicazioni web

Analisi e utilizzo di un framework per lo sviluppo di applicazioni web tesi di laurea Anno Accademico 2011/2012 relatore Ch.mo prof. Marcello Cinque correlatore Ing. Fabio De Paolis candidato Michele Basile Matr. 534/3239 Web Development Frameworks Nella realizzazione di

Dettagli

Componenti Web: client-side e server-side

Componenti Web: client-side e server-side Componenti Web: client-side e server-side side Attività di applicazioni web Applicazioni web: un insieme di componenti che interagiscono attraverso una rete (geografica) Sono applicazioni distribuite logicamente

Dettagli

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER L architettura CLIENT SERVER è l architettura standard dei sistemi di rete, dove i computer detti SERVER forniscono servizi, e computer detti CLIENT, richiedono

Dettagli

Architetture Web a tre livelli: CGI, SSI, ISAPI e codice mobile Architetture a 3 livelli (1)

Architetture Web a tre livelli: CGI, SSI, ISAPI e codice mobile Architetture a 3 livelli (1) Pagina 1 di 10 Architetture Web a tre livelli: CGI, SSI, ISAPI e codice mobile Architetture a 3 livelli (1) Nel corso della lezione precedente abbiamo analizzato le caratteristiche dell'architettura CGI.

Dettagli

Corso basi di dati Introduzione alle ASP

Corso basi di dati Introduzione alle ASP Corso basi di dati Introduzione alle ASP Gianluca Di Tomassi Email: ditomass@dia.uniroma3.it Università di Roma Tre Web statico e Web interattivo In principio il Web era una semplice collezione di pagine

Dettagli

Università degli Studi "Roma Tre" Dipartimento di Informatica ed automazione. Facoltà di Ingegneria. Laurea Magistrale in Ingegneria Informatica

Università degli Studi Roma Tre Dipartimento di Informatica ed automazione. Facoltà di Ingegneria. Laurea Magistrale in Ingegneria Informatica Università degli Studi "Roma Tre" Dipartimento di Informatica ed automazione Facoltà di Ingegneria Laurea Magistrale in Ingegneria Informatica Tesi di Laurea Sistema informativo per la gestione dei processi

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Introduzione al Model-View-Controller (MVC)

Introduzione al Model-View-Controller (MVC) Introduzione al Model-View-Controller (MVC) Maurizio Cozzetto 9 Luglio 2009 Indice 1 Model-View-Controller 1 1.1 Definizione.................................................. 1 1.2 Soluzione...................................................

Dettagli

HTML 1. HyperText Markup Language

HTML 1. HyperText Markup Language HTML 1 HyperText Markup Language Introduzione ad HTML Documenti HTML Tag di markup Formattazione del testo Collegamenti ipertestuali Immagini Tabelle Form in linea (moduli) Tecnologie di Sviluppo per il

Dettagli

PER RINNOVARE IL SITO DEL JUG TRENTO. Riccardo Tasso (@riccardotasso)

PER RINNOVARE IL SITO DEL JUG TRENTO. Riccardo Tasso (@riccardotasso) PER RINNOVARE IL SITO DEL JUG TRENTO Riccardo Tasso (@riccardotasso) ANGULARJS lightweight framework 100% javascript supporto per i browser moderni (> IE 8) licenza MIT (permissiva) (by Google) ANGULARJS

Dettagli

Corso di PHP. Prerequisiti. 1 - Introduzione

Corso di PHP. Prerequisiti. 1 - Introduzione Corso di PHP 1 - Introduzione 1 Prerequisiti Conoscenza HTML Principi di programmazione web Saper progettare un algoritmo Saper usare un sistema operativo Conoscere il concetto di espressione 2 1 Introduzione

Dettagli

Corso App modulo Android. Antonio Gallo info@laboratoriolibero.com

Corso App modulo Android. Antonio Gallo info@laboratoriolibero.com Corso App modulo Android Antonio Gallo info@laboratoriolibero.com Strumentazione: PC + smartphone Android + cavo micro USB per connessione Framework Phonegap SDK di Android JDK (Java) Eclipse (opzionale)

Dettagli

Progettazione di Sistemi Interattivi. Gli strati e la rete. Struttura e supporti all implementazione di applicazioni in rete (cenni)

Progettazione di Sistemi Interattivi. Gli strati e la rete. Struttura e supporti all implementazione di applicazioni in rete (cenni) Progettazione di Sistemi Interattivi Struttura e supporti all implementazione di applicazioni in rete (cenni) Docente: Daniela Fogli Gli strati e la rete Stratificazione da un altro punto di vista: i calcolatori

Dettagli

LEZIONE 3. Il pannello di amministrazione di Drupal, configurazione del sito

LEZIONE 3. Il pannello di amministrazione di Drupal, configurazione del sito LEZIONE 3 Il pannello di amministrazione di Drupal, configurazione del sito Figura 12 pannello di controllo di Drupal il back-end Come già descritto nella lezione precedente il pannello di amministrazione

Dettagli

Corso di PHP. Prerequisiti. 1 - Introduzione

Corso di PHP. Prerequisiti. 1 - Introduzione Corso di PHP 1 - Introduzione 1 Prerequisiti Conoscenza HTML Principi di programmazione web Saper progettare un algoritmo Saper usare un sistema operativo Compilazione, link, esecuzione di programmi Conoscere

Dettagli

MODEL-VIEW-CONTROLLER PROBLEMA

MODEL-VIEW-CONTROLLER PROBLEMA MODEL VIEW CONTROLLER DESIGN PATTERN MODEL-VIEW-CONTROLLER INGEGNERIA DEL SOFTWARE Università degli Studi di Padova Dipartimento di Matematica Corso di Laurea in Informatica, A.A. 2013 2014 rcardin@math.unipd.it

Dettagli

Tecnologie per il Web. Il web: Architettura HTTP HTTP. SSL: Secure Socket Layer

Tecnologie per il Web. Il web: Architettura HTTP HTTP. SSL: Secure Socket Layer Tecnologie per il Web Il web: architettura e tecnologie principali Una analisi delle principali tecnologie per il web Tecnologie di base http, ssl, browser, server, firewall e proxy Tecnologie lato client

Dettagli

Installare un nuovo programma

Installare un nuovo programma Installare un nuovo programma ICT per la terza età Le video lezioni della Fondazione Mondo Digitale Diapositiva Introduzione Installare un nuovo programma sul computer installazione Quando acquistiamo

Dettagli

Esercizi di JavaScript

Esercizi di JavaScript Esercizi di JavaScript JavaScript JavaScript é un linguaggio di programmazione interpretato e leggero, creato dalla Netscape. E' presente a patire da Netscape 2 in tutti i browser ed é dunque il linguaggio

Dettagli

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database Corso di Informatica Modulo T3 B3 Programmazione lato server 1 Prerequisiti Architettura client/server Conoscenze generali sui database 2 1 Introduzione Lo scopo di questa Unità è descrivere gli strumenti

Dettagli

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle

Dettagli

CREARE UNA TAB DI FACEBOOK SULLA PAGINA AZIENDALE

CREARE UNA TAB DI FACEBOOK SULLA PAGINA AZIENDALE CREARE UNA TAB DI FACEBOOK SULLA PAGINA AZIENDALE Autore: KATIA D ORTA (@katiatrew) in collaborazione con MARISA FAUSONE (@Mfausone) 1 Questa guida è liberamente scaricabile sul sito cowinning.it 2 Questa

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali?

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Riprendiamo il discorso, introducendo la tag Body e iniziando

Dettagli

Realizzazione di uno strumento web-based per la simulazione remota di reti di sensori senza filo

Realizzazione di uno strumento web-based per la simulazione remota di reti di sensori senza filo tesi di laurea Realizzazione di uno strumento web-based per la simulazione remota di reti di sensori senza filo Anno Accademico 2009/2010 relatore Ch.mo prof. Marcello Cinque correlatore Ing. Catello di

Dettagli

GUIDA UTENTE WEB PROFILES

GUIDA UTENTE WEB PROFILES GUIDA UTENTE WEB PROFILES GUIDA UTENTE WEB PROFILES... 1 Installazione... 2 Primo avvio e registrazione... 5 Utilizzo di web profiles... 6 Gestione dei profili... 8 Fasce orarie... 13 Log siti... 14 Pag.

Dettagli

Indice PARTE PRIMA L INIZIO 1

Indice PARTE PRIMA L INIZIO 1 Indice Introduzione XIII PARTE PRIMA L INIZIO 1 Capitolo 1 Esplorare il World Wide Web 3 1.1 Come funziona il World Wide Web 3 1.2 Browser Web 10 1.3 Server Web 14 1.4 Uniform Resource Locators 15 1.5

Dettagli

Corso di Web programming Modulo T3 A2 - Web server

Corso di Web programming Modulo T3 A2 - Web server Corso di Web programming Modulo T3 A2 - Web server 1 Prerequisiti Pagine statiche e dinamiche Pagine HTML Server e client Cenni ai database e all SQL 2 1 Introduzione In questa Unità si illustra il concetto

Dettagli

Software. Definizione, tipologie, progettazione

Software. Definizione, tipologie, progettazione Software Definizione, tipologie, progettazione Definizione di software Dopo l hardware analizziamo l altra componente fondamentale di un sistema di elaborazione. La macchina come insieme di componenti

Dettagli

Progettazione e Sviluppo dell Applicazione Web Share Mobile per Dispositivi Mobili Multipiattaforma. Elaborato di Laurea di: Marco Stanzani

Progettazione e Sviluppo dell Applicazione Web Share Mobile per Dispositivi Mobili Multipiattaforma. Elaborato di Laurea di: Marco Stanzani UNIVERSITÀ DEGLI STUDI DI MODENA E REGGIO EMILIA Facoltà di Ingegneria Enzo Ferrari Sede di Modena Corso di Laurea Specialistica in Ingegneria Informatica Progettazione e Sviluppo dell Applicazione Web

Dettagli

Introduzione all'uso di

Introduzione all'uso di Introduzione all'uso di Microsoft Outlook Express 6 Outlook Express 6 è un programma, incluso nel browser di Microsoft Internet Explorer, che ci permette di inviare e ricevere messaggi di posta elettronica.

Dettagli

ProgettAzione V anno Unità 3 - Architetture per applicazioni web Lezione: Esempio sviluppo applicazioni

ProgettAzione V anno Unità 3 - Architetture per applicazioni web Lezione: Esempio sviluppo applicazioni Unità 3 - Architetture per applicazioni web Lezione: Esempio sviluppo applicazioni Web service Hello world con Visual Studio 2012 Si tratta di un semplice esempio di web service, infatti come tutti I programmi

Dettagli

Flavio De Paoli depaoli@disco.unimib.it

Flavio De Paoli depaoli@disco.unimib.it Flavio De Paoli depaoli@disco.unimib.it 1 Il web come architettura di riferimento Architettura di una applicazione web Tecnologie lato server: Script (PHP, Pyton, Perl), Servlet/JSP, ASP Tecnologie lato

Dettagli

2 - Introduzione al linguaggio Java

2 - Introduzione al linguaggio Java 2 - Introduzione al linguaggio Java Programmazione e analisi di dati Modulo A: Programmazione in Java Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo

Dettagli

La posta elettronica. ICT per la terza età Le video lezioni della Fondazione Mondo Digitale

La posta elettronica. ICT per la terza età Le video lezioni della Fondazione Mondo Digitale La posta elettronica ICT per la terza età Le video lezioni della Fondazione Mondo Digitale Diapositiva Introduzione Posta elettronica E mail Elettronica Posta In questo argomento del nostro corso impareremo

Dettagli

PredictiOnDemand Manuale Utente 1. Benvenuti nel mondo della previsione delle parole! Benvenuti in PredictiOnDemand!

PredictiOnDemand Manuale Utente 1. Benvenuti nel mondo della previsione delle parole! Benvenuti in PredictiOnDemand! PredictiOnDemand Manuale Utente 1 PredictiOn Demand for Windows La predizione quando serve! 1. Panoramica Benvenuti nel mondo della previsione delle parole! Benvenuti in PredictiOnDemand! PredictiOnDemand

Dettagli

Corso Android Corso Online Programmatore Android

Corso Android Corso Online Programmatore Android Corso Android Corso Online Programmatore Android Accademia Domani Via Pietro Blaserna, 101-00146 ROMA (RM) info@accademiadomani.it Programma Generale del Corso Modulo Uno - Programmazione J2ee 1) Programmazione

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

Corso di Informatica Modulo T3 B1 Programmazione web

Corso di Informatica Modulo T3 B1 Programmazione web Corso di Informatica Modulo T3 B1 Programmazione web 1 Prerequisiti Architettura client/server Elementi del linguaggio HTML web server SQL server Concetti generali sulle basi di dati 2 1 Introduzione Lo

Dettagli

INTERNET EXPLORER Breve manuale d uso

INTERNET EXPLORER Breve manuale d uso INTERNET EXPLORER Breve manuale d uso INDICE INTRODUZIONE... 3 COME IMPOSTARE LA PAGINA INIZIALE... 3 LA WORK AREA... 3 LE VOCI DI MENU... 5 IL MENU FILE... 5 IL MENU MODIFICA... 6 IL MENU VISUALIZZA...

Dettagli

SCP: SCHEDULER LAYER. a cura di. Alberto Boccato

SCP: SCHEDULER LAYER. a cura di. Alberto Boccato SCP: SCHEDULER LAYER a cura di Alberto Boccato PREMESSA: Negli ultimi tre anni la nostra scuola ha portato avanti un progetto al quale ho partecipato chiamato SCP (Scuola di Calcolo Parallelo). Di fatto

Dettagli

Tecnologie e Programmazione Web

Tecnologie e Programmazione Web Presentazione 1 Tecnologie e Programmazione Web Html, JavaScript e PHP RgLUG Ragusa Linux Users Group SOftware LIbero RAgusa http://www.solira.org - Nunzio Brugaletta (ennebi) - Reti 2 Scopi di una rete

Dettagli

MySQL Controllare gli accessi alla base di dati A cura di Silvio Bonechi per http://www.pctrio.com

MySQL Controllare gli accessi alla base di dati A cura di Silvio Bonechi per http://www.pctrio.com MySQL Controllare gli accessi alla base di dati A cura di Silvio Bonechi per http://www.pctrio.com 15.03.2006 Ver. 1.0 Scarica la versione pdf ( MBytes) Nessuno si spaventi! Non voglio fare né un manuale

Dettagli

INDICE PROGRAMMA CORSO

INDICE PROGRAMMA CORSO INDICE PROGRAMMA CORSO PRIMA LEZIONE: Componenti di un computer: Hardware, Software e caratteristiche delle periferiche. SECONDA LEZIONE: Elementi principali dello schermo di Windows: Desktop, Icone, Mouse,

Dettagli

Capitolo 1. Hello, {{name}}

Capitolo 1. Hello, {{name}} Capitolo 1 Hello, {{name}} Il modo migliore per imparare a programmare è scrivere codice, ed è proprio questo ciò che faremo. Per comprendere quanto è facile essere subito operativi con Bootstrap e AngularJS,

Dettagli

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale

Dettagli

Internet Architettura del www

Internet Architettura del www Internet Architettura del www Internet è una rete di computer. Il World Wide Web è l insieme di servizi che si basa sull architettura di internet. In una rete, ogni nodo (detto host) è connesso a tutti

Dettagli

Vntcms 2 istruzioni per l uso!

Vntcms 2 istruzioni per l uso! Vntcms 2 istruzioni per l uso Tutte le operazioni di gestione dei contenuti del sito si effettuano dal pannello di amministrazione localizzato al seguente indirizzo: http://www.il-nome-del-mio-sito.it/admin/go

Dettagli

[Tips & Tricks] 8 settembre 2011

[Tips & Tricks] 8 settembre 2011 10 punti da non sottovalutare per aggiornare con WebSite X5 Evolution 9 i siti realizzati con WebSite X5 Evolution 8 Introduzione Uno dei dubbi che nascono quando viene rilasciata la nuova versione di

Dettagli

Uso del browser, posta elettronica e motori di ricerca Gmail e Google

Uso del browser, posta elettronica e motori di ricerca Gmail e Google Facoltà di Lettere e Filosofia Cdl in Scienze dell Educazione A.A. 2010/2011 Informatica (Laboratorio) Uso del browser, posta elettronica e motori di ricerca Gmail e Google Author Kristian Reale Rev. 2011

Dettagli

Processo di Sviluppo delle Applicazioni

Processo di Sviluppo delle Applicazioni Processo di Sviluppo delle Applicazioni La realizzazione di un applicazione come Vivere Ateneo App Domenico Zarcone Ognuno ha il suo ambiente Quali sono gli ambienti integrati di sviluppo più utilizzati?

Dettagli

Manuale Piattaforma Didattica

Manuale Piattaforma Didattica Manuale Piattaforma Didattica Ver. 1.2 Sommario Introduzione... 1 Accesso alla piattaforma... 1 Il profilo personale... 3 Struttura dei singoli insegnamenti... 4 I Forum... 5 I Messaggi... 7 I contenuti

Dettagli

GUIDA PER L UTILIZZO DELLA WEBAPP VERSIONE 8

GUIDA PER L UTILIZZO DELLA WEBAPP VERSIONE 8 GUIDA PER L UTILIZZO DELLA WEBAPP VERSIONE 8 Contenuto di questo documento 1. Introduzione... 2 2. Menu Principale... 2 Importa dal mio PC... 5 Scarica Risultati... 5 Salva Progetto... 6 Salva con nome...

Dettagli

Siti web e Dreamweaver. La schermata iniziale

Siti web e Dreamweaver. La schermata iniziale Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione

Dettagli

Introduzione all elaborazione di database nel Web

Introduzione all elaborazione di database nel Web Introduzione all elaborazione di database nel Web Prof.ssa M. Cesa 1 Concetti base del Web Il Web è formato da computer nella rete Internet connessi fra loro in una modalità particolare che consente un

Dettagli

Web-App con. Relatore: Leonardo Buscemi

Web-App con. Relatore: Leonardo Buscemi Web-App con Relatore: Leonardo Buscemi Presentazioni Lavoro sulla prototipazione di apparecchiature biomedicali Collaboro con diversi web developers professionisti Sviluppo algoritmi e software con diversi

Dettagli

INTERNET EXPLORER. Breve manuale d'uso

INTERNET EXPLORER. Breve manuale d'uso INTERNET EXPLORER Breve manuale d'uso INDICE INTRODUZIONE... 3 COME IMPOSTARE LA PAGINA INIZIALE...3 LA WORK AREA... 3 LE VOCI DI MENU... 5 IL MENU FILE... 5 IL MENU MODIFICA... 6 IL MENU VISUALIZZA...

Dettagli

Università della Svizzera italiana

Università della Svizzera italiana Università della Svizzera italiana Il sito dell Università della Svizzera italiana e l accessibilità Vs.1.0 11 / 12 / 2007 TEC-LAB WEB-SERVICE 1. INTRODUZIONE Avere accesso al web, per un utente disabile,

Dettagli

Concetti base. Impianti Informatici. Web application

Concetti base. Impianti Informatici. Web application Concetti base Web application La diffusione del World Wide Web 2 Supporto ai ricercatori Organizzazione documentazione Condivisione informazioni Scambio di informazioni di qualsiasi natura Chat Forum Intranet

Dettagli

GESTIRE LA BIBLIOGRAFIA

GESTIRE LA BIBLIOGRAFIA GESTIRE LA BIBLIOGRAFIA STRUMENTI DI GESTIONE BIBLIOGRAFICA I software di gestione bibliografica permettono di raccogliere, catalogare e organizzare diverse tipologie di materiali, prendere appunti, formattare

Dettagli

UNIVERSITÀ DEGLI STUDI DI TORINO FACOLTÀ DI SCIENZE DELLA FORMAZIONE CORSO DI STUDIO TRIENNALE IN SCIENZE DELL EDUCAZIONE

UNIVERSITÀ DEGLI STUDI DI TORINO FACOLTÀ DI SCIENZE DELLA FORMAZIONE CORSO DI STUDIO TRIENNALE IN SCIENZE DELL EDUCAZIONE UNIVERSITÀ DEGLI STUDI DI TORINO FACOLTÀ DI SCIENZE DELLA FORMAZIONE CORSO DI STUDIO TRIENNALE IN SCIENZE DELL EDUCAZIONE Curriculum: Esperto di formazione a distanza DISSERTAZIONE FINALE Raccontami :

Dettagli

La Top Ten dei suggerimenti per la progettazione Web

La Top Ten dei suggerimenti per la progettazione Web In questo capitolo Impostare l obiettivo Mantenere le pagine libere e pulite Non travolgere i visitatori con i colori Usare meno di quattro tipi di carattere Essere coerenti Semplificare Essere rapidi

Dettagli

Sistema Informativo Alice

Sistema Informativo Alice Sistema Informativo Alice Urbanistica MANUALE UTENTE MODULO PROFESSIONISTI WEB settembre 2007 INDICE 1. INTRODUZIONE...2 1.1. Cos è MPWEB?... 2 1.2. Conoscenze richieste... 2 1.3. Modalità di utilizzo...

Dettagli

LABORATORI DI INFORMATICA. CONDIVISIONE, CLOUD e CONTROLLO REMOTO IMPLEMENTAZIONE DI UNA GESTIONE EFFICIENTE

LABORATORI DI INFORMATICA. CONDIVISIONE, CLOUD e CONTROLLO REMOTO IMPLEMENTAZIONE DI UNA GESTIONE EFFICIENTE LABORATORI DI INFORMATICA CONDIVISIONE, CLOUD e CONTROLLO REMOTO IMPLEMENTAZIONE DI UNA GESTIONE EFFICIENTE Tutti i laboratori di informatica, come la gran parte delle postazioni LIM, sono stati convertiti

Dettagli

Corso Programmazione Java Android. Programma

Corso Programmazione Java Android. Programma Corso Programmazione Java Android Programma 1.1 Obiettivo e modalità di fruizione L obiettivo del corso è di fornire le conoscenze tecniche e metodologiche per svolgere la professione di Programmatore

Dettagli

CONTENT MANAGMENT SYSTEMS

CONTENT MANAGMENT SYSTEMS CONTENT MANAGMENT SYSTEMS ESTRATTO DA: Ileana D'Incecco, Progettare la comunicazione web per organizzazioni non-profit con strumenti open source: ideazione e realizzazione del sito web della Casa delle

Dettagli

IL TUO SITO WEB. SkyNotes è l insieme degli strumenti di cui l azienda italiana necessita per essere competitiva nel mondo in costante cambiamento.

IL TUO SITO WEB. SkyNotes è l insieme degli strumenti di cui l azienda italiana necessita per essere competitiva nel mondo in costante cambiamento. IL TUO SITO WEB SkyNotes è l insieme degli strumenti di cui l azienda italiana necessita per essere competitiva nel mondo in costante cambiamento. personalizzabile # intuitivo # immediato IL TUO SITO SUBITO

Dettagli

LA TUA PRIMA APP CON CORDOVA

LA TUA PRIMA APP CON CORDOVA LA TUA PRIMA APP CON CORDOVA Dedicato a. Gianluca ed Enza, due persone speciali Autore: Gianpiero Fasulo www.gfasulo.it - Pag. 2 COPYRIGHT La tua prima APP con CORDOVA Tutti i diritti riservati. Nessuna

Dettagli

E completamente personalizzabile potrete variare colori, i Vs. dati i riferimenti per i contatti, i prodotti in tempo reale.

E completamente personalizzabile potrete variare colori, i Vs. dati i riferimenti per i contatti, i prodotti in tempo reale. e.commerce dinamico sul Web multilingua, consente di gestire un e.commerce anche ad utenti poco esperti grazie alla semplicità d'uso del pannello amministratore che permette la gestione dei clienti, abilitarli

Dettagli

La realizzazione di WebGis con strumenti "Open Source".

La realizzazione di WebGis con strumenti Open Source. La realizzazione di WebGis con strumenti "Open Source". Esempi di impiego di strumenti a sorgente aperto per la realizzazione di un Gis con interfaccia Web Cos'è un Web Gis? Da wikipedia: Sono detti WebGIS

Dettagli

Soluzioni per l ecommerce integrando Joomla! e Magento

Soluzioni per l ecommerce integrando Joomla! e Magento Simone Bussoni Soluzioni per l ecommerce integrando Joomla! e Magento Joomla! CMS potente Estendibile Open Source Migliaia di estensioni Community molto attiva Perché non un altro CMS? Il Miglior CMS è

Dettagli

Email marketing ed invio newsletter. Invio di messaggi vocali personalizzati

Email marketing ed invio newsletter. Invio di messaggi vocali personalizzati Sistema online professionale per gestire il tuo mailing Email marketing ed invio newsletter SMS marketing Invio massivo di fax Invio di lettere cartacee (prioritaria o raccomandata) Invio di messaggi vocali

Dettagli

Guida ai servizi SUAP on-line in Regione Toscana

Guida ai servizi SUAP on-line in Regione Toscana Guida ai servizi SUAP on-line in Regione Toscana Sommario Premessa...1 Requisiti necessari...1 Formato dei file firmati digitalmente...2 Accesso ai servizi...2 Voci di Menù a disposizione... 3 Fasi della

Dettagli

A destra è delimitata dalla barra di scorrimento verticale, mentre in basso troviamo una riga complessa.

A destra è delimitata dalla barra di scorrimento verticale, mentre in basso troviamo una riga complessa. La finestra di Excel è molto complessa e al primo posto avvio potrebbe disorientare l utente. Analizziamone i componenti dall alto verso il basso. La prima barra è la barra del titolo, dove troviamo indicato

Dettagli

V 1.00b. by ReBunk. per suggerimenti e critiche mi trovate nell hub locarno.no-ip.org. Guida di base IDC ++1.072

V 1.00b. by ReBunk. per suggerimenti e critiche mi trovate nell hub locarno.no-ip.org. Guida di base IDC ++1.072 V 1.00b by ReBunk per suggerimenti e critiche mi trovate nell hub locarno.no-ip.org Guida di base IDC ++1.072 Thanks To SicKb0y (autore del idc++) staff (per sopportarmi tutti i giorni) Versione definitiva

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

MDaemon e Outlook Connector for MDaemon

MDaemon e Outlook Connector for MDaemon MDaemon e Outlook Connector for MDaemon Introduzione...2 Cos'è il groupware...2 Che cosa significa groupware?...2 Cos è WorldClient...2 MDaemon e l evoluzione delle funzionalità groupware...3 Nuove funzionalità

Dettagli

JAVASCRIPT. Tale file è associato alla pagina web mediante il tag