How I did it: come creare uno sticker-ribbon in 3 passi

Martedì 2 Dicembre, 2008

Gli sticker (o ribbon) sono quelle immagini che vengono posizionate in alto a destra, o in alto a sinistra, ed hanno comunemente una forma angolare a fascia. Ne esistono di vari tipi, dalle semplici immagini statiche ai più spettacolari filmati Flash. A volte sono costruiti in modo tale da rimanere nella loro posizione anche quando scorriamo il contenuto della finestra del browser.
Se non volete affidarvi a servizi come QuickRibbon.com, ma volete costruire un ribbon tutto vostro, ecco 3 semplice passi da seguire.

1. Creiamo l'immagine

Prima di tutto creiamo l'immagine che vogliamo posizionare in uno degli angoli destro o sinistro. L'immagine qui sotto, di 163x163 pixel, ecostruita per l'angolo superiore sinistro.

Sticker Ribbon

Per rendere l'effetto di sovrapposizione completo bisogna scegliere, al momento del salvataggio, un formato che supporti la trasparenza, come il GIF o il PNG.

2. Il codice HTML

Salvata la nostra immagine possiamo inserirla nella nostra pagina, avvolgendo il tag img con un div contenitore, che useremo puoi per posizionare l'immagine nell'angolo:

PLAIN TEXT
HTML:
  1. <div class="ribbon"><img src="ribbon.gif" title="Ribbon Test" width="163" height="163" border="0"></div>

Se il nostro sticker deve possedere un link, possiamo avvalerci del tag map per definire un'area sensibile che non sia rettangolare. Lo sticker presentato in questo esempio, infatti, hai una forma obliqua e la trasparenza ne evidenzia perfettamente i contorni. Sarebbe quindi sconveniente permette di cliccare su un'area vuota aggiungendo semplicemente un tag a introno all'immagine. Usiamo allora questa sintassi:

PLAIN TEXT
HTML:
  1. <div class="ribbon"><img src="ribbon.gif" title="Ribbon Test" width="163" height="163" border="0" usemap="#ribbonlink"></div>
  2. <map name="ribbonlink"><area shape="poly" coords="163,0,0,163,0,129,129,0" href="http://undolog.com"></map>

L'attributo coords del tag area definisce le coordinate del nostro ribbon.

3. il codice CSS

Aggiungiamo adesso le definizioni degli stili che permetteranno al nostro sticker di posizionarsi sulla pagina in modo corretto:

PLAIN TEXT
CSS:
  1. div.ribbon{
  2. position:absolute;
  3. top:0px;left:0px;
  4. height:163px;width:163px;
  5. margin:0;padding:0;
  6. overflow:visible;
  7. float:none;
  8. z-index:10000}
  9. div.ribbonimg{
  10. border:0;padding:0;margin:0;
  11. background-image:none}

Se vogliamo che il ribbon rimanga "appiccicato" al video, anche se scorriamo la finestra, basta modificare il tipo absolute dello stile position in fixed:

PLAIN TEXT
CSS:
  1. div.ribbon{
  2. position:fixed;
  3. top:0px;left:0px;
  4. height:163px;width:163px;
  5. margin:0;padding:0;
  6. overflow:visible;
  7. float:none;
  8. z-index:10000}

Nota: il tipo fixed, nello stile position, fino a poco tempo fa non era supportato da tutti i browser. Per rendere l'effetto, infatti, si era costretti ad usare una funzione Javascript che, ad intervalli regolari, controllava l'eventuale scorrimento del contenuto della finestra e riposizionava il ribbon in modo che desse l'impressione di rimanere sostanzialmente immobile. Fortunatamente, oggi, a parte qualche obsoleta versione di Explorer, tutti i browser supportano il tipo fixed.

Post correlati

Tags: , , , , ,
Pubblicato in CSS, Internet, Javascript, Sviluppo, Tutorials | Nessun commento »

Miglior Blog Tecnico Italiano: edizione 2008-2009

Giovedì 27 Novembre, 2008

image Ho avuto il piacere, se non l'onore, di esser stato chiamato a far parte della giuria di Miglior Blog Tecnico, un'iniziativa di Cristiano Fino e intenzionata a premiare, appunto, il miglior blog tecnico italiano. Come scritto da Wolly «nessun link a nessuno, nessun trucchetto per scalare classfiche, solo una sana competizione».
Leggete attentamente il regolamento del concorso e se il vostro blog ha le carte in regola registratelo, le iscrizioni saranno aperte dal 8 al 29 dicembre 2008! Se lo desiderate, potete contribuire alla divulgazione dell'iniziativa aggiungendo sul vostro blog uno dei badge che abbiamo creato per l'occasione.
La giuria di questo "concorso", per l'anno 2008-2009, è composta tra gli altri da:

e, ovviamente, da Cristiano Fino, in veste di presidente (che ringrazio per la fiducia accordatami). Colgo l'occasione per fare i complimenti a tutto il gruppo di Miglior Blog Tecnico, che è riuscito in brevissimo tempo, facendo le ore piccole, a concretizzare quella che era solo un'idea. Un'ottima, e forse rara, dimostrazione di un ben assortito gruppo di lavoro :D Merito del coach :D Spero solo di essere all'altezza, nell'insolita veste di giurato...

Post correlati

Tags: , , , , , , , , , , , , , , , , ,
Pubblicato in Eventi & Iniziative, Internet, Sviluppo, Tecnologia | 9 commenti »

Come sopportare IE6 e vivere felici

Mercoledì 26 Novembre, 2008

Trovo sempre un certo "malore" quando affronto l'argomento "compatibilità tra i browser". Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più "antipatico" rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.
Un Web Developer deve quindi organizzarsi in modo tale da avere a disposizione tutti gli strumenti per il controllo e la verifica del proprio (sudato) lavoro su tutti i possibili browser (e piattaforme) disponibili. Microsoft Internet Explorer, più degli altri, rende questo compito più arduo in quanto - ad oggi - è necessario verificare le proprie pagine web sia con la più recente versione 8 (ancora in beta) sia con le precedenti versioni, come la 6 o la 5.5. Esistono vari modi per far convivere versioni diverse di Explorer (vedi Usare Microsoft Internet Explorer 6 e 7 contemporaneamente) ed in alternativa esistono anche ottimi (anche se un po' lenti) servizi online.

image

Un'altra ottima possibilità, che funziona bene su Windows Vista, è rappresentata da IETester, un'applicazione completamente gratuita e realizzata dagli stessi sviluppatori di DebugBar e Companion.JS. IETester, nonostante sia ancora in beta e con qualche crash in agguato, permette rapidamente di verficare le nostre pagine - contemporaneamente - sia su IE5.5, IE6, IE7 e IE8 beta.

Patch CSS

Se grazie a IETester riusciamo a scovare un difetto negli stili, cioè un'interpretazione diversa tra IE6 e IE7, o IE6 e FireFox, ad esempio, trovata la soluzione dobbiamo far in modo che solo IE6 usi la nuova definizione. A me, ad esempio, è capitato con un margine! Avevo una classe che impostava il margine destro a 28px e, su tutti i browser, il risultato era identico, tranne che con IE6! Su quest'ultimo, per rendere il layout identico, dovevo usare un valore di 8px.
Un modo assai semplice, facile da ricordare ed estremamente immediato per risolvere il problema, è quello di "sovrascrivere" il nostro stile caricando un diverso file ad hoc solo se il browser è il - temuto - IE6:

PLAIN TEXT
CSS:
  1. /** ___ file ie_override.css
  2. * uso questo file per sovrascrivere uno stile
  3. */
  4. div.mystyle{margin-left:8px}

PLAIN TEXT
HTML:
  1. <!-- stili per tutti i browser -->
  2. <link rel="stylesheet" href="css/style.css" type="text/css">
  3. <!-- stili solo per IE6 -->
  4. <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie_override.css" /><![endif]-->

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in CSS, Internet, Software, Sviluppo, Windows Vista | 3 commenti »

Skypemote versione Adobe AIR: 1000 download

Lunedì 24 Novembre, 2008

Skypemote versione Adobe AIR

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in AIR, Eventi & Iniziative, Grafica & Design, Internet, Sviluppo, Tecnologia | Nessun commento »

Very short snippet: Wordpress, separare le categorie in due colonne

Mercoledì 19 Novembre, 2008

Prendendo spunto da Wordpress Hack #2 - Separare le categorie in colonne nella sidebar può tornare utile "spezzare" in due colonne la lista delle categorie di Wordpress. Se la sequenza che vogliamo ottenere è da sinistra a destra, cioè cat1 | cat2 (a capo) cat3 | cat4 (a capo) etc... non è necessario usare un codice PHP, ma basta giocare con gli stili impostando il tag li a float:left e "chiudendo" con l'opportuna width il tag ul, in modo a mandare "a capo" il successivo li. Nei casi invece dove il css non arriva, ad esempio nella sequenza cat1 | cat3 (a capo) cat2 | cat4, possiamo usare questo semplice codice:

PLAIN TEXT
PHP:
  1. $cats       = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
  2. $middle     = round( (sizeof($cats)-1)/2 );
  3. $cats_left  = array_slice( $cats, 0, $middle );
  4. $cats_right = array_slice( $cats, $middle, -1 );
  5. echo '<ul class="left"><li>'.implode( '</li><li>', $cats_left ).'</li></ul>'.
  6.      '<ul class="right"><li>'.implode( '</li><li>', $cats_right ).'</li></ul>';

Post correlati

Tags: , , , , , ,
Pubblicato in CSS, Internet, PHP, Sviluppo, WordPress | 1 commento »

Adobe AIR e le API di Feedburner: reloaded

Martedì 18 Novembre, 2008

Prendo spunto dall'ottimo tutorial di Napolux, Flex 3, Adobe AIR e le API di Feedburner, che mostra come scrivere una semplice applicazione (o widget) Adobe AIR usando Flex 3, per mostrare come realizzare la stessa identica cosa usando Adobe Flash CS3. Se lo desiderate, inoltre, potete sfruttare l'estensione per la creazione di applicazioni Adobe AIR. Non è infatti necessario, ai fini di questo tutorial, compilare l'applicazione come eseguibile AIR; potete usare il codice proposto come semplice filmato Flash da "apporre" alle vostre pagine Web.

Flash vs Flex

Nonostante apprezzi Adobe AIR come tecnologia e come è stato implementato nelle piattaforme HTML (Dreamweaver), Flash e Flex, non sono "ancora" del tutto ben disposto verso Flex! Non voglio certo mettere a confronto Flash con Flex, nonostante hanno molti punti in comune ma anche molte differenze. Tuttavia non ho assolutamente apprezzato la politica Adobe rispetto a questo spinoff a volte privo di senso. Avrei preferito, invece, la costituzione di un unico ambiente (Flax) di sviluppo e non questa "inutile" separazione. Inoltre, da buon programmatore, gli ambienti troppo "visuali" non mi piacciono granchè e Flex sembra proprio destinato a diventare pericolosamente simile a Visual Basic, che tra l'altro conosco molto bene e su cui ho lavorato per molti anni. Insomma, Flex sinceramente non l'ho capito e non ho capito cosa vuole fare Adobe con questo branch. Se Flex è indicato come l'ambiente ideale per scrivere RIA qual'è il destino di Flash? Tutte le features di Flex, effettivamente non disponibili "direttamente" in Flash, potrebbero - volendo - essere inserite senza costringere ad acquistare licenze multiple per sviluppare - alla fine - la stessa identica cosa.

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , , ,
Pubblicato in AIR, Actionscript 3.0, Flash CS3, Internet, Sviluppo, Tutorials | 1 commento »

Very short trick: 3 output function in PHP

Martedì 18 Novembre, 2008

All'interno di una funzione PHP è possibile stampare in tre modi diversi:

PLAIN TEXT
PHP:
  1. <?php
  2. function miaFunction( $valore = 'Ciao' ) {
  3. ?>
  4. <ul>
  5.   <!-- <li><?php echo $valore; ?> -->
  6.   <li><?=$valore?></li>
  7. </ul>
  8. <?php
  9. }
  10. ?>

Oppure:

PLAIN TEXT
PHP:
  1. function miaFunction( $valore = 'Ciao' ) {
  2.     $o = '<ul><li>'.$valore.'</li></ul>';
  3.     echo $o;
  4. }

Oppure:

PLAIN TEXT
PHP:
  1. function miaFunction( $valore = 'Ciao' ) {
  2.     $o = "<ul><li>$valore</li></ul>";
  3.     echo $o;
  4. }

Post correlati

Tags: , , , ,
Pubblicato in Internet, PHP, Sviluppo | Nessun commento »

SWFObject su Google AJAX Libraries API

Venerdì 14 Novembre, 2008

swfobjectGoogle AJAX Libraries API allarga il suo parco di librerie e framework anche a SWFObject, utilissima per inserire e manipolare filmati Flash sulle nostre pagine Web. SWFObject è anche disponibile come Plugin per Wordpress; nel momento in cui scrivo, tuttavia, il Plugin non è stato ancora aggiornato per caricare il codice dal "repository" Google. A breve, quindi, immagino verrà rilasciata anche una nuova versione del Plugin... a meno che non vogliate intanto modificarlo da soli...

Includere SWFObject da Google AJAX Libraries API

Come per le altre librerie presenti in Google AJAX Libraries API è possibile usare l'URL assoluto o il meotdo google.load():

PLAIN TEXT
HTML:
  1. <!-- URL ASSOLUTO -->
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
  3. <script type="text/javascript">
  4.     swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");
  5. </script>

PLAIN TEXT
HTML:
  1. <!-- google.load() -->
  2. <script src="http://www.google.com/jsapi"></script>
  4.     google.load("swfobject", "2.1");
  5.     google.setOnLoadCallback(function() {
  6.         swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");
  7.     });
  8. </script>

Post correlati

Tags: , , , , ,
Pubblicato in Flash, Internet, Javascript, Sviluppo | 1 commento »

Actionscript 3.0 for beginners: lesson #4

Martedì 11 Novembre, 2008

Riprendiamo il nostro codice di esempio del TicTacToe (che trovate per intero su Google Code) e iniziamo ad analizzarlo in dettaglio.

Importare le definizioni

Con Actionscript 3.0 è stato fatto un grande lavoro di pulizia e sistemazione nell'alberatura delle classi (contenute nei pacchetti, package) utilizzate durante lo sviluppo. In altri linguaggi di programmazione, come il C ad esempio, quando si desidera utilizzare una funzionalità bisogna esplicitamente "importarla" nel codice. Questa operazione di "importazione" è necessaria per permettere al compilatore di avere tutti i codici e le definizioni legate alla funzionalità che vogliamo usare. In Actionscript 3.0, tuttavia, l'istruzione import non va confusa con l'equivalente C/C++ #include; Actionscript 3.0 mette a disposizione l'istruzione include che è identica all'#include del C/C++. Quest'ultima, infatti, "include" effettivamente del codice che, se usato o meno, viene compilato nell'eseguibile finale. L'istruzione import è di più alto livello e risulta più "intelligente" in fase di compilazione. Essa serve principalemente per accedere alle classi senza doverne specificare il nome completo. In alre parole invece di usare forme del tipo:

PLAIN TEXT
Actionscript:
  1. var myMC:flash.display.MovieClip = new flash.display.MovieClip();

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Flash CS3, Internet, Sviluppo, Tutorials | Nessun commento »

Very short trick: versatilità delle classi CSS

Lunedì 10 Novembre, 2008

I più esperti lo sapranno già, tuttavia mi viene spesso chiesto che differenza c'è tra class e id nei fogli di stile CSS. Una panoramica su alcune differenze e avvertenze è possibile trovarla in Classi e ID nei CSS, tuttavia una caratteristica utile, che distingue class da id, è la possibilità di usare classi multiple. Ad esempio è possibile definire:

PLAIN TEXT
CSS:
  1. .bordoNero {border:2px solid #000}
  2. .coloreRosso {color:#f00}
  3. .bordoRosso {border:2px solid #f00}

e scrivire nell'HTML:

PLAIN TEXT
HTML:
  1. <div class="bordoNero coloreRosso">Bordo nero con caratteri rossi</div>
  2. <div class="bordoRosso coloreRosso">Bordo rosso con caratteri rossi</div>

class, a differenza di id, può contenere al suo interno più definizioni in qualsiasi sequenza!

Post correlati

Tags: , , , , , ,
Pubblicato in CSS, Internet, Sviluppo | 2 commenti »