Website Adaptation & Formatting Layer
-
Upload
joomladays-netherlands -
Category
Technology
-
view
1.855 -
download
0
description
Transcript of Website Adaptation & Formatting Layer
![Page 1: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/1.jpg)
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
WEBSITE ADAPTATION & FORMATTING LAYER
![Page 2: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/2.jpg)
OVERVIEW
๏ Introduction
๏ Approach & architecture
๏ Practical information
๏ Usability
๏ Performance
๏ Wrap up
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
2
![Page 3: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/3.jpg)
MOBILE INTERNET TODAY
๏ Most CMSs deliver desktop-only websites
➡ Bad mobile browsing experience
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
3
![Page 4: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/4.jpg)
CURRENT SOLUTIONS
๏ Template switchers
๏ Basic content adaptation
➡ Not user friendly
➡ Far from optimal
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
4
![Page 5: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/5.jpg)
MISSION
๏ Develop a Joomla! extension that ...
๏ detects a mobile device
๏ performs device-specific content adaptation
๏ is as generic as possible
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
5
![Page 6: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/6.jpg)
OVERVIEW
๏ Introduction
๏ Approach & architecture
๏ Practical information
๏ Usability
๏ Performance
๏ Wrap up
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
6
![Page 7: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/7.jpg)
APPROACH
USE SIRUNA PLATFORM
USABILITY - PERFORMANCE - MODIFIABILITY
7
![Page 8: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/8.jpg)
OPEN PLATFORM (AGPL)
ADVANCED DEVICE DETECTIONCONTENT ADAPTATION MODULE
CONTENT FETCHING MODULE
MORE INFO : HTTP://OPEN.SIRUNA.ORG
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
8
![Page 9: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/9.jpg)
MAIN SIRUNA FUNCTIONALITY
๏ Image adaptation (scaling, reduce file size, transcode...)
๏ Rearrange content
๏ Adapt the menu structure
๏ Replace JavaScript functionality
๏ Replace original advertisement banners by mobile advertisement banners
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
9
![Page 10: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/10.jpg)
Siruna Website1. Request page
3. Send page
4. Transform page
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
2. Request page
5. Deliver mobile page
ORIGINAL SIRUNA USE
10
![Page 11: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/11.jpg)
Joomla! & WAFL Siruna1. Request page
2. Perform device detection
3. Send redirect
9. Deliver mobile page
7. Send page
4. Request page
5. Request page
6. Generate mobile page
8. Transform page
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
OUR APPROACH
11
![Page 12: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/12.jpg)
JOOMLA! EXTENSIONS
๏ Component
๏ Only one per page
๏ Defines main content
๏ Module
๏ Complements content of a component
๏ Plugin
๏ Implements extra functionality
๏ Template
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
12
![Page 13: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/13.jpg)
WAFL EXTENSION STRUCTURE
๏ Main functionality plugin
๏ Admin panel component
๏ Basic mobile template
๏ Supporting module and 2 plugins
➡ Community can develop extra supporting modules/plugins
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
13
![Page 14: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/14.jpg)
OVERVIEW
๏ Introduction
๏ Approach & architecture
๏ Practical information
๏ Usability
๏ Performance
๏ Wrap up
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
14
![Page 15: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/15.jpg)
TEAM
๏ Kristof Vandermeeren - Project Manager
๏ Robin Leblon - Configuration Manager
๏ Heiko Desruelle - Test Manager
๏ Rob Vanden Meersche - Test Manager
๏ Stijn De Vos - Scribe & Documentation Manager
๏ Klaas Lauwers - Developer
๏ Mattias Poppe - Developer
๏ Daan Van Britsom - Developer
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
15
![Page 16: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/16.jpg)
TESTING
๏ 2 test managers
๏ phpUnderControl
๏ Joomla! testing framework
๏ Types
๏ Unit
๏ Integration
๏ Performance
๏ Acceptance
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
16
![Page 17: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/17.jpg)
COVERAGE & METRICS
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
17
![Page 18: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/18.jpg)
OVERVIEW
๏ Introduction
๏ Approach & architecture
๏ Practical information
๏ Usability
๏ Performance
๏ Wrap up
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
18
![Page 19: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/19.jpg)
EASY INSTALLATION
๏ WAFL Joomla! extension == 6 parts
๏ “One-zip-upload”
๏ Plug-and-play
๏ Uncluttered admin panel
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
19
![Page 20: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/20.jpg)
FEATURE LIST
๏ 3 modes of operation
๏ Template switching
๏ Mobile redirect
๏ Siruna
๏ Mobile template based on desktop template
๏ Delivered with basic Siruna mapping
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
20
![Page 21: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/21.jpg)
OVERVIEW
๏ Introduction
๏ Approach & architecture
๏ Practical information
๏ Usability
๏ Performance
๏ Modifiability
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
21
![Page 22: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/22.jpg)
DEVICE DETECTION
๏ Bottleneck component : invoked every request
๏ Performance measures :
๏ Devices organized according to popularity
๏ Can be disabled
๏ Different updateable data sources
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
22
![Page 23: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/23.jpg)
DEVICE DETECTION
๏ Detection time :
๏ Popular mobile device : <1 ms
๏ Less popular/desktop : 3 ms
๏ Typical Joomla! page request (no caching) : 500 ms
๏ Accuracy :
๏ 99 % of devices in WURFL (largest mobile device database)
๏ Typical PHP mobile detection : 80 %
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
23
![Page 24: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/24.jpg)
PERFORMANCE TEST RESULTS
WAFL disabled WAFL enabled - desktop WAFL enabled - mobile
REQUESTS/MINUTE - MORE IS BETTERMEASURED WITH JOOMLA! PROFILER - CHECKED WITH JMETER
24
![Page 25: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/25.jpg)
PERFORMANCE TEST RESULTS
0
58
115
173
230224 222
212
WAFL disabled WAFL enabled - desktop WAFL enabled - mobile
REQUESTS/MINUTE - MORE IS BETTERMEASURED WITH JOOMLA! PROFILER - CHECKED WITH JMETER
24
![Page 26: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/26.jpg)
0
275
550
825
1.100
No cachingModule caching
Page caching
WAFL disabled WAFL enabled - desktop WAFL enabled - mobile
PERFORMANCE TEST RESULTSREQUESTS/MINUTE - MORE IS BETTER
27
![Page 27: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/27.jpg)
0
275
550
825
1.100
No cachingModule caching
Page caching
WAFL disabled WAFL enabled - desktop WAFL enabled - mobile
PERFORMANCE TEST RESULTSREQUESTS/MINUTE - MORE IS BETTER
27
![Page 28: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/28.jpg)
CACHING SUPPORT
๏ Support Joomla! built-in cache
๏ Use context-aware cache handlers
๏ Injection via Joomla!’s flexible binding registry
๏ No core modifications needed
➡ Unprecedented feature!
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
28
![Page 29: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/29.jpg)
PERFORMANCE TEST RESULTS
0 KB
150 KB
300 KB
450 KB
600 KB
WAFL disabled Template switching Siruna
BANDWIDTH USAGE - LESS IS BETTER
29
![Page 30: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/30.jpg)
PERFORMANCE TEST RESULTS
0 KB
150 KB
300 KB
450 KB
600 KB544
WAFL disabled Template switching Siruna
BANDWIDTH USAGE - LESS IS BETTER
29
![Page 31: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/31.jpg)
PERFORMANCE TEST RESULTS
0 KB
150 KB
300 KB
450 KB
600 KB544483
WAFL disabled Template switching Siruna
BANDWIDTH USAGE - LESS IS BETTER
29
![Page 32: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/32.jpg)
PERFORMANCE TEST RESULTS
0 KB
150 KB
300 KB
450 KB
600 KB544483
249
WAFL disabled Template switching Siruna
BANDWIDTH USAGE - LESS IS BETTER
29
![Page 33: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/33.jpg)
OVERVIEW
๏ Introduction
๏ Approach & architecture
๏ Practical information
๏ Usability
๏ Performance
๏ Wrap up
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
30
![Page 34: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/34.jpg)
STRENGTHS
๏ Generic core functionality
๏ High performing implementation
๏ Easy install with “one-click-upload”
๏ Very easy to use, no technical knowledge needed
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
31
![Page 35: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/35.jpg)
FROM ALPHA TO BETA
๏ Further improvements :
๏ Improve layout mobile template (layout injection)
๏ Catch device detection info from Siruna and use in template
๏ Speed up device detection for desktops (whitelist)
๏ Additional settings for mobile redirect
๏ Automagical Siruna configuration
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
32
![Page 36: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/36.jpg)
STANDALONE COMPONENTS
๏ Context-aware Joomla! cache
๏ Continuous integration environment for Joomla!
๏ Highly optimised device detection
➡ Very useful for the community
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
33
![Page 37: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/37.jpg)
COMING UP...
๏ Next alpha release in 1 week ( June, 21)
๏ Safer installation
๏ Greatly improved layout injection
๏ Last alpha before beta
๏ Compatible with latest open-source Siruna version
➡ Download at http://www.wafl.ugent.be
➡ Download Siruna at http://open.siruna.org
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
34
![Page 38: Website Adaptation & Formatting Layer](https://reader033.fdocuments.net/reader033/viewer/2022052900/5563554dd8b42a6f7b8b560b/html5/thumbnails/38.jpg)
Heiko Desruelle | Stijn De Vos | Klaas Lauwers | Robin Leblon | Mattias Poppe | Daan Van Britsom | Rob Vanden Meersche | Kristof Vandermeeren
MORE INFORMATION AT HTTP://WWW.WAFL.UGENT.BE
HTTP://WWW.SIRUNA.COM
CONTACT WAFL-TEAM [email protected]
CONTACT SIRUNA [email protected]