4. Cascading Style Sheets (CSS)
CSS 2.1
Support Widespread
Many New CSS3 Modules
Backgrounds & Borders
Color
Fonts (including WOFF)
Media Queries
Namespaces
Selectors
Values & Units
Box Shadow
2D & 3D Transforms, Transitions
5. The Power of the Whole PC
GREETINGS PROFESSOR FALKEN.
WOULD YOU LIKE TO PLAY A
GAME OF CHESS?
█
6. IE9 Hardware Acceleration
A Tale of GPUs and CPUs
GPUs Commonplace
Text, Video, and Graphics
Multiple Processor Cores
(WEI Mar 2011 = 2.42)
Support for both in
Internet Explorer 9 (and beyond)
7. Scalable Vector Graphics (SVG)
SVG 1.1
Vector Based
Use Geometry
XML format
Familiarity
Readability
Accessibility
8. SVG Graphics
Declarative, XML based, royalty-free format for
describing 2D Vector graphics
Broad Adoption and Tools – released September
4, 2001
Shapes:
‘path’, ‘rect’, ‘circle’, ‘ellipse’,
‘line’, ‘polyline’ and ‘polygon’
Text
Solid Colors, Linear and Radial Gradients,
Patterns
Styling (inline & CSS)
9. Retained v. Immediate
Retained mode retains a complete model of
the objects to be rendered
Example: SVG
Immediate mode directly causes rendering of
graphics objects to the display
Example: HTML5 Canvas
11. Advantages of SVG
Static or Dynamic
Preserves Fidelity
Vectors, High-DPI, Printing, etc.
Declarative syntax (i.e. tooling)
Improved accessibility
Part of the DOM, Screen Readers
Interactivity through events
Supports embedded content (ie. XML
fragments)
13. Some SVG Generation Tools
Inkscape
http://inkscape.org
Adobe Illustrator
Export to SVG
BTW: AI -> Canvas
http://visitmix.com/labs/ai2canvas
Microsoft Visio
Save as SVG
http://office.microsoft.com/visio
16. HTML5 Canvas
HTML5 Element
U haz an old
Bitmap Based browser
JavaScript Driven
2D API
Rectangles, Paths, Lines,
Fills, Arcs, Curves, etc.
“Immediate Mode”
17. Colours and
State Compositing
Styles
Simple
Line Styles Shadows
Shapes
Complex Focus
Text
Shapes Management
Pixel
Images
Manipulation
25. SVG and Canvas
Canvas SVG
Abstraction Pixel based Shape based
Elements Single HTML element Multiple graphical elements
which become part of the DOM
Driver Script only Script and CSS
Event Model User Interaction is granular User Interaction is abstracted
(x,y) (rect, path)
Performance Performance is better with Performance is better with
smaller surface and/or larger smaller number of objects
number of objects and/or larger surface.
Via Jatinder Mann - MIX
26. Scenarios: Canvas and SVG
Complex
scenes, lots of
Screen Capture objects
Static Images
Interactive (logos, diagrams,
Charts, Graphs etc.)
High Fidelity
2D Gaming Documents for
Viewing,
Printing
Video Web
Manipulation Advertising
Or… consider both!
27. Resources
Demos and More
BeautyOfTheWeb.com
IETestDrive.com
msdn.com/ie
SVG & Canvas
http://msdn.com/gg193983.aspx
Sessions
live.visitmix.com, buildwindows.com
Z order is whichever is first so red rect is before blue-rect can be inline in html or external resources.
Election Results – High Fidelity: http://ie.microsoft.com/testdrive/Graphics/AtlaszurEuropawahl/Default.xhtml – Zoom in and out. LOB applications, and dynamic.
2004 – Apple in Webkit. Used to power dashboard widgets and safari browser itself.2006 – general use by folks Now part of HTML5APIs is part of low level drawing API – Immediate mode is very fast performance.
Can incorporate video and even get rgb value of a pixel.
http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.htmlRectangles, arcs and then quadratic. Show clipping and talk about interval timer. Then show gradient calls on kite and show shadows. Them image and video (could even do transforms on rgb values of video). Show transforms and animation. ctx.shadowColor = 'red'; other timer gradual fades what was visible into background via 0.1.