planetmobile.us up and running

planetmobile.us is a blog aggregator focused on mobile software development.The purpose of the aggregator is to give all good blogs in one packet, without the need to hunt them individually.

planetmobile.us was managed by Christopher Schmidt until I resurrected it few weeks ago.

Please feel free to subscribe your feed to the planet!

MySQL bind_address workaround

MySQL has an ugly design fault preventing it to listen more than one interface in its bind_address my.conf directive. Thus, you usually cannot connect to the same MySQL instance using localhost and external IP sources.

Here is a workaround based on xinetd daemon. These are sample commands for Ubuntu/Debian.

Go to root

sudo -i

Install xinetd

apt-get install xinetd

Add a new xinetd mapping

pico /etc/xinetd.d/mysql

service mysql
{
    only_from	   = localhost mansikki.redinnovation.com 80.75.108.108 server213-171-218-5.livedns.org.uk 213.171.218.5
    flags          = REUSE
    socket_type    = stream
    wait           = no
    user           = root
    redirect       = 127.0.0.1 3306
    log_on_failure += USERID
    interface 	   = 84.34.147.68
}

Restart xinetd

/etc/init.d/xinetd restart

To debug xinetd:

/etc/init.d/xinetd stop
xinetd -d

xinetd only_from directive also gives an access control by allowed source IP addresses. This protects your MySQL against bots and brute force attacks.

Note that iptables DNAT translation doesn’t work (easily). Localhost packets don’t travel PREROUTING and POSTROUTING chains.

How to encode h264 video files for Nokia Series 60 standalone playback

Bored with Spiderman 3 which came with your Nokia N95 8 GB? This guide shortly tells how to get movies into your N95 on Ubuntu Linux using ffmpeg video encoder. The aim is to encode video suitable for playback from Nokia N-series (N95, N78, others) mobile phone memory card. We use h264 + AAC codecs which provides the best quality/compression rate for Nokia phones currently.

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

Designing a high usability Plone theme

This is my brain dump of instructions for artists how to design good Plone themes. I hope I can receive some comments, some feedback from the artists itself and then publish this as a plone.org tutorial.

Often external artist is used to design a site theme. Artists might or might not have seen Plone, artists might or might not have any basic usability know how. This article should explain the elements which “must be there” to make a match between the theme and Plone easily.

1. The basic layout

This document describes the elements of multilingual high usability Plone theme. It is based on fluid div layout, meaning that the content stays very readable on small screens or when CSS is not loaded (screen readers). See the example layout.

The layout must not break down when user is using non-default font size. E.g. all element accept two rows text, even if the default case is usually one row.

2. Plone layout

Here we are designing a “normal” site theme where Plone is used to publish textual content for external readers. This might not always be the case – for example if Plone is used as a professional tool one might want to use all available screen space to display as much as possible action shortcuts to make the tool to quick to use. The latter is actual case I have seen in medical applications.

Plone layout is formed by seven main parts.

Left body padding (auto width)
Header (780 – 1280 pixels)
Left portlets Content (780 – 1000 pixels) Right portlets
Footer (780 – 1280 pixels)
Right body padding (auto width)

The layout must be designed so that

  • The maximum width of content area newer exceeds a certain amount (1200px) so that characters-per-line count stays readable on wide screen displays. Left body padding and right body padding fill the wide screen gap to keep the content in sane max-width.
  • Left portlets and right portlets parts can be missing, giving space to content part
  • Header and footer are resizable. Usually logo is at the left site of the header and actions at the right side of the header. These sections should not overlap with the width of 780 px.
  • Left body padding and right body padding can have shadow effect on the central column a la blogger.

2. Alternative layout cases

The layout must be formed from such a blocks that left or right portlets can be easily dropped without breaking the layout.

Right portlets missing:

Header
Left portlets Content
Footer

Both portlets missing (front page view):

Header
Content
Footer

3. Header elements

The header should have the following elements

  • Logo
  • Language selector – either a drop down list, flag icons or language names
  • Site action links with icons: site map, accessibility help, toggle easy read (make fonts larger), contact
  • Search box
  • Section (main level) navigation tabs
  • Personal bar. Contains the username and log out buttons. Only available when logged in. To see an example, create plone.org account and login to ploen.org.

The header must scale between 780 – 1280 px. Section navigation tabs may trigger drop down menus, see http://www.jyu.fi/

4. Content area elements

The content area contains

  • Content title
  • Content description: one paragraph, no HTML formatting
  • Breadcrumbs path bar displaying the position in the navigation hierarchy. Example.
  • Content actions: send to, print, RSS feed. Icons with or without text labels. New Plone versions place these at the bottom, but they used to be at the top.
  • Document byline: creator name w/link, creation date or edit date. This is usually only available for logged in members.
  • Notification messages: When user performs actions (e.g. save) this feedback box is rendered with white i(nfo) letter in blue circle having a message like “Save succeeded.”
  • The main body text and images

The whole portlet section can be dropped, making space for the content.

4. Portlets

Portlets are boxes on the left and right side of the content containing section specific actions.

Example portlets:

  • Navigation

  • Search (not the header search)

  • News

  • Recently changed

The portlet consists of

  • Title (usually link)
  • Content area
  • Optional More link, located at the right bottom corner.

See http://www.siggraph.org/ for creative use of portlets.

The footer has

  • Copyright clause
  • Link to about page
  • Contact information

The footer must scale between 780 – 1280 px.

6. Complete picture

Left body padding

  • Texture
  • Drop shadow
  • Logo
  • Search box
  • Site actions
  • Language selector
  • Section tabs
  • Personal bar
  • Navigation
  • Breadcrumbs
  • Content actions
  • Notification messages
  • Title
  • Description
  • Text body /images
  • Calendar
  • News
  • Recently added
  • Copyright
  • Link to about page
  • Contact information
Right body padding

7. Special cases

These are often required and might shoot you into a foot

  • The current section (main level folder) where the user is located is identified somehow: a changing big topic picture, text. For example, see http://www.archred.com/updates/news and you see that there is big Updates title.
  • To make more space available for front page or top level content, breadcrumbs and portlets are missing. A special front page animation may be used.See http://www.archred.com
  • Breadcrumbs is also often disabled for top level elements
  • There is a special print.css which is loaded when the document is printed. It sets display:none to porlets, header and footer so that only the main content area is printed.
  • Visual editor (Kupu) text might require special CSS rules to have the same formatting rules as in non-edit mode to get real WYSIWYG.
  • A special attention must be paid for the style of generic HTML elements like a, h1, h2 and p. They are used on the content area and outside it, often with different colors.

8. Colors

Plone uses mechanism to have color variables in CSS. See base_properties.prop to get an idea what colors there are and try to guess how they are used.

9. Icons

Plone uses generic icon mechanism to apply icons to any action available on site. Icons are 16×16, transparent with one pixel transparent border leaving 14×14 pixels for the content.

The icons should preferably be suitable for dark and light backgrounds. This might be hard to achieve, though, so it is suitable to use ligh background icons, since this is the Plone default.

9. Actions

  • Search
  • Smaller font
  • Larger font
  • Print
  • Send to (email)
  • Contact
  • Sitemap
  • Member icon
  • Settings
  • Log out
  • Login
  • RSS feed

9. Language flags

Plone default flags can be used

  • Finnish
  • English
  • Swedish
  • etc.

9. Content icons

These reflect different Plone content types

  • Page
  • Folder
  • News
  • Event
  • Collection
  • File

Plone uses Javascript to apply special icons for external links

  • HTTP link (globe)
  • HTTPS link (lock)
  • mailto link (letter)

9. Favorite icon

  • The site bookmark icon, the one seen in the address bar, uses normal favicon.ico practices