Industry Ontologies: Case Studies in Creating and Extending Schema.org
Your SlideShare is downloading.
×
Check these out next
Recommended
More Related Content
Similar to Keep me moving goin mobile (20)
More from Christian Rokitta (16)
Recently uploaded (20)
Keep me moving goin mobile
- 1. Keep me moving Goin’ Mobile with Universal Theme and Beyond Christian Rokitta Bonn 2019
- 2. 1993 today 1996 1999 2009 20152010 2011 2014 Oracle Database Version 6 Hoechst AG Clinical Research Frankfurt, Germany Custom Development Utrecht, Netherlands <HTML> Oracle Consultant/Product Development Manager Utrecht, Netherlands mod_plsql Oracle Web Toolkit JavaScript(); HTML DB APEX Speaker Oracle Database & Application Express Consultant Utrecht, Netherlands {CSS} proud member of APEX UI Customization Reporting Plug-in Christian Rokitta
- 3. Out in the woods Or in the city It's all the same to me When I'm driving free The world's my home When I'm mobile … Keep me moving Goin' Mobile / Who’s Next The Who
- 4. 4 of 36 Demand Convenience user & developer
- 5. Topics 5 of 36 Universal Theme Tools UX Discussion
- 6. Universal Theme Mobile Patterns (5.1+) Navigation Headers and Footers Data Entry Touch Gestures Mobile Components 7 of 36
- 7. Universal Theme Mobile Patterns – Page Layout • Navigation • Top Menu: SM, MD & LG screen width • Bottom Menu: XXS, XS screen width • Navigation Bar • Header • Breadcrumb Region Position • Button Region Template • Footer • Button Region Template 8 of 36
- 8. 9 of 36 Universal Theme Mobile Patterns – Navigation - User Interface Details
- 9. Universal Theme Mobile Patterns – Navigation - Template Options 10 of 36
- 10. Universal Theme Mobile Patterns – Data Entry UI enhancements UX challenges 11 of 36
- 11. Universal Theme Mobile Patterns – Data Entry text 12 of 36
- 12. Universal Theme Mobile Patterns – Data Entry email 13 of 36
- 13. Universal Theme Mobile Patterns – Data Entry date 14 of 36 $("input.html5-date").attr("type","date");
- 14. Universal Theme Mobile Patterns – Data Entry number 15 of 36 $("input.html5-tel").attr("type", "tel");
- 15. Universal Theme Mobile Patterns – Touch Gestures 16 of 36 Exposed by predefined dynamic actions: using event data this.data.pointerType: type of pointer (mouse or touch) • tap this.data.tapCount • press • swipe this.data.offsetDirection (2 left, 4 right), this.data.distance • pan this.data.offsetDirection (2 left, 4 right, 8 up, 16 down), this.data.isFinal
- 16. Universal Theme Mobile Patterns – optimized Components 17 of 36
- 17. Universal Theme Responsive Classes 18 of 36
- 18. Challenges 19 of 36
- 19. Universal Theme Responsive?! 20 of 36
- 20. Universal Theme Client Side vs Server Side • Universal Theme • Responsive Grid • Utility Classes • Server Side Device Detection? • Who are you? – client device Categorizr for APEX (desktop, tablet, mobile) http://rokitta.blogspot.com/2012/04/are-you-client-device-categorizr-for.html • How are you? - Categorizr for APEX part 2: the Plug-in (viewportWidth, g_viewportHeight, g_viewportOrientation) http://rokitta.blogspot.com/2013/05/how-are-you-categorizr-for-apex-part-2.html 21 of 36
- 21. Universal Theme Reduce Traffic use AJAX instead of Page rendering/processing cycle • Declarative: Dynamic Action some region types are not refreshable with build in dynamic action: PL/SQL Region, ListView, … • JavaScript API: apex.server.process 22 of 36
- 22. Universal Theme What I’m missing1 23 of 36 Page Transitions It’s possible to add your own custom CSS and jQuery code i.c.w. build in Touch Gestures Dynamic Actions. Demo?!
- 23. Universal Theme What I’m missing2 24 of 36 Pagination in Column Toogle and Reflow Report was available in jQuery Mobile
- 24. Universal Theme What I’m missing3 25 of 36 Listview Dynamic Load at EndOfList/Scroll event Infinite Scrolling again: was available in jQuery Mobile
- 25. Universal Theme What I’m missing4 26 of 36 Listview Dynamic Load at EndOfList/Scroll event Infinite Scrolling again: was available in jQuery Mobile
- 26. Beyond Universal Theme 27 of 36
- 27. APEX vs PWA vs Hybrid vs Native • APEX -> online first • PWA (Progressive Web Apps) -> offline first • Hybrid -> AppStore, WebView, advanced device API’s, files on device • Native -> OS specific development 29 of 36
- 28. Progressive Web Apps (PWA) • Fullscreen mobile experience • Shortcut on Device • Caching : Faster • Collection of Browser API’s • Service Workers • Online/offline detection • (push) Notifications (using Firebase) • Local storage • … 30 of 36
- 29. PWA Browser Support 31 of 36 https://caniuse.com/#feat=serviceworkers
- 30. PWA Browser Support - Mobile 32 of 36 https://caniuse.com/#feat=serviceworkers
- 31. PWA Concepts Manifest 33 of 36 { "short_name": "Goin", "name": "Goin Mobile", "icons": [ { "src": "/c/goin/img/128/mobile_comment.png", "type": "image/png", "sizes": "128x128" }, { "src": "/c/goin/img/512/mobile_comment.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/ords/f?p=goin:home", "background_color": "#DF1174", "display": "standalone", "scope": "/ords/", "theme_color": "#DF1174" } <link rel="manifest" href="/goin.json">
- 32. PWA Concepts Manifest 34 of 36
- 33. PWA Concepts Manifest • short_name and/or name • icons • start_url • background_color • display • scope • theme_color • orientation 35 of 36 { "short_name": "Goin", "name": "Goin Mobile", "icons": [ { "src": "/c/goin/img/128/mobile_comment.png", "type": "image/png", "sizes": "128x128" }, { "src": "/c/goin/img/512/mobile_comment.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/ords/f?p=goin:home", "background_color": "#DF1174", "display": "standalone", "scope": "/ords/", "theme_color": "#DF1174" }
- 34. PWA Concepts Manifest - display 36 of 36
- 35. PWA Concepts Add to Home Screen - aka web app install prompt • web app is not already installed • meets a user engagement heuristic currently: the user has interacted with the domain for at least 30 seconds • includes a web app manifest • served over HTTPS (required for service workers) • has registered a service worker with a fetch event handler 37 of 36
- 36. PWA Concepts Add to Home Screen 38 of 36
- 37. Session: Progressive Web Apps mit APEX Till Albert MT AG 9. Mai, 15:15 – 16:00 Kameha Spirit 39 of 36 Bonn 2019
- 38. Blog: APEX as a PWA Vincent Morneau - The Complete Guide 40 of 36 http://vmorneau.me/apex-pwa/
- 39. Q&A www.iadvise.eu www.apexsmartpivot.com rokitta.blogspot.com @crokitta @iadvise_live @apexsmartpivot www.linkedin.com/in/rokit
