Suche senden
Hochladen
Apple iOS - GUI Entwicklung
•
0 gefällt mir
•
747 views
M
messeb
Folgen
GUI Entwicklung für Apple iPhone und iPad
Weniger lesen
Mehr lesen
Software
Melden
Teilen
Melden
Teilen
1 von 30
Empfohlen
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
Peter Rozek
Ionic 3
Ionic 3
Hendrik Lösch
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Peter Rozek
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
Flutter - it's all about widgets - Flutter Rhein-Main Meetup
Flutter - it's all about widgets - Flutter Rhein-Main Meetup
Markus Kühle
"Star Wars im Alltag - Episode II"
"Star Wars im Alltag - Episode II"
ConstantinGillies
Glossar: Handy-TV
Glossar: Handy-TV
ITWissen.info
Empfohlen
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
Peter Rozek
Ionic 3
Ionic 3
Hendrik Lösch
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Peter Rozek
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
Flutter - it's all about widgets - Flutter Rhein-Main Meetup
Flutter - it's all about widgets - Flutter Rhein-Main Meetup
Markus Kühle
"Star Wars im Alltag - Episode II"
"Star Wars im Alltag - Episode II"
ConstantinGillies
Glossar: Handy-TV
Glossar: Handy-TV
ITWissen.info
Glossar Akustik
Glossar Akustik
ITWissen.info
Glossar Leuchtdioden
Glossar Leuchtdioden
ITWissen.info
Glossar A/D-Wandler
Glossar A/D-Wandler
ITWissen.info
Mercedes Benz stellt autonomes Auto vor
Mercedes Benz stellt autonomes Auto vor
TWT
Glossar Smart-Energy
Glossar Smart-Energy
ITWissen.info
Insights into... Smart Home
Insights into... Smart Home
Axel Springer Marktforschung
Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5
Bjoern Reinhold
Why Game of Thrones needs a Social Media intervention
Why Game of Thrones needs a Social Media intervention
Germin8
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Francisco Javier Camarena Juarez
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Thomas Gläser
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes Interaktionsdesign
SENSORY-MINDS
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
Manfred Steyer
Ludica
Ludica
LeonesWilma
Geschäftsmodelle für die Mobilität der Zukunft
Geschäftsmodelle für die Mobilität der Zukunft
FutureManagementGroup AG
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
Google Plus für Business
Google Plus für Business
DAVIES MEYER
Kalsel
Kalsel
Afandi_oi
Gfk Smart Home Studie
Gfk Smart Home Studie
myDLS
Introduction to Embedded Systems
Introduction to Embedded Systems
Mohamed Tarek
Introduction to Embedded Systems
Introduction to Embedded Systems
WalaaMohamed
Apple iPhone iOS - Plattform und Konzepte
Apple iPhone iOS - Plattform und Konzepte
messeb
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
Weitere ähnliche Inhalte
Andere mochten auch
Glossar Akustik
Glossar Akustik
ITWissen.info
Glossar Leuchtdioden
Glossar Leuchtdioden
ITWissen.info
Glossar A/D-Wandler
Glossar A/D-Wandler
ITWissen.info
Mercedes Benz stellt autonomes Auto vor
Mercedes Benz stellt autonomes Auto vor
TWT
Glossar Smart-Energy
Glossar Smart-Energy
ITWissen.info
Insights into... Smart Home
Insights into... Smart Home
Axel Springer Marktforschung
Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5
Bjoern Reinhold
Why Game of Thrones needs a Social Media intervention
Why Game of Thrones needs a Social Media intervention
Germin8
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Francisco Javier Camarena Juarez
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Thomas Gläser
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes Interaktionsdesign
SENSORY-MINDS
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
Manfred Steyer
Ludica
Ludica
LeonesWilma
Geschäftsmodelle für die Mobilität der Zukunft
Geschäftsmodelle für die Mobilität der Zukunft
FutureManagementGroup AG
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
Google Plus für Business
Google Plus für Business
DAVIES MEYER
Kalsel
Kalsel
Afandi_oi
Gfk Smart Home Studie
Gfk Smart Home Studie
myDLS
Introduction to Embedded Systems
Introduction to Embedded Systems
Mohamed Tarek
Introduction to Embedded Systems
Introduction to Embedded Systems
WalaaMohamed
Andere mochten auch
(20)
Glossar Akustik
Glossar Akustik
Glossar Leuchtdioden
Glossar Leuchtdioden
Glossar A/D-Wandler
Glossar A/D-Wandler
Mercedes Benz stellt autonomes Auto vor
Mercedes Benz stellt autonomes Auto vor
Glossar Smart-Energy
Glossar Smart-Energy
Insights into... Smart Home
Insights into... Smart Home
Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5
Why Game of Thrones needs a Social Media intervention
Why Game of Thrones needs a Social Media intervention
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes Interaktionsdesign
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
Ludica
Ludica
Geschäftsmodelle für die Mobilität der Zukunft
Geschäftsmodelle für die Mobilität der Zukunft
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Google Plus für Business
Google Plus für Business
Kalsel
Kalsel
Gfk Smart Home Studie
Gfk Smart Home Studie
Introduction to Embedded Systems
Introduction to Embedded Systems
Introduction to Embedded Systems
Introduction to Embedded Systems
Ähnlich wie Apple iOS - GUI Entwicklung
Apple iPhone iOS - Plattform und Konzepte
Apple iPhone iOS - Plattform und Konzepte
messeb
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Gregor Biswanger
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
flossels
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
Michael Kühnel
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Gregor Biswanger
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT Group
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
André Krämer
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft AG
Mobile Apps für Designer
Mobile Apps für Designer
bowstreet
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
thoemmes
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Jens Küsters
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Jürgen Gutsch
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
Sencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
Einführung in Flex Mobile
Einführung in Flex Mobile
Johannes Hohenbichler
Mobile Web Apps
Mobile Web Apps
holgerrueprich
Ähnlich wie Apple iOS - GUI Entwicklung
(20)
Apple iPhone iOS - Plattform und Konzepte
Apple iPhone iOS - Plattform und Konzepte
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus Entwicklersicht
Mobile Apps für Designer
Mobile Apps für Designer
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Sencha Touch & PhoneGap
Sencha Touch & PhoneGap
Einführung in Flex Mobile
Einführung in Flex Mobile
Mobile Web Apps
Mobile Web Apps
Apple iOS - GUI Entwicklung
1.
iOS GUI-Entwicklung Sebastian Meßingfeld 18.04.2013 1© FH
AACHEN | Sebastian Meßingfeld
2.
Inhalt 2© FH AACHEN
| Sebastian Meßingfeld • Entwicklungsumgebung • GUI-Entwicklung • Pointing Device • Styleguide • Prototyp
3.
Entwicklungsumgebung • Xcode Interface
Builder • Debugging • Xcode • Intruments 3© FH AACHEN | Sebastian Meßingfeld
4.
Entwicklungsumgebung Interface Builder 4© FH
AACHEN | Sebastian Meßingfeld
5.
Entwicklungsumgebung Interface Builder 5© FH
AACHEN | Sebastian Meßingfeld • in Xcode enthalten • Ermöglicht zusammenklicken der Oberfläche • Standard UI-Elemente vorhanden • kein manuelles editieren der Dateien vorgesehen • Erzeugt .xib / .storyboard Dateien • XML-basierte Beschreibung der Oberfläche • gleich mehr ... • Erstellung der GUI auch im Code möglich
6.
Entwicklungsumgebung Debugging - Xcode •
statische Codeanalyse • Unit-Test-Unterstützung in Xcode enthalten • mittels Breakpoints • Breakpoints können geteilt werden • im Projekt abgespeichert • Konfiguration von Breakpoints möglich • bedingte Breakpoints 6© FH AACHEN | Sebastian Meßingfeld
7.
Entwicklungsumgebung Debugging - Instruments 7©
FH AACHEN | Sebastian Meßingfeld
8.
Entwicklungsumgebung Debugging - Instruments 8©
FH AACHEN | Sebastian Meßingfeld • automatisierte UI-Tests • Analyse von Systemauslastungen • CPU • Speicher • I/O • Grafik (frames per second) • Fehleranalyse • Memory Leaks
9.
GUI-Entwicklung • Grundlegendes zur
GUI-Entwicklung • GUI-Elemente • Art der GUI-Entwicklung 9© FH AACHEN | Sebastian Meßingfeld
10.
GUI-Entwicklung Grundlegendes zur GUI-Entwicklung •
MVC ist verwendetes Paradigma • View: Anzeige von Daten (UI mittels GUI Builder) • Controller: Verbindet Model und View • Model: Datenhalterung (z.b. CoreData) • Verknüpfung von Code und GUI Elementen • IBOutlets: Verweise für Zugriff der UI aus Code • IBActions: Delegate Funktionen für GUI-Events • per Drag&Drop im Interface Builder möglich 10© FH AACHEN | Sebastian Meßingfeld
11.
GUI-Entwicklung GUI-Elemente 11© FH AACHEN
| Sebastian Meßingfeld
12.
GUI-Entwicklung GUI-Elemente 12© FH AACHEN
| Sebastian Meßingfeld • Weitere (integrierte) • Web View • Map View • Page View (animiertes Blättern) • Table View • Collection View (Grid) • GLKit View (OpenGL) • Viele Third-Party Erweiterungen
13.
Art der GUI-Entwicklung XIB 13©
FH AACHEN | Sebastian Meßingfeld
14.
Art der GUI-Entwicklung XIB •
einzelne Views in je einer *.XIB-Datei • Beziehung zwischen Views im Code hinterlegt • View muss im Code erzeugt werden *anzeige = [[ViewController alloc] initWithNibName:@“XIBDatei“ ...] • View muss im Code angezeigt werden [self.window.view addSubview:anzeige.view] • View muss im Code ausgeblendet werden • für komplexe Anwendungsstrukturen nicht geeignet 14© FH AACHEN | Sebastian Meßingfeld
15.
Art der GUI-Entwicklung Storyboard 15©
FH AACHEN | Sebastian Meßingfeld
16.
Art der GUI-Entwicklung Storyboard •
zusätzliche Erstellung von Abläufen innerhalb der App möglich • alle Views in einer .storyboard-Datei • können eigenständig gestaltet werden • können eigenen View-Controller haben • per Drag&Drop Erstellung von Verbindung zwischen Views • z.B. per Button-Klick wechseln der View • auf Wechsel der Views kann reagiert werden • Zugriff auf Quell-, Ziel-View(-Controller) möglich 16© FH AACHEN | Sebastian Meßingfeld
17.
Art der GUI-Entwicklung Autolayout •
Constraints für Beziehung zwischen einzelnen „Child“-Views • erweitert bisherige Layout-Beziehung, die bisher nur auf Basis des Parent-Views geschah • für unterschiedliche Ausrichtungen des Geräts • Portrait, Landscape • für Universal (iPad/iPhone) – Apps geeignet • ermöglicht einfache Lokalisierung • erkennt GUI-Elemente, extrahiert Text und erstellt Platzhalter • Key-Value Dateien für unterschiedliche Sprachen • Vorher: Erstellung lokalisierter Views (eig. *.XIBs ...) • in *.XIB und *.storyboard ab iOS 6 verwendbar 17© FH AACHEN | Sebastian Meßingfeld
18.
Datenübertragung zwischen Views 18©
FH AACHEN | Sebastian Meßingfeld
19.
Datenübertragung zwischen Views •
im Code • Daten werden beim Übergang der Views manuell übergeben • im „alten“ View-Controller wird auf „neuen“ View- Controller zugegriffen: Übergabe Werte/Objekte • neuerController.objekt = alterController.objekt • *.XIB • Ablauf muss selbst definiert werden • *.storyboard • im Eventhandler des „Übgangs“ möglich 19© FH AACHEN | Sebastian Meßingfeld
20.
Pointing Device • Multitouch •
Gesten 20© FH AACHEN | Sebastian Meßingfeld
21.
Pointing Device Multitouch und
Gesten • ereignisgesteuerte Behandlung • Aufruf von Handler-Methoden • in jedem UI-Element möglich • vordefinierte Ereignisverarbeitung in bestimmten UI-Komponenten • Slider: Pan (Drag & Move) • Button: Tap (Klick) • „System“-Gesten können nicht überschrieben werden • App-Wechsel • schließen von Apps auf iPad 21© FH AACHEN | Sebastian Meßingfeld
22.
Pointing Device Multitouch • iPhone •
gleichzeitige Erkennung bis zu 5 Fingern • iPad • gleichzeitige Erkennung bis zu 11 Fingern • Zugriff auf einzelne Fingerpositionen möglich 22© FH AACHEN | Sebastian Meßingfeld
23.
Pointing Device Gesten • Standard-Gesten
im App nutzbar • Tap • Pinch • Rotation • Swipe • Pan • LongPress • Erweiterung der Funktionalität von UI- Komponenten mit Standardgesten • „Swipe-Out“ von Tabellenzelle • Erstellung eigener Gesten möglich 23© FH AACHEN | Sebastian Meßingfeld
24.
Pointing Device Gesten • 1-
und 2-Finger Gesten im iOS Simulator • Pinch • Pan • Swipe 24© FH AACHEN | Sebastian Meßingfeld
25.
Styleguide Apple iOS Human
Interface Guidelines • detailreiche Beschreibung über die gute Gestaltung von App • „plattformübergreifende Best Practices“ • Betrachtung unterschiedliches Punkte • Aufbau der Benutzeroberfläche • Interaktion mit dem Nutzer • Besonderheiten iOS Link: http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf 25© FH AACHEN | Sebastian Meßingfeld
26.
Styleguide Wichtige Punkte für
Gestaltung der Oberfläche • ästhetische Integrität • an den Einsatz angepasste grafische Oberfläche • Konsistenz • Verwendung von Standards in der eigenen grafischen Oberfläche • Einheitliche Gestaltung der Benutzerführung in der eignen App • direkte Manipulation • Direkte Interaktion mit Objekten, anstatt über anderer Kontrollelemente • z.B. bei der Bildmanipulation: Zoomen, Rotieren 26© FH AACHEN | Sebastian Meßingfeld
27.
Styleguide Wichtige Punkte für
Gestaltung der Oberfläche • Feedback • bei jeder Aktion soll dem Nutzer ein Feedback gegeben werden, dass ein Aktion gerade ausgeführt wird • Metaphern • Beispiele aus der realen Welt verwenden • z.B.: Dinge in Ordner ablegen, Seite umblättern ... • Benutzerkontrolle • nicht die App, sondern Benutzer soll Aktionen initiieren 27© FH AACHEN | Sebastian Meßingfeld
28.
Prototyp 28© FH AACHEN
| Sebastian Meßingfeld
29.
Sonstiges 29© FH AACHEN
| Sebastian Meßingfeld
30.
FH Aachen Fachbereich Elektrotechnik
& Informationstechnik Sebastian Meßingfeld 30© FH AACHEN | Sebastian Meßingfeld