mobile html5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · mobile html5:...
TRANSCRIPT
![Page 1: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/1.jpg)
Mobile HTML5:Implementing a Responsive Cross-Platform Application
Thesis seminar Friday May 11 2012Kimmo Puputti
![Page 2: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/2.jpg)
HTML5
![Page 3: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/3.jpg)
http://en.wikipedia.org/wiki/File:HTML5-APIs-and-related-technologies-by-Sergey-Mavrody.png
![Page 4: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/4.jpg)
Motivation
![Page 5: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/5.jpg)
![Page 6: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/6.jpg)
![Page 7: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/7.jpg)
![Page 8: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/8.jpg)
Cross-platform
Charland, A., and Leroux, B. Mobile Application Development:Web vs. Native. Communications of the ACM 54, 5 (2011), 49-53.
![Page 9: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/9.jpg)
Thesis
![Page 10: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/10.jpg)
Mobile applications
● Performance matters● Rich interaction and great UX expected● Network usage optimization and offline support
● Myths vs. realities● Quantitative analysis needed
![Page 11: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/11.jpg)
RQ1:What are the main problem areas in mobile web development?
![Page 12: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/12.jpg)
What are the main problem areas in mobile web development?
● Handling different screens and form-factors● Managing unreliable networks with interruptions
and offline modes● User interface performance
● Animations● Gestures
● (Device sensor access)
![Page 13: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/13.jpg)
RQ2:Do HTML5 and related specifications solve these problems?
![Page 14: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/14.jpg)
Do HTML5 and related specifications solve these problems?
● Media queries● Responsive Web Design a.k.a. RWD● Mobile-first progressive enhancement
● Offline support possible● Not without its problems, though● Needs to be tailored in the architecture
● Browser quirks● Performance problems in the implementations
● (Device APIs)
![Page 15: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/15.jpg)
RQ3:What other practical means do we have to solve these problems?
![Page 16: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/16.jpg)
What other practical means do we have to solve these problems?
● Custom meta-tags● Best practices● Tools
● JSLint, JSHint, YSlow, Page Speed
![Page 17: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/17.jpg)
Practical implementation
● Conference schedule application for the Qt Developer Days 2011● Munich and San Francisco
● JSONCache library● localStorage caching● Fetching multiple times
● Quantitative performance best practices analysis● YSlow: 93/100● Page Speed 92/100
![Page 18: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/18.jpg)
![Page 19: Mobile HTML5 - kpuputti.github.iokpuputti.github.io/thesis/files/slides.pdf · Mobile HTML5: Implementing a Responsive Cross-Platform Application Thesis seminar Friday May 11 2012](https://reader034.vdocuments.net/reader034/viewer/2022042622/5fa6888448d6066803531018/html5/thumbnails/19.jpg)
Thanks!
Thesis and slides available at:http://kpuputti.github.com/thesis/
Devdays conference application at:http://m.qtdevdays2011.qt.nokia.com/
JSONCache library at:http://kpuputti.github.com/JSONCache/
[email protected]://kpuputti.fi
@kpuputti