WiKi AdessoWEB.biz
In questo sito raccogliamo e pubblichiamo materiale utile all'utilizzo della piattaforma AdessoWEB ed al suo sviluppo.
Utilizza il forum integrato nel CMS per chiedere la redazione di nuovi tutorial o di nuove sezioni del manuale.
In questa lezione andiamo a creare il primo layout (modello di pagina) per il nostro tema: index.html.
Nella prima parte della lezione andremo ad utilizzare dei semplici placeholders per muovere i primissimi passi. Non ci occuperemo del risultato grafico!
Nella seconda parte della lezione andremo ad utilizzare il framework CSS BluePrint ed il framework Javascript jQuery per arricchire il notro layout di formattazione di base ed effetti Javascript.
Per seguire correttamente questa lezione hai bisogno di creare nel tuo sito web alcune pagine di esempio cui faremo riferimento in questa guida e nelle seguenti:
Inseriamo nelle varie pagine dei contenuti di esempio (testi e immagini) sia nel contenuto principale che nella colonna laterale.
Questi sono infatti le posizioni di contenuto standard implementate dal CMS. Nel corso di queste lezioni impareremo a personalizzare queste impostazioni creando layout con un numero arbitrario di posizioni di contenuto.
Apriamo il file index.html creato nella lezione 01:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Il mio primo tema AdessoWEB!</title> </head> <body> Hello World! </body> </html>
Al momento questo sorgente è statico ovvero non utilizza nessuno dei placeholders messi a disposizione da AdessoWEB per inserire contenuti dinamici.
Qualunque pagina del nostro sito web visualizzerà semplicemente il testo “Hello World!”.
Modifichiamo dunque il codice sorgente inserendo un primo e semplice placeholder:
... <body> <!-- @PageTitle --> </body> ...
Ora le pagine del sito mostreranno il rispettivo titolo di pagina.
A questo punto abbiamo creato un primo e semplice esempio di layout dinamico!
AdessoWEB si occupa di gestire in modo automatico i MetaTags della pagina inserendo title, keywords, codifica, lingua ed altre informazioni utili a utente e motori di ricerca.
Sostituiamo dunque il codice statico della nostra head con il seguente:
<head> <!-- @MetaTags --> </head>
Aprendo in anteprima le varie pagine del sito web possiamo osservare come i meta tags sono stati automaticamente inseriti prelevando i contenuti dal pannello SEO della pagina o dalle impostazioni di lingua.
Passiamo ora all'interno del tag BODY per inserire le intestazioni del sito:
... <body> <h1><!-- @SiteTitle --></h1> <h2><!-- @SiteSubTitle --><h2> <!-- @SiteLogo --> <hr /> </body> ...
e concludiamo aggiungendo i dati aziendali e le intestazioni a piè di pagina:
... <body> <h1><!-- @SiteTitle --></h1> <h2><!-- @SiteSubTitle --><h2> <!-- @SiteLogo --> <hr /> <h3><!-- @SiteTitle --></h3> Qui andrà il contenuto della pagina! <hr /> <!-- @FooterLine1 --> <!-- @FooterLine2 --> <!-- @Credits --> </body> ...
Il contenuto della pagina è ancora statico ma ho inserito il placeholder PageTitle così da visualizzare almeno il titolo della pagina quando utilizziamo l'anteprima di pagina.
Qualunque sito AdessoWEB implementa un menu principale (placeholder MainMenu) che, a meno di configurazioni particolari in theme.xml, tenta di visualizzare l'intera struttura delle pagine del sito web:
... <body> <h1><!-- @SiteTitle --></h1> <h2><!-- @SiteSubTitle --><h2> <!-- @SiteLogo --> <hr /> <h3>Menu Principale:</h3> <!-- @MainMenu --> <hr /> <h3><!-- @SiteTitle --></h3> Qui andrà il contenuto della pagina! <hr /> <!-- @FooterLine1 --> <!-- @FooterLine2 --> <!-- @Credits --> </body> ...
A questo punto possiamo navigare il sito web utilizzando il menu principale. Se tutto è andato bene vedrai il titolo di ogni pagina così come l'hai inserito nell'amministrazione del sito web.
Ci occupiamo ora di dar vita al contenuto vero e proprio di ogni pagina web del nostro sito.
Come abbiamo già detto il layout predefinito mette a disposizione 2 posizioni di contenuto:
Seguendo il significato espresso dalle posizioni di contenuto automatiche cerchiamo di creare un layout con 2 colonne affiancate. Una per il contenuto principale ed una per il contenuto laterale.
Utilizzeremo dei semplici fogli di stile in linea per ottenere l'effetto desiderato:
... <h3><!-- @PageTitle --></h3> <div style="overflow:auto"> <div style="float:left;width:60%"> <!-- @blockCNT --> </div> <div style="float:right;width:39%;background:#ddd"> <!-- @blockSD1 --> </div> </div> ...
A questo punto il nostro layout di base è completo e funzionante.
Il sito è navigabile e tutti i contenuti sono correttamente visualizzati nella pagina.
Ovviamente il risultato è inguardabile! Nella seconda parte della lezione impareremo come includere files CSS e Javascript per dare un po' di vita al notro tema!
Scarica l'esempio funzionante!
mio_tema_03a.zip
In questa seconda parte della lezione facciamo qualche passo avanti.
E' richiesta una base di CSS e di Javascript perchè andremo proprio ad utilizzare due famosi framework per aggiungere un minimo di estetica e di funzionalità al nostro layout.
Come qualunque pagina web un layout può contenere i collegamenti a CSS, Immagini, Javascript e files generici.
... <head> <!-- @MetaTags --> <!-- BluePrint CSS Framework --> <link rel="stylesheet" href="./assets/css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="./assets/css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="./assets/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> </head> ...
NOTA: Per collegare una risorsa statica (CSS,Js,Img,File) presente nel tema possiamo utilizzare indirizzo relativo avendo cura di iniziare dalla cartella in cui si trova il layout (./).
In questo modo l'interprete riesce a identificare la risorsa e ricostruisce il path corretto durante la produzione della pagina web.
jQuery è una libreria piuttosto famosa e per questo motivo Google ha deciso di ospitarla nella propria CDN.
Utilizziamo dunque un normalissimo tag SCRIPT per incorporare una libreria esterna al sito web:
... <!-- jQuery Framework --> <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ // ... jQuery Code ... }); </script> </head>
Abbiamo inoltre creato un blocco Javascript che utilizzeremo per eseguire le istruzioni necessarie a far funzionare il nostro layout.
D'ora in avanti quando parliamo di codice Javascript ci riferiamo a codice scritto in questo particolare punto del tema.
Per definire il contenuto della pagina cerchiamo di sfruttare al massimo quanto messo a disposizione dal framework BluePrint:
... <body class="container _showgrid"> <header> <div class="span-16"> <h1><!-- @SiteTitle --></h1> <h2><!-- @SiteSubTitle --></h2> </div> <div class="span-8 last"><!-- @SiteLogo --></div> </header> <div id="bread-crumb" class="span-24 last"> [ <!-- @BreadCrumbTrail: mode=links --> ] </div> <nav class="span-4"> <h3 class="header">Menu Principale</h3> <!-- @MainMenu --> </nav> <article class="span-10 append-1 prepend-1"> <h3 class="header"><!-- @PageTitle --></h3> <!-- @blockCNT --> </article> <aside class="span-8 last"><!-- @blockSD1 --></aside> <footer class="span-24 last"> <div id="footer1"><!-- @FooterLine1 --></div> <div id="footer2"><!-- @FooterLine2 --></div> <div id="credits"><!-- @Credits --></div> </footer> </body> ...
In questa lezione non ci occupiamo di spiegare il comportamento del framework BluePrint… rimandiamo qualunque documentazione a riguardo al sito ufficiale linkato a inizio lezione!
NOTA: Il tag BODY ha una classe (showgrid) commentata con un underscore. Rimuovendo tale underscore si abilita il debug di BluePrint visualizzando le colonne di layout nello sfondo della pagina.
Aggiungiamo nella HEAD del documento un semplice blocco di stile in linea per migliorare l'aspetto estetico della pagina:
... <style type="text/css"> header { overflow:auto; border-bottom:10px solid #ddd; margin-top:30px } header h1, header h2 { margin:0; font-size:1.2em } header h1 a, header h2 a { color:#444; text-decoration:none } header h1 { font-size:2.5em; margin-top: 20px } header img { border:none } #bread-crumb { margin-bottom:30px; text-align: right } #bread-crumb a { font-size:0.85em } nav ul { display:block; width: 150px; list-style:none; margin:0; padding:0 } nav ul li { position:relative; border-bottom:1px dotted #ddd; padding-left:10px } nav ul li ul { display: none; width:200px; position: absolute; top:5px;left:140px; background: #fff; border:1px dotted #ccc; -webkit-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888; padding:0 1em } nav a { text-decoration:none; line-height: 3em } h3.header { border-bottom: 1px dotted #ddd; padding-bottom:5px; } footer { text-align:center; border-top:10px solid #ddd; padding-top:20px; margin-top:10px; font-size:0.9em; } #credits { margin:30px 0; } </style> ...
Ed in fine un semplice script jQuery che faccia funzionare il menu a tendina laterale.
Anche questo codice trova posto nell'HEAD del documento:
... <script type="text/javascript" language="javascript"> $(document).ready(function(){ // MainMenu $('nav').find('ul>li').hover( function() { $(this).find('>ul').fadeIn() }, function() { $(this).find('>ul').fadeOut() } ); }); </script> ...
Scarica il tema creato in questa lezione!
mio_tema_03b.zip