jQuery Mobile è un framework per la creazione di applicazioni web mobile. Prima di iniziare a studiare jQuery Mobile, si dovrebbe avere una conoscenza di base di: HTML, CSS, jQuery. jQuery Mobile è un framework web ottimizzato per un uso touch per la creazione di applicazioni web mobile e funziona su tutti i sistemi più diffusi...
Cos'è la UI Composition e che problemi può risolvere
Perchè MVVM e WPF sono importanti per la UI Composition
Il concetto di 'region' e 'UI Injection'
Analisi del toolkit PRISM di Microsoft e cosa comporta realizzarsene uno in proprio.
In questa sessione faremo una panoramica a 360 gradi su Blazor, la nuovissima tecnologia Microsoft nata da una (geniale :-) idea di Steve Sanderson per lo sviluppo di applicazioni Web client basate su WebAssembly.
Nell'introduzione parlemermo brevemente di WebAssembly, spiegando di cosa si tratta e del perché questa tecnologia abbia tutte le premesse per portare uno dei più grandi "disruptive changes" nel modo di sviluppare applicazioni Web client. Passeremo poi a Blazor esaminandone prima gli aspetti architetturali e procedendo con un behind the scenes per svelare in che modo avviene la "magia" dell'interazione con il browser. Verranno poi presentate le feature che questa tecnologia offre (template project su VS, components, layouts, binding, dependency injection, hosting) sia attraverso slides che, di pari passo, con delle demo di un'applicazione funzionante realizzata in Blazor. Vedremo poi quali sono le problematiche legate a performance, deployment e distribuzione parlando delle possibili future ottimizzazioni. Infine chiuderemo con un confronto tra Blazor e i maggiori framework ora in uso per lo sviluppo di applicazioni Web client (Angular, Vue, Knockout, ecc.) e con alcune considerazioni sull'impatto che Blazor e tecnologie simili potrebbe avere a cascata per lo sviluppo Web futuro, in una sorta di "butterfly effect" nel mondo Web client.
Introduction to Blazor and WebAssembly in Christmas sauce. In this session we will see how to create a small demonstration application to send Christmas greetings.
Cos'è la UI Composition e che problemi può risolvere
Perchè MVVM e WPF sono importanti per la UI Composition
Il concetto di 'region' e 'UI Injection'
Analisi del toolkit PRISM di Microsoft e cosa comporta realizzarsene uno in proprio.
In questa sessione faremo una panoramica a 360 gradi su Blazor, la nuovissima tecnologia Microsoft nata da una (geniale :-) idea di Steve Sanderson per lo sviluppo di applicazioni Web client basate su WebAssembly.
Nell'introduzione parlemermo brevemente di WebAssembly, spiegando di cosa si tratta e del perché questa tecnologia abbia tutte le premesse per portare uno dei più grandi "disruptive changes" nel modo di sviluppare applicazioni Web client. Passeremo poi a Blazor esaminandone prima gli aspetti architetturali e procedendo con un behind the scenes per svelare in che modo avviene la "magia" dell'interazione con il browser. Verranno poi presentate le feature che questa tecnologia offre (template project su VS, components, layouts, binding, dependency injection, hosting) sia attraverso slides che, di pari passo, con delle demo di un'applicazione funzionante realizzata in Blazor. Vedremo poi quali sono le problematiche legate a performance, deployment e distribuzione parlando delle possibili future ottimizzazioni. Infine chiuderemo con un confronto tra Blazor e i maggiori framework ora in uso per lo sviluppo di applicazioni Web client (Angular, Vue, Knockout, ecc.) e con alcune considerazioni sull'impatto che Blazor e tecnologie simili potrebbe avere a cascata per lo sviluppo Web futuro, in una sorta di "butterfly effect" nel mondo Web client.
Introduction to Blazor and WebAssembly in Christmas sauce. In this session we will see how to create a small demonstration application to send Christmas greetings.
Alessandro Forte e Michele Aponte, co-fondatori di DotNetCampania, intervengono sul confronto tra i due pattern MVP e MVC per lo sviluppo di applicazioni Web.
In questa sessione andremo in dettaglio sul come poter migliorare le nostre applicazioni ASP.NET dal punto delle vista delle performance: Come capire dove interventire? Cosa possiamo migliorare? A cosa dobbiamo prestare attenzione? E nel caso di un'applicazione esistente, dove possiamo intervenire per migliorarla ulteriormente?
Visual Studio Online è già molto completo, ma offre interessanti possibilità di integrazione.
Vedremo come estendere Visual Studio Online (ma anche TFS) mediante le sue REST API ed i Service Hooks.
ARCHITETTURA DI UN'APPLICAZIONE SCALABILEDotNetCampus
Questa sessione tratterà delle implementazioni di architetture robuste e scalabili, in scenari di sviluppo applicativi rientranti nella tipologia dei Software as a Service. In particolare vedremo come accopiare le feature e le necessità del SaaS con servizi propri presenti su Azure; con focus su web, servizi mobili, data, e notification.
Xamarin: Shared Library and Portable Class Library - Aristide Di Francesco - ...Codemotion
A key component of the creation of cross-platform applications to be able to share code among several specific projects and platform dependent. Each different platform can only use the class libraries that have been developed for that specific platform. In Xamarin there are two main approaches to the sharing code: Using Shared Asset Projects (Shared Library) and the Portable Class Library (PCL) Projects. In this session we will see how and when to use the shared library, or the PCL library and we will try to answer the question: Shared or PCL?
Non stiamo parlando di un ritorno a WebForm ma di un'evoluzione (o meglio) di un'alternativa al pattern MVC. Le Razor Pages possono essere un buon motore per smuovere le migrazioni di vecchie applicazioni, utilizzando un paradigma di pagina (vicino a quello che chi utilizza WebForm già conosce) ma con una visione e pulizia degna delle migliori applicazioni MVC .
Ecco che le Razor Pages si stanno ritagliano il loro spazio, ed in questa sessione cercheremo di affrontare i pro e contro del loro utilizzo, capendone al meglio i casi duso ideali.
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformGabriele Gaggi
Cordova è la chiave di volta che consente agli sviluppatori web un ingresso rapido ed indolore negli store delle diverse piattaforme mobili. Vedremo come utilizzare questa chiave di volta sfruttando la potenza e semplicità del framework MVC di Google AngularJs in collaborazione con le caratteristiche responsive offerte dal framework di Twitter Bootstrap.
L’articolo intende comunicare le informazioni base che riguardano gli hooks favorendo l’aspetto reale, in altre parole, far capire a cosa servono tramite l’esposizione e realizzazione di un caso di studio quanto più possibile vicino al reale. Sarà quindi presentato un caso d’integrazione che farà uso degli hooks, toccando i vari aspetti di personalizzazione. L’articolo sarà suddiviso in più episodi per evitare una “sbrodolata” d’informazione e rendere più efficace l’assimilazione di quanto esposto.
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...Antonio Gallo
Ionic è da anni uno dei framework basati su angular più famosi e più usati.
La versione 4 è una completa riscrittura della precedente versione usando tutta una serie di nuovi standard web con cui avremo a che fare sempre più spesso nei prossimi anni: Custom Element, Variabili CSS, Shadow DOM e non solo.
In questo talk, sia per esperti che principianti, vedremo come, grazie a Ionic, si può usare Angular per sviluppare un applicazione funzionante sia sul Web che sul Mobile.
Alessandro Forte e Michele Aponte, co-fondatori di DotNetCampania, intervengono sul confronto tra i due pattern MVP e MVC per lo sviluppo di applicazioni Web.
In questa sessione andremo in dettaglio sul come poter migliorare le nostre applicazioni ASP.NET dal punto delle vista delle performance: Come capire dove interventire? Cosa possiamo migliorare? A cosa dobbiamo prestare attenzione? E nel caso di un'applicazione esistente, dove possiamo intervenire per migliorarla ulteriormente?
Visual Studio Online è già molto completo, ma offre interessanti possibilità di integrazione.
Vedremo come estendere Visual Studio Online (ma anche TFS) mediante le sue REST API ed i Service Hooks.
ARCHITETTURA DI UN'APPLICAZIONE SCALABILEDotNetCampus
Questa sessione tratterà delle implementazioni di architetture robuste e scalabili, in scenari di sviluppo applicativi rientranti nella tipologia dei Software as a Service. In particolare vedremo come accopiare le feature e le necessità del SaaS con servizi propri presenti su Azure; con focus su web, servizi mobili, data, e notification.
Xamarin: Shared Library and Portable Class Library - Aristide Di Francesco - ...Codemotion
A key component of the creation of cross-platform applications to be able to share code among several specific projects and platform dependent. Each different platform can only use the class libraries that have been developed for that specific platform. In Xamarin there are two main approaches to the sharing code: Using Shared Asset Projects (Shared Library) and the Portable Class Library (PCL) Projects. In this session we will see how and when to use the shared library, or the PCL library and we will try to answer the question: Shared or PCL?
Non stiamo parlando di un ritorno a WebForm ma di un'evoluzione (o meglio) di un'alternativa al pattern MVC. Le Razor Pages possono essere un buon motore per smuovere le migrazioni di vecchie applicazioni, utilizzando un paradigma di pagina (vicino a quello che chi utilizza WebForm già conosce) ma con una visione e pulizia degna delle migliori applicazioni MVC .
Ecco che le Razor Pages si stanno ritagliano il loro spazio, ed in questa sessione cercheremo di affrontare i pro e contro del loro utilizzo, capendone al meglio i casi duso ideali.
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformGabriele Gaggi
Cordova è la chiave di volta che consente agli sviluppatori web un ingresso rapido ed indolore negli store delle diverse piattaforme mobili. Vedremo come utilizzare questa chiave di volta sfruttando la potenza e semplicità del framework MVC di Google AngularJs in collaborazione con le caratteristiche responsive offerte dal framework di Twitter Bootstrap.
L’articolo intende comunicare le informazioni base che riguardano gli hooks favorendo l’aspetto reale, in altre parole, far capire a cosa servono tramite l’esposizione e realizzazione di un caso di studio quanto più possibile vicino al reale. Sarà quindi presentato un caso d’integrazione che farà uso degli hooks, toccando i vari aspetti di personalizzazione. L’articolo sarà suddiviso in più episodi per evitare una “sbrodolata” d’informazione e rendere più efficace l’assimilazione di quanto esposto.
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...Antonio Gallo
Ionic è da anni uno dei framework basati su angular più famosi e più usati.
La versione 4 è una completa riscrittura della precedente versione usando tutta una serie di nuovi standard web con cui avremo a che fare sempre più spesso nei prossimi anni: Custom Element, Variabili CSS, Shadow DOM e non solo.
In questo talk, sia per esperti che principianti, vedremo come, grazie a Ionic, si può usare Angular per sviluppare un applicazione funzionante sia sul Web che sul Mobile.
FAST è una raccolta di tecnologie, basate su Web Components e su Web Standards moderni, che ci aiuta ad affrontare in modo efficiente alcune delle sfide più comuni nella progettazione e nello sviluppo di siti ed applicazioni Web.”
FAST ci aiuta a creare interfacce si adattano facilmente a qualunque Design System e che possono essere utilizzate con qualsiasi framework!
Progettare siti da fruire su dispositivi diversi è imprescindibile nel Web design attuale. Scopriamo le tecniche fondamentali per ottenere risultati ottimi su tutti gli schermi
Le nuove tecnologie digitali stanno notevolmente influenzando i Beni Culturali, vediamo sempre più utilizzare software e tecnologie che favoriscono o migliorano la gestione, la conservazione, la catalogazione e la fruizione del bene culturale.
2. jQuery Mobile e Approcci per App
jQuery Mobile è un framework per la creazione di applicazioni web
mobile. Prima di iniziare a studiare jQuery Mobile, si dovrebbe avere una
conoscenza di base di: HTML, CSS, jQuery. jQuery Mobile è un framework
web ottimizzato per un uso touch per la creazione di applicazioni web
mobile e funziona su tutti i sistemi più diffusi:
3. I diversi approcci disponibili
Gli approcci possibili allo sviluppo mobile sono per lo più tre: nativo,
web app e ibrido:
u Per nativo, intendiamo lo sviluppo di applicazioni del tutto integrate
con il sistema operativo, sfruttando SDK messi a disposizione dallo
stesso produttore e con le tecnologie da esso previste.
u Realizzare web app, invece, significa creare delle applicazioni web in
tutto e per tutto, ottimizzate per il mobile, e che siano pertanto
perfettamente sfruttabili tramite i browser dei dispositivi mobili.
u Quando si pensa di utilizzare HTML5 per il mobile non ci si riferisce
all’approccio nativo, bensì alla possibilità che un esperto di
programmazione web possa cimentarsi con successo nello sviluppo di
App.
5. I diversi approcci disponibili
Gli applicativi per Android e Blackberry sono scritti in Java, gli
applicativi iOS sono scritti in Objective C e quelli per Windows Phone
sono scritti in C # e .NET, etc. jQuery Mobile risolve questo problema, in
quanto utilizza solo HTML, CSS e JavaScript, che è standard per tutti i
browser web per cellulari!
6. I diversi approcci disponibili
jQuery Mobile è una tappa obbligata del nostro percorso: consiste in una
libreria che si integra alla perfezione in HTML5, per cui il designer può
permettersi di integrarla gradualmente nel proprio lavoro senza doversi
cimentare da subito con la programmazione. Nasce da jQuery ed è
probabilmente uno degli ambienti più diffusi nello sviluppo di app ibride.
Come jQuery, vanta una grande comunità che lo sostiene ed una
documentazione piuttosto ricca.
È inoltre facilmente estensibile mediante plugin. Il suo aspetto grafico
può risultare un pò standardizzato: ciò non toglie, però, che i temi
possano essere personalizzati a piacimento con gli strumenti ufficiali
messi a disposizione.
7. Alternative a jQuery mobile
Sencha Touch: progetto che si basa anche sulle novità apportate da
HTML5, creato dagli stessi sviluppatori del framework JavaScript ExtJS,
ma non ne costituisce però una sua estensione, può essere di semplice
impiego per chi già conosce questo tipo di librerie, la curva di
apprendimento può invece risultare più ripida per chi è abituato ad
utilizzare soluzioni differenti come jQuery; lì dove jQuery Mobile ha lo
scopo di integrare una comune pagina HTML con funzionalità specifiche,
Sencha Touch genera invece un proprio Document Object Model basato su
oggetti creati da JavaScript. Quest’ultimo offre inoltre un buon numero
di componenti per le interfacce utente mentre potrebbe risultare
sovradimensionato per la realizzazione di progetti meno complessi come
semplici pagine Web. http://www.sencha.com/products/touch/
8. Alternative a jQuery mobile
IUI: è un framework per lo sviluppo di applicazioni Web destinate al
mobile ed in particolare per l’iPhone e dispositivi compatibili, fornisce
librerie JavaScript, regole CSS e componenti grafiche pronte all’uso;
gestisce le problematiche relative ad orientamento e rotazione ed è
particolarmente adatto per coloro che non hanno conoscenze
approfondite su JavaScript; il progetto, ancora in fase beta, è rilasciato
sotto licenza BSD, soffre purtroppo di un’eccessiva lentezza nel rilascio
di aggiornamenti. http://code.google.com/p/iui/
9. Aggiunta di jQuery Mobile al progetto
Ci sono due modi per aggiungere jQuery Mobile per il tuo sito web. Puoi:
1. Collegamento a una libreria jQuery Mobile conservato a un CDN
(consigliato)
2. Collegamento a una libreria jQuery Mobile memorizzati sul proprio
computer
Link a jQuery Mobile da un CDN:
Un CDN (Content Delivery Network) viene utilizzato per distribuire file
utilizzati più spesso sul web.
Questo rende la velocità di download molto più veloce per l'utente.
Come per jQuery core, non c'è nulla da installare sul vostro computer.
10. Aggiunta di jQuery Mobile al progetto
I tag <script> possono essere
inclusi all’interno dei blocchi
<head> o <body>. Mentre prima
era usuale inserirli all’interno
della prima porzione del file HTML
(il tag <head>), oggi si tende ad
includere il Javascript alla fine del
blocco <body>, al fine di
velocizzare il caricamento del
layout e posticipare l’esecuzione
del codice dinamico.
<!-- Include jQuery Mobile
stylesheets -->
<link rel="stylesheet"
href="http://code.jquery.com/mobile
/1.4.5/jquery.mobile-
1.4.5.min.css">
<!-- Include the jQuery library -->
<script
src="http://code.jquery.com/jquery-
1.11.2.min.js"></script>
<!-- Include the jQuery Mobile
library -->
<script
src="http://code.jquery.com/mobile/
1.4.5/jquery.mobile-
1.4.5.min.js"></script>
11. Il data-role
HTML 5 introduce un attributo
globale chiamato data-*, al quale
asterisco si può sostituire qualsiasi
stringa. Tale introduzione
permette la creazione di attributi
specifici con notevole libertà da
parte dello sviluppatore. jQuery
Mobile usa l’attributo data-role:
http://view.jquerymobile.com/ma
ster/demos/pages
Viene qui dichiarato un
contenitore principale con data-
role definito come page.
<div data-role="page"
id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Questa é la home
page</p>
<p>Vai al <a
href="#catalogo">catalogo</a>
</p>
</div>
</div>
12. Anatomia di una pagina
L’altro div con data-role definito
come header e il suo contenuto,
verranno renderizzato in quanto
tali da jQuery e dall’engine del
mobile browser.
Infine il data-role definito come
content sarà il “contenitore
principale (main)”.
Infine il data-role definito come
footer sarà il “contenitore basso
(pie’ di pagina)”.
<div data-role="page">
<div data-
role="header">...</div>
<div role="main" class="ui-
content">...</div>
<div data-
role="footer">...</div>
</div>
13. Le liste
Estremamente interessante è il
supporto per le liste di jQuery
Mobile che consentirà
un’esperienza utente facilitata.
Cliccando sull’ancora come tag
<li> all’interno di un tag </ul> al
quale viene assegnare l’attributo
data-role=”listview”, l’utente
verrà portato ad avere accesso
diretto al contenuto. Le liste sono
a “misura di dito”.
<ul data-role="listview" data-
theme="d">
<li><a href="gesso1.html">Gesso
1</a></li>
<li><a href="gesso2.html">Gesso
2</a></li>
<li><a href="gesso3.html">Gesso
3</a></li>
<li><a href="gesso4.html">Gesso
4</a></li>
<li><a href="gesso5.html">Gesso
5</a></li>
</ul>
14. La struttura e lo stile: HTML e CSS
Il linguaggio HTML consente di specificare la struttura delle pagine e,
soprattutto con il contributo dei nuovi tag di HTML5, di valorizzare
semanticamente il ruolo dei singoli elementi. I fogli di stile, invece, sono
realizzati con il linguaggio CSS, e vengono usati principalmente per
modellare gli aspetti grafici degli elementi (font, colori, bordi, forme,
eccetera) e gestire il posizionamento all’interno della pagina. Con
l’avanzare di nuove problematiche (tra cui quelle legate al mobile), la
complessità dei fogli di stile è diventata un problema sempre più
significativo; per ovviare a ciò, sono nati alcuni framework fra cui jQuery
mobile che mettono a disposizione pratici tool per definire il thema
dell’app: https://themeroller.jquerymobile.com/
15. Dove scrivere il codice
u NetBeans nasce principalmente per Java, ma con il tempo si è esteso per
supportare ulteriori tecnologie di programmazione tra cui, appunto, HTML e
JavaScript. È un ambiente adatto sia a web designer che a programmatori,
offrendo varie funzionalità di debug per JavaScript, con esecuzione passo
passo ed ispezione dei valori.
u Anche uno strumento tradizionale del web design come Adobe Dreamweaver
CC può rendersi utilissimo. Oltre alle sue notevoli capacità di design è stato
arricchito, negli anni, con plugin e funzionalità legate alle sviluppo di app,
integrazione di jQuery e molto altro.
u Si potrebbero elencare altri editor e IDE, ma uno che risulta piuttosto comodo
e completo per creare App in jQuery Mobile è Intel XDK.
16. Dove scrivere il codice: Intel XDK
Intel XDK: si tratta di uno strumento gratuito e multipiattaforma, con
tutte le funzionalità che ci occorrono. Una volta installato ed avviato,
viene richiesto di effettuare il login tramite un account Intel,
eventualmente creandolo ad hoc. Ciò è necessario perché questo IDE non
svolge tutte le elaborazioni in locale ma, al fine offrire performance
migliori, demanda i compiti più onerosi (come il building del progetto) al
potente sistema cloud di Intel.
In pratica i nostri sorgenti verranno inviati in rete ai server di Intel, che
ci restituiranno il pacchetto di installazione dell’App, pronto da usare.
18. Dove scrivere il codice: Intel XDK
Come si vede, il flusso di lavoro che si dovrà seguire è scandito dalla
struttura a schede in alto: ogni scheda corrisponde ad una fase di
creazione dell’App. La prima di esse, intitolata Develop, mostra tutto ciò
che serve alla realizzazione del lavoro.A sinistra troviamo la struttura
del progetto – essenzialmente composta da file HTML, CSS e JavaScript –
ed al centro sarà collocato l’editor, che potrà essere testuale (come
quello visibile in figura) o visuale se si è scelto di utilizzare AppDesigner.
19. Dove scrivere il codice: Intel XDK
La scheda Emulate offre la possibilità di osservare rapidamente il
risultato parziale di quanto si sta realizzando:
Sulla sinistra si può scegliere la configurazione dell’emulatore
specificando il tipo di dispositivo e l’orientamento (portrait o
landscape). Al centro della pagina sarà mostrata l’anteprima della nostra
applicazione.
20. Dove scrivere il codice: Intel XDK
Un aspetto molto interessante è la possibilità di provare l’App su un
dispositivo mobile reale, tramite le funzionalità della scheda Debug. La
seguente figura mostra come viene richiesto il collegamento di un
dispositivo Android o iOS sul quale verrà direttamente testata l’App.
21. Dove scrivere il codice: Intel XDK
Per i test su dispositivo reale, Intel
XDK si appoggia ad un’app, Intel
App Preview, esistente per tutti i
principali sistemi operativi mobile
e da installare sul device:
anch’essa è parte integrante del
sistema Intel.
22. Dove scrivere il codice: Intel XDK
Dalla schermata di Build si potrà scegliere il sistema di destinazione. Lo
stesso progetto sorgente potrà essere reso “eseguibile” su piattaforme
mobile differenti.