Drupalcamp LA Aug 2009

Basics of making mobile websites with Drupal Tom Deryckere Software Architect / Siruna @twom

[object Object],[object Object],Technology Trends

[object Object],Technology that works

[object Object],Network side TECHNOLOGY

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],Current state

Reasons to go mobile ,[object Object],.... Drive traffic on mobile phones to websites ??? Find relevant content Advertisment Fast download Intuitive ....

[object Object],Reasons to go mobile Events / conferences Shopping Vacation / travelling Commuting Toilet

[object Object],[object Object],Examples (Drupal)

[object Object],[object Object],[object Object],[object Object],[object Object],Examples (Drupal)

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Complexity

[object Object],[object Object],[object Object],On fragmentation

More interesting data United 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 480x320 px Palm pre: 480 x 320 320 x 240 px Source: AdMob

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Complexity

Complexity Simple (double) navigation No video Easy access to stories

Overview Platform Language iPhone Objective C Android Java (Dalvik JVM) Windows mobile .NET / C++ / Java Nokia C++, java, Flash lite, python Palm Pre HTML / CSS / javascript With own touch (services api + widgets) What some would call widgets. Blackberry Java Browser HTML / CSS / javascript W3C standards, reach

Complexity / power Range objective C JAVA ME NET CF C++ Python scripting Web Widgets http://www.scribd.com/doc/17431252/Hitch-Hikers-Guide-Runtime-Booklet ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Browser technology WebKit!!

[object Object],[object Object],[object Object],Good news

[object Object],[object Object],General Second navigation New forum posts New Comments Sponsors etc ... Login or Register

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Design

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Bringing user to the mobile site

First define the flow (4 steps)

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Mobile modules for Drupal http://mobiledrupal.com/content/overview-mobile-modules-drupal

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Some Drupal modules

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Mobile Tools

[object Object],[object Object],[object Object],[object Object],[object Object],User notification / redirection

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Mobile permissions

[object Object],[object Object],[object Object],Theme switching

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Creating the mobile look Currently high risk and complexity, but allows more creativity!

Adaptation engine = proxy to the mobile user Website / XML stream Mobile URL Adaptation engine Desktop URL DNS

How does it work? Device Detection Content Fetcher Content Adaptation Engine Select Menu Adapt Style Select mobile content Automatic Content Adaptation

Content adaptation engine Siruna Composer Previewing XML based rules (http://open.siruna.org/documentation/sitemap-api)

[object Object],[object Object],[object Object],[object Object],XML scripting language: syntax

[object Object],[object Object],Adaptations (some examples) < <map:transform type="sirunaElementTransformer"> <map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" /> </map:transform> <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>

[object Object],[object Object],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> <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>

[object Object],[object Object],[object Object],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> </map:when> </map:select>

[object Object],[object Object],Predefined adaptations

[object Object],[object Object],[object Object],[object Object],Contact

Drupalcamp LA Aug 2009

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (6)

Similar to Drupalcamp LA Aug 2009

Similar to Drupalcamp LA Aug 2009 (20)

Recently uploaded

Recently uploaded (11)

Drupalcamp LA Aug 2009

Editor's Notes