If you are going to the trouble of designing mobile sites for different devices and screen sizes, then you should be taking into account that many smartphones have the abilitiy to change orientation from portrait to landscape, giving a much wider screen width.
You can use Javascript to register the change in orientation, but how can you deliver a different user experience when the user flips the phone?
With bemokoLive, it’s very easy to use the context rules to change the behaviour of your site when the user flips the device.
Context rules allow you to change the behaviour of the bemoko rendering engine with parameters on the URL. In this case we can use some javascript to note the change in orientation and call a URL with the relevant parameters set. The javascript looks like this:
<script type="text/javascript">
var landscape = isLandscape();
function updateOrientation(){
var landscapeToUpdate = isLandscape();
[#--
Only redirect if landscape flag has changed
--]
if (landscape != landscapeToUpdate) {
landscape = landscapeToUpdate;
if (landscape) {
window.location = "${intent.serverRelativeSiteEndPoint}/landscape/${intent.name}"
} else {
window.location = "${intent.serverRelativeSiteEndPoint}/${intent.name}"
}
}
}
function isLandscape() {
switch(window.orientation) {
case -90:
case 90:
return true;
break;
default:
return false;
}
}
</script>
The important piece in this script are the lines where the window.location is changed. Note the addition of the landscape parameter. As this parameter is before the intent in the URL it acts as a context rule.
To get bemokoLive to recognise the context rule, it has to be registered in the site-config.xml
<context> <rules> <rule name="landscape"> <param action="add" name="type">l</param> </rule> </rules> </context>
This makes bemoko add a parameter called “type” to the context if the landscape context rule is present. We can use this parameter to change the device category recognition for the device, again in the site-config.xml
<uigroup>
<ui name="landscape" expr="intent.get('type') == 'l'" fallback="ajax" />
</uigroup>
This change has the effect of overidding the standard device identification, adding the landscape category into the fallback chain. This means that any files or fragments in the landscape category will be delivered to the device, allowing you do do anything from simply delivering wider images to changing the whole look and feel of the page.
You can find more on context rules at http://bemoko.com/wiki/Context_Rules
For a live demo showing one use of context rules, take a look at http://bemoko.com/addons/imagetranscoder/test/i – the alternative rendering links at the bottom of the page use context rules to change the way the device is recognised.
One of the joys of using the bemokoLive development framework is the ease with which you can integrate with external content services. I’ve recently been working on a site which needs consume a .NET generated webservice.
For this integration, I decided to use GroovyWS which provides a very nice interface to the world of Apache CXF. Setting up the webservice is simplicity itself:
proxy = new WSClient(WSDL URL, this.class.classLoader) proxy.initialize()
This was all going well until I tried to use the login webservice call. The login provides a token which is needed to authenticate all further calls to the webservice. The XML returned from the webservice is:
HTTP/1.1 200 OK Content-Type: text/xml; charset=utf-8 Content-Length: length <?xml version="1.0" encoding="utf-8"?> <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:Header> <AuthHeader xmlns="https://app.restaurantdiary.com/webservices/ReservationService/"> <Token>string</Token> </AuthHeader> </soap:Header> <soap:Body> <LoginResponse xmlns="https://app.restaurantdiary.com/webservices/ReservationService/" /> </soap:Body> </soap:Envelope>
Notice that the token is returned in the SOAP header, not the SOAP body. It seems that CXF is geared up for reading the body of the message only, getting to the headers is not simple. So my problem was being able to get the token and add it to further calls.
I tried many searches of the internet, but it seems that either no one has ever had to do this or they have and didn’t write about it. Hopefully the following example will help if you ever need to do this. The following example is in Groovy.
Before I get to the actual example, let me take a quick diversion, but useful, diversion on logging.
I spent hours trying to see the SOAP request and response that was being sent and received, using network sniffers and the like. Communicating over SSL also meant I was doomed to failure. Then I discovered interceptors, notably the LoggingInInterceptor and the LoggingOutInterceptor. This simple piece of code allowed me to log the incoming and outgoing requests
proxy.client.getInInterceptors().add(new org.apache.cxf.interceptor.LoggingInInterceptor())
proxy.client.getOutInterceptors().add(new org.apache.cxf.interceptor.LoggingOutInterceptor())
I still didn’t have my AuthHeader though. After a lot of experimenting, I found I could access the headers with this piece of code
def headerList = proxy.client.getResponseContext().get(Header.HEADER_LIST)
This was good. Accessing the auth token was fairly simple after that:
SoapHeader sh = headerList[0]
def doc = sh.getObject()
def list = doc.getElementsByTagName("Token")
token = list.item(0).getFirstChild().getNodeValue()
log.debug("Token = " + token)
Yay, token now safely stored in my variables…. Now to add the token to future headers
List<Header> headers = new ArrayList<Header>();
SOAPFactory sf = SOAPFactory.newInstance()
def authElement = sf.createElement(new
QName(namespace, "AuthHeader"))
def tokenElement = authElement.addChildElement("Token")
tokenElement.addTextNode(token)
SoapHeader tokenHeader = new SoapHeader(new QName(namespace, "AuthHeader"), authElement);
headers.add(tokenHeader);
proxy.client.getRequestContext().put(Header.HEADER_LIST, headers)
This code adds the auth header with the token into the SOAP headers for every future request.
Hopefully if you are trying to use SOAP headers with CXF, this post will save you some time.
bemoko and Yuza Mobile unleash the marketing power of mobile
- Partnership ensures multi channel brand delivery via both mobile websites and custom applications.
14th June 2010: UK-based mobile internet software company, bemoko Ltd, has partnered with the leading mobile app entertainment and experience company Yuza Mobile, to deliver a full service capability for customers who wish to develop both applications and mobile web solutions for easy delivery to any mobile device.
Richard Skaife, Co-Founder & Chief Executive Officer, Yuza Mobile said; “Applications can work brilliantly at engaging users with a brand, but we also recognise the universal appeal of a mobile website. Quite often a dedicated mobile web site is the missing piece in a matured mobile strategy. Working with bemoko means brands have the best of both worlds when it comes to interacting with their customers via mobile devices.”
Mat Diss, Founder, bemoko said: “We recognise some customers want, but have difficulty creating mobile applications. Whilst bemoko remains dedicated to its core business supporting mobile website creation, applications can now be created in tandem by Yuza Mobile. This partnership enables an optimised mobile web presence for any brand, creating both app and mobile website.”
The bemokoLive™ product and has been specially developed to support design teams that wish to rapidly create mobile sites to deliver relevant and brand savvy content to any mobile device at a fraction of the cost of building specific sites for specific mobile devices.
bemokoLive has been built ground up with the consideration for user connecting from a variety of devices and the rise of popularity of HTML5.
One day many of the apps you see now in the app-stores will be available as cross platform web apps supported by all devices with user experience and performance comparable to that of the native application. bemoko are making this happen.
So what is new in HTML5?
… and how is that going to elevate the web experience for the end-user?
HTML5 brings a wealth of enhancements that can elevate the standard and experience of web applications. Functions include:
- Video and audio support
- Canvas for enhanced graphics
- Geolocation API
- Local data storage
- Context menus
- Drag & drop
- Data grids – structured editable data sets
- New semantic elements, e.g. <section> and <article>
Offline and Synching Data
A key benefit of native applications (desktop or mobile) is the ability to interact with the application whilst you are offline. The HTML5 offline support allows web applications to achieve this. Google have demonstrated their support for the HTML5 offline support by announcing that they are no longer supporting Google Gears – an early solution for for offline web access – and are backing the HTML5 offline APIs and along with strong support from the major browsers is an indication that this API will mature and become an essential foundation for the web.
Offline storage will be an essential ingredient of any web application that requests information from a user and delivers essential information that a user would want to access anywhere, anytime. For example when a user fills in a forms, or edits some data it is an important aspect of the user experience that the information entered is not lost and causing frustration. With HTML5 changes can be stored locally in the browser and synced with the main server when a connection is re-estabilished. Information applications – such as travel guides – also provide much more value if you can access information quickly and reliably, even if you are in the tube, on a plane, or in a foreign country on an expensive data plan.
Native Media Support
HTML5 brings native media support to the browsers. There has been much fragmentation in the format of video and audio that is required for web delivery. Historically this also came with a lack of control for how the media will be displayed (e.g. embedding in a page) and the requirement for extra plugins. This makes it more costly for service providers to deliver media and makes media experiences less than seamless for the end user. By standardising the media support within a web environment this fragmentation can be brought under control, making video deliverable easily accessible to all and make experience more pleasurable for the user.
There is still the ongoing battle between the Ogg and H.264 video codecs – with H.264 bringing improved video delivery, but in a propriety format. With strong and passionate arguments on either side. H.264 is looking like it will be the victor, but only time will really tell. (blog update : see update below on video support why this is not so certain). Standardisation brings with it significant performance benefits with device manufactures bringing standard video codec processing into hardware instead of software which can lead to over twice as much battery life.
Geolocation API
The Geolocation API already brings with it the possibility for the user to share their location. By design, this is a user choice on a site-by-site basis – choosing to share their location when they feel they’ll benefit and when they trust the service provider. This opens web sites up to the opportunity of location base services, such as finding people or places near by, combined with mapping services this can all help to create a more pleasurable experience with a service provider – saving time and shoe wear.
Canvas, drawing and graphics
The canvas features of HTML5 bring enhanced control over dynamic graphics, providing the opportunity to add a new dimension and interactivity to web sites. This provides a foundation for the popular javascript languages, for example jQuery and Prototype, to deliver ease-of-use tools bringing this creative power to even the novice web designer. It will however take some time (if at all) before the HTML5 canvas functions reaches the capabilities of Flash. Even with Apple’s objections to Flash, Flash will still provide much value to the web experience for some time to come.
HTML5 Apps vs Native Apps
Will HTML5 apps become more like desktops apps? In some respects they will surpass them – the idea of storage of your data in a secure cloud that that is accessible everywhere, backed up for you, accessible across multiple platforms and with an application that is always kept up to date for you will in many cases make the idea of a local installed piece of software seem quite limited. HTML5 will become the defacto standard for delivering cross-platfrom applications. The dedication to HTML5 by the large players, including Google, Apple and Microsoft , is a great example of the big players aligning and demonstrating the importance of getting HTML5 right.
HTML5 mobile apps
All-in-all, life will be become more exciting for the web developer. HTML5 is relevant for web developers today. Although HTML5 is still in draft, many features of HTML5 – such as geolocation and offline support – are already available in leading major browsers. This is especially true for recent mobiles such as the iPhone and Android platforms which all benefit from the improved user experience that HTML5 can bring.
How does this impact cross platform delivery though? Even as HTML5 matures different platforms will need variations on the UI. For example a TV user interface will always be different to a touch screen user interface. The challenge is also made more apparent when you consider that there’ll always be evolution in web capabilities. It’s natural for manufacturers and consumers to demand innovation and continue to push the boundaries.
bemokoLive cracks this problem elegantly and allows you to control the user experience across multiple channels efficiently – delivering to the recent innovations, the standard majority and lagging legacy environments – all from the same source.
Try bemoko now – download here and be up and running in a few minutes.
Further Reading
If you want to read more about why HTML5 is changing the game take a look at the following articles from the industry experts:
- “Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins” Apple (Steve Jobs) – Thoughts on Flash
- “The new crop of HTML5 web browsers are capable of some pretty amazing things, and several of our engineers decided to take some 20% time to see how far we could push them. The result? An HTML5 port of Id’s Quake II game engine!” Google Web Toolkit blog – Look ma, no plugin!
- “The future of the web is HTML5. Microsoft is deeply engaged in the HTML5 process with the W3C. HTML5 will be very important in advancing rich, interactive web applications and site design. The HTML5 specification describes video support without specifying a particular video format. We think H.264 is an excellent format. In its HTML5 support, IE9 will support playback of H.264 video only.” Microsoft blogs – HTML5 Video
- “But making iPhone apps means going through Apple’s lengthy approval process and dealing with some hardcore development. There’s a way round this, though, by offering something via a mobile browser using HTML5.” NMA
blog update – 2nd May 2010 : video, H.264, Ogg and VP8 support
The article Behind the open codec FUD attack make’s the case that Mozilla is unlikely to adopt H.264 since it cannot afford the $5million license fee. Google’s VP8 format may provide the compromise solution.
- More than 80% of surveyed UK web users do not trust emails and web sites that do not effectively represent familiar brands
London, 20 April 2009: Mobile internet software specialist, bemoko Ltd today announces a co-operation agreement with Monotype Imaging Inc., a leading global provider of text imaging solutions, to provide expertise to Monotype Imaging customers by introducing them to bemoko’s range of mobile marketing tools, which are designed to deliver improved mobile web presence and represent brands more effectively across fixed and mobile connected devices.
Recent research conducted by Opinion Matters and commissioned by Monotype Imaging revealed that the vast majority (86%) of approximately 2,000 survey respondents in the UK would not trust a communication from a source they often use, such as a bank, if the details were sent in an unfamiliar font. Millions of people are now receiving email messages and surfing the web on mobile devices. However, the sheer number of mobile platforms available (considering the many different operating systems, screen resolutions and other variables) means that brands struggle to ensure their identity is represented effectively. bemoko is working with Monotype Imaging to provide expertise for brands looking to exploit the mobile opportunity with consistency of experience across different mobile devices.
bemokoLive™ has been specially developed to support the rapid creation of mobile web sites that can deliver relevant and brand recognisable content to mobile devices, regardless of screen size, operating system or other characteristics.
Julie Strawson, Director of Marketing, Europe, Monotype Imaging Ltd, said; “Even with most advanced screen technology, poorly designed and delivered text raises suspicions amongst users that legitimate communications are spam or phishing scams. Our goal is to educate customers, and, through the process of introducing bemoko to our customers, raise awareness of the opportunities for delivering online branded experience to the desktop and also across mobile phones.”
The co-operation agreement between bemoko and Monotype Imaging will allow creatives building multi channel sites with bemokoLive™ to be able to engage more easily with both companies to help ensure that a new site can go live fast, and have the confidence that logos and font types will be rendered correctly onto target mobile devices.
Mat Diss, Founder, bemoko said: “For branding on the mobile web to be effective it is essential that people believe that a communication is genuine – if they do not the effect will be to destroy brand trust not to build it. Working with Monotype Imaging will help us to facilitate logos, font types and content displaying effectively on a mobile device, enabling organisations to represent their brand more effectively in the mobile space.”
-Ends-
About bemoko:
bemoko (www.bemoko.com) is the leading innovator in flexible mobile web solutions providing a comprehensive platform for delivering compelling mobile web sites. It provides a multi-device, multi-channel delivery platform for mobile content, designed with flexibility and speed of deployment in mind. For more information: www.bemoko.com
Monotype is a trademark of Monotype Imaging Inc. registered in the U.S. Patent and Trademark Office and may be registered in certain jurisdictions.
For further information please contact:
bemoko
Chris Bignell, XL Communications Ltd
+44 (0)7834 020460
I’ve just uploaded another example of using plugins in bemokoLive on our wiki . This technique is a pretty powerful one as it provides a very simple way of going from XML to Objects and back the other way. This is such a common task is important to have a clean way of doing it.
Essentially we use a library called XStream. Those of you familiar with .NET may have used the XmlSerializer which uses a very similar technique.
The crux of this example is essentially
…. load the XStream library and XPP dependency with the @Grab annotation. This technique allows you to bring in any old Java library into your bemoko stack.
1 2 | @Grab(group='com.thoughtworks.xstream', module='xstream', version='1.3') @Grab(group='xpp3', module='xpp3_min', version='1.1.3.4.O') |
then define a file object which will be where we store our serialised XML file
1 2 | @Lazy objectXmlFile = new File("${Bemoko.config.tmp.directory}/example-xstream-object.xml") |
This @Lazy annotation here means we only create this property when it is needed.
We can then write the XML file with
1 2 3 | objectXmlFile.withOutputStream { out -> new XStream().toXML(group, out) } |
where group is our object we want to serialise to XML. We can then read the object back again from XML with:
1 2 3 | objectXmlFile.withInputStream { input -> return new XStream().fromXML(input) } |
Pretty simple hey! I challenge anyone to achieve that with less code 
. See the full working example here along with link to download the source to save your fingers the typing.
In this tutorial we will start exploring some of the features that bemokoLive provides to allow you to develop dynamic, intelligent and reusable multi-channel websites.
We will start with a run through of intents – that is, mapping what a user wants to do – through to extending your website using the plugin architecture to integrate dynamic content into your pages. Along the way we will again look at some best-practices that can be applied to speed up your own development work and some of the features the bemokoLive provides to add intelligence to your pages.
This is an extract from our new tutorial on building dynamic sites using the bemokoLive platform. If you would like to read more, please download the full tutorial from our developer wiki at http://bemoko.com/wiki
iPhone Apps – the current sensation in marketing circles. Every brand wants a piece of the iPhone action. Are brands jumping on this bandwagon as part of an overall mobile strategy or is it just the current trendy thing to do? Are brands becoming pre-occupied with mobile apps?
Many people forget that an iPhone app can only be used by people who have an iPhone. Whilst the iPhone is undoubtedly popular, it only has at most 5% of the market, so brands are effectively ignoring a majority of their consumers. Can this really be part of a considered mobile strategy?
There are a number of solutions to this problem:
1) Ignore it.
2) Create apps for other devices. This is expensive as it means a seperate development for each class of device, in a different programming language
3) Get the best of both worlds with a combined app and mobile web strategy. This can reach more consumers for a lower .
Save money, get a bigger audience
If you could have a solution that delivered the coveted iPhone app and also addressed consumers on all other devices you would have maximum coverage for your brand. And if it cost less than developing the native iPhone App, what’s not to like?
Using the latest release of the bemoko multi-channel web development framework, web developers can create a mobile website which works on all devices. The framework very easily allows the site to be tweaked for the iPhone, allowing it to be styled as an app with all the sliding page transitions and fancy effects associated with an app. So now you have a website that looks like an app, the icing on the cake comes with our integration of the PhoneGap framework to wrap the website in native code so it can be placed in the app store as a normal app and downloaded by consumers.
Now you have the iPhone App for the iPhone users and also a website that can be used by all your consumers whatever device they are on. And, because developing a website is much cheaper than developing a specialised app, you’ve only paid a fraction of the price of a native iPhone app with a limited audience.
Finally, a mobile strategy to keep everyone happy!
February 24th, London – mobile internet software company bemoko is supporting a unique performance on March 4th by award winning improv group The Noise Next Door at Winchester University. For the first time anywhere, audience members can participate by texting in or selecting options from a specially built mobile website before and during the show itself to influence the comedy on stage.
Audience members can contribute suggestions prior to the show to be improvised in the opening act. During the show itself, suggestions texted or added to the mobile site will be displayed on a large screen on stage which the performers will be able to refer to. The final act will test the mettle of both audience and performers as they enact suggestions as soon as they appear live on screen.
Tom Livingstone, The Noise Next Door’s improv maestro and resident storyteller, said: ““We’re really excited by the idea of a show based around texting, especially the element of anonymity. It’s likely to be pretty crazy and probably a bit rude, but we hope to get a really good response and a wider range of suggestions than those normally just shouted out. It should lead to some very funny results.”
Mat Diss, Founder, bemoko said: “We have had some interesting requests to show what can be done with the mobile phone, but supplying material for live comedy improvisation is definitely a first. When you think about it, it’s a perfect way for the more shy members of the audience to still get involved and feel like they have contributed to the fun.”
The Noise Next Door are no strangers to utilising technology for their comedy, already basing a show around audience member’s Facebook accounts, but this is a very different challenge that the group has been eager to embrace. “We’ve talked for a long time about creating a show around mobile phones, but this really is a world’s first for short form improv and a wholly new way to gain access to comedy,” adds Tom. “Creating a harmony between text messaging and comedy is going to make for a very interesting show!”
bemoko’s easy to use software, bemokoLive, enables web developers to deliver web content, e-mailers and applications to multi channel media devices. Tickets for the event can be purchased at http://txtstage.eventbrite.com.
About The Noise Next Door
The Noise Next Door are an improvised comedy troupe who have been performing together since 2005. Transforming audience suggestions into fantastically funny scenes and songs in the blink of an eye, The Noise Next Door will have you in stitches with their perfect blend of ludicrous characters, witty one-liners, epic stories and musical mayhem. These five slightly posh blokes are based in Brighton, but are touring venues around the world, with their distinctive brand of off-the-cuff humour.
For further information, and to book ticket visit http://www.thenoisenextdoor.co.uk/
About bemoko:
bemoko (www.bemoko.com) is the leading innovator in flexible multi-channel web solutions. Bemoko provide an easy to use single platform software product that integrates and enhances existing web infrastructure enabling developers to deliver web content and applications to multi channel media devices simply, quickly and without the need for additional training: www.bemoko.com
For further information please contact:
Gary Marshall XL Communications Ltd
Tel: 077 3322 4654
Email: gary@xl-comms.com
Bemoko introduces the mobile friendly email marketing experience
- Access 25% more recipients than the competition
- Integrate with existing content to create a truly inclusive mobile experience
January 20th – London/Mobile World Congress, Barcelona: bemoko today announced the availability of the bemoko®Live mobile friendly email solution, which delivers perfectly optimised mobile marketing emails to any mobile handset. Marketing teams can now use bemokoLive to create mailers capable of truly representing a brand on the mobile phone.
Mat Diss, Founder, bemoko said: “A quarter of people today will view email marketing messages on their mobile and they are almost always impossible to read. Even when you click on the ‘Can’t read this?’ link you still get a page formatted for a PC screen! This is a huge missed opportunity and terrible brand building to customers.”
bemoko provides easy to use software that integrates and enhances existing web infrastructure enabling developers to deliver web content, e-mailers and applications to multi channel media devices. bemokoLive lets marketing departments automatically bring the website and brand to customers on their mobile phones in the best form possible.
A bemoko enhanced e-mail delivered to a PC needs no changes to display across a large screen on click through; for iPhone, Blackberry, wide screen phones and standard phones the mailer is automatically optimised to suit each specific handset. Banners are optimised to fit on smaller screens, whilst larger images and unnecessary information is removed to create a clear, easy to read mailer without the need to zoom in or search the mail for key brand messaging.
“This marks the end of text only, slow, poorly rendered and annoying marketing emails which invariably end up in the trash folder, unread” said Diss. “With bemokoLive you can create a interactive mobile campaign that incorporates email and a mobile Internet site which will deliver the best user experience on every phone. This extends a campaign’s reach by 25%, and also delivers a host of customer analytics tools that enable a deeper relationship between the customer and the brand.”
-ends-
About bemoko:
bemoko (www.bemoko.com) is the leading innovator in flexible multi-channel web solutions. Bemoko provide an easy to use single platform software product that integrates and enhances existing web infrastructure enabling developers to deliver web content and applications to multi channel media devices simply, quickly and without the need for additional training: www.bemoko.com
For further information please contact:
| Chris Bignell | XL Communications Ltd |
| Tel: | 07834 020460 |
| Email: | chris@xl-comms.com |