The News. 27 Languages. One App.

WORLD SERVICE FUTURE MEDIA

The News
27 Languages
One app ?

DAVID VELLA, SOFTWARE DEVELOPER
david.vella@bbc.co.uk
@indeox

WORLD SERVICE David Vella | Over The Air | September 2011


What is the World Service
What itʼs not...

It is not BBC World


And that itʼs not BBC World - as I have discovered 2 minutes into my interview

Nor is it Radio 4 - Insomniac Edition

1 AM

5 AM


Neither is it the insomniac version of Radio 4, which broadcasts the World Service between 1 and 5AM

The World Service
International arm of the BBC


The World Service is the international arm of the BBC
Its home is Bush House, in Aldwych - the last year it will be here before moving to Broadcasting House on Regent Street

The World Service

Around 2000 staff members
27 non-English Language Services
2 television stations
60 radio networks
Overall reach of over 180,000,000 people
Online and mobile


A Language service is a newsroom in its own accord. We donʼt translate news. Thereʼs original journalism, and in addition we take
global news and give it a local feel.
Services range from large ones like Arabic (24 hours trimedia) to Burmese or Gahuza where we provide impartial news in areas
where stable independent media is NA.
Could be as simple as an hour radio tx every day and a mobile news website.
Not targeting just the regions, thereʼs the diaspora as well. Persians in the US, Somalis in the UK, Hausa speakers in Poland

The World Service

Around 2000 staff members
27 non-English Language Services
2 television stations
60 radio networks
Overall reach of over 180,000,000 people
Online and mobile


Thereʼs a lot of content coming out of here.

The World Service
Average online daily output

600 stories

500 images

60 Audio/Video Clips


All of this comes out on 27 websites....

Online and Mobile


27 websites across all the different languages.
And in addition...

Online and Mobile


each of these websites have a corresponding mobile site. So weʼre at 54 in total.

Online and Mobile - Single Production Workﬂow

Desktop

Journalist CMS

Mobile


All of this is managed by one CMS, where the journalists input the content once, and it gets output automatically for both desktop
and mobile

Online and Mobile - Video Delivery

FLASH PLAYER


To hit the widest possible range of devices, we have a series of fallbacks.
Starting with the ﬂash player


FLASH PLAYER

HTML5 <video>


Failing Flash, the video tag is attempted


FLASH PLAYER

HTML5 <video>

Provide download


And failing that too, we provide the link to the video asset.
We do try to get content out there

Descubren !"" " #‫ 6 " ""5ا3( 2( 1 " ""%0 " ""/.%ن ز+ " ""*)(: ' " ""&%و‬Denuncian ola de arrestos de disidentes en Cuba ! 78‫ة أ‬
Британские ученые: водоросли ;"" <!="" 0‫ ""@=?> ا‬AB‫ ا‬C3 ‫!اء‬EA"" 0‫ن ا‬F‫> < ""@?%د‬H"" I‫ ""!ا‬J‫دان وا‬KA"" 0‫ب ا‬KM"" N compuesto en
Al menos O"" <‫%ر‬Q@"" +‫ ا‬R"" <!HSE"" ' C3 TU?"" J >@="" V :‫.%ن‬H."" 0‫ ا‬помогут уберечься от солнц

600 *@"J!"3 (V (#%"#‫ ز#"!در‬W"IKJ ‫ 2"%+"%ل‬Y"Z ‫ ا#!ان‬siete muerток

ООН размa a Argentina Поддельное
искусство в Германии España: polémica por reforma constitucional para contener el déﬁcit
ros desde el aire a damniﬁcados por Irene 15
F%[@"" " " ‫ 8 " " ""_^ت ا‬de l'ANC entendu ! ` Text Scripts Renacimiento y otras noticias de arte
del

Magoya bayan Julius Malema sun kara da 'yan sanda Стрічка заголовків Стрічка a""J‫/* ا‬E""V Wb""V ‫; و‬c""6 ‫""!ای‬Z
İspanya anayasa değişikliğine ‫؟‬a"" " " " " "A" " "/" " "f Y"" " " " " "+%"" " ." " " " " " + ،‫ در ا#" " " " " ""!ان‬R"" " " " " "#W"" " M" " " " " " Z ‫" " " " " ""*د‬S" " "V ‫ واردات‬заголовків
y a k ı n !!!!!!!!!!!!!! !!!!!!!!!

C?Hc0‫! ا‬HEA"" " " 0‫* ا‬U?"" " " ' ‫ي‬K"" " " Z%?["" " " <‫ !!!!!!!!!!!!!!!!!!! ز‬

Chile ময়সীমা В Голландии появится первая искуственная

50 ‫" " " ""*ود‬QZ T"" " " "`%E@"" " " "+F‫ ا‬ic@6 ‫: 1" " " ""*د‬C?H0 ‫!ي‬jA"" " " "1 *"" " " "I%"" " " "6 гора Arsenal reforzará delantera con un surcoreano
Стрічка заголовків !!!!!!!!!!!!!!!!!!! !!! Reith Lectures %E"" " " " " 0‫أ‬
6 உலக நகர&க'( ெப+நா- ./ைக !!!!!

‫[%#( و‬M"" " " " SERVICE‫ " " " ""*ارس‬V ‫ " " " ""% در‬k Y?M.SM"" " " " m (c/nU' ‫ " " " ""!ح‬p !!!!!!!! !!!!!!!!!! ை
WORLD k‫را‬ David Vella | Over The Air | September 2011

WIKJ ‫ 2%+%ل‬YZ ‫ !!! !! ا#!ان‬Стрічка заголовків ‫@%ن‬J!/Z‫د‬

Text scripts

Not so bad when you use more common scripts


Spanish, Russian and Chinese

Text scripts

Slightly trickier with more complex scripts


Burmese, Bengali and Tamil

Text scripts

= F

Glyphs. Character substitution should occur and displayed as...

Text scripts

Traditionally provided font as a download...


We would get the users to install fonts on their machines
Not a great experience, and asking your viewers to install anything is not really a good thing

Text scripts

...but more recently

@font-face
(it’s not just to keep designers happy)


this little feature of CSS is for embedding custom fonts on your site. Has been in Explorer since version 4
Itʼs typically known for making your sites look pretty and though of as a gimmick.

Text scripts
The ability to read the
content is somewhat desirable


But whilst having beautiful typography is a good thing, the ability to read content ranks higher up the list.

Instead of greeting users with this.....

Text scripts
The ability to read the
content is somewhat desirable


theyʼre greeted with this instead, straight off the bat. No installations.

Text scripts

But what about mobile?


On the cheap handsets, youʼre lucky to get CSS, let alone font-face

Text scripts on mobile


Going back to our portfolio, and have a closer look at the mobile sites



It all looks quite neat - because this is mainly a slide in a presentation



But in the real world, people with lower end phones see beautiful boxes!!

High end phones don’t always fare much better

Arabic/Persian on Android


That text is actually unreadable. You’ll notice that we’re missing ligatures. Has been ﬁxed in 2.3.3, only recently.

We found our solution in a very little known HTML tag. Not sure if you’ve heard of it, but we’ll share the secret


<img>



Desktop

Journalist CMS

Mobile Image
Mobile


When journalists publish in these languages, a second version of the mobile version is also published

Regular Text Based Image Based


Every paragraph is output as an image


Regular Text Based Image Based


We give the users a link at the top of the pages - “If you can’t read the text below, follow this link”, which takes them to
the image based version


<html>
<head>...</head>
<body>
<img src=”p1.gif”>
</body>
</html>


Yes the story pages do look like this.
We did this part of the presentation at a W3C event. Was a bit awkward! But it works


• Images display on pretty much all mobile devices
• Pango for the text layout www.pango.org
• Average page size 35kB (vs 25kB text version)
• In use for seven languages:
Bengali, Burmese, Hindi, Urdu, Nepali, Persian and Tamil

• This is temporary


Pango, open source lib does the layout, rendering happens with Cairo. It’s strong point is that it does
internationalisation.

Apps


Mobile Apps

Native HTML


News app, very popular.... different approach for the World Service
Debate has been done to death - not going into it
Always ends with the same conclusion - it depends
It depends what app you’re making. your team expertise? how much time do you have? be in an app store? It goes on
and on.

Mobile Apps

+


This is essentially our technology stack
Phonegap, by the lovely people at Nitobi, in Vancouver.
For those not familiar with phonegap...

Mobile Apps - PhoneGap

www


it’s essentially app shell, with a ‘www’ directory at the heart of it
You put your ﬁles in there, and publish to multiple platforms.... (Android, iOS, webOS, Blackberry and more)


• Open Source

• Get access to native APIs through JS
CAMERA, STORAGE, CONTACTS, CONNECTION TYPE OR BUILD YOUR OWN

• Submit to app stores


Open Source,
Access to native APIs. Connection type: 3G/Wiﬁ (very handy to deliver different quality media depending on which speed
you’re on)
Submit


www.yoursite.com/app

www


but the best part is this... you can grab the ‘www’ directory... and host it yourself
This approach allows you to leave the stores at anytime
No more store approvals, no more waiting. update anytime.

Mobile Apps

Titanium
www.appcelerator.com


Titanium uses a different approach.
Takes JS and compiles to native, gives you better performance
The buttons and lists are real, they’re not CSS recreations
But you code to their API, so it’s not as straightforward to just put the code on the web

Mobile Apps


The other half of the stack is HTML
Plain old HTML+CSS+JS - no learning curve if you’re a web dev
If you have a team invested in open web technologies, take advantage of it

Mobile Apps


You can build it the normal fashioned way - multiple HTML ﬁles, a few CSS and JS.
Technically nothing wrong with it, but it’s sluggish on a phone

Mobile Apps
Javascript


Single Page Application - Javascript doing the heavy lifting
Several ways and methods you can do this...

Mobile Apps


First prototype
Took only a couple of days - had offline. 150 lines of code
Using only jQuery. Easy! Yes we can do this

Mobile Apps

Plain raw JS

jQuery / zeptoJS

jQuery Mobile

Backbone / Sammy / JavascriptMVC

Sencha Touch / Dojo / Sproutcore


Wanted to keep it simple and not rely too much on 3rd party libraries

Mobile Apps

CSS3 + jQuery + iScroll


This was our toolbox.
iScroll is a nice little library by Matteo Spinelli

X
Mobile Apps

div { position: fixed; }

div { overflow: auto; }


Does not work on Mobile Safari on iPhone
iOS5 will fix it, but in the meantime, there’s workarounds

Mobile Apps
iScroll
http://cubiq.org

Fixed in place

Fixed in place


Mobile Apps

CSS3 + jQuery + iScroll


Coding away. Features start coming in, bugs creep up. adding more features in.
Blinkers on

Mobile Apps


Adding code, error handling
Different feeds coming in at different times (News, Business, Sport, Science)
Need to update the UI accordingly
But the code started getting out of hand.

Mobile Apps

User Interface Code

Core Code


So while the UI code was ok, the core needed some tough love.
We had a look at JS frameworks again

Mobile Apps


4Kb of goodness
Written and opensourced by the people at DocumentCloud
Gives a light Model/View/Controller structure to your JS app
It was chosen because it is not very opinionated and still gives you a lot of freedom to do what you want.

Mobile Apps


In a typical mobile app, you get different views of the same data. You need to keep track of what data is shown where.

Mobile Apps


The same data, shown in different ways.
Do not be fooled into thinking that just because it’s HTML+JS it won’t get complex. It will.
“Oh it’s only a newsreader app, how complex can it get?” - famous last words

Mobile Apps

User Interface Code

Rewritten Core Code


The unimposing nature of Backbone allowed for a swift rewrite, we got beautiful code.
And most importantly didn’t try to come up with yet another solution to a problem which has already been solved
before.

Mobile Apps

Ofﬂine


Mobile Apps - Ofﬂine

• Application Cache

• Local Storage


App Cache - Allows you to choose what assets can be saved offline
Local Storage - JS Driven

App Cache - Needs to be served from the web

localStorage

localStorage.setItem(‘hello’,
‘world’);

localStorage.getItem(‘hello’);
//
returns:
world


Very simple
You can only store strings in local storage. So if you want to store images...

localStorage

1011010101010101010101
1010101010010101010101base64,/9j/4AAQSkZJRgABAQEAZABkAAD/
Base64
11001010101010101010


Need to convert to Base64 ﬁrst
You get a string representation of the image binary

localStorage

<img src=”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA...


Base64 enlarge the image size by about 10% or so
How much space do you get?

localStorage

5 UTF-16
of
MB


It varies, but generally you get 5 megs

But it’s UTF16

localStorage

2.5 MB


So you get half the space

Mobile Apps

Testing / Debugging


Mobile Apps - Testing

QUnit


It’s just Javascript - throw QUnit, JSUnit at it
Affectionately called Tarantula - A big bug chasing other bugs

Mobile Apps - Debugging
weinre - Web Inspector Remote


Debugging. On a phone can be a pain
Weinre - Stands for Web Inspector Remote
allows you to connect remotely into the device and inspect it
You can install your own, or phonegap have a hosted version

Mobile Apps - Debugging
weinre

http://debug.phonegap.com/

Insert code:
<script src="http://debug.phonegap.com/target/target-script-min.js#testapp"></script>

Go to:
http://debug.phonegap.com/client/#testapp


Mobile Apps - Test Distribution

testflightapp.com


A hat tip to the guys at testflight
iOS only - takes the pain out of sending updates of your app during testing. And if you’ve done this, you know it’s a
pain. It’s all done over the air. Android definitely wins in this department.

What i’m trying to say is, the tools are there. It’s a very exciting time. New ideas are being explored all the time and are
pushing the web forward. Do experiment.

Mobile Apps

The plan


Mobile Apps


Going for Russian for iPhones ﬁrst (for testing reasons), Android shortly after. And we’ll start adding other languages
bit by bit, and more features like picture galleries

Mobile Apps

www


While the plan is to release it as a downloadable app through the stores, depending on the reaction, we’ll assess also
releasing it out as a normal browsable URL.

Questions?
(please be kind)


Thank you

david.vella@bbc.co.uk
@indeox


The News. 27 Languages. One App.

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

The News. 27 Languages. One App.