1. Karl Wilcox Tutorial Starts at 19:00
TT284: Web Technologies
Block 3: Mobile Content and Applications
Karl Wilcox Tutorial Starts at 19:00

2. Please run the audio setup.
TT284-12B Block 3 Tutorial
IMPORTANT!
Be sure to check the News section on the TT284 Website regularly....
....and check the TMA 03 Forum for clarifications and updates BEFORE you submit your TMA!
Tutorial begins at 7pm and will be recorded.
Please run the audio setup.

3. Reminders and Acknowledgements
With thanks to the following TT284 tutors
Frank Cook
Charly Lowndes
Paula Sturdy
Dave McIntyre
Richard Mobbs
Stephen Rice
HAVE YOU STARTED THE RECORDING KARL?!

4. Hello And Welcome
Welcome
Start recording….

5. Agenda Review – Where are we & how did we get here? Feedback on TMA02
Mobile Devices – Some thoughts
Mobile devices, handling and detection
XSLT Transforms
(A note on XML name spaces)
Apps for mobile
TMA03 – Questions and queries?
Reminders
I have material for about 1 hour…
…can use additional time for Q&A if required

6. Where are we?
Practicals

7. What Have We Learnt?
XHMTL – Content description language for web pages
CSS – Styling information for web pages (and other things)
Page Design – Guidelines for layout (user expectations)
Site Navigation – Consistency, ease of use
Accessibility – Guidelines, testability
PHP – Server side language for content management
Javascript – client side language for interaction

8. TMA02 Feedback Generally good – thank you and well done!
Long extensions (> 1 week) don’t always help
As always – read the question, answer the question
If in doubt, ask me!
I can’t comment on your answers but I can say whether you appear to have understood the question
Interesting to note:
Many, many different approaches to the Javascript Code
Much less variation in the PHP server code

9. TMA02 Feedback - 2 Don’t create unnecessary dependencies Examples
Aim for maximum “abstraction” (independence)
Examples
Don’t rely on field width to restrict input length
Don’t rely on database organisation for formatting
Database tables can have new columns added
Order of elements in an array may change
Use associative arrays for query results
<td><?php echo $results[‘laptime’]; ?></td>

10. Health Warning!
The following presentation contains personal opinion and some scepticism
It may not be suitable for those who like nice simple answers (and courses!) You will need to be able to make up your own mind…
“I did not answer this questions as my tutor didn’t think it was worth it” Is NOT acceptable for the next TMA…

11. Mobile Devices
Characteristics
Describe them here please….!

12. Mobile Device Assumptions
Awkward touch-screen input
Limited processor power
Small keyboard
Limited capabilities
Some Web site navigation and usability features won’t work. For example, drop-down menus

13. WAP & WML A Warning from History
1999 – mobiles taking off in a big way
Demand (& hype) for mobile internet
But screens only display text…so
Define new markup language – WML
Design new infrastructure
Publish new comms protocol – WAP
2003/04 WAP traffic doubles!
(but from what to what?)
2013 WAP / WML use - zero

14. The Lesson of WAP WAP & WML did not address what people wanted
It addressed what the “lowest common denominator” of technology could do
It ignored everything that already existed (HTML, HTTP)
It required new technologies and hardware
It was designed to generate revenue for the telecoms operators
It did NOT succeed!
Do not underestimate the ability of technology to provide what people actually want.

15. The Lesson of Mobile Broadcast TV
It is equally hard to push technologies for which there is NO demand
Mobile broadcast TV is perfectly feasible over 3G networks, handsets had support built in
BUT it turns out that nobody wants to watch broadcast TV on their phones (except in South Korea…)
Will this lesson ever be learned…?
Video calling on mobiles (“3”’s big selling point on launch)
3D-TV ???

16. 7 usability guidelines for Web sites on mobile devices
Reduce the amount of content
Single column layouts work best
Present the navigation differently
Minimise text entry
Decide whether you need more than 1 mobile site
Design for touchscreen and non-touchscreen users
Take advantage of inbuilt functionality
Slide used Last Year
(accessed 21/06/12)

17. 7 usability guidelines for Web sites on (small?) mobile devices
Reduce the amount of content
Why? Screens are near desktop resolution…
Single column layouts work best
Are deeply annoying
Present the navigation differently
As this will confuse and annoy your users!
Minimise text entry Predictive text faster than typing for most…
Decide whether you need more than 1 mobile site
Because we all need MORE work to do!
Design for touchscreen and non-touchscreen users
Take advantage of inbuilt functionality
Like I wasn’t doing this already…?
What I think now…

18. Summary (Personal View!)
It is usually a mistake to design a technology to the current, lowest common denominator
Today’s mid-range device is tomorrow’s entry level
Should all TV programmes have a special “Black & White” version for monochrome TVs?
You cannot force a technology onto people
But you can show them new opportunities
This does NOT mean you can ignore the mobile website content in block 3!
All of the technologies discussed are useful (I use them all regularly…)
And the TMA requires them as part of the answer!

19. Options for Mobile Do nothing
Design one Web site but use a different style sheet or sheets for mobile devices
Have separate Web sites for mobile devices.
Check-out the BBC Web site on several devices.

20. Ripple – An Easy way to try out different device types

21. Detecting Mobile Devices (client)
Infer from “window” object height & width
Use “navigator” object
<!DOCTYPE html>
<html>
<body>
<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
Browser CodeName: Mozilla
Browser Name: Netscape
Browser Version: 5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/ Safari/536.5
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/ Safari/536.5

22. Detecting Mobile Devices (server)
Browser id strings
See also detector.dmolsen.com – tries to categorise broswer (desktop, advanced mobile, basic mobile) from browser string

23. Handling Mobile Devices
Now we (think) we know the device, how can we deliver appropriate content?
Switching stylesheets
Tweaking classes and ids
Transforming content
Separate sites
Frameworks (e.g. Wordpress Themes)

24. More on Transformations
XSLT capabilities – Good for:
Re-ordering content
Selecting elements
Modifying attributes
XSLT shortcomings - Not so good at:
Counting stuff (get first ‘n’ items from list)
Being easy to write from scratch
Good starting points at wwbota.free.fr/XSLT_models/README.html

25. XML Name Spaces - 1 May have come across these reading about XSLT
One approach to problem of mixing different XML data
To avoid confusion with same element names
Idea is to “prefix” each set of elements with a unique string
Typical GLOBALLY unique string is a URI
Too long / messy to put in front of elements
So provide a “shorthand” prefix, unique to THIS document
<xml version=“1.0”
xmlns:blazon=“
xmlns:xhtml=“xmlns="
<xhtml:body>….
<blazon:body>Information….</blazon:body>

26. XML Name Spaces - 2 Having said all that… But not always necessary:
Useful to know about namespaces
But not always necessary:
Redefine your XML to avoid clashes
Rewrite your XML “on the fly” (e.g. use XSLT before merging)
Work out meaning from context
We have 2 title elements – is this really a problem?
Is it simple to tell them apart?
<order>
<customer><title>Mr.</title><surname>Smith</surname>….
<items>
<book><title>XML In a Nutshell</title><isbn> — </isbn>…..

27. Moving on to Mobile Apps
All the preceding discussion
Was about the development of websites specifically for mobiles
Development of applications for mobiles is a different thing entirely
Apps are great (but NOT always necessary)
Is the Wikipedia app significantly more useful than the website?
Discuss!

28. Developing Android Apps - 1
We will be using a development tool called App Inventor
Provides an Integrated Development Environment
Screen designer
Code designer
Mobile Device Emulator

29. Developing Android Apps - 2
App Inventor is not a toy!
A lot of commonality with professional Android development environment
Approach to User Interface building
Attaching (Java) code to events
Desktop based emulator
E.g. Eclipse “Indigo” with Android SDK
(See next slide)

31. You have some setting up to do: in Part 3
Don’t miss out the Java check
TT284 Block 3 tutorial. June 2013

32. Note the useful book part
TT284 Block 3 tutorial. June 2013

33. Starting Blocks Editor
Sometimes there seem to have been some problems here.
Make sure you have the latest java and if necessary make sure it not blocked by your firewall
If you are using Firefox, then start the blocks editor by selecting run for the Java download.
If you are using chrome, you do not have this choice and must save the file. In which case you must run the file from the downloads folder.

34. Local Server
This is only available for Windows users, not for OSX or Linux
It is not needed. The MIT server is perfectly adequate for the TMA
So use MIT online for the assignment and only install the local server if you fancy the challenge
(or are stuck on the end of a slow, flaky internet connection)

35. Extra Tutorials
Peter Thomson has provided some excellent tutorials which you will find in the online forums
Now, let us consider a simple example…

36. Connecting to a web page from a mobile device e.g. Google Search
Could do this from the phone’s browser
Could use a mobile application to provide a mobile deivce specific version
This is what the Wikipedia app discussed earlier does

37. Phase 1: Requirements for a mobile app to connect to the web
From a user perspective
Request the Google web page
View the Google web page
From a system perspective
Needs to know when to display the page
Display the Google web page

38. wireframe

39. What components will we need?
Look at what is available
AppInventor API (Reference documentation)

40. Development methodology
Design first
Components
Variables
Design in App Inventor
Code the blocks

41. Design view

42. Blocks Editor

43. Evaluation and Review Does it meet requirements? Does it look ok?
Does it behave as it should?
How can we improve it?

44. Phase 2: Requirements for sending search string in URL
From a user perspective
Enter the search string to send to Google
From a system perspective
Needs to know where to capture the search string
Capture the user search string
Concatenate the Google URL with the search string

45. Design
Components?
Variables?
Possible issues?

46. Add the search string to the URL

47. Add the search string to the URL (detail)

48. TMA Tips: Project Planning
In developing your app there are several key-stages to follow:
Have a good understanding of what is required
What is essential?
What are the nice haves?
Produce a Structured plan
Produce progression versions.
Critically appraise your work
Be prepared to start again!

49. TT284 Block 3 tutorial. June 2013 c.a.m.lowndes@open.ac.uk
Time management
Don’t ignore the first parts
Install Ripple and AppInventor when you have quality time to concentrate, and test
Allow time for reading AND app development
TT284 Block 3 tutorial. June 2013

50. TT284 Block 3 tutorial. June 2013 c.a.m.lowndes@open.ac.uk
Use the tutorials
Build up your app as modules
Test as you go
Don’t do more than you need
Keep referring to the TMA and what it asks for
TT284 Block 3 tutorial. June 2013

51. TT284 Block 3 tutorial. June 2013 c.a.m.lowndes@open.ac.uk
Do a draft
Then check it
Then submit it, before the cutoff date (6th March 2014)
TT284 Block 3 tutorial. June 2013

52. TMA03: Notes Don’t get bogged down with App Inventor
50% of the marks are for narrative answers in your report!
Your App will be tested by me
So read “what to submit” very carefully
Don’t try to do too much
Meeting the specification is sufficient
Use sensible variable names / button labels etc.
Help me understand your app
It should NOT need a manual!

53. The Diagram
This is worth five marks and a fairly simple design will be adequate.
But more importantly it is the basis of your subsequent design
You may care to provide more detail to help you break down the structure of your app.

54. Block diagram example - 1

55. Block diagram example - 2
TT284 Block 3 tutorial. June 2013

56. Back to Question 3
I will answer questions, but these are to be your ideas. Make assumptions as needed
Something like the above is sufficient
But you are welcome to do more.
Your appInventor will look like a very detailed block diagram made with jigsaw pieces.
So the more detail you provide on paper the easier will be the actual build.

57. Tennis Scoring
The tennis scoring system can be quite complicated in real matches, but
Required here is a simple subset, so we can use appinventor to make a simple app
Don’t attempt more than asked for. There are no extra marks for that.

58. TT284 Block 3 tutorial. June 2013 c.a.m.lowndes@open.ac.uk
What to upload to eTMA
Your answers to Q1, Q2 and Q3 part a), which should have the filename ‘TMA03.doc’
Your app as a downloaded App Inventor project file (keep it zipped). It should be called ‘OURCscoreyourPI’ e.g. OURCtimerA Do not send a packaged ‘.apk ‘file if you have packaged one.
TT284 Block 3 tutorial. June 2013

59. TT284 Block 3 tutorial. June 2013 c.a.m.lowndes@open.ac.uk
Beware of confusing …
“A block diagram showing the code modules to be developed” (YES we need this)
With
“A screenshot of the blocks of code” (NO NEED)
TT284 Block 3 tutorial. June 2013

60. Any Questions About TMA03?

61. Reminder about deadlines etc.
TMA03 Deadline is noon 6th March
(Grace period to midnight, but no support available)
Make sure you understand what you need to submit!
Block 4 available 3rd March
Will include part 1 of EMA – the work plan
EMA materials available sometime in March
Work plan submission date 17th April
Final submission date 30th May
NO extensions for EMA (either part!)
Not from me anyway!
You can try student support but you will need a really good reason!

62. Thank You For Attending!
There will be a recording available in the elluminate room in a day or so
Downloadable audio and video versions from a few days later
Thank you, and goodnight!