L'iPhone è un fenomeno fantastico. È un dispositivo di comunicazione, una piattaforma multimediale e molto altro ancora tutto in un unico strumento. Tutti vogliono entrare su questo dispositivo.

L'Apple Store ha appena superato il miliardesimo download di applicazioni (io conto solo per il 3% di quello ...) e c'è una vasta gamma di applicazioni dal sorprendentemente utile al ridondante bizzarro.

Con milioni di iPhone là fuori, ha senso avere il tuo contenuto, o l'applicazione disponibile su quella piattaforma, ma come fai a fare questo? Dove vai per iniziare? E quali sono i passi necessari per arrivarci?

Questo articolo è un'introduzione ai vari modi di ottenere contenuti e applicazioni su iPhone. Non è affatto una guida completa, ma spera di indirizzarti nella giusta direzione e darti una panoramica di ciò che è coinvolto nel processo.

Immersione

Il primo passo per scrivere per l'iPhone è capire come funzionano davvero le cose su iPhone . Penso che sia praticamente impossibile sviluppare per l'iPhone senza essere un utente solido per un po '.

L'iPhone ha un certo modo di fare le cose e se i tuoi contenuti non aderiscono a ciò, si sporgerà come un pollice dolente. È molto diverso da ciò che accade su un desktop.

L'unico mezzo per interagire con i contenuti dell'iPhone sono le tue dita . Questo impone il funzionamento dell'interfaccia. Le altre principali differenze sono che lo schermo è piccolo, viene eseguita una sola applicazione alla volta e non vi sono molte opportunità per fornire aiuto all'utente.

L'iPhone utilizza estensivamente l'animazione per fornire un'interfaccia fluida e reattiva che sembra quasi fisica (come se i contenuti dello schermo si muovessero davvero, saltassero o crollando). Devi davvero avere la sensazione che questo sia in grado di creare qualcosa che possa essere vissuto comodamente su iPhone.

Potresti potenzialmente utilizzare il simulatore iPhone su un Mac invece di un vero iPhone o iPod Touch, ma ... questo non lo fa davvero. L'iPhone ha una serie di accelerometri in grado di rilevare l'orientamento e il movimento del dispositivo . Hai davvero bisogno di tenerlo e sentirlo.

Apple fornisce una grande quantità di informazioni sul suo sito per sviluppatori iPhone:
http://developer.apple.com/iphone/

Ci sono video introduttivi, documenti e codice di esempio. Oltre a tutto il materiale introduttivo, un ottimo documento per iniziare è le linee guida per l'interfaccia utente di iPhone.

Possono essere trovati qui:
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf

Consiglio vivamente di iniziare con questo documento. Ha degli esempi e ti mette in viaggio. Familiarizza con il modo in cui le cose sono fatte su iPhone e l'arsenale di controlli e funzionalità a tua disposizione.

Pianificazione

Non ho intenzione di approfondire questo. Pianificare su iPhone è come pianificare qualsiasi altra piattaforma.

È necessario essere chiari su ciò che si vuole raggiungere ed esplorare quale funzionalità si desidera esporre con il proprio progetto. Adoperarsi per una soluzione che sia chiara, comprensibile, visivamente piacevole e, naturalmente, interessante.

Visualizzazione

Una volta che conosci il piano di gioco, la ricerca inizia per il design. Con l'aspetto unico di iPhone, è essenziale che tu usi quel look per visualizzare l'interfaccia del tuo progetto.

Ricreare l'interfaccia dell'iPhone per scopi wireframe o sketch è molto lavoro. Fortunatamente le persone hanno già fatto questo sforzo ed è disponibile per l'uso.

Queste sono raccolte di widget grafici in vari formati che possono essere utilizzati per assemblare quelli che sembrano schermi di iPhone. Puoi usarli per creare schizzi e wireframe per i tuoi progetti. Eccone alcuni:

Yahoo Design Stencil Kit

Parte del kit UI di Yahoo. Questa è un'ottima risorsa per qualsiasi tipo di visualizzazione del design dell'interfaccia utente. Yahoo! Design Stencil Kit versione 1.0 è disponibile per OmniGraffle, Visio (XML), Adobe Illustrator (PDF e SVG) e Adobe Photoshop (PNG). È un insieme di grafica in diversi formati da utilizzare in varie applicazioni e consente di creare schizzi dell'interfaccia utente.

Scarica qui: http://developer.yahoo.com/ypatterns/wireframes/


Geoff Teehan's iPhone GUI

Un file Photoshop che ha una libreria abbastanza completa di risorse, alcune modificabili

Scarica qui: http://teehanlax.com/downloads/iPhone_GUI.psd.zip


Carta da disegno per il designer mobile

Un 'sketchepad' basato su PDF o Photoshop per disegnare le interfacce di iPhone.

Può essere scaricato qui:
http://labs.boulevart.be/index.php/2008/06/05/sketch-paper-for-the-mobile-designer/

E, naturalmente, ci sono molti altri in giro.

OK. Quindi ora hai un'idea o del contenuto, hai pensato al piano di gioco, hai abbozzato un'interfaccia che avrebbe guardato a casa su iPhone. Qual'è il prossimo? Bene ... ci sono diversi approcci che puoi adottare per ottenere il tuo progetto su iPhone:

Fare niente

L'iPhone ha un browser web eccezionale per un dispositivo mobile: Safari. Ha qualche asso nella manica e fa del suo meglio per presentare qualsiasi sito web in modo leggibile. Quindi ... se hai un sito web che è attivo e funzionante, potresti farla franca senza fare assolutamente nulla.

Safari è in grado di presentare quasi tutti i siti Web in modo leggibile. L'utente può fare doppio clic su qualsiasi sezione della pagina Web e Safari eseguirà lo zoom in una scala leggibile e presenterà quella pagina.

Le cose che devono essere evitate per la conformità iPhone sono:

  • Veloce. Al momento non esiste supporto per Flash su iPhone
  • Segmenti del sito che si basano sul passaggio del mouse. Poiché non esiste un mouse o un cursore, l'evento hover non viene mai attivato e pertanto qualsiasi comportamento progettato non verrà mai visualizzato su iPhone.
  • Layout ampi e rigidi senza colonne. iPhone non li gestisce bene.

Quindi se il tuo sito / app funziona bene con Safari su iPhone senza modifiche, questo è il tuo percorso di minor resistenza.

Fai un po '

Il passo successivo è quello di mantenere il tuo sito, ma apportare alcune modifiche, in modo che la visualizzazione su un iPhone sarà un'esperienza migliore per i tuoi visitatori.

Ecco alcuni semplici suggerimenti e trucchi che renderanno il tuo sito funzionante per un visitatore di iPhone.

  • Usa colonne . Questo è abbastanza semplice ma fa una grande differenza. Gli utenti faranno doppio clic su una colonna e saranno in grado di ingrandire e leggere facilmente i tuoi contenuti.
  • Organizzare informazioni complementari in modo che siano posizionate nella stessa colonna . In questo modo l'utente può leggere un'intera porzione di materiale correlato scorrendo, senza dover saltare in giro.
  • Non utilizzare le dimensioni dei caratteri assoluti . Usa invece le percentuali.
  • Usa il metatag . Questo è il concetto più fondamentale in qualsiasi lavoro web di iPhone. Definisce le dimensioni a cui deve essere ridimensionata la pagina prima di ridimensionarla per adattarla all'iPhone. prende il formato di
  • Leggi la guida Apple per i siti Web iPhone qui sopra: http://developer.apple.com/safari/mobile.php

Sviluppa un sito per l'iPhone

Ora stai parlando! Svilupperai un sito web appositamente per l'iPhone. Devi imparare cosa è possibile da qui http://developer.apple.com/safari/mobile.php e inizia a mettere tutto insieme.

L'idea è quella di costruire un'app web che possa essere vissuta comodamente su iPhone , preservare lo stile e i comportamenti visivi a cui sono abituati gli utenti di iPhone e sfruttare le funzionalità speciali della piattaforma come gesti, cambi di orientamento, ecc.

Non devi ricominciare da capo. Ci sono un sacco di grandi risorse che forniscono un buon punto di partenza o struttura per costruire il tuo iPhone:

  • iUI : consente di creare menu di navigazione e interfacce iPhone, con una conoscenza minima di JavaScript. Offre la possibilità di gestire il cambio di orientamento del telefono e un'esperienza più simile a iPhone. iUI è una libreria di JavaScript e CSS che ha lo scopo di imitare l'aspetto grafico dell'iPhone sulle pagine Web. http://code.google.com/p/iui/
  • Webkit : Safari è un browser basato su webkit. Webkit aggiunge un sacco di funzionalità che sfruttano le caratteristiche uniche di iPhone (database accessibile alla tua app, comprensione dei gesti dell'iPhone, rilevamento dell'orientamento e molto altro) dai un'occhiata qui: http://www.westciv.com/iphonetests/
  • Aptana Studio : un IDE che include un dispositivo di avviamento del progetto del sito iPhone. Contiene la gestione dell'orientamento del telefono e altri gadget. Visualizzerà l'anteprima del tuo sito anche su uno schermo iPhone simulato: http://www.aptana.com
  • jQuery plug-in per iPhone: jQuery è una libreria JavaScript leggera e sorprendentemente potente. Jonathan Neal ha creato un plug-in jQuery per iPhone che ti aiuta a creare un'app per iPhone centrale. http://plugins.jquery.com/project/iphone



Utilizzo della vista modello / codice di iPhone di Aptana Studio



Aptana Studio mostra l'anteprima di iPhone


Vari siti sviluppati appositamente per l'iPhone



Vari siti sviluppati appositamente per l'iPhone


Le seguenti opzioni riguardano gli strumenti per sviluppatori Apple. Per accedervi è necessario essere uno sviluppatore Apple registrato. La suite di strumenti è collettivamente chiamata Xcode. Xcode include un numero di strumenti, ognuno affronta una parte diversa del puzzle:

La registrazione è fatta qui:
http://developer.apple.com/

  • Xcode . Questo è il pezzo centrale della suite Xcode. È qui che i progetti SDK vengono creati, gestiti, modificati ed eseguiti. È un IDE molto potente che ha molte caratteristiche che ti aiutano a mettere insieme l'applicazione incluso il completamento del codice, il refactoring e i link alla documentazione pertinente.
  • Interface Builder . È un potente editor grafico in cui è possibile creare in modo interattivo l'interfaccia utente per l'applicazione iPhone SDK.
  • iPhone Simulator . Questo è usato da Xcode e Dashcode per eseguire applicazioni sul desktop Mac a scopo di test. Presenta un iPhone in esecuzione in una finestra del desktop. Uno strumento molto conveniente e che fa risparmiare tempo.
  • Instruments è un programma che ti aiuta a eseguire il debug, il profilo e il tracciamento del tuo programma. Questo è il modo in cui i programmi SDK sono debugati e ottimizzati per le prestazioni.
  • Dashcode . Non fa davvero parte della suite Xcode ma è inclusa in esso. Dashcode è un ambiente di sviluppo che è stato inizialmente creato per lo sviluppo di widget dashboard (che in realtà sono piccole applicazioni web). Nella sua attuale incarnazione, può costruire widget e siti web per iPhone. Dashcode genera pagine Web, quindi utilizzerai la tua conoscenza CSS HTML e JavaScript.

Il percorso Dashcode

Dashcode è una strana bestia. Fa parte della suite Xcode, ma in realtà non interagisce con gli altri componenti (ad eccezione del simulatore iPhone che usa per eseguire progetti sviluppati con esso).

Dashcode è un IDE orientato alla creazione di app web per iPhone . Ha un numero di modelli che puoi utilizzare come punto di partenza per la tua app (applicazione basata su navigazione, applicazione basata su barra di schede, ecc.) E prendila da lì.

Esiste una libreria di controlli che è possibile utilizzare, trascinando i controlli sull'interfaccia e quindi assegnando proprietà e logica.

Dashcode salva i suoi progetti come un file di progetto Dashcode e, quando hai finito, esporti il ​​progetto come sito html / javascript / css per la distribuzione.

Non è progettato per applicazioni complicate e complicate che hanno un sacco di codice di back-end, ma se hai un'idea autonoma e autonoma. Non c'è niente di più veloce di Dashcode per metterlo insieme.

È possibile trovare la guida per l'utente di Dashcode Qui


L'IDE di Dashcode, che fornisce una libreria di controlli, un'area di layout e una sezione di modifica del codice



Anteprima di un sito sviluppato in Dashcode sul simulatore di iPhone


L'utilizzo di tutto ciò che il webkit può offrire insieme a uno dei framework o la creazione del tuo sito utilizzando DashCode ti consente di creare qualcosa di molto vicino a un'app nativa per iPhone sensibile alle modifiche di orientamento, utilizza l'animazione per le transizioni e visualizza i widget dell'interfaccia utente di iPhone. Quello che ti mancherà è questo:

  • Nessun accesso a funzioni come fotocamera, registrazione o servizi di localizzazione
  • Impossibile sbarazzarsi della barra degli strumenti del browser in basso
  • Il tuo sito è mostrato in un browser e non come app separata
  • E il più grande svantaggio: non può essere venduto presso l'app store, quindi se stai pianificando di fare soldi con i tuoi contenuti dovrà essere gestito da te, piuttosto che usare il modello di app store e ottenere l'esposizione.


Utilizzando l'SDK

Per sfruttare appieno l'app store e sfruttare appieno tutto ciò che l'iPhone ha da offrire, è necessario utilizzare l'iPhone SDK .

La creazione di un'app iPhone SDK espone tutto il potenziale dell'iPhone. L'SDK offre una collezione incredibilmente ricca di framework ciascuno responsabile di una particolare area di funzionalità.

L'immagine grande è la seguente: crei un'applicazione in Xcode, costruisci l'interfaccia utente in Interface Builder ed eseguilo in iPhone Simulator.

Il framework principale con il quale probabilmente ti sarà più familiare è Cocoa Touch . Tra le altre cose contiene il framework UIKit e il framework UI della rubrica . Supporta anche windowing, eventi e gestione dell'interfaccia utente e molto altro ancora.

C'è molto lavoro pesante da fare qui e molte informazioni da assorbire per sfruttare la ricchezza offerta dall'iPhone.

Fortunatamente ci sono tonnellate di informazioni, documentazione, codice di esempio e video introduttivi disponibili qui: http://developer.apple.com/iphone/

I concetti principali di cui hai bisogno per girare la testa sono:

  • Il flusso di base che Xcode usa per produrre un'app
  • I framework disponibili, ciò che è responsabile del tipo di funzionalità
  • Objective-C. La lingua utilizzata per programmare in Xcode


Xcode fornisce molti modelli di progetto che è possibile utilizzare come punto di partenza per le principali categorie di applicazioni: applicazione basata sulla navigazione, applicazione della barra delle linguette ecc.

Il primo passo per iniziare con lo sviluppo dell'SDK è scaricare l'SDK e installarlo. L'SDK è un download da 1 GB e richiede la registrazione come sviluppatore Apple.

Il secondo passo è capire cosa sta succedendo e orientarsi in questo ambiente. I video introduttivi sono un buon punto di partenza e orientamento.

Puoi trovarli qui:
http://developer.apple.com/iphone/index.action

Xcode. Il centro nevralgico del flusso di sviluppo IDE




Interface Builder. Lo strumento che usi per visualizzare visivamente l'interfaccia dell'app iPhone

Ibridi SDK

Quest'ultimo tipo è fondamentalmente un'app SDK con una svolta . Le sezioni dell'app sono in realtà dei riquadri del browser Safari che mostrano pagine Web.

Questo divide lo sviluppo nella sezione che verrà scritta usando Xcode e l'obiettivo c e la sezione che recupererà le informazioni dal web e le presenterà in una vista del browser.

Fondamentalmente Xcode verrà utilizzato per creare l'applicazione in esecuzione su iPhone e Dashcode verrà utilizzato per costruire le sezioni web dell'app. La tua applicazione è la combinazione di queste due tecnologie che cooperano.

Un buon riferimento per questo tipo di app può essere trovato nel linee guida dell'interfaccia utente

Sommario

Per riassumere tutto, diamo un'occhiata agli elementi più importanti necessari per creare contenuti per l'iPhone:

  • Immersion : ottieni un iPhone o iPod Touch e sperimenta l'interfaccia utente. Conoscerlo è l'unico modo per creare contenuti adatti.
  • Pianificazione : non c'è molto da aggiungere qui. Assicurati che i tuoi contenuti abbiano uno scopo e tu sai di cosa si tratta.
  • Non fare nulla : è probabile che il tuo sito funzioni sull'iPhone così com'è. Potresti non dover fare molto.
  • Fai un po ' : puoi fare solo pochi passi per rendere il tuo sito piacevole su iPhone. Alcune modifiche possono fare un'enorme differenza e far sentire il tuo sito come a casa.
  • Sviluppa un sito per iPhone: crea un sito ottimizzato per iPhone, rendendolo il più simile possibile a un'app nativa per iPhone.
  • Crea un sito con Dashcode : crea siti specifici per iPhone utilizzando il comodo e potente IDE Dashcode.
  • Applicazione SDK completa : utilizzare la suite Xcode per creare applicazioni native per iPhone che possono essere inviate e vendute su App Store di Apple.
  • Un'applicazione ibrida SDK : un'applicazione per iPhone può essere creata come una combinazione di un'app nativa e di un'app Web, in cui l'app SDK ospita le visualizzazioni Web che presentano dati dal Web. Questo ti permette di usare le tue abilità da entrambi gli ambienti.

risorse


Scritto esclusivamente per WDD da Etan Rozin. È un designer di interfacce utente e gestisce il proprio sito Web all'indirizzo: www.rozin.com

Quali strumenti utilizzi per lo sviluppo di iPhone? Per favore condividi i tuoi commenti con noi…