i3Factory

La tua Iphone, iPad & Android Application Factory

Visualizza gli articoli con tag fonts

    Approccio HTML(5)
    In questa 5a e ultima parte dell’articolo del CTO di i3Factory rappresenta l’ultima tecnica che vi mostreremo.
    L’HTML5 è qualcosa che sta emergendo negli ultimi tempi, soprattutto grazie ai grandi miglioramenti in termini di stabilità e velocità introdotte dalla nuova versione di IOS per l’in-app viste web.
    Un paio di buoni esempi di questo approccio sono l’Ars Technica app (link) e la rivista Bloomberg Businessweek + (link).
    Il concetto è abbastanza semplice: html e css sono tecniche comuni e potenti per il layout di una pagina sullo schermo: perché non sfruttare le competenze sviluppate da molti web designer per fare una rivista che si sposa perfettamente con l’iPad?
    Il blocco principale alla base di questo approccio è il UIWebView Cocoa Touch object: con questa View siamo in grado di caricare qualsiasi tipo di documento HTML, caricarlo in locale o in remoto, e il layout nella pagina verrà visualizzato ad una velocità adeguata (ma non il più veloce) e senza sorprese. Inoltre possiamo sbarazzarci della tecnica di sovrapposizione, poichè la vista web è in grado di visualizzare immagini, la riproduzione di filmati e naturalmente eseguire widget javascript base.
    Anche questo componente fornisce due modalità di interazione tra il mondo javascript e l’Objective-C runtime (e in effetti questo giustifica l’esistenza di extension languages come Objective-J, fornito con il framework Cappuccino: http://cappuccino.org/) . Infine la Web View è altamente resistente alle interazioni degli utenti, e alcune funzioni come la selezione del testo e dizionario di ricerca sono incluse.
    Il mondo open source è molto attivo in questo settore:
    progetti come Baker (http://www.bakerframework.com), Siteless (http://www.siteless.org/?p=585), Laker (http:/ / www.lakercompendium.com/) e pugpig(http://pugpig.com/index.php) mettono a disposizione del pubblico questo tipo di soluzione.Sinceramente non sappiamo se questa sarà la soluzione finale per tutti. Naturalmente un editore che ha già investito nella creazione di un sito web (ma non in Flash!) sarà in grado di portare il layout e contenuti su iPad, e a volte questo può essere realizzato con un adattamento dell’ output CMS  nella View che può  facilmente alimentare di contenuti l’applicazione.

    Attenzione deve essere data a non spingere questo comportamento ai suoi estremi: non dimentichiamo infatti che il rendering di una pagina Web richiede un motore interno e alla fine ogni strato intermedio richiederà risorse e tempo extra. A volte, e questo è particolarmente evidente con la prima generazione di iPad, gli aggiornamenti dei contenuti che seguono interazione con l’utente non sono molto reattivi. Quindi non è consigliato trasformare ogni singolo aspetto delle app rivista in contenuti web based: è chiaro che in questo modo stai aiutando tutti gli sviluppatori javascript non qualificati con Objective-C, ma una penalizzazione delle prestazioni sarà visibile.
    A titolo di esempio, la barra degli strumenti tipica di tutte le applicazioni per riviste e utilizzata per accedere a funzioni extra (condivisione, sommario, home page, ecc) dovrebbe sempre essere fatta utilizzando il componente nativo Cocoa Touche non una soluzione html + css.Tuttavia se l’editore accetta di convertire il suo flusso di progettazione basato sul web  , come sviluppatore, dovrete preferire di scrivere codice  su consolidate metodologie e facili  da manipolare , e questa dovrebbe essere la vostra prima scelta da prendere in considerazione.
    Conclusioni
    Ci auguriamo che questo articolo in 5 parti vi abbia  fornito una buona panoramica delle principali tecniche utilizzate per visualizzare le pagine di un giornale , di un qualsiasi periodico o e-book. Potremmo  on aver menzionato qualche tecnica non siamo consapevoli, in questo caso qualsiasi commento da voi è il benvenuto!
    Questo articolo è stato tratto dalla rivista  icoder (www.icodermag.com) dove Carlo Vigiani , CTO e co-founder di  i3factory.com scrive articoli di carattere tecnico.
    i3Factory.com
    i3editorial, il nuovo sistema editoriale per iPad, iPhone & Android in grado di pubblicare su Apple Store, Android Market e Amazon App Store
    Carlo Vigiani
    E’ un ingegnere elettronico e sviluppatore di software, Vive in Italia. E’ CTO e co-founder di  i3factory.com,  una startup attiva nello sviluppo di iOS, Android e applicazioni Win Mobile, con particolare attenzione al moldo editoriale, ma anche in campo turistico , intrattenimento e musicale.
    Igor W. Schiaroli
    E’ laureato in economia ma si occupa di tecnologia fin dall’adolescenza. E’ CEO e founder di i3factory.com e ha maturato numero esperienze nel managment di grandi aziende editoriali , nel campo della rete internet e nelle telecomunicazioni.

      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.
        CTcomunica” 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/