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.

Introduction to YUI - IIT Kharagpur

1,240 views

Published on

Using YUI for hacks.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction to YUI - IIT Kharagpur

  1. 1. YUI<br />Hack U – IIT Kharagpur<br />Harsha Vashisht<br />mail@harsharv.comhttp://www.harsharv.com<br />
  2. 2. The client side is where strange things happen.<br />
  3. 3. Browsers render in fascinating and totally wrong ways.<br />
  4. 4. Random code from dubious sources interferes with your godlike, clean and high quality code....and you fix more than you develop.<br />
  5. 5. The web is a total mess!<br />
  6. 6. To make things work for Yahoo! we needed to find a way to abstract these issues away from us.<br />
  7. 7.
  8. 8. And this is why we built the YUI.<br />
  9. 9. YUI is a framework to build working web applications. <br />
  10. 10. It includes CSS solutions to create layouts that work across browsers and allow for predictable typography. <br />
  11. 11. And it takes the pain out of writing JavaScript. <br />
  12. 12. Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives us. <br />
  13. 13. Auto Complete<br />Data Table<br />Interface Widgets<br />Button<br />Layout<br />Menu<br />Calendar<br />Rich Text<br />Charts<br />Tab View<br />Container<br />
  14. 14. Everything is fully documented with around 300 examples!<br />
  15. 15. 1. Documentationhttp://developer.yahoo.com/yui/docs/2. Exampleshttp://developer.yahoo.com/yui/examples/ <br />
  16. 16. All YUI components come as a debug version which log everything that is going on to the logger.<br />
  17. 17. All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.<br />
  18. 18. Now, lets have a look at what YUI has to offer.<br />
  19. 19. 1. Data Sourcehttp://developer.yahoo.com/yui/3/datasource/<br />
  20. 20. The DataSource Utility provides a consistent API for the retrieval of data from arbitrary sources over a variety of supported protocols.<br />
  21. 21. Remote sources<br />Polling<br />Caching<br />Events<br />
  22. 22. http://developer.yahoo.com/yui/3/examples/datasource/datasource_get.html<br />
  23. 23. YUI allows you to fetch data from YQL directly!<br />
  24. 24. http://developer.yahoo.com/yui/3/examples/yql/simple-yql.html<br />
  25. 25. 2. Auto complete<br />
  26. 26. http://developer.yahoo.com/yui/3/examples/autocomplete/ac_datasource.html<br />
  27. 27. 3. Data Charts<br />
  28. 28. Now.. I want to draw a graph..<br />
  29. 29. Duck.. There will be code<br />Duck.. There will be code<br />
  30. 30. My code..<br />YUI().use('charts', function (Y) <br />{ <br />varmyDataValues = [ <br /> {category:"5/1/2010", values:2000}, <br /> {category:"5/2/2010", values:50}, <br /> {category:"5/3/2010", values:400}, <br /> {category:"5/4/2010", values:200}, <br /> {category:"5/5/2010", values:5000}<br /> ];<br />varmychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});<br />});<br />
  31. 31. Ain’t that kick ass???<br />
  32. 32. Let us look at the examples page…<br />http://developer.yahoo.com/yui/3/examples/<br />
  33. 33. Questions???<br />
  34. 34. Some people I need to thank…<br />Christian Heilmann<br />GopalrathnamVenkatesan<br />
  35. 35. Harsha R. Vashishtmail@harsharv.com<br />http://www.harsharv.comhttp://twitter.com/harsharv<br />http://www.facebook.com/harsharv<br />

×