The Yahoo User
     Interface Library
                          (YUI)

Christian Heilmann | http://wait-till-i.com | http:...
Let’s take a walk...




            ...on the client side
The client side is where
strange things happen.
Browsers render in
fascinating and totally wrong
            ways.
Random code from dubious
sources interferes with your
  godlike, clean and high
       quality code.
...and you fix more than you
          develop.
The web is a total mess!
The reason is that things
    seemingly work.
However, you are not the
 web and neither is your
      computer.
To make things work for
Yahoo we needed to find a
way to abstract these issues
      away from us.
And this is why we built the
             YUI.
YUI is a framework to build
working web applications.
It includes CSS solutions to
  create layouts that work
across browsers and allow for
  predictable typography.
And it takes the pain out of
   writing JavaScript.
Last but very much not least
   it allows you to create
applications using tested and
working widgets that extend
     wha...
Interface Widgets
AutoComplete   DataTable


   Button       Layout


  Calendar      Menu


               Rich Text
   C...
Everything is fully
  documented.
http://developer.yahoo.com/yui/docs/
And there are almost 300
  examples to look at.
http://developer.yahoo.com/yui/examples/
The controls are driven by
custom events to allow for
extending and monitoring
          them.
Say for example you want to
make sure to securely chain
  animation sequences...
//This is the first animation; this one will
	 //fire when the button is clicked.
	 var move = new YAHOO.util.Anim(quot;an...
//Here we set up our YUI Button and subcribe to
	 //its click event. When clicked, it will
	 //animate the first animation...
//You can also make use of the onStart and onTween
	 //custom events in Animation; here, we'll log all
	 //of changeColor'...
All YUI components come as a
   debug version which log
everything that is going on to
          the logger.
All in all YUI allows you to
build web interfaces without
 having to know all the pain
 that goes on in the browser
      ...
Built on agreed standards
Separated into modules
each dealing with one task
Constant reporting of what
is going on
Own Deb...
Let’s hack using YUI!
Step 1: Get the page structure
         built for you.
http://developer.yahoo.com/yui/grids/builder/
Step 2: Get some nice data,
 for example photos from
           Delhi.
http://developer.yahoo.com/yql/console/
Step 3: Find a nice way to
display it – for example a
         Carousel
http://developer.yahoo.com/yui/examples/
         carousel/csl_circular.html
Step 4: Add tabs for more
         content
http://developer.yahoo.com/yui/tabview/
Step 5: Add a menu for other
           pages
http://developer.yahoo.com/yui/menu/
Step 6: Add a Map!
http://developer.yahoo.com/maps/ajax/
And...



     L
   I
 A
F
http://yuiblog.com/blog/2006/12/14/maps-plus-yui/
After you fixed that:
http://isithackday.com/hacks/delhi/
Of course this is a mashup,
        not a hack.
It is also not creative at all
and has been done to death!
But it shows you how you can
  build a working interface
THANKS!


        Christian Heilmann

       http://wait-till-i.com

    http://scriptingenabled.org

    http://twitter.c...
YUI introduction to build hack interfaces
YUI introduction to build hack interfaces
Upcoming SlideShare
Loading in...5
×

YUI introduction to build hack interfaces

2,886

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,886
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
61
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

YUI introduction to build hack interfaces

  1. 1. The Yahoo User Interface Library (YUI) Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org Delhi, India, University Hack Day, January 2009
  2. 2. Let’s take a walk... ...on the client side
  3. 3. The client side is where strange things happen.
  4. 4. Browsers render in fascinating and totally wrong ways.
  5. 5. Random code from dubious sources interferes with your godlike, clean and high quality code.
  6. 6. ...and you fix more than you develop.
  7. 7. The web is a total mess!
  8. 8. The reason is that things seemingly work.
  9. 9. However, you are not the web and neither is your computer.
  10. 10. To make things work for Yahoo we needed to find a way to abstract these issues away from us.
  11. 11. And this is why we built the YUI.
  12. 12. YUI is a framework to build working web applications.
  13. 13. It includes CSS solutions to create layouts that work across browsers and allow for predictable typography.
  14. 14. And it takes the pain out of writing JavaScript.
  15. 15. Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives us.
  16. 16. Interface Widgets AutoComplete DataTable Button Layout Calendar Menu Rich Text Charts TabView Container
  17. 17. Everything is fully documented.
  18. 18. http://developer.yahoo.com/yui/docs/
  19. 19. And there are almost 300 examples to look at.
  20. 20. http://developer.yahoo.com/yui/examples/
  21. 21. The controls are driven by custom events to allow for extending and monitoring them.
  22. 22. Say for example you want to make sure to securely chain animation sequences...
  23. 23. //This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim(quot;animatorquot;, { left: {from:0, to:75} }, 1); //This is the second animation; it will fire //when the first animation is complete. var changeColor = new YAHOO.util.ColorAnim( quot;animatorquot;, { backgroundColor: {from:quot;#003366quot;, to:quot;#ff0000quot;} }, 1); //Here's the chaining glue: We subscribe to the //first animation's onComplete event, and in //our handler we animate the second animation: move.onComplete.subscribe(function() { changeColor.animate(); });
  24. 24. //Here we set up our YUI Button and subcribe to //its click event. When clicked, it will //animate the first animation: var start = new YAHOO.widget.Button(quot;startAnimquot;); start.subscribe(quot;clickquot;, function() { //reset the color value to the start so that //the animation can be run multiple times: YAHOO.util.Dom.setStyle(quot;animatorquot;, quot;backgroundColorquot;, quot;#003366quot;); move.animate(); });
  25. 25. //You can also make use of the onStart and onTween //custom events in Animation; here, we'll log all //of changeColor's custom events and peek at their //argument signatures: changeColor.onStart.subscribe(function() { YAHOO.log(quot;changeColor animation is starting.quot;, quot;infoquot;, quot;examplequot;); }); changeColor.onTween.subscribe(function(s, o) { YAHOO.log(quot;changeColor onTween firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); }); changeColor.onComplete.subscribe(function(s, o) { YAHOO.log(quot;changeColor onComplete firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); });
  26. 26. All YUI components come as a debug version which log everything that is going on to the logger.
  27. 27. All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.
  28. 28. Built on agreed standards Separated into modules each dealing with one task Constant reporting of what is going on Own Debugging environment
  29. 29. Let’s hack using YUI!
  30. 30. Step 1: Get the page structure built for you.
  31. 31. http://developer.yahoo.com/yui/grids/builder/
  32. 32. Step 2: Get some nice data, for example photos from Delhi.
  33. 33. http://developer.yahoo.com/yql/console/
  34. 34. Step 3: Find a nice way to display it – for example a Carousel
  35. 35. http://developer.yahoo.com/yui/examples/ carousel/csl_circular.html
  36. 36. Step 4: Add tabs for more content
  37. 37. http://developer.yahoo.com/yui/tabview/
  38. 38. Step 5: Add a menu for other pages
  39. 39. http://developer.yahoo.com/yui/menu/
  40. 40. Step 6: Add a Map!
  41. 41. http://developer.yahoo.com/maps/ajax/
  42. 42. And... L I A F
  43. 43. http://yuiblog.com/blog/2006/12/14/maps-plus-yui/
  44. 44. After you fixed that:
  45. 45. http://isithackday.com/hacks/delhi/
  46. 46. Of course this is a mashup, not a hack.
  47. 47. It is also not creative at all and has been done to death!
  48. 48. But it shows you how you can build a working interface
  49. 49. THANKS! Christian Heilmann http://wait-till-i.com http://scriptingenabled.org http://twitter.com/codepo8
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×