Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
The News. 27 Languages. One App.
1. 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
2. WORLD SERVICE David Vella | Over The Air | September 2011
What is the World Service
What itʼs not...
3. It is not BBC World
WORLD SERVICE David Vella | Over The Air | September 2011
And that itʼs not BBC World - as I have discovered 2 minutes into my interview
4. Nor is it Radio 4 - Insomniac Edition
1 AM
5 AM
WORLD SERVICE David Vella | Over The Air | September 2011
Neither 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 SERVICE David Vella | Over The Air | September 2011
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
6. The World Service
International arm of the BBC
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
WORLD SERVICE David Vella | Over The Air | September 2011
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
7. The World Service
International arm of the BBC
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
WORLD SERVICE David Vella | Over The Air | September 2011
Thereʼs 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 SERVICE David Vella | Over The Air | September 2011
All of this comes out on 27 websites....
9. Online and Mobile
WORLD SERVICE David Vella | Over The Air | September 2011
27 websites across all the different languages.
And in addition...
10. Online and Mobile
WORLD SERVICE David Vella | Over The Air | September 2011
each of these websites have a corresponding mobile site. So weʼre at 54 in total.
11. Online and Mobile - Single Production Workflow
Desktop
Journalist CMS
Mobile
WORLD SERVICE David Vella | Over The Air | September 2011
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
12. Online and Mobile - Video Delivery
FLASH PLAYER
WORLD SERVICE David Vella | Over The Air | September 2011
To hit the widest possible range of devices, we have a series of fallbacks.
Starting with the flash player
13. Online and Mobile - Video Delivery
FLASH PLAYER
HTML5 <video>
WORLD SERVICE David Vella | Over The Air | September 2011
Failing Flash, the video tag is attempted
14. Online and Mobile - Video Delivery
FLASH PLAYER
HTML5 <video>
Provide download
WORLD SERVICE David Vella | Over The Air | September 2011
And failing that too, we provide the link to the video asset.
We do try to get content out there
15. 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éficit
ros desde el aire a damnificados 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د
16. Text scripts
Not so bad when you use more common scripts
WORLD SERVICE David Vella | Over The Air | September 2011
Spanish, Russian and Chinese
17. Text scripts
Slightly trickier with more complex scripts
WORLD SERVICE David Vella | Over The Air | September 2011
Burmese, Bengali and Tamil
18. Text scripts
= F
WORLD SERVICE David Vella | Over The Air | September 2011
Glyphs. Character substitution should occur and displayed as...
19. Text scripts
Traditionally provided font as a download...
WORLD SERVICE David Vella | Over The Air | September 2011
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
20. Text scripts
...but more recently
@font-face
(it’s not just to keep designers happy)
WORLD SERVICE David Vella | Over The Air | September 2011
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.
21. Text scripts
The ability to read the
content is somewhat desirable
WORLD SERVICE David Vella | Over The Air | September 2011
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.....
22. Text scripts
The ability to read the
content is somewhat desirable
WORLD SERVICE David Vella | Over The Air | September 2011
theyʼre greeted with this instead, straight off the bat. No installations.
23. Text scripts
But what about mobile?
WORLD SERVICE David Vella | Over The Air | September 2011
On the cheap handsets, youʼre lucky to get CSS, let alone font-face
24. Text scripts on mobile
WORLD SERVICE David Vella | Over The Air | September 2011
Going back to our portfolio, and have a closer look at the mobile sites
25. Text scripts on mobile
WORLD SERVICE David Vella | Over The Air | September 2011
It all looks quite neat - because this is mainly a slide in a presentation
26. Text scripts on mobile
WORLD SERVICE David Vella | Over The Air | September 2011
But in the real world, people with lower end phones see beautiful boxes!!
High end phones don’t always fare much better
27. Text scripts on mobile
Arabic/Persian on Android
WORLD SERVICE David Vella | Over The Air | September 2011
That text is actually unreadable. You’ll notice that we’re missing ligatures. Has been fixed 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
28. Text scripts on mobile
<img>
WORLD SERVICE David Vella | Over The Air | September 2011
29. Text scripts on mobile
Desktop
Journalist CMS
Mobile Image
Mobile
WORLD SERVICE David Vella | Over The Air | September 2011
When journalists publish in these languages, a second version of the mobile version is also published
30. Text scripts on mobile
Regular Text Based Image Based
WORLD SERVICE David Vella | Over The Air | September 2011
Every paragraph is output as an image
31. Text scripts on mobile
Regular Text Based Image Based
WORLD SERVICE David Vella | Over The Air | September 2011
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
32. Text scripts on mobile
<html>
<head>...</head>
<body>
<img src=”p1.gif”>
<img src=”p2.gif”>
<img src=”p3.gif”>
<img src=”p4.gif”>
<img src=”p5.gif”>
<img src=”p6.gif”>
<img src=”p7.gif”>
<img src=”p8.gif”>
</body>
</html>
WORLD SERVICE David Vella | Over The Air | September 2011
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
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 temporary
WORLD SERVICE David Vella | Over The Air | September 2011
Pango, open source lib does the layout, rendering happens with Cairo. It’s strong point is that it does
internationalisation.
35. Mobile Apps
Native HTML
WORLD SERVICE David Vella | Over The Air | September 2011
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.
36. Mobile Apps
+
WORLD SERVICE David Vella | Over The Air | September 2011
This is essentially our technology stack
Phonegap, by the lovely people at Nitobi, in Vancouver.
For those not familiar with phonegap...
37. Mobile Apps - PhoneGap
www
WORLD SERVICE David Vella | Over The Air | September 2011
it’s essentially app shell, with a ‘www’ directory at the heart of it
You put your files 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 JS
CAMERA, STORAGE, CONTACTS, CONNECTION TYPE OR BUILD YOUR OWN
• Submit to app stores
WORLD SERVICE David Vella | Over The Air | September 2011
Open Source,
Access to native APIs. Connection type: 3G/Wifi (very handy to deliver different quality media depending on which speed
you’re on)
Submit
39. Mobile Apps - PhoneGap
www.yoursite.com/app
www
WORLD SERVICE David Vella | Over The Air | September 2011
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.
40. Mobile Apps
Titanium
www.appcelerator.com
WORLD SERVICE David Vella | Over The Air | September 2011
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
41. Mobile Apps
WORLD SERVICE David Vella | Over The Air | September 2011
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
42. Mobile Apps
WORLD SERVICE David Vella | Over The Air | September 2011
You can build it the normal fashioned way - multiple HTML files, a few CSS and JS.
Technically nothing wrong with it, but it’s sluggish on a phone
43. Mobile Apps
Javascript
WORLD SERVICE David Vella | Over The Air | September 2011
Single Page Application - Javascript doing the heavy lifting
Several ways and methods you can do this...
44. Mobile Apps
WORLD SERVICE David Vella | Over The Air | September 2011
First prototype
Took only a couple of days - had offline. 150 lines of code
Using only jQuery. Easy! Yes we can do this
45. Mobile Apps
Plain raw JS
jQuery / zeptoJS
jQuery Mobile
Backbone / Sammy / JavascriptMVC
Sencha Touch / Dojo / Sproutcore
WORLD SERVICE David Vella | Over The Air | September 2011
Wanted to keep it simple and not rely too much on 3rd party libraries
46. Mobile Apps
CSS3 + jQuery + iScroll
WORLD SERVICE David Vella | Over The Air | September 2011
This was our toolbox.
iScroll is a nice little library by Matteo Spinelli
47. X
Mobile Apps
div { position: fixed; }
div { overflow: auto; }
WORLD SERVICE David Vella | Over The Air | September 2011
Does not work on Mobile Safari on iPhone
iOS5 will fix it, but in the meantime, there’s workarounds
49. Mobile Apps
CSS3 + jQuery + iScroll
WORLD SERVICE David Vella | Over The Air | September 2011
Coding away. Features start coming in, bugs creep up. adding more features in.
Blinkers on
50. Mobile Apps
WORLD SERVICE David Vella | Over The Air | September 2011
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.
51. Mobile Apps
User Interface Code
Core Code
WORLD SERVICE David Vella | Over The Air | September 2011
So while the UI code was ok, the core needed some tough love.
We had a look at JS frameworks again
52. Mobile Apps
WORLD SERVICE David Vella | Over The Air | September 2011
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.
53. Mobile Apps
WORLD SERVICE David Vella | Over The Air | September 2011
In 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 Apps
WORLD SERVICE David Vella | Over The Air | September 2011
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
55. Mobile Apps
User Interface Code
Rewritten Core Code
WORLD SERVICE David Vella | Over The Air | September 2011
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.
56. Mobile Apps
Offline
WORLD SERVICE David Vella | Over The Air | September 2011
57. Mobile Apps - Offline
• Application Cache
• Local Storage
WORLD SERVICE David Vella | Over The Air | September 2011
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
58. Mobile Apps - Offline
localStorage
localStorage.setItem(‘hello’,
‘world’);
localStorage.getItem(‘hello’);
//
returns:
world
WORLD SERVICE David Vella | Over The Air | September 2011
Very simple
You can only store strings in local storage. So if you want to store images...
59. Mobile Apps - Offline
localStorage
1011010101010101010101
1010101010010101010101base64,/9j/4AAQSkZJRgABAQEAZABkAAD/
Base64
11001010101010101010
WORLD SERVICE David Vella | Over The Air | September 2011
Need to convert to Base64 first
You get a string representation of the image binary
60. Mobile Apps - Offline
localStorage
<img src=”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA...
WORLD SERVICE David Vella | Over The Air | September 2011
Base64 enlarge the image size by about 10% or so
How much space do you get?
61. Mobile Apps - Offline
localStorage
5 UTF-16
of
MB
WORLD SERVICE David Vella | Over The Air | September 2011
It varies, but generally you get 5 megs
But it’s UTF16
62. Mobile Apps - Offline
localStorage
2.5 MB
WORLD SERVICE David Vella | Over The Air | September 2011
So you get half the space
63. Mobile Apps
Testing / Debugging
WORLD SERVICE David Vella | Over The Air | September 2011
64. Mobile Apps - Testing
QUnit
WORLD SERVICE David Vella | Over The Air | September 2011
It’s just Javascript - throw QUnit, JSUnit at it
Affectionately called Tarantula - A big bug chasing other bugs
65. Mobile Apps - Debugging
weinre - Web Inspector Remote
WORLD SERVICE David Vella | Over The Air | September 2011
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
66. 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
WORLD SERVICE David Vella | Over The Air | September 2011
67. Mobile Apps - Test Distribution
testflightapp.com
WORLD SERVICE David Vella | Over The Air | September 2011
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.
68. Mobile Apps
The plan
WORLD SERVICE David Vella | Over The Air | September 2011
69. Mobile Apps
WORLD SERVICE David Vella | Over The Air | September 2011
Going for Russian for iPhones first (for testing reasons), Android shortly after. And we’ll start adding other languages
bit by bit, and more features like picture galleries
70. Mobile Apps
www
WORLD SERVICE David Vella | Over The Air | September 2011
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.
71. Questions?
(please be kind)
WORLD SERVICE David Vella | Over The Air | September 2011