Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

This session will take a look at two prominent desktop platforms, AIR and Titanium, and examine some of the pros and cons of developing with that environment. We'll also take a look at ways to speed up development using rich components like jQuery UI and take advantage of the features of HTML5 and CSS3 that can be used right away.

Published in: Technology
  • Be the first to comment


  1. 1. RIAs Building for the Desktop with the Web
  2. 2. What am I talking about?! What is Adobe AIR and Titanium? Look what I can do! CSS and JavaScript without libraries Look what I can do even faster! jQuery and jQuery UI
  3. 3. Adobe AIR & Titanium Desktop Platforms using Web Technologies
  4. 4. What is Adobe AIR/Titanium? Platforms for desktop applications built using web technologies such as Flash and JavaScript that can be run on various operating systems Powered by Webkit But different from each other and Safari
  5. 5. HTML/JavaScript Code base can easily be shared between web and desktop applications Ajax libraries such as jQuery, Mootools, ExtJS, and YUI can be used Adobe AIR: Ability to sandbox code for additional application security Adobe AIR: Full access to AS3 API and Flash runtime from JavaScript. Single threaded environment
  6. 6. Webkit Single rendering environment (no cross-browser issues) CSS3 Features New DOM methods
  7. 7. Webkit Adobe AIR HTML Control in Flash environment, text rendering isn’t consistent with browser Consistent HTML controls across platforms but not with OS Titanium is just Webkit consistent with OS better chrome handling in OSX
  8. 8. Look what I can do Imagine a world with only one browser
  9. 9. CSS3 Features opacity and rgba support multiple background images border-radius border-image columns CSS Transformations CSS3 Media Queries Canvas! SVG!
  10. 10. Opacity border: 5px solid rgba(255,0,0,.6); -webkit-background-clip: padding;
  11. 11. Background Images background: url(assets/top-left.png) no-repeat 0 0,         url(assets/bottom-left.png) no-repeat 100% 100%;
  12. 12. Border Radius -webkit-border-radius: 5px;
  13. 13. Background Images -webkit-border-image: url(example.gif) 5px 5px 5px 5px repeat stretch;
  14. 14. Background Images -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #333;
  15. 15. Custom Scrollbars ::-webkit-scrollbar { width: 13px; height: 13px; } ::-webkit-scrollbar-thumb:vertical { -webkit-border-image: url(app://scrollbar.png) 13 0 13 0; border-color: transparent; border-width: 13px 0; min-height: 20px; }
  16. 16. AIR 2 beta 2D transformations, transitions, animations, gradients, zoom
  17. 17. Titanium 2D transformations and... 3D transformations
  18. 18. CSS3 Media Queries <style type="text/css"> @media screen and (max-width: 800px) { #b { display:none; } } </style> </head> <body> <div id="a">This is A</div> <div id="b">This is B</div> </body>
  19. 19. DOM Features XPath and CSS Selector engines XML serialization and de-serialization
  20. 20. Selector Engines //XPATH ToDo.items .evaluate("//item[@id='"+ id +"']", ToDo.items) .iterateNext(); // W3C Selectors ToDo.items = document.querySelectorAll(".items");
  21. 21. XML Serialization var s = byteData.readUTFBytes(byteData.length); var parser=new DOMParser(); var doc=parser.parseFromString(s,"text/xml"); var serializer = new XMLSerializer(); var packet = serializer.serializeToString(ToDo.items);
  22. 22. Powerful Layout Application shells can be built quickly with a little CSS and position:absolute
  23. 23. Powerful Layout #a  {  position:absolute;  top:0;  right:0;  left:0;    height:20px;  } #b  {  position:absolute;  top:0;  bottom:0;  left:0;    width:200px;  } #c  {  position:absolute;  top:0;  right:0;  bottom:0;  left:200px;  }    
  24. 24. Look what I can do EVEN FASTER! Libraries are still useful
  25. 25. Accordion
  26. 26. Date Picker <script  type="text/javascript">   $(function()  {     $("#datepicker").datepicker();   }); </script> <input  id="datepicker"  type="text">
  27. 27. Questions? I promise not to bite.