Thursday, June 30, 2011

+1 (plus one) Il nuovo bottone di Google sul tuo Sito

Dopo aver un po' cambiato tutti noi, Google sta cambiando se stesso..
Di recente, ha cambiato aspetto, il tema delle sue pagine e anche il metodo di ricerca...
Pure un nuovo Social Network (Google+), giusto per fare un po' di movimento.

Ma prima ancora, ha lanciato un nuovo bottone: il +1!
E non è assurdo pensare che il "plus one" sia venuto a predisporre Google+... anzi.

Il +1 è già integrato in molti siti e i risultati della ricerca di Google permettono di dare un senso e condividere quello che abbiamo cercato. E trovato.

Ma, come Facebook insegna, quel bottoncino, volete mica lasciarlo solo sui siti Google?

Ovviamente, potete andare a vedere come si fa, direttamente da Google.
Ma mi piace scrivere due righe su come sia altrettanto semplice del "Like" di Facebook.
Anzi, forse è più facile ancora: richiede solo due righe di codice.
Una nell'head o nel body e l'altra nel posto in cui si desidera inserire il +1.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>


Ovviamente, esistono alcune configurazioni per la personalizzazione del bottone.
La dimensione, ad esempio: è possibile scegliere tra piccolo (altezza: 15px), medio (20px), alto (60px) o altro ancora.

<g:plusone size="small"></g:plusone>

Possiamo definire un URL diverso per cui far cliccare +1.
Semplicemente con un attributo del tag e l'url preferito:

<g:plusone href="http://codewithdesign.com"></g:plusone>

Mi piace!
+1!

Per chi non lo sapesse, il +1 ricliccato diviene "-1".. non è proprio intuitivo...
La mia gatta continuava a cliccare +1, pensando di essere arrivata ormai a 25.. ma era ferma a.. a quanto? Indovinatelo!

Google+ è arrivato e... ci sto già dentro!

Dopo un primo tentativo con Google Wave, miseramente fallito, direi, ora Google ci riprova!
Ecco presentato in test, a inviti il nuovo Social Network targato Big G


Il privilegio di entrarci era fino a poco fa ad esclusiva di pochi eletti, ma ora è libero, o almeno.. un mio car(l)o amico mi ha segnalato il tutto e ora...

Già. E ora?
E ora si va alla scoperta di un'altra storia.
Riusciremo a stare dietro a tutti i nostri social-posti?

La cosa più interessante, che mi hanno fatto notare, è questa, probabilmente il futuro possibile del web, a prescindere dalle decine di social network in cui saremo iscritti:

<!DOCTYPE html>



Monday, June 27, 2011

Sharepoint 2010 - Aggiungere bottone al Ribbon : aprire nuovo Documento da Template

Ecco una cosa interessante.
Aggiungere nuovi bottoni al Ribbon di una lista, in Sharepoint 2010, è abbastanza semplice. Ho già scritto come farlo con ancora più facilità, tramite lo Sharepoint Designer 2010 (clicca qui).

Ora, vediamo come aggiungere una azione personalizzata al bottone in modo che replichi le funzionalità di bottoni già esistenti.
Lo scenario è questo.



Siamo in una Document Library. Cliccando sulla lista, viene visualizzato il Ribbon della lista.
Nella sezione Documents, a sinistra, abbiamo il bottone New. Se abbiamo più Content Type (e template) per i Documenti, vedremo una tendina con la scelta del nuovo Documento da creare.
Se configurato per l'esecuzione sul Client dell'utente, al click su, ad es, New Template1, viene avviato MS Word con il template in oggetto.

Ma se volessimo creare un nuovo bottone sul Ribbon che faccia da solo questo?
In altre parole: non voglio cliccare su New, per poi selezionare dalla tendina quello che serve. Voglio cliccare su un bottone del Ribbon "Crea Nuovo Template1" che mi apra subito Word con quel template.
Oppure, questo bottone, lo voglio sul Ribbon di una lista della pagina, non sulla Document Library.

Ho dovuto smontare un po' il Javascript del Ribbon della lista e della Doc. Library.

Ecco come fare.
Aggiungo il bottone tramite lo Sharepoint Designer 2010 (Sito, Seleziono lista, aggiungo Azione Personalizzata, ecc). Come azione, scelgo Apri URL e nel campo inserisco le righe seguenti:

javascript:createNewDocumentWithProgID('http:\u002f\u002fDOMINIOSP\u002fsites\u002fSITO\u002fDOCUMENTLIBRARYNAME\u002fForms\u002fCONTENTTYPE\u002fTEMPLATE1.docx', 'http:\u002f\u002fDOMINIOSP\u002fsites\u002fSITO\u002fDOCUMENTLIBRARYNAME', 'SharePoint.OpenDocuments', false)

Ovviamente, un po' bisogna lavorare: occorre trovare l'indirizzo corretto del template da utilizzare e della lista in cui salvare il Documento da Word.
Nota: trasformare l'URL come indicato, cioè con "\u002f" al posto di "/".

Questo è solo uno dei Javascript da poter utilizzare, ma si possono scovare altre funzioni e inserirle nelle Azioni Personalizzate.

Buon lavoro!

Sharepoint 2010 - Aggiungere bottone al Ribbon con Sharepoint Designer 2010

Vediamo come aggiungere un bottone personalizzato al Ribbon di una lista o document library, utilizzando solo lo Sharepoint Designer 2010.

Apriamo il sito con SPD2010, nelle liste, selezionamo la lista che vogliamo utilizzare.
A fondo pagina, vediamo il blocco Azioni Personalizzate.


Non clicchiamo su Nuovo, ma facciamo un clic con il mouse all'interno del blocco e dal menu contestuale, scegliamo Azione Personalizzata.
Vediamo un menu a discesa con diverse opzioni:


La traduzione italiana pessima rende oscura l'interpretazione delle voci...
Provo a spiegarle.

Menu voci elenco: il bottone è visualizzato nel menu a tendina sull'item
Visualizza barra multifunzione modulo: il bottone è visualizzato nella scheda "View properties"
Modifica barra multifunzione modulo: il bottone è visualizzato nella scheda "Edit properties"
Nuova barra multifunzione modulo: il bottone è visualizzato nella scheda "New item"
Visualizza barra multifunzione: il bottone è visualizzato nel Ribbon contestuale per l'item selezionato

Farò l'esempio solo per il Ribbon, quindi selezioniamo la voce "Visualizza barra multifunzione".
Si apre la finestra di dettaglio per l'Azione personalizzata.


Come si vede propone tre azioni:

  • Passa al modulo: propone il reindirizzamento al modulo specificato (DispForm, EditForm, ecc)
  • Avvia Flusso di Lavoro: propone l'elenco dei WF ad avvio manuale associati alla lista
  • Passa all'URL: permette di inserire URL di redirect, ma anche e sopratutto chiamate Javascript!

Utilizziamo quest'ultimo campo, in cui scopriamo che possiamo definire un parametro associato all'Id dell'Item selezionato: è il SelectedItemId, ed è strettamente Case Sensitive!

javascript: alert('Custom Action on Item {SelectedItemId}');

Definiamo, inoltre, altre informazioni, tra cui ad es, l'icona da utilizzare.


Altre opzioni avanzate sono da studiare per bene, prima di utilizzare (ad es, Scheda.ID gruppo).
La maschera per i diritti dovrebbe consentire la definizione del livello di visibilità del bottone da parte di alcuni utenti.
L'ultima opzione "Numero di sequenza" è l'ordinamento all'interno del blocco Action del Ribbon.
Clicchiamo OK e il bottone viene salvato subito ed è subito visibile.

Apriamo il sito e selezioniamo la lista: vediamo il ribbon con il nuovo bottone, ma non cliccabile, poiché non abbiamo ancora selezionato un Item.


Selezioniamo l'item e vediamo il comportamento del Ribbon:

Il bottone è ora cliccabile! E che facciamo? Lo clicchiamo?


Notiamo alcune cose importanti.
Possiamo utilizzare il SelectedItemId e passarlo ad una application page, ad esempio. E tramite Object Model consumare l'informazione sull'item.
Possiamo utilizzare chamate Javascript in quel bottone!
Così abbiamo a disposizione tutte le funzioni di Sharepoint e richiamare quelle che interessano!

Vedrete in altro post, come utilizzare ad es. il comando per aprire MS Word con un template selezionato.

Buon lavoro!

Sharepoint 2007 - Deploy in produzione con Visual Studio 2008

Dopo aver partecipato a corsi di Sharepoint 2010 e visto quanto sia (relativamente ok...) semplice eseguire il Deploy di soluzioni dall'ambiente di test all'ambiente di produzione, mi sono scontrato con la realtà di Sharepoint 2007... Il deploy di una web part custom, implementata con Visual Studio 2008.

Lo sviluppo è andato liscio, senza problemi.
Il deploy in ambiente di test, ancora più semplice: tasto destro sul progetto, click su Deploy e via.

Ora è giunto il momento del deploy in produzione.. Come fare?

Diversi forum mi propongono soluzione a detta loro "semplici", con creazione di un progetto CAB per generare un package da copiare in produzione e poi deploy con stsadm. Non è così facile.

Almeno, io ho incontrato difficoltà per due motivi:

- o riconosce il file come CAB quindi vuole addpackage anziché addsolution
- o (se rinominato in .wsp) non vuole addsolution
- o mi dice che manca il manifest.xml (pur essendoci)

Allora, ho seguito una mia strada.

Da Visual Studio (in ambiente test), modifico il codice con eventuali puntamenti a siti o liste di test, con i Guid o nomi di produzione.
Sempre su test, eseguo un Deploy dell'applicazione. Effettua la compilazione, esegue il Deploy.
Di certo, su test, la web part non funziona (dà Errore - File Not Found, perché cerca liste o siti che non esistono su quella macchina).
Ma a me, quello che interessa è il WSP con cui esegue questo Deploy!

Apro la folder bin (in Debug o Release) e vedo il mio package WSP.
Lo copio in una folder su Produzione.

A questo punto, semplicemente, mi posiziono in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN e:

stsadm -o addsolution filename C:\PERCORSO\NOMESOLUZIONE.wsp

O, se già in produzione:

stsadm -o upgradesolution -name NOMESOLUZIONEDACENTRALADMIN.wsp -filename C:\PERCORSO\NOMESOLUZIONE.wsp -immediate -allowGacDeployment

E voilà!
Moolto pià semplice del previsto (per così dire...)

Buoni Deploy!

Sunday, June 26, 2011

LyteBox sulle immagini inserite in Blogger

Ovviamente non l'ho scoperto io né tantomeno me lo sono inventato.

Copio e incollo un riassunto delle istruzioni per l'effetto tipo Lightbox per le immagini inserite in questo Blog!

Andare su Layout > Modifica HTML e, dopo aver salvato il modello completo, cercate la riga </head>, quindi, immediatamente sopra incollateci il seguente codice (ovviamente potete scaricare i file necessari e metterli dove volete):


<!-- EFFETTO LYTEBOX INIZIO -->
<link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/lytebox-script.js' type='text/javascript'/>
<!-- EFFETTO LYTEBOX FINE -->

Salvate il modello e la personalizzazione è completata.
Per attivarla bisogna operare sul codice delle foto inserite. Si possono ottenere effetti su una singola immagine, su un'intera galleria e creare degli slideshow attraverso l'editor di Blogger.


Vediamo per la singole immagine come fare.
Se si posta l'immagine con l'editor di Blogger possiamo farlo selezionandola dall'hard-disk o dal web, personalmente preferisco la seconda ipotesi ma per l'effetto è indifferente.
Se si carica dal computer, bisogna passare alla modalità HTML andando su Modifica HTML. Nel codice relativo all'immagine che abbiamo caricato: individuare il tag <a> e subito dopo, inserire l'espressione rel="lytebox".

<a rel="lytebox" href="....

Se vogliamo una gallery, dobbiamo innanzitutto sceglierne il nome, ad es "tramonti".
Poi si fanno le modifiche come sopra, con l'attenzione di mettere l'espressione rel="lytebox[tramonti]".


E per le gallery:


Sharepoint 2007 - Incrementare il limite di peso del Site Template

Il limite impostato di default da Sharepoint 2007 per l'operazione "Save as Template" è di 10 Mb.

Questo valore può essere cambiato utilizzando il comando stsadm.
Posizionarsi nella folder 12 di MOSS2007 (in Drive:\\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN\) e avviare il comando seguente:

stsadm -o setproperty -propertyname max-template-document-size -propertyvalue 40000000

Nell'esempio, il comando incrementa il limite e 40Mb.

Sharepoint 2010 - Cambiare Lingua al Titolo delle Web Part

Sharepoint 2010 dà la possibilità di implementare la localizzazione dei siti (e dei suoi elementi), grazie alla Multilanguage User Interface.

Purtroppo, come ben documentato da MS stessa (http://technet.microsoft.com/it-it/library/ff805062.aspx#Section7), non tutti gli elementi di un sito possono avere al seguito le traduzioni.

Una possibilità è quella di utilizzare un controllo client che ci permetta di cambiare lingua al titolo delle web part.
Analizzando il codice della pagina prodotta da Sharepoint, ho individuato i tag necessari ad identificare il titolo della web part.


La class ms-WPTitle dell'elemento h3 definisce il titolo della web part. Al suo interno, dobbiamo cercare il tag "span" che contiene il titolo. Generalmente è il primo dei due, senza id e, ovviaemente, non vuoto. Bene, sappiamo dove prendere il titolo.


Definiamo ora un modo con cui l'utente possa essere autonomo nella gestione dei titoli in multilingua.
L'idea è quella di utilizzare il campo Title delle proprietà della web part e chiedere all'utente di scrivere i titoli in lingua, separati da pipe ('|').

Title = "English title|French title|Italian title

Il js implementato controlla che siano presenti tutte le lingue (in questo caso, tre lingue) e se esistono tutte, seleziona quella da utilizzare nella visualizzazione, altrimenti inserisce come titolo quello che c'è..

Inoltre, lo script gira su tutte le web part della pagina, ovvero cerca i tag H3 con classe "ms-WPTitle" e ne ricerca il tag span con il titolo.

Utilizzando uno script con jquery, ho implementato il codice :

$(document).ready(function () {
var lcid = L_Menu_LCID;
var arrayH3 = $(".ms-WPTitle");
$.each(arrayH3, function () {
var title = $(this).children("a").children("nobr").children("span").first();
var arrTitle = title.text().split('|');
if (arrTitle.length == 3) {
if (lcid == 1036) { //french
title.text(arrTitle[1]);
}
else if (lcid == 1040) { //italian
title.text(arrTitle[2]);
}
else { //english / default
title.text(arrTitle[0]);
}
}
});
});

L_MENU_LCID è una variabile di Sharepoint che definisce l'identificativo della lingua corrente utilizzata dall'utente.
Lo script può essere inserito a fondo pagina in una Content Editor Web Part (come HTML), con in testa il richiamo alle librerie jquery.


Se le lingue sono in numero diverso, occorre modificare il codice utilizzando il numero e gli identificativi corretti per la lingua.

Spero vi sia utile!

Saturday, June 25, 2011

Sharepoint 2007 - When use Lookup Columns instead Choice Columns

There are a number of ways to store options for a field that requires a group of pre-selected options, a drop down list as it were. I always thought that defining a column of the type choice is the way to go but recently discovered that in a couple of areas that creating a list and then using that as a look up is actually a better solution.

When to use a Choice Column

You should use a choice column, pictured below, in the following circumstances:
1) Only site administrators should be able to add/remove/edit options
2) You don’t have that many options to choose from (maximum ten) and users will usually only select at most 5 options.
3) The options rarely change

This is the usual way to go in a SharePoint environment but it can cause many issues. For starters a choice column can only store 255 characters (SharePoint in built field limit) so if your users are choosing 10 options each of 26 characters (see below) then they wont be able to. This is because the choice fied actually stores all the selected options as a semi-colon delimited string, which also causes some issues with the Data View Web Part when attempting to render the values.



Another reason is that if you have many, many options the interface will look horrendous. In my case we had something like 250 possible options for 6 different field which meant that a user would scroll themselves silly when trying to enter metadata.

Finally the options would change often, new options would have to be added but we didn’t want to give these people administrator privileges or have them harass IT for a simple task… so what was the answer? Use a lookup column instead.

The Lookup Column

The lookup column is simply another type of column within SharePoint that looks up a list to get its options. Seems simple enough but it has certain advantages that in this case saved us a whole lot of time

To implement a look up column in SharePoint you need to do two simple things things:

1) Create a list that will store the data that you want to look up and
2) Create the look up column to be used.


Lookup Column Advantages

The LookUp column has the following characteristics which were very useful in our case:

Can be easily managed without special permissions

If you want to give your users the power to add, edit and delete options then since the values for the lookup are stored in a list they can have normal access rights without giving them the special permissions required to manged fields in Sites or Site Collections.

Can store an unlimited amount of options

The Lookup list, unlike a choice field, can hold an unlimited amount of options that are selected if you choose the “Allow Multiple Values” and “Allow unlimited length in document libraries” options. This is a really good way to get around the pesky 255 character limit that you encounter whilst using a choice field.



Clean Interface

This is one thing that the Look Up list really prevails in that instead of using a series of select boxes, which gets unwieldly when you have many options, the Look Up list is rendered as two lists where the user can select values, much cleaner! You can also change the size of the boxes pretty easily using JQuery or SharePoint Designer, a good link is here.




Conclusion

So as you can see there are many ways to skin the cat in SharePoint and the choice between a look up list and a normal choice field can produce some interesting results and challenges. I hope that this article gave you some insights into how to solve these issues.

Friday, June 24, 2011

GGInstant - Un Progetto di ricerche istantanee

gginstant

Applicazione del post Instant Search sul tuo Sito con evoluzione interessante!
Ho aggiunto, infatti, la istantanea ricerca della parola cercata tra le mappe e le news di Google!

Thursday, June 23, 2011

Filtrare le righe di una tabella con JQuery

Un cliente mi ha chiesto di inserire sul sito la possibilità di filtrare i dati di una tabella. Come spesso accade, l'applicativo da modificare non è stato sviluppato dal sottoscritto, né da suoi colleghi, per cui il modo più rapido, senza sorgenti o ricompilazioni, è agire lato client.

In questo, mi è venuto in aiuto JQuery. Strano, vero? Alla fine è il mio miglior consulente per attività di questo tipo.

Scopiazziando, ovviamente, da un paio di siti, completo i loro articoli con lo script corretto da utilizzare: semplice, rapido e sopratutto "fa scena", per la rapidità e il behaviour decisamente web 2.0.

1) La tabella da filtrare deve avere il codice class="filterable" (se usate datagrid .NET, CssClass="filterable").

2) Aggiungere in testa alla tabella, il codice seguente: è la casella di testo che farà il filtro sulle righe.

Filter:

3) Ora aggiungere il codice seguente:

$(document).ready(function(){
//add index column with all content.
$(".filterable tr:has(td)").each(function(){
var t = $(this).text().toLowerCase(); //all row text
$("")
.hide().text(t).appendTo(this);
});//each tr
$("#FilterTextBox").keyup(function(){
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function(){
$(".filterable tr:visible .indexColumn:not(:contains('"
+ this + "'))").parent().hide();
});//each
});//key up.
});//document.ready

Questo codice, definisce:

- le modalità di filtro sulle celle: in pratica, il filtro agisce su tutte le celle.

- la funzione keyu che esegue il filtro ad ogni carattere inserito (filtro in tempo reale!)


Ovviamente, in testa, occorre inserire i riferimenti alle librerie JQuery ;-)

Buon divertimento!

Wednesday, June 1, 2011

Instant Search sul tuo Sito

Seguendo il concetto e il successo di Google Instant, altri siti hanno implementato la loro ricerca immediata comeYouTubeInstant , Bing Instant e Facebook Instant.
Grazie a Google AJAX Search API combinate con un Motore di ricerca personalizzato, creare una Ricerca Instant per il tuo sito.
In questo articolo vediamo come!
Nota 1: questa è la traduzione del post How to Create an Instant Search for your Web Site
Nota 2: il progetto demo del post originale l'ho modificato per farlo funzionare con IE8!
Per vedere una demo di Instant Searcg in azione, andate al mio progetto demo e inserite chiavi di ricerca.
demo
1. Vai alla ricerca personalizzata di Google e accedi al tuo account Google. Crea un nuovo motore di ricerca personalizzato e aggiungi il sito (o i siti ) che si desidera includere nei risultati del motore di ricerca istantanea che si sta per creare.
Creare un motore di ricerca immediata per il tuo sito web
Non c'è bisogno di personalizzare il motore di ricerca o modificare gli elementi CSS.
Dovrete soltanto l'ID CSE del motore di ricerca creato.
2. Dal pannello di controllo del motore di ricerca Google Custom - ottenete l'ID univoco, come illustrato di seguito:
Ottenere l'ID di un motore di ricerca Google personalizzato
3. Vai alla pagina di Google Search API Ajax e registrati per ottenere la Google AJAX API key.
Ricordati di inserire l'URL stesso che hai inserito nelle impostazioni di ricerca personalizzato. (ndr: in verità, dovresti mettere l'URL del sito in cui monti il motore, i siti inseriti in precedenza sono quelli su cui va a cercare..)
Prendi il Cerca con Google AJAX API Key
Nota: Google AJAX Search API key.
4. Scarica il codice sorgente Instant .
5. Aprire instant.js in un editor HTML o notepad. Nota le due variabili nella prima e seconda riga,:
AJAX_API_key var = ";
CSE_ID var = ";
Inserire i valori corrispondenti ottenuti dal passo 2 e 3.
Immettere i valori di CSE AJAX API ID e la chiave di Google
5b: Personalizzare a piacere la parte di costruzione dei risultati
6. Salvare il file instant.js e caricare tutti i file in una directory del tuo sito web. Fatto!
Scarica il mio progetto completo

Motore di Ricerca Personalizzato con Google

Cercavo qua e là la possibilità di inserire nelle pagine di un sito, un motore di ricerca interno, il più possibile performante e con risultati attendibili...

Dopo aver abbandonato l'idea di Microsoft Index service, per certi versi molto utile, mi sono dedicato alla ricerca con google...

Ricerca e ricerca, scopro che proprio Google propone un paio di ottime idee.

Grazie alle API messe a disposizione oppure direttamente con alcuni script AJAX è possibile inserire nelle proprie pagine il form di ricerca (ovviamente, nella versione free, con il logo di google) e definire in quale pagina voler vedere i risultati.
Nel proprio account, nella gestione dei motori di ricerca personalizzata, è possibile decidere con che colori visualizzare i risultati (il titolo, l'abstract, il link, la cache).

Il resto lo fa Google! Compresi avvisi del tipo "nessun risultato, controlla quello che hai scritto".

Per vedere un esempio della versione free, guardate questa pagina in cui ho implementato il motore:


Inoltre, per aziende, è possibile poter personalizzare a piacere la ricerca all'interno del proprio sito, definendo in modo molto più approfondito gli stili e altre informazioni (sulla reale indicizzazione ad esempio).
Questo, ovviamente, dietro pagamento di un canone annuale che va da 100$ in su, a seconda delle potenzialità del sito.

Ancora una volta, Google si rivela utilissimo per i webmaster!