Mobile Web
-
Upload
sshpack -
Category
Technology
-
view
377 -
download
2
Transcript of Mobile Web
![Page 1: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/1.jpg)
Exploring the Mobile Web
Nataliya Ryzhkina , Mobile Web Team Lead
![Page 2: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/2.jpg)
• Fragmentationo Mobile Device Categorieso Mobile Knowlegeo Mobile Browsing Experience
Mobile Development Challanges
Exploring the Mobile Web
![Page 3: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/3.jpg)
Mobile Development ChallangesMobile Device Categories
Mobile Device Categories
• Low-end mobile devices• Mid-end mobile devices• High-end mobile devices• Smartphones• Non-phone devices• Small Personal Object Technology (SPOTs)• Tablets
![Page 4: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/4.jpg)
Mobile Development ChallangesMobile Knowlege
Mobile Knowlege
• Display• Resolution• Physical dimensions• Aspect ratio• Input methods• Other features
![Page 5: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/5.jpg)
Mobile Development ChallangesMobile Browsing Experience
Mobile Browsing Experience
• Browsing Types (Focus navigation , Cursor navigation, Touch navigation, Multitouch navigation)
• Zoom Experience• Reflow Engines• Direct Versus Proxied Browsers• Multipage Experience• The WebKit Engine• Preinstalled Browsers and User-Installable Browsers• Browser Overview
![Page 6: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/6.jpg)
Browser OverviewBrowser/platform WebKit engine Smart zoomProxied NavigationSafari Yes Yes No Multitouch
Android browser Yes Yes No Multiple(a)
Symbian/S60 Yes Yes No Cursor(a) Touch(a)
BlackBerry No <= 5.0 Yes >= 6.0 Yes(a) Yes/No(b) Cursor Touch(a)
Opera Mobile No Yes Yes/No(c) Focus
Opera Mini No Yes Yes Focus Touch(a)
Internet Explorer No No < 6.5 Yes >= 6.5
No Focus Touch(a)
Nokia Series 40 No <= 5th ed. Yes >= 6th ed. No No (expected in the future) Focus
WebOS Yes Yes No Touch
NetFront No No No Focus(a) Cursor(a)
Openwave (Myriad) No (yes in the future) No No Focus
Obigo/Teleca No Yes >= Q7 No Multiple(a)
Motorola Internet Browser No No No Focus
Bada browser Yes Yes No Touch
MicroB for Maemo No (Gecko) Yes No Multiple
Firefox No (Gecko) Yes No Multiple
UC browser No Yes Yes Multiple
![Page 7: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/7.jpg)
Exploring the Mobile Web
Benefits
• Mobile Web Site, Hybrid Application, Native Application• Cross-platform/Cross-device compatability• Development tools• Graphic toolkits• Debuggers and Emulators
![Page 8: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/8.jpg)
BenefitsMobile Web Site, Hybrid Application, Native Application
Mobile Web Site Hybrid Application Native Application
App store presence Only in web app stores In leading app stores In leading app stores
App store approval None Required Required
Upgrade flexibility High Direct update requiresproprietary mechanism
Direct update requiresproprietary mechanism
Installation userexperience
Via mobile browser,QR code
Downloaded from appstore
Downloaded from appstore
Branded on-devicepresence
Yes Yes Yes
Offline availability Yes Yes Yes
Monetization No app store fees App store fees apply App store fees apply
Crawl-ability Possible Not possible Not possible
![Page 9: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/9.jpg)
BenefitsHybrid Application
![Page 10: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/10.jpg)
BenefitsCross-platform/Cross-device compatability
![Page 11: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/11.jpg)
BenefitsDevelopment tools
var listStore = { data: [ {firstName: 'Alana', lastName: 'Wiersma'}, … ]}var myList = new Ext.Container({ items: [{ height: 500, xtype: 'list', store: listStore, itemTpl: '<div class="contact"> {firstName} {lastName} </div>', grouped: true, indexBar: true }]});
<ul data-role="listview"><li><img src="images/gf.png" alt="France" class="ui-li-icon"><ahref="index.html">France</a> <span class="ui-li-count">4</span></li><li><img src="images/de.png" alt="Germany" class="ui-li-icon"><ahref="index.html">Germany</a> <span class="ui-li-count">4</span></li>…</ul>
![Page 12: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/12.jpg)
BenefitsGraphic toolkits
Touch Charts and Animator
![Page 13: Mobile Web](https://reader036.fdocuments.us/reader036/viewer/2022070315/55536a64b4c905031f8b54e0/html5/thumbnails/13.jpg)
BenefitsDebuggers and Emulators
Remote Device Access \ Remote Test Lab \ Virtual Developer Lab