• Save
Interface Styling & Scripting on WebKit Mobile
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Interface Styling & Scripting on WebKit Mobile

on

  • 6,011 views

 

Statistics

Views

Total Views
6,011
Views on SlideShare
5,910
Embed Views
101

Actions

Likes
11
Downloads
0
Comments
0

3 Embeds 101

http://www.slideshare.net 78
http://onwebdev.blogspot.com 22
http://www.taaza.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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
  • - Modern CSS3-based techniques available in WebKit <br /> <br />
  • * My name is David (Aurelio) from uxebu (munich/amsterdam), a mobile web company <br /> * We develop cross platform mobile apps with JavaScript, HTML/CSS for the interface <br /> * we use the web technologies to increase our app&apos;s reach <br /> * Common codebase, distinct interface styles <br />
  • Topics: <br /> * Layout: CSS-support for easy layouts <br /> * Element transforms w/o reflows <br /> * Animation with transitions and keyframes <br /> * &#x201C;Micro-styling&#x201D; <br /> * Scripting transforms and animations <br />
  • Topics: <br /> * Layout: CSS-support for easy layouts <br /> * Element transforms w/o reflows <br /> * Animation with transitions and keyframes <br /> * &#x201C;Micro-styling&#x201D; <br /> * Scripting transforms and animations <br />
  • Topics: <br /> * Layout: CSS-support for easy layouts <br /> * Element transforms w/o reflows <br /> * Animation with transitions and keyframes <br /> * &#x201C;Micro-styling&#x201D; <br /> * Scripting transforms and animations <br />
  • Topics: <br /> * Layout: CSS-support for easy layouts <br /> * Element transforms w/o reflows <br /> * Animation with transitions and keyframes <br /> * &#x201C;Micro-styling&#x201D; <br /> * Scripting transforms and animations <br />
  • Topics: <br /> * Layout: CSS-support for easy layouts <br /> * Element transforms w/o reflows <br /> * Animation with transitions and keyframes <br /> * &#x201C;Micro-styling&#x201D; <br /> * Scripting transforms and animations <br />
  • TouchScroll: A JS-based scrolling layer for WebKit Mobile/Touch <br /> * CSS: box layout, transitions, transforms, gradients <br /> * JS: transform matrix, bezier curves <br />
  • First topic: layout with flexible boxes <br />
  • Flexible Box Layout: <br /> * Direction of document flow: Parent box lays out child boxes horizontally/vertically <br /> * Boxes can stretch along the axis individually <br /> * Similar to &#x201C;display: table&#x201D;, without its disadvantages <br /> * Boxes stay in the document flow, no floats, no absolute positioned elements <br /> * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. <br /> * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) <br /> * W3C Working Draft, no futureless technique <br />
  • Flexible Box Layout: <br /> * Direction of document flow: Parent box lays out child boxes horizontally/vertically <br /> * Boxes can stretch along the axis individually <br /> * Similar to &#x201C;display: table&#x201D;, without its disadvantages <br /> * Boxes stay in the document flow, no floats, no absolute positioned elements <br /> * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. <br /> * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) <br /> * W3C Working Draft, no futureless technique <br />
  • Flexible Box Layout: <br /> * Direction of document flow: Parent box lays out child boxes horizontally/vertically <br /> * Boxes can stretch along the axis individually <br /> * Similar to &#x201C;display: table&#x201D;, without its disadvantages <br /> * Boxes stay in the document flow, no floats, no absolute positioned elements <br /> * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. <br /> * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) <br /> * W3C Working Draft, no futureless technique <br />
  • Flexible Box Layout: <br /> * Direction of document flow: Parent box lays out child boxes horizontally/vertically <br /> * Boxes can stretch along the axis individually <br /> * Similar to &#x201C;display: table&#x201D;, without its disadvantages <br /> * Boxes stay in the document flow, no floats, no absolute positioned elements <br /> * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. <br /> * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) <br /> * W3C Working Draft, no futureless technique <br />
  • Flexible Box Layout: <br /> * Direction of document flow: Parent box lays out child boxes horizontally/vertically <br /> * Boxes can stretch along the axis individually <br /> * Similar to &#x201C;display: table&#x201D;, without its disadvantages <br /> * Boxes stay in the document flow, no floats, no absolute positioned elements <br /> * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. <br /> * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) <br /> * W3C Working Draft, no futureless technique <br />
  • Example from TouchScroll: Simple header and footer layout &#x2013; everyday task for phone developers, but not realizable with CSS2: Viewport behavior of WebKit Mobile optimized for document displaying, not for applications. <br /> <br /> * Show flexibility in browser <br />
  • * Simple markup <br /> * Even simpler styling <br />
  • * Simple markup <br /> * Even simpler styling <br />
  • * Simple markup <br /> * Even simpler styling <br />
  • * Simple markup <br /> * Even simpler styling <br />
  • * Simple markup <br /> * Even simpler styling <br />
  • * Simple markup <br /> * Even simpler styling <br />
  • * Simple markup <br /> * Even simpler styling <br />
  • Another example from TouchScroll: flexible tab bar &#x2013; tabs resize horizontally like table cells <br /> * Show in Browser <br />
  • Again: simple markup and styling <br />
  • Again: simple markup and styling <br />
  • Again: simple markup and styling <br />
  • Again: simple markup and styling <br />
  • Again: simple markup and styling <br />
  • Again: simple markup and styling <br />
  • * It&#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group) <br /> * alignment orthogonal to the display-axis <br />
  • * It&#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group) <br /> * alignment orthogonal to the display-axis <br />
  • * It&#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group) <br /> * alignment orthogonal to the display-axis <br />
  • <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Types of transforms: <br /> * All transforms exist for 2d and 3d (since when?) <br /> * Rotations, skews, translations, scalings <br /> * Matrix support (2x2, 4x4) <br /> * Don&#x2019;t affect other elements in the document flow <br /> * Again, W3C drafts <br />
  • Yellow: 3d transform module <br /> Animations hw-accelerated on the iPhone <br /> 3d transforms in Android 2.0 &#x2013; bad performance, no perspective <br />
  • Yellow: 3d transform module <br /> Animations hw-accelerated on the iPhone <br /> 3d transforms in Android 2.0 &#x2013; bad performance, no perspective <br />
  • Yellow: 3d transform module <br /> Animations hw-accelerated on the iPhone <br /> 3d transforms in Android 2.0 &#x2013; bad performance, no perspective <br />
  • Yellow: 3d transform module <br /> Animations hw-accelerated on the iPhone <br /> 3d transforms in Android 2.0 &#x2013; bad performance, no perspective <br />
  • Yellow: 3d transform module <br /> Animations hw-accelerated on the iPhone <br /> 3d transforms in Android 2.0 &#x2013; bad performance, no perspective <br />
  • Yellow: 3d transform module <br /> Animations hw-accelerated on the iPhone <br /> 3d transforms in Android 2.0 &#x2013; bad performance, no perspective <br />
  • Show demos on iPhone: poster circle, morphing power cube <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • * border images: image as border, dividing it into nine fields <br /> * gradients: use everywhere instead of an image <br /> * <br />
  • * border images: image as border, dividing it into nine fields <br /> * gradients: use everywhere instead of an image <br /> * <br />
  • * border images: image as border, dividing it into nine fields <br /> * gradients: use everywhere instead of an image <br /> * <br />
  • * border images: image as border, dividing it into nine fields <br /> * gradients: use everywhere instead of an image <br /> * <br />
  • * border images: image as border, dividing it into nine fields <br /> * gradients: use everywhere instead of an image <br /> * <br />
  • * border images: image as border, dividing it into nine fields <br /> * gradients: use everywhere instead of an image <br /> * <br />
  • * All three techniques combined: border-image, gradient, mask <br /> * Advantage: better maintainability, fast changes <br />
  • * All three techniques combined: border-image, gradient, mask <br /> * Advantage: better maintainability, fast changes <br />
  • * All three techniques combined: border-image, gradient, mask <br /> * Advantage: better maintainability, fast changes <br />
  • <br />
  • * Transitions: smooth change between two states, easy to script <br /> * Animations: Keyframe-based, explicit starting state, repeatable <br />
  • * Transitions: smooth change between two states, easy to script <br /> * Animations: Keyframe-based, explicit starting state, repeatable <br />
  • * Transitions between two states for one or more properties (comma-separated) <br /> * Transitions have a duration, and optionally delay and timing function <br /> * On iPhone: Hardware acceleration for opacity and transform <br />
  • * Transitions between two states for one or more properties (comma-separated) <br /> * Transitions have a duration, and optionally delay and timing function <br /> * On iPhone: Hardware acceleration for opacity and transform <br />
  • * Transitions between two states for one or more properties (comma-separated) <br /> * Transitions have a duration, and optionally delay and timing function <br /> * On iPhone: Hardware acceleration for opacity and transform <br />
  • * Transitions between two states for one or more properties (comma-separated) <br /> * Transitions have a duration, and optionally delay and timing function <br /> * On iPhone: Hardware acceleration for opacity and transform <br />
  • * Keyframes are defined seperately from in CSS <br /> * Each keyframe contains information about property states <br /> * Are added to a selector <br /> * Optional timing function for each keyframe <br />
  • * Keyframes are defined seperately from in CSS <br /> * Each keyframe contains information about property states <br /> * Are added to a selector <br /> * Optional timing function for each keyframe <br />
  • * Keyframes are defined seperately from in CSS <br /> * Each keyframe contains information about property states <br /> * Are added to a selector <br /> * Optional timing function for each keyframe <br />
  • * Keyframes are defined seperately from in CSS <br /> * Each keyframe contains information about property states <br /> * Are added to a selector <br /> * Optional timing function for each keyframe <br />
  • * Easing functions represented by a cubic bezier curve <br /> * Normalized coordinate system [0, 1] <br /> * Two explicit control points within the coordinate system <br /> <br />
  • * Easing functions represented by a cubic bezier curve <br /> * Normalized coordinate system [0, 1] <br /> * Two explicit control points within the coordinate system <br /> <br />
  • * Easing functions represented by a cubic bezier curve <br /> * Normalized coordinate system [0, 1] <br /> * Two explicit control points within the coordinate system <br /> <br />
  • * Easing functions represented by a cubic bezier curve <br /> * Normalized coordinate system [0, 1] <br /> * Two explicit control points within the coordinate system <br /> <br />
  • * In/x-axis: Time <br /> * Many different curves <br /> * cubic function depends on variable &#x201C;t&#x201D; <br /> * solving for x or y involves complex numbers <br />
  • * In/x-axis: Time <br /> * Many different curves <br /> * cubic function depends on variable &#x201C;t&#x201D; <br /> * solving for x or y involves complex numbers <br />
  • * In/x-axis: Time <br /> * Many different curves <br /> * cubic function depends on variable &#x201C;t&#x201D; <br /> * solving for x or y involves complex numbers <br />
  • * In/x-axis: Time <br /> * Many different curves <br /> * cubic function depends on variable &#x201C;t&#x201D; <br /> * solving for x or y involves complex numbers <br />
  • * In/x-axis: Time <br /> * Many different curves <br /> * cubic function depends on variable &#x201C;t&#x201D; <br /> * solving for x or y involves complex numbers <br />
  • * construction in dependency of &#x201C;t&#x201D; <br />
  • <br />
  • * all bubbling <br /> * on iPhone 3G, webkitTransitionEnd fires late <br />
  • * all bubbling <br /> * on iPhone 3G, webkitTransitionEnd fires late <br />
  • * all bubbling <br /> * on iPhone 3G, webkitTransitionEnd fires late <br />
  • * all bubbling <br /> * on iPhone 3G, webkitTransitionEnd fires late <br />
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix <br /> * Methods to translate, scale, rotate <br /> * Methods multiply, inverse <br /> * toString() returns CSS compatible matrix function definition <br />
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix <br /> * Methods to translate, scale, rotate <br /> * Methods multiply, inverse <br /> * toString() returns CSS compatible matrix function definition <br />
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix <br /> * Methods to translate, scale, rotate <br /> * Methods multiply, inverse <br /> * toString() returns CSS compatible matrix function definition <br />
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix <br /> * Methods to translate, scale, rotate <br /> * Methods multiply, inverse <br /> * toString() returns CSS compatible matrix function definition <br />
  • * Same algorithm as WebKit for t approximasation <br /> * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves <br /> * Smoothly chained animations <br /> * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G <br />
  • * Same algorithm as WebKit for t approximasation <br /> * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves <br /> * Smoothly chained animations <br /> * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G <br />
  • * Same algorithm as WebKit for t approximasation <br /> * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves <br /> * Smoothly chained animations <br /> * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G <br />
  • * Same algorithm as WebKit for t approximasation <br /> * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves <br /> * Smoothly chained animations <br /> * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G <br />
  • * Two constructors in global scope <br /> * Useful for dynamic animation construction? <br />
  • * Two constructors in global scope <br /> * Useful for dynamic animation construction? <br />
  • <br />
  • <br />
  • <br />

Interface Styling & Scripting on WebKit Mobile Presentation Transcript

  • 1. Making it smooth Interface Styling & Scripting for WebKit Mobile David Aurelio – uxebu Consulting Ltd. & Co. KG
  • 2. We open the mobile web.
  • 3. Topics Layout Transforms Animation Styling JavaScript Support
  • 4. TouchScroll JavaScript/CSS 3 Based Scrolling http://u.nu/8uvg8
  • 5. Flexible Boxes s t r e t c h Photo: http://www.flickr.com/photos/18773952@N00/416987309 – by mahalie – cc licensed
  • 6. display: (-webkit-)box; horizontal/vertical box positioning flexible boxes swiss army knife for layout tasks In WebKit and Gecko for years W3C Draft: “Flexible Box Layout Module”
  • 7. Layout w/Header & Footer
  • 8. Layout w/Header & Footer <div class="screen"> ! <div class="head"><!-- Header bar --></div> ! <div class="contents"><!-- Screen contents --></div> ! <div class="footer"><!-- Footer / toolbar --></div> </div> .screen { ! display: -webkit-box; ! -webkit-box-orient: vertical; ! -webkit-box-pack: justify; } .contents { ! -webkit-box-flex: 1; }
  • 9. Horizontal Tab Bar
  • 10. Horizontal Tab Bar <div class="tabs"> ! <a href="#about">About</a> ! <a href="#horiz">Horizontal</a> ! <a href="#twodim">2-Dimensional</a> </div> .tabs { ! display: -webkit-box; ! -webkit-box-pack: justify; } .tabs > a { ! width: 1px; ! -webkit-box-flex: 1; }
  • 11. More in “display: box” display order vs. source order alignment multiple lines
  • 12. CSS Transforms Photo: http://www.flickr.com/photos/jiazi/1061447777/ – by jiazi – cc licensed
  • 13. CSS 3 Transforms } Rotate Matrix Skew Translate Scale
  • 14. -webkit-transform: … rotate(30deg) rotateX/Y/Z rotate3d skew(20deg [, 10deg]) skewX/Y translate translateX/Y/Z translate3d scale(1.2) scaleX/Y scale3d matrix(1, 0, 0, 1, 0, 0) matrix3d perspective(200)
  • 15. Demos
  • 16. More Style Border Images Transparency Masks Gradients Photo: http://www.flickr.com/photos/senor_codo/234774166 – by Señor Codo – cc licensed Frame: http://www.flickr.com/photos/eriwst/2303608353/ – by erwist – cc licensed
  • 17. More Style Border Images -webkit-border-image: url(…) 3 3 3 3 stretch Gradients -webkit-gradient( linear, 0 0, 0 100%, from(#d67809), color-stop(0.5, #b51818), to(#b51887)) Transparency Masks -webkit-mask-image: url(…) + = -webkit-mask-box-image: …
  • 18. More Style, Combined →
  • 19. Movement: CSS Animations Photo: http://www.flickr.com/photos/raindog/6359617/ – by raindog – cc licensed
  • 20. Types of Animations Transitions Keyframe-based animations
  • 21. Transitions Transition between to states of a property delay, duration, timing function #mybox { ! -webkit-transition-property: opacity[, -webkit-transform]; ! -webkit-transition-delay: 0.1s[, 0]; ! -webkit-transition-duration: 120ms [, 2s]; ! -webkit-transition-timing-function: ease-out [, ease]; } document.getElementById("mybox").style.opacity = "0";
  • 22. Keyframe based animations Keyframes defined seperately Encapsulate property state at keyframes @-webkit-keyframes 'diagonal-slide' { ! from { -webkit-transform: translate(0, 0); } ! 50% { -webkit-transform: translate(-50px, -50px); } ! to { -webkit-transform: translate(100px, 100px); } } div { ! -webkit-animation-name: 'diagonal-slide'; ! -webkit-animation-duration: 5s; ! -webkit-animation-iteration-count: 10; }
  • 23. Timing Functions Cubic bezier curves From (0, 0) to (1, 1) Two explicit control points cubic-bezier(0.2, 0.6, 0.8, 0.6)
  • 24. Cubic Bezier Curves y/out: progress → t→ x/in: elapsed time → http://www.w3.org/TR/css3-transitions/ – Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved.
  • 25. Cubic Bezier Curves Graphic from http://de.wikipedia.org/wiki/Datei:Bezier_cubic_anim.gif – public domain
  • 26. Script Support for CSS Photo: http://www.flickr.com/photos/86624586@N00/10187684/ – by kevinzim – cc licensed
  • 27. Events webkitTransitionEnd webkitAnimationStart webkitAnimationIteration webkitAnimationEnd
  • 28. Scripting Transforms WebKitCSSMatrix Instanciate from element state var s = window.getComputedStyle(elm); var m = new WebKitCSSMatrix(s.webkitTransform); Transforming methods Broken on Android < v2.0
  • 29. Scripting Bezier Curves Bezier calculation library github.com/davidaurelio/css-beziers approximate t for given x or y Subdivide bezier curves
  • 30. More? Interfaces WebKitCSSKeyframesRule, WebKitCSSKeyframeRule document.styleSheets[i].cssRules[j]
  • 31. Linkmania http://uxebu.com/blog http://static.uxebu.com/~david/touchscroll/ http://developer.apple.com/safari/library/navigation/ http://webkit.org/blog/ http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-2d-transforms/ http://www.w3.org/TR/css3-3d-transforms/ http://www.w3.org/TR/css3-transitions/ http://www.w3.org/TR/css3-animations/ http://www.netzgesta.de/dev/cubic-bezier-timing-function.html http://github.com/davidaurelio
  • 32. Questions?
  • 33. Thank You Twitter: @void_0 david@uxebu.com