Come Creare un Intro Overlay in HTML

In questi giorni sono stato impegnato nello studio di un metodo facile e veloce per poter creare ed applicare un Overlay (intro) in una pagina web, tutto ciò senza dover utilizzare fogli di stile. La ricerca su internet devo dire che mi è stata poco d'aiuto, soprattutto vista la scarsa richiesta di simili soluzioni, dato che quasi tutti i più famosi CMS hanno già integrato questo sistema.

Personalmente la mia necessità è nata dalla voglia di provare una creatività così d'impatto per inserire dei banner pubblicitari, naturalmente questa è la soluzione più "naturale" ma le possibilità di utilizzo sono molteplici.

Di seguito il codice che ho creato e subito dopo qualche shoot per farne meglio capire il risultato finale:

(!) IMPORTANTE: il codice va inserito dopo </body>

<!-- Inizio codice Overlay by www.antoniocentorrino.com -->

<div style="position: absolute; width: 100%; height: 100%; z-index: 1; left:0px; top:0px; visibility:visible" id="livello1">

<SCRIPT type=text/javascript>
function fold2(theid) {
var theid=document.getElementById(theid);
theid.style.display=(theid.style.display=="none") ? "block" : "none";
}
</SCRIPT>

<DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 20px; MARGIN: 0px auto; WIDTH: 100%; height:100%">
<DIV id=player>
<DIV id=close-botton>



<table border="0" width="100%" height:"100%" cellpadding="0" style="border-collapse: collapse; background-image: url('http://www.blogblog.com/1kt/transparent/black50.png'); background-repeat: repeat" height="100%">
<tr>
<td>
<address style="text-align: center">



<!-- Inizio codice adv -->

<img src="http://www.felipesk.com/tanapraia/wp-content/mbp-banner/sweeps_banner_300x250_BACKUP_20091017082828.gif">

<!-- Fine codice adv -->

<span style="font-style: normal"><A onclick="fold2('close-botton');" href="javascript:;">
<img src="http://o.sitepen.com/talks/ajaxworldeast2007/images/slideCloseButton.png" border="0" align="top"></A></span></address>
</td>
</tr>
</table>
</div>

<!-- Fine codice Overlay by www.antoniocentorrino.com -->

Il codice credo sia di facile letture, per ogni delucidazione contattatemi pure.
Per chi volesse inserire codici Adsense ricordo che il regolamento di Google lo vieta.

Shoot Intro Overlay:


[clicca sulle immagini per ingrandire]

Per la creazione Overlay di altra forma o natura vi rimando a questo bellissimo sito (in questo caso è necessario utilizzare fogli di stile): http://flowplayer.org/tools/overlay/index.html

Leggi tutto...

Calabria Web 0.02 - Svegliamoci!

Qualche giorno fa, in un caldo ma nuvoloso sabato pomeriggio (lavorativo) di Luglio, a venire in mio soccorso per contrastare l'afa africana di Calabria, oltre al caro e vecchio condizionatore si è aggiunto un interessante webnary di Giorgio "Tave" Taverniti, dal titolo "Internet e Turismo in Calabria", che trae spunto iniziale da un articolo di Arturo Salerno (anche Lui calabrese) che mette a confronto il trend di ricerche effettuate su Google, con specifiche keywords "turistiche", mostrando così la minima presenza calabrese,

In poco meno di un'ora, Giorgio illustra in modo molto chiaro la situazione (disastrosa) della NOSTRA regione, rispetto a realtà che sfruttano in modo molto più produttivo le possibilità offerte dalla rete per la promozione del territorio.

Illustrando le possibili strategie adottabili per la creazione di un progetto web, Tave ipotizza la creazione e le promozione on line di un ipotetico Albergo a tre stelle situato a Monasterace (RC), Sua città natale, luogo dove non ne risulta la presenza, anche se la Grande G dice il contrario: http://www.google.it/search?hl=it&q=Albergo+a+Monasterace+%28RC%29&aq=f&aqi=&aql=&oq=&gs_rfai= :) (Google bugiardo!)

La Slide che condivido di seguito dirà il resto, alla fine di questa mi sono permesso di "suggerire" qualche soluzione da aggiungere ;)

Internet e Turismo in Calabria

View more presentations from Giorgio Taverniti.

é chiaro che se la passione e la professionalità profuse in qualsiasi lavoro solo la base per poter aver successo, se il nostro "Albergato" (panettiere, macellaio, dentista, etc...) non offrisse la maggiore cura ed attenzione per la propria struttura, allora ogni tipo di promozione on e off line sarebbe vana.

Passiamo alle possibili soluzioni aggiuntive a quelle già egregiamente proposte da Giorgio Tave:

1. "Mostriamoci"
potrebbe essere un'ottima soluzione dedicare una pagina del sito alla trasmissione di una webcam live, puntata su una zona strategica della struttura stessa. Sulla spiaggia ad esempio o nella Zona Relax. Semplice gratuito e veloce programma per far ciò è Fwink.
La webcam oltre alla funzione "dimostrativa" (reale) del luogo dove potenzialmente il nostro utente trascorrerà il proprio soggiorno, avrà anche scopo promozionale. Basta cercare in rete, sono decine i siti che offrono l'opportunità di inserire la le immagini provenienti da webcam, eccone un esempio. E proprio le webcam di alberghi sono quelle più popolari si questi portali anche se non vanno sottuvalutate le potenzialità dei vari siti dedicati al Meteo.

2. Assistenza Diretta Online
tante volte l'utente potrebbe aver bisogno di un'assistenza veloce e senza tanti fronzoli, sono ben note le categoria di "nati stanchi" che non pensano nemmeno lontanamente di compilare un form di richiesta info, tantomeno di provare a chiamare con Skype (dove disponibile). Una soluzione aggiuntiva, per completare (forse) tutte le alternative necessarie per il possibile cliente, potrebbe essere l'ausilio di una Live Chat come quella fornita gratuitamente da www.olark.com.

3. Assistenza Diretta Offline
Utilizzare più operatori telefonici mobili (Vodafone, TIM, 3, Wind) sarebbe un incentivo per far si che l'utente, potenzialmente provvisto di promozione speciale (che limita o azzera le spese telefoniche), si rivolga a "Noi" senza pensarci troppo su.
Va comunque segnalata, anche se a pagamento, la possibilità di abilitare un Numero Verde (costo meglio € 150,00 + iva), che il più delle volte risulta essere il "mezzo offline" più utilizzato.

Chiaro è che l'argomento web mi ha sempre toccato, è bastato affiancarlo alla Mia (nostra, vostra) disastrata regione per far si che il tutto diventasse un "Fatto personale" :)

Vi aspetto in Calabria!

Leggi tutto...

Adv-Preloader: Spot d'intrattenimento

L’Adv-Preloader, così da me ribattezzato, non è altro che un banner o un insieme di link che viene affiancato alla classica icona “Caricamento in corso…” nelle pagine web che richiedono lunghi tempi per il completamento. Lo scopo principale di questo elemento è quello di “intrattenitore”, consigliando la visione di creatività proposte dall’affiliazione evitando di perdere utenza, utilizzando una spazio altrimenti “nullo”.

Gioca un ruolo importante la pazienza dell’utente interessato ai contenuti della pagina che sta per visualizzare. La presenza dell’ L’Adv-Preloader risulta molto meno invasiva dei vari popup che spuntano dopo il caricamento e che si frappongono tra l’utente e la pagina principale, spesso infastidendolo. In più logicamente viene inibito il blocco popup del browser garantendone la certa visualizzazione dell’Adv-Preloader.

Di seguito due diversi esempi di L’Adv-Preloader entrambi utilizzati da due tra i più visitati siti di web-chatting al mondo (milioni di visite quotidiane).



In questo caso il caricamento è riferito a dei player dove il buffering a volte richiede decine di secondi prima di poter visualizzare le immagini, ma la stesse “strategia” può essere applicata a qualsiasi servizio proposto.

NB. L’affiliazione utilizzata è sempre Google Adsense.

Questo il codice tipo dell'Adv-Preloader:

<div id="loading" style="padding:0; position: absolute; left: 99px; top: 1px; width:259px; height:32px">
<div align="center">
<table border="0" width="308" style="border-style:solid; border-collapse: collapse" cellpadding="0">
<tr>
<td align="center">
<address>
<img src="http://www.histats.com/images/loading1.gif" align="middle" border="0">
<b><font face="Arial" style="font-size: 12pt">Loading...</font></b></address>
</td>
</tr>
<tr>
<td align="center">
<p>
INSERISCI QUI IL TUO CODICE ADV</td>
</tr>
</table>
</div>

(!) width:259px; height:32px nella seconda righa è la posizione in cui si collocherà il banner, preferibilmente di 300x250px.

Leggi tutto...

Mail da un "fan" :)

Pubblico una mail ricevuta oggi da un mio fan :), non so perchè ma questa ha un "sapore" diversa da tutte le altre, forse perchè mi viene chiesto un suggerimento che a mio parere è molto importante oppure perchè leggendola mi sono rivisto, come ero qualche anno fa, quando le aspirazioni e i sogni erano tanti la la voglia di affrontarli ancora più forte di quella di adesso.

Il giorno 11 luglio 2010 15.46
Modulo proveniente dal sito


Nome: *********
Email: ******@****.**
Oggetto:
Url_tuo_sito: http://*********.*********.com/gallery/
contenuto: Ciao Antonio !!! oggi navigando in rete ho trovato il tuo blog, complimenti nnt male ^^ !!! ci le sn info davvero interessanti !!! Ho letto che studi architettura ! dove studi ??? te lo chiedo perke mi manca 1 anno per finire la scuola e dopo (grazie alla mia passione per la grafica^^) vorrei fare l\'architettura ma ancora sn un po indeciso perciò vorrei parlare prima con una persona che se ne intende ^^ !!! se ti va dai un\'occhiata alla mia gallery, ci sn solo disegni vecchi, ora devo caricare un paio di lavori fatti di recente !!! byebye


Modulo compilato il 11/07/10 alle ore 15:46:13 dall'IP 87.18.109.66


---


Ciao,

ti ringrazio per i complimenti e li ricambio visto che mi sembri davvero brevissimo, ho visto le tue "opere" è devo dire che mi piacciono tantissimo.

Logicamente non è mai facile indirizzare o consigliare qualcuno verso degli studi o altro, di sicuro la scelta migliore è quella dettata dalla passione. Quello che posso fare è raccontarti la mia esperienza:

Ho "preso" Architettura quasi per caso o meglio, per esclusione, qui a Reggio Calabria. A volte penso di aver iniziato la carriera universitaria solo perché non era facile trovare un lavoro ed un lavoro che ti gratificasse ancora di più.
La facoltà di architettura è forse quella più poliedrica, si spazia dalla grafica al design, dal disegno creativo a quello tecnico. I programmi che ti troverai ad utilizzare sono tanti e sono quelli che ti serviranno in moltissimi ambiti, parlo di Photoshop, Illustrator, AutoCAD, 3D Studio, etc.
Per quanto mi riguarda manca poco al traguardo o alla fine del tunnel e posso dire che tranne qualche "alto e basso" personale sono soddisfatto di quello che ho imparato in questi anni, che molto probabilmente hanno segnato in modo inesorabile la direzione della mia vita professionale e non solo.

Detto questo ti invito a guardarti attorno ma soprattutto a guardarti dentro la risposta arriverà senza molta fatica. :)

A presto.
Antonio

PS naturalmente ho occultato mail e nome per privacy ma posso assicurare che i lavori di questo ragazzo sono davvero spettacolari, supponendo che sia appena maggiorenne è già un buonissimo inizio. ;)

Leggi tutto...

Google Hard-Research...

Non voglio fare il Buon Samaritano, per curiosità e non solo mi è capitato, soprattutto in passato, di cercare su Google qualche immagine o video di "donnine nude", diciamo così...

Di sicuro non sono qui a parlare di morale, società, perversione, gusti sessuali, etc... ma volevo un po' mettere sotto torchio la "Grande G", anche se non è difficile dubitare che questo post non venga preso in considerazione dai ragazzi di Mountain View.

Fino a qualche anno fa, i genitori di quelli che adesso sono "esperti naviganti" temevano che bastasse collegarsi a qualsiasi sito (magari anche a quelli istituzionali) perché si potesse aprire qualche popup che proponesse immagini Per Adulti, ciò non era chiaramente possibile almeno che qualche virus si fosse intrufolato nel sistema. Come allora, anche adesso, se di internet si fa un uso corretto è molto difficile che si possa esser "invasi". Un po' come nella vita, se non si "passa della vie a luci rosse" è difficile che tornando a casa la moglie ci becchi con il colletto della camicia macchiato di rossetto... o addirittura che qualche nostra "amica" ci mandi un sms.

Con due semplice esempi, che sono palesemente indicativi, vorrei dimostrare come ancora oggi Google possa indicizzare immagini "hot", addirittura in prima pagina e prima fila, che non sono assolutamente inerenti alla chiave di ricerca indicata, ma soprattutto che il risultato possa proporre immagini esplicitamente pornografiche.

Pochi mesi fa nella Ricerca per Immagini scrivendo "Mondo" come risultato ci saremmo ritrovati in "prima fila" il dipinto di Gustave Courbet "L'origine del mondo", ho appena verificato che fortunatamente adesso non è più così, ma quello che mi ha fatto ritornare la "paura" è stato il risultato proposto scrivendo la Keyword "Catena", lascio giudicare voi. Cosa peggiore è che la "catena umana" viene visualizzati anche se la ricerca fosse solo riservata al web.

Prima ho scritto PAURA, logicamente non sono certe immagini a speventarmi, anzi, essendo "mascietto" potrei anche esserne compiaciuto, ma la mia preoccupazione ricade sulla reazione dei tanti bambini che potrebbero essere scossi da certe ostentazioni pur cercando immagini "pulite".

Non starò di certo con le mani in mano (non fate facili battute eh!), sto già cercando di segnalare in modo corretto e proficuo questo "disservizio". In ogni caso è assuluta responsabilità di chi ha così tanto potere in rete, appunto Google, sorvegliare a garantire la sicurezza da ogni punto di vista, a chiunque faccia utilizzo dei propri servizi.

Leggi tutto...

Come creare ed "applicare" velocemente una favicon

Per la serie <I particolari sono importanti> voglio illustrarvi un metodo pratico e veloce per creare ed applicare una FavIcon. Di cosa si tratta? Non è altro che quella piccola immagine che si trova nella barra degl'indirizzi, proprio prima dell'url. La parola deriva dalla contrazione della parole inglesi Favorite + Icon, infatti spesso è possibile apprezzarne una serie di queste proprio nella barra dei favoriti :)

Il primo passo da effettuare è la scelta di un'immagine che diventerà poi la nostra favicon, solitamente un logo o qualcosa di inerente al tema trattato. Le dimensioni di questa (come per tante altre cose nella vita) non sono importanti ma sarebbe bene che la forma fosse quadrata. Utilizziamo il formato .PNG se vogliamo che lo sfondo risulti trasparente.

Collegandosi su Dynamic Drive- FavIcon Generator basterà solo selezionare l'immagine scelta e decidere la grandezza cui vorremmo fosse generata la nostra favicon, 32x32 o 48x48, consiglio la prima opzione, non fosse altro che per la maggiore compatibilità con i browser. Cliccando si Create Icon la magia si realizza, qualche secondo e poi basterà solo scaricare da Download FavIcon.

L'icona creata dovrà essere caricata sull'FTP del nostro sito nella cartalla root (quella principale possibilmente), dove è presente la index.

Adesso potremmo agire sul codice del sito per inserire il codine necessario che richiami la Favicon. Aprendo il file con un editor HTML, andremo ad incollare questo codice:

<link rel="shortcut icon" href="/favicon.ico" />

tra

<head> e </head>

Il gioco è fatto!


Adesso anche noi avremo la nostra icona preferita :)

Leggi tutto...