Cocktail for Game UIshttp://www.silexlabs.org/haxe/cocktail/
Yannick DominguezDeveloperCocktail Lead developerContributor@ Silex LabsCo-founder & developer@ Intermedia ParisRaphaël Ha...
What is Cocktail ?
HTML & CSS implementation
HTML & CSS implementationuses HTML DOM API
HTML & CSS implementationuses HTML DOM APIopen source
Features
FeaturesHTML for markup
FeaturesHTML for markupCSS for design
FeaturesHTML for markupCSS for designW3C DOM API for behaviour
FeaturesHTML for markupCSS for designW3C DOM API for behaviourapplication oriented
FeaturesHTML for markupCSS for designW3C DOM API for behaviourapplication orientedWorks in stand-alone modeor embedded in ...
Uses Haxe JS API
Why JS API ?
Why JS API ?Designed for UIs
Why JS API ?Designed for UIsWidely used
Why JS API ?Designed for UIsWidely usedStandard
Workflow
WorkflowDesign in HTML / CSS
WorkflowDesign in HTML / CSSAdd interactivity with Haxe JS
WorkflowDesign in HTML / CSSAdd interactivity with Haxe JSCompile with Haxe JS, Haxe Flash and NME
Demo time !
Demo time !Mixing Cocktail and NME
After
...comesWastedLand !http://demos.silexlabs.org/cocktail/wastedland/
WastedLandcode
Web engine overview
Web engine overviewHTML and CSS parsing
Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOM
Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading styles
Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading stylesLayout
Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading stylesLayoutRendering
Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading stylesLayoutRenderingThen loop
Portability
Portabilitycore and port
Portabilitycore and portcore cross-platform
Portabilitycore and portcore cross-platformport platform specific
Portabilitycore and portcore cross-platformport platform specificFlash/Air and NME port
Status
StatusDOM
StatusDOMDOMEvent
StatusDOMDOMEventCSS parser
StatusDOMDOMEventCSS parserCSS 2.1
StatusDOMDOMEventCSS parserCSS 2.1HTML4
StatusDOMDOMEventCSS parserCSS 2.1HTML4HTML5
Whats next ?
Whats next ?CSS 3
Whats next ?CSS 3end of CSS 2.1
Whats next ?CSS 3end of CSS 2.1HTML parser
Performance
Performanceadequate
Performanceadequatenot 60fps
Performanceadequatenot 60fpscascade and layout
Performanceadequatenot 60fpscascade and layoutsoftware rendering
Issues
Issueslayout quirks
Use cases
THE LEADING GLOBAL PLATFORM FORSOCIAL VIDEO ADVERTISINGVideo playerVideo player allowing:● Youtube and DailyMotionvideo st...
Brix + CocktailRealisationsMy TF1 Connect
Cocktail for Game UIshttp://www.silexlabs.org/haxe/cocktail/http://demos.silexlabs.org/trycocktail/
WWX 2013  Cocktail
WWX 2013  Cocktail
Upcoming SlideShare
Loading in …5
×

WWX 2013 Cocktail

7,701 views
7,462 views

Published on

WWX 2013 - Cocktail for game UIs
Cocktail is a HTML/CSS rendering engine written in Haxe.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,701
On SlideShare
0
From Embeds
0
Number of Embeds
2,375
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WWX 2013 Cocktail

  1. 1. Cocktail for Game UIshttp://www.silexlabs.org/haxe/cocktail/
  2. 2. Yannick DominguezDeveloperCocktail Lead developerContributor@ Silex LabsCo-founder & developer@ Intermedia ParisRaphaël HarmelDeveloperCocktail contributorContributor@ Silex LabsCo-founder & developer@ Intermedia ParisSpeakers
  3. 3. What is Cocktail ?
  4. 4. HTML & CSS implementation
  5. 5. HTML & CSS implementationuses HTML DOM API
  6. 6. HTML & CSS implementationuses HTML DOM APIopen source
  7. 7. Features
  8. 8. FeaturesHTML for markup
  9. 9. FeaturesHTML for markupCSS for design
  10. 10. FeaturesHTML for markupCSS for designW3C DOM API for behaviour
  11. 11. FeaturesHTML for markupCSS for designW3C DOM API for behaviourapplication oriented
  12. 12. FeaturesHTML for markupCSS for designW3C DOM API for behaviourapplication orientedWorks in stand-alone modeor embedded in other applications
  13. 13. Uses Haxe JS API
  14. 14. Why JS API ?
  15. 15. Why JS API ?Designed for UIs
  16. 16. Why JS API ?Designed for UIsWidely used
  17. 17. Why JS API ?Designed for UIsWidely usedStandard
  18. 18. Workflow
  19. 19. WorkflowDesign in HTML / CSS
  20. 20. WorkflowDesign in HTML / CSSAdd interactivity with Haxe JS
  21. 21. WorkflowDesign in HTML / CSSAdd interactivity with Haxe JSCompile with Haxe JS, Haxe Flash and NME
  22. 22. Demo time !
  23. 23. Demo time !Mixing Cocktail and NME
  24. 24. After
  25. 25. ...comesWastedLand !http://demos.silexlabs.org/cocktail/wastedland/
  26. 26. WastedLandcode
  27. 27. Web engine overview
  28. 28. Web engine overviewHTML and CSS parsing
  29. 29. Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOM
  30. 30. Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading styles
  31. 31. Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading stylesLayout
  32. 32. Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading stylesLayoutRendering
  33. 33. Web engine overviewHTML and CSS parsingBuilding the DOM and CSSOMCascading stylesLayoutRenderingThen loop
  34. 34. Portability
  35. 35. Portabilitycore and port
  36. 36. Portabilitycore and portcore cross-platform
  37. 37. Portabilitycore and portcore cross-platformport platform specific
  38. 38. Portabilitycore and portcore cross-platformport platform specificFlash/Air and NME port
  39. 39. Status
  40. 40. StatusDOM
  41. 41. StatusDOMDOMEvent
  42. 42. StatusDOMDOMEventCSS parser
  43. 43. StatusDOMDOMEventCSS parserCSS 2.1
  44. 44. StatusDOMDOMEventCSS parserCSS 2.1HTML4
  45. 45. StatusDOMDOMEventCSS parserCSS 2.1HTML4HTML5
  46. 46. Whats next ?
  47. 47. Whats next ?CSS 3
  48. 48. Whats next ?CSS 3end of CSS 2.1
  49. 49. Whats next ?CSS 3end of CSS 2.1HTML parser
  50. 50. Performance
  51. 51. Performanceadequate
  52. 52. Performanceadequatenot 60fps
  53. 53. Performanceadequatenot 60fpscascade and layout
  54. 54. Performanceadequatenot 60fpscascade and layoutsoftware rendering
  55. 55. Issues
  56. 56. Issueslayout quirks
  57. 57. Use cases
  58. 58. THE LEADING GLOBAL PLATFORM FORSOCIAL VIDEO ADVERTISINGVideo playerVideo player allowing:● Youtube and DailyMotionvideo streaming● advertising injection● social network sharing15 million impressions / monthCocktailRealisations
  59. 59. Brix + CocktailRealisationsMy TF1 Connect
  60. 60. Cocktail for Game UIshttp://www.silexlabs.org/haxe/cocktail/http://demos.silexlabs.org/trycocktail/

×