Mobiles provide different features to laptops User expect different facilities – “location aware” But also expects a di

1. Mobile 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 09jQueryMobile

2. jQueryMobile 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 Minified jQueryMobilestylesheet <<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script> Minified jQuery Minified jQueryMobile 09jQueryMobile

3. jQueryMobile Label the <div>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” <div data-role=“page”> </div> This is a custom attribute an attribute is just property of a page Everything in here is a single page 09jQueryMobile

4. data-role 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 09jQueryMobile

5. transitions <a href=“#link” data-transition=“ “>text</a> 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 Try these using Chrome. Gives better response than firefox 09jQueryMobile

6. buttons <button data-role=“button">Button</button> Data-role – triggers the appropriate behaviour But it also provides button icons – each with a different name 09jQueryMobile

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

8. inputs 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/ Flipswitch 09jQueryMobile

9. navbar data-role=“navbar” provides the “standard” mobile layout <div data-role="page" id="pageA"> <div data-role="header"> <h1>Poetry Page</h1> <div data-role="navbar"> <ul> <li><a href="#pageA">Home</a></li> <li><a href="#pageB">Metaphysical</a></li> <li><a href="#pageC">Romantic</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>The poetry web site. Providing answers of English Poetry throughout the ages</p> </div> 09jQueryMobile

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

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

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

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

14. Cutom themes 09jQueryMobile

15. Touch events 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”, tapping on something with the id #name 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. 09jQueryMobile

16. Touch events (ii) 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 Scrolling is on a document not a page item or class Variable for window orientation 09jQueryMobile

17. Multi-pages 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. <div data-role="page" id="pageone">  <div data-role="main" class="ui-content">    <a href="#pagetwo">Go to Page Two</a>  </div></div><div data-role="page" id="pagetwo">  <div data-role="main" class="ui-content">    <a href="#pageone">Go to Page One</a>  </div></div> Minified jQuery 09jQueryMobile

18. Mobile 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 17th 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. Doesn’t mean I won’t be available at other time 09jQueryMobile

19. Assignment Will answer questions of the form … am I including the right things? have I left anything out? 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 09jQueryMobile