| Allegato | Dimensione |
|---|---|
 Screenshot-1.png | 622.24 KB |
La SKIN è una sorta di immagine di background cliccabile (lo sfondo del browser), nonchè prodotto di advertising abbastanza richiesto. La sua implementazione nonostante sia semplice non è però molto versatile e portabile.
Ecco come ho cercato di rendere questo servizio un'implementazione riutilizzabile su Drupal.
page.tpl.php
<body<strong> id="page-background" </strong><?php print phptemplate_body_class($left, $right); ?> >
<!-- Leaderboard -->
<?php if ($headerboard): ?>
<div id="headerboard" >
<?php print $headerboard; ?>
</div>
<?php endif; ?>
<div id="pagewrapper">L'header è stato spostato all'esterno del corpo dei dei contenuti a largezza fissa, in modo da non avere limiti di larghezza (questo non influisce sulla collocazione dei blocchi a larghezza fissa, perchè questi saguiranno cmq il loro css e potranno essere centrato o collocati assolitamente ecc ecc). E' stato aggiundo un id nel body per poter gestire l'immagine di background (nel mio caso era già presente tale id e regolava da prima il colore di sfondo).
style.css - css del core thema
#pagewrapper {
margin:auto;
width: 980px;
background-color:#ffffff;
position: relative;
z-index: 10;
}
#bglink {
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}Nel pagewapper (vedi indicazioni per page.tpl.php, che è l'id del div che racchiude tutta l'area dei content a larghezza fissa e centrata nello schermo, sono state aggiunte le due righe evidenziate. position: relative e z-.index: 10 consentono di controllare la posizione e il livello del layer caratterizzato dall' id="pagewrapper". La necessità era che tutta l'area dei content fosse al di sopra dell'area di sfondo cliccabile, al fine di evitare che l'area cliccabile essendo un box che copre tutta l'area del browser ricoprisse anche l'area dei content.
L'are cliccabile viene definita dal #bglink che definisce le dimensioni di tutto il browser (height: 100%; weight: 100%), è un'area fixed in modo che non sia soggetta a scrolling, al più basso livello di laying.
template.php template.php del core thema.
// SKIN Sponsor
function skin_sponsor( $url_link, $bg_color, $image_url, $height ) {
$skinbox = '<style type="text/css"> #page-background { background:' . $bg_color . ' url(' . $image_url . ') no-repeat fixed center top; } </style>';
$skinbox .= '<a target="_blank" id="bglink" href="' . $url_link . '"></a>';
$skinbox .= '<div style="height: ' . $height . 'px"></div>';
return $skinbox;
}Questa funziona applica l'effettiva skin, utilizzando come parametri il link da raggiungere cliccando, il colore di sfondo, l'url dell'immagine da applicare come sfondo, e l'altezza che distanzia dall'alto l'area content (pagewrapper).
Qual' è l'utilizzo di questa funzione? Viene applicata una variazione temporanea al css in cui #page-background che regola lo sfondo del browser, inseriesce l'immagine ed il nuovo colore di sfondo.
successivamente viene creato il box cliccabile che copre tutta l'area del browser <a target="_blank" id="bglink" href="' . $url_link . '"></a> e dove viene inserita l'url di destinazione.
Infine viene distanziata dal bordo superiore del browser, l'area dei content, tramite un blocco div, definendo un'altezza specifica <div style="height: ' . $height . 'px"></div>
Questa funzione realizzata ai fini della portabilità e gestione del servizio, viene applicata all'interno di un blocco creato e definito dalla pagina dei blocchi di drupal.
Aggiungete un nuovo blocco, inserite al suo interno
<?php print skin_sponsor( '<a href="http://dominio.estenzione'" rel="nofollow">http://dominio.estenzione'</a>, '#321AC', 'http://dominio1.estensione1/path/immagine.jpg', 100) ?>
Ricordatevi di impostare il formati di input php.. e salvate il blocco.
A questo punto, tutte le vote che vendere il servizio ai vostri clienti, basta aprire il blocco creato, inserire i parametri corretti da passare alla funzione, salvare, collocare il blocco nell'header avendo l'accortezza di rimuovere qualsiasi altro blocco li presente (per un migliore risultato stilistico) e salvare.
Il risultato è quello che vedete in allegato.
Cortesemente, indicatemi i punti deboli così da poterli migliorare oppure ditemi se c'è qualche soluzione migliore da poter analizzare e quant'altro vi venga in mente per un migliore risultato.
che sito XD!!! ti fa venire voglia di cucinare e mangiare.
Una cosa che ho notato, la notai pure un paio di settimane fa su un sito americano fatto con drupal e sul tuo sito è presente questa cosa, in pratica su ogni parola linkata quando ci passi sopra con il mouse si apre una piccola finestra pubblicitaria, mi chiedevo ma con che modulo si ottiene quell' effetto?
Con nessun modulo! Si tratta di un servizio fornito da un'azienda specifica di Contextual Advertising ed è gestito tramite una funzione in template.php del tema core, appositamente creata, richiamata in un blocco appositamente creato e collocato in fondo al sito, due specifici tag in node.tpl.php .
In ogni caso, per discutere questa cosa, apri una discussione apposita.
http://www.sanisapori.eu
ah ho capito, e non hai un link dove indirizzarmi cosi mi informo meglio :O
In ogni finestrella che apri, c'è un punto interrogativo.... <?> ...clicca sul punto interrogativo...e ti porta al sito del fornitore del servizio.
http://www.sanisapori.eu
ho capito, e li su quel sito mi spiega come implementare il loro servizio ecc?
jscm ritornando alla pagina che hai linkato, come modulo in fondo ai post è service link 1.0?
I moduli sono Service Link 2.0 + ShareThis. Nelle nuove versioni i moduli sono legati l'uno all'altro, il che non è affatto male. Anzi, non è nemmeno necessario crearsi un account su sharethis.
http://www.sanisapori.eu
Vedo che nessuno è motlo interessato all'implementazione delle SKIN come prodotto commerciale!...
... in questa discussione si parla di cose altro tipo :-|
http://www.sanisapori.eu
e che tu hai sbagliato la foto, dovevi mettere una freccia sulla foto per vedere di cosa trattva il post, io sinceramente non ho capito che skin è
C'è scritto cos è.
http://www.sanisapori.eu
ciao, ho scaricato firefox e l ho installato perche con internet explorer 6 non faceva assolutamente niente, ma anche con l'ultima versione di firefox la home page e il sito in generale è uguale a come me lo visualizza internet explorer. Se ho ben capito dovrei cliccare sullo sfondo (quella enorme immagine di sfondo dove sono visualizzati 3 persone) ci clicco e non mi cambia la skin del browser, ho cliccato sul logo e non fa ho cliccato sulla pubblicita' e non fa lo stesso, mi dici come si attiva questa skin? :D Eppure dovrebbe essere come a quanto succede con le skin che si trovano sul sito di firefox, che tu ci clicchi e cambia la skin del browser.
<flame>Richiesto dagli sponsor ovviamente, non dagli utenti...
Così mi pare un sito di PUBBLICITA' con contenuto. Adesso manca solo un 'Sponsored by' nel nodo, ed i blocchi ancora non pubblicitarie... Ogni pixel quadrato deve rendere...
</flame>Riprendo con l'idea. Viene spesso usato per temi di blog (quelli con tanti fiorellini per intenderci). Solo che il fondo non è cliccabile. Ci sono qualche problema tecnica nella tua implementazione. Prima non puoi mettere un elemento
<style>nel<body>, ma solo nel<head>. Secondo, credo che quando scrolli la pagina, la parte dello Skin sopra #pagewrapper viene coperto dal 'contenuto', mentre immagino che vuoi - o che lo sponsor vuole - che sia sempre presente (come sono i bordi a sx e dx del 'contenuto' #pagewrapper)Poi stai usando un blocco semplicemente per cambiare gli parametri dello skin. Poco tempo fa Kiuz ha descritto come creare un form per impostare dei parametri di un modulo. Questo mi pare più semplice.
Invece di usare z-index più grande per #pagewrapper, usa valori negativi per #page-background - se no avrai problemi con menù dinamici tipo suckerfish, che pretendono che il fondo ha un z-index di 0. Vedi http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex
Perchè un id per
<body>? Dopo tutto ci dev'essere uno solo nel documento...Infine non ho capito perchè metti l'immagine come sfondo con un anchor sopra. Non è più facile mettere l'immagine dentro l'anchor? Puoi sempre allinearlo in centro con
margin: autootext-align: center.Poi mi sono perso cercando di capire la struttura finale, credo che sia così:
<body id="page-background"><div id="headerboard" >
// Qui c'è il blocco
<style type="text/css">...</style> // mal-formed (X)HTML <style> solo in <head>
<a target="_blank" id="bglink" href="' . $url_link . '"></a>
<div style="height: 100px"></div>
// fine blocco
</div>
<div id="pagewrapper"> ...</div>
Se ho capito bene, la
<div>senza id, viene usato come distanziatore - allora cosa servediv#headerboard? Non bastava unstyle="margin-top:100px;"neldiv#pagewrapper?Comunque se funziona - funziona. Ma funziona in IE6/7/8? Ho sentito voce contrario: http://www.quirksmode.org/css/position.html, http://tagsoup.com/cookbook/css/fixed/
John
Più imparo, più dubito.
era meglio se metteva una freccia sulla foto e spiegava per bene cosa sia questo skin advertsing, mas forse non ho capito perchè chissa' che browser usa per visualizzarlo
Rifai il post :D
comunque il sito e bello e piace a mamma XDXDXD
VOTO 7.5!!!!!!
Un humour quasi britannico...
Prova con Opera o Chromium. A me è cambiato lo skin di Office (versione 2007) - e sto usando Linux! ;-)
Esaggerato - come al solito ;-)
@jscm scusateci, ma bisogna pura mollare il deo mammon ogni tanto in tanto. Ho notato che hai messo
float:leftper gli immagini nel contenuto (almeno sul sotto dominio sanisapori). Ed hai anche già messo in produzione questo skin, con i problemi che io ho ipotezzato...Una soluzione c'è, ovviamente...
John
Più imparo, più dubito.
Dunque, ci sono un casino di domande a cui rispondere :-| ...ehm...
una cosa alla volta.
Prima risposta, se non ci fosse la pubblicità o una concessionaria di pubblicità apposita, non ci sarebbe nessuno di questi siti web che crescono in continuazione. Quindi o lavori con i centri media e vendi lavorando professionalmente ...oppure è solo un passa tempo.
Abbiamo anche il prodotto pubblicitario definito "Sponsored by" seguito dal BRAND :D ---ehehhe! ... e si vende bene. Non si trova nei content, ma viene collocato nell'header al posto del leaderboard di pubblicità, nel periodo contrattualizzato.
I problemi tra i browser ci sono sempre.
Questa implementazione è un adattamento che ho ripreso (tramite firebug) da un sito di un mio vecchio partner e collaboratore che in questi giorni aveva una skin. Ho dovuto però riadattare un pò di cose per avere la versatilità legata all'abilitazione ed alla disabilitazione di un blocco. Per quanto riguarda il form in realtà non ho ancora idea di come realizzarlo, così come non ho ancora idea di come fare a realizzare moduli per drupal. Il problema è sempre quello... TEMPO che NON basta MAI, quindi ci si dedica alle cose fondamentali purchè funzionino, cercando di migliorare il tutto in futuro.
Per quanto riguarda i browser direi che fuzniona benissimo con firefox, chromium, epiphany, ie7 e ie8 (ie6 non mi interessa, mi ha sempre dato un casino di problemi, ie7 ogni tanto da qualche problema soprattutto le vecchie release, ie8 avuto pochissimi problemi). Su ie8 e windows ho scovato un'altro tipo di problema che non avevo affatto previsto relativo al nuovo tema.
Per quanto riguarda lo scrolling che ricopre tutta la parte in alto, ne sono consapevole, ma l'ho lasciato così xkè così era sul sito che ho utilizzato come modello per l'implementazione della skin.
http://www.sanisapori.eu
Attenzione alle "law of diminishing returns" - scusa non so come si chiama in italiano. Non credo che puoi 'saturare' un sito di pubblicità così senza conseguenze (negativi)...
Ovviamante il mio è solo un opinione da 'profano' - forse sono troppo sensibile al pubblicità invasivo...
L'esempio che mi viene in mente e jeff Atwood/Joel Spolsky e StackOverflow, ServerFault, e SuperUser (oltre a Google search). C'è, ma puoi mentalmente filtrarlo via...
Hai avuto il buon gusto (e merito) di documentare questo processo. Solo chi non fa niente non sbaglia mai... (Anche se cerco di fare il minimo indispensabile)
John
Più imparo, più dubito.
Ho iniziato col modificare i parametri z-index
Collocando #pagewrapper con uno z-index = 0 mentre #bglink (lo sfondo cliccabile) con z-index = -10px.
Il risultato è che il contenuto di #pagewrapper funziona benissimo, mentre lo sfondo non è + cliccabile e non capisco bene xkè.
http://www.sanisapori.eu
-10px?
http://www.w3.org/TR/CSS2/visuren.html#z-index (Value:
auto | <integer> | inherit). Forse volevi direz-index: -10;Più imparo, più dubito.
esattamente z-index = -10
ma non va!
Forse mi manca qualcosa o forse devo spostare alcune cose.
http://www.sanisapori.eu
per quanto riguarda il float: left o right per le immagini all'interno dei signoli contenuti... succede che ckeditor applica questa forma tutte le volte che imposti a destra o sinistra un'immagine. fckeditor mi sembra che non la usasse.
http://www.sanisapori.eu
Scusate se sono lento a capire :D ma forse con 24 ore di ritardo rispetto alla mediia ho capito hahaha
forse eh....
questa skin in pratica è il blocco della pubblicita' che si trova sopra al link
(accedi/registrati) + (strumento cerca) con sfondo della regione giallo?
Se non è quello indicatemi dove devo anadare, se piu' in su o piu in giu XD
Se tu perdi più tempo a scrivere correttamente, io perdo meno tempo a cercare di dare una risposta...
Si. Forse questo aiuta: http://www.w3.org/TR/CSS2/zindex.html
Tu hai ( o vuoi):
| | | || | | |
Canvas #page-bgnd #bglink #pagewrapper
Hai spostato #bglink dietro #pagewrapper ma sotto #page-background. Setta #page-background z-index < #bglink z-index.
No. L'avevi azzeccato prima - sono le tre persone all'esterno della pagina centrale. Il termine 'skin' qui viene usato non tecnicamente (come skin di un applicativo) ma 'giornalisticamente' o 'pubblicitariamente', cioè quello che vogliano che significa ;-)
Più imparo, più dubito.
ah... mo ho capito, quindi quel background li delle 3 persone e una pubblicita', ecco perchè non c azzeccava assolutamente niente con il sito e con i temi trattati dal sito, comunque a mio avviso non e bello (leccare il c**) a chi vi impone una pubblicita' invasiva che cambia totalmente la grafica e lo stile del sito, io sinceramente in 24 ore ho pensato, ma perchè quei 3 segretari li sullo sfondo su un sito di cucina bah, fa perdere la vera identita' del tutto u.u, e comunque se vuoi fare soldi con i siti ce ne sono di metodi migliori piu validi e che non ti danno limitazioni, sembra come avviene per le band musicali, ti fanno suonare solo se fai le cover (cioe' canzoni di cantanti famosi) lo stesso e qua ti impongono di mettere lo sfondo o il logo di un sito maggiore o piu famoso e tu devi far vedere a tutti il loro sito, ma un po di palle e di mandarli a fanculo ste persone non ce le avete dico io?
Ma il #page-background corrisponde al body. Cioè body#page-background. Impostare z-index negativo proprio nel body, non potrebbe generare dei problemini? Cmq.. faccio un test.
mi spieghi meglio questa parte?!
Non mi è chiaro cosa ti riferisci in termini di anchor .. in questo caso.
http://www.sanisapori.eu
La vita è pieno di problemini...
Del tipo?
<body>è un box come tutti gli altri...Allora anchor ==
<a href/name>...</a>. Ho la tendenza di parlare di descriptive lists, unordered lists, anchors, images, divisions, paragraphs -<dl>, <ul>, <a>, <img>, <div>, <p>rispettivamente.Io sono più abiltuato a vedere un situazione così:
<a href="..."><img src="..." /></a>mentre tu hai usato un'immagine in background, con una specie di lastre trasparente sopra. Simile a Lightbox per bloccare i link (anchors) et al nella pagina sottostante.
Tutt'oggi metto la combinazione
<a><img /></a>su una riga solo, senza spazi bianchi per il vecchio problema del "blue line" di Netscape. Sembra che tecnicamente ci sia ancora: http://catcode.com/linkguide/clickimage.htmlComunque, come dicono gli americani "whatever floats your boat" (definizione #1)...
John
Più imparo, più dubito.
Comunque ritornando alla bonta' del sito XD mi chiedevo che tema base hai usato?
In merito alla questione dell'anchor ed anche alla questione che riguardava l'utilizzo
<style></style>all'interno del body, facendo dei test, è venuto fuori che collocando l'immagine di background in questo modo, ovviamente all'interno di body#page-wrapper,<a href="url di destinazione" id="bglink"><img src="immagine" /></a>riscontro un problema che non riesco a risolvere, cioè quello di centrare orizzontalmente l'immagine di sfondo, "text-align: center" non ha effetto. Solo questo problema, perchè per il resto funziona benissimo.
Invece, molto facilmente, scrivendo il codice come segue il problema si risolve:
function jarvis_skin_sponsor( $url_link, $bg_color, $image_url, $height ) {$skinbox .= '<a target="_blank" id="bglink" style="background:' . $bg_color . ' url(' . $image_url . ') no-repeat fixed center top;" href="' . $url_link . '"></a>';
$skinbox .= '<div style="height: ' . $height . 'px"></div>';
return $skinbox;
}
cioè così (scrivendo in maniera semplificata):
<a href="url destinazione" id=bglink style="background #colore url(url immagine) no-repeat fixed center top;"></a>Porre l'immagine di background in questo modo, consente di non inserire
<style></style>all'interno del body.Per quanto riguarda i Layer ho corretto in questo modo:
body#page-background ho settato z-index: -10
div#pagewrapper ho settato z-indez: 0
In mezzo tra i 2 c'è #bglink, qui non ho settato alcun z-idex quindi prevedo che abbia ereditato l'impostazione del body#page-background.
Devo però dire che anche se evito di impostare z-index la pagina funziona correttamente perchè in #pagewrapper è impostato position: relative
Non so se sono stato chiaro, spero di si, in caso chiedimi pure delle delucidazioni.
In ogni caso funziona, così come funzionava prima.
http://www.sanisapori.eu
Allineare immagini...
Puoi usare
text-align: center;non su<img>ovviamente perchè è del tipodisplay: inline- ma su suo contenitore, probabilmente un<div>o<p>ma anche il<body>.Di solito, come avevo detto, si usa la tecnica del margin: auto:
#bglink {display: block;
margin-left: auto;
margin-right: auto;
}
Vedi http://webdesign.about.com/od/beginningcss/a/aa012207.htm
Questo solo come spiegazione anche ad altri. Se il tuo metodo funziona - allora funziona.
No per il primo, e no per il secondo osservazione.
1. La proprietà z-index non viene ereditato. Rimetto il link di prima, perchè non mi sembra che l'hai letto bene: http://www.w3.org/TR/CSS2/visuren.html#z-index - resta il valore di default
autoper quel contesto di impilamento (stacking context).2. #pagewrapper sta d'avanti a #bglink perchè più avanti nel documento - per essere preciso più avanti del genitore di #bglink (#headerboard). Citando il link "Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order."
Il come del processo (l'altro link che ti avevo dato) è spiegato bene qui: http://www.w3.org/TR/CSS2/zindex.html
Puoi considerare le mie osservazioni permaloso, ma credo che oltre a fare funzionare qualcosa, è anche importante capire perchè funziona - potrebb'essere due errori che compensono ;-)
In questo modo non propulgiamo errori ad altri, e rendiamo il nostro codice più resiliente - contro i "brain dead" browsers...
Più imparo, più dubito.
Ok!.. allora, faccio un passo indietro, mi studio i link che hai indicato e poi riprovo.
http://www.sanisapori.eu
CIAO JSCM rivedendo il tuo sito, mi è venuto un dubbio, mi chiedevo ma i blocchi (Contenuti più visti di oggi) e (Contenuti più visti) sono fatti con VIEW ?
Penso proprio di si. Avrà una marea di tag e titoli duplicati, per cui è vero che Google non li penalizza.
Ciao.
Non ce nessun titolo e tag duplicato! Avere titoli e tag duplicati non serve.
Non capisco da dove è nata tale affermazione :-|. Semmai possono esserci titoli e tag simili, ma mai uguali e duplicati.
Per discutere di cose non affini a questa discussione, apritene di nuove... è più corretto e meno dispersivo.
http://www.sanisapori.eu
hey jsmc possibile che non hai letto il mio commento?, chiedevo ma i blocchi (Contenuti più visti di oggi) e (Contenuti più visti) sono fatti con VIEW ?
di si o no, tanto e si la risposta
Aprite una nuova discussione per qualsiasi altra domanda!... è più pratico e + efficace e i commenti diventano + diretti e mirati alla soluzione dei problemi. Qui si parla delle implementazioni delle SKIN e si cerca di risolvere quel problema specifico.
http://www.sanisapori.eu
hoy ciao jscm l' ho creato il post con le domande http://www.drupalitalia.org/node/10322
Ciao a tutti, volevo segnalarvi un metodo alternativo per creare uno sfondo cliccabile che non prevede l'inserimento di nessun codice html aggiuntivo. Solo un javascript in fondo alla pagina (si può richiamare al evento onload).
In questo post è spiegato bene il principio di funzionamento e si può scaricare lo script.
http://www.gustblabla.com/?p=9
Cosa ne pensate?
Molto interessante Squall22,
appena avrò tempo farò un test.
Domanda, funzionerà anche con il modulo Boost installato?
http://www.sanisapori.eu
Immagino proprio di si, visto che si aggiunge solo uno script statico nell'html... ma puó essere inserito anche in un js esterno.
in linea teorica funziona con qualsiasi cosa...