SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
London Ajax User Group
October 12, 2010
Saturday, October 16, 2010
Welcome!
• About Us
• Dylan Schiemann (@dylans)
• Piotr Zalewa (@zalun)
• Thanks to Skills Matter, JSFiddle, SitePen,
Comet Daily, & O'Reilly
Saturday, October 16, 2010
Tonight
• 18:00 Meet & Greet, Stickers
• 18:25 Intro &Vector Graphics Landscape
• 18:40 Dylan Schiemann on DojoX GFX
• 19:05 Lightning Talks
• 19:15 Darren Waddell on MooTools ART
• 19:55 Prizes and Future Events
• 20:00 Pub
Saturday, October 16, 2010
• In the beginning, there was ASCII art
• <img />
• Microsoft andVML
• Adobe, the W3C and SVG
• Firefox and Opera get native SVG
• Firefox, Opera and Safari get canvas
• All non-IE browsers get canvas and SVG
• IE9: 2011
Saturday, October 16, 2010
Raster vs.Vector
• Raster: Rectangular grid of pixels
• Pre-rendered before runtime
• Vector: Mathematical representation of a
shape
• Rendered at runtime
Saturday, October 16, 2010
Native vs. Plug-in
• Open Protocols
• No proprietary player or studio required
• Use seamlessly with HTML, CSS, DOM
• Clear Text: view source, SEO
Saturday, October 16, 2010
Canvas vs. SVG
• Procedural vs. DOM
• Terse vs. exact
• Raster vs. vector
• Events are easier with SVG, Canvas is more
popular
Saturday, October 16, 2010
2D vs. 3D
• 2D
• SVG, Canvas, etc.
• 3D
• WebGL (FF, Chrome, Safari dev builds)
• replaces O3D, Canvas 3D
• SVG 3D Transforms
Saturday, October 16, 2010
CSS 3 Extensions
• Bringing the most important parts of SVG
to HTML+CSS!
• Gradients
• Transforms (2D and 3D)
• Transitions
• Animations
• Masks
• Background Canvas
Saturday, October 16, 2010
Low-level Toolkits
• Dojo GFX
• MooTools ART
• Raphaël
• Processing
Saturday, October 16, 2010
Raphaël
• Extends SVG andVML
• Great demos
• Simple syntax
• //Creates canvas 320 × 200 at 10, 50
• var paper = Raphael(10, 50, 320, 200);
Saturday, October 16, 2010
Processing.js
• Canvas
• Port of Processing
• DSL on top of JS
Saturday, October 16, 2010
High-level Toolkits
• DojoX Charting, Drawing
• MooTools ART Widgets
• PlotKit and many other charting projects
Saturday, October 16, 2010
DojoX GFX
Saturday, October 16, 2010
RaphaëlScape
Saturday, October 16, 2010
MarkUp
Saturday, October 16, 2010
MooTools ART
Saturday, October 16, 2010
Prizes
Saturday, October 16, 2010
Future Events
• November 9: Performance Optimization
• December 14:Widget Libraries
• January 11: Unit Testing
• February 8: Filling the HTML5 Gaps
• March 8: Embedded Platforms
• February or March: Second JSMiniConf
Saturday, October 16, 2010
Other Events
• October
• HTML5 Code Camp, Oslo
• IBM European WebSphere Technical Conference, Düsseldorf
• November
• Full Frontal, Brighton
Saturday, October 16, 2010
Resources
• Dojo Toolkit: http://dojotoolkit.org/
@dojo
• London Ajax User Group:
http://londonajax.com/ @london_ajax
• MarkUp: http://markup.io/
@MarkupIO
• MooTools ART: http://github.com/
kamicane/art and http://jsfiddle.net/
kamicane/nxNZP/
• Raphaël: http://raphaeljs.com/
@RaphaelJS and http://
peepcode.com/products/raphaeljs
• SitePen: http://sitepen.com/ @sitepen
• Skills Matter: http://skillsmatter.com/
@skillsmatter
Saturday, October 16, 2010
Thanks!
(to the pub)
Saturday, October 16, 2010

Contenu connexe

Similaire à London Ajax User Group Meetup: Vector Graphics

Responsive web design - Drupal theming
Responsive web design - Drupal themingResponsive web design - Drupal theming
Responsive web design - Drupal theming
adifferentdesign
 
Making burgers with JavaScript
Making burgers with JavaScriptMaking burgers with JavaScript
Making burgers with JavaScript
Diogo Antunes
 
BCS Workshop: Old Maps Online
BCS Workshop: Old Maps OnlineBCS Workshop: Old Maps Online
BCS Workshop: Old Maps Online
Petr Pridal
 
6 open stack_swift_panoramic_view
6 open stack_swift_panoramic_view6 open stack_swift_panoramic_view
6 open stack_swift_panoramic_view
openstackindia
 
Introduction to-cocos2d
Introduction to-cocos2dIntroduction to-cocos2d
Introduction to-cocos2d
sagaroceanic11
 
Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425
guest4f2eea
 
I school creative symposium tpl october 6, 2014
I school creative symposium tpl   october 6, 2014I school creative symposium tpl   october 6, 2014
I school creative symposium tpl october 6, 2014
Stephen Abram
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
Doris Chen
 
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume LaforgeGaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Guillaume Laforge
 
Presentation to wdim_students
Presentation to wdim_studentsPresentation to wdim_students
Presentation to wdim_students
Scott Motte
 

Similaire à London Ajax User Group Meetup: Vector Graphics (20)

Responsive web design - Drupal theming
Responsive web design - Drupal themingResponsive web design - Drupal theming
Responsive web design - Drupal theming
 
Making burgers with JavaScript
Making burgers with JavaScriptMaking burgers with JavaScript
Making burgers with JavaScript
 
Paul Querna - libcloud
Paul Querna - libcloudPaul Querna - libcloud
Paul Querna - libcloud
 
BCS Workshop: Old Maps Online
BCS Workshop: Old Maps OnlineBCS Workshop: Old Maps Online
BCS Workshop: Old Maps Online
 
Open Data on the Open Platform
Open Data on the Open PlatformOpen Data on the Open Platform
Open Data on the Open Platform
 
Digging deeper into service stack
Digging deeper into service stackDigging deeper into service stack
Digging deeper into service stack
 
Best scene in town @ What If Kortrijk
Best scene in town @ What If KortrijkBest scene in town @ What If Kortrijk
Best scene in town @ What If Kortrijk
 
6 open stack_swift_panoramic_view
6 open stack_swift_panoramic_view6 open stack_swift_panoramic_view
6 open stack_swift_panoramic_view
 
Introduction to Cocos2d
Introduction to Cocos2dIntroduction to Cocos2d
Introduction to Cocos2d
 
Introduction to-cocos2d
Introduction to-cocos2dIntroduction to-cocos2d
Introduction to-cocos2d
 
Couchdbkit & Dango
Couchdbkit & DangoCouchdbkit & Dango
Couchdbkit & Dango
 
Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425
 
I school creative symposium tpl october 6, 2014
I school creative symposium tpl   october 6, 2014I school creative symposium tpl   october 6, 2014
I school creative symposium tpl october 6, 2014
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Service stack all the things
Service stack all the thingsService stack all the things
Service stack all the things
 
Lessons Learned from CityOpenSource
Lessons Learned from CityOpenSourceLessons Learned from CityOpenSource
Lessons Learned from CityOpenSource
 
Learnings,experiments,innovations
Learnings,experiments,innovationsLearnings,experiments,innovations
Learnings,experiments,innovations
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
 
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume LaforgeGaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
 
Presentation to wdim_students
Presentation to wdim_studentsPresentation to wdim_students
Presentation to wdim_students
 

Plus de dylanks (7)

Building a Modern JavaScript Framework by James Milner
Building a Modern JavaScript Framework by James MilnerBuilding a Modern JavaScript Framework by James Milner
Building a Modern JavaScript Framework by James Milner
 
Intro to HTML5 Web Storage
Intro to HTML5 Web StorageIntro to HTML5 Web Storage
Intro to HTML5 Web Storage
 
Intro to WebSockets and Comet
Intro to WebSockets and CometIntro to WebSockets and Comet
Intro to WebSockets and Comet
 
HTML5: Toolkits and Gaps
HTML5: Toolkits and GapsHTML5: Toolkits and Gaps
HTML5: Toolkits and Gaps
 
Introduction to Canvas and Native Web Vector Graphics
Introduction to Canvas and Native Web Vector GraphicsIntroduction to Canvas and Native Web Vector Graphics
Introduction to Canvas and Native Web Vector Graphics
 
London Ajax User Group Meetup: Comet Panel
London Ajax User Group Meetup: Comet PanelLondon Ajax User Group Meetup: Comet Panel
London Ajax User Group Meetup: Comet Panel
 
SWDC 2010: Programming to Patterns
SWDC 2010: Programming to PatternsSWDC 2010: Programming to Patterns
SWDC 2010: Programming to Patterns
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Dernier (20)

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 

London Ajax User Group Meetup: Vector Graphics

  • 1. London Ajax User Group October 12, 2010 Saturday, October 16, 2010
  • 2. Welcome! • About Us • Dylan Schiemann (@dylans) • Piotr Zalewa (@zalun) • Thanks to Skills Matter, JSFiddle, SitePen, Comet Daily, & O'Reilly Saturday, October 16, 2010
  • 3. Tonight • 18:00 Meet & Greet, Stickers • 18:25 Intro &Vector Graphics Landscape • 18:40 Dylan Schiemann on DojoX GFX • 19:05 Lightning Talks • 19:15 Darren Waddell on MooTools ART • 19:55 Prizes and Future Events • 20:00 Pub Saturday, October 16, 2010
  • 4. • In the beginning, there was ASCII art • <img /> • Microsoft andVML • Adobe, the W3C and SVG • Firefox and Opera get native SVG • Firefox, Opera and Safari get canvas • All non-IE browsers get canvas and SVG • IE9: 2011 Saturday, October 16, 2010
  • 5. Raster vs.Vector • Raster: Rectangular grid of pixels • Pre-rendered before runtime • Vector: Mathematical representation of a shape • Rendered at runtime Saturday, October 16, 2010
  • 6. Native vs. Plug-in • Open Protocols • No proprietary player or studio required • Use seamlessly with HTML, CSS, DOM • Clear Text: view source, SEO Saturday, October 16, 2010
  • 7. Canvas vs. SVG • Procedural vs. DOM • Terse vs. exact • Raster vs. vector • Events are easier with SVG, Canvas is more popular Saturday, October 16, 2010
  • 8. 2D vs. 3D • 2D • SVG, Canvas, etc. • 3D • WebGL (FF, Chrome, Safari dev builds) • replaces O3D, Canvas 3D • SVG 3D Transforms Saturday, October 16, 2010
  • 9. CSS 3 Extensions • Bringing the most important parts of SVG to HTML+CSS! • Gradients • Transforms (2D and 3D) • Transitions • Animations • Masks • Background Canvas Saturday, October 16, 2010
  • 10. Low-level Toolkits • Dojo GFX • MooTools ART • Raphaël • Processing Saturday, October 16, 2010
  • 11. Raphaël • Extends SVG andVML • Great demos • Simple syntax • //Creates canvas 320 × 200 at 10, 50 • var paper = Raphael(10, 50, 320, 200); Saturday, October 16, 2010
  • 12. Processing.js • Canvas • Port of Processing • DSL on top of JS Saturday, October 16, 2010
  • 13. High-level Toolkits • DojoX Charting, Drawing • MooTools ART Widgets • PlotKit and many other charting projects Saturday, October 16, 2010
  • 19. Future Events • November 9: Performance Optimization • December 14:Widget Libraries • January 11: Unit Testing • February 8: Filling the HTML5 Gaps • March 8: Embedded Platforms • February or March: Second JSMiniConf Saturday, October 16, 2010
  • 20. Other Events • October • HTML5 Code Camp, Oslo • IBM European WebSphere Technical Conference, Düsseldorf • November • Full Frontal, Brighton Saturday, October 16, 2010
  • 21. Resources • Dojo Toolkit: http://dojotoolkit.org/ @dojo • London Ajax User Group: http://londonajax.com/ @london_ajax • MarkUp: http://markup.io/ @MarkupIO • MooTools ART: http://github.com/ kamicane/art and http://jsfiddle.net/ kamicane/nxNZP/ • Raphaël: http://raphaeljs.com/ @RaphaelJS and http:// peepcode.com/products/raphaeljs • SitePen: http://sitepen.com/ @sitepen • Skills Matter: http://skillsmatter.com/ @skillsmatter Saturday, October 16, 2010
  • 22. Thanks! (to the pub) Saturday, October 16, 2010