Gli ultimi post di Edit
Di PNG, JPEG e compromessi
Mercoledì 28 Aprile 2010 - 14:50
di Cesare Lamanna
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.
Continua a leggere Di PNG, JPEG e compromessi
Categoria: Grafica | Permalink | Commenti (7)
Ottimizzazione estrema di immagini PNG
Lunedì 21 Settembre 2009 - 08:27
di Cesare Lamanna
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.
Categoria: Software e Servizi, Grafica | Permalink | Commenti (2)
PNG su IE6 con Unit PNG Fix
Giovedì 23 Luglio 2009 - 08:18
di Cesare Lamanna
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.
Categoria: Scripting | Permalink | Commenti (17)
DD_belatedPNG
Venerdì 12 Dicembre 2008 - 09:18
di Riccardo Degni
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.
Categoria: Scripting | Permalink | Commenti (6)
Sull’uso delle PNG
Giovedì 8 Maggio 2008 - 08:20
di Riccardo Degni
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.
Continua a leggere Sull’uso delle PNG
Categoria: CSS | Permalink | Commenti (35)
Sperimentazioni con il background
Martedì 4 Marzo 2008 - 09:10
di Alessandro Fulciniti
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 Silverbacks 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.
Categoria: CSS | Permalink | Commenti (6)
Firefox 3 e le Animated PNG
Lunedì 28 Gennaio 2008 - 10:36
di Riccardo Degni
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
Categoria: Grafica | Permalink | Commenti (12)
Effetto gradiente con i CSS e immagini PNG
Lunedì 21 Gennaio 2008 - 07:32
di Cesare Lamanna
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.
Categoria: CSS | Permalink | Commenti (8)
Bookmark di Novembre
Lunedì 3 Dicembre 2007 - 07:41
di Alessandro Fulciniti
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 Websites 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
Categoria: Web Design | Permalink | Commenti (4)
Creare PNG animate con Firefox 3
Mercoledì 29 Agosto 2007 - 10:07
di Cesare Lamanna
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.
Categoria: Software e Servizi | Permalink | Commenti (12)