Se avete voglia di sperimentare un po’, ecco come fare.

Ci sono due tipologie di application template:

• Site admin (file .stp): si tratta di template custom che si aggiungono alla template Gallery, per installarli è sufficiente avere diritti di site owner  (sono esclusivamente in inglese).
• Server admin (file .wsp): hanno funzionalità più avanzate che si integrano con la piattaforma Sharepoint, per installarli è necessario avere i permessi di amministratore sul server (sono tradotti in diverse lingue, tra cui anche l’italiano).

INSTALLAZIONE TEMPLATE .STP

1. Scompattare il file exe, verrà creato un file .stp
2. Accedere al sito sharepoint come membro del gruppo site owners
3. Cliccare ‘Site Actions’ (in alto a destra) e successivamente su ‘Site Settings’
4. Sotto la sezione Galleries, cliccare su ‘Site Templates’
5. Se non c’è questa funzione, probabilmente siamo un sito di secondo livello, bisogna andare nelle Site Settings del sito padre
6. Cliccare su Upload per caricare il nuovo site template, selezionando il file .stp precedentemente scompattato

Ora è possibile creare un nuovo sito con i template appena caricati, nella schermata di creazione nuovo sito, sotto a ‘Custom’ troveremo tutti quelli installati (vedi immagine sopra).

INSTALLAZIONE TEMPLATE .WSP

La prima operazione, da fare una sola volta, è l’installazione dell’ApplicationTemplateCore.
Questo è un pre-requisito per poter caricare tutti gli altri, ecco come fare:

1. Caricare il file ApplicationTemplateCore.wsp sul server
2. Accedere via prompt dos alla cartella:
   C:\program files\common files\microsoft shared\web server extensions\12\bin
3. Digitare il comando:
   ‘stsadm -o addsolution -filename <file_path>\ApplicationTemplateCore.wsp’
   Dove al posto di ‘<file_path>’ metteremo il percorso della directory dove abbiamo caricato il file
4. Poi digitare il comando:
   ‘stsadm -o deploysolution -name ApplicationTemplateCore.wsp -allowgacdeployment’
5. Poi digitare il comando:
   ‘stsadm -o copyappbincontent’

Dopo aver installato il core, per caricare un application template wsp si devono compiere le seguenti operazioni:

1. Scompattare il file exe
2. Caricare il file .wsp del template da installare nella cartella del server:
   C:\program files\common files\microsoft shared\web server extensions\12\bin
   Usiamo questa cartella per comodità, perché qui si trova il tool stsadm che useremo per l’installazione e il deployment del template.
3. Accedere via prompt dos a tale cartella e digitare il comando:
   ‘stsadm -o addsolution -filename <template_name>.wsp’
   Dove al posto di ‘<template_name>.wsp’ metteremo il nome del file
4. Poi digitare il comando:
   ‘stsadm -o deploysolution -name <template_name>.wsp –allowgacdeployment -immediate’
   Anche in questo caso, al posto di ‘<template_name>.wsp’ metteremo il nome del file
5. Per verificare l’avvenuta installazione accedere alla Central Administration di Sharepoint e navigare in ‘Operations  -> Global Configuration -> Solution Management’
   Qui si vedono tutte le soluzioni installate, se è andato tutto bene saranno marcate come ‘Globally Deployed’
6. Da linea di comando è bene lanciare un ‘iisreset’

Ora è possibile creare un nuovo sito con i template appena caricati, nella schermata di creazione nuovo sito, sotto ad ‘Application Templates’ troveremo tutti quelli installati (vedi figura sopra).

RIMOZIONE DI UN TEMPLATE .WSP

1. Via prompt digitare il comando:
   ‘stsadm -o retractsolution -name <template_name>.wsp -immediate’
   Dove al posto di ‘<template_name>.wsp’ metteremo il nome del file
   Questa operazione rimuove il template dalla lista di quelli disponibili in fase di creazione di un nuovo sito
2. Per eliminarlo completamente dal server, digitare il comando:
   ‘stsadm -o deletesolution -name <template_name>.wsp’
   Dove al posto di ‘<template_name>.wsp’ metteremo il nome del file

Ci sarà il classico logo, una nuvoletta per i tag (i seguito capiremo il motivo di questa scelta), un box di destra per contenere l’icona dei feed, il link alla versione inglese e il box di ricerca; in angolo qualche utile tasto per il ridimensionamento del testo. diploD è nato liquido, e liquido deve restare. Per tradurre la bozza grafica in xhtml+css è quindi necessario spezzare l’immagine in tante sotto-immagini, da utilizzare come sfondo per i vari ‘div’ che andremo a creare. La tecnica è piuttosto banale, ma nel caso di un layout liquido è necessario fare qualche considerazione.
Update: Per chi è impaziente di vedere il risultato finale, eccolo qui.

Il box di destra, così come il menù, devono adattarsi alle dimensioni della pagina. Non è quindi possibile creare un’unica immagine di sfondo. Ho pensato di suddividere lo spazio in questo modo:

Ad ogni oggetto sono quindi state applicate come sfondo parti dell’immagine globale, che assieme rendono il tutto adattabile a diverse risoluzioni.

E’ il caso di fare qualche puntualizzazione:

1. Il logo è stata riprodotto utilizzando una tecnica di image replacement con css semplicissima. Il metodo è quello presentato da Jon Christopher: si tratta di rendere il testo dello stesso colore dello sfondo e impostare la larghezza del titolo in modo da tale da far apparire tutta l’immagine di sfondo. Quando è applicabile, è la tecnica che preferisco su tutte: non richiede nessun markup aggiuntivo e funziona anche per chi ha le immagini disabilitate.
   Guardando il codice qui sotto, si può vedere come il titolo h1 (e il relativo link) siano presenti nel markup, ma non appaiono come testo.
2. Ho scelto di inserire la nuvola dei tag nella testata perchè ritengo sia importante far percepire ai bot dei motori di ricerca qualche parola chiave ad inizio pagina. Non so bene quanto sarà proficua la scelta, ma voglio provare. Preferisco qualche parola scritta nel codice che in una immagine neutra.
3. Nel div “text-tools” di destra ho inserito i classici bottoni per il ridimensionamento del testo. Sono quei piccoli accorgimenti per facilitare la lettura e migliorare l’accessibilità del sito. Mancavano..

Ecco come si presenta il codice xhtml:


<div id="header">
<div id="header-content">
<h1 id="logo-text"><a href=#" title="home">diploD</a></h1>
<h2 id="slogan">by Davide Del Monte</h2>

<div id="nav">
<ul>
<li><a href="index.html">Archivio</a></li>
<li><a href="index.html">Contatti</a></li>
<li><a href="index.html">Servizi</a></li>
<li><a href="index.html">Foto</a></li>
<li><a href="index.html">Templates</a></li>
</ul>
</div>

<div id="header-tags">
<span class="tag1">Webdesign</span> <span class="tag4">reti</span> <span class="tag3">Ingegneria</span> <span class="tag2">Project Management</span> <span class="tag5">e-business</span> <span class="tag3">Ambiente</span> <span class="tag4">tecnologie</span> <span class="tag2">Web</span> <span class="tag5">Tortelli di Zucca</span>
</div>

<div id="header-right">
<div id="feed-icon"><a href="#" title="RSS Feed"><img src="images/feed.gif" class="no-format" alt="Feed" /></a></div>
<div id="feed-box">« <a href="#" title="RSS Feed">Segui questo blog via feed</a>.<br/><small>Non ti interessano articoli personali o non sai cosa sono i feed? <a href="#" title="come usare i feed di diploD">vedi qui</a></small> »</div>
<div id="english-flag"><a href="#" title="english info"><img class="no-format" src="images/english-flag.gif" alt="en"/></a></div>
<form action="#" method="get" class="searchform">
<input id="stringa" type="text" name="s" class="textbox" />
<input name="search" class="button" value="Cerca.." type="submit" />
</form>
</div>

<div id="text-tools">
<a href="#" title="aumenta dimensione del testo" onclick="changeFontSize(1);return false;"><img src="images/abigger.gif" alt="Text Bigger" class="no-format" /></a><a href="#" title="diminuisci dimensione del testo" onclick="changeFontSize(-1);return false;"><img src="images/asmaller.gif" alt="Text Smaller" class="no-format" /></a><br/>
<a href="#" title="resetta dimensione del testo" onclick="revertStyles(); return false;"><img src="images/areset.gif" alt="Reset" class="no-format" /></a>
</div>

</div></div>


Questo è inveceil codice css che regola i blocchi e gli elementi sopra. Come si nota ogni oggetto ha una immagine di sfondo diversa, che altro non è se non una porzione dell’immagine generale.
Le dimensioni dei testi sono espresse in px, il motivo è che in questo caso è necessario controllare al millimetro la disposizione del testo, soprattutto per quanto riguarda tag-cloud e titolo, perchè si tratta di ricomporre una testata grafica.


/* header */
#header {
height: 201px;
text-align: left;
background: #000 url(images/bg.gif) repeat-x top left;
}
#header-content {
position: relative;
margin: 0 auto;
padding: 0;
height: 201px;
background: transparent url(images/header-right-bg.gif) no-repeat top right;
overflow: hidden;
}
#header-content h1, #header-content h2 {
margin: 0;
padding: 0;
}
#header-content h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 10px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -1px;
text-decoration: none;
text-transform: uppercase;
text-align: right;
color: #272727;
background: transparent url(images/logo.gif) no-repeat top left;
width: 250px;
height: 150px;
/* posizione del titolo principale */
top: 0; left: 0;
}
#header-content h2#slogan {
position: absolute;
height: 25px;
font: bold 10px 'Trebuchet Ms', Sans-serif;
text-transform: none;
margin: 0; padding: 0;
color: #272727;
/* posizione dello slogan */
top: 15; left: 260px;
}
#header-tags {
position: absolute;
width: 200px;
height: 90px;
font: bold 12px 'Trebuchet Ms', Sans-serif;
text-transform: none;
margin: 0; padding: 30px 25px;
color: #968e81;
background: transparent url(images/header-tag-bg.gif) no-repeat top left;
overflow: hidden;
/* posizione dello slogan */
top: 0px; left: 30%;
}
#header-tags .tag1 { font-size: 18px; }
#header-tags .tag2 { font-size: 16px; }
#header-tags .tag3 { font-size: 14px; }
#header-tags .tag4 { font-size: 12px; }
#header-tags .tag5 { font-size: 10px; }
#header-tags .tag1:hover, #header-tags .tag2:hover, #header-tags .tag3:hover, #header-tags .tag4:hover, #header-tags .tag5:hover { color: #02AFE5; }
#header-right {
position: absolute;
width: 30%;
height: 120px;
font: bold 12px 'Trebuchet Ms', Sans-serif;
text-transform: none;
margin: 0; padding: 0;
background-color: #dedede;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
overflow: hidden;
/* posizione del box di destra */
top: 80px; right: 5%;
}
/* feed icon */
#feed-icon {
position: absolute;
background: transparent;
top: 5px;
left: 5px;
}
#feed-box {
position: absolute;
width: 60%;
height: 50px;
top: 10px;
left: 75px;
overflow: hidden;
}
/* text-tools e english flag*/
#text-tools {
position: absolute;
top: 158px;
right: 0.7%;
}
#english-flag {
position: absolute;
top: 0px;
right: 0px;
}
/* Navigation */
#nav {
position: absolute;
width: 70%;
height: 40px;
margin: 0 auto;
padding: 0;
overflow: hidden;
/*posizione del menu */
top: 157px; left: 5%;
}
#nav ul {
float: left;
list-style: none;
margin: 0; padding: 0;
text-align: center;
}
#nav ul li {
float: left;
margin: 0; padding: 0;
}
#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0 3px;
padding: 8px 12px;
color: #333;
font: bold 14px "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
border: 1px solid #C3FE2E;
text-decoration: none;
font-variant: small-caps;
letter-spacing: 1px;
background: transparent url(images/nav-bg.gif) repeat-x bottom left;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #fff;
background: transparent url(images/nav-orange.png) repeat-x bottom left;
border: 1px solid #fff;
}


Per chi volesse approfondire la faccenda della suddivisione con photoshop dell’immagine principale, ecco il video che presenta tutte le immagine ricavate. Prendetelo come un esperimento, avevo voglia di fare qualche prova con gli screen cast. Il risultato può essere noioso (anzi forse lo è), ma si capisce bene come è stata suddivisa l’immagine in modo da rendere il caricamento veloce e la visualizzazione della pagina corretta. Buona visione.

Se poi qualcuno avesse suggerimenti o consigli, ben vengano.

UPDATE: nei commenti Angelo ha fatto notare che servirebbe una demo per vedere con mano come esce la pagina sul browser, così ho caricato tutto per renderlo visibile: ecco qui la demo.
Commenti e suggerimenti continuano ad essere ben accetti!

Riporto qualce appunto per installare senza problemi la piattaforma Apache+MySQL+php, così da avere in locale un server dove testare e sviluppare le proprie applicazioni (come wordpress o joomla).

Installazione Apache Server 2.2.6

Installare Apache è stato piuttosto semplice. Ecco i passi da seguire:

1. Scaricare l’installer (MSI) per Windows dal sito di Apache HTTP Server
2. Disattivare il controllo UAC: Su Vista: start -> pannello di controllo -> Account Utente e protezione per la famiglia -> Account Utente -> Attiva o disattiva controllo account utente [tra parentesi questa cosa vi libererà delle fastidiosissime finestrelle "consenti" che appaiono dopo ogni clic]Su Windows 7:  start -> pannello di controllo -> Account Utente -> Account Utente -> Modifica le impostazioni di controllo dell’account utente -> Impostare su Nessuna Notifica
3. Lanciare l’installer appena scaricato e seguire le istruzioni, come Network Domain e Server Name possiamo mettere “localhost” (se l’installazione avviene in locale) e come porta scegliere 80.
4. Ora è possibile configurare Apache Server, aprendo il file “C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf” con un editor di testo.La cosa principale da fare è indicare la cartella dove vengono salvate le nostre pagine web per poi renderle accessibili via browser grazie al server. La cartella di default è /htdocs/, si trova all’interno di quella dove abbiamo installato Apache.Se vogliamo cambiarla è sufficiente trovare il paramentro “DocumentRoot” e modificarlo come segue:#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/www"

   C:/www/ in questo caso è la cartella dove andremo a posizionarele pagine web e tutti i file annessi.

5. Lo stesso percorso va riportato sotto, in questo modo:#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:/www">
6. Salvare e riavviare il server.
7. Se dovessero presentari problemi in fase di avvio del server, per prima cosa controllare l’application log di windows; se dovessero mancare delle dll può tornare utile questa pagina: http://windows.php.net/download/
   Un’altra operazione da fare è settare anche questi due ulteriori parametri sul file di configurazione come da testo sotto:
   # ServerName gives the name and port that the server uses to identify itself.
# This can often be determined automatically, but we recommend you specify
# it explicitly to prevent problems during startup.
#
# If your host doesn't have a registered DNS name, enter its IP address here.
#
ServerName localhost:80
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
Listen 127.0.0.1:80

Il problema all’avvio dell’icona Apache Monitor nella systray con Windows Vista – risoluzione

Una volta installato il server è sufficiente digitare l’indirizzo “http://localhost/” nella barra degli indirizzi del browser per capire se tutto funziona. Su Windows XP però eravamo abituati all’iconcina con la piuma dalla quale era possibile avviare o stoppare il server apache.

Con Vista questa icona non c’è più, inoltre un fastidioso problema all’avvio ci accoglie perchè Apache Monitor non riesce a caricarsi correttamente. Per risolvere l’inconveniente basta andare nella cartella di installazione di Apache Server, entrare nella cartella /bin/ e cliccare col tasto destro sul file ApacheMonitor.exe, da qui clic su Proprietà. In alto selezionare la tab “Compatibilità” e spuntare l’opzione “Esegui il programma in modalità compatibile per Windows XP (Service Pack 2)”. Vedi figure sottostanti.

Installazione MySQL 5.0

MySQL è un server per database relazionali open source, ormai affermato e robusto, soprattutto in ambito web. Per l’installazione è necessario:

1. Scaricare dal sito ufficiale l’installer per windows.
2. Lanciare l’installer e seguire le istruzioni a video, scegliendo l’installazione Typical.
3. Alla fine dell’installazione scegliere di configurare il server.
4. Scegliamo l’opzione “Detailed Configuration“



5. Impostare la tipologia come “Developer Machine” (il server sarà infatti utilizzato principalmente per i nostri test in locale)



6. Al passaggio successivo selezionare “Multifunctional Database“



7. Lasciare invariato al punto successivo e proseguire, a meno che non si voglia specificare una directory particolare per InnoDB
8. Come numero approssimativo di connessioni al server possiamo specificare 20. Più che sufficienti se lo utilizziamo come server di test.



9. Al passaggio successivo selezionare entrambe le opzioni, è poi possibile specificare la porta di connessione al database: generalmente la 3306



10. Come impostazioni dei caratteri scegliere “Best support for Multilingualism“



11. Se vogliamo cheMySQL si avvii in automatico all’accensione di windows selezionare “Install as Windows Service” e “Launch the MySQL server automatically“.



12. Indicare la password per l’utente amministratore (root) ed eventualmente creare un utente anonimo (anche se sarebbe meglio evitare, è poco sicuro)



13. Per l’amministrazione del Database installare MySQL Workbench. Si tratta di utili strumenti per la gestione “visiva” del server, degli utenti, dei permessi e dei database. Comprende inoltre il Query Browser per lanciare le query SQL.

Installazione php 5 sul server Apache

Con l’installazione di php e delle estensioni per la connessione al database avremo completato l’opera. In questo caso è meglio eseguire una installazione manuale. Come riportato nella Guida php su Windows di HTML.it:

Questa installazione, consigliata dal manuale ufficiale Php, ha il vantaggio di non richiedere lo spostamento di file nelle directory di sistema (Windows, System32 e altre): infatti modificando la sola variabile di sistema PATH e mantenenedo i file in c:\php, tutto rimane più ordinato e l’aggiornamento diventa molto più semplice.

Ecco i passi da seguire:

1. Scaricare il pacchetto zip dal sito ufficiale
2. Estrarre i files nella cartella C:/php/ (il nome breve è più comodo)
3. Aprire Pannello di Controllo -> Sistema e Sicurezza (Sistema e Manutenzione su Vista) -> Sistema. Nella barra di sinistra cliccare su “Proprietà di Sistema avanzate” (Vista) o su “Impostazioni avanzate di sistema” (Windows 7), poi sul tasto “Variabili d’ambiente..“.Dalla tendina sotto (variabili di sistema) selezionare “Path” e cliccare su “Modifica”. In fondo al testo già presente aggiungere la stringa “;C:\php” (con il punto e virgola, senza gli apici).

   In questo modo abbiamo indicato al sistema dove si trova l’interprete php.

4. Riavviare windows
5. Ora è necessario integrare l’interprete php nel server Apache. Per farlo bisogna aprire il file di configurazione di Apache: “C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf”C’è una lunga lista di “LoadModule” (molti di questi sono commentati) alla fine della quale bisogna aggiungere queste righe:# Start Php integrationLoadModule php5_module "C:/php/php5apache2_2.dll"

   AddType application/x-httpd-php .php

   PhpIniDir "C:/php"

   # End Php integration

6. Infine modifichiamo il parametro DirectoryIndex come segue:#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>

7. Ora andiamo nella directory di php e rinominiamo il file “php.ini-development” in “php.ini“.Si tratta del file di configurazione dell’interprete php. Apriamolo con un editor di testo.
8. Cambiamo il parametro “extension_dir” come segue:; Directory in which the loadable extensions (modules) reside. extension_dir = "C:/php/ext"
9. Settare il parametro “display_errors” su On per poter vedere gli errori generati dagli script che svilupperemo
10. Infine decommentare (togliendo il punto e virgola davanti) il parametro “session.save_path” e moficarlo come segue:session.save_path = "C:/php/sessionfiles"


    sessionfiles è una cartella da creare, dove verranno salvati i file relativi alle sessioni di php.

11. Ora dovremo attivare i connettori php-MySQL (maggiori info nella pagina dei download dal sito ufficiale di MySQL). Si tratta di file dll che permettono la connessione da parte di php al database: mysqli e mysql
12. Assicurarsi che siano presenti i file php_mysql.dll e php_mysqli.dll nella cartella /ext/ di php (dove ci sono le estensioni)
13. Ora nel file php.ini aperto in precedenza decommentare (togliendo il ; ad inizio riga) le estensioni di mysql come segue:extension=php_mysql.dll
extension=php_mysqli.dll

14. Altra estensione utile è quella per la gestione delle immagini, che conviene decommentare:extension=php_gd2.dll
15. A questo punto salvare tutto, riavviare il server Apache e tutto dovrebbe funzionare.

Per essere sicuri possiamo creare un file “index.php” con all’interno il semplice codice

<?php phpinfo() ; ?>


Aprire il browser e digitare l’indirizzo: “http://localhost/index.php” Se tutto è stato eseguito correttamente dovremmo vedere una pagina che riporta diverse informazioni sulla versione di php installata.

Si noti che questo semplice test non ci dà informazioni sulla corretta installazione delle estensioni per la connessione al database, che dovremo testare in un secondo momento, magari provando l’installazione in locale di un cms come wordpress.

Anche su Windows Vista e Windows 7 gira, buon lavoro. :)