Levysoft
  • Home
  • Portfolio
  • WordPress Plugin
  • Contattami

Dal 2004 il blog di Antonio Troise

RSS FeedTwitterFacebook
Nov 2 2009

Convertire da riga di comando in Mac OS X un file icona .ICNS in un file di immagine PNG

Posted by Antonio Troise
Tweet

A volte capita di usare dei programmi di grafica particolari (spesso su piattaforma Mac OS X) che usano, per il salvataggio, un solo formato di output: l’ICNS.
Per chi non lo sapesse, il formato Apple Icon Image (ICNS) è il formato standard per le icone utilizzato esclusivamente per Mac OS X e sviluppato dalla Apple stessa. Questo formato supporta icone di varie dimensioni: 16×16, 32×32, 48×48, 128×128, 256×256 e 512×512 pixels, oltre che il canale alfa per la trasparenza e la sovrapposizione di più’ immagini (per ottenere, per esempio, l’effetto di una cartella aperta e chiusa). Il formato ICNS, in realtà, e’ semplicemente composto da un massimo di 5 immagini tiff sovrapposte: spesso sono solo di grandezze diverse altre volte, invece, sono immagini diverse a seconda dello stato che l’icona deve assumere in relazione al programma che la gestisce.

A differenza del formato ICNS, invece, i file icona .ICO del sistema operativo Windows sono delle piccole immagini raster che, nella loro accezione originale, supportano la trasparenza e la Multi-risoluzione 16×16 pixel, 32×32 pixel, 64×64 pixel fino ad arrivare, solo con Windows Vista, a 256×256 pixel in PNG compresso.

Come avete potuto intuire, sarà quindi molto facile imbattersi in grafici professionisti e in programma di grafica che, prediligono il formato ICNS poiché, è estremamente più potente e flessibile rispetto al classico formato .ICO di Windows (oltre al fatto, forse ovvio, che molti software di grafica sono nati e vivono tuttora nel mondo Mac, la piattaforma migliore, a detta di molti, per sviluppare grafica). Non a caso, infatti, molti dei più importanti siti di grafica professionale usano quasi esclusivamente questo formato.

Ma le icone .ICNS si possono trovare anche all’interno dei programmi per Mac OS X, che altro non sono che directory con estensioni .app. Per esempio, se vogliamo visualizzare il file ICNS del calendario di Mac OS X (iCal), basterà aprire il contenuto del pacchetto (tasto destro sull’applicazione interessata e selezionare dal menu a comparsa “Mostra contenuto pacchetto“) e navigare nella cartella Contents/Resources e qui troverete, tra gli altri file, anche una file icona .icns (iCal/Contents/Resources/App-empty.icns) che altro non è che l’icona visualizzata nel Finder dall’applicazione stessa.

Se si apre con Anteprima questo file icona è possibile apprezzare come sia composto da più immagini tiff (per la precisione 5) di dimensioni diverse. Ecco un esempio per il file icona della applicazione iCal:

iCal ICNS

Convertire una icona ICNS in PNG da riga di comando

A volte, però, si potrebbe avere la necessità di dover convertire il formato ICNS in un più classico formato PNG, magari se si vuole riutilizzare l’immagine dell’icona su un sito web. Oltre a tool online come iConvert o ad applicativi per Mac OS X come il blasonato Img2icns, non tutti sanno che lo stesso sistema operativo Mac OS X ha un tool da riga di comando che deriva dal BSD, sips (scriptable image processing system), che permette di eseguire questa operazione in completa autonomia, senza dover installare software di terze parti. In realtà sips è usato correntemente nella suite degli “Image Events” di AppleScript, tanto da poter lancare gli stessi comandi da interfaccia grafica, ma è indubbio che è veramente comodo e veloce avere sempre a disposizione da riga di comando questo programma.

Basterà, quindi, aprire il Terminale e digitare la seguente riga:


sips -s format png fileicon.icns --out fileicon.png

e in pochi istanti il file icns verrà convertito, con le stesse dimensioni in pixel, nel formato PNG. Ma le funzionalità di questo programma sono molte: basterà aggiungere l’opzione “–rotate 90” (-rotate degreesCW) per ruotare di 90 gradi l’immagine PNG corrispondente, mentre aggiungendo “-flip horizontal|vertical” si potrà a tutti gli effetti rovesciare, ribaltare l’immagine. Quindi si potrà anche, con l’opzione “–cropToHeightWidth pixelsH pixelsW” eseguire il crop, ovvero il ritaglio della immagine, e quindi con “–resampleHeightWidth pixelsH pixelsW” la si potrà ridimensione. Tutto con una sola riga di comando, come nella vecchia ma mai tramontata potente filosofia unix.

Come creare un file ICNS

Una volta estratta l’icona ICNS in un formato grafico comune come il PNG potete elaborare l’immagine e usarla su un sito web oppure potreste voler ricreare di nuovo una nuova icona ICNS per una qualsiasi vostra applicazione. Per farlo potete usare un tool messo a disposizione gratuitamente da Apple nella suite dell’SDK per i Developer (presente in ogni DVD di installazione del sistema operativo o direttamente scaricabile anche dal sito Apple): Icon Composer.app (/Developer/Applications/Utilities/Icon Composer.app). Il programma è veramente semplice ed intuitivo perché vi mostrerà 5 aree diverse ognuna per ciascuna risoluzione consentita dove potete fare un semplice drag e drop dell’immagine desiderata da associare.
Vi lascio ad un video esemplificativo per la spiegazione passo passo:

Tag:bsd, grafica, icns, icone, Mac os x, png, sdk, Windows
CONTINUE READING >
7 comments
Gen 20 2009

Come aggiungere gratuitamente l’icona di un contatto con la relativa foto nella SpringBoard dell’iPhone senza dover acquistare nessuna applicazione sull’App Store

Posted by Antonio Troise
Tweet

Per quanto semplice possa essere l’iPhone quello che la maggior parte degli utenti cercano più di frequente è di poter, con un semplice tocco, richiamare le persone più care, senza dover per forza andare nell’applicazione Contatti. Ovviamente, siccome l’iPhone ha una Springboard (che, semplicisticamente, altro non è che il desktop del cellulare) costituita da tante icone, il metodo più semplice che viene in mente è quello di poter creare una icona, magari anche con la foto del contatto, a cui associare il relativo numero di telefono.
A tal proposito esistono tre ottime applicazioni su App Store (Visual Dial, FaceCall) e OneTapDial e uno per Cydia (Call me). Se si esclude l’applicativo per Installer e Cydia, che è gratuito ma è però valido solo per coloro che hanno un telefonino jailbreakkato) entrambi gli applicativi scaricabili da App Store, sono a pagamento al prezzo, rispettivamente, di €2,39, €1,59 e €0,79.
In teoria, potremmo inserire nella lista anche l’economico Favorater (costa solo €0,79), ma questo applicativo scaribile sempre da App Store, però, non salva le icone sulla Springboard ma solo sulla sua area di lavoro, richiedendo quindi un passaggio in più rispetto alle aspettative.

In definitiva, se non si ha un telefonino sbloccato, è impossibile trovare una applicazione gratuita che fa al caso nostro. A questo punto, ho cercato di capire come funzionassero, e, così, partendo dalla spiegazione del funzionamento di Visual Dial, ho tentato di venirne a capo, per cercare di creare una procedura manuale ma del tutto gratuita, per creare una icona di un contatto sulla SpringBoard. In pratica, Visual Dial permette di scegliere una foto dalla vostra galleria immagini, ridimensionarla, ruotarla e infine selezionare l’area da utilizzare come icona. Quindi si sceglie un numero di telefono dalla rubrica e poi si deve cliccare su “Go Visual”. L’immagine sarà caricata su un server, dopodiché verrà aperta una pagina in Safari Mobile e cliccando su “+” e poi su “Add to Home screen” si avrà la nostra scorciatoia sullo schermo del nostro iPhone.

I link telefonici cliccabili

La precedente procedura, un po’ macchinosa nella parte finale, mi ha fatto scoprire che l’iPhone gestisce i link, formattati opportunamente, per chiamare direttamente un numero di telefono. Per esempio, se nella nostra pagina web, (che visualizzeremo con Safari Mobile) creiamo un link siffatto:

questo creerà un link come questo che potete testare voi stessi sul vostro iPhone:


Call Apple Customer Support at 1-800-275-2273

mentre qui trovate un ottimo sito ottimizzato per iPhone che sfrutta questa tecnica nella pagina dei contatti. Più in generale, se si inserisce nella barra degli indirizzi di Safari Mobile, il seguente indirizzo:

tel:1-801-555-1212

si aprirà una finestra a popup che richiederà la conferma a chiamare il numero di telefono indicato.

Il prefisso tel: è un microformato standard proprietario Apple per creare link cliccabili associabili ad un numero di telefono. In realtà, come qualcuno forse saprà, già dai tempi del WAP esisteva Il WTAI (il linguaggio per la costruzione delle chiamate WTA) le cui funzioni vengono richiamate con modalità simile ad un hyperlink. Il formato per effettuare una chiamata è il seguente:

Non so bene per quale motivo Apple abbia deciso di seguire un suo standard proprietario (se non quello di imporre un proprio modello). Probabilmente, credo che, forse, il fatto che Safari Mobile dell’iPhone riesca a rilevare automaticamente i numeri di telefono sulle proprie pagine e li converte in phone link cliccabili (forse è più giusto usare il termine “tappabili”), abbia probabilmente imposto un linguaggio diverso dall’originale WTAI. Interessante, per finire l’excursus sui microformati telefonici, la possibilità di inserire, nei meta dati della pagina html, il meta tag “format-detection“, in modo da disabilitare, su tutti i numeri, l’autorilevamento del numero di telefono (nel caso siano presenti numeri che possano erroneamente essere interpretati come numero di telefono)

Procedura 1 per creare una icona associata ad un contatto

A questo punto, capito il meccanismo, e compreso che dalla release 1.1.3 e successive del firmware dell’iPhone, era possibile salvare l’icona di una pagina web direttamente sulla SpringBoard, allora era facile creare una procedura per crearsi uno proprio Speed Dial Screen che avesse per ogni contatto la relativa icona sulla SpringBoard.

In rete, ho trovato due procedure, per creare una icona a cui è associato il numero di telefono di un contatto.
La prima, la più semplice, ma anche la più completa per i neofiti perché si ottiene da una sola url da inserire nel campo indirizzi di Safari Mobile, è quella che sfrutta il sito web tel.QLNK.net, un server web customizzato da Nate True. Dalla sua guida, iPhone 1.1.3 WebClip hack – Speed Dial on your home screen (disponibile su iPhone Hack in versione ridotta), spiega che è sufficiente inserire nel campo indirizzi di Safari Mobile del proprio iPhone, la seguente URL così formattata:

numero_telefono.tel.QLNK.net

Es.
339123456.tel.QLNK.net

Ecco cosa accade se si inserisce la precedente URL su Safari Mobile:

iPhone Hack Calling - 1

Per ragioni di sicurezza viene chiesta la conferma prima di iniziare la chiamata:

iPhone Hack Calling - 2

Per personalizzare l’immagine da inserire nell’icona, e non lasciare quella di default, è possibile aggiungere, alla fine della URL la seguente stringa:

in cui http://path.to/photo andrà sostituito col percorso di una foto (attenzione deve essere una PNG 60×60 pixel, da 72 DPI) residente su un server web. Se non avete uno spazio web vostro, potete fare affidamento ad uno dei tanti servizi di image hosting, uno fra tutti imageshack, ma essendo foto spesso personali, abbiate l’accortezza di cancellarle dopo aver eseguito le operazioni (nel caso di imageshack dovrete essere registrati per poter cancellare le immagini che avete precedentemente caricato).

Procedura 2 per creare una icona associata ad un contatto

Ma la soluzione migliore, secondo me, è quela offerta da MadeBySquad con il suo iPhone-Photo-Dial che offre la possibilità di avere una pagina web (visibile, però, solo da Safari Mobile) con 3 tre campi per inserire, rispettivamente, numero di telefono, nome dell’icona e url del percorso dove è possibile trovare una icona PNG 60×60 pixel da 72 dpi.

Ecco la procedura visuale di quando si usa: iPhone-Photo-Dial.

Collegarsi al sito “http://madebysquad.com/iphone-photo-dial/” ed inserire nei tre campi, nell’ordine, il numero di telefono, il nome da assegnare all’icona (che di solito dovrebbe coincidere col nome del contatto) e la url del percorso dove è stata caricata l’icona (di default ne viene proposta una standard, ma vi consiglio di creare una immagine PNG 60×60 pixel da 72 dpi con la foto del contatto).

iPhone Photo Dial - 1

Dopo aver cliccato sul tasto “Create Photo Dial Icon” verrà mostrato un messaggio popup con la procedura da seguire per installare l’icona sulla SpringBoard dell’iPhone:

iPhone Photo Dial - 2

Dopo qualche istante verrà caricata questa pagina con una immagine cliccabile:

iPhone Photo Dial - 3

Se si fa tap sulla immagine verrà chiesta all’utente, per ragioni di sicurezza, la conferma prima di iniziare una chiamata:

iPhone Photo Dial - 4

Ora è venuto il momento di salvare l’icona del contatto sulla SpringBoard. Basterà premere il tasto + (presente in basso su Safari Mobile)

iPhone Photo Dial - 5

e cliccare sul tasto “Aggiungi a Home”

iPhone Photo Dial - 6

Dopo aver cliccato su “Aggiungi”, l’icona del nostro contatto verrà caricata sulla SpringBoard!

iPhone Photo Dial - 7
Considerazioni finali

Inizialmente, potrete pensare che il messaggio popup che vi chiede conferma per la chiamata al numero di telefono, sia una cosa fastidiosa. In realtà, credo che a lungo andare, possa invece risultare molto utile quando capiterà di toccare per errore l’icona dei contatti e iniziare una chiamata per errore. Un’altra cosa fastidiosa, piuttosto, è che ad ogni chiamata viene aperto sempre Safari Mobile e al termine della chiamata rimane aperto, costringendovi a richiuderlo col tasto Home, ma questo credo che non si possa eliminare ed è parte integrante dell’hack del riconoscimento del numero telefonico da parte del browser (credo che analogamente accade per le applicazioni per App Store).

iPhone Hack Calling - 1

In definitiva, queste procedure manuali funzionano allo stesso identico modo degli applicativi venduti su App Store, anche se alcuni di questi semplificano nettamente la gestione della importazione delle fotografie, che avviene del tutto automaticamente. Per cui se siete inesperti potete benissimo provare a comprare una delle tre applicazioni sopra riportate (o aspettare che ne esca una gratuita), altrimenti, se avete un minimo di dimestichezza col web, potete provare la procedura da me suggerita e vedrete che non rimarrete delusi!

Tag:app, Apple, browser, firmware, icone, iPhone, Mobile, png, safari
CONTINUE READING >
2 comments
Dic 22 2007

IEPNGFix: come risolvere il problema della trasparenza delle PNG su Internet Explorer

Posted by Antonio Troise
Tweet

E’ noto a tutti che uno dei grandi problemi di Internet Explorer (dalla release 5.5 alla attuale 7) è quello di non riuscire a visualizzare correttamente la trasparenza presente nei file immagine di tipo PNG.
Per chi non lo sapesse il formato PNG (Portable Network Graphics) fu creato nel 1995 da un gruppo di autori indipendenti, dopo che nel 1994 il popolarissimo formato GIF iniziò ad avere problemi di brevetti. Superficialmente simile al GIF, in quanto è capace di immagazzinare immagini in modo lossless, non ha molte delle limitazioni tecniche del formato GIF: infatti, è in grado di memorizzare immagini in colori reali (mentre il GIF era limitato a 256 colori) e ha un canale dedicato per la trasparenza (layer alpha).
Purtroppo, nonostante tutti i maggiori programmi di grafica e di navigazione supportino correttamente questo formato grafico, l’unica eccezione è appunto Internet Explorer versione 5 e superiore. Infatti, anche nella più recente versione di Explorer, nonostante permetta la visualizzazione del formato PNG, il layer alfa è gestito male.

In particolare, IE dalla versione 5.5 alla 6 è infatti in grado di mostrare le PNG, ma non ha il supporto per la trasparenza variabile. Infatti IE5.5 e 6 riescono a leggere queste immagini senza trasparenza o con trasparenza binaria (se quindi si presentano a 8bit) ma per le immagini con trasparenza variabile, non esisteva ancora una piena compatibilità, mostrando un antiestitico colore grigio.
Questo, almeno apparentemente, sino all’avvento di IE7.

PNG alpha layer IE7

Per quanto riguarda IE7, quindi, nonostante si dica che sia stato pienamente supportato il formato PNG, dopo alcuni test si è scoperto che IE7 tratta i PNG (ad 8 bit o 24) in modo differente dagli altri browser come FireFox e Opera, creando un ennesimo antiestetico effetto di taglio su un’immagine PNG usata come sfondo in repeat-x, mentre solo FireFox rende perfettamente lo stacco.
Eccone un esempio:

IE7: PNG before and after

Questa è una cosa che molti webmaster e webdesigner devono tenere conto: io personalmente, quando ho sviluppato il template di questo sito, avevo usato delle iconcine png con lo sfondo trasparente, ma quando ho fatto il test di visualizzazione su Explorer, mi sono accorto che ognuna di esse era contornata da uno sfondo grigio chiaro e sono stato, quindi, costretto a convertirle in GIF, perdendo una inevitabile fetta di colori.

Se molti, preferiscono professare il motto “abbandonate explorer” è anche vero che, dati alla mano, è ancora il browser più usato al mondo (ovviamente solo perché preinstallato sul sistema operativo più diffuso al mondo) e quindi occorre considerare fix che possano permettere la corretta visualizzazione della trasparenza delle immagini in PNG.

Nel tempo molti si sono cimentati nella soluzione definitiva lato server, in attesa che Microsoft risolva il problema a monte, ovvero, semplicemente, ripristinando la corretta visualizzazione del layer alpha da parte dell’engine di rendering di IE. Tra queste posso citare articoli come PNG in Explorer 6, PNG Behavior, Cross-browser semi-transparent backgrounds e The PNG problem in Windows Internet Explorer

Per molti, però, la soluzione migliore per poter utilizzare le PNG con trasparenza anche con Internet Explorer, consiste nell’usare IEPNGFix (qui trovate la demo, mentre qui potrete scaricare il pacchetto zip).

Per attivarlo sul proprio sito basterà copiare questo file htc, e questo file blank.gif nella vostra cartella di lavoro e, quindi, inserire nel vostro foglio di stile questa riga di codice css (comprensivo di commenti condizionali al fine di garantire la validazione del css):

Soluzioni lato client si possono trovare anche qui dove, usando Multiple IE su Windows XP, si consiglia di copiare due file dll (dxtmsft.dll e dxtrans.dll) nella cartella “C:\WINDOWS\ServicePackFiles\i386“.

Ora che avete finalmente risolto l’annoso problema della trasparenza del PNG su IE, potete godervi la lettura di questo interessante articolo di Digital Web Magazine, Creative Use of PNG Transparency in Web Design, che spiega come far uso sapientemente delle partially transparent implementabili sulle immagini PNG per creare suggestivi effetti sul proprio sito.

Tag:browser, firefox, ie, ie7, microsoft, png, Windows
CONTINUE READING >
6 comments
Lug 15 2007

Fooplot: generare online grafici di funzioni matematiche

Posted by Antonio Troise
Tweet

Fooplot Fooplot è un bel sito sviluppato interamente in Ajax per la generazione di grafici online a partire da funzioni algebriche semplici o complesse. Il tutto può essere esportato e salvato nei formati pdf, eps, png, svg.
L’area del grafico è molto interattiva e si può spostare il punto di osservazione con un semplice drag e drop e, inoltre, è possibile zoomare su una determinata area.
Molto interessante lo sviluppo di grafici in 3D in cui è possibile spostare gli assi x, y e z per variare il punto di osservazione (come mostrato nel grafico di questo articolo della funzione: sin(x)*cos(y))
Infine, come non citare la possibilità di creare grafici anche da riga di comando: infatti basterà inserire dopo la URL del sito la funzione che ci interessa visualizzare come:

http://fooplot.com/sin(x)
http://fooplot.com/x^2+2*x+1
http://fooplot.com/latuafunzione

per ottenere lo sviluppo del grafico (che di default sarà sempre in 2D).

Tag:Ajax, creare_grafici, Matematica, png, svg
CONTINUE READING >
3 comments
SeguiPrezzi - Risparmia con Amazon.it

Categorie

Commenti Recenti

  • Antonio Troise on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Fioredicollina on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Antonio Troise on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Emanuele on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Luca on iDatabase: la valida alternativa di Bento per macOS e iOS per i database personali

Meta

  • Accedi
  • Entries RSS
  • Comments RSS
  • WordPress.org

Friends Link

  • GamerTagMatch
  • SeguiPrezzi.it – Risparmia con Amazon.it
  • Trendy Nail

Seguimi su:

  • facebook
  • twitter
  • rss
Creative Commons License
Levysoft by Antonio Troise is licensed under a Creative Commons Attribuzione-Non commerciale 2.5 Italia License.
© Copyright 2004 - 2014 - Levysoft by Antonio Troise