SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
YUI
Yahoo! User Interface Library




                   A presentation by
contents


   I.  what is YUI?
   II.  what does it all mean?
   III.  what does it look like?
   IV.  who uses YUI?
   V.  want to get some?




                        A presentation by
what is YUI?


   a collection of JavaScript and CSS Resources for
      building richly interactive web applications
      using DOM scripting and DHTML and AJAX.
   developed for internal use but now available
     under a BSD (Berkeley Software Distribution) license.
   supported by Firefox 3, Firefox 2, IE 7, IE 6,
     Opera 9.5, Safari 3.1.




                                  A presentation by
what is YUI?


   features of YUI
      6 types of YUI components:

               core
               utilities
               UI controls
               CSS components
               developer tools
               build tools


                                   A presentation by
what does it all mean?


  features of YUI (continued)
      core:
      a set of tools for event management and DOM
      manipulation.
      YAHOO! Global Object – contains language utilities and
      other infrastructure for YUI.
      DOM Collection – simplifies common DOM scripting
      tasks such as positioning and CSS Style Management.
      Event Utility – provides developers easy & safe access
      to browser events such as mouse clicks and key presses.




                                  A presentation by
what does it all mean?


  features of YUI (continued)
     utilities:
     reusable infrastructure libraries that handle things like
     events, Ajax calls, animation, and drag and drop.
     • animation                     •  image loader
     • browser history manager • JSON (JavaScript Object Notation)
     • connection manager            • resize
     • data source                   • selector
     • drag and drop                 • YUI loader




                                       A presentation by
what does it all mean?


  features of YUI (continued)
     UI controls:
     • auto-complete     • image cropper

     • button            • layout manager menu
     • calendar          • rich text editor
     • charts            • slider
     • color picker      • tab view
     • container         • tree view
     • data table        • uploaded



                           A presentation by
what does it all mean?


  features of YUI (continued)
     developer tools:
     logger – read or write log messages with a single line of
     code!
     profiler – non-visual code profiler that allows you to specify
     which parts of your application to profile.
     ProfileViewer – used with Profiler to provide visualizations of
     profiling data in graphical and tabular format.
     YUI Test – create test cases, failure detection, etc. for
     browser-based JavaScript solutions.




                                       A presentation by
what does it look like?


 working examples:
     event utility- http://developer.yahoo.com/yui/examples/event/
     eventsimple.html
     using custom units for an animation-http://
     developer.yahoo.com/yui/examples/animation/units.html
     basic drag and drop- http://developer.yahoo.com/yui/examples/
     dragdrop/dd-basic.html
     animated proxy re-size- http://developer.yahoo.com/yui/examples/
     resize/anim_resize.html

     submit form-http://developer.yahoo.com/yui/examples/button/
     btn_example05.html




                                       A presentation by
who uses YUI?


      http://www.linkedin.com/
      http://www.jetblue.com/
      http://www.target.com/

      http://www.smugmug.com/
      http://www.southwest.com/
      http://images.insuggest.com/
      http://www.dataffect.com/usgs/#
      http://www.tag4you.com/flickr.php




                                  A presentation by
want to get some?




  hello@momentumdesignlab.com



      
 

          
   

      
 

          
   

      










1.866.542.7124




      
   

                            A presentation by

Contenu connexe

Similaire à Yui- Yahoo! User Interface Library

JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
Introduction to YUI - IIT Kharagpur
Introduction to YUI - IIT KharagpurIntroduction to YUI - IIT Kharagpur
Introduction to YUI - IIT KharagpurHarsha Vashisht
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)jeresig
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010Patrick Lauke
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overviewjeresig
 
SmartPhone Design and Delivery
SmartPhone Design and DeliverySmartPhone Design and Delivery
SmartPhone Design and DeliveryJason Diehl
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textToma Velev
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !Joseph Chiang
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewHenry Cogo
 
YUI introduction to build hack interfaces
YUI introduction to build hack interfacesYUI introduction to build hack interfaces
YUI introduction to build hack interfacesChristian Heilmann
 
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator TitaniumMobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator TitaniumJeff Haynie
 

Similaire à Yui- Yahoo! User Interface Library (20)

TPR4
TPR4TPR4
TPR4
 
TPR4
TPR4TPR4
TPR4
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
Introduction to YUI - IIT Kharagpur
Introduction to YUI - IIT KharagpurIntroduction to YUI - IIT Kharagpur
Introduction to YUI - IIT Kharagpur
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
 
Silverlight
SilverlightSilverlight
Silverlight
 
FormFactory - Building Interactive Web Applications
FormFactory - Building Interactive Web ApplicationsFormFactory - Building Interactive Web Applications
FormFactory - Building Interactive Web Applications
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
SmartPhone Design and Delivery
SmartPhone Design and DeliverySmartPhone Design and Delivery
SmartPhone Design and Delivery
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - text
 
Mashup Y! widget
Mashup Y! widgetMashup Y! widget
Mashup Y! widget
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
 
Technical Introduction to YDN
Technical Introduction to YDNTechnical Introduction to YDN
Technical Introduction to YDN
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools Review
 
YUI introduction to build hack interfaces
YUI introduction to build hack interfacesYUI introduction to build hack interfaces
YUI introduction to build hack interfaces
 
Mobile for the rest of us
Mobile for the rest of usMobile for the rest of us
Mobile for the rest of us
 
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator TitaniumMobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
 

Plus de Momentum Design Lab (20)

Add to Trip - EyeForTravel Presentation
Add to Trip - EyeForTravel PresentationAdd to Trip - EyeForTravel Presentation
Add to Trip - EyeForTravel Presentation
 
Sencha
SenchaSencha
Sencha
 
jQuery
jQueryjQuery
jQuery
 
Extjs4
Extjs4Extjs4
Extjs4
 
Appcellerator
AppcelleratorAppcellerator
Appcellerator
 
Adobe Air 2.6
Adobe Air 2.6Adobe Air 2.6
Adobe Air 2.6
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Component Art
Component ArtComponent Art
Component Art
 
Infragistics
InfragisticsInfragistics
Infragistics
 
Telerik
TelerikTelerik
Telerik
 
Jquery
JqueryJquery
Jquery
 
Extjs
ExtjsExtjs
Extjs
 
GWT- Google Web Toolkit
GWT- Google Web ToolkitGWT- Google Web Toolkit
GWT- Google Web Toolkit
 
Django
DjangoDjango
Django
 
PHP
PHPPHP
PHP
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
C#
C#C#
C#
 
ASP.NET
ASP.NETASP.NET
ASP.NET
 
Drupal
DrupalDrupal
Drupal
 
Adobe Flex
Adobe FlexAdobe Flex
Adobe Flex
 

Dernier

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Dernier (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

Yui- Yahoo! User Interface Library

  • 1. YUI Yahoo! User Interface Library A presentation by
  • 2. contents I.  what is YUI? II.  what does it all mean? III.  what does it look like? IV.  who uses YUI? V.  want to get some? A presentation by
  • 3. what is YUI? a collection of JavaScript and CSS Resources for building richly interactive web applications using DOM scripting and DHTML and AJAX. developed for internal use but now available under a BSD (Berkeley Software Distribution) license. supported by Firefox 3, Firefox 2, IE 7, IE 6, Opera 9.5, Safari 3.1. A presentation by
  • 4. what is YUI? features of YUI 6 types of YUI components: core utilities UI controls CSS components developer tools build tools A presentation by
  • 5. what does it all mean? features of YUI (continued) core: a set of tools for event management and DOM manipulation. YAHOO! Global Object – contains language utilities and other infrastructure for YUI. DOM Collection – simplifies common DOM scripting tasks such as positioning and CSS Style Management. Event Utility – provides developers easy & safe access to browser events such as mouse clicks and key presses. A presentation by
  • 6. what does it all mean? features of YUI (continued) utilities: reusable infrastructure libraries that handle things like events, Ajax calls, animation, and drag and drop. • animation •  image loader • browser history manager • JSON (JavaScript Object Notation) • connection manager • resize • data source • selector • drag and drop • YUI loader A presentation by
  • 7. what does it all mean? features of YUI (continued) UI controls: • auto-complete • image cropper • button • layout manager menu • calendar • rich text editor • charts • slider • color picker • tab view • container • tree view • data table • uploaded A presentation by
  • 8. what does it all mean? features of YUI (continued) developer tools: logger – read or write log messages with a single line of code! profiler – non-visual code profiler that allows you to specify which parts of your application to profile. ProfileViewer – used with Profiler to provide visualizations of profiling data in graphical and tabular format. YUI Test – create test cases, failure detection, etc. for browser-based JavaScript solutions. A presentation by
  • 9. what does it look like? working examples: event utility- http://developer.yahoo.com/yui/examples/event/ eventsimple.html using custom units for an animation-http:// developer.yahoo.com/yui/examples/animation/units.html basic drag and drop- http://developer.yahoo.com/yui/examples/ dragdrop/dd-basic.html animated proxy re-size- http://developer.yahoo.com/yui/examples/ resize/anim_resize.html submit form-http://developer.yahoo.com/yui/examples/button/ btn_example05.html A presentation by
  • 10. who uses YUI? http://www.linkedin.com/ http://www.jetblue.com/ http://www.target.com/ http://www.smugmug.com/ http://www.southwest.com/ http://images.insuggest.com/ http://www.dataffect.com/usgs/# http://www.tag4you.com/flickr.php A presentation by
  • 11. want to get some? hello@momentumdesignlab.com


 
 

 
 
 
 

 
 
 










1.866.542.7124
 
 
 A presentation by