1. WORLD SERVICE FUTURE MEDIAThe News27 LanguagesOne app ?DAVID VELLA, SOFTWARE DEVELOPERdavid.vella@bbc.co.uk@indeoxWORLD SERVICE David Vella | Over The Air | September 2011

2. WORLD SERVICEDavid Vella | Over The Air | September 2011What is the World ServiceWhat its not... 3. It is not BBC World WORLD SERVICE David Vella | Over The Air | September 2011And that its not BBC World - as I have discovered 2 minutes into my interview 4. Nor is it Radio 4 - Insomniac Edition 1 AM5 AM WORLD SERVICE David Vella | Over The Air | September 2011Neither is it the insomniac version of Radio 4, which broadcasts the World Service between 1 and 5AM 5. The World Service International arm of the BBC WORLD SERVICEDavid Vella | Over The Air | September 2011The World Service is the international arm of the BBCIts home is Bush House, in Aldwych - the last year it will be here before moving to Broadcasting House on Regent Street 6. The World Service International arm of the BBCAround 2000 staff members27 non-English Language Services2 television stations60 radio networksOverall reach of over 180,000,000 peopleOnline and mobile WORLD SERVICEDavid Vella | Over The Air | September 2011A Language service is a newsroom in its own accord. We dont translate news. Theres original journalism, and in addition we takeglobal 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 areaswhere 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, theres the diaspora as well. Persians in the US, Somalis in the UK, Hausa speakers in Poland 7. The World Service International arm of the BBCAround 2000 staff members27 non-English Language Services2 television stations60 radio networksOverall reach of over 180,000,000 peopleOnline and mobile WORLD SERVICE David Vella | Over The Air | September 2011Theres a lot of content coming out of here. 8. The World Service Average online daily output 600 stories 500 images 60 Audio/Video Clips WORLD SERVICEDavid Vella | Over The Air | September 2011All of this comes out on 27 websites.... 9. Online and Mobile WORLD SERVICEDavid Vella | Over The Air | September 201127 websites across all the different languages.And in addition... 10. Online and Mobile WORLD SERVICEDavid Vella | Over The Air | September 2011each of these websites have a corresponding mobile site. So were at 54 in total. 11. Online and Mobile - Single Production Workow DesktopJournalistCMS Mobile WORLD SERVICEDavid Vella | Over The Air | September 2011All of this is managed by one CMS, where the journalists input the content once, and it gets output automatically for both desktopand mobile 12. Online and Mobile - Video DeliveryFLASH PLAYER WORLD SERVICEDavid Vella | Over The Air | September 2011To hit the widest possible range of devices, we have a series of fallbacks.Starting with the ash player 13. Online and Mobile - Video Delivery FLASH PLAYERHTML5 WORLD SERVICE David Vella | Over The Air | September 2011Failing Flash, the video tag is attempted 14. Online and Mobile - Video DeliveryFLASH PLAYERHTML5 Provide download WORLD SERVICEDavid Vella | Over The Air | September 2011And failing that too, we provide the link to the video asset.We do try to get content out there 15. Descubren!"" " #6 " ""53( 2( 1 " ""%0 " ""/.% + " ""*)(:" ""&%Denuncian ola de arrestos de disidentes en Cuba! 78 : ;"" AB C3 !EA"" 0 F> < ""@?%H"" I ""!J KA"" 0 KM"" Ncompuesto enAl menosO"" WORLD SERVICE David Vella | Over The Air | September 2011 29. Text scripts on mobileDesktopJournalist CMSMobileImageMobile WORLD SERVICE David Vella | Over The Air | September 2011When journalists publish in these languages, a second version of the mobile version is also published 30. Text scripts on mobileRegular Text Based Image BasedWORLD SERVICE David Vella | Over The Air | September 2011Every paragraph is output as an image 31. Text scripts on mobileRegular Text Based Image Based WORLD SERVICE David Vella | Over The Air | September 2011We give the users a link at the top of the pages - If you cant read the text below, follow this link, which takes them tothe image based version 32. Text scripts on mobile...WORLD SERVICEDavid Vella | Over The Air | September 2011Yes 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 33. Text scripts on mobile 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 temporaryWORLD SERVICE David Vella | Over The Air | September 2011Pango, open source lib does the layout, rendering happens with Cairo. Its strong point is that it doesinternationalisation. 34. AppsWORLD SERVICEDavid Vella | Over The Air | September 2011 35. Mobile Apps Native HTMLWORLD SERVICEDavid Vella | Over The Air | September 2011News app, very popular.... different approach for the World ServiceDebate has been done to death - not going into itAlways ends with the same conclusion - it dependsIt depends what app youre making. your team expertise? how much time do you have? be in an app store? It goes onand on. 36. Mobile Apps+WORLD SERVICE David Vella | Over The Air | September 2011This is essentially our technology stackPhonegap, by the lovely people at Nitobi, in Vancouver.For those not familiar with phonegap... 37. Mobile Apps - PhoneGapwwwWORLD SERVICEDavid Vella | Over The Air | September 2011its essentially app shell, with a www directory at the heart of itYou put your les in there, and publish to multiple platforms.... (Android, iOS, webOS, Blackberry and more) 38. Mobile Apps - PhoneGap Open Source Get access to native APIs through JSCAMERA, STORAGE, CONTACTS, CONNECTION TYPE OR BUILD YOUR OWN Submit to app storesWORLD SERVICEDavid Vella | Over The Air | September 2011Open Source,Access to native APIs. Connection type: 3G/Wi (very handy to deliver different quality media depending on which speedyoure on)Submit 39. Mobile Apps - PhoneGapwww.yoursite.com/app www WORLD SERVICEDavid Vella | Over The Air | September 2011but the best part is this... you can grab the www directory... and host it yourselfThis approach allows you to leave the stores at anytimeNo more store approvals, no more waiting. update anytime. 40. Mobile AppsTitaniumwww.appcelerator.comWORLD SERVICEDavid Vella | Over The Air | September 2011Titanium uses a different approach.Takes JS and compiles to native, gives you better performanceThe buttons and lists are real, theyre not CSS recreationsBut you code to their API, so its not as straightforward to just put the code on the web 41. Mobile AppsWORLD SERVICEDavid Vella | Over The Air | September 2011The other half of the stack is HTMLPlain old HTML+CSS+JS - no learning curve if youre a web devIf you have a team invested in open web technologies, take advantage of it 42. Mobile AppsWORLD SERVICE David Vella | Over The Air | September 2011You can build it the normal fashioned way - multiple HTML les, a few CSS and JS.Technically nothing wrong with it, but its sluggish on a phone 43. Mobile AppsJavascriptWORLD SERVICEDavid Vella | Over The Air | September 2011Single Page Application - Javascript doing the heavy liftingSeveral ways and methods you can do this... 44. Mobile AppsWORLD SERVICE David Vella | Over The Air | September 2011First prototypeTook only a couple of days - had offline. 150 lines of codeUsing only jQuery. Easy! Yes we can do this 45. Mobile Apps Plain raw JS jQuery / zeptoJS jQuery Mobile Backbone / Sammy / JavascriptMVC Sencha Touch / Dojo / SproutcoreWORLD SERVICE David Vella | Over The Air | September 2011Wanted to keep it simple and not rely too much on 3rd party libraries 46. Mobile Apps CSS3 + jQuery + iScroll WORLD SERVICEDavid Vella | Over The Air | September 2011This was our toolbox.iScroll is a nice little library by Matteo Spinelli 47. X Mobile Apps div { position: xed; } div { overow: auto; }WORLD SERVICE David Vella | Over The Air | September 2011Does not work on Mobile Safari on iPhoneiOS5 will x it, but in the meantime, theres workarounds 48. Mobile AppsiScrollhttp://cubiq.orgFixed in placeFixed in placeWORLD SERVICE David Vella | Over The Air | September 2011 49. Mobile Apps CSS3 + jQuery + iScrollWORLD SERVICEDavid Vella | Over The Air | September 2011Coding away. Features start coming in, bugs creep up. adding more features in.Blinkers on 50. Mobile AppsWORLD SERVICE David Vella | Over The Air | September 2011Adding code, error handlingDifferent feeds coming in at different times (News, Business, Sport, Science)Need to update the UI accordinglyBut the code started getting out of hand. 51. Mobile Apps User Interface CodeCore CodeWORLD SERVICEDavid Vella | Over The Air | September 2011So while the UI code was ok, the core needed some tough love.We had a look at JS frameworks again 52. Mobile AppsWORLD SERVICEDavid Vella | Over The Air | September 20114Kb of goodnessWritten and opensourced by the people at DocumentCloudGives a light Model/View/Controller structure to your JS appIt was chosen because it is not very opinionated and still gives you a lot of freedom to do what you want. 53. Mobile AppsWORLD SERVICE David Vella | Over The Air | September 2011In a typical mobile app, you get different views of the same data. You need to keep track of what data is shown where. 54. Mobile AppsWORLD SERVICE David Vella | Over The Air | September 2011The same data, shown in different ways.Do not be fooled into thinking that just because its HTML+JS it wont get complex. It will.Oh its only a newsreader app, how complex can it get? - famous last words 55. Mobile AppsUser Interface Code Rewritten Core CodeWORLD SERVICE David Vella | Over The Air | September 2011The unimposing nature of Backbone allowed for a swift rewrite, we got beautiful code.And most importantly didnt try to come up with yet another solution to a problem which has already been solvedbefore. 56. Mobile AppsOfineWORLD SERVICEDavid Vella | Over The Air | September 2011 57. Mobile Apps - Ofine Application Cache Local StorageWORLD SERVICE David Vella | Over The Air | September 2011App Cache - Allows you to choose what assets can be saved offlineLocal Storage - JS DrivenApp Cache - Needs to be served from the web 58. Mobile Apps - Ofine localStorage localStorage.setItem(hello, world); localStorage.getItem(hello); // returns: world WORLD SERVICE David Vella | Over The Air | September 2011Very simpleYou can only store strings in local storage. So if you want to store images... 59. Mobile Apps - Ofine localStorage10110101010101010101011010101010010101010101base64,/9j/4AAQSkZJRgABAQEAZABkAAD/ Base6411001010101010101010WORLD SERVICE David Vella | Over The Air | September 2011Need to convert to Base64 rstYou get a string representation of the image binary 60. Mobile Apps - Ofine localStorage