Web and Mobile documentation¶
This is documentation for Web and Mobile mobile add-on product for Plone CMS.
The future Plone mobile development continues in Plomobile project.
More info
Note
mFabrik name or organization is no longer associated with the project. Please use the discussion group as your primary contact channel. It's all yours now, under GPL license.
Table of Content¶
User Manual¶
This documentation presents Go Mobile add-on product for Plone CMS. Documentation is for persons who plan to mobilize their site, use and integrate mobile features to their site using Go Mobile mobile CMS product.
Features¶
Description
How mFabrik Web and Mobile multichannel CMS will solve your mobile publishing and content management needs.
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
The best technology¶
Plone is an add-on for award-winning, open source CMS. Web and Mobile turns it to a multichannel publishing platform.
You can leverage hundreds of existing Plone add-on products in multichannel publishing easily: blogs, forums, polls, intranets, enterprise network authentication...
The best usability¶
Web and Mobile provides optimal mobile browsing experience for your site visitors. 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. Web and Mobile supports thousands of mobile phones models, and is not limited to smarthphones only.
Publish to different medias have been made easy. Multichannel and convergence features allow you to make different versions of the same content for web and mobile. Mobile browser preview allows you to see how the page will look on the mobile when you are still writing it
The best code¶
Web and Mobile have high quality extensible Python code base with test suite over hundred automatic tests. Many of modules are generic in nature and can be used outside Web and Mobile. The code is extensively documented and commented.
You can build themes which will compatible for different mobile phone models.
Open source¶
Open source license guarantees that you are free from vendor lock. Developers with Python and Plone experience can easily pick up with the codebase.
Installation¶
Description
How to install Web and Mobile as standalone or for your existing Plone site
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
Ubuntu¶
Python 2.6 needed, see Python installation instructions below if your Ubuntu distribution does not support Python 2.6 as the default Python interpreter.
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
If your system doesn't have lxml==2.2.6 installed, you can set it up in your virtual environment (no root access required): http://digita.la/2010/6/2/compiling-lxml-libxml2-libxslt-for-a-virtualenv
If you are using virtualenv, and it has no PIL, just do:
easy_install http://dist.repoze.org/PIL-1.1.6.tar.gz
OSX¶
First install XCode and Macports.
The following Terminal spell installs and starts Web and Mobile, after installing Macports
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
Windows¶
You need MingW compiler enabled.
- Manually install Plone 4
- Install lxml for Python used with Plone 4
- Edit buildout
- Run buildout
- etc.
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
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)
..but the following will result to the mobile mode
...and the following page is laoded by mobile simulator
Adding required lines¶
Add the following line to hosts file (note that on UNIX you need to use sudo):
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.
Plone 4 buildout.cfg changes¶
Edit buildout.cfg
and add lines:
extends =
...
http://good-py.appspot.com/release/dexterity/1.0b2?plone=4.0.1
eggs =
...
mfabrik.webandmobile
Plone 3 buildout.cfg changes¶
Edit buildout.cfg
and add lines:
extends =
...
http://good-py.appspot.com/release/dexterity/1.0b2?plone=3.3.5
eggs =
ZPublisherEventsBackport
mfabrik.webandmobile
Then follow the instructions above how to modify hosts
file and install add-ons
in the site setup.
Trunk version for developers¶
This is needed if you wish to develop Web and Mobile code base.
Note
Subversion 1.6 or later is required, as otherwise Mr. Developer recipes "ignore certificate errors" does not work.
Modify buildout to include Web and Mobile trunk version sources¶
The following buildout extends are available for you:
- Plone 3 anonymous
- Plone 3 commiter
- Plone 4 anonymous
- Plone 4 commiter
See gomobile.buildout project for available URLs and files.
Add Web and Mobile snippets to buildout.cfg
as described below:
[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}
Note
For trunk, use eggs = ${gomobile.config:eggs} instead of eggs = mfabrik.webandmobile
If you want to run unit test also include:
[test]
recipe = zc.recipe.testrunner
defaults = ['--auto-color', '--auto-progress']
eggs =
${instance:eggs}
You can also make sure that no release versions are included in development buildout:
rm -rf eggs/gomobile.*
rm -rf eggs/mobile.*
Different trunk version buildout options are
- http://plonegomobile.googlecode.com/svn/gomobile.buildout/gomobile.plone-4.trunk.cfg
- http://plonegomobile.googlecode.com/svn/gomobile.buildout/gomobile.plone-4.trunk.commit-access.cfg
- (Plone 3) http://plonegomobile.googlecode.com/svn/gomobile.buildout/gomobile.trunk.commit-access.cfg
- (Plone 3) http://plonegomobile.googlecode.com/svn/gomobile.buildout/gomobile.trunk.anomymous.cfg
You can find available versions here.
gomobile.trunk.cfg is an buildout extension file defining trunk package versions using Mr. Developer buildout extension. You do not want to include this file directly, as depending on the commit access and Plone version you need to get one of the options above.
Files ending with commit-access.cfg and anonymous.cfg are alternative config files extending gomobile.trunk.cfg with the setting of HTTP or priviledged HTTPS checkout protocol.
Note
Dexterity (new Plone system) component version configuration is used as a base to have a good known set of version for Go Mobile for Plone.
Running buildout with Mr. Developer¶
You can checkout the all code after accepting the certificates using steps above.
Step 1¶
Activate your Python 2.4 virtual environment (depends on how your Python is installed):
~/python2.4/bin/activate
Start Plone¶
Run:
bin/instance fg
...and hope there was no version incompatibilities between products.
Uninstall¶
To remove Web And Mobile from your site, uninstall all the following add-ons
- Go Mobile
- Go Mobile Convergence
- Go Mobile Default Theme
Note
Uninstallation will lose mobile content settings on all content.
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¶
lxml too old¶
If you get start up error:
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
... your lxml library is too old.
Possible workaround
- Update system-wide libxml2 and libxslt
- Create python virtualenv with updated lxml
More info
- http://svn.plone.org/svn/collective/collective.developermanual/trunk/source/troubleshooting/exceptions.txt (search for System lxml too old)
This container already has a Virtual Host Monster¶
You get this when trying to create fresh Plone 3 site Web and Mobile:
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
Reason: bug in Plone / Zope. For some reason, it fails to create fresh ZODB database (Data.fs file) properly.
Workaround:
- Remove mfabrik.webandmobile from buildout
rm var/filestorage/Data.fs
to clear broken database- Run buildout
- Start Plone
bin/instance fg
- Stop Plone, press CTRL+C
- Add new Zope admin user
bin/instance adduser admin admin
- Renable mfabrik.webandmobile in buildout
- Run buildout
- Start Plone
Unable to preview¶
If you get this error when opening the preview:
Unable to connect
Firefox can't establish a connection to the server at preview.localhost:8080.
You need to set up /etc/hosts
file as explained in the installation instructions.
User experience¶
Web and Mobile goes to great lengths to achieve the most optimal mobile browsing experience, and it success quite well.
This all is achieved
- With many years of experience in mobile development
- Vary site features by mobile browser detection </usernamual/sniffing> to give user special goodies like clickable phone numbers and navigation links.
- Using mobile image optimization techniques
- Both touch and keypad based navigation are supported. For example, padding is added to make links easily touchable.
- Ensure fast page load times by making HTTP requests cacheable and carrier proxy friendly
Multichannel publishing¶
Description
Fine-tuning content publishing settings for multichannel
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).
Note
If you have hidden plone.belowcontentbody viewlet manager, none of document actions link is visible. You need to make this viewlet visible using Plone's @@manage-viewlets mechanism.
Mobile folder listing¶
If enabled, show automatic mobile folder listing on this page. All child content items are listed in "Here you can also find:" section below the page content, before the footer.
If the page is not folderish, the items of parent folder are listed here.
Default is on.
Appear in mobile folder listing¶
You can hide certain content items from mobile folder listing.
Defualt is on, appears.
Convergence options¶
These additional options are available if you have installed Convergence add-on.
Content media¶
You can choose whether this content is availble on
- web
- mobile
- both
Default is both.
This affects to
- Folder listing
- Sitemap
- Search results
Content overrides¶
You can define field level overrides to make content differ on web and mobile.
Web and Mobile Convergence supports this for the following content types by default
- Page
You can override fields texts
- Title
- Description
- Body text
Previewing the mobile site¶
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.
Note
If you login using Zope HTTP Auth login and use preview you cannot preview unpublished pages. Instead, a login prompt is displayed in the simulator.
Redirects between web and mobile site¶
Description
How Go Mobile for Plone will direct users to correct version of content regardless how they arrive to web and mobile sites.
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?
Methods of browser discrimination¶
There are basically three different way to discriminate how web and mobile content is served.
- User explicitly needs to type in the address of a mobile site or follow a link. Since this is cumbersome, you cannot really expect your users to do this.
- Use the same URL and always detect mobile users by the browser user agent header. This is applicable only if the site has been built ground up mobile in mind.
- Web site URL with a redirect to mobile site URL. The user can opt in back to web browsing if they still need to find some content which does not have mobile presentation using a link "Go to web site". The web user can be also opt in to mobile by manually typing in mobile specific address (.mobi domain name)
Go Mobile for Plone uses the third opinion by default. The architecture is flexible and other options, like trusting the browser user agent header only, are possible.
Preserving the wanted content page in redirect¶
Unlike most solutions, Go Mobile redirector is able to match web and mobile content always. The user gets the correct content page always and is not sent to site root when coming to the site on a mobile phone.
- The content, which the user is looking for, in not lost if the user is being redirected
- The user can opt-out from the mobile site and stay on the web site with the mobile if the user wishes so
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.
Image resize and optimization¶
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.
Resizing¶
Since mobile screen come in various sizes and shapes, this is necessary for optimal page viewing experience.
Automatic resizing is based on browser :doc:'user agent detection </user-manual/sniffing>'_.
Defloating¶
Also, content images are defloated. This means that mobile page viewers do not try to wrap text around left or right of the image, because mobile screens do not have space for this. Instead, images are centered and image width tries to match screen width (some padding included).
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.
Clearing cache¶
Currently cache must be cleaned manually using a cron job if it grows too much. There is no cache garbage collection.
You can clear the cache if you know your image_resizer_secret in settings. Navigate to URL:
http://yourhost:8080/Plone/@@mobile_image_processor_clear_cache?secret=*your_image_resizer_secret*
This triggers gomobile.mobile.imageprocessor.ClearCacheView code.
Tracking and analytics¶
Description
How to set up tracking and analytics for a mobile site
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¶
Warning
In pre-1.0 versions, Go Mobile supports only Javascript based Google Analytics.
Using the default Javascript tracking code¶
The easiest way to set up tracking is to use the same Javascript code which is being used on the Plone web site.
The downside is that mobile browsers not supporting Javascript are not being tracked.
Note
This is the default tracking method for Web and Mobile
- Go to Web and Mobile Settings
- As a
tracker_name
, enterplone-default
- As a
tracking_id
, enter the tracking id given by Google
Different Javascript for web and mobile sites¶
This is the most pain-free tracking method for mobile clients supported Javascript (not suitable for low end phones).
- Visit Google Analytics site and create a new site
- When Google Analytics offers you a tracking code, choose Advanced -> Mobile
- Extract tracking id which is in format "UA-8819100-123"
- Now, go to Web and Mobile Settings
- As a tracker_name, enter google-web
- As a tracking_id, enter the tracking id given by Google
Image based tracking¶
- Visit Google Analytics site and create a new site
- When Google Analytics offers you a tracking code, choose Advanced -> Mobile
- Extract tracking id which is in format "MO-1234-12"
- Now, go to Web and Mobile Settings
- As a tracker_name, enter google-mobile
- As a tracking_id, enter the tracking id given by Google
Note
Google Analytics may complain that the tracker verification failed. This is normal.
Google Analytics mobile background¶
Tracking is done using 1x1 pixel GIF image called __utm.gif. The image is a white pixel appearing in the footer. CSS style is used to fade away the image to invisible by setting opacity to 1%. However, this only works on browsers support opacity CSS rule.
When the image URL is formed, HTTP request headers are read and forwarded to Google Analytics as HTTP GET query parameters. This way refering page etc. are propeply tracked.
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
Search engine optimizations¶
Go Mobile utilizes various search engine optimization techniques to make your site be found easier. Most of them are defaukt Plone behavior, some mobile specific are added in to the mix.
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.
Mobile Sitemap protocol¶
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
Note
Sitemap must be enabled in Site setup before mobile sitemaps are available.
robots.txt¶
If you are using a robots.txt which limits access to all HTTP GET queries by default, you need to add the following exception:
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
Settings and configuration¶
All Go Mobile settings can be configured through web interface.
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.
Note
This setting is not currently used for anything.
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.
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
Mobile browser detection¶
Go Mobile aims to strive to support every HTML capable phone on this planet, not just iPhone and other popular smartphones. Go Mobile users mobile.sniffer Python package to provide abstraction layer for handset detection over different handset databases.
- Choose your favorite handset database: DeviceAtlas, Wurfl or internal library.
- mobile.sniffer abstraction layer can source information from multiple databases, reaching potential of over 10000 known handset records.
- See what sites features are varied by the handset
- Free Wurfl database is shipped with the product so that handset detection works out-of-the-box
For more information, see mobile.sniffer Python package.
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.
Special mobile features¶
Go Mobile can enable and disable special site features based on the used mobile browser.
Below are some examples
Page visuals and CSS are adjusted for
- Low end phones and proprietary browser. These are usually non-HTML compliant browsers used in sub 100$ device class
- Webkit and Gecko based high end smartphone browsers (Mobile Safari, Fennec)
Direct to-call or save-to-contacts phone number links are provided in two formats: Nokia compatible and iPhone/Android compatible
Navigation information and position-of-interests are as downloadable files or Google Maps links depending on what the handset supports
Images are resized ::doc`resized </usermanual/resizing>` based on the handset
Both touch and keypad based navigation are supported. Padding is added to make links easily touchable.
For more information see mobile.heurestics Python package.
Add-on product support¶
Description
How various Plone community add-ons can be mobilized
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
Roadmap¶
Description
Roadmap notes for Web and Mobile product development
Introduction¶
Here are sketched some plans for the future of mFabrik Web and Mobile.
Version 0.9¶
- Initial Python egg release - test how egg dependency solving works with buildout
Version 1.0¶
- First non-beta Python egg release
Version 1.1¶
- Plone 4 support
TODO¶
- Refactor Google Mobile Analytics to generic Python package e.g. mobile.googleanalytics
- Rewrite convergence field overrides code
- Convert the default mFabrik Web and Mobile theme XDV based
- Make collective.fastview viewlet resolving code more sane
- Rewrite mfabrik.behaviorutilities code based on discussion with Martin Aspeli
- SMS in/out support - create generic Python mobile.sms package and gomobile.sms Plone integratino package
License and open source contributions¶
All material is licensed under GPL 2 license.
All material is copyrighted or relicensable by mFabrik Research Oy.
For more information, see the contribution agreement.
This covers:
- gomobile.* Python packages
- gomobiletheme.* Python packages
- mobile.* Python packages
- mfabrik.* Python packages
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
Troubleshooting¶
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;}
}
Developer Manual¶
Documentation for people how develop mobile sites using Go Mobile product.
Architecture¶
Description
An overview of mFabrik Web and Mobile architecture.
Introduction¶
Integrated products¶
mFabrik Web and Mobile consist of several integrated products and services. The architecture is flexible, allowing the switching of the parts in the case there exist requirements to integrate with different systems.
mFabrik Web and Mobile content management is built on the top of Plone® content management system.
Plone is enhanced with several add-on modules which extends it basic web functionality with mobile, SMS, email and video features.
Video and audio management and distribution is handled by Apex Media service which is provided as software-as-a-service from mFabrik server farm.
SMS messaging services are provided by Apex Messaging solution which is a standalone service integrating to different carrier SMS gateways.
is divided to several Python packages, packed as Python eggs. Egg files are distributed through Python egg index services, like Python Package Index (PyPi). By dividing the product to small components we achieve
- Better code reuse. mobile.* packages do not have Zope dependencies and can be used with any Pytohn CMS.
- Release early, release often: Bug fix releases can be rolled out for individual packages.
Some of the functionality is built on existing Python libraries (vObject, lxml, Python Imaging Library).
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¶
- 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.
mobile.heurestic¶
Condensed years of experience dealing with mobile phone complexity. This package contains rules-of-thumb how to generate HTML compatible for different user agents.
- Serving correct content type and docstring
- Phone number links
- Openining a GPS navigator / maps application
- Downloadable vCards
Internally uses vobject Python module.
mobile.htmlprocessing¶
mobile.htmlprocessing provides utilities to sanitize arbitary HTML for mobile output.
- Transform HTML to XHTML
- Rewrite <img> tags
- Clean up untrusted HTML code
Internally uses lxml Python module.
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.
gomobile.mobile¶
This package provides Plone core mobile functionality.
- Mobile behavior: mobile specific settings for Archetypes content
- Mobile add-on layer and theme layer
- URL mapper between web and mobile site
- Mobile site redirector
- Preview action and mobile simulator CSS and JS code
- Tracking and analytics
- Content type and docstring abstraction
- Plone specific HTML processing and mobile image resizer
- Mobile folder listing
- Documentation in Sphinx format
gomobile.convergence¶
Multichannel publishing options.
- Multi-channel publishing behavior for Archetypes content
- Set folder/page to be available in web and mobile only
- Override field values individually e.g. different body text for a page on web and mobile (gomobile.convergence.overrider)
- Special navigation code supporting multi-channel publishing
gomobiletheme.basic¶
Default mobile site theme which can be extended for your specific needs.
See more about theming.
- Uses Grok API and five.grok views and viewlets
- Zope Page Templates (.pt) are used as the template language
gomobile.imageinfo¶
Helpers to open and read various kind of persistent image objects used in Zope environments.
gomobile.supporter¶
Add mobile support for various Plone add-on products which are not part of Plone core.
gomobile.buildout¶
Buildout recipes for repeatable installations.
- Include Go Mobile with your Plone set-up
- Checking out the source code
- Making releases.
mfabrik.behaviorutilities¶
Use plone.behavior <http://pypi.python.org/pypi/plone.behavior> content extension mechanism with Archetypes http://plone.org/products/archetypes<> content type subsystem.
collective.fastview¶
Helper methods for Plone and Grok views and viewlets.
Site rendering modes¶
Description
Go Mobile defines different rendering modes, which defines which theme is chosen, what templates are used, how template is rendered what and what content is included in the output.
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
Extending and customizing¶
Description
How you can override the default utilities, layers and settings in mFabrik Web and Mobile.
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
Theming¶
Description
Creating mobile themes for Plone with Web and Mobile
- Introduction
- Namespace and Python package name recommendations
- Creating a mobile theme
- Writing your first theme
- Theme examples
- Plone 3 compatibility
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¶
Theme layer is mobile aware¶
All mobile views and viewlets are registered against your theme layer, which is a sublass
of mobile layer - this way mobile views do not conflict with web views and cannot
be accidentally exposed to web. When you generate a new theme you will get .interfaces.IThemeLayer
class
for this purpose.
Also there exists an old tyle skins layer folder for mobile specific page template overrides.
five.grok used¶
gomobiletheme.basic uses five.grok for viewlets and static media.
For more information see developer manual documentation regarding grok and five.grok.
Overring the logo¶
Change the generated gomobile.yourcompany.viewlets.Logo class. In the example below we set it to use logo from our web theme.
class Logo(base.Logo):
# Change logo URI here def getLogoPath(self):
return "++resource++plonetheme.yourwebtheme.images/logo.png"
If you are using logo from the web theme resource directory, make sure <resourceDirectory> in theme browser/configure.zcml does not have <resourceDirectory layer=""> set. If it's set the resource directory is not activate for the mobile theme and the mobile theme cannot access the logo file.
The logo image is resized automatically by gomobiletheme.basic.viewlets.Logo
base class
for different mobile screen resolutions.
Overriding a browser view for mobile¶
This example will override some Zope 3 browser:page based view for your mobile theme.
Add file views.py
where all overriden views will be placed:
"""
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
Then templates/frontpageview.pt
:
.. code-block:: html
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
- lang="en" metal:use-macro="here/main_template/macros/master" i18n:domain="isleofback.app">
- <body>
- <div metal:fill-slot="main">
- <tal:main-macro metal:define-macro="main">
- This is your page payload.
</tal:main-macro>
</div>
</body> </html>
Controlling automatic mobile folder listing¶
Mobile folder listing is enabled automatically to all content types. To fine-tune its usage for your site you can override the viewlet:
class MobileFolderListing(grok.Viewlet):
def hasListing(self):
"""
Check whether mobile folder listing is enabled for a particular content type.
"""
return False
Remember to add (empty) mobilefolderlisting.pt also, or copy it from gomobiletheme.basic
.
Making your own touch friendly link listing¶
Use the following mark-up in the template:
<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>
Setting CSS and JS locations¶
Mobile theme static CSS and Javascript resources are provided by five.grok static folder mechanism.
Different CSS files¶
Read Transformations chapter for info about different CSS files and their purposes.
Extending the default theme with more CSS and JS files¶
AdditionalHead
viewlet's purpose is to extend the default theme
with new CSS and JS files by adding more content to the end of HTML <head> element.
AdditionalHead
viewlet and template is generated by paster.
See source code for more information.
Overriding gomobiletheme.basic static media¶
References to static media are set in Head viewlet. You can override this viewlet and make static media to point to your own set of files. In this case, you need to copy the whole static folder from gomobiletheme.basic to your own theme product.
Example:
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"
If you a running a very simple site and you do not wish to override any resources inherited from base theme package, you can use AdditionalHead viewlet to mix in <head> resources without overriding existing ones.
No viewlet managers¶
collective.fastview add-on is used to render viewlets directly and there are no viewlet managers in mobile theme. All mobile viewlets are registered against viewlet manager gomobiletheme.basic.viewlets.MainViewletManager.
Image transformations¶
- <img> images should be run through mobile image resize
HTML content transformations¶
All template code which contains WYSIWYG editable HTML should run through HTML processor to make it mobile compatible.
Plone 3 compatibility¶
gomobiletheme.basic
has some special arrangemenets
to maintain backwards compatibility with Plone 3.
Please see gomobiltheme.basic
README.txt
Transformations¶
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.
Desktop visuals trick¶
Because you end up developing and viewing your site on the desktop browser in any case, the following trick is used to clip the site width to certain dimensions to prevent ugly mobile sites on wide screen aspect rations.
This is in gomobiletheme.basic/static/common.css:
#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;
}
}
More info
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¶
Resizing traversable images¶
You can resize images that accessible in Zope by traversing their path, or any URL.
You can generate necessary image URLs by using the following:
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)
In the case you specify absolute URL, the image will be downloaded and resized when the HTTP request is made to render the image. The resized copy is cached.
Resizing non-traversable objects¶
You can put through arbitary image objects through image resizer by using the following code:
# 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)
For more information see gomobile.mobile.browser.imageprocessor module source code.
Resizer parameters¶
Parameters are lsited in gomobile.mobile.browser.imageprocessor.ResizerHelperView.parseParameteres()
width: "auto" or pixels. Default: "auto".
height: "auto" or pixels. Default: "auto".
padding_width: How many pixels reduced from the determined with. Default: 0.
converse_aspect_ration: True of False. Default: True.
url: Absolute URL to image (http://), or path relative to the site root
- image: Image object. Only useful if you subclass ResizerHelperView or use it directly. Accepts
- any Zope image object which can be decoded by gomobile.imageinfo.
cache_key: String. Something which identifies the image object if URL is not given. You can use context id, site id or similar here, combined with view id.
XHTML compatibility¶
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.
XHTML pitfalls¶
This need to be often changed to make your HTML XHTML compatible.
Do not use etc. HTML entity characters.
Do not use & in URL. Use & instead