Creare un Ajax Loader (o Activity indicator per chi è ormai abituato ad usare l’Apple iPhone) per il Web non è una cosa difficile: esistono servizi che generano immagini gif animate di tutti i tipi. Tuttavia il formato GIF ha il grosso difetto di non supportare le trasparenze come si deve. La trasparenza, nel formato GIF attuale, coinvolge un solo piano di bit con la conseguenza che se non abbiamo un colore di sfondo uniforme, i bordi dell’immagine risultano notevolmente sgranati e frammentati.
Articoli con Tag ‘PNG’
Adobe Flash CS4: creare un Ajax Loader o Activity Indicator
WordPress: personalizzare la navigazione tra i post
WordPress mette a disposizione numerose funzioni per spostarsi tra i vari post e pagine in avanti ed indietro. Queste sono usate all’interno dei temi, spesso in modo del tutto interscambiabile, anche se contengono alcune differenze. Tutto questo, a dire il vero, creo non poca confusione al momento della scelta della funzione da usare. Eccone alcune note:
Very short snippet: jQuery auto target blank link
Niente di nuovo, ma lo segno per ricordarmelo: come aggiungere un immagine a tutti i link che aprono una nuova pagina:
1 | jQuery('a[@target=_blank]').addClass('external'); |
jQuery: bordi rotondi sulle immagini per sovrapposizione
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
Internet Explorer 7 e Opera: un mondo a parte
Conitnua a stupire la totale differenza di resa tra i vari browser in commercio. IE7 tratta i PNG (ad 8 bit o 24) in modo differente da FireFox. Anche Opera non è esente da qualche strana manifestazione a riguardo. Nel particolare i PNG usati come sfondo sono resi in modo differente da IE7, Opera e FireFox. Quest’ultimo è quello che si comporta meglio di tutti e a tal proposito sarebbe ora di nominarlo browser del “secolo”! Complimenti al team di sviluppo.
IE7 crea un simpatico effetto di taglio su un’immagine PNG usata come sfondo in repeat-x. Se provate a creare un immagine di 200×200 pixel con una sfumatura che va dal nero (0×000000) a grigio (0xeeeeee) in verticale e la posizionate nel CSS come sfondo del body in ripetizione orizzonale (repeat-x), impostando come sfondo del body il colore 0xeeeeee – ovvero la fine della sfumatura, noterete che solo FireFox rende perfettamente lo stacco, IE7 e Opera mostrano un simpatico effetto di taglio (ma leggermente diverso!!!): in pratica si vede la fine della nostra immagine 200×200 e l’inizio dello sfondo a colore piatto.
Un modo per risolvere il problema è quello di salvare la nostra immagine in GIF…
Ma i PNG non erano supportati da IE7?
Internet Explorer 7 (IE7): PNG e CSS ancora lontani?
A Redmond devono avere qualche grosso problema di comprendonio! Risulta magnificamente assurdo che sul finire dell’anno 2006 ancora non ci siano le basi per una – anche – approssimata compatibilità tra IE7 e Firefox! Nonostante il rilascio ufficiale – anche se con un set limitato di localizzazioni – di Internet Explorer 7, l’engine di rendering delle pagine soffre ancora di evidenti difetti di programmazione! Senza infierire entrando in numerosi dettagli elenco solo due clamorosi bachi ancora presenti in questo rilascio ufficiale!!
Prima di tutto i PNG vengono resi differentemente dai GIF… e, peggio ancora, in position absolute subiscono strani contorni a seconda di come gira a IE!! Evidente baco? O follia di qualche junior-developer?
Sul fronte CSS la pseudo classe :hover continua a non essere supportata su tutti i TAG, nonostante molti blog la diano per funzionante! Ma su quale sistema? Vedi W3C…
Un semplice p:last-child è praticamente ignorato! Giustamente Microsoft ha supportato p:first-child. Ora, se implementi il first che cosa ti costa implementare anche last? Mistero…
L’apice dell’assurdo, poi, lo si ottiene con le liste puntate! Udite udite! IE7 si comporta esattamente come IE6! Della serie: vi siete portati appresso codice fallato? Troppi copia e incolla evidentemente! Se definitie una lista con i canonici UL LI e un’immagine personalizzata come list-point, non provate ad usare un float sull’elemento LI, l’immagine scomparirà misteriosamente, esattamente come accadeva su IE6!! L’unico, manco a dirlo, a rendere il tutto corretto è il solito – vecchio – FireFox!
Sul blog di IE7 sono numerose le lamentale. Nonostante sia apprezzato lo sforzo del pachiderma Microsoft di aprire un blog durante lo sviluppo di un software come IE7, rimane tuttavia il dubbio dell’efficacia di questa mossa. Hanno davvero ascoltato le richieste degli utenti-sviluppatori? Il blog di IE7 è stato aperto con troppo ritardo?
Ancora una volta non ci resta che attendere una service-pack prossima ventura…
Ultimi Commenti
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
Marco: Scusa lo spam.. ho notato che c’è un errore.. ecco la correzione [cc_objc] /** PrimaClasse.h **/ #import...
Marco: dimenticato.. in [cci]OptionViewController[/cci ] il [cci]@syntetize[/cci] del delegato l’ho messo
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...