Desktop/mobile convergent applications with Kirigami
Transcript of Desktop/mobile convergent applications with Kirigami
![Page 1: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/1.jpg)
Desktop/mobile convergent applications with Kirigami
Dimitris Kardarakos
![Page 2: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/2.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
What is KDE
● Developers
● Translators
● Artists
● Writers
● Promoters
● Users
![Page 3: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/3.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
KDE Products
● Plasma
● KDE Frameworks
● KDE Applications
![Page 4: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/4.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
KDE Vision
"A world in which everyone has control over their digital life and enjoys freedom and privacy."
![Page 5: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/5.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
Convergence
● Hardware
Plug a mouse and a monitor into a mobile and use it as a desktop
● Software
Consistent UI/UX across both mobile and desktop
![Page 6: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/6.jpg)
Convergence
● More than a technical term
– What do the application repositories offer?
● Linux repositories
– We need touch friendly applications
![Page 7: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/7.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
Kirigami● UI framework for convergent apps
– Qt Quick Controls based– Follows the KDE HIG– Tier 1 framework– Multiplatform– LGPLv2
![Page 8: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/8.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
KDE HIG
● Principles
● Recommendations● UI/UX patterns● Components
● Goal● Provide an optimal user experience per device
type● Create consistent, intuitive and easy to learn
UIs
![Page 9: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/9.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
Calindori
● The calendar of Plasma Mobile– Date navigation– Events and Tasks management– Reminders– Month, week and day views– Multiple calendars
![Page 10: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/10.jpg)
Calindori and Convergence
● The primary target of Calindori is Plasma Mobile● Minimal effort on convergence-specific bits● Leverage Kirigami capabilities ● Develop, maintain and release a single version of
the software
![Page 11: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/11.jpg)
Calindori on Mobile
![Page 12: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/12.jpg)
Calindori on Desktop
![Page 13: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/13.jpg)
Column Display
● No extra code
![Page 14: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/14.jpg)
Global Drawer in Calindori
![Page 15: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/15.jpg)
Global Drawer (default)
● No extra code
![Page 16: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/16.jpg)
Global Drawer to Menu
![Page 17: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/17.jpg)
Application Toolbar > Global Toolbar
● No extra code
![Page 18: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/18.jpg)
Context Drawer > Global Toolbar
● No extra code
![Page 19: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/19.jpg)
Global Toolbar Style
● No extra code
![Page 20: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/20.jpg)
Scaling
![Page 21: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/21.jpg)
On Demand Actions: SwipeListItem
● No extra code
![Page 22: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/22.jpg)
Calindori: Rows to Columns
![Page 23: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/23.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
Kirigami GalleryMobileQT_QUICK_CONTROLS_MOBILE = true
QT_QUICK_CONTROLS_STYLE = Plasma
DesktopQT_QUICK_CONTROLS_MOBILE = false
QT_QUICK_CONTROLS_STYLE = org.kde.desktop
![Page 24: Desktop/mobile convergent applications with Kirigami](https://reader035.fdocuments.us/reader035/viewer/2022071612/6156ff1ba097e25c764fe056/html5/thumbnails/24.jpg)
V International GNU Health Conference - Nov. 20 - 21, online event - #GHCon2020
Why Kirigami
● Framework for mobile and desktop● Maintain a single application
● No design feedback available
● Content consumption software● Made by a sustainable community