Introduction¶

• Web and Mobile is a mobile extension for award-winning, open source, Plone content management system
• Open source licensing guarantees that you stay free from vendor lock in the future
• You can have single URL address for web and mobile site - the user will be catered correctly no matter on which device or browser is being used
• High quality extensible code base with test suite over hundred tests and coverage

Web and Mobile is an add-on product to add multichannel publishing features to Plone content management system.

Introduction¶

This document tells how to install Web and Mobile as standalone or to the existing Plone CMS site.

Supported operating systems are all operating systems which run Plone

• Linux
• OSX
• Windows (note: for Windows complete instructions are not available)

Prerequisites¶

The following software stack is needed in order to install and run mFabrik Web and Mobile

• GCC compiler
• lxml / libxml2 libraries
• Python Imaging Library
• Internet connection is needed during the installation process

Installation of fresh site¶

These instructions apply if

• you do not have an existing Plone site
• you want to test Web and Mobile locally
• For Plone versions 4.x

sudo apt-get install python2.6 python-imaging wget build-essential python2.6-dev python-setuptools
easy_install ZopeSkel
paster create -t plone3_buildout gomobile # Will create folder called "gomobile"
# Choose Plone version 4.0.1, set your admin password and just hit enter to otherq uestions
cd gomobile
wget http://plonegomobile.googlecode.com/svn/gomobile.buildout/gomobile.plone-4.cfg
mv gomobile.plone-4.cfg buildout.cfg # Rename to buildout.cfg
python2.6 bootstrap.py
bin/buildout
bin/instance fg # Start Plone in foreground mode

easy_install http://dist.repoze.org/PIL-1.1.6.tar.gz

sudo port install python26 py26-pil wget #make sure to install and use python26 from macports
easy_install ZopeSkel
paster create -t plone3_buildout gomobile # This creates gomobile folder
# Choose Plone version 4.0.1, set your admin password and just hit enter to otherq uestions
cd gomobile
wget http://plonegomobile.googlecode.com/svn/gomobile.buildout/gomobile.plone-4.cfg
mv gomobile.plone-4.cfg buildout.cfg # Rename to buildout.cfg
python2.6 bootstrap.py
bin/buildout
bin/instance fg # Start Plone in foreground mode

Setting it up¶

Go to http://localhost:8080.

Follow Create a new Plone site link and create a site with the following add-ons checked.

• Username/password is admin and defined in your buildout.cfg. buildout.cfg option affects this option only during the installation time and you can change the password in the future through the web interface.
• Check Go Mobile
• Check Go Mobile Default Theme

Tick these add-ons

Modifying your local hosts file¶

Hosts file is your operating system text file which allows you to manually add DNS names on different IP addresses. For testing and developing Go Mobile for Plone you need to assign another name for your local computer, also known as localhost or by IP address 127.0.0.1.

After modifications, the following URL will render in web mode (like before modification)

http://localhost:8080/Plone

..but the following will result to the mobile mode

http://m.localhost:8080/Plone

...and the following page is laoded by mobile simulator

http://preview.localhost:8080/Plone

127.0.0.1       m.localhost preview.localhost

Installation for existing Plone sites¶

These instructions apply if you want to mobilize an existing Plone site.

extends =
        ...
        http://good-py.appspot.com/release/dexterity/1.0b2?plone=4.0.1


eggs =
        ...
        mfabrik.webandmobile

extends =
        ...
        http://good-py.appspot.com/release/dexterity/1.0b2?plone=3.3.5

eggs =
        ZPublisherEventsBackport
        mfabrik.webandmobile

Trunk version for developers¶

This is needed if you wish to develop Web and Mobile code base.

[buildout]

 parts =
    ...
    ${gomobile.config:parts}


 # Need to refer to buidout.cfg extension which lives on Google Code servers.
 extends =
    http://dist.plone.org/release/4.0/versions.cfg
    http://good-py.appspot.com/release/dexterity/1.0b2?plone=4.0
    http://plonegomobile.googlecode.com/svn/gomobile.buildout/gomobile.trunk.anonymous.cfg

 extensions = mr.developer

 eggs =
    ${gomobile.config:eggs}

[test]
recipe = zc.recipe.testrunner
defaults = ['--auto-color', '--auto-progress']
eggs =
   ${instance:eggs}

rm -rf eggs/gomobile.*
rm -rf eggs/mobile.*

~/python2.4/bin/activate

bin/buildout

bin/buildout

bin/instance fg

Uninstall¶

To remove Web And Mobile from your site, uninstall all the following add-ons

• Go Mobile
• Go Mobile Convergence
• Go Mobile Default Theme

Running automatic test suite¶

After you have succesfully launched Plone, you can run automatic Go Mobile test suite which includes unit and functional tests. This will guarantee that your operating system libraries and Python module set is compatible with Go Mobile.

To run test suite (using zc.recipe.testrunner):

bin/test -m gomobile* -m mobile*

After test suite completes, it should report zero failures:

Total: 119 tests, 0 failures, 0 errors

Troubleshooting¶

zope.configuration.xmlconfig.ZopeXMLConfigurationError: File "/home/moo/code/gomobile3/parts/instance/etc/site.zcml", line 15.2-15.23
    ZopeXMLConfigurationError: File "/home/moo/code/gomobile3/eggs/Plone-3.3.5-py2.4.egg/Products/CMFPlone/configure.zcml", line 116.4-116.60
    ZopeXMLConfigurationError: File "/home/moo/code/gomobile3/eggs/gomobiletheme.basic-0.9.3-py2.4.egg/gomobiletheme/basic/configure.zcml", line 16.2-16.39
    ZopeXMLConfigurationError: File "/home/moo/code/gomobile3/eggs/gomobile.mobile-0.9.4-py2.4.egg/gomobile/mobile/configure.zcml", line 19.4-19.34
    ZopeXMLConfigurationError: File "/home/moo/code/gomobile3/eggs/gomobile.mobile-0.9.4-py2.4.egg/gomobile/mobile/browser/configure.zcml", line 24.4-29.10
    ImportError: No module named lxml.html

  File "/home/moo/code/gomobile3/parts/zope2/lib/python/zope/interface/adapter.py", line 535, in subscribers
    subscription(*objects)
  File "/home/moo/code/gomobile3/parts/zope2/lib/python/OFS/subscribers.py", line 116, in dispatchObjectMovedEvent
    callManageAfterAdd(ob, event.object, event.newParent)
  File "/home/moo/code/gomobile3/parts/zope2/lib/python/OFS/subscribers.py", line 149, in callManageAfterAdd
    ob.manage_afterAdd(item, container)
  File "/home/moo/code/gomobile3/parts/zope2/lib/python/Products/SiteAccess/VirtualHostMonster.py", line 126, in manage_afterAdd
    raise BadRequest, ('This container already has a %s' %
zExceptions.BadRequest: This container already has a Virtual Host Monster

Unable to connect

Firefox can't establish a connection to the server at preview.localhost:8080.

Introduction¶

With Convergence add-on you can fine tune how your content is published across web and mobile medias.

You can choose publication channels

• On one content item level (one page)
• On folder level (one part of the site, folder and all its child content)
• On field level (different text on one field)

Web and Mobile defines mobile aware options (i.e. mobile behavior) for each content item.

These options are different whether you are doing

• Mobile publishing only (Web and Mobile add-on installed)
• Mixed mobile and web publishing (Web and Mobile + Web and Mobile Convergence add-ons installed)

Mobile options¶

These are available on every content item using Mobile options link in the Actions menu of the content item (see green menu bar).

Convergence options¶

These additional options are available if you have installed Convergence add-on.

Introduction¶

Go Mobile gives you a single click preview to see how your site will look on a mobile screen-

The site is fully navigable in the preview mode

• You can move from the page to another
• You can fill in forms and do HTTP posts

Background on preview technology¶

Mobile preview is implemented using HTML IFRAME and AJAX technologies. It might not give you 100% accurate preview. However, you can expect to iron out 90% of content related mobile issues with the preview functionality.

Preview and login¶

Preview pages are delivered using special preview hostname like preview.yoursite.com.

The difference between previewed pages and mobile pages from actual m.yoursite.com domain is that preview pages contain a cross-site Javascript snippet to bootstrap the simulator IFRAME.

Since IFRAME loads from subdomain, your authentication mechanism must support subdomains. gomobile.mobile product modifies Plone login mechanism so that your cookie is effective for *.yoursite.com hostnames.

Introduction¶

Since mobile screen estate is expensive, mobile navigation needs some special consideration to work optimally.

Here are explained some options and rules which make navigation smooth on Go Mobile.

Mobile Site Actions¶

The mobile site can have site actions in the right side of the header, that will be some actions that are used often and they are represented with an icon.

For site actions to show up, they need to be specified in ZMI:

• Navigate to portal_actions

• Click "Add CMF Action Category"

• Enter "mobile_site_actions" into the ID field and click Add

• Select the newly created category and add CMF Action to it

• It is not enough only to specify the ID, but other fields also need some values, so select the newly created action

• Title, URL and Icon fields are required. For adding a search button, we'll use:

  Title: "Search",
  URL: "string:${portal_url}/search",
  Icon: "string:${portal_url}/++resource++gomobiletheme.basic/actions/search.png"
  

You can customize this viewlet by overriding TopActions viewlet in gomobiletheme.basic.

Mobile folder listing¶

There is no space navigation portlet, or left side vertical navigation, on the mobile. This is the main navigation method basically on every known web site.

To allow easy navigation and automatic child content listing, each folderish content item has MobileFolderListing viewlet, defined in gomobiletheme.basic package. It displays "Here you can also find:" label and the summary of child content at the bottom of the page.

However, this method is impractical for folders containing more than ten to twenty items. You can opt-out pages from automatic folder listing using Mobile options form.

• Folderish content item generates mobile folder listing
• Any item appears in mobile folder listing

Main navigation¶

The navigation is based on the mobile_navigation action category, and it can be set only through ZMI:

• Navigate to portal_actions
• Click "Add CMF Action Category"
• Enter "mobile_navigation" into the ID field and click Add
• Select the newly created category and add CMF Action to it
• It is not enough only to specify the ID, but other fields also need some values, so select the newly created action
• Title and URL fields are required (the URL field is an expression so you can use for example "string:${portal_url}/" here for the home page)

You can customize this viewlet by overriding Navigation viewlet in gomobiletheme.basic.

Sections¶

Sections are the text links found in the footer, i,e. Terms of Service, Privacy Policy, Full Site

This can be set the same way as the main navigation, only the name of the category differs, as the sections use "mobile_sections".

You can customize this viewlet by overriding Sections viewlet in gomobiletheme.basic.

Front page shortcut¶

Site logo acts as front page shortcut, like it does on web pages.

Introduction¶

Redirecting mobile users to mobile site is a critical user experience factor.

No matter on which kind browser user types in the address, the user should server the page in correct format.

Isn't it utterly annoying when you read emails on a mobile, someone has posted you a link, you click it and you are taken to slow, big, web page instead of mobile page?

Redirecting logic¶

Redirecting logic

• HTTP request arrives to the web site from the user browser
• Mobile browser is detected using brand detection
• HTTP Moved Temporary response is given and the user is taken to mobile site
• Mobile site as a link "Go to web site" which points to website.com/@@force_web
• If the user clicks this link a special cookie is not set, so that he/she is no longer automatically taken to mobile site from this browser

Web and mobile domain name mappings¶

By default, Go Mobile will prefixes your web site name with m. domain name prefix and assumes this is your mobile site. This can be changed in settings. WWW prefix is removed from the domain before redirecting.

E.g. Visitor coming to yoursite.com with a mobile browser is redirected to m.yoursite.com, still having the content path intact.

If you use Go Mobile Convergence add-on and the page does not exist in the mobile domain, let's say a forum post comment page which is too complex for a mobile, the user is redirected to the mobile site root.

Manual redirecting URLs¶

Go Mobile exposes two views to all content objects which you can use to do manual redirects

• @@go_to_mobile_site
• @@go_to_web_site

These views map to URI namespaces and if use properly, they do not lose the desired content, when redirecting.

You can add the URL expressions e.g. to site actions using the following TALES expression:

string:${object_url}/@@go_to_mobile_site

Or simply adding a link by hand in WYSIWYG editor HTML mode:

<a href="@@go_to_mobile_site">Go to mobile site</a>

Note that this method assumes that your content sets the page base url in HTML <head>. All Plone content does this by default.

Introduction¶

Go Mobile for Plone provides facilities to automatically optimize images for mobile screens. This includes shrinking chosen images, modifying HTML content to handle floating images better and caching the resulting optimized images.

Default resize algorithm¶

This is applied to page body text containing images.

• All images are defloat
• Images are centered
• The image is resized to browser screen width
• 10 px padding is added around image borders, so that scrollbar etc. user interface elements won't overlap the image

Resizing your own stuff¶

By default, all page body text is run through the resizer

• All <img> tags are rewritten so that images go through mobile resizer, this is done by gomobiletheme.basic document_view template overriding the default Plone template for pages
• Also external image sources with full http:// address are supported in <img> tags. In this case, Python urllib is used to retrieve the external image to your own server.

You can also explicitly use resizer on specific site elements, like logo, in your theme code. For more information, see Transformations in Developer Manual.

Resizer cache¶

File system based cache is used for resized images. The following cache keys are used

• image width
• image height

meaning that the same result image should not be generated twice.

Image cache folder is defined by image_resize_cache_path setting. It is full path to the folder. Plone user must have write and read access to that path.

http://yourhost:8080/Plone/@@mobile_image_processor_clear_cache?secret=*your_image_resizer_secret*

Introduction¶

Mobile browser limitations prevent using Javascript based tracking on mobile pages, which is the most dominant tracking form on the web.

Also, the collected tracking data for mobile differs. The site owner is more interest what kind of browsers and handsets visit on the site.

Go Mobile supports pluggable tracking backends. You can choose one of tracking backends supported out of the box, or write your own.

Supported tracking services¶

• Plone default (the same Javascript used as used on normal web pages)
• Google Analytics Mobile
• Google Analytics Web
• AdMob
• Bango

How to set-up a tracker¶

Bango¶

Admob¶

Real IP address of the client¶

If you are using Apache's mod_proxy or similar virtual hosting solution, make sure that the real IP address of the client reaches the tracking code.

You need to make sure that your front-end server passes the IP information forward. For Apache, this setting is:

ProxyVia on

For more information see

• http://wiki.zope.org/zope2/ZopeAndApache#setting-remote-addr-to-the-client-ip

User friendly URLs¶

Plone automatically generates human friendly URLs based on page titles.

Title and other META tags¶

Page titles are visible in the search engine listing.

Additional add-on products, like Plone SEO, can be used to fine tune META information to include keywords, descriptions and Dublin Core metadata.

Sitemap submission¶

Sitemap file (sitemap.xml.gz) can be submitted to the search engines to make the content be searchable faster and more accurately.

Please see Mobile Sitemap protocol

robots.txt¶

Best practice robots.txt exist to be used on your site.

Contact form, language switching link and internal search results are culled out from the search engine listings.

XHTML¶

Google Analytics crawler bot (googlebot) expects mobile content to be XHTML. XHTML is enabled by default for the crawler bots. However, you must be sure that your publicly served content is XHTML valid.

Introduction¶

Go Mobile suppports mobile sitemaps. This is a sitemap protocol extension which tells the search engines

• which pages are avaiable on the site
• which are mobile pages

Allow: /@@mobile_sitemap?

Mobile sitemap URLs¶

Mobile sitemap is mapped to @@mobile_sitemap view.

Example links which you can put in Google Webmaster tools.

Index one language of certain site:

http://yoursite/@@mobile_sitemap?language=fi&mode=mobile

Index all languages of certain site:

http://yoursite/@@mobile_sitemap?language=ALL&mode=mobile

This does not generate <mobile:mobile /> tag and is not considered as mobile sitemap:

http://yoursite/@@mobile_sitemap?language=ALL&mode=web

mobile_domain_prefixes¶

List of subdomain names, one per line. If the incoming HTTP request matches one of these domain names, the site mobile mode is enabled.

Example value::

m mobi

This setting would cause domain names mobi.yoursite.com and m.yoursite.com rendered in the mobile mode.

mobile_domain_suffixes¶

List of top level domain names, one per line. If the incoming HTTP request matches one of these domain names, the site mobile mode is enabled.

Example value::

mobi

This setting would cause domain names yoursite.mobi rendered in the mobile mode.

preview_domain_prefixes¶

This setting is same as mobile_domain_prefixes, but meant for mobile browser preview used in the admin inteface. When mobile mode is enabled using these domain names, a special cross-site Javascript is enabled to allow preview function correctly.

Example value::

preview

This setting would cause domain names preview.yoursite.com rendered in the mobile mode and loading preview related Javascripts.

web_domain_prefixes¶

These domains name for web sites.

Example value:

web
www

serve_mobile_via_ip¶

If the site is reached by using numerical IP address serve it in mobile mode.

This is useful if you are testing your site for mobile devices over LAN or WLAN using local IP address format, like 192.168.200.12. All access by IP address is assumed to be mobile traffic is this switch is on.

mobile_skin¶

Plone theme name which is used on the mobile site.

Example value:

Plone Mobile

image_resizer_secret¶

Magic string which protects against the denial of service attack by doing many requsts to slow down mobile image resizer.

Mobile image resizer HTTP GET query parameters have a special signature parameter, secret, which is calculated based on other parameters and this key, to make sure that resizer call comes from authenticated source.

You don't generally need to set this value, as automatic random value is generated when Go Mobile is installed on Plone site.

Any string is accepted.

Example value:

secretfoobar123

image_resize_cache_path¶

File-system path where we store mobile resized copies of images -->

Default value:

/tmp/gomobile_image_cache

default_canvas_width¶

Target width of mobile screen for user agents missing user agent record.

This is the maximum image width on the site if user agent detection does not yield to results.

Integer values accepted.

Example value::

160

default_canvas_height¶

Target height of mobile screen for user agents missing user agent record.

This is the maximum image width on the site if user agent detection does not yield to results.

Integer values accepted.

Example value::

100

tracker_name¶

Which mobile analytics and tracking backend the site uses. String, the tracker name.

Leave empty if no tracking is used.

For more information, see analytics.

tracking_id¶

Tracker id used.

tracker_debug¶

Mobile analytics tracker logs/prints out debug information.

Useful for tracing tracker problems.

• Sets special HTTP response header
• Prints console output

Enabling handset detection¶

Handset detection is enabled out of the box and you don't need to do anything special to use it. Wurlf database is supplied with the product.

See mobile.sniffer.wurlf package source code for details.

Two-phase handset detection¶

Handset detection and varying is done in two phases.

• Brand name recognizition algorithm is used to redirect web site visitors to mobile site. We do not directly rely on handset database here, as user agent string analysis would provide too many false positives otherwise. This is defined in mobile.sniffer.detect and gomobile.mobile.redirector packages.
• When the site is rendered in mobile mode, handset properties are read using mobile.sniffer package. Currently this is mainly utilized for screen width and height.
• Special heurestics rules can be applied by mobile.heurestics package and they might or might not be tied to handset database. Rules include
  • How to make phone numbers clickable
  • Creating downloadedable vcards / phone numbers
  • Opening the phone map / navigator

HTML and XHTML¶

Mobile site crawler robots (googlebot-mobile) are served content as XHTML instead HTML, since these user agents demand so. For all other handsets HTML is served as HTML 4.0 transitional, since the experience has proven this to be the most working solution.

This is detected separately from the handset detection using mobile.heurestics.contenttype package.

Testing different handsets¶

Use Firefox User Agent Switcher extension <https://addons.mozilla.org/en-US/firefox/addon/59> to see how your site (image dimensions) look for different user agents.

Useful user agents:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95/11.0.026; Profile MIDP-2.0 Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; googlebot-mobile/2.1; +http://www.google.com/bot.html)

Mozilla/5.0 (SymbianOS/9.4; U; Series60/5.0 Nokia5800d-1/21.0.025; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413

Opera/9.60 (J2ME/MIDP; Opera Mini/4.2.13918/670; U; en) Presto/2.2.0

Changing handset database backend¶

This is a developer level task.

The used handset database is configured on Plone site layer level. To change it, you need to redefine IMobileUserAgentSniffer adapter for your site.

Updating Wurlf¶

New Wurlf database is shipped with every Go Mobile release. If you manually want to update Wurlf, see mobile.sniffer package for necessary files and scripts.

Introduction¶

Plone community has various popular add-on products. Go Mobile defines some support for mobilizing them.

Add-on mobilization support code is put into separate gomobile.supporter package. It will conditionally include support code for a specific add-on if the add-on is detected to be present in your installation.

Supported add-ons¶

This are currently supported by Go Mobile community:

• Products.feedfeeder
• collective.easytemplate

Adding support¶

You need to have gomobile.supporter overrides in your buildout.cfg. Example for Products.feedfeeder and collective.easytemplate add ons:

zcml = Products.feedfeeder
       archetypes.schemaextender
       collective.easytemplate
       ...
       ${gomobile.config:zcml}
       gomobile.supporter
       gomobile.supporter-overrides

Introduction¶

Here are sketched some plans for the future of mFabrik Web and Mobile.

Dependencies¶

This project do not distribute code for the following projects, but may have features depending on the availability of their code

• Plone <http://plone.org> is copyrighted by Plone Foundation and licensed under GPL 2 license
• vobject is available under Apache 2 license
• lxml is available under BSD license
• Wurlf device database does not fall under copyright according to the authors
• Pywurlf is copyrighted by David Necas & co. and distributed under LGPL license
• Python Imaging Library is available under Python (MIT style) license
• Zope is available under Zope Public License
• Python-Levenshtein package is disributed under GPL 2 license

Introduction¶

This page contains tips regarding troubleshooting Go Mobile installations.

ImportError: initLevenshtein¶

If you get example:

ImportError: dynamic module does not define init function (initLevenshtein)

It usually means that you have manually copied python-Levenshtein package from a computer to another. It must be recompiled to be compatible with new OS/Python binary format.

• Remove src/python-Levenshtein
• Rerun buildout

plone_view.mark_view(view) exception¶

Traceback:

# Line 3, Column 0
Expression: <PythonExpr plone_view.mark_view(view)>
Names:

{'container': <CampaignPage at /mfabrik/front-page>,
 'context': <CampaignPage at /mfabrik/front-page>,
 'default': <object object at 0x10030a200>,
 'here': <CampaignPage at /mfabrik/front-page>,
 'loop': {},
 'nothing': None,
 'options': {'args': (<Products.Five.metaclass.SimpleViewClass from /Users/moo/twinapex/twinapex/src/mfabrik.app/mfabrik/app/browser/campaignmobileview.pt object at 0x10e2fa9d0>,)},
 'repeat': <Products.PageTemplates.Expressions.SafeMapping object at 0x11117d488>,
 'request': <HTTPRequest, URL=http://m.localhost:8080/mfabrik/front-page/campaignpageview>,
 'root': <Application at >,
 'template': <ImplicitAcquirerWrapper object at 0x111185bd0>,
 'traverse_subpath': [],
 'user': <SpecialUser 'Anonymous User'>,
 'view': <Products.Five.metaclass.SimpleViewClass from /Users/moo/twinapex/twinapex/src/mfabrik.app/mfabrik/app/browser/campaignmobileview.pt object at 0x10e2fa9d0>,
 'views': <zope.app.pagetemplate.viewpagetemplatefile.ViewMapper object at 0x111185c90>}

# Module Products.PageTemplates.ZRPythonExpr, line 49, in __call__
__traceback_info__: plone_view.mark_view(view)
# Module PythonExpr, line 1, in <expression>

You are trying to use Plone 4 main_template.pt on Plone 3 site. Please see installation instructions how to fix this.

Too many redirects error on mobile device when using NGINX¶

If you set up NGINX to run in front of Zope, and set up a virtual host with it like this:

server {

server_name demo.webandmobile.mfabrik.com; location / {

rewrite ^/(.*)$ /VirtualHostBase/http/demo.webandmobile.mfabrik.com:80/Plone/VirtualHostRoot/$1 break; proxy_pass http://127.0.0.1:8080/;

}

}

the site won't work on a mobile device. The mobile browser will return with a too many redirects error. This is because Zope will always get the request from 127.0.0.1:8080 and not from the actual host, due to the redirection. To solve this problem correct your configuration to be like this:

server {

server_name demo.webandmobile.mfabrik.com; location / {

rewrite ^/(.*)$ /VirtualHostBase/http/demo.webandmobile.mfabrik.com:80/Plone/VirtualHostRoot/$1 break; proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

}

Introduction¶

Architecture overview¶

Architectural overview

Python run-time¶

Plone 3 CMS is built on the top of Python runtime. Python is a remarkably powerful dynamic programming language that is used in a wide variety of application domains. Specifically, Python version 2.4 is used (will be changed in Plone 4).

Generic mobile.* libraries for Python¶

mobile.* namespace packages can be used with any Python project. For example, mFabrik team has succesfully used the same codebase for Django CMS and Ploen sites.

mobile.sniffer¶

Handset detection backends.

• Abstraction layout for different handset database abstraction
• Brand name recognizition regular expressions for mobile redirects two provide two pass user agent detection
• Pluggable backend mechanism
• Currently supports following handset databases: Wurfl, DeviceAtlas, Apex Vertex, WAP profiles.

Plone specific packages¶

gomobile.* provides Plone specific packages. The packages are split so that you need to install only packages and modules relevant to your site use case e.g. no multichannel publishing if mobile-only site is being built.

gomobiletheme.* namespace is reserved for mobile site theme products.

Introduction¶

Usually rendering mode is decided by domain name. Ff domain name starts with m. or ends with .mobi it is rendered in the mobile mode.

Note that these different

• Rendering mode
• Current browser user agent

Web site can be also rendered for mobile handsets and vice versa.

Modes¶

• web: Site is rendered in web site mode. Display content marked for web viewing.
• mobile: Site is rendered in mobile site mode. Display content marked for mobile viewing.
• admin: Site is rendered in web site mode. Display content marked for both for web and mobile viewing.
• preview: Site is rendered in mobile site mode. Display content marked for mobile viewing. Special IFRAME javascript code is used to bootstrap mobile site simulator.

Determining the mode¶

Example

from zope.component import getUtility
from gomobile.mobile.interfaces import IMobileRequestDiscriminator, MobileRequestType

discriminator = getUtility(IMobileRequestDiscriminator)
flags = discriminator.discriminate(self.context, self.request)
if MobileRequestType.MOBILE in flags:
    # Do things necessary for mobile sie
    pass
elif MobileRequestType.ADMIN in flags:
    # The site is rendered in web mode,
    # but if there are special content items
    # which are displayed to the site visitors
    # only in mobile mode, display them also now.
    # You don't usually need to do this.
    pass
elif MobileRequestType.PREVIEW in flags:
    # Site is rendered in IFRAME simulator
    # You don't usually need to handle this
    # Use MobileRequestType.MOBILE only.
    pass
else:
    # Do things necessary for web site
    pass

See also¶

• gomobile.mobile.interfaces.IMobileRequestDiscriminator

Introduction¶

Basically everything can be overridden in Go Mobile per site or per application server basis using Zope browser layers or utility adapters. This makes it possible to adapt the framework for your custom needs easier, without too much fighting.

First be familiar how Zope adapter mechanism works.

Core interfaces¶

Core interfaces for adapters and utilities are defined in gomobile.mobile.interfaces Python package. They come with extensive commenting.

Look for implementation source code

• How to change a specific feature using subclassing
• How to change a specific feature by making your own implementation of the interface

Introduction¶

Web and Mobile uses standard Plone skin mechanism. You can use whatever theming technique you wish, as long as it can be used as a Plone skin.

The only difference between a normal Plone theme and Web and Mobile theme is that Web and Mobile theme name is read from the property:

portal_properties.mobile_properties.mobile_skin

Instead of standard:

portal_skins.default_skin

Namespace and Python package name recommendations¶

Use namespace gomobiletheme.yourthemename for Web and Mobile themes

Creating a mobile theme¶

You can include paster command in your buildout.cfg with gomobile.templates package included. This will you give a paster command with the template gomobile_theme.

buildout.cfg:

parts =
        ...
        paster

[paster]
recipe = zc.recipe.egg
eggs =
        PasteScript
        gomobile.templates
        ${instance:eggs}

Then you can create your own theme skeleton with:

bin/buildout # reruns to build paster command
cd src
../bin/paster create -t gomobile_theme gomobiletheme.yourcompanyname
# Answer questions
# Source code is generated for a mobile theme add-on skeleton

Then follow generic paster instructions for Plone how to include the generated source code egg in buildout.cfg.

Writing your first theme¶

class FooterText(base.FooterText):
    """ Free-form HTML text at the end of the page """

    # the presence of this viewlet includes a new page template
    # and overrides default footertext

.. code-block:: html

"""

    View overrides

"""

__docformat__ = "epytext"
__license__ = "GPL"

from zope.component import getMultiAdapter

from zope.interface import Interface

from five import grok

from gomobiletheme.basic import viewlets as base
from gomobile.mobile.interfaces import IMobileImageProcessor

from isleofback.mobi import MessageFactory as _

# Layer for which against all our viewlets are registered
from interfaces import IThemeLayer

# Viewlets are on all content by default.
grok.context(Interface)

# Use templates directory to search for templates.
grok.templatedir('templates')

# Viewlets are active only when gomobiletheme.basic theme layer is activated
grok.layer(IThemeLayer)

class FrontPageView(grok.View):
    """ """

    # The name of the view we override
    grok.name("isleofbackfrontpage_view")

    # Use grok.context() here if your view is specific to some content type

.. code-block:: html

class MobileFolderListing(grok.Viewlet):

    def hasListing(self):
        """
        Check whether mobile folder listing is enabled for a particular content type.
        """
        return False

<ul class="button-links">
           <li>
               <a tal:attributes="href item/absolute_url">
                   <span class="button-body">
                       <span class="button-inner" tal:content="item/Title" />
                   </span>
               </a>
           </li>
   </ul>

class Head(base.Head):
    """
    Override <head> generation so that we use CSS files
    and static resources specific to this skin.
    """

    def resource_url(self):
        """ Get static resource URL.

        See gomobiletheme.basic.viewlets.Head for more information.
        """

        # You need to copy whole gomobiletheme.basic/gomobiletheme/basic/statuc
        # folder to your own product and refer it here to use its CSS

        # return self.portal_url + "/" + "++resource++plonecommunity.app"

Theme examples¶

One maintained public example exists

• plonecommunity.mobi site and the source code

Plone 3 compatibility¶

gomobiletheme.basic has some special arrangemenets to maintain backwards compatibility with Plone 3. Please see gomobiltheme.basic README.txt

Introduction¶

How to transform HTML, CSS and images in mobile conpatible way.

CSS¶

Three different main CSS files are needed for mobile sites

• common.css used on every handset
• highend.css used on WebKit and Gecko based browsers (iPhone, Android, Nokia Series 60, Maemo)
• lowend.css used on crappy browsers (Opera Mini, all proprietary underpowered browsers out there)

The condition determining how good your browser is comes from mobile.heurestics.simple module and is based on the browser user agent sniffing.

#margins {
    margin-left: auto;
    margin-right: auto;
    background: white;
}


/*
 * Do not look stupid on desktop browsers.
 *
 * If screen width is too wide, clip displayable area to 800 px.
 */
@media screen and (min-device-width: 850px) {
        #margins {
           -webkit-box-shadow: 0 0 4px black;
            -moz-box-shadow: 0 0 4px black;
            box-shadow: 0 0 4px black;
            max-width: 800px;
        }
}

Rewriting HTML¶

WYSIWYG edited HTML must be transformed to be mobile compatible

• All <img> tags are "mobilized" by putting them through a mobile image resizer
• Other HTML fixes are applied, possible to make HTML XHTML compatible

This all is based on processing HTML code with lxml DOM library.

Go Mobile Basic Theme does this by default for Document (Page) content type.

The following snippet will rewrite "text" HTML code if the site is rendered in mobile mode:

<tal:rewrite-html define="text context/getText; helper nocall:context/@@mobile_image_html_rewriter; text python:helper.processHTML(text, only_for_mobile=True)">
    <div tal:replace="structure text" />
</tal:rewrite-html>

The following snippet will force of rewriting "text" HTML code:

<tal:rewriteimg define="helper nocall:context/@@mobile_image_html_rewriter; text python:helper.processHTML(text)">
       <div tal:replace="structure text" />
</tal:rewriteimg>

It is also possible force safe HTML (clean up <script> etc.).

The following snippet will make "safe" HTML in Python code:

def clean_html(context, request, html):
    """
    """
    from zope.component import getMultiAdapter

    mobile_image_html_rewriter = getMultiAdapter((context, request), name="mobile_image_html_rewriter")
    return mobile_image_html_rewriter.processHTML(html, trusted=False, only_for_mobile=False)

See also

• gomobile.mobile.browser.imageprocessors.HTMLImageRewriter.processHTML for other options

Image resizing¶

from gomobile.mobile.interfaces import IMobileImageProcessor
from mfabrik.behaviorutilities.viewutils import getSiteRootRelativePath

mobile_image_processor = getMultiAdapter((self.context, self.request), IMobileImageProcessor)

# How image should be resized
properties = {
    "width" : "auto",
    "padding" : 10,
    "conserve_aspect_ration" : "true",
}

# Site root relative path to the traversable ImageField payload
path = getSiteRootRelativePath(self.campaign, self.request)
path = path + "/campaignVideoThumbnail"

# Return <img> src attribute URL which puts the image through mobile resizer
# Path could be also absolute URL to an image on an external server
self.image_url = mobile_image_processor.getImageDownloadURL(path, properties)

# Use templates directory to search for templates.
grok.templatedir('templates')

# Viewlets are active only when gomobiletheme.basic theme layer is activated
grok.layer(IThemeLayer)

class MobileHeaderImageResizer(grok.CodeView):
    """ A special mobile-resize aware renderer for header images.

    We cannot use gomobile.mobile stock resizer as images
    are stored in annotation storage which is untraversable.
    """
    grok.context(ICampaignPage)
    grok.require('zope2.View')

    def render(self):
        """
        """

        # This will read image from Archetypes ImageField called "campaignImage"
        field = self.context.getField("campaignImage")
        value = field.get(self.context)

        params = {
                  "image" : value,
                  "width" : "auto",
                  "padding_width" : 10,
                  "cache_key" : "campaign_header_image",
                  "conserve_aspect_ration" : True,
        }

        helper = self.context.unrestrictedTraverse("@@mobile_image_processor_helper")

        # This will call gomobile.mobile.browser.imageprocessor.ResizeHelperView
        # and output HTTP response payload to download the image
        return helper(params)

Introduction¶

Mobile browsers make a fuss about XHTML. In reality, mobile phones they support X-less HTML better, no matter what you are being told.

XHTML compatiblity is still needed for the search bots, if you wish to make your pages appear in the mobile search results. If you cannot provide XHTML compatible output, do not expect your pages appear in mobile search engines.

See Sniffing chapter for more information.

HTML flavor information¶

• Googlebot information: http://www.google.com/support/webmasters/bin/answer.py?answer=40348
• XHTML basic: http://www.w3.org/TR/xhtml-basic/
• http://mobiforge.com/designing/story/comparison-xhtml-mobile-profile-and-xhtml-basic

XHTML pitfalls¶

This need to be often changed to make your HTML XHTML compatible.

• Do not use &nbsp; etc. HTML entity characters.

  • http://changelog.ca/log/2006/06/12/making_nbsp_work_with_xml_rss_and_atom

• Do not use & in URL. Use &amp; instead

  • http://wakaba.c3.cx/sup/kareha.pl/1120173940/