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