If you get stuck in a point please ask questions on the gomobile-dev discussion forum.

Prerequisites

• Basic Plone development skills
• Basic ZopeSkel knowledge
• Basic five.grok knowledge (Grok framework integration for Plone)

This tutorial is little rough on details, but links to authoritative sources for more in-depth information. I hope to further polish this tutorial based on the user comments.

Note: currently the installation process does not work from China, as the local access to code.google.com and appspot.com servers is limited.

Installation

Install Web and Mobile to your buildout.

Possibly fight with lxml to get it running.

Create a Plone site (if you don’t already have an existing site).

Then install following add-ons, in this order in the site control panel

• Go Mobile
• Go Mobile Default Theme

Now your website should have a basic mobile experience with a default Web and Mobile theme.

Test mobile site

You can visit the mobile version of your site by putting a m.localhost domain in your /etc/hosts file. You don’t need a mobile browser, as the mobile site is detected by a domain name by default. Your mobile site should be available from http://m.localhost:8080/Plone

If you access the website with a mobile browser you will be automatically redirected to a mobile site.

Creating a mobile theme

Install the ZopeSkel based mobile theme template to your buildout.cfg.

parts =
   ...
   paster

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

Rerun buildout to enable bin/paster command:

bin/buildout

Create a theme skeleton using paster. We use a Python package named gomobiletheme.yourcompanyname here as an example name for the theme package. If it asks for “override files” answer yes:

cd src
 ../bin/paster create -t gomobile_theme gomobiletheme.yourcompanyname

List your new theme egg in buildout in develop-eggs. (Alternatively: use mr.developer  if you indent to put it directly under version control.)

eggs =
    gomobiletheme.yourcompany
develop =
   src/gomobiletheme.yourcompan

Rerun buildout.

Test theme skeleton

Test the theme installs and works. Restart Plone and install your theme add-on in the add-on installer.

Navigate to m.localhost again and see that the mobile site still opens.

Theme theory

The generated mobile theme includes five.grok based viewlets.py and view.py files where you are to place

• Mobile theme viewlets (note: mobile theme does not use viewlet managers)
• Mobile specific view overrides
• Mobile specific page template overrides

All visual code registered against gomobiletheme.yourcompany.interfaces.IThemeLayer is available and used when your site is browser in mobile mode.

Changing logo

Change the generated gomobile.yourcompany.viewlets.Logo class.  In the example below we set it to use logo image file 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.

Changing footer text

In viewlets.py add:

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

Then include the page template itself. Add new file to the your theme package templates/footertext.pt:

<div id="footer-text" i18n:domain="isleofback.app">
 Your text goes here.
</div>

Change the default colours and CSS

Mobile theme static CSS and Javascript resources are provided by five.grok static folder mechanism. Transformations document provides some in-sight for different CSS files used by different handsets: common.css is served to all mobile phones, highend.css for Webkit and Firefox based browsers, lowend.css for limited browsers.

The default gomobiletheme.basic CSS resources are included by default with the theme skeleton. You need override only the CSS rules you specifically want to change for your own  theme. This can be done by adding rules to common.css, lowend.css and highend.css files which you can find from the generated theme package.

Further info

• Read theming manual in Web and Mobile documentation section.
• See Web and Mobile presentation in Plone Conference 2010
• See plonecommunity.app package for an open source example
• SVN trunk version of the theming manual for the latest instructions
• Subscribe to Web and Mobile discussion group for further questions

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

Ubuntu does not distribute proprietary codes. First thing you need to do is to rebuild ffmpeg.  Since Ubuntu 8.04 Hardy Heron ships with ffmpeg from 2007, which is aeons old in video codec years, you need to build libx264 and ffmpeg from SVN sources. Here are detailed, valid, instructions. Note that FFMPEG trunk is not currently stable (September 2008), so you need to use revision 15261 which needs this little patch. Indeed, this is a very difficult month to start your career in the dark world of video encoders.

To make it legal and support open source codec development,  please pay for your codecs.

Then we use this guide by Robert Swain. We have a tiny sub 2,4″ screen, we do not care about the quality and do one pass encoding. By empirical research, I have found that the following MPEG-4 profile parameters are compatible with N95 8 GB and provide the optimal result. You can vary video and audio bitrate depending on your taste.

Here is a script which recursivelu encodes all detected video files suitable for mobile format:

#!/bin/sh
#
# Optimal movie encoding for Nokia N-series mobile phones
#
# Copyright 2008 Red Innovation Ltd.
#
# Say hi if you find this useful.
# We do some professional mobile video publishing, so if you
# need a helping hand please call us.
#
# Usage: Run encode.sh in any folder and all video files are recursively converted to mobile phone suitable format
#
# Note: We expect all the source material be in 16:9 aspect ration
#
# Also see http://www.nseries.com/index.html#l=support,search,faq,general,video%20encoding,53848
#

VIDEO_BITRATE=300k

AUDIO_BITRATE=72k

# Assume locally build ffmpeg + x264 in /usr/local/bin
# http://ubuntuforums.org/showthread.php?t=786095
export LD_LIBRARY_PATH=/usr/local/lib

# Search all source AVI, MPG and WMV video files
# Place all encoded files to the same folder with the source, with added .mp4 extension
find . -iname "*.avi" -or -iname "*.wmv" -or -iname "*.mpg" | while read src ; do
        srcfile=`basename "$src"`
	srcfolder=`dirname "$src"`
	dstfile="$srcfolder"/"$srcfile".mp4

	# The magical string!
	# Size and cropping is for 16:9 source material, so that 320:240 display will have black bars.
	# Fex pixels off... note that h264 sizes must be multiplies of 16, use 256x144 for streaming
	# N95 RealMedia player does not seem to respect MPEG-4 embedded aspect ration info.
	/usr/local/bin/ffmpeg -y -i "$srcfile" -acodec libfaac -ab $AUDIO_BITRATE -s 320x176 -aspect 16:9 -vcodec libx264 -b $VIDEO_BITRATE -qcomp 0.6 -qmin 16 -qmax 51 -qdiff 4 -flags +loop -cmp +chroma -subq 7 -refs 6 -g 250 -keyint_min 25 -rc_eq 'blurCplx^(1-qComp)' -sc_threshold 40 -me_range 12 -i_qfactor 0.71 -directpred 3 "$dstfile"

done