Webapps mobiles html5

31
1 Applications mobiles HTML5: boite à outils Philippe Antoine @PhilippeAntoine

description

 

Transcript of Webapps mobiles html5

Page 1: Webapps mobiles html5

1

Applications mobiles HTML5:boite à outils

Philippe Antoine@PhilippeAntoine

Page 2: Webapps mobiles html5

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

www.agiletour.com

Coding DojosBarcamp

JavaCamp

ParisJS

Agile Confs

@PhilippeAntoinehttp://philippe.im

Page 4: Webapps mobiles html5

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

5

Page 6: Webapps mobiles html5

6

Page 7: Webapps mobiles html5

7

1/5

<doctype html>

?

Page 8: Webapps mobiles html5

8

http://www.quirksmode.org/css/quirksmode.html

Page 9: Webapps mobiles html5

Zombie Browsers

9

navigator.cssCompatnavigator.userAgent

Page 10: Webapps mobiles html5

10

*{ box-sizing:border-box }

http://paulirish.com/2012/box-sizing-border-box-ftw/

CSS Solution

Page 11: Webapps mobiles html5

2/5(responsive)

Layouts

11

Page 12: Webapps mobiles html5

12

7 tables37 niveaux

Page 13: Webapps mobiles html5

13

1 grid layout to rule them

all

Page 14: Webapps mobiles html5

14

Viewport

<meta name="viewport" content="width=device-width; initial-scale=1;">

http://www.quirksmode.org/mobile/viewports2.html

Page 15: Webapps mobiles html5

http://www.flickr.com/photos/jorgecorrea/4359779134/

Page 16: Webapps mobiles html5

16

Resources

http://piira.se/projects/ingrid/

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://mediaqueri.es/

Page 17: Webapps mobiles html5

17

3/5Interactions

Page 18: Webapps mobiles html5

Touch

18

Demos:• Events• Multi touch• Gestures

Page 19: Webapps mobiles html5

19

Page 20: Webapps mobiles html5

Drag and drop

20

Demo Drag and drop with:

Mouse / Keyboard / Touch

Page 21: Webapps mobiles html5

21

4/5Forms and Data

Page 22: Webapps mobiles html5

22

Forms

Demos:• Datasets• Save current form to local storage• Shadow DOM

Page 23: Webapps mobiles html5

23

Data

Demos:• Data Islands• JSON object• Data manipulation

Page 24: Webapps mobiles html5

24

VanillaJavascript

Page 25: Webapps mobiles html5

25

5/5Vendor Prefixes

Page 26: Webapps mobiles html5

26

Page 27: Webapps mobiles html5

http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/

Page 28: Webapps mobiles html5

28

Page 29: Webapps mobiles html5

29

http://goo.gl/6wkMf

Page 30: Webapps mobiles html5

30

http://leaverou.github.com/prefixfree/

Page 31: Webapps mobiles html5

31

Merci