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 »

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 »

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 »

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 »

jQuery: bordi rotondi sulle immagini per sovrapposizione

Giovedì 30 Ottobre, 2008

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del "disastro" prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere "effetti" (effetti che esonerano dall'HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc...) con patch sui fogli di stili, particolari trucchi con l'uso di div innestati, librerie Javascript, uso delle canvas, etc...
A titolo puramente didattico vorrei illustrare un'ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Javascript, Sviluppo, Tutorials, jQuery | Nessun commento »

Wordpress: come creare passo passo un proprio login

Venerdì 24 Ottobre, 2008

In questo tutorial vedremo come creare una procedura di Login personale, utilizzando anche funzionalità Ajax tramite jQuery. Ci sono vari metodi per personalizzare il login di Wordpress, ad esempio tramite l'uso di hook e filtri (add_action(), add_filter()). Noi qui useremo una procedura più a basso livello, anche se ci interfacceremo comunque al Kernel di Wordpress. Inoltre faremo in modo di convalidare un utente tramite la dupla email/password.

Perchè realizzare un proprio login?

  • In alcuni contesti può ritornare uitle avere il massimo controllo sulla pagina di login, per proporre un layout personalizzato ai nostri utenti registrati. Inoltre si può arricchire la pagina con informazioni utili, dal un logo al classico "Password dimenticata?"
  • Per permettere l'accesso tramite l'email (come nell'esempio qui trattato) al posto dello user_login standard di Wordpress
  • Per avere la possibilità di inserire un pannello di login nella sidebar del nostro Blog
  • E infine, per avere uno scheletro - ed un'idea - per un ottimo Plugin :D

Ambiente

Nel nostro esempio/tutorial lavoreremo sulla root di Wordpress all'interno di una cartella mylogin. Creiamo due file php all'interno di questa cartella: index.php e logon.php. Il primo conterrà l'interfaccia del nostro login, con tutte le funzioni Javascript/jQuery che ci servono. Il secondo file, logon.php, conterrà il codice per la validazione dell'utente. Creiamo poi una cartella css e dentro questa un file layout.css e una cartella images. All'interno della cartella images inseriremo un classico Ajax loader: createlo online su AjaxLoad.info. Alla fine dovreste avere:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • images
        • ajax-loader.gif

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Ajax, CSS, Internet, Javascript, PHP, Sviluppo, Tutorials, WordPress, jQuery | 9 commenti »

Wordpress: migliorare la lista dei commenti

Mercoledì 22 Ottobre, 2008

Il template standard di Wordpress (come altri) normalmente preve un layout alternato per la lista dei commenti. Nel template standard di esempio è impostata una classe css alt, secondo la logica:

PLAIN TEXT
PHP:
  1. // file comments.php
  2. <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
  3. [...]
  4. /* Changes every other comment to a different class */
  5. $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Questo fa si che nel tag li $oddcomment sia impostato una volta a vuoto ("") e una volta a class="alt". Una modifica utile potrebbe essere quella di introdurre un ulteriore classe quando è l'autore del blog a commentare un post:

image

Io, ad esempio, ho usato il seguente codice nel file comments.php:

PLAIN TEXT
PHP:
  1. <?php
  2.     $authcomment = ($comment->user_id==3)?' authcomment':'';
  3.     $classcomment = ( empty( $classcomment ) ) ? ( ($authcomment=='')?' alt':'' ) : ''; 
  4. ?>
  5. <li class="<?=$classcomment?><?=$authcomment?>" id="comment-<?php comment_ID() ?>">

La riga $comment->user_id==3 può variare in base all'ID del vostro utente. Io, ad esempio, non uso l'amministratore per rispondere sul blog, ma ho un mio utente con ID=3. Normalmente l'ID dell'amministratore è 1, se usate questa utenza potete scrivere: $comment->user_id==1. In questo modo oltre ad avere l'alternanza di layout sui commenti lasciati dai visitatori, risulta immediatamente riconoscibile la risposta dell'autore del blog.

Post correlati

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

Wordpress: modifcare AdminBigWidth per gli sviluppatori

Venerdì 17 Ottobre, 2008

AdminBigWidth è un Plugin per Wordpress in grado di impostare l'area di lavoro dell'amministrazione a tutto schermo. È un plugin davvero semplice e banale, infatti il suo codice non fa altro che modificare la classe CSS .wrap:

PLAIN TEXT
PHP:
  1. function AdminBigWidth () {
  2.     echo '<style type="text/css">.wrap{max-width:none}</style>';
  3. }
  4. add_action('admin_head','AdminBigWidth');

Per chi come me usa l'editor di Wordpress in modalità HTML potrebbe risultare utile impostare dei caratteri a spaziatura fissa, come il Courier, invece del font proposto di default. In questo modo, almeno per gli sviluppatori, risulta più facile allineare codici sorgenti. Per fare questo basta aggiungere, sullo stile di AdminBigWidth, una nuova impostazione CSS che si rifletta sull'editor quando è in modalità HTML. Si potrebbe scrivere un Plugin (di due righe) per fare questo, tuttavia è meglio sfruttare proprio il codice di AdminBigWidth, così da evitare un ulteriore carico dovuto all'ennesimo Plugin:

PLAIN TEXT
PHP:
  1. function AdminBigWidth () {
  2.   echo '<style type="text/css">.wrap{max-width:none}#editorcontainer #content{font-family:"Courier New", Courier, monospace}</style>';
  3. }
  4. add_action('admin_head','AdminBigWidth');

Post correlati

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

CSS3: qualcuno ha visto Internet Explorer?

Giovedì 16 Ottobre, 2008

Io proprio no...

PLAIN TEXT
CSS:
  1. p {
  2. /* Rounded Corners */
  3. border-radius: 9px; /* CSS 3 */
  4. -o-border-radius: 9px; /* Opera */
  5. -icab-border-radius: 9px; /* iCab */
  6. -khtml-border-radius: 9px; /* Konqueror */
  7. -moz-border-radius: 9px; /* Firefox */
  8. -webkit-border-radius: 9px; /* Safari */
  9. }

Post correlati

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

Wordpress: come scrivere un reply to comment usando jQuery

Venerdì 3 Ottobre, 2008

Recentemente Cristiano Fino ha rilasciato un utile Plugin per Wordpress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di Wordpress.org ne ho travati un paio, tuttavia essendo un software italiano sarebbe il caso di onorare l'ottimo lavoro fatto da Cristiano). Questi Link (reply & quote) permettono di rispondere e/o quotare l'autore di un commento, eseguendo quella noiosa operazione di inserire il carattere at (@) per indicare a chi ci si rivolge. In questo tutorial voglio illustrare - per gli utenti medio-esperti - il modo di aggiugere queste due funzionalità "a mano", senza ricorrere all'istallazione di nessun Plugin. Inoltre sfrutterò le capacità di jQuery per la parte in Javascript. La tecnica che espongo è la medesima che ho usato per introdurre questa funzionalità in questo blog.

Nota: l'uso di un plugin è la miglior soluzione per chi tende a modificare spesso il proprio template Wordpress o, al limite, ha in previsione di farlo. Questo tutorial vuole solo mostrare come eseguire interventi mirati all'interno del codice Wordpress ed è dedicato ai più curiosi.

Modifica del file comments.php

La prima modifica che apportiamo è quella di inserire i link "reply" e "quote" all'interno di ogni commento. Per fare questo editiamo il file comments.php situato nella cartella del nostro tema. Questo file contiene tutte le istruzioni che consentono di visualizzare i commenti alla fine di un post. La sezione che ci interessa (che può variare leggermente da tema a tema) è il loop di creazione dei vari commenti, riconoscibile da:

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in CSS, Javascript, PHP, Sviluppo, Tutorials, WordPress, jQuery | 13 commenti »