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

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

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

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

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

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

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

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

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

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

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

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

Breve introduzione allo sviluppo WEB. a cura di Ciro Attanasio - ciro.attanasio@email.cz

Breve introduzione allo sviluppo WEB. a cura di Ciro Attanasio - ciro.attanasio@email.cz Breve introduzione allo sviluppo WEB a cura di Ciro Attanasio - ciro.attanasio@email.cz Partiamo (1 di 1) Come funziona il WEB e quali tecnologie lo compongono Cos è un Client (1 di 2) Un client, in informatica,

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

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

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

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

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

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

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

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

WEBMASTER. Strategie per programmare siti web e portali. Corso pratico per Webmaster di Daniele Venditti. Manuale di informatica per il web

WEBMASTER. Strategie per programmare siti web e portali. Corso pratico per Webmaster di Daniele Venditti. Manuale di informatica per il web WEBMASTER Strategie per programmare siti web e portali Corso pratico per Webmaster di Daniele Venditti Manuale di informatica per il web www.progettimultimediali.com www.corsi-online.it Questo Ebook è

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

HTML 1 AVVISO. Terminologia. Introduzione ad HTML. HyperText Markup Language

HTML 1 AVVISO. Terminologia. Introduzione ad HTML. HyperText Markup Language HTML 1 HyperText Markup Language AVVISO Martedì 4 ottobre in laboratorio ci saranno 2 turni: 11:00 12:15 matricole pari 12:30 13:45 matricole dispari Introduzione ad HTML Documenti HTML Tag di markup Formattazione

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

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

UNIVERSITÀ DEGLI STUDI DI FIRENZE. Relazione elaborato di progettazione e produzione multimediale

UNIVERSITÀ DEGLI STUDI DI FIRENZE. Relazione elaborato di progettazione e produzione multimediale UNIVERSITÀ DEGLI STUDI DI FIRENZE Relazione elaborato di progettazione e produzione multimediale AllPainters.Net SISTEMA PER LA GENERAZIONE DI SITI GRATUITI PER PITTORI Autori: - Bandini Roberto - Ercoli

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

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

Internet WWW ISP Protocolli di Rete

Internet WWW ISP Protocolli di Rete Internet Internet è un sistema di reti di computer interconnessi tra loro che facilita l'utilizzo di servizi di comunicazione dati come la posta elettronica, il Word Wide Web (WWW), il trasferimento dati

Dettagli

DA DEFINIRE Sede del corso: Presso GI Formazione in Piazza IV novembre 5, Milano Orari dalle 9.00 alle 13.00 e dalle 14.00 alle 18.

DA DEFINIRE Sede del corso: Presso GI Formazione in Piazza IV novembre 5, Milano Orari dalle 9.00 alle 13.00 e dalle 14.00 alle 18. PERIODO : DA DEFINIRE Sede del corso: Presso GI Formazione in Piazza IV novembre 5, Milano Orari dalle 9.00 alle 13.00 e dalle 14.00 alle 18.00 A CHI E RIVOLTO IL CORSO Questo progetto si rivolge a tutti

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

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

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

Formazione sistema editoriale CMS

Formazione sistema editoriale CMS Ufficio Società dell'informazione Nome del Progetto Acronimo del Progetto Formazione sistema editoriale CMS Documento Data di stesura Maggio 2010 Versione 1.2 Sommario 1 Scopo... 3 2 Campo di applicazione...

Dettagli

LA PROFESSIONE DEL WEB DESIGNER

LA PROFESSIONE DEL WEB DESIGNER LA PROFESSIONE DEL WEB DESIGNER Lezione 1 1 Web Design Lafiguracentralenelprogettodiunsitowebèilwebdesigner:eglisioccupadell'aspetto visivo e del coinvolgimento emotivo di siti Web business to business

Dettagli

Reverse Engineering di Rich Internet Applications basate su AJAX

Reverse Engineering di Rich Internet Applications basate su AJAX Facoltà di Ingegneria Corso di Studi in Ingegneria Informatica tesi di laurea Reverse Engineering di Rich Internet Applications basate su AJAX Anno Accademico: 2006/2007 relatore Ch.mo prof. Anna Rita

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

Modulo 8. Strumenti di produzione Strumenti. Gli strumenti più utilizzati per produrre pagine Web sono essenzialmente due:

Modulo 8. Strumenti di produzione Strumenti. Gli strumenti più utilizzati per produrre pagine Web sono essenzialmente due: Pagina 1 di 6 Strumenti di produzione Strumenti Gli strumenti più utilizzati per produrre pagine Web sono essenzialmente due: 1. Netscape Composer, gratuito e scaricabile da netscape.org assieme al browser

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

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

SVN server, per Florim, è installato su server di test, anche se la sua configurazione può avvenire in qualsiasi ambiente.

SVN server, per Florim, è installato su server di test, anche se la sua configurazione può avvenire in qualsiasi ambiente. Siti FLORIM SVN Subversion Il sistema di versioning viene illustrato nell immagine seguente: Sistema locale dello sviluppatore, si parla di working copy ( copia dei file dal server in produzione) SVN server,

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

Introduzione a Wordpress. Corso completo alla conoscenza e all uso del CMS Open Source WP (incontro 1/6)

Introduzione a Wordpress. Corso completo alla conoscenza e all uso del CMS Open Source WP (incontro 1/6) Introduzione a Wordpress Corso completo alla conoscenza e all uso del CMS Open Source WP (incontro 1/6) Indice Rilevazione aspettative e competenze in ingresso Patto formativo Presentazione di WP Premesse

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

Il linguaggio HTML - Nozioni di base

Il linguaggio HTML - Nozioni di base Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)

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

Mobile & Technology. Area di formazione. Corso ios base. Corso ios avanzato. Il mondo delle App: idee, creatività, business.

Mobile & Technology. Area di formazione. Corso ios base. Corso ios avanzato. Il mondo delle App: idee, creatività, business. Area di formazione Mobile & Technology 01 02 03 04 05 Corso ios base Corso ios avanzato Il mondo delle App: idee, creatività, business Progetto App AngularJS - Up and running 01 Corso ios base Ore: 24

Dettagli

SCUOLA POLITECNICA. 1 semestre Facoltativa Voto in trentesimi

SCUOLA POLITECNICA. 1 semestre Facoltativa Voto in trentesimi SCUOLA ANNO ACCADEMICO OFFERTA 2015/2016 ANNO ACCADEMICO EROGAZIONE 2017/2018 CORSO DILAUREA INSEGNAMENTO TIPO DI ATTIVITA' AMBITO CODICE INSEGNAMENTO 18033 SETTORI SCIENTIFICO-DISCIPLINARI SCUOLA POLITECNICA

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

Sviluppo di un applicazione mobile per la gestione degli interventi tecnici tramite geolocalizzazione

Sviluppo di un applicazione mobile per la gestione degli interventi tecnici tramite geolocalizzazione UNIVERSITA DEGLI STUDI DI FERRARA Corso di Laurea in informatica Anno Accademico 2011-2012 Sviluppo di un applicazione mobile per la gestione degli interventi tecnici tramite geolocalizzazione Relatore:

Dettagli

APPENDICE B Le Active Server Page

APPENDICE B Le Active Server Page APPENDICE B Le Active Server Page B.1 Introduzione ad ASP La programmazione web è nata con la Common Gateway Interface. L interfaccia CGI tuttavia presenta dei limiti: ad esempio anche per semplici elaborazioni

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

Capitolo 1 Introduzione a Gambas

Capitolo 1 Introduzione a Gambas Capitolo 1 Introduzione a Gambas Gambas è stato creato inizialmente da Benoit Minisini, un residente della periferia di Parigi. Secondo Benoit, Gambas è un linguaggio Basic con estensioni per la programmazione

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

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0)

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Nota Bene: Si raccomanda di leggere queste dispense di fronte al computer, provando passo dopo passo le funzionalità descritte. Per

Dettagli

Programmazione in ambiente

Programmazione in ambiente Università Politecnica delle Marche Dipartimento di Ingegneria dell Informazione Programmazione in ambiente Android Laura Montanini - laura.montanini@univpm.it Corso di Tecnologie per le TLC 2013-2014

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 Android Corso Online Sviluppo su Cellulari con Android

Corso Android Corso Online Sviluppo su Cellulari con Android Corso Android Corso Online Sviluppo su Cellulari con Android Accademia Futuro info@accademiafuturo.it Programma Generale del Corso di Sviluppo su Cellulari con Android Programma Base Modulo Uno - Programmazione

Dettagli

Area di formazione. Mobile & Technology. Ingolosito dalle nuove tecnologie? Appassionato di sviluppo App e Mobile? Corso ios avanzato Swift

Area di formazione. Mobile & Technology. Ingolosito dalle nuove tecnologie? Appassionato di sviluppo App e Mobile? Corso ios avanzato Swift Area di formazione Mobile & Technology Ingolosito dalle nuove tecnologie? Appassionato di sviluppo App e Mobile? 01 02 03 04 05 Corso ios base Swift Corso ios avanzato Swift AngularJS Up and running Ideare

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

Sviluppare applicazioni HTML5 solide e scalabili in AngularJS

Sviluppare applicazioni HTML5 solide e scalabili in AngularJS Sviluppare applicazioni HTML5 solide e scalabili in AngularJS PREREQUESITI: Il partecipante dovrà possedere una certà familiarità con l uso di HTML, Javascript (variabili, manipolazione array e oggetti,

Dettagli

websitearchitettibo ALLEGATO 01 - LINEE GUIDA PER IL PROGETTO

websitearchitettibo ALLEGATO 01 - LINEE GUIDA PER IL PROGETTO CONCORSO PER LA PROGETTAZIONE E LA REALIZZAZIOINE DEL NUOVO SITO WEB DELL ORDINE DEGLI ARCHITETTI, PIANIFICATORI, PAESAGGISTI E CONSERVATORI DI BOLOGNA ALLEGATO 01 - LINEE GUIDA PER IL PROGETTO PRINCIPI

Dettagli

Funzioni di base. Manualino OE6. Outlook Express 6

Funzioni di base. Manualino OE6. Outlook Express 6 Manualino OE6 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. È gratuito,

Dettagli

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0 AJAX Goy - a.a. 2006/2007 Servizi Web 1 Cos'è il Web 2.0 Web 2.0 = termine introdotto per la prima volta nel 2004 come titolo di una conferenza promossa dalla casa editrice O Reilly L'idea è che ci si

Dettagli

Lezione di Basi di Dati 1 18/11/2008 - TECNOLOGIE PER IL WEB: CGI - AJAX SERVLETS & JSP

Lezione di Basi di Dati 1 18/11/2008 - TECNOLOGIE PER IL WEB: CGI - AJAX SERVLETS & JSP EVOLUZIONE DEL WEB: PAGINE STATICHE vs PAGINE DINAMICHE Il Web è nato a supporto dei fisici, perché potessero scambiare tra loro le informazioni inerenti le loro sperimentazioni. L HTTP è nato inizialmente

Dettagli

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER PROGRAMMA DEL CORSO MASTER WEB DEVELOPER Il corso Master Web Developer con Certificazione internazionale Adobe Dreamweaver prepara lo studente a entrare nel mondo dello sviluppo Web (blog, siti, portali).

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

Modulo 6 Proviamo Wordpress gratuitamente

Modulo 6 Proviamo Wordpress gratuitamente Copyright Andrea Giavara wppratico.com Modulo 6 Proviamo Wordpress gratuitamente 1. Wordpress.com una piattaforma gratuita per il blogging 2. Installare Wordpress in locale 3. Creare un sito gratis con

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

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

Pratica guidata 4. Navigare nel web

Pratica guidata 4. Navigare nel web Pratica guidata 4 Navigare nel web Principali browser web e uso del browser Ipertesto e link; Siti e pagine web; Indirizzi web Inserire un indirizzo web e navigare un sito Comprendere cos è e come funziona

Dettagli

Architetture Web. parte 1. Programmazione in Ambienti Distribuiti A.A. 2003-04

Architetture Web. parte 1. Programmazione in Ambienti Distribuiti A.A. 2003-04 Architetture Web parte 1 Programmazione in Ambienti Distribuiti A.A. 2003-04 Architetture Web (1) Modello a tre livelli in cui le interazioni tra livello presentazione e livello applicazione sono mediate

Dettagli

eascom MANUALE per UTENTI A cura di eascom 2012 www.eascom.it

eascom MANUALE per UTENTI A cura di eascom 2012 www.eascom.it MANUALE per UTENTI A cura di eascom 2012 www.eascom.it Indice Introduzione... 3 Perchè Wordpress... 3 Pagina di accesso all amministrazione... 3 Bacheca... 4 Home... 4 Aggiornamenti... 5 Articoli... 6

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

Esercitazioni di PROGETTAZIONE DEL SOFTWARE A.A. 2011-2012

Esercitazioni di PROGETTAZIONE DEL SOFTWARE A.A. 2011-2012 Sapienza Università di Roma Facoltà di Ingegneria dell Informazione, Informatica e Statistica Corso di Laurea in Ingegneria Informatica ed Automatica Corso di Laurea in Ingegneria dei Sistemi Informatici

Dettagli

Primi passi con Jamio Composer. Dall idea applicativa alla soluzione in pochi minuti

Primi passi con Jamio Composer. Dall idea applicativa alla soluzione in pochi minuti Primi passi con Jamio Composer Dall idea applicativa alla soluzione in pochi minuti Comporre una nuova soluzione applicativa Jamio Composer è l ambiente di modellazione della piattaforma Jamio. Le soluzioni

Dettagli

GUIDA UTENTE INTERNET CAFE MANAGER (Vers. 5.2.0)

GUIDA UTENTE INTERNET CAFE MANAGER (Vers. 5.2.0) GUIDA UTENTE INTERNET CAFE MANAGER (Vers. 5.2.0) GUIDA UTENTE INTERNET CAFE MANAGER (Vers. 5.2.0)...1 Installazione e configurazione...2 Installazione ICM Server...3 Primo avvio e configurazione di ICM

Dettagli

CMS (Content Management System) della categoria Open Source

CMS (Content Management System) della categoria Open Source Una panoramica sui CMS (Content Management System) CMS (Content Management System) della categoria Open Source Per la piattaforma PHP/MYSQL e considerata l esigenza sempre più ricorrente di realizzare

Dettagli

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale

Dettagli

La gestione dei risultati: ZOTERO, un programma gratuito

La gestione dei risultati: ZOTERO, un programma gratuito La gestione dei risultati: ZOTERO, un programma gratuito Ricerche, citazioni e bibliografie con Zotero Zotero è un estensione di Firefox che consente di raccogliere e gestire risorse bibliografiche e accademiche

Dettagli

Corso di formazione CerTIC Tablet

Corso di formazione CerTIC Tablet Redattore prof. Corso di formazione CerTIC Tablet Dodicesima Dispensa Comitato Tecnico Scientifico: Gruppo Operativo di Progetto CerticAcademy Learning Center, patrocinato dall assessorato al lavoro e

Dettagli

Corso di Web Programming

Corso di Web Programming Corso di Web Programming 1. Introduzione a Internet e al WWW Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica

Dettagli

Elementi di Informatica e Programmazione

Elementi di Informatica e Programmazione Elementi di Informatica e Programmazione Il Sistema Operativo Corsi di Laurea in: Ingegneria Civile Ingegneria per l Ambiente e il Territorio Università degli Studi di Brescia Docente: Daniela Fogli Cos

Dettagli

Introduzione. In questo capitolo

Introduzione. In questo capitolo Introduzione I CSS ( Cascading Style Sheets, fogli di stile a cascata) sono la tecnologia elaborata dal W3C (World Wide Web Consortium; http://www.w3.org/) per definire l aspetto (caratteri, colori e impaginazione)

Dettagli

Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0)

Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0) Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0) Nota Bene: Si raccomanda di leggere queste dispense di fronte al computer, provando passo dopo passo le funzionalità descritte. Per

Dettagli

Framework di Middleware. per Architetture Enterprise

Framework di Middleware. per Architetture Enterprise Framework di Middleware per Architetture Enterprise Corso di Ingegneria del Software A.A.2011-2012 Un po di storia 1998: Sun Microsystem comprende l importanza del World Wide Web come possibile interfaccia

Dettagli

D3.2 Documento illustrante l architettura 3D Cloud per la realizzazione di servizi in modalità SaaS

D3.2 Documento illustrante l architettura 3D Cloud per la realizzazione di servizi in modalità SaaS D3.2 Documento illustrante l architettura 3D Cloud per la realizzazione di servizi in modalità SaaS Il modello SaaS Architettura 3D Cloud Il protocollo DCV Benefici Il portale Web EnginFrame EnginFrame

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

Modulo TrovaPrezzi/7pixel Documentazione Versione 2.22

Modulo TrovaPrezzi/7pixel Documentazione Versione 2.22 Modulo TrovaPrezzi/7pixel Documentazione Versione 2.22 Grazie per aver acquistato questo modulo che è stato progettato con funzioni innovative, raramente disponibili in altri prodotti simili esistenti

Dettagli

Ingegneria del Software - Il Ciclo Lungo

Ingegneria del Software - Il Ciclo Lungo Ingegneria del Software - Il Ciclo Lungo Alessandro Martinelli alessandro.martinelli@unipv.it 10 Marzo 2014 Il Ciclo Lungo Il Versioning e la Condivisione di Codice Organizzazione dei Pacchetti La Modellazione

Dettagli

Strumenti per lo sviluppo del software

Strumenti per lo sviluppo del software Lo sviluppo del software Strumenti per lo sviluppo del software Lo sviluppo del software è l attività centrale del progetto e ha lo scopo di produrre il codice sorgente che, una volta compilato e messo

Dettagli

Ottimizzazione dello sviluppo software con Microsoft Visual Studio 2008

Ottimizzazione dello sviluppo software con Microsoft Visual Studio 2008 Ottimizzazione dello sviluppo software con Microsoft Visual Studio 2008 White paper Novembre 2007 Per informazioni aggiornate, visitare l indirizzo www.microsoft.com/italy/vstudio È possibile che a questo

Dettagli

Le funzionalità principali della piattaforma

Le funzionalità principali della piattaforma Istituto di Scienza e Tecnologie dell'informazione A Faedo (ISTI) - Laboratorio di domotica Quimby: Le funzionalità principali della piattaforma Dario Russo (dario.russo@isti.cnr.it) Obiettivi del progetto

Dettagli

SWIM v2 Design Document

SWIM v2 Design Document PROGETTO DI INGEGNERIA DEL SOFTWARE 2 SWIM v2 DD Design Document Matteo Danelli Daniel Cantoni 22 Dicembre 2012 1 Indice Progettazione concettuale Modello ER Entità e relazioni nel dettaglio User Feedback

Dettagli

Novità di Visual Studio 2008

Novità di Visual Studio 2008 Guida al prodotto Novità di Visual Studio 2008 Introduzione al sistema di sviluppo di Visual Studio Visual Studio Team System 2008 Visual Studio Team System 2008 Team Foundation Server Visual Studio Team

Dettagli

principalmente un programma per la gestione di bibliografie: dalla raccolta dei riferimenti alla formattazione delle citazioni

principalmente un programma per la gestione di bibliografie: dalla raccolta dei riferimenti alla formattazione delle citazioni COS È? principalmente un programma per la gestione di bibliografie: dalla raccolta dei riferimenti alla formattazione delle citazioni un programma gratuito: la versione base offre 300 MB di spazio disco

Dettagli

Port Community System del Porto di Ravenna CONFIGURAZIONE

Port Community System del Porto di Ravenna CONFIGURAZIONE Port Community System del Porto di Ravenna CONFIGURAZIONE SOMMARIO Indicazioni generali... 3 Dipendenze software... 4 Lato server... 4 Lato client... 4 Organizzazione del sistema... 5 Struttura delle directory...

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

Passaggio dei dati tra HTML e PHP : array superglobali $_GET e $_POST

Passaggio dei dati tra HTML e PHP : array superglobali $_GET e $_POST Passaggio dei dati tra HTML e PHP : array superglobali $_GET e $_POST I valori inviati da un modulo (con metodo post o get), sono automaticamente memorizzati da PHP sia in variabili di ambiente associate

Dettagli