DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09
-
Upload
tom-deryckere -
Category
Business
-
view
2.936 -
download
4
description
Transcript of Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09
![Page 1: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/1.jpg)
Basics of making mobilewebsites with Drupalwebsites with Drupal
Tom DeryckereSoftware Architect / Siruna
@twom
![Page 2: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/2.jpg)
25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s
Technology Trends
![Page 3: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/3.jpg)
From WAP to iMode to xHTML
Technology that works
![Page 4: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/4.jpg)
From slow connections to fast connections
Network side TECHNOLOGY
![Page 5: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/5.jpg)
5
![Page 6: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/6.jpg)
Making content mobile
is the basis
Making mobile content
6
useful and usable
is the need
![Page 7: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/7.jpg)
Mobile Web Applications that :
Work on a phone
Fit on a phone
Make SENSE on a phoneMake SENSE on a phone
Call to ACTION
and have REVENUE models
7
![Page 8: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/8.jpg)
DrupalCon Paris:
http://drupalcon.siruna.com
Slate:
http://twom.slate.mobixx.eu
Examples (Drupal)
8
![Page 9: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/9.jpg)
Garland mobile:
http://twom.garland.mobixx.eu
Marina:
http://twom.marina.mobixx.eu
Zen:
http://twom.zen.mobixx.eu
XIO:
http://xio.siruna.com
Examples (Drupal)
http://xio.siruna.com
http://portal.siruna.com
9
![Page 10: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/10.jpg)
WHERE IS THE COMPLEXITY
10
![Page 11: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/11.jpg)
Device fragmentation:− Millions of devices
− Different Operating systems
− Different capabilities
• Ex: screen sizes, javascript support, CSS / xHTML support, video support
− ...
Usability: make a fun and easy experience
Complexity
Usability: make a fun and easy experience− Content has to be easy to find
− Reduce scrolling (no horizontal scrolling)
− Make links clickable (not too small)
− Easy navigation structure that is easy to find
− ...
11
![Page 12: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/12.jpg)
Convergence is coming
Javascript becomes more and more the standard
Desktop html works on mobile devices
On fragmentation
12
![Page 13: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/13.jpg)
More interesting dataUnited States Handset Data - April 2009
Requests: 3,538,714,000
India Handset Data - April 2009
Requests: 447,079,855
480x320 px
176x220 px
240x320 px
320 x 240 px
13
480x320 px
Palm pre: 480 x 320
320 x 240 px
Source: AdMob
![Page 14: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/14.jpg)
Optmization of download size− Network connections are not always optimal (between 50kb/s –
1,8Mbit/s
− Don’t let the user wait, don’t let him download content that he will
not use
Bring relevant content to the mobile user
Complexity
Bring relevant content to the mobile user− Understand what he will look for (think and plan well!!)
− Is not easy (especially for the customer)
14
![Page 15: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/15.jpg)
Complexity
15
Simple (double) navigation
No video
Easy access to stories
![Page 16: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/16.jpg)
SOME MORE EXAMPLES
16
![Page 17: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/17.jpg)
Form a multi-column based site going towards a 1
column site
We are talking about generic designs
GeneralLogin or Register
17
Second navigation
New forum posts
New Comments
Sponsors etc ...
![Page 18: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/18.jpg)
Rules of thumb
− No fixed margins
− No floats
− No big fixed fonts
− Reduce the usage of tables (or reduce the number of columns)
− Make a block with links to views like
Design
− Make a block with links to views like
• Most recent comments
• Most recent forum topics
− Remove node content from frontpage
− Replace the user login block by a link
− Navigation in a dropdown list works well
− No who is online, who is new kind of blogs (not relevant)
− You can make things sexy for iphone, android, ...
18
![Page 19: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/19.jpg)
Examples
19
![Page 20: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/20.jpg)
Examples
20
![Page 21: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/21.jpg)
Examples
21
![Page 22: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/22.jpg)
Examples
22
![Page 23: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/23.jpg)
Examples
23
![Page 24: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/24.jpg)
THE TOOLS
24
![Page 25: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/25.jpg)
Many attempts in the comunity
Focus on − Providing mobile themes (e.g. iUI, mobile theme)
− Theme switching
− Mobile payments
Mobile modules for Drupal
− Mobile payments
Not a lot of demos
General no proven long term strategy
An overview on
25
http://mobiledrupal.com/content/overview-mobile-modules-drupal
![Page 26: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/26.jpg)
Under my maintenance – Co-maintainers welcome!
http://drupal.org/project/mobile_tools(release 6.x-1.7)
http://drupal.org/project/siruna(release 6.x-1.0-beta)
Some Drupal modules
(release 6.x-1.0-beta)
http://drupal.org/project/wurfl(release 6.x-dev)
Planned:− Image resizing module
− Video transcoding solution (based on Media Mover)
− Providing some more mobile themes
26
![Page 27: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/27.jpg)
Switching(Make sure the user gets access to the best site)
Device Detection(Mobile device, desktop, PSP, ...)
First define the flow (4 steps)
Theming
(Layout, image resizing, navigation, table linearization)
Functionality + content(What functionality and content is relevant for the device)
27
![Page 28: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/28.jpg)
Device detection− Notify mobile users for the existence of a mobile site
− Automatically redirect mobile users to the mobile site
− Provide custom configurable message: e.g.: “View mobile |
classic”
− Support for Browscap, Wurfl and other third party device detection
User notification / redirection
− Support for Browscap, Wurfl and other third party device detection
modules
28
![Page 29: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/29.jpg)
Mobile context in the permission system − Roles of the mobile visitor gets replaced by a mobile variant of his
normal roles
− Administrator can use role permissions to toggle functionality
• Node Acces, Menu per role, etc ... Can help
− = Mobile context for permissions
Mobile permissions
− = Mobile context for permissions
− Very powerfull tool to toggle functionality on your mobile site!
29
![Page 30: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/30.jpg)
Theme switching (based on device group if needed)
Based on domain name or device detection
Switching per device group (Android, iPhone, etc ...)
Theme switching
30
![Page 31: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/31.jpg)
Demo 1
31
![Page 32: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/32.jpg)
Two main solutions
Create you own themes (see rules of thumb)− No fixed margins
− No floats
− No big fixed fonts
− Reduce the usage of tables (or reduce the number of columns)
− Make a block with links to views like
• Most recent comments
• Most recent forum topics
Creating the mobile look
Currently high risk and
complexity, but allows more
creativity!
− Remove node content from frontpage
− Replace the user login block by a link
− Navigation in a dropdown list works well
− No who is online, who is new kind of blogs (not relevant)
− You can make things sexy for iphone, android, ...
Use an adaptation service (like Siruna ;))− Does most of the work for you (image transcoding, device
detection, adaptation for difference devices)
− Build in functionality to help creating different versions
− Fast prototyping
− High Quality
![Page 33: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/33.jpg)
Adaptation engine = proxy to the mobile user
Mobile URL Desktop URL
DNS
Website / XML stream
Adaptation
engine
![Page 34: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/34.jpg)
The Siruna platform
Website
34
Website XML Feed
![Page 35: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/35.jpg)
How does it work?
Device
Detection
Content
Fetcher
Content
Adaptation
EngineSelect
Menu
Automatic
Content
Adaptation
35
Fetcher
35
Adapt Style
Select mobile
content
![Page 36: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/36.jpg)
Content adaptation engineSiruna Composer
Previewing XML based rules(http://open.siruna.org/documentation/sitemap-api)
36
![Page 37: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/37.jpg)
<map:transform />
means you want to define a transformation on the content.
<map:transform type=“sirunaElementTransformer” />
XML scripting language: syntax
<map:transform type=“sirunaElementTransformer” />
means you want to use an “Element Transformer”
(http://open.siruna.org/documentation/sitemap-api for more
transformers.
<map:transform type=“sirunaElementTransformer>
<map:parameter name="task0"
value="remove(//p:form[@id='comment-form']//p:fieldset)" />
</map:transform>=> Means you want to remove the fieldset of the form
![Page 38: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/38.jpg)
Remove content (example remove content of nodes on
frontpage)
Make drupal forms mobile friendly:
Adaptations (some examples)
< <map:transform type="sirunaElementTransformer">
<map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" />
</map:transform>
Make drupal forms mobile friendly:
38
<map:transform type="sirunaElementTransformer"><map:parameter name="task0" value="remove(//p:form[@id='comment-form']//p:fieldset)" /><map:parameter name="task1" value="removeAttribute(//p:textarea, cols)" /><map:parameter name="task2" value="removeAttribute(//p:input, size)" /><map:parameter name="task3" value="setAttribute(//p:textarea, rows, 3)" /><map:parameter name="task4" value="setAttribute(//p:textarea, style, width:90%)" /><map:parameter name="task5" value="setAttribute(//p:form[@id='comment-form']//p:input, style, width:90%)"
/></map:transform>
![Page 39: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/39.jpg)
Extract several menu structures and collect as dropdown
Adaptations (examples)
<map:transform type="sirunaMenuExtractor"><map:parameter name="task0" value="extract(//p:ul[@class='links primary-links'], false, false, true)" /><map:parameter name="task1" value="extract(//p:ul[@class='links secondary-links'], false, false, true)" />
</map:transform><map:transform type="sirunaMenuInserter"><map:parameter name="select_current_url" value="true" />
</map:transform>
Change / remove CSS attributes
39
<map:transform type="sirunaCSSTransformer">
<map:parameter name="task0" value="addCSSItemAttribute(.front #block-block-13, background-position, center)" />
<map:parameter name="task1" value="removeCSSItemAttribute(#block-block-13, height)" />
<map:parameter name="task2" value="removeCSSItemAttribute(#block-block-13, margin-bottom)" />
<map:parameter name="task3" value="removeCSSItemAttribute(#block-block-13, margin-top)" />
<map:parameter name="task4" value="removeCSSItemAttribute(#block-block-13, padding-top)" />
<map:parameter name="task5" value="addCSSItemAttribute(#block-block-13, background-position, center)" />
</map:transform>
![Page 40: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/40.jpg)
Different adaptations for different devices:
Adaptations (examples)
<map:select type="sirunaExpressionSelector"><map:when test="width < 160 || !imageSupported">
<map:transform type="sirunaElementTransformer"><map:parameter name="task0" value="remove(//p:div[@id='contentsurround']//p:img)" />
</map:transform>
Analtyics inserter<map:transform type="sirunaGoogleAnalyticsInserter">
<map:parameter name="identifier" value="UA-2883003-5"/></map:transform>
40
</map:transform></map:when></map:select>
![Page 41: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/41.jpg)
Tight integration between Siruna and Drupal
Flexible definition of filters for content types, menu
pages, views and individual pages
Duplication of theme enabling a “mobile configuration”
for the mobile users
Possibility to apply predefined adaptations
Siruna module
Possibility to apply predefined adaptations
Previewing of the mobile site from within Drupal
41
![Page 42: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/42.jpg)
Module allows creating adaptation for your own
themes
Creation of a repository of mobile adaptations
Predefined adaptations
42
![Page 43: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/43.jpg)
Filter is a adaptation pipeline for group of pages− E.g. Specific pages or nodetypes can have a different filter!
Powerfull concept to make complex sites mobile!
Define your filters
43
![Page 44: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/44.jpg)
Demo 2
44
![Page 45: Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09](https://reader034.fdocuments.us/reader034/viewer/2022052504/5549f847b4c9055b7a8b47cd/html5/thumbnails/45.jpg)
Mail : [email protected]
Blog: http://www.mobiledrupal.com
Twitter: @twom, @siruna
Siruna: http://www.siruna.com, http://open.siruna.com
Contact
45
Looking for partnerships with Drupal agencies
and developers!