Webapps mobiles html5
-
Upload
philippe-antoine -
Category
Technology
-
view
821 -
download
1
description
Transcript of Webapps mobiles html5
1
Applications mobiles HTML5:boite à outils
Philippe Antoine@PhilippeAntoine
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
www.agiletour.com
Coding DojosBarcamp
JavaCamp
ParisJS
Agile Confs
@PhilippeAntoinehttp://philippe.im
How to tell HTML from HTML5
•Try it out on Internet Explorer
•Did it work?
•No?
•It’s HTML5
4
5
6
7
1/5
<doctype html>
?
8
http://www.quirksmode.org/css/quirksmode.html
Zombie Browsers
9
navigator.cssCompatnavigator.userAgent
10
*{ box-sizing:border-box }
http://paulirish.com/2012/box-sizing-border-box-ftw/
CSS Solution
2/5(responsive)
Layouts
11
12
7 tables37 niveaux
13
1 grid layout to rule them
all
14
Viewport
<meta name="viewport" content="width=device-width; initial-scale=1;">
http://www.quirksmode.org/mobile/viewports2.html
http://www.flickr.com/photos/jorgecorrea/4359779134/
16
Resources
http://piira.se/projects/ingrid/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://mediaqueri.es/
17
3/5Interactions
Touch
18
Demos:• Events• Multi touch• Gestures
19
Drag and drop
20
Demo Drag and drop with:
Mouse / Keyboard / Touch
21
4/5Forms and Data
22
Forms
Demos:• Datasets• Save current form to local storage• Shadow DOM
23
Data
Demos:• Data Islands• JSON object• Data manipulation
24
VanillaJavascript
25
5/5Vendor Prefixes
26
http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
28
29
http://goo.gl/6wkMf
30
http://leaverou.github.com/prefixfree/
31
Merci