Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Introducing YUI

           Christian Heilmann

   Bucharest, Romania, November 2008
Hello there, I am Chris.
I am here today to talk about
   the Yahoo User Interface
         library (YUI)
 http://developer.yahoo.com/yui/
What is the most annoying
    thing about web
      development?
The undefined environment.
This is also the coolest thing
 about web development.
Don’t ever delude yourself
into thinking you can control
 what people see when they
   visit your web products.
However, you want your
  products to work.
The working bit is what I want
    to talk to you about.
When you start writing a web
document, you use HTML and
  hope browsers do things
           right.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quo...
The right DOCTYPE, encoding
and language is a great start.
This is an unstyled document,
             right?
Wrong.
There is no such thing as an
   unstyled document.
There is no such thing as an
     “unstyled page”.
This differs from browser to
browser and can be *very*
          annoying!
Which is why YUI offers you
          reset.css
http://developer.yahoo.com/yui/reset/
Starting with a blank canvas is
         a good start.
What about typography?
Make it work across browsers
        with fonts.css
http://developer.yahoo.com/yui/fonts/
Even create layouts with
           grids.css
http://developer.yahoo.com/yui/grids/
All of this with one line of
code pulling a document
       from the web.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quo...
What if that file is not
     available?
First of all, this is not a single
  server, but a world-wide
      network of servers.
Visitors of your site will get
  the files from the server
  geographically located
      nearest to them.
This is Yahoo’s network, but
 you can also use Google’s!
 http://yuiblog.com/blog/2008/11/19/yui-google/
http://developer.yahoo.com/yui/articles/hosting/
If you like full control, then
 you can also host the files
yourself (this will also make
    them work off-line!)
Let’s play with grids a bit.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quo...
You divide the document in
three parts: a head, a body
       and a footer.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quo...
You then define a side bar
     and a main part.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quo...
Both are identical, the only
difference is that the main
part has to be wrapped in a
DIV with the ID “yui-main”.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quo...
The order of the two doesn’t
          matter!
The sidebar is a predefined
width, the main section takes
  up the rest of the space.
You define the overall width
 of the document with an ID
and the location and width of
 the sidebar with a class on
      ...
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quo...
ID and width   class, side and width
#doc = 750px      .yui-t1 = left 160px
#doc2 = 950px     .yui-t2 = left 180px
#doc3 =...
You can add grid units inside
the main section to divide it
  into horizontal columns.
Check the docs at:
http://developer.yahoo.com/yui/grids
Or if you are lazy...
Use the grids builder:
http://developer.yahoo.com/yui/grids/builder/
So where does this work?
In all the browsers Yahoo has
           to support.
Which are defined in our
graded browser support:
http://developer.yahoo.com/yui/articles/gbs/
What if a new browser comes
           around?
Chances are very high Yahoo
  will have to support it...
...so check the YUI blog and
update your YUI CSS include.
    http://yuiblog.com
Much faster than fixing
everything yourself, right?
What if HTML is not rich
enough for your needs?
Almost all *free* and *big*
 JavaScript libraries come
with widgets that work and
 are proven in the market.
YUI is of course one of them.
AutoComplete            Layout Manager

Button                  Menu

Calendar                Paginator

Carousel beta    ...
http://ui.jquery.com/




http://developer.yahoo.com/yui/
       http://ui.jquery.com
Of course the other thing the
  YUI makes a lot easier is
      using JavaScript.
Both by fixing annoying
browser bugs and by offering
   convenience methods.
For example:
Wouldn’t it be cool to not
know when to use which size
 of the grid automatically?
You can do that using YUI
          DOM.
http://developer.yahoo.com/yui/dom
Using the DOM component, I
can read out what happens in
         the browser.
I can get the dimensions of the
  window, the browser and of
 any element in the document
 - regardless of its positioning.
Thus I can create a YUI grid
 that works with all kind of
  different browsers sizes.
http://yuiblog.com/blog/2008/06/25/autogrids
YAHOO.example.autoGrid = function(){
  var container = YAHOO.util.Dom.get('doc') ||
                  YAHOO.util.Dom.get('...
if(currentWidth > 950){
  container.id = 'doc2';
  if(sidebar){
    container.className = sidebar === 'left'
             ...
if(currentWidth < 600){
        container.id = 'doc3';
        container.className = '';
      }
    };
    switchGrid();
...
What about monitoring the
   size of an element?
position:fixed is sexy!
It can however also render
your site impossible to use.
var YD = YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(toggleMenu);
YAHOO.util.Event.on(window,'resize',function(){
  toggle...
The DOM stepchild: Region
Using Region I can find out the
  dimensions of an element.
I can also find the region that
 is big enough to include two
regions, or the one that is the
    intersection of the two.
region example
YAHOO.util.Event.onDOMReady(function(){
  var YD = YAHOO.util.Dom;
  var r1 = YD.getRegion('region-one');
  var r2 = YD.ge...
var union = document.createElement('div');
  document.body.appendChild(union);
  YD.setStyle(union,'position','absolute');...
This gives me full control to
     avoid any overlap!
What about things the
browser does not tell me?
Wouldn’t it be cool to find out
 when the font is resized?
http://alistapart.com/articles/fontresizing
You can detect the font size in
       several ways:
Include an element with a
known size in ems and read its
     offsetHeight and
offsetWidth in an interval...
...or use an iframe with em
sizing off-screen and subscribe
        to its resize event.
Or use the YUI container
module anywhere on your
         page... :)
YAHOO.namespace('example.container');
YAHOO.util.Event.onDOMReady(function(){
  YAHOO.example.container.module1 = new YAHO...
YAHOO.namespace('example.container');
YAHOO.util.Event.onDOMReady(function(){
  YAHOO.example.container.module1 = new YAHO...
This works with one feature of
YUI event that is very close to
  my heart: Custom Events.
Custom Events allow you to
notify an unknown amount of
   listeners about what is
         happening...
... sending information not
necessarily accessible to them
        when it happens.
Every single YUI component
has a lot of Custom Events you
       can subscribe to.
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'...
Knowing when something
 happens and being able to
react to it is much safer than
    assuming it worked.
Knowledge is power.
This is why YUI comes with a
lot of tools to gain knowledge
   about what is happening
    under the hood of your
        ...
YUI Logger gives you a cross-
  browser console to show
          values.
Death to alert()!
All YUI components come as a
   debug version which log
everything that is going on to
          the logger.
You can even include the
 logger on the fly with a
     bookmarklet.
http://blog.rajatpandit.com/sandbox/yuilogger/index.html
If you need even more
control, there is the YUI
        profiler.
 http://developer.yahoo.com/yui/profiler/
And the YUI test framework
for test driven development.
   http://developer.yahoo.com/yui/yuitest/
On a code level, YUI comes
   out-of-the-box with
      namespacing.
Which – if used correctly –
keeps large amounts of code
readable and maintainable.
YAHOO.lang also comes with a
 lot of validation methods to
 ensure things are what they
              are.
So how is YUI good for
professional and easy
    development?
Built on agreed standards
Separated into modules
each dealing with one task
Constant reporting of what
is going on
Own Deb...
Here’s another small thing I
     prepared earlier:
Using Event and Dom I can
 control the visible part:
function move(e){
   y = YAHOO.util.Event.getXY(e);
   if(y[1] > size){
     render(y);
   }
};
function render(y){
   var...
http://yuiblog.com/blog/2008/09/30/reading-blinds/
What does the future hold?
YUI3
http://developer.yahoo.com/yui/3/
Include on demand
Multiple sandboxed
instances in a page
Modularity on CSS level (per
element reset)
Every event is a cust...
THANKS!


                 Christian Heilmann

 http://wait-till-i.com | http://scriptingenabled.org

            http://t...
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
var union = document.createElement('div'); document.body.appendChild(union);
Nächste SlideShare
Wird geladen in …5
×

var union = document.createElement('div'); document.body.appendChild(union); Introducing YUI

10.178 Aufrufe

Veröffentlicht am

var union = document.createElement('div');
document.body.appendChild(union);
YD.setStyle(union,'position','absolute');
YD.setStyle(union,'background','#000');
YD.setStyle(union,'opacity',.5);
YD.setStyle(union,'width',u.right-u.left + 'px');
YD.setStyle(union,'height',u.bottom-u.top + 'px');
YD.setStyle(union,'z-index',90);
YD.setXY(union,u);
});

Veröffentlicht in: Bildung, Technologie
  • Als Erste(r) kommentieren

×