TT284: Web Technologies
Block 3: Mobile Content and Applications
Karl Wilcox
Tutorial Starts at 19:00
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.
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?!
Hello And Welcome
• Welcome
• Start recording….
HTTP://XKCD.COM/479/
4
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
Where are we?
Practicals
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
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
TMA02 Feedback - 2
• Don’t create unnecessary dependencies
– 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>
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…
10
Mobile Devices
• Characteristics
• Describe them here please….!
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
12
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
13
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.
14
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 ???
15
7 usability guidelines for Web sites on
mobile devices
1.Reduce the amount of content
2.Single column layouts work best
3.Present the navigation differently
4.Minimise text entry
5.Decide whether you need more than 1 mobile site
6.Design for touchscreen and non-touchscreen users
7.Take advantage of inbuilt functionality
http://www.webcredible.co.uk/user-friendly-resources/webusability/mobile-guidelines.shtml (accessed 21/06/12)
16
7 usability guidelines for Web sites on
(small?) mobile devices
1.Reduce the amount of content
Why? Screens are near desktop resolution…
2.Single column layouts work best
Are deeply annoying
3.Present the navigation differently
As this will confuse and annoy your users!
4.Minimise text entry Predictive text faster than typing for most…
5.Decide whether you need more than 1 mobile site
Because we all need MORE work to do!
6.Design for touchscreen and non-touchscreen users
7.Take advantage of inbuilt functionality
Like I wasn’t doing this already…?
17
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!
18
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.
19
Ripple – An Easy way to try out
different device types
20
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/19.0.1084.56
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/19.0.1084.56 Safari/536.5
Detecting Mobile Devices (server)
• Browser id strings
– www.zytrax.com/tech/web/browser_ids.html
See also detector.dmolsen.com – tries to
categorise broswer (desktop, advanced mobile,
basic mobile) from browser string
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)
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
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
– http://www.karlwilcox.com/schemas/blazon/1.0
• Too long / messy to put in front of elements
– So provide a “shorthand” prefix, unique to THIS document
<xml version=“1.0”
xmlns:blazon=“http://www.karlwilcox.com/schemas/blazon/1.0”
xmlns:xhtml=“xmlns="http://www.w3.org/1999/xhtml">
<xhtml:body>….
<blazon:body>Information….</blazon:body>
XML Name Spaces - 2
• Having said all that…
– 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
<order>
<customer><title>Mr.</title><surname>Smith</surname>….
<items>
<book><title>XML In a Nutshell</title><isbn>978-0-596—007645</isbn>…..
• We have 2 title elements – is this really a problem?
– Is it simple to tell them apart?
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!
27
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
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)
You have some setting up to do: in Part
3
• Don’t miss out the Java check
TT284 Block 3 tutorial. June 2013
c.a.m.lowndes@open.ac.uk
31
Note the useful
book part
TT284 Block 3 tutorial. June 2013
c.a.m.lowndes@open.ac.uk
32
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.
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)
Extra Tutorials
• Peter Thomson has provided some excellent tutorials
which you will find in the online forums
• Now, let us consider a simple example…
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
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
wireframe
What components will we need?
• Look at what is available
• AppInventor API (Reference documentation)
• http://beta.appinventor.mit.edu/learn/reference/index.html
Development methodology
•
•
•
•
•
Design first
Components
Variables
Design in App Inventor
Code the blocks
Design view
Blocks Editor
Evaluation and Review
•
•
•
•
Does it meet requirements?
Does it look ok?
Does it behave as it should?
How can we improve it?
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
Design
• Components?
• Variables?
• Possible issues?
Add the search string to the URL
Add the search string to the URL
(detail)
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!
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
c.a.m.lowndes@open.ac.uk
49
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
c.a.m.lowndes@open.ac.uk
50
Do a draft
• Then check it
• Then submit it, before the cutoff date (6th March 2014)
TT284 Block 3 tutorial. June 2013
c.a.m.lowndes@open.ac.uk
51
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!
52
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.
Block diagram example - 1
Block diagram example - 2
TT284 Block 3 tutorial. June 2013
c.a.m.lowndes@open.ac.uk
55
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.
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.
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.
OURCtimerA1234567. Do not send a packaged ‘.apk ‘file
if you have packaged one.
TT284 Block 3 tutorial. June 2013
c.a.m.lowndes@open.ac.uk
58
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
c.a.m.lowndes@open.ac.uk
59
Any Questions About TMA03?
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!
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
http://karlwilcox.com/ou/tt284-13j a few days later
Thank you, and goodnight!