Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations

Presentation on theme: "Karl Wilcox Tutorial Starts at 19:00 TT284: Web Technologies Block 3: Mobile Content and Applications."— Presentation transcript:

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

2 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 3 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

5 Practicals Where are we?

6 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

7 TMA02 Feedback Generally good – thank you and well done! Long extensions (> 1 week) didnt really help As always – read the question, answer the question –If in doubt, ask me! –I cant 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 –[ ] does NOT work as some seemed to expect

8 TMA02 Feedback - 2 Dont create unnecessary dependencies –Aim for maximum abstraction (independence) Examples –Dont rely on field width to restrict input length –Dont 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

9 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 didnt think it was worth it Is NOT acceptable for the next TMA… 9

10 Mobile Devices Characteristics Describe them here please….!

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

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 12

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. 13

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 (3s big selling point on launch) –3D-TV ??? 14

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 15 usability/mobile-guidelines.shtml usability/mobile-guidelines.shtml (accessed 21/06/12) Slide used Last Year

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 wasnt doing this already…? 16 What I think now…

17 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.

18 Ripple 18

19 Detecting Mobile Devices (client) Infer from window object height & width Use navigator object txt = " Browser CodeName: " + navigator.appCodeName + " "; txt+= " Browser Name: " + navigator.appName + " "; txt+= " Browser Version: " + navigator.appVersion + " "; txt+= " Cookies Enabled: " + navigator.cookieEnabled + " "; txt+= " Platform: " + navigator.platform + " "; txt+= " User-agent header: " + navigator.userAgent + " "; document.getElementById("example").innerHTML=txt; 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

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

21 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)

22 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

23 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 …. Information….

24 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? Mr. Smith …. XML In a Nutshell …..

25 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

26 Developing Android Apps - 1

27 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)


29 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!

30 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

31 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 Dont try to build everything at once! 31

32 TMA03: Notes Dont 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 Dont 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

33 Any Questions About TMA03?

34 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!

35 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!

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

Similar presentations

Ads by Google