webapps mobiles html5
DESCRIPTION
TRANSCRIPT
![Page 1: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/1.jpg)
1
Applications mobiles HTML5:boite à outils
Philippe Antoine@PhilippeAntoine
![Page 2: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/2.jpg)
2
1.Doctype et Box Model Demo: Zombie Browsers et Quirksmode
2.Responsive Layout Demo: Viewport, Media Queries, Bootstrap
3.Interactions Demo: multitouch, scroll, drag and drop mobile/desktop
4.Forms and Data Demo: shadow dom, datasets, data islands, json.js
5.Vendor Prefixes
![Page 3: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/3.jpg)
www.agiletour.com
Coding DojosBarcamp
JavaCamp
ParisJS
Agile Confs
@PhilippeAntoinehttp://philippe.im
![Page 4: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/4.jpg)
How to tell HTML from HTML5
•Try it out on Internet Explorer
•Did it work?
•No?
•It’s HTML5
4
![Page 5: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/5.jpg)
5
![Page 6: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/6.jpg)
6
![Page 7: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/7.jpg)
7
1/5
<doctype html>
?
![Page 8: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/8.jpg)
8
http://www.quirksmode.org/css/quirksmode.html
![Page 9: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/9.jpg)
Zombie Browsers
9
navigator.cssCompatnavigator.userAgent
![Page 10: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/10.jpg)
10
*{ box-sizing:border-box }
http://paulirish.com/2012/box-sizing-border-box-ftw/
CSS Solution
![Page 11: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/11.jpg)
2/5(responsive)
Layouts
11
![Page 12: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/12.jpg)
12
7 tables37 niveaux
![Page 13: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/13.jpg)
13
1 grid layout to rule them
all
![Page 14: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/14.jpg)
14
Viewport
<meta name="viewport" content="width=device-width; initial-scale=1;">
http://www.quirksmode.org/mobile/viewports2.html
![Page 15: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/15.jpg)
http://www.flickr.com/photos/jorgecorrea/4359779134/
![Page 16: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/16.jpg)
16
Resources
http://piira.se/projects/ingrid/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://mediaqueri.es/
![Page 17: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/17.jpg)
17
3/5Interactions
![Page 18: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/18.jpg)
Touch
18
Demos:• Events• Multi touch• Gestures
![Page 19: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/19.jpg)
19
![Page 20: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/20.jpg)
Drag and drop
20
Demo Drag and drop with:
Mouse / Keyboard / Touch
![Page 21: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/21.jpg)
21
4/5Forms and Data
![Page 22: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/22.jpg)
22
Forms
Demos:• Datasets• Save current form to local storage• Shadow DOM
![Page 23: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/23.jpg)
23
Data
Demos:• Data Islands• JSON object• Data manipulation
![Page 24: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/24.jpg)
24
VanillaJavascript
![Page 25: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/25.jpg)
25
5/5Vendor Prefixes
![Page 26: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/26.jpg)
26
![Page 27: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/27.jpg)
http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
![Page 28: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/28.jpg)
28
![Page 29: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/29.jpg)
29
http://goo.gl/6wkMf
![Page 30: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/30.jpg)
30
http://leaverou.github.com/prefixfree/
![Page 31: Webapps mobiles html5](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a854a79591d4a8b47f4/html5/thumbnails/31.jpg)
31
Merci