1. Mobiles provide different features to laptops User expect different facilities – “location aware” But also expects a different sort of interaction. For instance screen taps and swipes. Part of java script There are frameworks to help you solve this problem. jQueryMobile – very popular – leverage existing experience on jQuery w3Schools has a course I will provide an overview of what is available 1 Mobile 09jQueryMobile

2. jQuery Mobile is a touch-optimized web framework for creating mobile web applications. iOS – Android – Blackberry – windows phone Palm web OS – symbian Or download it and host it on your web site 2 jQueryMobile Minified jQuery Minified jQueryMobile Minified jQueryMobile stylesheet 09jQueryMobile

3. Label the s with different “data-role”s html5 has the ability to add – custom attributes. It is extensible – a browser which doesn’t recognise the attribute merely ignores it. In this case the “data-role” – tells the browser something about what the div is doing on the page. data-role="page” 3 jQueryMobile an attribute is just property of a page This is a custom attribute Everything in here is a single page 09jQueryMobile

4. data-role = “header” - creates a tool bar data-role=“main” – this defines the main content of the page data-role = “footer” Outline of a mobile page 4 data-role 09jQueryMobile

5. text This is where we get the ability to produce transitions which are “phone-like” flip, flow, pop, slide, slidedown, slidefade, slideup, turn, none Can modify the actions of these transitions using the data-direction=“reverse” So you can flick the screen left to go forward and right to go back 5 transitions Try these using Chrome. Gives better response than firefox 09jQueryMobile

6. Button Data-role – triggers the appropriate behaviour But it also provides button icons – each with a different name 6 buttons 09jQueryMobile

7. Here is the full set from the jQueryMobile web site href="#anchor” data-icon=“arrow-l” 7 Button icons http://demos.jquery mobile.com/1.1.2/d ocs/buttons/button s-types.html Can indicate where on the button: top, bottom, left, right … the icon should go. 09jQueryMobile

8. Input fields are much as for desktop html but there is A data-role=“controlgroup” attribute – which helps putting grouping items data-role=“flipswitch” Interesting web site with CSS techniques http://www.impressivewebs.com/simple-tools- front-end-developers/ 8 inputs 09jQueryMobile Flipswitch

9. data-role=“navbar” provides the “standard” mobile layout 9 navbar Poetry Page Home Metaphysical Romantic The poetry web site. Providing answers of English Poetry throughout the ages 09jQueryMobile

10. A data-role=“panel” attribute 10 panels 09jQueryMobile SIDEBAR Content SIDEBAR Content Standard desktop layout SIDEBAR Equivalent effect for phones

11. A data-role=“collapsable” attribute 11 collapsables 09jQueryMobile + Romantic Poets + Sturm und Drang Collapsables can be embedded -Romantic Poets + Blake + Byron + Keats + Shelley + Wordsworth -Romantic Poets + Blake + Byron - Keats Born: 31 October 1795 Place: Moorgate, London Died: 23 February 1821 + Shelley + Wordsworth

12. A data-role=“table” attribute useful for displaying database content Another way of collecting information – if the list is arranged alphabetically – the letters 12 tables 09jQueryMobile lists

13. jQueryMobile allows to create a unified look and feel by using themes. Here are the standard ones 13 themes 09jQueryMobile

14. 14 Cutom themes 09jQueryMobile

15. jQueryMobile – adds to the javascript framework of jQuery to allow you to react to mobile events $(‘#name’).on(“swipe”, function() { do stuff } other actions On(“swipeleft”, On(“swiperight”, On(“tap”, On(“taphold”, 15 Touch events tapping on something with the id #name 09jQueryMobile anonymous function more compact notation easier to read. Function only relates to this single action – tie it in closely. would not use if you wanted to call the function in more than one place.

16. Can pick up scolling $(document).on(“scrollstart”, function() { } And of course “scrollstop” Can pick up changes in the screen orientation. This event is associated with the window node $(window).on(“scrollstart”, function() { if(window.orientation == 0) // Portrait } https://api.jquerymobile.com/category/events For a comprehensive list 16 Touch events (ii) Scrolling is on a document not a page item or class 09jQueryMobile Variable for window orientation

17. Talked about minimising the number of separate downloads you need in order to reduce the time and bandwidth needed to access the information on a website. This comes for free with jQueryMobile Another thing to bear in mind is if two pages use the same CSS – if the CSS is with the page it is downloaded twice. If it is in a css file, that file can be cached, making the second page faster. 17 Multi-pages Go to Page Two Go to Page One Minified jQuery 09jQueryMobile

18. That is the end of the formal lectures for the course. There is a jQuerymobile workshop tomorrow. The last formal workshop. I will be available in my office for the rest of the term during the lecture hour and the workshop two hours – specifically to answer questions I will give a revision lecture in week 11 of the term 17 th March. The revision lecture will concentrate on the concepts of the course. In other words the things that can be examined! If there are any things you want covered let me know before the lecture. 18 Mobile Doesn’t mean I won’t be available at other time 09jQueryMobile

19. 19 Assignment Will answer questions of the form … am I including the right things? have I left anything out? 09jQueryMobile I will need time to look at stuff questions asked just before the deadline may not get answered Will not solve technical problems about the assignment – but I will point you at possible solutions. You have my email address and office number. If you come to my office unannounced I will answer questions – if I am not busy. BUT – I may not be there OR – I may be dealing with other students