Karl Wilcox Tutorial Starts at 19:00

wheatprisonMobile - Wireless

Dec 10, 2013 (3 years and 11 months ago)

103 views

Karl Wilcox


Tutorial Starts at 19:00

TT284: Web Technologies

Block 3: Mobile Content and Applications

TT284
-
12B Block 3 Tutorial

Tutorial begins at 7pm and will be recorded.

Please run the audio setup.

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!

3

Hello And Welcome


Welcome



Start recording….










HTTP
://
XKCD
.
COM
/479/

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

Practicals

Where are we?

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) didn’t really 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



Regular expression misunderstanding, esp. ranges


[1
-
9] is a range of
characters

not
numbers


[1
-
99999] does NOT work as some seemed to expect

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…

9

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


11

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

12

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.

13

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 ???

14

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

15

http://www.webcredible.co.uk/user
-
friendly
-
resources/web
-
usability/mobile
-
guidelines.shtml

(accessed 21/06/12)

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…?

16

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.

17

Check
-
out the BBC Web
site on several devices.

Ripple

18

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






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>978
-
0
-
596

00764
-
5</isbn>…..


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!

25

Developing Android Apps
-

1

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)

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!

TMA03: You are going to need


A stop watch to record
the running data


Access to a network


Access to the server to
upload the data

30

TMA03: Possible Approach


Start small, take small, incremental steps
-

E.g.



Display a timer that updates every second



Add a start button that starts the timer



Add a stop button that stops the timer



Add a reset button…. And so on



Don’t try to build everything at once!

31

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!

32

Any Questions About TMA03?

Reminder about deadlines etc.


TMA03 Deadline is noon 4
th

July


(Grace period to midnight, but no support available)


Make sure you understand what you need to submit!


Block 4 available 2
nd

July


Will include part 1 of EMA


the work plan


EMA materials available sometime in July


Work plan submission date 22
nd

August


Final submission date 26
th

September


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
-
13b a few days later

Thank you, and goodnight!