Crea sito

Insel der Engel'

Il mio piccolo pezzo di Paradiso

 
Tag: Tips & Tricks

Search engine con 2 parametri in Opera

Questo articolo è basato sull’originale “How to create search engine with two parameters in Opera?” scritto da Tamil e disponibile in lingua inglese sul suo blog.

Ed inauguro finalmente anche questa rubrica dedicata a tutorials e tips & tricks vari per Opera e, forse, in futuro, anche per altri browser.

Per la maggior parte in realtà si tratterà solo di semplici traduzioni di originali articoli inglesi, ma, vista la pressochè totale mancanza di materiale italiano per Opera, credo se ne senta comunque il bisogno.

Argomento di oggi è per l’appunto “Come creare in Opera un search engine che ci permetta di utilizzare 2 parametri”.

La cosa può risultare piuttosto utile in svariate occasioni in cui sia necessario raffinare le opzioni di ricerca o in tutti quei casi in cui l’uso di parametri aggiuntivi sia addirittura obbligatorio. In rete esistono già diverse guide (mai sperimentate personalmente) per realizzare la cosa con Firefox, quindi non mi sono preoccupato per adesso di adattare il tutto anche al browser open source. Se siete interessati basta fare una ricerca su Google. 😉

Ma andiamo alla procedura da seguire.

Per prima cosa effettuate una ricerca sul search engine in questione usando per l’appunto i due parametri di vostro interesse (la parola cercata ed una opzione) ed annotate la stringa visualizzata nella barra degli indirizzi. Vedrete che in essa ci saranno in chiaro i due parametri usati. Quello che dovrete fare è sostituirli con s1[0] e s2 (attenzione a sostituire SOLO questi, lasciando eventuali apici e altri caratteri al loro posto).

Quindi andate su Strumenti > Preferenze… > Ricerche e cliccate il tasto Aggiungi…

Se non sapete come muovervi nella schermata che apparirà sappiate solo che per il vostro search engine dovrete obbligatoriamente compilare, oltre all’indirizzo, i campi Nome (c’è bisogno di spiegazioni?) e Chiave (qualsiasi keyword vogliate, per esempio usate gi per Google Immagini). Per il resto lasciate tutto com’è.

Andando al campo Indirizzo dovrete poi incollare il seguente codice:

javascript:var s='%s';var p=s.indexOf('+');if(p>-1){var s1=s.split('+');var s2=s.slice(p+1)};window.location.href='[Mia Ricerca];

Avendo premura di sostituire [Mia Ricerca] con la stringa che avete annotato (e modificato) precedentemente. Ecco l’esempio per Google Immagini:

javascript:var s='%s';var p=s.indexOf('+');if(p>-1){var s1=s.split('+');var s2=s.slice(p+1)};window.location.href='http://images.google.com/images?imgtype='+s1[0]+'&q='+s2;

A questo punto il vostro search engine è pronto e potrete usarlo indifferentemente dal search box o dalla barra degli indirizzi (preceduto dalla Chiave appropriata).

Il procedimento esposto però ha il problema che i due parametri non possono essere composti da più di una parola. Per quanto riguarda l’opzione questo ha poca importanza visto che (almeno in genere) non sarà mai composta da più parole. Ma se s2 dovrà contenere più di una parola, allora dovrete usare questo codice a posto del precedente:

javascript:var s='%s';var p=s.indexOf('.');if(p>-1){var s1=s.split('.');var s2=s.slice(p+1)};window.location.href='http://images.google.com/images?imgtype='+s1[0]+'&q='+s2;

Con lo svantaggio di dover sostituire durante le vostre ricerche gli spazi con dei punti.

E con questo si chiude il primo tutorial su Opera. Sperando possa essere utile a qualcuno vi do appuntamento alla prossima puntata. 😉

Filmati Flash in background con i CSS

Ed iniziamo con questo articolo una serie di guide e di tips & tricks per eventuali webmasters alle prime armi che passassero da queste parti. Onestamente non so bene neanche io come (e se) si svilupperà la cosa. Ma come sempre l’importante è iniziare no?

L’idea mi è venuta grazie ad una domanda posta da un utente sul forum di MegaLab.it. Vedendo come operazioni apparentemente molto semplici possano sembrare dei problemi insormontabili ad un neofita mi ha spinto a cominciare questa nuova “rubrica”.

Ed adesso andiamo al tema di oggi: “Come creare in modo semplice e veloce una pagina web in cui un filmato flash farà da cornice alla nostra pagina vera e propria”.

Il trucchetto si rivela utile soprattutto per chi il Flash non lo conosce proprio al meglio, visto che la soluzione migliore sarebbe sviluppare tutto direttamente con questo programma sfruttandone le pressochè illimitate possibilità.

Per realizzare il nostro progetto ci limiteremo dunque al solo uso di codice (x)HTML e CSS e, in particolare, alle specifiche XHTML 1.0 Strict e CSS 2.1 così da garantire un’ottima compatibilità cross-browser e cross-platform (nonostante quell’ XHTML 1.0 Strict possa far pensare diversamente qualche profano 😉 ).

Per ottenere l’effetto desiderato, ovvero avere due livelli sovrapposti in vario modo esattamente come siamo abituati a vedere in programmi di grafica come Photoshop, la specifica CSS2 infatti ci mette a disposizione la proprietà z-index.

Tutto quello che dobbiamo fare è quindi creare due box posizionati assolutamente ed ai quali attribuire dei valori diversi per lo z-index (maggiore per quello che deve essere visualizzato sopra). Tuttavia questo non è ancora sufficiente in quanto limitandovi ad inserire il vostro file .swf tramite il codice standard (in genere fornito dalla routine di esportazione stessa) noterete che invece di fare da sfondo al livello superiore verrà visualizzato in primo piano coprendo la vostra pagina.

Questo comportamento, apparentemente inspiegabile, è in realtà normale in quanto, affinchè il plugin flash del vostro browser posizioni e visualizzi il filmato nel modo desiderato, è necessario che aggiungiate al codice fornito per il suo inserimento (ammesso che si tratti di codice XHTML valido) la seguente stringa:

<param name="wmode" value="transparent">

ottenendo quindi un codice di questo tipo:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="movie.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="movie.swf" wmode="transparent"></embed></object>

A questo punto avrete ottenuto l’effetto desiderato senza dovervi scervellare a gestire il tutto tramite il ben più complicato Flash. Comodo no? 😉

Ed ecco infine il codice completo di una pagina di esempio in cui un filmato preso da YouTube farà da sfondo al testo:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="it-IT">
<head>
<title>Test1 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
#box1 { background: #ffffff; width: 450px; position: absolute; top: 120px; left: 30px; z-index: 1; }
#box2 { background: #f3f3f3; width: 300px; position: absolute; top: 160px; left: 90px; z-index: 2; }
-->
</style></head>
<body>
<div id="box1">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/dZWl-SOC5jQ" /><embed type="application/x-shockwave-flash" width="100" height="100" src="http://www.youtube.com/v/dZWl-SOC5jQ" wmode="transparent"></embed></object></div>
<div id="box2">Come volevasi dimostrare questo testo viene visualizzato sopra il filmato</div>
</body>
</html>