Emanuele Bartolesi

Office 365, SharePoint e ASP.NET

Consigli per il debug Javascript

Visual Studio 2015 ha fatto passi da gigante per il debug JavaScript ma se dobbiamo eseguire il debug direttamente nel browser, bisogna scegliere gli strumenti giusti e sopratutto conoscere alcuni “trucchi” per velocizzarne la riuscita.

Debugger

Se vogliamo aggiungere un breakpoint direttamente da codice, basta andare nella nostra funzione JavaScript e aggiungere la parola debugger dove vogliamo mettere il punto di interruzione. Quando il codice viene eseguito e viene raggiunta questa istruzione, l’esecuzione viene interrotta e potete usare lo strumento di debug che più preferite per accedere alle informazioni in quel momento disponibili nel contesto, come variabili e DOM.
Un altro modo per inserire un breakpoint è quello di utilizzare la barra di sviluppo del browser che preferite e cliccare di fianco a sinistra del vostro codice.
Stessa cosa può essere fatta da Visual Studio.

if ( myVar == 'foo' ) {
    debugger;
}

Break on…

A volte è necessario intercettare una condizione particolare sulla modifica del DOM e non sempre con i breakpoint questa operazione è facile. In questo caso l'unico strumento che può aiutarci in questo sono i Developers Tools di Chrome.

Se apriamo infatti la barra di sviluppo di Chrome e clicchiamo su un elemento con il tasto destro, l'ultima opzione del menu contestuale è Break on.... Ci sono tre opzioni possibili che non hanno bisogno di spiegazioni. :)

Schermata 2015-08-10 alle 08.21.18

console.table

Questa istruzione non è conosciuta (e usata) da molti, ma può tornare molto utile. E’ praticamente uguale alla console.log, che vi permette quindi di visualizzare nella console di debug un messaggio, ma in questo caso viene renderizzata una tabella con i dati che avete passato. Prendete come esempio il codice qua sotto:

var jsonarray = '[ { name: 'Eva' , age: 5 }, { name: 'Sophia' , age: 4 } ]';

console.table(jsonarray);

In questo caso viene renderizzata una tabella con i dati contenuti dentro all’array json presente nella variabile jsonarray (con le informazioni dei miei due bellissimi cani! Smile).
Molto utile quando, ad eempio, vogliamo visualizzare i dati che sono ritornati da una funzione ajax.

Nel prossimo articolo, vedremo come visualizzare e ottimizzare i tempi di esecuzione del codice Javascript.

Aggiornamento di GitHub Desktop per Mac e Windows

Un aggiornamento degno di nota per il client ufficiale di GitHub per il desktop.
Oltre a dei miglioramenti (di cui parlerò sotto) questa nuova versione avrà la stessa interfaccia e le stesse funzionalità sia su Mac che su Windows.
Fino ad oggi le due applicazioni erano molto simili, ma all’atto pratico erano molto diverse.
Adesso la user experience è la stessa su entrambe le piattaforme.

Oltre a questo è stata disegnata un’interfaccia che permette di eseguire le operazioni “base” di GitHub molto semplicemente e con pochi click, direttamente da interfaccia.

E’ possibile scaricare la nuova versione direttamente dal sito https://desktop.github.com/ e potete leggere l’annuncio ufficiale da qua: https://github.com/blog/2046-github-desktop-is-now-available
Per chi ha già la versione precedente installata, la nuova versione vi verrà scaricata tramite l’aggiornamento di default dell’applicazione.

Una delle cose che mi piacciono di più in questa versione è la possibilità di vedere direttamente i branch cliccando sul progetto a sinistra (come si vede dall’immagine sotto).

Impostazioni ottimali per Windows 10 su Parallels

Da un po’ di tempo a questa parte, sono un possessore di un Macbook Pro.
Lavorando però, per la maggior parte del tempo, con tecnologie Microsoft ho bisogno anche di Windows. Sul Mac si possono fare due scelte: utilizzare Bootcamp o utilizzare un software di virtualizzazione, come ad esempio Parallels o VmWare Fusion.
Io ho deciso di utilizzare il primo.

Dopo un po’ di test sono arrivato ad una serie di impostazioni per far girare Windows a velocità ottimali.
Vi inserisco qua sotto gli screenshots con i commenti.

Schermata 2015-08-09 alle 10.23.39

Durante il wizard ho selezionato la configurazione “Sviluppo Software”

Schermata 2015-08-09 alle 10.26.35

In “Opzioni” –> “Ottimizazione” ho disabilitato “Ottimizzazione del disco virtuale in tempo reale” perchè consuma molto memoria, oltre che usare il disco di continuo.

Schermata 2015-08-09 alle 10.26.55

In “Opzioni” –> “Condivisione” ho disabilitato “Profilo condiviso”.

Schermata 2015-08-09 alle 10.27.01

In “Opzioni” –> “Applicazioni” ho tolto la condivisione delle applicazioni Windows con il Mac.

Schermata 2015-08-09 alle 10.27.30

In “Hardware” –> “CPU e Memoria” ho inserito 4 CPU e 8 GB di Ram. E’ possibile inoltre disabilitare i due checkbox sotto alla Ram se non si devono utilizzare macchine virtuali all’interno di Windows, tipo emulatori di Windows Phone o di Android.

Schermata 2015-08-09 alle 10.27.47

In “Hardware” –> “Video” ho selezionato una memoria video di 128 MB. Per fare attività di sviluppo bastano e avanzano, senza perdere la fluidità di Windows. Ho selezionato ovviamente DirectX10, ma ho tolto la risoluzione Retina. Alcune applicazioni su Windows non sono ancora state ottimizzate per risoluzioni molto alte e non si vedono bene, almeno di non aumentare il font di sistema almeno al 125%, perdendo in alcuni casi, sezioni di finestre.

Nasce SharePointItalia.com

Sono lieto di annunciare un nuovo sito di informazione e collaborazione: www.sharepointitalia.com.

L’idea nasce da Peppe (www.peppedotnet.it) e sono molto contento che mi abbia coinvolto in questo progetto.
C’è un articolo sia sul blog di sharepointitalia, sia sul blog di Peppe che spiega esattamente cosa è, cosa sarà e cosa faremo, ma vorrei spendere due parole anche io.

Sarà un sito in cui cercheremo di dare prima possibile le news relative a SharePoint, Office e Office 365, sia per chi si vuole avvicinare a questo mondo, sia per chi ne fa già parte e vuole approfondire alcuni aspetti.
Oltre a questo faremo tante eventi, sia live che online. Partiremo subito con una twitter chat sullo sviluppo in SharePoint 2013, poi faremo un webcast su come migrare soluzioni SharePoint a Office 365 e infine, con l’uscita della beta di SharePoint 2016, ci incontremo dal vivo per un meetup sulle novità del nuovo prodotto.
Direi che come inizio non c’è male. Sorriso

Noi siamo carichi per questa nuova avventura e speriamo di vedervi numerosi, sia sul sito, sia ai vari eventi.
Nel frattempo se volete segnalarci qualcosa, potete farlo scrivendo a contatta@sharepointitalia.com e ci farebbe piacere sapere cosa vorreste trovare su SharePoint Italia, rispondendo semplicemente a un sondaggio che trovate qua: http://blogs.sharepointitalia.com/post/2015/07/29/benvenuti-su-sharepointitalia-com

Lancio di Visual Studio 2015

Mi raccomando, oggi non perdetevi il lancio di Visual Studio 2015!
Oggi dalle 17:30 in poi, da questo link, sarà possibile seguire l’evento in diretta del lancio. Sempre allo stesso link è disponibile anche l’agenda delle sessioni presentate. Si parlerà di ASP.NET, Azure, Cross Platform e tanto altro.
Per avere Visual Studio sotto mano durante il live, potete andare su questa pagina e scaricare la nuova versione! Io sto facendo F5 da 2 ore, ma mi sa che è presto! Smile
Inoltre se non riuscite ad aspettare o volete intanto farvi una panoramica generale sul nuovo IDE, potete andare a questo link in cui troverete alcuni video sulle nuove funzionalità presenti.
Hashtag ufficiale dell’evento: #VS2015

Buon download e buona visione!

CKJkhlpUMAAuFjU.png-large

Open .NET (the new era): the day after

Alcuni giorni fa ho partecipato all’evento di DotNetUmbria come speaker.
Mi sono divertito tantissimo a fare questa sessione in cui ho parlato, prima di alcune novità di ASP.NET 5 e MVC6, dopo mi sono concentrato sui nuovi tool messi a disposizione da Visual Studio 2015 per gestire le librerie per la parte frontend: bower, gulp, e NPM.
Molte persone non conoscevano questi strumenti e mi ha fatto molto piacere ricevere alcune domande “pratiche” perchè vuol dire che la sessione ha suscitato interesse.
Come ho detto durante la sessione, nei prossimi giorni farò alcuni post sul blog per approfondire un pò questo argomento.
Intanto vi lascio a disposizione le slides che ho utilizzato.

Stay tuned

 
IMG_0111

Microsoft MVP per la seconda volta!

Oggi, per la seconda volta, sono stato nominato/confermato MVP per la categoria ASP.NET!
A distanza di un anno l’emozione è praticamente la stessa.
E’ stato un altro anno pieno di eventi, sacrifici, persone conosciute e soprattutto un altro anno passato con altri MVP.
In questo gruppo, di cui ho l’onore di far parte, ho trovato un sacco di bellissime persone oltre che a grandi professionisti.
E’ un po’ una grande famiglia con tanti fratelli che hanno tutti la stessa malattia: un amore smisurato per la tecnologia a 360°.

Adesso ho un estate per ricaricare le batterie e affrontare un altro autunno/inverno ricco di eventi, formazione e soprattutto cene! Open-mouthed smile

WP_20150330_001

Corsi su Microsoft Virtual Academy

Ieri sono stati pubblicati su MVA i corsi che ho realizzato insieme a Fabio Franzini sulle API di Office 365.
Per chi non lo sapesse MVA è un portale realizzato direttamente da Microsoft con centinaia di corsi gratuiti, dall’IT allo sviluppo.
Devo ammettere che fa un po’ strano rivedersi in un video Smile ma sicuramente è stata un’esperienza interessante e molto diversa da una sessione “live” a cui più o meno sono abituato.
Un ringraziamento particolare a Roberto Andreoli che ci ha dato questa possibilità e che ce ne darà altre simili. Smile

Spero che i due corsi siano di vostro gradimento.

Schermata-2015-06-23-alle-07.59.1354

Schermata-2015-06-23-alle-08.04.0054

DotNetCampus 2015–the day after

Come avevo scritto in un precedente post, sabato 30 maggio ho preso parte al DotNetCampus 2015.
La sessione su PHP for ASP.NET Developers mi ha reso molto felice perchè molte delle persone presenti in sala erano interessate all’argomento e dopo la presentazione mi hanno fatto molte domande, anche fuori dalla sala.
Un’altra sorpresa gradita è stata quella di fare una sessione all’ultimo per un imprevisto capitato ad un altro speaker.
Ho parlato di un argomento che mi piace molto: Glimpse.
Per questa sessione ho avuto il piacere di condivedere il palco con Grazia Cimino, al suo debutto come speaker a un evento live.
Sul sito di DotNetCampus potete trovare le slide e il codice di esempio delle due sessioni, ma ve le allego anche a questo post.

Evento: Open .NET (the new era)

Il 26 Giugno i ragazzi di DotNetUmbria organizzano un evento a Perugia presso l’Hub Corciano.
Il tema della giornata saranno le ultime novità annunciate a Build (ed Ignite).
Di seguito vi riporto l’agenda.

Agenda
14.00-14.30 - Registrazione
14.30-15.10 - Keynote - Andrea Cruciani, Fabrizio Bernabei
15.10-16.00 - Le novità di VS2015 per lo sviluppatore ASP.NET - Emanuele Bartolesi
16.00-16.20 - Coffee break
16.20-17.10 - Docker: cos'è e come si usa il re dei container (Linux e oltre). - Marco Poponi
17.10-18.00 - C# 6.0 New Features - Gaetano Franco

Durante la mia sessione parleremo di cosa è cambiato per lo sviluppatore ASP.NET con VS 2015 e ASP.NET 5. Dall’introduzione dei nuovi strumenti all’interno di Visual Studio alle novità di ASP.NET 5.
Inoltre vedremo come poter lavorare con la nuova piattaforma di sviluppo web di Microsoft su Linux e Visual Studio Code.

Per maggiori informazioni sull’evento, potete andare direttamente sul sito di DotNetUmbria sulla pagina dell’evento: http://www.dotnetumbria.org/open-net/

SharePoint Saturday a Firenze il 20 Giugno

Ieri è uscita l’agenda dello SharePoint Saturday che si terrà il 20 giungo a Firenze.
Per chi non conoscesse questo format, si tratta di eventi gratuiti su SharePoint che si svolgono appunto il sabato. Gratuito ma di alto livello!
Anche questa volta ci sono fra i nomi più famosi in questo settore, alcuni dei quali prenderanno e prendono parte anche ad altri SharePoint Saturday sparsi per l’Europa.
L’agenda sarà divisa su 4 track: ITPro, Developer, Business e End-User.
Per registrarvi potete andare direttamente a questo link.

Un evento da non perdere!

Home-Page-SPSFlorence-960x393

I plugin jQuery che non possono mancare nelle vostre applicazioni ASP.NET - Parte 2 -

Un po' di tempo fa avevo riportato una lista di alcuni plugin jQuery che potete (e dovete) usare nelle vostre applicazione ASP.NET.

Visto che è passato un po' di tempo da quel post, vi propongo dei nuovi plugin degni di nota.

  • jQuery Steps: permette di realizzare interfacce basate su wizard. Molte impostazioni di personalizzazione già previste per i casi più diffusi.
  • jQuery Lazy: permette di caricare le immagini delle pagine web solo quando viene visualizzata (o per visualizzare) la porzione di pagina in cui sono presenti delle immagini. Questo ovviamente porta un aumento di performance del caricamento delle pagine.
  • Toastr: libreria per creare in poco tempo dei popup di notifica in diversi formati e posizioni. Semplice da personalizzare e facile da implementare.
  • ScrollMagic: permette di creare pagine con effetti grafici attivabili durante lo scrolling verticale della pagina.
  • FullPage.js: plugin per siti one page che permette di creare in poco tempo effetti grafici molto belli su questa tipologia di siti. Permette anche di inserire scrolling orizzontali.
  • OwlCarousel: plugin che permette di realizzare carousel e slider di immagini completamente responsive e touch. La versione 2 è ancora in beta ma funziona benissimo.
  • Carousel Bootstrap: non un vero e proprio plugin jQuery (anche se lo usa) ma è già compreso in Bootstrap (quindi nei progetti ASP.NET) e permette di creare dei semplici carousel responsive. Potete trovare un esempio qua: http://getbootstrap.com/examples/carousel/
  • Menu-Aim: plugin per la realizzazione di menu molto simili a quello delle categorie di Amazon. Al passaggio del mouse su una voce, viene aperto un altro pannello dove può essere inserito un altro sotto menu e altri controlli HTML. Una demo qua: https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
  • typeahead.js: libreria scritta direttamente dal team di Twitter (e anche usata) per creare caselle di testo con autocompletamento in cui è possibile anche andare a ridefinire il layout dei risultati.
  • gridster.js: interessante libreria per creare layout fluidi ma con la possibilità di utilizzare il drag&drop per ridefinire il posizionamento dei pannelli. Unito a jQuery e a un backend con delle API Rest è una buona base per creare un semplice (o anche no) CMS.
  • Chartist.js: questo plugin serve per creare grafici molto accattivanti. A differenza degli altri plugin che fanno la stessa cosa (il mio preferito è/era Flot) questo permette di avere layout responsive e sono già presenti progetti paralleli per usarlo con AngularJS, React ed Ember.
  • jQuerySimpleEventCalendar: il nome simple può trarre in inganno perché con questa libreria è possibile creare dei calendari interattivi molto simili a quelli a cui siamo abituati in applicazioni desktop.

Schermata 2015-05-20 alle 08.25.17

PHP for ASP.NET Developers a .NET Campus 2015

Anche quest'anno, per la seconda volta consecutiva, sarò speaker al .NET Campus di Roma.

L'evento si svolgerà il 30 maggio presso l'Università degli Studi di Roma Tre a partire dalle 9 di mattina.

Questa volta parlerò di argomento che può sembrare strano per uno sviluppatore ASP.NET come me e sopratutto a un evento .NET. :)

Cercherò di spiegare le analogie che ci possono essere fra Php e ASP.NET per chi non conosce (o conosce poco) il primo linguaggio.

In particolare andremo a vedere che sfruttando un framework Php, che si chiama CakePHP, la curva e il tempo di apprendimento sarà molto più veloce.

Dopo una breve introduzione su come configurare una macchina per far "girare" Php e alcuni servizi per lo svilluppo, andremo a realizzare una demo di un'applicazione completa.

Ci vediamo a Roma!!!


Aumentare le dimensioni delle Glyphicons in Bootstrap

Nelle ultime versioni di Boostrap sono state incluse in modo gratuito (la cosa ottimale sarebbe inserire un link a fondo pagina per i credits) le Glyphicons.
Fondamentalmente sono circa 250 “icone” che possiamo usare nelle nostre applicazioni. Il loro punto di forza è che non sono immagini vere e proprie, ma un font vettoriale, quindi adatto a qualsiasi risoluzione e grandezza.
Di default la grandezza del font è di 24px.
In alcuni casi però è necessario dover aumentare la loro grandezza. Per farlo ci sono diversi metodi.

Il primo (quello che personalmente mi piace meno) è quello di andare a modificare la classe CSS di default e quindi andare a inserire un valore più grande per il font-size.
In pratica basta aggiungere in un vostro CSS (non modificare quello di default di Boostrap) il seguente codice:

.bs-glyphicons .glyphicon{
    font-size: 90px;
}
Ovviamente al posto di 90px, potete inserire il valore che preferite.

L’effetto “collaterale” di questa modifica è che a questo punto tutte le icone del vostro sito saranno più grandi.

Il metodo che invece preferisco e che personalmente adotto è quello invece di andare a creare N classi CSS che aumentano la dimensione del font, ma senza cambiare il comportamento di default.
Ad esempio possiamo creare le seguenti classi:

.glyphicon-2x{font-size: 2em;}
.glyphicon-3x{font-size: 3em;}
.glyphicon-4x{font-size: 4em;}
.glyphicon-5x{font-size: 5em;}
.glyphicon-6x{font-size: 6em;}

A questo punto basta aggiungere alle vostre glyphicons che volete più grandi una di queste classi e il gioco è fatto.
Ad esempio potete scrivere:

<span class="glyphicon glyphicon-home glyphicon-3x"></span>

Per l’elenco completo delle glyphicons potete andare al seguente link: http://getbootstrap.com/components/#glyphicons oppure sul sito ufficiale http://glyphicons.com/

Azure Community Bootcamp 2015 a Pisa

Il 23 aprile presso il dipartimento di Matematica a Pisa si svolgerà l'Azure Community Bootcamp.

Un evento particolare e primo nel suo genere perché verrà fatto congiuntamente in tutta Italia dalle diverse community sparse nel territorio.

Una mezza giornata insieme per parlare di web e cloud.

Potete trovare il programma completo all'indirizzo: http://www.communitydays.it/events/azure-2015/#l-Pisa

Se volete condividere l'evento sui social, usate l'hashtag: #azureit15


Ci vediamo a Pisa!

Script PowerShell per scaricare tutti i video della DotNetConf2015

Come di consueto ho preparato uno script PowerShell per scaricare tutti i video (in HD) della DotNetConf2015.
Potete trovarlo direttamente su Gist a questo link: https://gist.github.com/kasuken/b2b545c4e904ff53aeb5

mkdir "~\Desktop\DotNetConf15"
cd "~\Desktop\DotNetConf15"
[Environment]::CurrentDirectory=(Get-Location -PSProvider FileSystem).ProviderPath
$a = ([xml](new-object net.webclient).downloadstring("http://s.ch9.ms/Events/dotnetConf/2015/RSS/mp4high"))
$a.rss.channel.item | foreach{  
  	$url = New-Object System.Uri($_.enclosure.url)
	
	$file = "- " + $_.creator + " - " + $_.title.Replace(":", "-").Replace("?", "").Replace("/", "-").Replace("<", "").Replace("|", "").Replace('"',"").Replace("*","")
	$file = $file.substring(0, [System.Math]::Min(120, $file.Length))
	$file = $file.trim()
	
	$OutFile = New-Item -type file "$file.txt" -Force  
	$Content = ""
	$Content = $_.title.trim() + "`r`n" + $_.summary.trim()
	add-content $OutFile $Content
	
	"Downloading: " + $file + ".mp4"
	if (!(test-path $file))
	{
	  $wc = (New-Object System.Net.WebClient)  
	  $wc.DownloadFile($url, $file + ".mp4")
	}
}

Utilizzare ASP.NET 5 su Linux

Per fare questo “esperimento” ho deciso di utilizzare la distribuzione Kubuntu 14 perchè mi è stato detto (e ho letto) che è una delle distribuzioni più semplici e intuitive da utilizzare.

L’installazione effettivamente è molto semplice (io l’ho fatta sul mio Dell XPS 13).

Passiamo subito ai passi necessari per far “girare” ASP.NET 5 (o vNext) su Linux.

Mono

Per prima cosa bisogna installare Mono.
Per farlo ho seguito la guida che c’è sul sito ufficiale e ho lanciato i seguenti comandi da una finestra “terminal”.

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF

Dopo questo comando è necessario eseguire questo:

echo "deb http://download.mono-project.com/repo/debian wheezy main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list

A questo punto, sempre nella stessa finestra del terminale eseguire un aggiornamento dei pacchetti:

sudo apt-get update

Infine lanciare l’ultimo comando:

sudo apt-get install mono-complete

Gyp e Libuv

Un passo poco documentato ma che risolve errori in fase di compilazione, è l’installazione di queste due librerie fondamentali.
Prima di tutto bisogna installare Gyp:

sudo apt-get gyp

Fatto questo dobbiamo lanciare una alla volta le seguenti comandi:

wget http://dist.libuv.org/dist/v1.0.0-rc2/libuv-v1.0.0-rc2.tar.gz
tar -xvf libuv-v1.0.0-rc2.tar.gz
cd libuv-v1.0.0-rc2/
./gyp_uv.py -f make -Duv_library=shared_library
make -C out
sudo cp out/Debug/lib.target/libuv.so /usr/lib/libuv.so.1.0.0-rc2
sudo ln -s libuv.so.1.0.0-rc2 /usr/lib/libuv.so.1

A questo punto eseguendo il comando “mono –version” dovrebbe apparirvi una schermata tipo questa:

snapshot3 

E’ importante che la versione di mono sia superiore o uguale alle 3.10.
In caso contrario prima di reinstallare mono è necessario lanciare il seguente comando:

sudo apt-get remove mono-complete

KVM

Prima di iniziare  a lavorare in modo vero e proprio con ASP.NET su Linux, bisogna installare il gestore del runtime di ASP.NET 5.

curl -sSL https://raw.githubusercontent.com/aspnet/Home/master/kvminstall.sh | sh && source ~/.kre/kvm/kvm.sh

Dopo lanciare l’aggiornamento di KVM:

kvm upgrade

Yeoman

L’ultimo pacchetto che manca da installare è effettivamente una cosa legata ad ASP.NET 5. Yeoman è un tool per generare un “template” di un’applicazione ASP.NET 5 attraverso un wizard molto semplice.
Per installarlo è sufficiente eseguire il comando:

npm install -g generator -aspnet

Adesso siamo pronti a creare la nostra prima applicazione ASP.NET 5.
Per farlo basta eseguire il comando:

yo aspnet

Partirà un wizard che vi chiederà il nome del progetto ASP.NET che volete creare e il tipo di applicazione.
Selezionate “ASP.NET MVC” e vedrete che vi genererà un pò di file che vi saranno abbastanza familiari.
Adesso con il comando “cd” (come nel dos) spostatevi nella cartella che avete appena creato e lanciate il comando:

kpm restore

vedrete nella shell che scorreranno tutti i pacchetti presi da nuget necessari per la vostra applicazione.
Subito dopo lanciate il comando :

kpm build

e dovreste vedere che l’applicazione è stata compilata con successo.
A questo punto non ci rimane che lanciare l’applicazione web con il comando:

k kestrel

e aprire il browser che avete installato (io uso Chromium) e navigare all’indirizzo http://localhost:5004.
Dovrebbe apparirvi una schermata come quella sotto :)

snapshot2

Nel prossimo articolo vedremo come modificare l’applicazione appena creata da un editor, sfruttando l’intellisense di C#.

Corso introduttivo per lo sviluppo di App per Office 365

Da ieri su Microsoft Virtual Academy è presente un corso introduttivo sullo sviluppo di App per Office 365.
E’ molto utile per chi si avvicina per la prima volta al (vasto) mondo di Office 365 e vuole scoprire come interagire dalle proprie applicazioni con i servizi offerti da questo servizio cloud di Microsoft.
Servizio che include Exchange, Lync, SharePoint e tante altre cose.

Lo potete trovare al link: http://www.microsoftvirtualacademy.com/training-courses/introduzione-allo-sviluppo-di-app-office365

Nelle prossime settimane comunque ci saranno delle sorprese con nuovi contenuti e sopratutto TANTO CODICE!!!

Stay tuned!

Office365

Script PowerShell per scaricare tutte le puntate di Azure Friday

Qualche tempo fa avevo postato uno script PowerShell per scaricare tutti i video di Build 2014.
In questi giorni ho creato uno script per scaricare tutte le puntate di Azure Friday di Channel 9.
Ovviamente lo script va in aggiornamento, quindi se avete già scaricato una puntata, salta e prova con la successiva.
Ho anche inserito un contatore per le puntate in modo da poterle ordinare e ritrovarle più facilmente.

Qua vi inserisco lo script, ma lo potete anche trovare su GitHub a questo link: https://github.com/kasuken/downloadazurefridayvideos

[Environment]::CurrentDirectory=(Get-Location -PSProvider FileSystem).ProviderPath 
$rss = (new-object net.webclient)

#Preferably enter something not too long to not have filename problems! cut and paste them afterwards
$downloadpath = "C:\AzureFriday"

if (-not (Test-Path $downloadpath)) { 
    Write-Host "Folder $downloadpath doesn't exist. Creating it..."  
    New-Item $downloadpath -type directory 
}

set-location $downloadpath

$rssUrl = "http://channel9.msdn.com/Shows/Azure-Friday/feed/mp4high"
$channel = ([xml]$rss.downloadstring($rssUrl))

$counter = $channel.rss.channel.totalResults

for($i=1; $i -le $channel.rss.channel.pageCount; $i++) {

    $video = ([xml]$rss.downloadstring($rssUrl + "?page=$i")) 

    #download videos
    $video.rss.channel.item | foreach{
   
            # Grab the URL for the MP4 file
            $url = New-Object System.Uri($_.enclosure.url)  
            
            # Create the local file name for the MP4 download
            $file = ""
            $file = [string]$counter + " - " + $_.creator + " - " + $_.title.Replace(":", "-").Replace("?", "").Replace("/", "-").Replace("<", "").Replace("|", "").Replace('"',"").Replace("*","")
            $file = $file.substring(0, [System.Math]::Min(120, $file.Length))
            $file = $file.trim()
            $file = $file + ".mp4"  
                        
            # Make sure the MP4 file doesn't already exist
            if (!(test-path "$file"))     
            {     
                # Echo out the  file that's being downloaded
                $file
                $wc = (New-Object System.Net.WebClient)  

                # Download the MP4 file
                $wc.DownloadFile($url, "$downloadpath\$file")
            }
            else
            {
                Write-Host "You have already the $file video. The download is skipped."
            }

            $counter = $counter - 1
        }
}

Estensioni Chrome per sviluppatori web


Google Chrome dispone di molte estensioni che vanno ad arricchire di funzionalità il browser di Mountan View.
Ce ne sono di diverse categorie più o meno interessanti, ma in questo articolo farò una selezione delle migliori estensioni per gli sviluppatori web e web designer.

Web Developer

E’ il porting della toolbar di Firefox che aggiunge diverse funzionalità di debugging. Ad esempio è possibile disabilitare i cookies, il javascript e fare alcune operazioni massime sui forms.

Clear Cache

Tool molto utile per rimuovere velocemente la cache del browser. E’ possibile selezionare ogni elemento temporaneo che si vuole eliminare.

JSONView

Molto utile quando si lavora con delle REST API. Formatta direttamente nel browser un file JSON con la possibilità di navigarlo con un controllo di tipo treeview.

Dimensions

Una delle mie estensioni preferite. Con questo pulsante che si va ad aggiungere nella toolbar è possibile conoscere immediatamente la dimensione di un elemento HTML passandoci sopra con il mouse.

Web Developer Checklist

Aggiunge un pulsante sulla toolbar che se cliccato fa vedere una checklist con alcune attiivtà che il web developer non si deve dimenticare di fare (ottimizzazione SEO, Favicon, ecc.)

Postman – REST Client

Questa è un’app di Chrome vera e propria che viene eseguita in una finestra esterna al browser. Con questa app è possibile, come dice il nome, eseguire chiamate REST a dei web services locali o remoti. Molto semplice e intuitiva da usare.

Resolution Test

Un’estensione per testare il vostro sito o la vostra applicazione web a diverse risoluzioni con un semplice click. Si possono seleziona anche più risoluzioni insieme.

Page Speed Insights

Estensione realizzata direttamente da Google. Vengono fornite delle statistiche sulle perfomance del sito, ma sopratutto i suggerimenti per migliorare le prestazioni (nel caso ce ne sia bisogno). Molto utile per capire alcuni scripts javascript che possono rallentare il caricamento delle pagine.

Edit This Cookie

Ovviamente un’icona di un biscotto nella vostra toolbar che apre un popup con tutte le chiavi dei cookie che ha scritto il sito che state visitando. Un editor intuitivo ma completo vi permette di cambiarne i valori. E’ molto comodo per fare dei test nelle proprie applicazioni.

Stack Alert

Aggiunge un’icona nella toolbar che visualizza il numero di messaggi da leggere del vostro account di Stackoverflow.

XML Tree

Molto simile a JSON View, rende più user-friendly la visualizzazione di dati XML nel browser.

Bootstrap Twitter Offline Docs

Come dice il nome dell’estensione stessa è la documentazione di Bootstrap disponibile offline in qualsiasi momento.

Video del webcast: Analizzare le performance di un'applicazione ASP.NET con Glimpse

Pochi giorni si fa ho tenuto un webcast su Glimpse con la community di cui faccio parte: DotNetToscana.

Come sempre è disponibile il video della registrazione: https://www.youtube.com/watch?v=2rxjIvOez-4

Su Slideshare sono disponibili anche le slides: http://www.slideshare.net/emanuelebartolesi/analizzare-le-performance-di-unapplicazione-aspnet-con-glimpse

Disabilitare i pulsanti di submit in ASP.NET MVC

Durante l’invio di un form in un’applicazione ASP.NET MVC a volte è necessario disabilitare i pulsanti inclusi nel form stesso perchè i tempi di attesa possono essere lunghi per problemi di connettività o operazioni di salvataggio complesse.
Un metodo semplice per realizzare questo behavior su tutti i form dell’applicazione, è aggiungere questo piccolo script jQuery nelle vostre pagine (o nel file _layouts.cshtml). 

$('form').first().one('submit', function () {
    if ($('form').first().valid()) {
        $(this).find('input[type="submit"]').attr('disabled', 'disabled');
    }
});

Nelle ultime versione di jQuery è stata aggiunta la parola chiave one() che è praticamente uguale a on(), con l'unica differenza che l'evento specificato viene invocato solo una volta e poi non viene più richiamato.

Script per applicare un JS Link a tutte le document library di tutti i siti di una site collection

Come ha scritto nell’ultimo post del suo blog Giuseppe Marchi, JS Link è molto potente ma per applicarlo a tutte le document library può essere frustrante perchè bisogna farlo a mano.
Proprio in questi giorni ho dovuto realizzare una procedura per automatizzare questa operazione.
Lo script che vi allego qua sotto e che ho postato su Gist, fa proprio questo: applica un JS Link a tutte le document library di tutti i siti di una site collection.

#Load powershell snapin
Add-PSSnapin "Microsoft.SharePoint.PowerShell"
#Get site collection details
$site = Get-SPSite http://mysite
#Get all web sites in the site collections
$websites = $s.AllWebs
foreach($website in $websites)
{
    Write-Host $website.Title -foreground Yellow

    #loopthrouh the lists and libraries in the site
    foreach($l in $website.Lists)
      {
        #Check for only document libraries
        if($l.BaseTemplate -eq "DocumentLibrary" -and $l.Title -ne "Site Assets")
        {
            Write-Host "Processing " + $l.RootFolder.Name + " ..." -foreground Green
            $webPartPage = $l.RootFolder.Name + "/Forms/AllItems.aspx"
            Write-Host $webPartPage + " OK" -foreground Gray
            $file = $website.GetFile($webPartPage)
            #$file.CheckOut()
 
            $webPartManager = $website.GetLimitedWebPartManager($webPartPage, [System.Web.UI.WebControls.WebParts.PersonalizationScope]::Shared)
 
            $webpart = $webPartManager.WebParts[0]
 
            $webpart.JSLink = "~SiteCollection/_catalogs/masterpage/linkfile.js"
 
            $webPartManager.SaveChanges($webpart)
 
            #$file.CheckIn("Awesomeness has been delivered")
        }
    }
}

Potete trovare lo script anche a questo link: https://gist.github.com/kasuken/0898d25e6185df80f359

Buon JS Link! :)

Dimensioni corrette delle immagini con WURFL

Nell’articolo precedente abbiamo visto come sfruttare WURFL per riconoscere il device da cui stiamo navigando un sito o un’applicazione web.

In questo articolo invece andremo a vedere come con questa libreria, possiamo andare a visualizzare le immagini nel formato corretto a partire da un’immagine più grande e di diversa risoluzione.
Per fare un esempio pratico spesso accade di avere delle immagini di grandi dimensioni che però debbano essere inserite in siti o applicazioni che devono “girare” anche a risoluzioni di schermi più basse.
In questo caso per ottimizzare la visualizzazione delle immagini ed evitare di scaricare immagini troppo grandi per quello che ci servono, possiamo utilizzare la funzionalità denominata Image Tailor di WURFL.

Per usarla è molto semplice perchè al posto dei link all’interno dei tag img, è sufficiente sostituirli con un link del tipo http://wit.wurfl.io/[link immagine].

A questo punto la libreria si scarica l’immagine sul server di WURFL, la ridimensiona in base alle impostazioni che gli diamo e la rimanda indietro.
Se qualcosa dovesse andare storto durante l’elaborazione, viene semplicemente eseguito un redirect al link fornito.

Per controllare i vantaggi di questa funzionalità e il risparmio di banda e tempi di caricamento della pagina, è possibile utilizzare una qualsiasi barra developer de browser che preferite.

Alcuni esempi:

http://wit.wurfl.io/http://p1.pichost.me/i/41/1646503.jpg

In questo caso WURFL si accorge dal device dove stiamo navigando e ridimensiona in automatico l’immagine (uno sfondo da 1.2 Mbyte)

http://wit.wurfl.io/pc_30/http://p1.pichost.me/i/41/1646503.jpg

In questo caso viene eseguito un resize del 30% rispetto alla grandezza dello schermo

http://wit.wurfl.io/w_300/http://p1.pichost.me/i/41/1646503.jpg

In questo caso viene impostata una larghezza di 300px e l’altezza viene ricalcolata per mantenere le proporzioni.

Ovviamente queste impostazioni possono anche essere usate più di una alla volta. Potete comunque trovare tutti gli esempi sul sito ufficiale di WURFL.

Aumentare la dimensioni degli allegati in una Provider Hosted App per SharePoint 2013

Spesso, quando realizziamo una provider hosted app, c’è la necessità di eseguire upload di file in una document library del sito host.
Per fare questo di solito viene usato il client object model, con le seguenti istruzioni:

var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext.Current);

using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
    var documentsList = clientContext.Web.Lists.GetByTitle("List Name");

    var fileCreationInformation = new FileCreationInformation();

    fileCreationInformation.Content = documentStream;

    fileCreationInformation.Url = "My document.docx";
    Microsoft.SharePoint.Client.File uploadFile = documentsList.RootFolder.Files.Add(fileCreationInformation);

    clientContext.ExecuteQuery();
}

Il codice è molto semplice, ma purtroppo di default l’upload è limitato a 2 Mb.
E’ possibile cambiare questo valore lanciando sul server dove risiedono i servizi di SharePoint 2013 le seguenti istruzioni PowerShell.
Ovviamente è possibile variare la grandezza massima, inserendo il valore che ritenete più opportuno, espresso in byte.

$ws = [Microsoft.SharePoint.Administration.SPWebService]::ContentService
$ws.ClientRequestServiceSettings.MaxReceivedMessageSize = 15242880
$ws.ClientRequestServiceSettings.MaxParseMessageSize  = 15242880
$ws.Update()

L’ultimo accorgimento è quello di aumentare anche il valore della grandezza massima della richiesta Http di ASP.NET in modo da essere in linea con quella impostata per SharePoint 2013.
Per fare questo, basta aggiungere le seguenti righe nel web.config della vostra applicazione.

<configuration>
    <system.web>
        <httpRuntime maxRequestLength="15242880" />
    </system.web>
</configuration>