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