APEX for mobile only. Gewusst wie! Alexej Schneider APEX connect

Transkript

1 APEX for mobile only. Gewusst wie! Alexej Schneider APEX connect

2 Facts & Figures Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Inhabergeführt 24 Mio. Euro Umsatz Gründung 1994 Zertifizierter Partner von Oracle, Microsoft und SAP Ausbildungsbetrieb Niederlassung Frankfurt am Main 2

3 Meine Geschichte APEX Consultant Schwerpunkte: APEX Front-End Mobile UI/UX Studiert: Angewandte Informatik Bachelorthesis: Plattformübergreifende Entwicklung einer Smartphone Applikation mit sozialen Interaktionselementen auf Basis des Frameworks PhoneGap (und jquerymobile) 3

4 Things people say about APEX mobile Mobile Theme bietet wenig Funktionalität Es schaut nicht wirklich schön aus Wozu überhaupt Mobile Theme, es gibt doch das Universal Theme Eigentlich sehe ich da gar keinen Nutzen 4

5 Entwicklung für mobile Die Herausforderungen Muss schnell sein Touch/Gestures Neue mobile Elemente Frontend Kenntnisse User Experience Wenig Platz vorhanden 6

6 Was wird versucht Mit Universal Theme kann man so viel machen. Das soll die mobile Applikation doch auch können! 7

7 So etwas auf dem Smartphone bedienen? Will wirklich keiner Source: 8

8 User Experience 9

9 Definition 10

10 11

11 UX UI 12

12 Smartphone Haltungen by Steven Hoober 13

13 14

14 90% 10% 15

15 Finger friendly design Empfehlungen: Touch target size Apple: 44 x 44 Points ~= 1,55 cm Microsoft: Ideal 9mm Minimum 7mm 16

16 Mobile Elemente 17

17 Touch gestures 18

18 Mobile First 19

19 Agile Entwicklung 20

20 21

21 Interface Design Less is more Don t make me think User will schnell zum Ziel kommen Eingaben erleichtern Simple Navigation Informationen Gruppieren UX-Patterns verwenden Und und und 22

22 Thema UX Weiterbildungsmöglichkeiten Bewusster surfen/apps verwenden Bücher Zeitschriften Blogs Twitter (Von schlechten Beispielen kann man auch lernen) 23

23 Back to the topic 24

24 jquerymobile framework for creating mobile web applications works on all popular smartphones and tablets uses HTML5 & CSS3 for laying out pages with minimal scripting 25

25 Universal Theme vs. Mobile Theme Reporting UT (Interactive Report) Reflow Report 26

26 Universal Theme vs. Mobile Theme Mobile-Reporting Column Toggle Report List View 27

27 jquerymobile Was bietet es in APEX 28

28 jquerymobile Es bietet mehr! 29

29 jquerymobile Font Awesome implementieren 30

30 jquerymobile Font Awesome implementieren 31

31 jquerymobile Standard Button Template Template Options: Wenig Auswahlmöglichkeiten jquerymobile Icon-Buttons möglich Kein Font Awesome 32

32 jquerymobile jquerymobile Button CSS-Klassen Offizielle Seite 33

33 jquerymobile Eigenen Button mit Font Awesome erstellen Standard Button kopieren 34

34 jquerymobile Abstand vergrößern Google developer Tools CSS-Anpassen 35

35 jquerymobile Font Awesome Button: Eigene Template Options Edit Button Template 36

36 jquerymobile Aus einer Notification einen Toast machen 37

37 jquerymobile Toast: Nach unten rechts verschieben 38

38 jquerymobile Toast: Färben 39

39 jquerymobile Toast: Feinschliff + JavaScript zum schließen des Toasts Bonus 40

40 jquerymobile Tabs Template 41

41 jquerymobile Zum testen: Static Region 42

42 jquerymobile Tab Container Template 43

43 Theme Roller themeroller.jquerymobile.com 44

44 45

45 Wege um CSS zu speichern Theme Roller CSS-Datei extern auslagern CSS-Datei in Shared Objects Auf globaler Seite definieren Nur auf bestimmten Seiten definieren Inline style mit style=color:blue style=color:blue in SQL einbetten!important bitte nicht 46

46 Lessons learned Customizing: Mobile Theme Kann mit viel Aufwand verbunden sein Verständnis des jquerymobile Frameworks hilfreich Zum Erweitern sind Frontend Technologien Kenntnisse notwendig HTML CSS DOM-Struktur Dennoch bietet APEX hier viel Unterstützung 47

47 Tipps Developer Toolbar by Peter Raganitsch PL/SQL Region auf globaler Seite einbauen 48

48 Tipps Browser Developer Tools Zum testen und manipulieren DOM JavaScript CSS Responsives Verhalten Netzwerktraffic 49

49 Material Design UX/UI-Sprache 50

50 Material Design Von Vincent Morneau Alternative zum Universal Theme 51

51 Material Design Von Vincent Morneau apex.mt-ag.com 52

52 53

53 Reuse existing web development skills to quickly make hybrid applications built with HTML, CSS and JavaScript. Create experiences for multiple platforms with a single codebase so you can reach your audience no matter their device. -PhoneGap 54

54 PhoneGap Zugriff auf native Funktionen mit JavaScript Kamera, Beschleunigungsmesser, Kompass, Kontakte, Vibration Weitere Plugins möglich Für ios, Android, Windows 55

55 Zukunft Mit APEX 5.1 auch Touch-Unterstützung (Universal Theme) jquerymobile-team arbeitet an einer neuen Version APEX-Team will diese dann auch implementieren (Mobile Theme) 56

56 Vorträge der MT AG Dienstag, 26. April Mittwoch, 27. April Donnerstag, 28. April Uhr Music Hall Uhr Soul Uhr Music Hall 1 Echtzeitvisualisierung von Twitter und Co. Kai Donato & Oliver Lemm APEX for mobile only. Gewusst wie! Alexej Schneider Wie versioniere ich in APEX? Oliver Lemm Uhr Music Hall Uhr Music Hall Uhr Music Hall 3 Zeitreisen mit PL/SQL Daniel Dyla Interactive Reports Downloads Reloaded Moritz Klein WebSocket my APEX! Kai Donato Uhr Jazz Uhr Music Hall 2 Workshop: Einstieg in die aktuelle Version von Oracle Application Express Oliver Lemm Universal Theme vs. APEX mobile vs. MAF Davide Groppuso & Steven Grzbielok Uhr Music Hall 1 Single Sign-On für alle! Niels de Bruijn 57

57 Fragen? 58