8. Greener Pastures
http://greenerpastures.dk
Form?l
¡ö Overblik over udviklingsprocessen
9. Greener Pastures
http://greenerpastures.dk
Form?l
¡ö Overblik over udviklingsprocessen
¡ö Hvilke v?rkt?jer skal der bruges
10. Greener Pastures
http://greenerpastures.dk
Form?l
¡ö Overblik over udviklingsprocessen
¡ö Hvilke v?rkt?jer skal der bruges
¡ö Hvilke kompetencer skal der bruges
11. Greener Pastures
http://greenerpastures.dk
Form?l
¡ö Overblik over udviklingsprocessen
¡ö Hvilke v?rkt?jer skal der bruges
¡ö Hvilke kompetencer skal der bruges
¡ö Se hvordan det fungerer i praksis
12. Greener Pastures
http://greenerpastures.dk
Udviklingsprocessen
¡ö Design af app
¡ö Gra k
¡ö Programmering
¡ö Deployment
14. Greener Pastures
http://greenerpastures.dk
Design af app
¡ö Apples Human Interface Guidelines
15. Greener Pastures
http://greenerpastures.dk
Design af app
¡ö Apples Human Interface Guidelines
¡ö En app er ikke et website
16. Greener Pastures
http://greenerpastures.dk
Design af app
¡ö Apples Human Interface Guidelines
¡ö En app er ikke et website
¡ö V?r kreativ
17. Greener Pastures
http://greenerpastures.dk
Design af app
¡ö Apples Human Interface Guidelines
¡ö En app er ikke et website
¡ö V?r kreativ
¡ö ¡ men ikke for kreativ!
18. Greener Pastures
http://greenerpastures.dk
Design af app
¡ö Apples Human Interface Guidelines
¡ö En app er ikke et website
¡ö V?r kreativ
¡ö ¡ men ikke for kreativ!
¡ö Kend brugssituationen, muligheder og
begr?nsninger
26. Greener Pastures
http://greenerpastures.dk
Gra k til Retina display
¡ö Dobbelt st?rrelse ¨C?b?de h?jde og bredde
¡ö To ler. Retina-billede med "@2x" til sidst i lnavn:
billede.png
billede@2x.png
27. Greener Pastures
http://greenerpastures.dk
Gra k til Retina display
¡ö Dobbelt st?rrelse ¨C?b?de h?jde og bredde
¡ö To ler. Retina-billede med "@2x" til sidst i lnavn:
billede.png
billede@2x.png
1.Lav alt i hi-res (Retina) og skal¨¦r ned
28. Greener Pastures
http://greenerpastures.dk
Gra k til Retina display
¡ö Dobbelt st?rrelse ¨C?b?de h?jde og bredde
¡ö To ler. Retina-billede med "@2x" til sidst i lnavn:
billede.png
billede@2x.png
1.Lav alt i hi-res (Retina) og skal¨¦r ned
2.Lav to separate versioner
29. Greener Pastures
http://greenerpastures.dk
Et par tips:
1.Brug vektor-tegninger s? vidt som muligt
2.Lav et godt ikon!
L?s denne artikel f?rst:
http://pixelresort.com/blog/iphone-app-icon-design-best-practises/
30. Greener Pastures
http://greenerpastures.dk
Et par tips:
1.Brug vektor-tegninger s? vidt som muligt
2.Lav et godt ikon!
L?s denne artikel f?rst:
http://pixelresort.com/blog/iphone-app-icon-design-best-practises/
39. Greener Pastures
http://greenerpastures.dk
Windows eller Mac?
¡ö MonoTouch, Appcelerator Titanium, PhoneGap, ¡
40. Greener Pastures
http://greenerpastures.dk
Windows eller Mac?
¡ö MonoTouch, Appcelerator Titanium, PhoneGap, ¡
¡ö Mit r?d: Brug Xcode og Objective-C
51. Greener Pastures
http://greenerpastures.dk
I praksis¡
¡ö Xcode
¡ö Oprette projekt: skelet er p? plads
52. Greener Pastures
http://greenerpastures.dk
I praksis¡
¡ö Xcode
¡ö Oprette projekt: skelet er p? plads
¡ö Tilf?je XML-ressourcer
53. Greener Pastures
http://greenerpastures.dk
I praksis¡
¡ö Xcode
¡ö Oprette projekt: skelet er p? plads
¡ö Tilf?je XML-ressourcer
¡ö Kode
54. Greener Pastures
http://greenerpastures.dk
I praksis¡
¡ö Xcode
¡ö Oprette projekt: skelet er p? plads
¡ö Tilf?je XML-ressourcer
¡ö Kode
¡ö Interface Builder: interface og tilretning
55. Greener Pastures
http://greenerpastures.dk
I praksis¡
¡ö Xcode
¡ö Oprette projekt: skelet er p? plads
¡ö Tilf?je XML-ressourcer
¡ö Kode
¡ö Interface Builder: interface og tilretning
¡ö Nemt at komme i gang med simpel app
56. Greener Pastures
http://greenerpastures.dk
I praksis¡
¡ö Xcode
¡ö Oprette projekt: skelet er p? plads
¡ö Tilf?je XML-ressourcer
¡ö Kode
¡ö Interface Builder: interface og tilretning
¡ö Nemt at komme i gang med simpel app
¡ö Man skal kende SDK'et
1) Om mig: GP, CV, udviklingsbaggrund\n2) Om apps og app-udvikling: mere og mere, ny brugssituation, …\n\n? Jeres baggrund: hvor mange kender til webudvikling?\nhvor mange arbejder med grafik (Photoshop)?\nhvor mange arbejder med html/css?\nhvor mange udvikler (programmering)?\nhvor mange arbejder med usability, -design?\n-hvor mange har en iPhone?\n-er der nogen, der har prøvet at lave en app?\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
> 30 apps for meget forskellige kunder\n
Handler om iOS\n
Gå fra at være lidt forvirrent -> have fuldstændig styr på værktøjer og processer\n
Gå fra at være lidt forvirrent -> have fuldstændig styr på værktøjer og processer\n
Tre blokke m. to pauser: 1 (snak vise PS hurtigt), 2 (praktisk), 3 (snak)\n\nSpørgsmål: sig til – muligvis skubbes til bagefter\n
Tre blokke m. to pauser: 1 (snak vise PS hurtigt), 2 (praktisk), 3 (snak)\n\nSpørgsmål: sig til – muligvis skubbes til bagefter\n
Tre blokke m. to pauser: 1 (snak vise PS hurtigt), 2 (praktisk), 3 (snak)\n\nSpørgsmål: sig til – muligvis skubbes til bagefter\n
Tre blokke m. to pauser: 1 (snak vise PS hurtigt), 2 (praktisk), 3 (snak)\n\nSpørgsmål: sig til – muligvis skubbes til bagefter\n
Nøjagtig den samme model som v. alt andet softwareudvikling. Fx web.\nMen der er forskelle i alle punkter: \n - en telefon er noget andet end en browser (eller computer), og det skal designet af app'en tage højde for\n - grafikken skal laves på en anden måde\n - programmeringen foregår i et andet miljø, end mange er vante til\n - deployment er via Apples App Store\n\nOBS: det er forskelige roller! En grafiker kan ikke programmere, og en programmør kan ikke lave grafik. Eller designe en app. Forskellige kompetencer (kan godt være samme msk.)\n\n\n
Apples Human Interface Guidelines er biblen! (Nærmere "Rules" end "Guidelines")\nMan skal være opmærksom på forskellene ml. web og app. ∆\nKreativ: det skal være spændende\n…ikke for: ingen brugsanvisning/read-me; SKAL være umiddelbart indlysende; brug Apples (og andres) konventioner (fx pull down to reload)\nKend brugssituation, begrænsninger (skærm, fingre) og muligheder (GPS, kamera osv.)\n\n
Apples Human Interface Guidelines er biblen! (Nærmere "Rules" end "Guidelines")\nMan skal være opmærksom på forskellene ml. web og app. ∆\nKreativ: det skal være spændende\n…ikke for: ingen brugsanvisning/read-me; SKAL være umiddelbart indlysende; brug Apples (og andres) konventioner (fx pull down to reload)\nKend brugssituation, begrænsninger (skærm, fingre) og muligheder (GPS, kamera osv.)\n\n
Apples Human Interface Guidelines er biblen! (Nærmere "Rules" end "Guidelines")\nMan skal være opmærksom på forskellene ml. web og app. ∆\nKreativ: det skal være spændende\n…ikke for: ingen brugsanvisning/read-me; SKAL være umiddelbart indlysende; brug Apples (og andres) konventioner (fx pull down to reload)\nKend brugssituation, begrænsninger (skærm, fingre) og muligheder (GPS, kamera osv.)\n\n
Apples Human Interface Guidelines er biblen! (Nærmere "Rules" end "Guidelines")\nMan skal være opmærksom på forskellene ml. web og app. ∆\nKreativ: det skal være spændende\n…ikke for: ingen brugsanvisning/read-me; SKAL være umiddelbart indlysende; brug Apples (og andres) konventioner (fx pull down to reload)\nKend brugssituation, begrænsninger (skærm, fingre) og muligheder (GPS, kamera osv.)\n\n
Apples Human Interface Guidelines er biblen! (Nærmere "Rules" end "Guidelines")\nMan skal være opmærksom på forskellene ml. web og app. ∆\nKreativ: det skal være spændende\n…ikke for: ingen brugsanvisning/read-me; SKAL være umiddelbart indlysende; brug Apples (og andres) konventioner (fx pull down to reload)\nKend brugssituation, begrænsninger (skærm, fingre) og muligheder (GPS, kamera osv.)\n\n
Eksempler på dårligt og godt:\nser smart ud, men ikke standard-elementer (on/off, back nederst, klode?, segmented)\nFleggaard: alt er tilpasset – farver, ikoner, tabbar – men er standard or ser "iPhone-agtigt" ud\n\nIkke meget mere om, men OBS på, at det er en nødvendig kompetence, og det er ikke web-UX\n\nNogle spørgsmål?\n
Brug alm. værktøjer: PS, Illu… MS Draw.\nFormat=PNG (optimeres, komprimeres) eller JPG for fotos, der kan komprimeres uden at man kan se det.\n\nRetina: Opløsning > 300 dpi; intet krav, men gør det\n
Brug alm. værktøjer: PS, Illu… MS Draw.\nFormat=PNG (optimeres, komprimeres) eller JPG for fotos, der kan komprimeres uden at man kan se det.\n\nRetina: Opløsning > 300 dpi; intet krav, men gør det\n
Brug alm. værktøjer: PS, Illu… MS Draw.\nFormat=PNG (optimeres, komprimeres) eller JPG for fotos, der kan komprimeres uden at man kan se det.\n\nRetina: Opløsning > 300 dpi; intet krav, men gør det\n
\n
\n
\n
efter strategi:\n[Vis i PS: ikon.psd]\n
efter strategi:\n[Vis i PS: ikon.psd]\n
Tips:\n\n1) Vektor så vidt muligt. Det skalerer godt uden at man skal arbejde med to separate versioner. Illustrator.\n2) Ikonet er vigtigt. Det er det første, der kigges på. Læs Michaels blog.\n\n[Browser: PixelResort]\n
Tips:\n\n1) Vektor så vidt muligt. Det skalerer godt uden at man skal arbejde med to separate versioner. Illustrator.\n2) Ikonet er vigtigt. Det er det første, der kigges på. Læs Michaels blog.\n\n[Browser: PixelResort]\n
Nu vist, hvordan man laver grafik – hvad skal der faktisk laves?\n\n
Eksempel: Det her…\n
… plus de her grafikker…\n
… giver det her.\n\n
Forskellen:\n\nDer er lavet:\n- navbar\n- tabbar-ikoner\n- tabel-celler\n- baggrunde (color tint vs. grafik) på alt: screen, tabelceller, navbar, tabbar, knapper\n
\n
\n
Både fordele og ulemper\nFordele: kendt sprog/miljø (MonoTouch: .NET/C#), kan udvikle til flere platforme på én gang (Appcelerator: iOS/Android)\nUlemper:\n- nogle: Stadig bruge Mac til kompilering, overførsel til device\n- nogle: Apps > MB\n- alle: Dårligere debugging-muligheder\n- alle: Nye versioner af SDK -> ventetid til porteret. Stor ulempe!\n- alle: Hjælp/eksempler/dokumentation! Alt fra Apple er i Obj-C. Maaange flere eksempler/hjælp til Obj-C.\n\n- Er det faktisk hurtigere? Prog.sprog er ikke det vigtige, det er kendskab til framework (jf. C#/.NET). Og det tager lige lang tid (el. længere – eksempler)\n\n-> Derfor: computer=Mac\n
Både fordele og ulemper\nFordele: kendt sprog/miljø (MonoTouch: .NET/C#), kan udvikle til flere platforme på én gang (Appcelerator: iOS/Android)\nUlemper:\n- nogle: Stadig bruge Mac til kompilering, overførsel til device\n- nogle: Apps > MB\n- alle: Dårligere debugging-muligheder\n- alle: Nye versioner af SDK -> ventetid til porteret. Stor ulempe!\n- alle: Hjælp/eksempler/dokumentation! Alt fra Apple er i Obj-C. Maaange flere eksempler/hjælp til Obj-C.\n\n- Er det faktisk hurtigere? Prog.sprog er ikke det vigtige, det er kendskab til framework (jf. C#/.NET). Og det tager lige lang tid (el. længere – eksempler)\n\n-> Derfor: computer=Mac\n
Næste: udviklingsmiljø=Xcode\n\nFra Apple. Gratis (kommer tilbage til)\nHer man laver alt. Kommer tilbage til og viser, hvordan det fungerer.\n
For nyligt kommet i en ny major version.\nDet er et moderne udviklingsmiljø, der har alle de features, man har brug for. -> Er faktisk vigtigt.\n\nIngen grund til at kigge på andre udviklingsmiljøet…\n
Næste: programmeringssproget = Objective-C\n\n(For dem, der ved noget om det:) overbygning på C m. ting fra SmallTalk.\nObjektorienteret, refleksivt og dynamisk = fleksibelt.\n\nSyntax er lidt anderledes, end mange er vante til, så det skal læres.\nMen: for god udvikler er sproget ikke vigtigt. Tager ikke lang tid at lære. Vigtigt er SDK/Framework (C#/.NET).\nDet skal kendes. Hvad kan man ikke (ikke fange indkommende opkald), hvad kan man (nemt at tage img fra fotoalbum).\n\n-> Nødvendig kompetence!\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Sagde at kompetence=Objective-C, men lige så meget kendskab til Framework'et.\n\nKendskab til Frameworket/SDK'et handler om at vide, hvad man kan med en iPhone.\nSå man kan benytte de muligheder, der er:\n\n[kalender, kompas, GPS, kamera, telefon, musikafspiller, adressebog, accelerometer/gyro, push/local notifications, indstillinger, SMS]\n\n? Spørgsmål?\n
Apps til iPod Touch, iPhone og iPad laves på nøjagtig samme måde. Der er naturligvis nogle forskelle i hardwaren (fx ikke sende SMS'er fra en iPod Touch). \nSå tænk over, hvilke devices de skal køre på.\n\nEn iPod Touch er stort set det samme som en iPhone uden telefon-delen. Så alt hvad man laver til en iPhone virker på en iPod Touch (stort set).\n\n
Helt grundlæggende kan alle iPhone apps også køre på en iPad. Den forstørre bare, så det fylder hele. \n\nBør udnytte de forskelle, der er. Ikke mindst skærmstørrelsen, naturligvis. Der er mulighed for at vise mere indhold på en iPad. Fx. split view controller vs. tabel -> drill-down.\n\n
To strategier:\n1) separat iPhone app og iPad app\n2) universal app\n\nAnbefaler universal – med mindre funktionaliteten er væsentlig anderledes.\n
Den *eneste* måde at få en app ud på = Apples App Store. Ikke download fra egen website; ikke eget salg.\n\nGodt og skidt: fordele/ulemper\nAlternativer: webapps, Jail break\n\n[klik] For at komme i gang skal man oprettes som Apple Developer. Det er *gratis*.\nKan downloade alle værktøjer. Men kan *kun* køre på simulator – ikke på fysisk device og ikke upload til App Store\n\n[klik] Tilmeldes iOS Developer Program. Koster $99 pr. år.\nKan vælge ml. Individual, Company, Enterprise ($299)\nVerificeres: faxe virksomheds registreringsbevis; Apple ringer tilbage og kontrollerer, at firmaet eksisterer. ~1 uges tid.\n\n\n[http://developer.apple.com]\n
Den *eneste* måde at få en app ud på = Apples App Store. Ikke download fra egen website; ikke eget salg.\n\nGodt og skidt: fordele/ulemper\nAlternativer: webapps, Jail break\n\n[klik] For at komme i gang skal man oprettes som Apple Developer. Det er *gratis*.\nKan downloade alle værktøjer. Men kan *kun* køre på simulator – ikke på fysisk device og ikke upload til App Store\n\n[klik] Tilmeldes iOS Developer Program. Koster $99 pr. år.\nKan vælge ml. Individual, Company, Enterprise ($299)\nVerificeres: faxe virksomheds registreringsbevis; Apple ringer tilbage og kontrollerer, at firmaet eksisterer. ~1 uges tid.\n\n\n[http://developer.apple.com]\n
For at uploade skal man:\n\n- have accepteret kontrakter i iTunes Connect\n- hvis betalte: bank- og skatte-oplysninger (bliver manuelt godkendt, så kan tage en uges tid)\n- have info klar\n[itunesconnect.com: Hansens Is]\n\n[iTunes, Hansens Flødeis]\n\n
Apple tjekker:\n\n- crasher den?\n- indhold: vold, bandeord, "nøgenhed" (skal angives v. upload)\n- copyright\n- UI-konventioner (ikoners betydning fx)\n- fungerer den uden netværk osv.\n\nOBS: kan ikke spørge i forvejen\n
Apple tjekker:\n\n- crasher den?\n- indhold: vold, bandeord, "nøgenhed" (skal angives v. upload)\n- copyright\n- UI-konventioner (ikoners betydning fx)\n- fungerer den uden netværk osv.\n\nOBS: kan ikke spørge i forvejen\n