Web-based Mobile Applications

Transcription

1 Department of Computer Science Institute for System Architecture, Chair for Computer Networks Web-based Mobile Applications Mobile Communication and Mobile Computing Prof. Dr. Alexander Schill

2 Table of Contents Motivation and Challenges Main Principles Responsive Web design Mobile First Design patterns Further Features in HTML5 Server-side adaptation Web-based Cross-Platform Apps with PhoneGap 2

3 Technologies for Web Applications HTML5 and CSS 3 advanced interface styling plugin-less multimedia and computing capabilities layout transformation for multiple screen sizes alternative media files 3

4 Challenges of Mobile Web Design Dependency to network connection Heterogeneous device support (desktop, tablets, smartphones) Slower network and CPUs Screen size can no longer be fixed Native look and feel Touch/gesture input Access to native functions (e.g. location) Ø Flexible adaptation of information/media towards different devices and networks required 4

5 Mechanisms of Content Adaptation adapt interface presentation (layout) use different layouts depending on device attributes show/hide content and interface elements (e.g. navigation) provide optional and alternative content images in multiple resolutions audio/video in different formats replace media with placeholders compress files reduce file sizes through lossy conversion 5

6 Responsive Web Design Main adaptation problem: interface scaling over different device screens inofficial default screen width for PCs: 1024 px screen width range on mobile devices: px classical approach: different versions of web site/app (e.g. mobile.example.com) Responsive Web Design principle described by Ethan Marcotte single HTML page markup (avoid separate mobile version) adapts to screen size through CSS main concepts: o Fluid grids o Flexible images o CSS Media Queries responsive_website.jpg 6

7 Fluid Grids page-layout based on grid system maximal layout width as starting point layout defined by columns with fixed width / margins translate fixed grid sizes to proportional values % or em for block elements, fontsizes value for each element proportional to parent (context): o target context = result existing fixed/fluid CSS grid frameworks facilitate use 960 Grid System (960.gs) 1200px Grid System (1200px.com) Blueprint (blueprintcss.org)... 7

8 Fluid Grids 960px 12px 69px #page {width: 90%;} (90% of browser window - > equals to 960px) Banner Article = banner {width: 93.75%;} Sidebar = %.article { width: %; float: left; } = %.sidebar { width: %; float: right; } 566px 900px page-layout based on grid system 331px maximal layout width as starting point layout defined by columns with fixed width / margins translate fixed grid sizes to proportional values % or em (relative font size) for block elements and fontsizes value for each element proportional to parent (context): element size / parent size = relative size 8

9 Flexible Images large images don't automatically resize break layout if larger than parent element simple solution: img {max-width: 100%;} force image to match width of its container resized proportionally in most browsers (keeps ratio) also for other elements (video, object, embed) 9

10 Multi-resolution images Problem: images don't scale across current screen resolutions ( dpi) recent problem due to high res (retina) screen on mobile devices many mobile devices need higher resolution images than PCs network bandwidth needs to be considered Solution: <picture> element currently developed by W3C, not implemented yet similar to <video> multiple sources bound to media attributes (e.g. min-width) src-set attribute contains list of image files bound to device-pixel-ratios device-pixel-ratio: ratio between physical pixels and pixels on device, given in 1x, 1.5x, 2x iphone: 320 physical px and 320 browser px => 1x retina iphone: 640 physical px and 320 browser px => 2x <picture alt="description of image subject"> <source media="(min- width: 18em)" srcset="med.jpg 1x, med- highres.jpg 2x"> //small layout <source media="(min- width: 45em)" srcset="large.jpg 1x, large- highres.jpg 2x"> // larger layout <img src="small.jpg" alt="description of image subject."> //fallback for older browsers </picture> 10

11 Multi-resolution images <picture> not yet in browsers, but possible through Javascript e.g. picturefill ( emulates <picture> element programmatically uses <div> and data-* attributes <div data- picture data- alt="a giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data- src="small.jpg"></div> <div data- src="medium.jpg" data- media="(min- width: 400px)"></div> <div data- src="large- highres.jpg" data- media="(min- width: 800px) and (min- device- pixel- ratio: 2.0)"></div> <div data- src="extralarge.jpg" data- media="(min- width: 1000px)"></div> <noscript> <img src="external/imgs/small.jpg" alt="a giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div> 11

12 CSS Media Queries Conditionally apply styles based on browser attributes multiple CSS styles for the same elements Mainly: style content based on the screen size define multiple page layouts with CSS on same HTML markup define breakpoints for different layouts (e.g. screen width) show/hide/resize/move elements depending on layout Internet Images SRL, List of example sites: 12

13 CSS Media Queries limit scope of CSS properties by media type / feature: <link rel="stylesheet" media="only screen and (color) href="example.css" screen and (max- width: 600px) {... } any combination of single media type and chained media features (and screen and (min- device- width: 480px) and (orientation: screen and (max- width: 1200px) and (min- resolution: 260dpi) and (aspect- ratio: 1/1) media types: all aural braille handheld print projection screen tv media features: width min- width max- width height min- height... stylesheet loading inside stylesheet device- width min- device- width max- device- width device- height... aspect- ratio min- aspect- ratio max- aspect- ratio resolution min- resolution max- resolution orientation... 13

14 Mobile Device Layout Patterns Luke Wroblewski has compiled list of popular responsive layouts: Mostly Fluid Column Drop Layout Shifter Tiny Tweaks Off Canvas 14

15 Example - Mostly Fluid 320px - Phone 480px - small Tablet, Phone landscape 768px - large Tablet portrait 1024px - large Tablet, Desktop 15

16 Example - Mostly Fluid Mobile first - base CSS (320px): 2nd media query (768px): body { margin: 10px 0; } header, nav, article, footer { width: 100%; } nav ul li { width: 100%; } 1st media query (480px): 3rd media query (min- width: 480px) { } nav ul li { float: left; width: 25%; /* 4 Items */ } article div.list div { float: left; width: 50%; (min- width: 768px) { } body { margin: 20px 0; } header { float: left; } nav { float: right; width: auto; (min- width: 1000px) { } article { float: right; width: 75%; } aside { float: left; width: 25%; } 16

17 Mobile First mobile web is the future market "Mobile phones overtook PCs as the most common Web access devices worldwide - Gartner optimize content for mobile also benefits desktop o Focus on most important content, tune content for limited resources Mobile First approach promoted by Luke Wroblewski Principle: start with mobile first small screen o condensed navigation / content (reduce to most important parts) o responsive layout slow network o reduce requests and file sizes o image sprites, single CSS/JS files, minfied o ApplicationCache, localstorage o CSS 3 / <canvas> / SVG instead of raster images mobile device usage o optimize for one-hand navigation / partial attention of user 17

18 Mobile First - Innovation touch input touch target sizes: o recommended: 9mm/34px o minimum: 7mm/26px visual size is % of target size use multi-touch input: o Tap Double Tap Drag Flick Pinch Spread Rotate interface paradigms: drag to reveal, drag to refresh,... device features location o adapt content to user location compass o augmented reality based on user's location and direction orientation (portrait, landscape) o optimize layout (navigation, content) to device orientation camera o use images as input / output 18

19 Further Mobile Enablers in HTML5 based on XHTML 1.1 authored by W3C and WHATWG new elements and attributes new technologies, modularized under sections: promoted under HTML5, but most are separate standards Semantics Offline & Storage Device Access Multimedia 3D, Graphics & Effects Performance & Integration Connectivity CSS 3.0 more capabilities for web applications reduce necessity of proprietary plugins plugins often not available on mobile devices 19

20 Semantics semantic elements: <article> <footer> <header> <nav> <section> add structure to HMTL markup microdata: itemscope, itemprop attributes add extra semantic information to HTML markup using existing vocabularies schema.org Rich Snippets WHATWG 20

21 Multimedia <video> and <audio> tag: play video / audio files without plugin control via browser agent or Javascript multiple file sources possible (codec alternatives) attributes: autoplay, controls, muted,... varying codec support across browsers video: theora / h.264 / webm audio: ogg / wav / mp3 / webm / aac <video id="myvideo"> //alternative sources <source src=" type='video/mp4; codecs="avc1, mp4a"'> <source src=" type='video/ogg; codecs="theora, vorbis"'> Your user agent does not support the HTML5 Video element. //fallback text </video> <button type="button" onclick="vid_play_pause()">play/pause</button> //Javascript video API <script> function vid_play_pause() { var myvideo = document.getelementbyid("myvideo"); if (myvideo.paused) {myvideo.play();} else {myvideo.pause();} } </script> 21

22 Device Access access device sensors and data sources: Location, camera, microphone, screen orientation, motion / acceleration, contacts, calendar still early development currently only few APIs: o Javascript Geolocation API o deviceorientation, devicemotion DOM events mobile frameworks (e.g. Phonegap) also offer similar device access Example: Geolocation API provides highlevel interface to location information through Javascript adds navigator.geolocation element to DOM User can allow/disallow location access! 22

23 Device Access // test if Geolocation is supported if (typeof navigator.geolocation === 'undefined'){ alert("geolocation not supported by your web browser."); } else {geo = navigator.geolocation;} // get Position if (geo) {geo.getcurrentposition(successfunction, errorfunction); } // read position object and display lat./long. function successfunction(position) { var lat = position.coords.latitude; var long = position.coords.longitude; var acc = position.coords.accuracy; var speed = position.coords.speed; var heading = position.coords.heading; alert('your latitude is :'+lat+' and longongitude is '+long); } // display error message function errorfunction(position) { alert('error!'); } supported in most current browsers 23

24 Connectivity WebSockets: bidirectional communication channel over TCP WebSocket API + WebSocket protocol optimized, standardized version of Comet long-lived, open connection allows server push instead of polling protocol: o IETF RFC 6455 o open WebSocket through HTTP upgrade request API (Javascript): o create new WebSocket object: new WebSocket(url, protocols) o send(data), close() methods o socket events: onopen, onclose, onmessage, onerror 24

25 Performance & Integration Web Workers: client background Javascript tasks long-running, multi-threaded, computationally expensive independent from user-interface tasks no access to DOM, uses message-passing two types: dedicated: linked to creator script shared: accessible by all scripts from same origin/domain XMLHTTPRequest 2: additional functionality tracking data transmission progress through progress event binary data uploads cross-domain AJAX requests 25

26 Offline & Storage ApplicationCache: control caching of user agent instruct with cache manifest file list files in CACHE, NETWORK (online only) and FALLBACK sections Javascript API to force cache updates Web Storage: store named key/value pairs locally Javascript API value can be any data type supported by Javascript size limitation per origin/domain (5-10MB) two storage types: localstorage: no expiration date for stored data sessionstorage: data flushed after session 26

27 Offline & Storage IndexedDB: nosql transactional local storage persist (complex) Javascript objects as key/value pair indexing of value properties no hard size limit (user permission needed for 50MB+) asynchronous Javascript API: transaction requests, retrieve data via callbacks synchronous API for Web Workers planned File API: access local files in Javascript user has to select files through <input> element or drag and drop read single File, directory (FileList) or binary data (Blob) uses FileReader interface reference local files through Blob URIs 27

28 CSS 3.0 more advanced interface styling: rounded borders shadows color alpha channel (RGBA) multiple backgrounds transitions and animations: timed transition between two CSS styles animations: complex transitions over multiple styles web fonts: embed type font Embedded Open Type (.eot), TrueType (.ttf), OpenType (.otf) reduce necessity for plugins (Flash,...) and images (e.g. for rounded borders) 28

29 Mobile Web Application Development Responsive CSS Frameworks: Bootstrap (twitter.github.com/bootstrap) jquery UI (jqueryui.com) Foundation (foundation.zurb.com) many more... Mobile Web Application Frameworks: Sencha Touch ( jquery Mobile (jquerymobile.com) M-Project (the-m-project.org) LungoJS ( Joshfire (framework.joshfire.com) Testing / Debugging Ripple (Chrome extension, ripple.tinyhippos.com) Adobe Edge Inspect (html.adobe.com/edge/inspect) 29

30 Server-side adaptation Opera Mini requested web page rendered on proxy server rendered page compacted to binary Opera Binary Markup Language (OBML) and sent to client reduces download sizes by up to 90% limitations: o only onload-events (server-side Javascript) are fully supported o on client, only user-input events (onclick, onchange,...) supported o limited Ajax support -> page only changes if user clicks something Web Server Opera Mini (Java ME) OBML Opera Mini Server 3 HTML Web Server Web Server n 30

31 Server-side adaptation Amazon Silk browser on Kindle devices browser subsystems (fetching, Javascript, rendering) also implemented in AWS (Amazon Web Services) cloud (EC2, Elastic Compute Cloud 2) dynamically split which subsystems executed in EC2 and on device: cloud advantages: o computationally expensive tasks (rendering, scripts) done in cloud o faster fetch of referenced files (CSS, Javascript, images,...) o predictive caching, through all Silk users o optimized image compression (since Silk knows browser/device) Dynamic Split 31

32 Cross-Platform Web-based mobile Apps Apache Cordova (formerly PhoneGap) Cross-platform tool to create mobile apps based on HTML, CSS and Javascript Supported platforms: ios, Android, Windows Phone, BlackBerry Approach: o web content wrapped in PhoneGap App o Native code to create native browser UI element (UIWebView (ios) or WebView (Android)) o and present locally stored web content Ø Runnable as App Ø Deployment via App Stores possible 32

33 Phone Gap Approach Web-technologies to create UI + logic HTML, CSS, JavaScript PhoneGap Cross-Platform-API for JavaScript Ø Cross-platform PhoneGap Javascript API to access device specific features Wrapped to native code ios PhoneGap Bib (JavaScript) ios PhoneGap Bib (Nativ) Android PhoneGap Bib (JavaScript) Android PhoneGap Bib (Nativ) Often used in combination with Mobile Web Application Frameworks like jquery Mobile or Sencha Touch (Nativer Wrapper Code) ios-plattform-api (Nativer Wrapper Code) Android-Plattform- API Native UI elements not supported App project for ios App projekt for Android 33

34 PhoneGap Development App content Eclipse IDE - Android cordova.js Android Android App Cordova.js Xcode - ios cordova.js ios ios App HTML, CSS, Javascript Start: Cross-platform web project Compilation with platform-specific IDEs Ø Web service PhoneGap build for creating Apps without native IDEs -> build.phonegap.com 34

35 PhoneGap API Ø Cross-platform API provides common interface to access device specific features mapped to device operating system by Javascript-to-native bridge 35

36 Summary Adaptive Web applications for mobile devices Major principles: Responsive Web design Ø Scalable layout and images Ø Alternative layout and content based on Media Queries Mobile Device Layout Patterns Ø Adapt layout for different devices/view sizes Mobile First Ø optimize content for mobile -> also benefits desktop HTML5 provides further enablers for mobile Device access, CSS3, Multimedia, Offline and Storage, Extended browser capabilities Content adaptation in the infrastructure Ø Reduce data volume for transfer Cross-Platform Web-based mobile Apps Ø Common code base for apps on multiple device platforms 36

37 Some further readings HTML5 Technologies Specifications: HTML5: CSS: Microdata: SVG 2: WebGL: Device Access: WebSockets: Web Workers: XMLHttpRequest 2: ApplicationCache: Web Storage: Indexed Database: File API: Crowd-Docs of Web Standards: www1.webplatform.org Ethan Marcotte: Responsive Web Design, A Book Apart, 2011 Luke Wroblewski: Mobile First, A Book Apart, 2011 Luke Wroblewski: Multi-Device Layout Patterns, 37