Webapps mobiles html5
Upcoming SlideShare
Loading in...5
×
 

Webapps mobiles html5

on

  • 939 views

 

Statistics

Views

Total Views
939
Views on SlideShare
939
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Webapps mobiles html5 Webapps mobiles html5 Presentation Transcript

    • Applications mobiles HTML5: boite à outils
      • Philippe Antoine
      • @PhilippeAntoine
      • Doctype et Box Model Demo: Zombie Browsers et Quirksmode
      • Responsive Layout Demo: Viewport, Media Queries, Bootstrap
      • Interactions Demo: multitouch, scroll, drag and drop mobile/desktop
      • Forms and Data Demo: shadow dom, datasets, data islands, json.js
      • Vendor Prefixes
    • www.agiletour.com Coding Dojos Barcamp JavaCamp ParisJS Agile Confs @PhilippeAntoine http://philippe.im
    • How to tell HTML from HTML5
      • Try it out on Internet Explorer
      • Did it work?
      • No?
      • It’s HTML5
    • 1/5 <doctype html> ?
    • http://www.quirksmode.org/css/quirksmode.html
    • Zombie Browsers navigator.cssCompat navigator.userAgent
    • *{ box-sizing: border-box } http://paulirish.com/2012/box-sizing-border-box-ftw/ CSS Solution
    • 2/5 (responsive) Layouts
    • 7 tables 37 niveaux
    • 1 grid layout to rule them all
    • Viewport <meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1;&quot;> http://www.quirksmode.org/mobile/viewports2.html
    • http://www.flickr.com/photos/jorgecorrea/4359779134/
    • Resources http://piira.se/projects/ingrid/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://mediaqueri.es/
    • 3/5 Interactions
    • Touch
      • Demos:
      • Events
      • Multi touch
      • Gestures
    • Drag and drop Demo Drag and drop with: Mouse / Keyboard / Touch
    • 4/5 Forms and Data
    • Forms
      • Demos:
      • Datasets
      • Save current form to local storage
      • Shadow DOM
    • Data
      • Demos:
      • Data Islands
      • JSON object
      • Data manipulation
    • Vanilla Javascript
    • 5/5 Vendor Prefixes
    • http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
    • http://goo.gl/6wkMf
    • http://leaverou.github.com/prefixfree/
    • Merci