Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Â
Svcc 2013-css3-and-mobile
1. HTML5 and CSS3 and
Mobile Applications
SVCC 2013 (10/05/2013)
Foothill College Los Altos
Oswald Campesato
oswald@swiftbot.com
ocampesato@yahoo.com
2. Main Topics in This Session
ď´CSS3 Features (condensed summary)
ď´CSS3 Graphics/Animation (2D and 3D)
ď´CSS3 and the GPU (must-have support)
ď´Reflow/Repaint (what/when/how/why)
ď´Chrome Continuous Update (CSS3/JS)
ď´CSS3 "Gong" Game (CSS3/jQuery Mobile)
ď´PhoneGap 3.0 Mobile Apps (in 4 lines)
ď´CSS3-base Apps on Glass (also native)
ď´Fun Canvas Demos (video and animation)
3. CSS3 Features (condensed list)
ď´(Perf) Gradients (linear and radial)
ď´(Perf) Rounded corners/drop shadows
ď´CSS3 filters (merged with SVG filters)
ď´Simple shapes (circle/ellipse/rectangle)
ď´(Perf) 2D and 3D animation
ď´Multi-column support
ď´Exclusions and regions
ď´Flexbox (like âgrid bagâ in Java AWT)
4. CSS3 Transforms (summary)
ď´CSS3 2D transforms:
rotate, scale, translate, matrix, and
perspective, and skew (deprecated)
⢠CSS3 3D transforms (invoke the GPU):
1) similar to 2D versions (but no âskewâ)
2) also three axis-specific methods:
rotateX, rotateY, rotateZ (and so forth)
⢠CSS3 animation via keyframes rule
5. Frameworks and Toolkits (1)
⢠Very good HTML5/CSS3 IDEs:
+ Sencha Animator and Adobe Edge (commercial?)
⢠JavaScript/SVG toolkits:
+ D3 (modern browsers) and Raphael (supports IE6-8)
+ Inkscape for SVG and iD (for maps)
⢠JavaScript-based toolkits for Canvas:
+ EaselJS, FabricJS, PaperJS
⢠http://graphicdesignjunction.com/2013/04/html5-
tools-for-designers-developers/
6. Frameworks and Toolkits (2)
ď´ Workless:
+ an HTML5-CSS3 framework for building cross-browsers
websites
+ started as a mashup of Bootstrap + HTML5 Boilerplate
+ https://github.com/iKreativ/Workless
ď´ Junior:
+ an HTML5 framework for front-end creating mobile
apps that look and behave like native
+ uses CSS3 transitions and supports swipeable
carousels
+ includes various UI components (from Ratchet)
7. Frameworks and Toolkits (3)
ď´ Literally Canvas:
+ an HTML5 open source widget
+ can be integrated into any page
+ enables users to draw online
+ provides with a simple set of tools including:
draw, erase, color-picker, undo, redo, pan and zoom
ď´ cgSceneGraph:
+ an OO JavaScript animation framework
+ built on top of HTML5 canvas
+ created for apps and games
+ works cross-browser
+ many built-in nodes (images/text/buttons/shapes)
8. Modular and Scalable CSS (1)
ď´OOCSS: Object Oriented CSS
ď´SMACSS: Scalable and Modular Architecture
for CSS
ď´DRY: Donât Repeat Yourself CSS
ď´BEM: Block, Element, Modifier
9. Modular and Scalable CSS (2)
ď´#1 and #2 avoid id (prefer class)
ď´all share common goals
ď´they use different approaches
ď´provide general guidelines (not absolute)
ď´try to understand underlying principles
ď´then take the relevant parts
10. What âWorksâ with CSS3?
ď´Combine any of these with CSS3 in a Web Page:
ď´SVG and D3 (=Data Driven Documents=JS+SVG)
ď´HTML5 Canvas (bitmap and without a DOM)
For Web applications:
ď´jQuery (cross-browser and cross-platform)
ď´BackboneJS (MVP reduces spaghetti code)
ď´AngularJS (open source from Google)
ď´Basically any JavaScript-based toolkit
11. When CSS3 Alone isnât Enough
ď´CSS3 can leverage the power of SVG:
+ reference SVG documents via âurl()â
⢠SVG can leverage CSS3 by:
+ embedding CSS selectors in an SVG doc
ď´use jQuery methods:
+ the css() method for updating properties
⢠Use jQuery Mobile features:
+ use bindings to handle mouse/touch events
12. Strengths of CSS3/SVG/Canvas
ď´ CSS3: a) 2D/3D graphics/animation, b) GPU support, c)
embeddable in SVG <defs> element, d) âeasing
functionsâ for animation, e) animate HTML elements
ď´ SVG: a) 2D graphics/animation, b) some GPU support, c)
create arbitrary 2D shapes, d) custom <pattern>s, and e)
grouping via the <g> element, and âeasing functions in
D3 (but SVG cannot animate HTML)
ď´ Canvas: a) 2D graphics/animation, b) GPU support, c)
good for updating many small objects (games), d) works
with video (use ThreeJS/WebGL for 3D animation)
13. Useful Features of SVG (summary)
An XML-based vocabulary for 2D shapes:
ď´render circles/ellipses/elliptic arcs
ď´squares/rectangles/parallelograms
ď´cubic/quadratic Bezier curves
ď´arbitrary polygons
ď´linear/radial gradients and filters
ď´mouse events and animation support (*)
ď´good for charts/graphs
ď´works well with CSS3
ď´(*) consider using D3.js
14. Other Aspects of SVG
ď´ SVG elements are inserted in the DOM so you can
track/manage groups of SVG elements
ď´ no blurred/jagged edges when zooming in
ď´ Convenient format for import/export between tools
ď´ Can apply XSL stylesheets to SVG documents
On the other hand:
⢠Verbose (what do you expect? Itâs XMLď)
⢠Can be difficult/incomprehensible (SVG tiger)
ď´ Animation code can be cumbersome/tedious
ď´ Consider D3 instead of âpureâ SVG
Blog by Patrick Dengler: SVG versus Canvas
17. CSS3 for SVG 3D Effects
ď´ #1: create an SVG document
ď´ #2: create an SVG <defs> element
ď´ #3: create CSS3 selectors with CSS3 3D animation effects
and put them in a <style> element
ď´ #4: insert the <style> element in <defs> element
ď´ #5: set the âclassâ attribute in SVG elements so that it
matches a CSS3 selector in the <style> element
Example: 3DSineWave4RG2TurbFilterAnim1.svg
NB: You can also reference an external CSS stylesheet
18. CSS3+SVG or CSS3+D3?
ď´CSS3+SVG: useful when 1) you already have
SVG-based data and 2) you must support IE6
(can do with Raphael toolkit but not D3)
⢠CSS3+D3: for modern browsers, and also easier
for defining event handlers and animation
(probably also easier to maintain/enhance)
⢠Notes:
⢠CSS3+SVG might not have GPU support
⢠Consider D3 with BackboneJS/AngularJS/etc
19. What about CSS3 and HTML5 Canvas?
ď´Insert a <canvas> element in a Web page
⢠JavaScript APIs for 2D shapes (similar to Skia)
ď´All shapes are rendered in a <canvas> element
ď´Modern browsers support <canvas> element
ď´âwrite-and-forgetâ (no DOM-based âhistoryâ)
⢠CSS3 selectors can match the <canvas> element
⢠Canvas often faster than SVG for showing
polygons
⢠Tracing Canvas calls:
http://www.html5rocks.com/en/tutorials/canvas/ins
pection/
20. Which is Faster: CSS3/Canvas/SVG?
⢠CSS3 is faster than Canvas for simple animation:
http://phrogz.net/tmp/image_move_speed.html
⢠CSS3 is faster than SVG for gradients
⢠D3 is better/faster than SVG for âfollow the
mouseâ
⢠Canvas is better than SVG for many small objects
⢠Test/compare performance on mobile devices
21. What is a GPU?
ď´Graphics Processing Unit
ď´A GPU is a single-chip dedicated processor
ď´Boost the performance of video/graphics:
2-D or 3-D graphics
Digital output to flat panel display monitors
Texture mapping
MPEG decoding
Rendering polygons
Hardware overlays
22. Nvidia and GPUs
⢠The first GPU:
developed by NVidia in 1999 (GeForce 256)
processed 10 million polygons/second
contained more than 22 million transistors
⢠Nexus 7 2 (Android 4.3):
400MHz Adreno 320 Snapdragon S4 Pro
64 ALU, 400MHz, 57GFLOPS
23. GPU Support in Browsers
ď´ the browser must be able to use the driver of the graphics
card installed on the host OS
ď´ GPU acceleration for one browser on a given machine
doesnât guarantee support for all browsers
ď´ Opera: hardware acceleration turned off by default
(might have changed recently)
ď´ http://www.useragentman.com/blog/2012/09/23/cross-
browser-gpu-acceleration-and-requestanimationframe-in-
depth/
24. CSS3 and GPU Acceleration
ď´ Add a âgo faster hackâ (aka ânull transformâ)
ď´ common CSS3 transforms to invoke the GPU:
translate3D(0,0,0) or translateZ(0)
⢠Preceding âno-opâ guarantees GPU is invoked
⢠Absence of such code does not mean that the GPU is not
invoked
⢠Convert some/all 2D transforms (except skew) to 3D?
25. Chrome and the âNull Transformâ
#1) Chrome switches on hardware compositing mode (if
supported and not already âonâ)
#2) Chrome creates a new layer and âbacking surfaceâ
Comments:
⢠A âbacking surfaceâ (= bitmap?) is a graphics context
(aka texture) into which layers are drawn
⢠Backing surfaces are uploaded to the GPU
⢠Layers sometimes share the same âbacking surfaceâ
⢠Rules that Chrome uses for creating new backing surfaces
in the next slideâŚ
26. Chrome + Layers + Backing Surfaces
Chrome creates new backing surface if a layer:
1) uses 3D or perspective transform CSS properties
2) is used by <video> element using accelerated video
decoding
3) is used by a <canvas> element with a 3D context or
accelerated 2D context
4) uses a CSS animation for its opacity or uses an animated
webkit transform
5) uses accelerated CSS filters
6) has a descendant that is a compositing layer
7) has a sibling with a lower z-index which has a compositing
layer (is the layer rendered on top of a composited layer?)
27. Null Transform: can it be slower?
ď´ Try this sample code in your browser:
http://dl.dropboxusercontent.com/u/17844821/zeug/
hwtest.html
ď´ Contains 4,000 small <div> elements
ď´ Original stackoverflow post (04/2012):
http://stackoverflow.com/questions/10014461/why-
does-enabling-hardware-acceleration-in-css3-slow-
down-performance
28. CSS3 Mask + Performance
⢠Mask results in a new offscreen buffer (OSB)
ď´GPU first writes to the OSB instead of directly to
VRAM (Video RAM)
ď´then the OSB contents are copied to VRAM
ď´VRAM is comparatively limited on mobile
devices and itâs âeasily exhaustedâ
ď´rounded corners and drop shadows use mask
ď´combination of rounded corners and drop
shadows is extra slow;(
29. What are Reflow and Repaint?
Reflow: process of calculating the position
of elements in a Web page
Repaint: re-rendering pixel colors in a Web page
Compare âdisplayâ versus âvisibilityâ in CSS:
+ display: none itâs neither present nor visible so it
requires reflow and repaint
+ visibility: hidden itâs still present, so no geometry
change, and only repaint is required
(Performance difference is small in this scenario)
30. What Causes Reflow and Repaint?
scroll and hover
box-shadow and drop shadows
floats and tables
opacity and gradients
border-radius
transparency and transitions
changing the font size
Add/remove/update the DOMď
Leaf-side nodes: probably small changes
Top-side nodes: propagation can cause
many changes
31. Chrome and Layout Changes
ď´ Chrome "batches" layout changes asynchronously
in order to maximize rendering performance
⢠Style information causes synchronous updates:
+ offsetTop, offsetLeft
+ offsetWidth, offsetHeight
+ scrollTop/Left/Width/Height
+ clientTop/Left/Width/Height
+ getComputedStyle()
ď´ The goal: find and eliminate JavaScript code
and/or CSS selectors that cause synchronous
updates
32. Avoid Synchronous Updates (why?)
#1) Any request for style information about a
node forces the browser to provide the most
up-to-date value.
#2) In order to do so, the browser must apply
all scheduled changes, flush the queue, and
perform a reflow.
Minimize this type of code:
el.style.left = el.offsetLeft + 10 + "px";
33. The Painting Process
ď´ browser combines DOM and CSSOM
ď´ Involves âSkiaâ for:
+ rasterizing software with Canvas-like APIs
+ output is set of bitmaps
⢠bitmaps are sent to the GPU and:
+ GPU composites them (calculates pixel values)
+ renders the output on screen
"Compositing is the process where each of the individual
textures uploaded to the GPU is drawn
out in turn and results in the final page."
34. Using/Examining the Timeline (1)
⢠Open Web Inspector and click on âTimelineâ
⢠Click the (black) âstart button
⢠search for elements with significant paint time:
look for âlongâ horizontal bars
Now do this:
ď´ toggle the CSS styles of those elements to
determine performance culprit(s)
ď´ search for yellow warning icon in the timeline
ď´ hover over these records
ď´ You will see a âstack traceâ that contains:
1) invalidating code, and also
2) code that caused the layout
35. Using/Examining the Timeline (2)
ď´Detailed Timeline instructions:
ď´https://developers.google.com/chrome-
developer-tools/docs/timeline
ď´Some Topics (many others as well):
ď´Analyzing Timeline recordings
ď´Viewing details about a record
ď´Locating forced synchronous layouts
ď´Emulate touch events
36. Using Chrome Continuous Paint (CCP)
⢠#1: load a Web page into browser
⢠#2: Web Inspector > Profiles and select:
a) Collect JavaScript CPU Profile or
b) Collect CSS Selector Profile
⢠#3: âStart CPU Profilingâ by clicking on black dot in
lower-left corner
⢠#4: Navigate around elements in the screen
⢠#5: âStop CPU Profilingâ by clicking on red dot
⢠#6: examine the newly generated timeline
⢠Note: CCP is in Chrome v29
37. CSS3 Flying Borg Cube (Demo)
ď´CSS3 2D skew (for the three cube faces)
ď´CSS3 3D linear/radial gradients
ď´CSS3 2D and 3D transforms
ď´CSS3 3D animation effects (keyframes)
ď´No JS so select CSS profiling in Chrome
38. How Browsers Parse CSS Selectors
ď´browsers read selectors right-to-left:
this is a "bottom up" approach
ď´the âkeyâ selector: the right-most part of a
CSS selector
ď´Why right-to-left is more efficient:
a) element:parent is 1:1 whereas
b) parent:child is many:1
39. Rewriting CSS Selectors (1)
ď´ Sample CSS and HTML:
#mylist a { ... }
<ul id="mylist">
<li a=... class="abc" .../>
<li a=... class="abc" .../>
<li a=... class="abc" .../>
âŚ.
</ul>
Suppose you have:
1) 100 <a> elements, and
2) you only want the three <a> with an 'abc' class
41. Sample Selector and âEfficientâ CSS
ď´ calculate/layout/paint in a sample selector:
.results h2 { // recalculate style
height: 25px; // layout
text-shadow: 2px black; // paint
}
ď´ fast/efficient CSS (with null transform hack):
scale/translate/rotate/fade (opacity)
⢠Other operations incur layout and/or paint
⢠Paul Irish (Performance Tooling):
http://www.youtube.com/watch?v=HAqjyCH_LOE
42. Translate() versus top/left/right/bottom
ď´ Factors in favor of translate():
+ tends to perform better
+ translate() does not touch the DOM
+ involves subpixels (and smoother due to blurring effect)
+ use it for âdesign-y motionâ (animating a button press)
ď´ Factors in favor of top/left/right/bottom:
+ use when element has relative/absolute/fixed positioning
Note: Both can yield different results on different browsers
+ Detailed articles (Chris Coyier/Paul Irish):
http://css-tricks.com/tale-of-animation-performance/
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-
better-than-posabs-topleft/
43. Bootstrap 3.0 Improvements
ď´ Bootstrap 3.0 is twice as fast as BS 2.3.2
ď´ Provides a âmobile firstâ responsive grid
ď´ Bootswatch and WrapBootstrap (âfull themesâ)
ď´ Paul Irish checks BS 3.0 using CCP:
http://encosia.com/the-big-change-in-bootstrap-3-that-no-
ones-talking-about/
⢠Pamela Fox (âWhen Bootstrap Attacksâ):
http://www.youtube.com/watch?v=xbpnqbM6cRk&feature
=youtu.be&goback=%2Egde_2071438_member_265749116#
%21
44. Issues with iOS7 and HTML5
ď´ CSS-related requestAnimationFrame animations do not suspend
correctly
ď´ Resizing a composited layer (with 3D transforms) sometimes does not
repaint correctly
ď´ Performance issues for SVG animation
ď´ Launching/quitting same home-screen app several times can hard-
lock your device
ď´ Maximiliano Firtmanâs iOS7/HTML5 post:
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-
review
45. CSS3 âGongâ Game (Demo)
ď´ Graphics: pure CSS3 (border-radius=50%)
ď´ Animation: setTimeout() function
ď´ JavaScript: for collision detection
⢠jQuery Mobile:
+ updating position (jQuery css() function)
+ creating elements (jQuery clone() function)
+ event handlers (jQuery Mobile vmouse)
⢠Deployed as an Android apk
46. CSS3 on Mobile: Android (Eclipse)
1) Create an Android app Hello and modify the main xml
layout file and Java file (see below)
2) modify $TOP/res/layout/activity_main.xml:
insert a WebView component (shown later)
3) create the directory $TOP/assets/www
4) Copy Hello.html (+ assets) into $TOP/assets/www
5) modify $TOP/src/com/âŚ/HelloActivity.java:
reference Hello.html in the method onCreate()
49. HTML5/CSS3 and PhoneGap
ď´A Plugin to create Hybrid Mobile apps
ď´A JavaScript âbridgeâ
ď´Available on 6 platforms
ď´PhoneGap 3.0 requires NodeJS
ď´Always creates an index.html Web page
50. Why use PhoneGap?
ď´No compilation required
ď´No Java/Objective-C code
ď´Handles the manual steps for you
ď´Provides access to hardware (camera/etc)
ď´PhoneGap 3.0 camera/sensors/etc support
is available via different modules
51. Create/Compile/Deploy in PhoneGap 3.0
ď´Prerequisites: install NodeJS and PhoneGap
ď´Create/compile/deploy:
#1: phonegap create hello com.demo.hello Hello1
#2: cd hello
#3: phonegap build android [ios âŚ]
#4: phonegap install android [ios âŚ]
Combine #3 and #4 with this step:
phonegap run android ios [âŚ]
52. CSS3 Demo on Google Glass
Step #1: create and compile an Android project (letâs
call it âCSS3Demoâ) in Eclipse
Step #2: deploy the Android apk to Glass:
adb install CSS3Demo.apk
Step #3: get the package and main Android Activity:
Letâs call them âa.b.câ and âCSS3Mainâ
Step #4: launch from the command line:
adb shell am start -a android.intent.action.MAIN -n
a.b.c/.CSS3Demo
55. Some âFavoriteâ People
⢠Tab Atkins
⢠Eric Bidelman
⢠Mike Bostock
⢠Pamela Fox
⢠Paul Irish
⢠John Resig
⢠Alex Russell
⢠Steve Souders
⢠Lea Verou
⢠David Walsh
⢠Nicholas Zakas
⢠Vincent Hardy/Brian Leroux/Tony Parisi (*)
56. Some Training Topics
⢠D3/SVG
⢠HTML5 (CSS3/Canvas/etc)
ď´jQuery/jQuery Mobile
ď´Android (iOS later)
ď´BackboneJS/PhoneGap
57. Open Source Projects (graphics)
⢠Graphics Projects on http://code.google.com/p:
+ css3-graphics and html5-canvas-graphics
+ css3-jquery-graphics and d3-graphics
+ svg-graphics and svg-filters-graphics
+ easel-graphics, fabric-graphics, paper-graphics
+ ThreeJS, jQuery, Raphael, Google Go, Android
+ Dart, Dojo, JSF, Two.js, JavaFX 2.0
+ Lua, PHP, Perl, Python, Ruby, SWT graphics
58. Recent/Upcoming Books
1) HTML5 Canvas and CSS3 Graphics (2012)
2) jQuery, CSS3, and HTML5 for Mobile (2013)
3) HTML5 Pocket Primer (2013)
4) jQuery Pocket Primer (2013)
5) HTML5 Mobile Pocket Primer (2014)
6) D3 Pocket Primer (2014)
⢠âWebGL: Up and Runningâ (Tony Parisi)
Co-creator of VRML and X3D