Nei giorni scorsi, quando Google ha annunciato che la velocità  di caricamento delle pagine è ufficialmente un fattore che influisce sul PageRank, in molti hanno fatto notare un paradosso: l'intervento di Big G arriva in un momento in cui la tendenza prevalente va nella direzione opposta a quella sintetizzabile nel binomio leggerezza/velocità . Data per scontata la disponibilità  di connessioni veloci e banda larga o larghissima, molti sembrano aver di fatto dimenticato certe pratiche come quella dell'ottimizzazione della grafica, per esempio. Così Jeffrey Zeldman: Invece di immagini JPEG di media qualità  con i loro dettagli meno importanti spazzati via per risparmiare una manciata di KB, abbiamo iniziato a usare immagini PNG di alta qualità  sui nostri siti. Con tutte le conseguenze che ne derivano rispetto al peso delle pagine. (more...)

Continua a leggere Di PNG, JPEG e compromessi

Categoria: Grafica

Vi giro da questo post sul blog di SitePoint la segnalazione di PunyPNG, un tool online per la compressione e l'ottimizzazione di immagini in formato PNG, JPEG e GIF. Particolarmente adatto al formato PNG, PunyPNG implementa le tecniche di compressione a suo tempo presentate da Sergey Chikuyonok in un articolo di Smashing Magazine. Se pensate che valga sempre la pena risparmiare una manciata di kb, può essere un'ottima alternativa ad altri strumenti tradizionalmente usati per queste operazioni di compressione sulle immagini PNG.

Continua a leggere Ottimizzazione estrema di immagini PNG

Categoria: Grafica

Tags: ,

Tra le soluzioni disponibili per poter sfruttare anche su IE6 i vantaggi del formato PNG, va segnalata anche la Unit PNG Fix rilasciata da Unite Interactive. Lo script è leggerissimo (poco più di 1kb) e proprio in questi giorni è stata rilasciata l'ultima versione con due importanti novità : intanto, ora il fix viene applicato alle immagini prima del caricamento della pagina, cosa che evita eventuali problemi di flickering; inoltre, usando una semplice classe CSS sulle immagini che desideriamo, è possibile applicare lo script in modo selettivo. Si può cioè scegliere con questo meccanismo se applicarlo a tutte le PNG presenti sulla pagina oppure solo ad alcune. La soluzione di Unite Interactive funziona sia sulle immagini incorporate nella pagina via HTML sia su quelle servite via CSS, a partire da quelle usate come sfondo.

Continua a leggere PNG su IE6 con Unit PNG Fix

Categoria: Scripting

Tags: ,

DD_belatedPNG

12 Dec

Dopo lo script DD_roundies visto nel posto DD_roundies: un’altra soluzione per arrotondare gli angoli, andiamo ora ad analizzare un'altra soluzione dello stesso autore. Si tratta di DD_belatedPNG. Permette di "alleviare" l'ormai famoso problema presentato da Internet Explorer 6 per quanto riguarda la gestione delle immagini in formato .png. Lo script non utilizza il filtro MSIE AlphaImageLoader e dovrebbe dunque funzionare con successo se usata con le proprietà  CSS background-repeat e background-position, oltre al normale attributo background. DD_belatedPNG è rilasciato sotto licenza MIT ed è documentato, scaricabile e visibile in azione dirrettamente nell'home page.

Continua a leggere DD_belatedPNG

Categoria: Scripting

Tags: ,

La grande potenza del formato .png è data dal supporto della trasparenza, un fatto che permette di creare immagini per il web che si adattano perfettamente a qualsiasi sfondo: che sia formato da gradienti o colori sparsi, che venga modificato tramite Javascript o meno, il risultato è sempre perfetto. Le immagini png sono infatti la scelta più diffusa per quanto riguarda le rifinuture delle finestre modali, i loghi adattivi, gli sfondi trasparenti e cosi via. Purtroppo, c'è un ostacolo alquanto fastidioso che frena per certi versi l'adozione di questo formato: il suo nome è Internet Explorer 6. Quest'ultimo infatti, come sapete, non supporta la trasparenza delle png, mostrando come risultato una alone azzurrino davvero orribile, cosa che stravolge completamente il tocco di stile che volevamo dare. (more...)

Continua a leggere Sull’uso delle PNG

Categoria: CSS

Tags: ,

Le PNG semitrasparenti sono da sempre uno strumento potente per ottenere effetti grafici accattivanti e altrimenti impossibili. Ecco due tutorial molto ben fatti sul loro uso creativo. In Doing strange things to CSS Backgrounds su Sitepoint viene mostrato come agendo sulla background-position sia possibile ottenere differenti velocità  di scorrimento orizzontali degli sfondi (qui l'esempio). Nel recente How to recreate SilverbackÂ’s Parallax su Vitamin viene spiegato come ottenere un effetto tridimensionale come quello di Silverback grazie a tre sfondi PNG e poche regole CSS. Per notare l'effetto, anche in questo caso vi basta stringere o allargare la finestra del browser.

Continua a leggere Sperimentazioni con il background

Categoria: CSS

Come annunciato tempo fa anche su Edit, la versione numero 3 del browser di casa Mozilla avrà  il supporto per un nuovo tipo di formato grafico: le Animated PNG (APNG). Si tratta di una versione "evoluta" del formato PNG che supporta, appunto, la possibilità  delle animazioni.Per lanciare al meglio il nuovo formato, è nato ora un sito ad hoc: animatedpng.com. Oltre a link e risorse offre la possibilità  di creare online sequenze di PNG animate con APNG Assembler (le immagini che compongono i vari frame dell'animazione vanno inserite in un file zip da uploadare). Non mancano gli esempi (per visualizzarli correttamente occorre ovviamente Firefox 3): 3D Dolphin 3D APNG's Brendan Sera-Shriar Mozilla Labs - Justin Dolske William Wrong Joanna Viera Daniel Coltri

Continua a leggere Firefox 3 e le Animated PNG

Categoria: Grafica

Tags: , ,

Non so se è una tecnica completamente nuova. Fatto sta che è davvero semplice da implementare, l'ho capita persino io :P.CSS Gradient Text Effect è pensata soprattutto per titoli e intestazioni, consente di creare facilmente un effetto gradiente sul testo usando i CSS, una piccola PNG trasparente e un pizzico di creatività . Il breve tutorial spiega anche come raggiungere la compatibilità  con IE6, browser notoriamente privo del supporto per questo particolare tipo di immagini. Dal momento che nel markup è necessario ricorrere ad uno span vuoto, c'è pure la soluzione per i puristi del markup semantico: è infatti possibile inserire lo span via Javascript (nell'esempio ci si appoggia a jQuery). Che dire di più, credo niente, se non rimandarvi alla pagina dimostrativa.

Continua a leggere Effetto gradiente con i CSS e immagini PNG

Categoria: CSS

Tags: , , ,

Ci sono davvero moltissime segnalazioni che per mancanza di tempo o spazio non passano qui sul blog. Alla maniera di Smashing Magazine, vorrei introdurre un appuntamento mensile dei bookmark, così da proporvi le segnalazioni interessanti del mese appena passato che non hanno ancora trovato un ritaglio nei vari post del blog. Dei molti bookmark che ho raccolto a novembre vi presento i 20 che maggiormente meritano una segnalazione: dal markup ai CSS, dal web design all'ispirazione... Ecco la lista: What Beautiful HTML Code Looks Like 30 ways to improve readability Better Web Forms: Redesigning eBay's Registration CSS PNG Image Fix for IE Pagination Gallery: Examples And Good Practices 23 Actionable Lessons from Eye-Tracking Studies The Blog Readability Test Figure Microformats Interesting Web Browsers You Have Never Heard Of 12 Invaluable Sites for Web Design and Design Inspiration Fieldsets, Legends and Screen Readers The Successful Error Page 21 Factors that Influence the First Impression of Your WebsiteÂ’s Visitors Screen resolution and better user experience CSS fix for Graphical Input Submit Button Off-Set What If Gmail Had Been Designed by Microsoft? The AxsJAX Framework for ARIA Future-Proof Your Web Site Design by Planning Your CSS In Advance For Webdesigners - 383 helpful links for webdesigners 30 More Excellent Blog Designs

Continua a leggere Bookmark di Novembre

Categoria: Web Design

Tra le novità  in arrivo con Firefox 3, c'è anche il supporto ad un nuovo formato grafico che potrebbe finalmente sostituire le GIF animate: APNG (Animated PNG). I vantaggi sono gli stessi che offre PNG rispetto a GIF, a partire dal supporto per la trasparenza parziale dei pixel.Un bel post apparso su Mozilla Labs è l'ideale punto di partenza per saperne di più e per gustarsi dal vivo qualche esempio (bisogna installare l'ultima alpha release di Firefox 3).Ma non è tutto. L'autore del post (Justin Dolske) ci regala anche APNG Edit extension, un'estensione in grado di creare animazioni con questo nuovo formato, utile per il semplice motivo che al momento non esistono tool grafici in grado di fare altrettanto.

Continua a leggere Creare PNG animate con Firefox 3

Categoria: Software e Servizi

Tags: , ,