i3Factory accompagna il Ministero del Lavoro che attraverso il Sistema Editoriale i3Editorial sbarca su App Store.
Uno strumento agile per essere sempre aggiornati sul mondo del lavoro. La newsletter di Cliclavoro è un appuntamento mensile che raccoglie le più importanti novità del settore: tendenze del mercato del lavoro, opportunità dall’Europa, interviste a personalità di spicco.

La Newsletter si articola in 5 sezioni:

• In apertura
• Approfondimento
• L’intervista
• Dall’Europa
• Dai Social Network

Tieniti aggiornato sull’andamento del mercato con dati e informazioni arricchiti da link e contenuti multimediali.
Per seguire in tempo reale le news dal mondo del lavoro scarica l’applicazione CliComunica.
Versione Apple iPhone e iPad: https://itunes.apple.com/it/app/clicomunica/id582587332?mt=8

Versione per Android: https://play.google.com/store/search?q=clicomunica&c=apps

Spesso ci capita di dover aggiornare le nostre applicazioni con  le immagini ad alta risoluzione necessarie per il nuovo iPad (iPad 3 o iPad 4). Fortunatamente il nuovissimo iPad Mini ha mantenuto la stessa risoluzione del primo degli iPad che è di 1024 x 768 pixels.
Poichè non è sempre semplice trovare i documenti ufficali di  Apple , in questo articolo ho nuovamente raccolto tutte le informazioni di cui abbiamo bisogno per aggiornare le icone, le immagini di intro o splash, e così via.

Innanzi tutto partiamo da questa utile tabella:

Ricordiamo che con il passaggio da iOS 5 a iOS 6 è nato il nuovo iPhone 5, insieme con l’iPod touch di 5 ° generazione.
Questi nuovi dispositivi Apple hanno solo un grande cambiamento che aggravia il lavoro di sviluppo delle App: la risoluzione dello schermo.
Questi dispositivi hanno un ampio schermo 4″ , WDVGA (Wide VGA doppia) 640 × 1136 pixels, 326 DPI-Retina display.
Questi dispositivi hanno la stessa larghezza 4/4S iPhone ma più 176 pixel di altezza in modalità Portrait.

App Icon Template

Segnalo nuovamente, come ho gia fatto in un’altro articolo, questo utilissimo tool scaricabile direttamente dal sito “appicontemplate.com” .

Scaricando il file otterrete un modello PSD del’ icona dell’App che, attraverso oggetti avanzati in Photoshop, vi permette di automatizzare il processo di esportazione delle varie dimensioni del file icon.png che devono essere necessariamente incluse nel bundle di ogni iOS App.

Attraverso questo modello Photoshop potremo modificare solo l’icona di dimensione più grande e verrà automaticamente eseguito il rendering che permetterà di avere le icone di dimensioni minori attraverso un veloce flusso di lavoro.
Questo modello è stato creato dal designer danese Michael Flarup.

Come si usa (How to) App Icon Template ?
Il modello funziona con Photoshop CS2 o versioni successive.
Basta aprire il file PSD con la vostra versione di Photoshop e fare “clic destro” sul LAYER (Livello) chiamato “EDIT THIS SMART OBJECT” (MODIFICARE QUESTO OGGETTO SMART) e premere  su ’Edit Contents’ (“Modifica contenuto”).
Verrà aperto il file Icon.psb e potrete creare il vostro Artwork  in questo canvas (quadro).
Dopo aver salvato il Icon.psb, dovrebbe essere automaticamente eseguito il rendering per le diverse dimensioni del file PSD principale .
E’ possibile utilizzere le Actions (azioni automatizzate) di Photoshop che sono in bundle con la risorsa per esportare i file dell’icona nelle versioni squared and rounded corner (squadrate e arrotondate).

Buon Design!

Perché parliamo di Produzioni video cenematografiche

Si potrebbe pensare che la gestione video sia limitata ad applicazioni come iMovie o Vimeo e a una nicchia di esperti video. Invece può essere esteso ad una gamma più ampia di applicazioni, non è essenzialmente limitato a editing video. In questo articolo forniremo una panoramica del Framework AV Foundation applicato su un esempio pratico.

Nel nostro caso particolare, la sfida era quella di creare un’applicazione che, partendo da una serie di clip video esistenti, fosse stata in grado di costruire una storia fatta collegando un sottoinsieme di queste clip sulla base di decisioni prese dall’utente durante l’interazione con l’applicazione.
Il gioco finale è un insieme di scene, girato in luoghi diversi, che compongono una storia. Ogni scena è composto da un prologo, una conclusione (epilogo) e una serie di piccole clip che verranno eseguite dall’applicazione sulla base di alcune scelte fatte dagli spettatori – utenti- giocatori.  Se le scelte sono corrette, lo spettatore sarà in grado di riprodurre tutta la scena fino al suo lieto fine, ma in caso di errore dovrà tornare sulla scena prologo iniziale o in una certa scena intermedia. Lo schema seguente mostra un possibile schema di una tipica scena: un prologo, un flusso vincente (verde) alcuni rami (giallo sono intermedie, il rosso stanno perdendo filiali) e di un lieto fine. Così gli spettatori da qualche parte nel TRACK1 saranno chiamati a prendere una decisione, se lui / lei è in quel momento in gioco continuerà con TRACK2, se non entrerà nel giallo Track4, e così via

Quello che abbiamo tra le mani è la serie completa di tracce, ogni traccia rappresenta una sottosezione specifica di una scena, e uno storyboard che ci fornisce le regole da seguire per costruire la storia finale. Così lo storyboard è fatto dalle scene, dalle tracce del compongono ogni scena e dalle norme che stabiliscono il flusso attraverso queste tracce.
La sfida principale per lo sviluppatore è quello di mettere insieme queste clip e riprodurre un video in base allo stato attuale dello storyboard, quindi passare alla successiva, selezionare un nuovo clip di nuovo e così via: tutto deve trascorrere fluidamente senza interruzioni.
Lo spettatore deve prendere le decisioni, interagendo con l’applicazione-gioco e questo può essere fatto sovrapponendo al film con alcuni controlli personalizzati.

AV Foundation Framework

Sarebbe impossible raggiungere gli obiettivi spiegati nel paragrafo precedente utilizziando lo standard Media Framework view controllers, MPMoviePlayerController e MPMoviePlayerViewController. Questi conrollers sono buoni per riprodurre un filmato e fornire i controlli di sistema, a schermo intero e la rotazione del dispositivo di sostegno, ma assolutamente non adatti per i controlli avanzati.
Dopo il rilascio di iPhone 3GS dell’utility per la fotocomara avevamo la possibilità di fare un po ‘di tagli e l’esportazione, ma queste capacità non sono state date agli sviluppatori attraverso le funzioni pubbliche del SDK. Con l’introduzione di iOS 4, l’attività svolta da Apple con lo sviluppo delle app iMovie ha dato agli sviluppatori un ricco insieme di classi che consentono la manipolazione completa dei video . Tutte queste classi sono state raccolte ed esportate in un unico framework pubblico, denominato AV Foundation. Questo framework esiste da iOS 2.2, a quel tempo era dedicato alla gestione audio con la ben nota classe AVAudioPlayer, poi è stato esteso in iOS 3 con il AVAudioRecorder e le classi AVAudioSession ma il set completo di funzionalità che consentono capacità video avanzate ha avuto luogo solo a partire dal iOS 4 e sono stati pienamente presentati al WWDC 2010.

La posizione della AV Foundation nello iOS Frameworks stack si trova  sotto UIKit, dietro l’application layer, e immediatamente sopra i basic Core Services frameworks, in particolare Core Media che viene utilizzato da AV Foundation per importare strutture di temporizzazione e le funzioni necessarie per la gestione dei media . In ogni caso si può notare la diversa posizione nello stack rispetto Media Player di alto livello. Ciò significa che questo tipo di struttura non è in grado di offrire una classe plug-and-play  per la riproduzione di semplici video , ma si potranno apprezzare i moderni concetti di alto livello che sono alla base di questo framework, di sicuro non siamo allo stesso livello dei vecchi framework come core Audio.

(image source: from Apple iOS Developer Library)

Building blocks

L’organizzazione dele classi di AV Fondation è abbastanza intuitiva. Il punto di partenza e il building block principale è data da AVAsset. AVAsset rappresenta un oggetto statico multimediale ed è essenzialmente un aggregato di tracce che sono rappresentazioni temporizzate  di una parte de media. Tutti i brani sono di tipo uniforme, in modo che possiamo avere tracce audio, tracce video, tracce sottotitoli, e un complesso di attività può essere fatto di più tracce dello stesso tipo, ad esempio siamo in grado di avere più tracce audio. Nella maggior parte dei casi un asset è fatto di un audio e una traccia video. Si noti che AVAsset è una classe astratta per cui è indipendente dalla rappresentazione fisica dei media che rappresenta, inoltre la creazione di un’istanza AVAsset non significa che noi abbiamo tutti i media pronti per essere riprodotti, si tratta di un puro oggetto astratto.

Ci sono due classi di attività disponibili: AVURLAsset, per rappresentare un supporto in un file locale o in rete, e AVComposition (insieme con la sua variante mutevole AVMutableComposition ) per un’attività composta da più supporti. Per creare una risorsa da un file abbiamo bisogno di fornire l’URL del file:

NSDictionary *optionsDictionary = [NSDictionary dictionaryWithObject:[NSNumber numberWithBool:YES] forKey:AVURLAssetPreferPreciseDurationAndTimingKey];
AVURLAsset *myAsset = [AVURLAsset URLAssetWithURL:assetURL options:optionsDictionary];

L’ options dictionary poò risultare nullo ma per i nostri scopi – per fare una composizione film – abbiamo bisogno di calcolare la durata esatta e fornire l’accesso casuale ai media. Questa opzione extra, che è l’impostazione su YES della chiave AVURLAssetPreferPreciseDurationAndTimingKey, potrebbe richiedere più tempo durante l’inizializzazione delle attività, e questo dipende dal formato di film. Se questo film è in QuickTime o MPEG-4, il file contiene informazioni aggiuntive che in sintesi annulla il tempo in più, ma ci sono in altri formati, come MP3, in cui queste informazioni possono essere estratte solo dopo la decodifica del media file, in tal caso l’inizializzazione del tempo non è trascurabile. Si tratta di una prima raccomandazione che diamo agli sviluppatori: si prega di utilizzare il formato del file a seconda dell’applicazione.
Nella nostra applicazione dobbiamo già conoscere le caratteristiche dei film che stiamo usando, ma in un diverso tipo di applicazione, in cui è necessario fare un po ‘di editing dei filmati, si può essere interessati a ispezionare le proprietà delle risorse. In tal caso si deve ricordare la regola di base che l’inizializzazione di un asset non significa aver caricato e decodificato in memoria: questo significa che ogni proprietà del file multimediale può essere ispezionata, ma questo potrebbe richiedere un poco di tempo in più. Per completezza abbiamo semplicemente introdotto il modo asset inspection che può essere fatto lasciando l’utente interessato alla documentazione di riferimento (vedere l’elenco proposto letture alla fine di questo post). Fondamentalmente ogni proprietà dell’attività può essere verificata utilizzando un protocollo asincrono chiamato AVAsynchronousKeyValueLoadingwhich che definisce due metodi:

- (AVKeyValueStatus)statusOfValueForKey:(NSString *)key error:(NSError **)outError
– (void)loadValuesAsynchronouslyForKeys:(NSArray *)keys completionHandler:(void (^)(void))handler

Il primo metodo è sincrono e restituisce immediatamente lo stato di conoscenza del valore specificato. Ad esempio si può chiedere lo status di “durata” e il metodo restituisce uno di questi stati possibili: carico, carico, fallito, sconosciuto, annullato. Nel primo caso il valore di chiave è noto e quindi il valore può essere immediatamente recuperato. Nel caso in cui il valore è ignoto è opportuno richiamare le loadValuesAsynchronouslyForKeys:completionHandler: metodo che alla fine dell’operazione chiamerà il callback dato nel completionHandlerblock, che a sua volta interroga lo stato di nuovo per l’azione appropriata.

Video composition

Come abbiam detto all’inizio, il nostro storyboard è composto da una serie di scene e ogni scena è composta da diverse clip il cui ordine di riproduzione non è nota a priori. Ogni scena si comporta indipendentemente dalle altre in modo da creare una composizione per ogni scena. Quando abbiamo un insieme di attività, o tracce, e da loro si costruisce una composizione nel complesso stiamo creando un altro asset. Questo è il motivo per cui le classi AVComposition e AVMutableComposition sono sottoclassi della classe  AVAsset base.
È possibile aggiungere contenuti multimediali all’interno di una composizione mutevole, semplicemente selezionando un segmento di un bene, e l’aggiunta di una gamma specifica di nuova composizione:

- (BOOL)insertTimeRange:(CMTimeRange)timeRange ofAsset:(AVAsset *)asset atTime:(CMTime)startTime error:(NSError **)outError

Nel nostro esempio abbiamo una serie di tracce che si desidera aggiungere una dopo l’altra per generare un insieme continuo di clip. Così il codice può essere semplicemente scritto in questo modo:

AVMutableComposition = [AVMutableComposition composition];
CMTime current = kCMTimeZero;
NSError *compositionError = nil;
for(AVAsset *asset in listOfMovies) {
BOOL result = [composition insertTimeRange:CMTimeRangeMake(kCMTimeZero, [asset duration])
ofAsset:asset
atTime:current
error:&compositionError];
if(!result) {
if(compositionError) {
// manage the composition error case
}
} else {
current = CMTimeAdd(current, [asset duration]);
}
}

Prima di tutto abbiamo introdotto il concetto di tempo. Si noti che tutti i media hanno un concetto di tempo diverso dal solito. Prima di tutto il tempo può muoversi avanti e indietro, oltre il lasso di tempo può essere superiore o inferiore a 1x se si sta visionndo il filmato al rallentatore o in avanzamento rapido. Inoltre si ritiene più conveniente  rappresentare il tempo non come virgola mobile o un numero intero, ma come numeri razionali. Per tale ragioneil framework  Core Media  fornisce la CMTimestructure e un insieme di funzioni e macro che semplificano la manipolazione di queste strutture. Quindi, al fine di costruire una specifica istanza time instance:

CMTime myTime = CMTimeMake(value,timescale);

che infatti specifica un numero di secondi proposto dal value/timescale. La ragione principale di questa scelta è che i film sono fatti di frames e i fotogrammi sono dati ad una razione fissa al secondo. Così, per esempio, se abbiamo una clip che è stata ripresa a 25 fps, allora sarebbe conveniente per rappresentare l’intervallo singolo fotogramma come un insieme variabile CMTime con valore = 1 e tempi = 25, corrispondente a 1/25th di secondo. 1 secondo  è dato da un CMTime con valore = 25 e timescale = 25, e così via (ovviamente si può ancora lavorare con i secondi, se volete, è sufficiente utilizzare i CMTimeMakeWithSeconds (seconds) function). Quindi, il codice di cui sopra inizialmente imposta l’ora corrente a 0 secondi (kCMTimeZero) quindi avvia l’iterazione su tutti i nostri film che sono assets in. Poi si aggiunge ciascuna di questi asset nella posizione corrente della nostra composizione con la loro gamma completa ([asset duration]). Per ogni asset spostiamo la composition head (current) per la lunghezza (in CMTime) dell’asset. A questo punto la composizione è fatta di un set completo di brani aggiunti in sequenza. Ora possiamo giocare.

Playing an asset

Il framework AVFoundation non offre alcuna player integrato, come siamo abituati a vedere con MPMovieViewController. Il motore che gestisce lo stato di riproduzione di un asset è fornito dalla classe AVPlayer. Questa classe si occupa di tutti gli aspetti relativi al play dell’asset ed essenzialmente è l’unica classe in AV Foundation che interagisce con i controller di visualizzazione dell’applicazione per mantenere in sincronia la logica dell’applicazione con lo stato di riproduzione: questo è rilevante per il tipo di applicazione che stiamo prendendo in considerazione in questo esempio, come lo stato di riproduzione può cambiare durante l’esecuzione del filmato base alle specifiche interazioni dell’utente  in momenti specifici all’interno del film. Tuttavia non abbiamo una relazione diretta tra AVAsset e AVPlayer, la loro connessione è mediata da un’altra classe denominata AVPlayerItem. Questa organizzazione delle classi ha lo scopo di separarel’asset, considerato come un’entità statica, dal player, puramente dinamico, fornendo un oggetto intermedio, che rappresenta uno stato specifico di presentazione di un asset. Ciò significa che per un determinat e unicoo asset  possiamo associare elementi di più players, tutti  rappresentano diversi stati dello stesso asset e eseguito da diversi players. Quindi, il flusso in questo caso è dato da un determinato asset che crea un elemento di player e poi lo assegna al pleyer finale.

AVPlayerItem *compositionPlayerItem = [AVPlayerItem playerItemWithAsset:composition];
AVPlayer *compositionPlayer = [AVPlayer playerWithPlayerItem:compositionPlayerItem];

Al fine di eseguire il rendering sullo schermo, dobbiamo fornire una view in grado di rendere lo stato attuale di player. Abbiamo già detto che iOS non offre on-the-shelf una vista per questo scopo, ma quello che offre è un livello speciale CoreAnimation chiamato AVPlayerLayer. Quindi è possibile inserire questo livello nella gerarchia a livello di Anteprima del player o, come nel seguente esempio, utilizziamo questo come livello di base per questa view. Quindi, l’approccio suggerito in tal caso è quello di creare un MovieViewer personalizzato e il  set AVPlayerLayeras base layer class:

// MovieViewer.h

#import <UIKit/UIKit.h>
#import <AVFoundation/AVFoundation.h>
@interface MovieViewer : UIView {
}
@property (nonatomic, retain) AVPlayer *player;
@end

// MovieViewer.m

@implementation MovieViewer
+ (Class)layerClass {
return [AVPlayerLayer class];
}
– (AVPlayer*)player {
return [(AVPlayerLayer *)[self layer] player];
}
– (void)setPlayer:(AVPlayer *)player {
[(AVPlayerLayer *)[self layer] setPlayer:player];
}
@end

// Intantiating MovieViewer in the scene view controller
// We suppose “viewer” has been loaded from a nib file
// MovieViewer *viewer
[viewer setPlayer:compositionPlayer];

A questo punto siamo in grado di riprodurre il filmato, che è abbastanza semplice:

[[view player] play];

Translated from Carlo’s post

Quando si decide di progettare un’App è sempre necessario seguire i principi di base della progettazione industriale.
Molte persone  pensano di commissionare un’app, ma quando si trovano a dover descrivere l’applicazione e quindi come la loro idea possa essere tradotta nell’esperienza dall’utente e nell’interfacia grafica (User Experience & User Interface),  si trovano impreparati e si nascondono molto spesso dietro frasi del tipo “non saprei questo è un lavoro per tecnici, pensateci voi tecnici!”.
Inutile aggiungere che quando poi i cosidetti “Tecnici” si mettono al lavoro queste persone, che non hanno vuluto delegare il concept, inizieranno a chiedere modifiche sostanziali dispensando consigli e ragguagli di ogni genere e quasi sempre solo dopo che l’app e’ arrivata alla fase finale del suo sviluppo.
E’ ben noto il concetto secondo il quale i “tecnici”, e gli ingegnieri, prima costruiscono il cuore dell’applicazione e poi ci adattano il design e fanno il contrario, loro malgrado, solo se il commitment e’ valido e convincente e, sopratutto, quando questo è deciso fin dall’inzio delle fasi di progettazione.
Di norma con l’approccio “fate voi che poi vediamo” , voluto dai professionisti distratti e poco preparati,  il risultato estetico finale può risultare quantomai scadente dato che ogni ingegniere sa bene che, prima di mettersi a scrivere codice, bisogna aver chiari i principi dell’interfaccia utente unitamente alla descrizione delle funzionalità legate all’esperienza dell’utente stesso.

Alcuni sofisti mi potranno criticare per l’uso della parola “utente”, che a volte risulta poco accattivante se si pensa che alla fine gli utenti non sono altro che persone, ovvero individui utilizzatori. Questa differenza di significato delle parole mi è molto chiara, ma per semplicità comunicativa e sopratutto per necessità di traduzione preferisco usare la parola “utente” o “utilizzatore” al posto dell’ “individuo“.

10 principi per un buon design di un’app e di un prodotto

Inanzi tutto,  per citare Steve Jobs,  propongo  una delle definizioni di design che più mi ha convinto:
“Il design è l’anima che si trova al cuore di un oggetto creato dall’uomo e che gradualmente si estrinseca ai piani esteriori.”

Di certo lo stesso Jobs si ispirava ai principi di Dieter Rams, ex-designer della Braun, che ha enumerato i suoi 10 principi per un  buon design di un prodotto:

Dieter Rams e i suoi prodotti di design

• Un buon design deve essere innovativo.
• Un buon design deve rendere il prodotto utile.
• Un buon design deve essere dotato di estetica.
• Un buon design deve aiutare a capire il prodotto.
• Un buon design non deve essere invasivo, mancare di riservatezza.
• Un buon design deve essere onesto.
• Un buon design deve essere durevole.
• Un buon design è la conseguenza dell’ultimo dettaglio.
• Un buon design si deve preoccupare dell’ambiente.
• Un buon design deve contenere il minor design possibile.

Naturalmente è facile capire che questi principi si adattano sia al design dei prodotti industriali, ma anche per il design delle Applicazioni, sopratutto se queste verranno utilizzate sui prodotti che sono stati costruiti proprio secondo i buoni principi del design industriale, come lo sono tutti i prodotti Apple.

Progettare meglio, lavorare meno

Dieter Rams, creatore dei 10 principi, ha sempre espresso il suo approccio al design con la frase: “Weniger, aber besser” , ovvero “Meno, ma meglio” .
Il minimalismo , oltre ad essere molto elegante, è sicuramente il modo migliore per permettere a tutti gli utenti-utilizzatori di comprendere d’istinto il prodotto e le sue funzionalità e rende il prodotto stesso, o l’App,  amichevole all’uso (user friendly) e “puro”.

Di seguito riporto i commenti , tradotti dall’inglese, dello stesso Rams sui principi da lui stesso enunciati:

1.  Le possibilità d’innovazione non sono esaurite. Lo sviluppo tecnologico offre sempre nuove opportunità per il design innovativo. Ma il design innovativo si sviluppa sempre assieme alla tecnologia innovativa, e non può mai essere fine a se stesso.
   (The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself )
2. Un prodotto viene acquistato per essere utilizzato. Esso deve soddisfare determinati criteri, non solo funzionali, ma anche psicologici ed estetici. Un buon design sottolinea l’utilità di un prodotto, mentre trascura tuuto ciò che potrebbe sminuirla.
   (A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it. )
3. La qualità estetica di un prodotto è parte integrante della sua utilità, perché i prodotti che utilizziamo ogni giorno influiscono sulla nostra persona e il nostro benessere. Ma solo gli oggetti ben costruiti possono essere belli.
   (The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.)
4. Chiarifica la struttura del prodotto. Meglio ancora, si può far parlare il prodotto. Meglio se esso è auto-esplicativo.
   (It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.)
5. I prodotti che soddisfano un fine sono come strumenti. Non sono né oggetti decorativi, né opere d’arte. Il loro Design dovrebbe quindi essere sia neutrale che sobrio, per lasciare spazio all’auto-espressione dell’utilizzatore.
   (Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.)
6. Non costruire il prodotto in modo da farlo apparire più innovativo, potente o importante di quanto sia realmente. E non tentare di manipolare il consumatore con promesse che non possono essere mantenute.
   (It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.)
7. Evita di seguire la moda ma non appare mai antiquato. A differenza del design “alla moda”, il prodotto deve durare per molti anni – anche nella società dell’usa e getta di oggi.
   (It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.)
8. Nulla deve essere arbitrario o lasciato al caso. La cura e la precisione, nel processo di progettazione, mostrano il rispetto nei confronti dei consumatori.
   (Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.)
9. Il Design offre un importante contributo alla salvaguardia dell’ambiente. Esso conserva le risorse e riduce al minimo l’inquinamento fisico e visivo durante tutto il ciclo di vita del prodotto.
   (Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.)
10. Meno, ma meglio – questo perchè ci si concentra sugli aspetti essenziali, e i prodotti non sono appesantiti da elementi non essenziali. Torna alla purezza, torna alla semplicità.
    (Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials.Back to purity, back to simplicity.)

Valutazione Euristica

A questo punto non mi resta che descrivere anche la cosidetta valutazione euristica.
La Valutazione Euristica è un metodo ispettivo che viene effettuato esclusivamente dagli esperti di usabilità  e consente di valutare se una serie di principi generali di progettazione sono stati applicati correttamente nell’interfaccia utente.
Le linee guida (“Ten Usability Heuristics”) su cui si basa questo tipo do valutazione sono state sviluppate negli anni 1990 da Jakob Nielsen e Rolf Molich e sono state pensate per i desktop software , ma anche in questo caso questi principi sono ancora validi per le applicazioni studiate per touchscreen, come le App iOS per iPhone e iPad ,  per le  app Android e Window Mobile.

Pagine pre-renderizzate da immagini
Questa tecnica è molto utilizzata all’interno delle riviste altamente interattive pubblicate utilizzando ambienti come Adobe Digital Solutions: esempi ben noti sono le riviste di Condé Nast (Wired è uno degli esempi più famosi).
Il modo in cui sono implementate queste riviste inizia con la suite dei ben noti strumenti di Adobe Digital Publishing (link), In Design in primis. Questi strumenti sono utilizzati da molti editori in tutto il mondo e le ultime versioni offrono la possibilità di esportare il progetto, oltre all’onnipresente formato Pdf, anche in un pacchetto adatto per la distribuzione attraverso iPad. Gli output di questi file possono essere testati utilizzando l’ App gratuita Viewer Adobe Content scaricabile da App Store, ma naturalmente l’applicazione finale, insieme con l’infrastruttura server necessaria per servire i contenuti, richiede una licenza di livello superiore (e costo…).

Ciò che caratterizza questo tipo di riviste è che al momento della creazione del progetto tutte le pagine vengono pre-renderizzate come jpeg o png e poi gli effetti speciali vengono sovrapposti successivamente.
Ciò significa che la sezione centrale (Core reader) del lettore rivista è essenzialmente un visualizzatore di immagini. Certo queste immagini si estenderanno per una superficie leggermente più grande dello schermo iPad, in modo che saranno inserite all’interno di una visione a scorrimento (scroll view), ma sono ancora solo immagini.
Tutto sommato la scelta tecnicamente non è male: l’iPad è molto veloce nel rendering delle immagini rispetto ai file PDF,  i calcoli necessari per trasformare i dati del  Pdf in bitmap non vengono fatti in questo caso, mentre la CPU sarà sufficiente veloce a decomprimere l’immagine e inviarla all’hardware grafico. Esattamente come abbiamo fatto nel caso PDF, possiamo applicare la tecnica di sovrapposizione e imporla su alcuni contenuti che richiedono l’interazione dell’utente sulla parte superiore dello strato di bottom-rendering.

Mentre questa tecnica è altamente efficiente dal punto di vista del tempo di rendering, ed è semplice da implementare in quanto tutte le complessità del layout di pagina sono state prese in considerazione e risolte con gli strumenti di desktop publishing, offre alcune forti limitazioni che devono essere prese in considerazione:

• ogni singola pagina richiede molto più spazio su disco e il tempo di download di questo tipo di riviste è aumentato  in confronto con una pagina pdf, lo spazio occupato è molto più grande e l’informazione di ogni pixel del testo deve essere fornita nel file e non possiamo neppure alleggerirlo forzando l’immagine con alti rapporti di compressione, se non vogliamo introdurre sfocatura nel testo. La pagina pdf, in particolare quelle pagine fatte di solo testo, è molto più leggera in quanto il testo non è pre-renderizzata e si presenta in formato vettoriale.

• lo zoom o il ridimensionamento dei font non è fattibile: invece, PDF e Core Text ridisegnano il testo utilizzando algoritmi vettoriali e rappresentano i font per dimensioni, questo ovvimente non si puà ottenere se si lavora su un’immagine jpg o png statica. Ciò significa che la rivista ha bisogno di essere disegnata con i tipi di carattere specifici e dimensioni prestabilite, i caratteri che sono adatti per la compressione jpeg (senza sfocatura) e per la risoluzione dello schermo (iPad 1 e 2 hanno 132 dpi, non è poi così alto; le cose andranno meglio con il prossimo iPad schermo retina !)

• Ricerca testo, con la rivista fatta d’ immagini non abbiamo la possbilità evidenziare il testo , e quindi la selezione del testo è impossibile, a meno che gli strumenti di pubblicazione digitale per fare le esportazioni  . insieme all’immagine forniscano anche uno schema  della pagina pre-renderizzata con una mappa completa delle coordinate del testo, qualcosa che non francamente non abbiamo ancora visto ma che noi stessi abbiamo implementato , su richiesta, per alcuni clenti del nostro sistema editoriale i3F Editorial.

Adobe non è il solo sistema con cui è possibile a pubblicare questo tipo di riviste con immagini statiche: ci sono diverse applicazioni personalizzate sul mercato che seguono esattamente lo stesso approccio.
Non è male, ma non sfruttano i grandi framework editoriali che Apple sta offrendo ai propri sviluppatori. Inoltre l’approccio basato sull’immagine ha anche molti altri limiti se confrontato con altre tecniche. Di sicuro un editore che è ha la padronanza degli strumenti dell’editoria digitale può trarre vantaggio da questo approccio, la qualità finale è indubbia e il time to market è il più breve, e al tempo stesso permette di fornire un contenuto adatto per l’iPad , e non solo un pdf adattato sullo schermo.

Ma vorremo raccomandare a tutti gli sviluppatori, che stanno facendo prodotti personalizzati e non stanno utilizzando speciali strumenti di composizione pagina (composition tools) di stare lontano da tale metodologia.

Questo articolo e’ stato pubblicato dal nostro CTO , Carlo Vigiani,  su icoder magazine, una validissima rivista per gli sviluppartori iOS.

Core Text  (in breve: CT) è un’altra di quelle tecnologie sviluppate per Mac e in seguito convertita per iOS.
Il framework Core Text è dedicato alla disposizione del testo e alla gestione dei font. Giusto per riassumere le capacità di questo framework, si consideri che è alla base della rivoluzione del desktop publishing che ha reso celebre il Mac in questo settore professionale.
Come Quartz Core Graphic (CG), anche CT (Core Text) ha un API basata su C, esistono comunque diversi wrapper open source di terze parti  che contengono le funzionalità più comuni con un alto livello d’interfaccia Objective-C.
Core Text (CT) non deve essere utilizzato per sostituire il rendering basato sul web a base di Html e Css, questo è un campo troppo complesso
che è meglio lasciare ai componenti di sistema dedicati, come la UIWebView che può essere utilizzata per rendere efficiente un rich text.
CT “comunica” con CG , infatti il rendering del testo è dato contemporanemente al rendering di una view basata su Quartz.
Le due API hanno convenzioni  e regole di gestione della memoria molto simili, per cui lo sviluppatore già abituato con un modello di programmazione “Core Foundation”  non trovera ostacoli nella comprensione della API Core Text.
Questo dà la possibilità allo sviluppatore di mescolare il rendering del testo e le immagini nella fase di rendering stesso (CT è limitata al solo testo, non ha capacità di disegnare l’immagine).

Il motivo principale per usare Core Text è perché questo esegue il rendering del testo direttamente sulla pagina, senza intermediari.
Si differenzia dai formati PDF che considerano ogni pagina come un’intero, si differenzia anche dalle tecniche web di base in quanto non possiede un linguaggio intermedio (come ad es. html) e nemmeno l’interpretazione del layout (css). Con CT si può scrivere direttamente nella pagina.

I componenti di base dietro CT sono oggetti del layout, che sono la traduzione diretta di caratteri in glifi (glyphs), “linee” di caratteri e di “frames”, che corrispondono ai paragrafi. La traduzione dei caratteri in glifi è fatto da “typesetters” e il testo da plottare viene dato attraverso l’utilizzo di stringhe di attributi, che sono stringhe comuni arricchite con informazioni attributo (dimensione del font, colore, ornaments).

Si decide di utilizzare Core Text per una rivista il cui schema sarà principalmente basato su un Testo con layout standard, in modo che si adatterà bene anche per i giornali. Probabilmente non è la scelta migliore per le riviste glamour, dove layout grafico cambia in ogni pagina e potrebbe essere piuttosto complesso.
Un chiaro vantaggio della soluzione basata su Core Text è che, con questo framework, non c’è bisogno di applicare la tecnica di sovrapposizione di cui abbiamo parlato nel paragrafo dedicato al Pdf. Con CT si divide direttamente la pagina in cornici (frames) e ciascuno di questi frames conterrà testo (reso da CT) o elementi multimediali.
Essenzialmente è possibile definire il layout della pagina, definendone la dimensione (che può andare bene per lo schermo iPad oppure può essere con scorrimento pagina verticale o orizzontale), poi si deciderà la dimensione e la posizione dei contenuti multimediali di questa stessa pagina e, infine, si definiranno i frames (diverse cornici rettangolari) che conterranno il testo.
L’organizzazione delle cornici di testo può essere di qualsiasi genere, una compatta struttura a singola colonna, due layout multicolonna o cornici di varie dimensioni. All’interno dei frames dovremo renderizzare il testo e Core Text vi aiuterà a gestire interruzioni di riga per questi paragrafi.
A questo punto si può facilmente fornire all’utente la possibilità di modificare il tipo e la dimensione di font  e lo stesso codice di rendering  può essere riutilizzato per riorganizzare rapidamente il testo all’interno dei frames (cornici).

La rappresentazione del layout di pagina può essere fornita in qualsiasi forma preventivamente decisa dallo sviluppatore assieme all’editore; la scelta migliore sarà il formato XML (tutto sommato è la base di qualsiasi formato di markup!) e che sarà inviato all’applicazione assieme con i testi (ancora in XML) e gli asset in un pacchetto zip file.

Una limitazione del Core Text è che si tratta di una tecnologia per il disegno di testo e non è ottimizzata per la modifica e l’interazione con l’utente, anche se non ne abbiamo bisogno in questa fase. Questo significa che se vogliamo , ad esempio, evidenziare il testo o selezionare e copiare le caratteristiche del testo stesso avremo bisogno di implementarle scrivendo codice.
Il framework ci fornisce alcune API per facilitare questo compito, ma in ogni caso il codice per implementare queste funzionalità deve essere scritto da uno sviluppatore in grado di gestire ogni singolo dettaglio. In ogni caso tutti questi compiti saranno notevolmente semplificati rispetto al PDF: qui, con CT,  si ha il controllo pieno del testo e la sua posizione di schermo, mentre fare quueste operazioni con il Pdf è ancora  piuttosto opaco poichè  il tutto è nascosto dietro una complessa struttura di dati che non si può controllare nella sua interezza.

Concludendo questa terza parte, la nostra raccomandazione è che se si deve implementare una rivista digitale, senza requisiti di layout estremo, con alcuni contenuti multimediali e un controllo veloce e potente di testo,  Core Text è la prima tecnologia da considerare.

Un ottimo tutorial su questo argomento è disponibile a questo link su Ray Wenderlich blog:
http://www.raywenderlich.com/4147/how-to-create-a-simple-magazine-app-with-core-text

Questo articolo e’ stato pubblicato dal nostro CTO , Carlo Vigiani,  su icoder magazine, una validissima rivista per gli sviluppartori iOS.

NDR.
Per approfondimenti sul wrapper di Core Text segnaliamo un articolo: http://akosma.com/2010/07/08/core-text-objective-c-wrapper/

La Rivista / Magazine è un file PDF

Qualora vogliate  impegnarvi a sviluppare una magazine app per iPad, che vi piaccia o meno,  la rivista che avrete a disposizione dall’editore vi sarà consegnata – con molta probabilità -  un file PDF.
Poiché non c’è modo di “sfuggire” da esso, alla fine sarà necessario sviluppare il vostro proprio lettore pdf o integrare qualche libreria gratuita o commerciale esterno. i3Factory ha a questo proposito sviluppato un reader propietario che possiede tutte le caratteristiche necessarie per pubblicare una magazine app alquanto performante.

Il motivo per cui pdf è ancora il formato dominante nel mondo dell’editoria e quindi e-publishing  ci appare chiaro:
la maggior parte degli editori fanno semplicemente il porting delle loro pubblicazioni esistenti e stampate su carta per iPad e iPhone. Questo per sia per ragioni di bilancio, dato che è ovvio che desidera riutilizzare l’investimento fatto nella creazione delle proprie testate e sia perchè gli editori – tranne rare eccezioni -  non possiedono ancora un modello di produzione volto alla piena fruizione multimediale dei propri contenuti.

Pertanto, come sviluppatori, non sarete ancora in grado di sfuggire al formato Pdf con l’eccezione di due casi:
1) la pubblicazione è nuovo di zecca e solo digitale, quindi non ci sono precedenti inparamenti per guidare la scelta finale

2) L‘editore ha grandi budget e / o è una forte esperienza utente (UX), è quindi un reale possessore di capacità di vision futura e crede nella nostra visione  e accetta di allocare il budget extra per ricreare un formato diverso per le proprie pubblicazioni.

In entrambi i casi non sono così rari incontri con quegli editori che hanno già  fatto lo sforzo di portare i propri prodotti sul web (con la notevole eccezione di quelli che ha fatto in Flash!), ma la gran parte delle case editrici piccole e medie imprese sarà ancora bloccata con in formato Pdf.

Purtroppo il Pdf non è il modo migliore per portare un magazine su iPad o altri tablet. E questo per diverse ragioni:

• La pagina di una rivista stampata ha dimensioni solitamente più grande dello schermo iPad o di un Tablet tradizionale: questo significa che quando la pagina si adatta allo schermo, tutti i caratteri appaiono più piccoli e quindi qualcosa di leggibile nella carta stampata potrebbe diventare illeggibile senza zoom, ma lo zoom non è sempre efficiente ed in particolare non è amato da tutti i lettori che possono perdere il loro “orientamento” all’interno la pagina.

• Le pagine di riviste stampate  non hanno le stesse proporzioni dello schermo iPad: questo significa che una pagina che si adatta allo schermo sarà delimitata da righe vuote in alto / basso o destra / sinistra.

• I layout di una pagina stampata spesso sono ottimizzati per lunghezza, per esempio un immagine panorama che si sviluppa
tra due pagine, quando il dispositivo viene tenuto in orientamento verticale, i dettagli grafici andranno persi, invece se il dispositivo è tenuto in orizzontale si sarà in grado di apprezzare le due pagine di layout, ma i caratteri saranno troppo piccolo per essere letti comodamente.

• I file forniti dall’editore non sono ottimizzati per il digitale, normalmente i contorni (tabella dei contenuti) e le annotazioni (Collegamenti a pagine o risorse esterne) non vengono esportati; questo significa che anche se il vostro lettore Pdf è consapevole di queste informazioni, nella maggior parte dei casi non è disponibile e quindi è necessario definire un divero modo di fornirle.

• Il formato ufficiale PDF supporta contenuti multimediali; purtroppo l’IOS non è in grado di gestirlo, per cui  tutti i contenuti interattivi devono essere fornite al di fuori del file pdf e associati ad esso.

Il rendering delle pagine è realizzato in iOS (e anche in OSX) attraverso il Quartz 2D API, cono Core
Graphics framework (CG). Quartz 2D è il motore grafico bidimensionale su cui si basano molte (ma non tutte)  funzionalità di disegno di IOS. Il
PDF API è un sottoinsieme del grande CG API. Questa API è “vecchio stile “e non si basa su Objective-C, ma è in puro vecchio C; oltre a tutte le regole di gestione della memoria che seguirà il Core Foundation (CF) con regole che sono diverse da Obj-C:
questo significa che particolare attenzione deve essere fornita al fine di evitare perdite di memoria, come ad ogni manipolazione la pagina PDF può pesare diversi megabyte e può facilmente innescare il memory watchdog, in tal modo la vostra applicazione potrà crashare.

In ogni caso se si è abituati con i concetti Quartz 2D sarà semplice renderizzare una pagina PDF seguendo questi passaggi fondamentali:

1. Ottenere il riferimento CG alla pagina pdf da trarre;
2. Ottenere il contesto grafico corrente per la vista che contiene la pagina;
3. Istruire Quartz a disegnare la pagina Pdf per il contesto.

Come potete vedere, a parte le fasi necessarie per il disegno del modello Quartz, il rendering completo è compiuto dal sistema e non c’è bisogno di avere alcuna conoscenza del formato dei dati di un file pdf. Quindi per voi il processo di rendering Pdf  è solo una scatola nera, e questo è chiaro quando si nota che tutte le strutture dati CG sono infatti opache e il loro contenuto interno si può accedere solo tramite API.
Ma un reader valido per una rivista in Pdf non può limitarsi al rendering, per cui vi sarà richiesto di supportare ad esempio lo zoom;
ora, il livello massimo di zoom può essere teoricamente molto elevato (non dimenticate che i caratteri nel file Pdf sono come i font
nel computer, non potranno mai perdere in precisione, anche per estremi zoom-in), è impossibile rendere l’intera pagina ingrandita in un canvas molto più alto dello schermo del dispositivo:
Qui abbiamo pixel ,non  vettori, e sarebbe immediato il crash dell’applicazione, perché la memoria è esaurita per una sola pagina. Quindi saremo costretti a introdurre tecniche per limitare il rendering e renderlo efficace per la solo parte visibile della pagina, questo nonè  sempre un compito facile.

Più complessa è l’analisi del documento: questo è necessario se si desidera estrarre contorni,  annotazioni, fare qualche ricerca di testo
ed evidenziare. In tal caso a parte un paio funzioni per estrazione di meta-dati, quello che ti fornisce l’API è un insieme di funzioni che vi permetterà di esplorare le strutture dati all’interno del documento. Non saremo in grado di ottenere qualsiasi informazione dal file se non si esplora l’albero dati (data tree) correttamente e se non si seguono le specifiche del documento PDF.
Ciò è aggravato dalla molte versioni che le specifiche PDF hanno ottenuto negli anni e dal fatto che molti editori usano ancora del vecchio software che esporta il contenuto in vecchi formati.

Carlo ha sviluppato un generico PDF Explorer, questo è stato parte di un impegno per un cliente che ha chiesto di sviluppare un generale lettore PDF. E’ risulato davvero difficile applicare tutte le specifiche di riferimento ufficiale del formato PDF, il mio suggerimeto è di concentrarsi sulle funzionalità più utilizzate e test con molti documenti. Come ho detto prima, CG naviga l’albero dei dati (data tree), ma non la interpreta per noi!

L’ultima sezione di questa parte, la spiegazione lunga ma necessaria, data l’importanza del tema, è come fornire contenuti multimediali sulla cima di un file PDF: tutti in tutti i
iPad è un dispositivo così versatile che noi non possiamo limitarci al semplice rendering delle pagine. Con l’aggiunta di contenuti extra per la pagina stampata è possibile sfruttare le caratteristiche del dispositivo
e ancora in vantaggio per l’investimento fatto nella creazione rivista.

Ci sono molte ragioni per giustificare questa scelta: ad esempio un messaggio pubblicitario stampato in grado di offrire un video al posto di un’immagine statica, o un link stampato su una pagina web può essere sostituito da un collegamento attivo ad una vista web, o infine possiamo mostrare il tempo corrente utilizzando un widget HTML5. Come ho già detto non è consigliabile introdurre tutti questi contenuti all’interno del file pdf: non sarà reso da quarzo e sarà comunque
costretti ad attraversare la struttura dei dati per estrarre il riferimento all’oggetto CG per ulteriori manipolazioni. Infine, non tutti gli editori sono a conoscenza di queste funzionalità o dei loro software di pubblicazione digitale è troppo vecchio per loro pieno sostegno.

Quindi la soluzione migliore è basata sulla “tecnica di sovrapposizione”.
Questa metodologia consiste nel rappresentare le pagine in due strati:

• il livello inferiore (“layer rendering”) conterrà il rendering PDF, in modo che conterrà l’immagine bitmap della pagina;
• lo strato superiore (“layer overlay”) attirerò tutti sovrapposizioni ed è sensato touches.More utente difficile è l’analisi del documento: questo è necessario se si desidera estrarre contorni, le annotazioni, fare qualche ricerca di testo ed evidenziare. In tal caso a parte un paio di meta-funzioni di estrazione dei dati, che cosa ti dà l’API è un insieme di funzioni
che vi permetterà di esplorare le strutture dati all’interno
il documento. Non sarà in grado di ottenere qualsiasi informazione
dal file se non si esplora l’albero dati in modo corretto
e se non si seguono le specifiche del documento PDF.
Ciò è aggravato dalla molte versioni le specifiche PDF ottenuto
negli anni e dal fatto che molti editori usano ancora
vecchio software che esporta il contenuto in vecchi formati.
Ho sviluppato un generico PDF Explorer, questo è stato
parte di un impegno di un cliente che mi ha chiesto di sviluppare
un generale lettore PDF scopo, ma in quanto è davvero difficile
applicare tutte le specifiche di riferimento ufficiale in formato PDF, il mio suggerimento è di concentrarsi sulle funzionalità più utilizzate e test
con molti documenti. Come ho detto prima, CG naviga
l’albero dei dati, ma non la interpreta per noi!

L’ultima sezione di questa parte – la spiegazione lunga ma necessaria data l’importanza del tema – è come procurare i contenuti multimediali di un file PDF:
l’iPad è un dispositivo così versatile che noi non possiamo limitarci al semplice rendering delle pagine. Con l’aggiunta di contenuti extra alla pagina stampata è possibile sfruttare le caratteristiche del dispositivo.

Ci sono molte ragioni per giustificare questa scelta: ad esempio un pubblicità in grado di offrire un video al posto di un’immagine statica, o un link su una pagina web può essere sostituito da un collegamento attivo ad una vista web, o, infine, possiamo mostrare le previsioni meteo utilizzando un widget in formato HTML5.
Come abbiamo già detto ,  non è raccomandato introdurre tutti questi contenuti all’interno del file pdf:
non sarà reso da quartz e saremo comunque costretti ad attraversare la struttura dei dati per estrarre l’oggetto CG di riferimento per ulteriori manipolazioni. Infine, non tutti gli editori sono a conoscenza di queste funzionalità o quelle loro software di pubblicazione digitale è spesso troppo vecchio per loro pieno sostegno.

Quindi la soluzione migliore è basata sulla “tecnica di sovrapposizione” (overlay technique).
Questa metodologia consiste nel rappresentare le pagine in due strati:

• il livello inferiore (“layer rendering”) conterrà il Rendering PDF, in modo che conterrà l’immagine bitmap della pagina;
• lo strato superiore (“layer overlay”) disegnerà le sovrapposizioni e sarà sensibile al tocco dell’utente.

Lo strato superiore di overlay è tipicamente costituito da componenti UIKit, quindi dovremo aggiungere un UIWebView html per i widget, si introducono una UIScrollView per visualizzare una galleria di immagini scorrevoli, o faremo aggiungere una vista Media Player per l’esecuzione video.
Di solito le descrizioni in sovrapposizione sono forniti da un file separato, ad esempio, uno di formato XML, JSON o plist, e sara inserito iinsieme  con il file pdf e tutte gli altri (filmati, immagini, file html, file musicali) in un unico file zip.
L’applicazione quindi scaricherà il file zip, lo scompattarà e  utilizzerà la pagina Pdf per riempire il rendering layer, aggungendo le informazioni associate in sovrapposizione a quella pagina per costruire un “overlay layer“.
Si noti che questa tecnica può essere applicata anche nelle altre tecniche di rendering  di cui parleremo nei prossimi articoli, in tal caso ciò permette di superare molti limitazioni del formato pdf.
Il requisito principale per lo sviluppatore è quello di definire un formato adatto, controllare tutte le pagine soggette a zoom e rotazioni con una trasformazione e corrispondente sovrapposizione e, infine, fornire alla casa editrice  gli strumenti e le linee guida necessarie per creare facilmente sovrapposizioni del genere.

Questo articolo e’ stato pubblicato dal nostro CTO , Carlo Vigiani,  su icoder magazine, una validissima rivista per gli sviluppartori iOS.

Questo articolo e’ stato pubblicato dal nostro CTO , Carlo Vigiani,  su icoder magazine, una validissima rivista per gli sviluppartori iOS.

Uno dei grandi miglioramenti per tutti i proprietari di iPad è la possibilità di portare ovunque le propie rivista preferite o libri, grazie alle dimensioni dello schermo e il peso leggero dispositivo, che permette una  facile lettura. In particolare le relazioni sulle vendite  hanno dimostrato che in un momento di diminuzione mercato della stampa delle pubblicazioni vi è un enorme aumento del numero di abbonamenti alle versioni digitali degli stessi prodotti (il lettore interessato può leggere questo rapporto da MPA: http://www.magazine.org/association/press/mpa_press_releases/mag-mobile-reader-study.aspx)

Apple sta seguendo questa tendenza con grande interesse, e ciò è abbastanza chiaro se diamo uno sguardo alla evoluzione della
le caratteristiche di iOS che sono state introdotte dopo il rilascio della versione dedicata a iPad, che è di 3,2.
In particolare le tappe che sono state raggiunti sono tre, in comune tra i tre principali releases del sistema operativo:

• iOS 3.2 è stata arricchita dal framework CoreText, una tecnologia dedicata al rendering del testo sul display disponibile da tempo su Mac OSX e mai portati nelle versioni precedenti di iPhone OS.

• iOS 4.x ha introdotto il concetto di abbonamento auto-rinnovabile, in aggiunta allo standard di  Acquisti In App, questa funzione è stata
introdotto dopo lunghe discussioni tra Apple, che applica la commissione del 30% su ogni In App venduta e vieta a qualsiasi altro store esterno più economico l’accesso all’interno dei suoi dispositivi, e gli editori in cerca per le tecniche di fedeltà dei clienti.

• infine iOS 5.0 ha aggiunto la funzione di Edicola (Newsstand), che fornisce un luogo centrale, una vera e propria app App,  per raccogliere tutte le pubblicazioni e le  magazine  app compatibili e allo stesso tempo fornire una push notification per i nuovi contenuti e automaticamnte fornire a tutti gli abbonati la possibiltà di scaricare automaticamente i nuovi numeri, permettendo di leggere immediatamente le novità e  far risparmiare i tempi (A volte lunghi) necessari per il download.

Quello che Apple non ha fornito invece è un unica piattaforma di sviluppo per la creazione di applicazioni dedicate ai consumi di riviste. Questo ha portato a numerose iniziative dedicate per aiutare gli editori ad entrare nel mercato iPad con le proprie riviste . Queste iniziative, come ad esempio il nostro sistema editoriale i3F Editorial,  sono state preso da società importanti e ben noti, come ad esempio Adobe con i suoi affari Digital Publishing, e un sacco di molte start-
up, ognuno con una propria soluzione.

Come già detto, Apple non fornisce una soluzione unica, ma i developers hanno la disponibilità di una serie di frameworks e tecniche, con diversi livelli di complessità, che prevedono diversi modi di rappresentare la pagina sullo schermo.

Non c’è una scelta ottimale, poiché la decisione finale deve considerare aspetti che vanno oltre la pura tecnica.

In questo articolo cercheremo di descrivere queste soluzioni principalmente dal punto di vista dello sviluppatore di applicazioni, ma non dimentichiamo di enumerare i pro e i contro che possono influenzare la decisione dell’editore , come l’agency,  su quale tecnologia adottare.

Panoramica sul page rendering

Diamo per scontato che voi, lo sviluppatore, siate ad una certo dello  sviluppo di un  applicazione in cui la rivista è stato acquistato, scaricato ed è pronto per essere letta.
I dati del vostro documento, a questo punto vengono conservati nel file system del dispositivo e possono essere rappresentati da un unico file pdf, o da un insieme di file html e css o una directory contenente files di diversi formati, quali immagini, video, widget HTML5, file di testo.
Stai quindi per affrontare il problema di prendere una pagina (che nosrmalmente si estende oltre i limiti dello schermo) e la presentazione nello spazio vuoto del vostro UIView dedicato al rendering della pagina.

Nei prossimi paragrafi il nostro Carlo (CTO di i3factory)  presentera le seguenti metodologie per ottenere questo risultato:

• il rendering documento pdf
• pre-rendered visualizzazione delle immagini
• libero formato di rendering CoreText
• approccio basato sul web

Continua a leggere il prossimo articolo su Parte 2: Tecniche di Page Rendering #parte 2 : Riviste e Magazine in PDF

Questo articolo e’ stato pubblicato dal nostro CTO , Carlo Vigiani,  su icoder magazine, una validissima rivista per gli sviluppartori iOS.

Il linguaggio HTML5 avrà un profondo impatto sulla Internet.

Per citare la definizione di Wikipedia, l’HTML5 è un linguaggio di markup per la progettazione delle pagine web attualmente in fase di definizione presso il World Wide Web Consortium.

iOS 5 introduce 1.500 nuove API per gli sviluppatori, compreso l’accesso icloud, Storage, Newstand e Twitter.
Apple ha apportato alcune migliorie sul supporto per html, come Safari Mobile che permette di attingere a maggiori porzioni di memoria locale del dispositivo e ai servizi di geolocalizzazione.

Abbiamo pensato quindi di integrare il supporto all’html5 all’interno del nostro sistema editoriale i3F Editorial.

Vi segnalamiamo a questo proposito un interessante articolo di Bart Termorshuizen autore del Bolg Siteless.Org:
Bart sta lavorando su un piccolo progetto per la creazione di un generico codice basato su HTML5 per la lettura di riviste come soluzione per l’iPad.

L’idea di base è che le soluzioni editoriali adottate dalle corporate sono troppo costose per una vasta gamma di editori. Inoltre, queste soluzioni editoriali non sembrano essere di semplice utilizzo e integrazione e molti non sfruttano la tecnologia HTML5, ma sono derivanti da logiche d’informatizzazione ad alto impatto architetturale.

Crediamo che la semplicità sia la chiave del successo per il mercato delle App online e per questo , come Bart, siamo certi che l’iPad sia un dispositivo meraviglioso per leggere riviste – soprattutto se queste riviste sono ricche di contenuti interattivi.

Creare un app che ti permette di gestire pubblicazioni multiple, con la possibilità di lettura off-line con performance scattanti non è facile.

Se qualcuno volesse cimentarsi con un progetto Xcode puo’ trovare il sources code sul blog http://www.siteless.org/books/SitelessMagazine.zip.

Per una soluzione didattica possiamo provare a dare un’occhiata al framework Baker, Baker framework, Laker compendium and pugpig. Tutto il codice è open source-

Innanzi tutto il codice è:
- siteless magazine è il nome del progetto e prende la grafica e altra roba dal sito Siteless.org a scopo di test
- Minizip per decomprimere
- Json per il parsing json
- pugpig reader (ha delle belle pre-rendering snapshot)

Viewcontrollers:
- LibraryViewController – qui è dove accadono le cose principali. Nota che le copertine fanno riferimento ad una url nella stringa JSON. Oltre alle funzionalità di sincronizzazione (il pulsante in basso a sinistra ), che cura anche la creazione di istanze di oggetti issueviewcontroller e la gestione del layout
- IssueViewController – questo è il viewcontroller di una singola pubblicazione. Il Design (xib) è in bozza. Si occupa anche di scaricare / decomprimere una singola pubblicazione e l’archiviazione (che elimina la pubblicazione dal filesystem)
- ReaderViewController – si prende cura del lettore reale – utilizza il framework pigpug in questa versione open.

il suo modello misto di storage :
- Le pubblicazioni sono memorizzate utilizzando core data (database SQLite). È possibile esaminare il database utilizzando il browser dei database SQLite. Come potete vedere, il database non è incluso – viene creato automaticamente se non esiste.

- Le copertine grafice sono memorizzate sul filesystem – la posizione delle cover sul filesystem viene mantenuta nel database. E’ un path completo – Bart sostiene di un essere incorso in problemi con esso.
- Le Pubblicazioni (dossier) vengono memorizzate sul filesystem. L’operazione ‘archive’ rimuove la pubblicazione mentre ‘download’ la scarica , poi unzippa e inserisce il riferimento ad esso nel database.
Il DataModel è nel file xcdatamodel. La classe Issue, copertina e contenuti sono generati da quel DataModel.

Per verificare che cosa sta succedendo, è facile monitorare la cartella e il database. Ricominciare è anche facile: rimuovere tutto cio’ che si trova in quella cartella (/’user’/Application Support/iPhone Simulator/4.3.2/Applications/’applicationid’/Documents/)

Il formato JSON è facile da capire, assicurarsi che i numeri di serie delle pubblicazioni siano unici. Sul sito di siteless sono incluse due testissue – (pubblicazione numero 1 e 2, da Laker e Pigpug), mentre le altre non esistono.

Qualche necessità per rendere questo codice meno didattico:
- Integrazione del reader. Il reader in questo codice non consente ancora lo scorrimento verticale. Il doppio tap non mostra l’indice. Il pulsante library ha bisogno di essere implemntato. Non aggiornare se si vuole aprire un altra pubblicazione
- Refactoring di alcuni metodi (alcuni sono troppo lunghi e verbosi)
- Generalizzare il codice e includerlo nel github (dopo il test)