Dopo la segnalazione di qualche giorno fa sulla conversione di font, propongo questo interessantissimo servizio di conversione tra file. In rete è possibile trovare diversi servizi che ci permettono di effettuare conversioni di questo tipo, ma questo è sicuramente uno tra i più completi e potenti convertitori che ci siano attualmente in circolazione. Convertfiles.com è un servizio gratuito che permette di convertire file compressi, immagini, audio, presentazioni, video e molto altro ancora. (more...)

Continua a leggere Convertfiles.com e la conversione tra file

Categoria: Software e Servizi

Ridimensionare un'immagine facendo ricorso ad HTML e ad attributi come width ed height non è magari una pratica da consigliare, ma ci sono situazioni in cui può essere necessario. A quel punto si pone il problema della qualità  della grafica così trattata, un problema che su IE (sul quale il degrado è particolarmente evidente nelle versioni 6/7) si può risolvere utilizzando nei CSS questa regola: img { -ms-interpolation-mode: bicubic; } Come si vede, non si fa che adottare, preceduto dal prefisso -ms-, uno dei tanti filtri proprietari di Microsoft. Se problemi analoghi si dovessero riscontrare su Firefox, Mozilla prevede invece l'uso della proprietà  image-rendering. Per aggiustare le cose su entrambi i browser la regola potrebbe essere così definita: img { image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */ -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */ } Il codice è ripreso da questa pagina del Mozilla Developer Center che spiega nei dettagli i termini della questione e tutte le possibili alternative.

Continua a leggere La qualità  delle immagini ridimensionate con HTML

Categoria: Grafica

Lo scenario d'uso ideale è così definito: un form con molti campi di input e che magari necessitano di un'attenta revisione dell'utente rispetto ai contenuti inviati. Nel caso di immagini da caricare, cosa c'è allora di meglio di un'anteprima del file messa accanto al tradizionale campo per l'upload? Ecco la dimostrazione. if (1==1) {document.getElementById("link43569").style.display="none";} L'esempio è accompagnato da tutto il codice necessario per implementarlo. 765qwerty765

Continua a leggere Upload di immagini con anteprima

Categoria: Scripting

Tags: , ,

Una tecnica che ha preso piede dopo l'ottimo lavoro di Gianluca Troiani è l'utilizzo di dimensioni percentuali nel CSS per determinare il layout delle immagini. Questa tecnica richiede due passaggi: trasformazione dell'immagine in un elemento di blocco; dichiarazione di una larghezza in percentuale per l'immagine. (more...)

Continua a leggere Immagini in percentuale con i CSS: i dettagli

Categoria: CSS

Tags: ,
di napolux

Ottimizzare le immagini per il web è un'arte. Difficile spesso ottenere una buona resa associata a dimensioni accettabili per il download. Yahoo! ha da un po' messo a disposizione dei suoi utenti Smush It, un tool che permette di ottimizzare per il web un'immagine qualsiasi pescata direttamente dall'url di origine. Ad ottimizzazione avvenuta Smush It presenterà  una piccola preview, l'url per il download dell'immagine ottimizzata e un rapporto sullo spazio "guadagnato".

Continua a leggere Smush it! Ottimizzazione immagini da Yahoo!

Categoria: Grafica

Se lo spazio a disposizione nel contesto del layout è poco e non si può fare a meno di aggiungere a beneficio del lettore una serie di immagini, il plugin per jQuery Micro Image Gallery può essere un'utile soluzione. Come si può notare dai tre esempi presentati nella pagina della demo e dallo screenshot riportato qui sotto, consente di compattare fino a nove immagini di dimensioni ridotte in pochissimo spazio, offrendo la possibilità  di personalizzare opzioni come la barra di navigazione o la modalità  di visualizzazione delle immagini stesse (a griglia o singole):

Continua a leggere Gallerie di immagini mini con jQuery

Categoria: Scripting

Tags: ,

AJAX-ZOOM è un sofisticato plugin basato su jQuery e PHP che realizza zoom di immagini di una gallery. Con oltre 250 opzioni è molto flessibile e può essere integrato in qualsiasi sito web. AJAX-ZOOM rende possibile non solo mostrare immagini ad alta risoluzione sul web, ma anche di proteggerle da accessi non autorizzati: consente di presentare la reale qualità  di un formato immagine originale, senza preoccuparsi di violazione del copyright. Esempi di utilizzo possono essere gli e-commerce, per la presentazione dei prodotti, dove immagini di alta qualità  fanno la differenza. (more...)

Continua a leggere AJAX-ZOOM, zoom di immagini con PHP e Javascript

Categoria: PHP e Open Source

Wadda è una libreria Javascript che sfrutta l'elemento canvas per creare un effetto zoom sulle immagini. L'implementazione è piuttosto semplice: è sufficiente definire nel title dell'immagine di base l'URL di quella ad alta definizione e impostare poche righe di Javascript per definire fattori come il livello di ingrandimento o la possibilità  di avere un effetto fade con lo zoom. La prima demo applica l'effetto ad un'immagine con del testo, la seconda ad una più tradizionale collezione di immagini organizzate come galleria.

Continua a leggere Wadda, zoom di immagini con canvas

Categoria: Scripting

Tags: , ,

Questo post potrebbe iniziare con la famosa frase: "Non tutti sanno che...": infatti parliamo proprio di una cosa sconosciuta ai più. Chi sviluppa con Visual Studio si sarà  sicuramente trovato prima o poi nella condizione di dover ricercare delle immagini da utilizzare nell'interfaccia grafica delle proprie applicazioni. Immagini quali quelle presenti su alcuni tasti, icone da affiancare a controlli per renderne più immediata la comprensione ed in generale tutte quelle immagini che sono funzionali all'utilizzazione dell'interfaccia grafica, sia essa di un'applicazione desktop che web. (more...)

Continua a leggere Visual Studio Image Library

Categoria: Microsoft Dev

Tante volte si guarda ai CSS e alla loro evoluzione solo in vista della possibilità  di applicare questo e quell'effetto visivo. E si dimentica quanto utili e potenti possano essere aspetti del linguaggio come i selettori avanzati. Certo, anche su questo punto non mancano le voci di quanti vorrebbero di più, ma con quello che si ha a disposizione già  oggi molto si può fare. Andy Clark, ad esempio, spiega come un uso accorto dei selettori di attributo possa in certi scenari tornare vantaggioso nella gestione delle immagini e della loro presentazione. Gli scenari proposti spaziano dalla possibilità  di applicare regole ad hoc alle immagini provenienti da un certo sito esterno a quella di formattare in modi specifici quelle contenute in una certa cartella del sito: <img src="thumbnails/promo-main-css.png" alt="" /> img[src*="thumbnails"] { /* Styles */ } I selettori di attributo usati negli esempi (rintracciano la presenza di una certa sottostringa nel valore dell'attributo) non sono parte della specifica CSS2, ma sono un'aggiunta introdotta nel modulo per i selettori dei CSS3. No, IE6 non li supporta :)

Continua a leggere Selettori di attributo CSS e gestione delle immagini

Categoria: CSS