Recomendados
Mais conteúdo relacionado
Semelhante a YUI 介紹 @YZU
Semelhante a YUI 介紹 @YZU (20)
Mais de Joseph Chiang
Mais de Joseph Chiang (20)
YUI 介紹 @YZU
- 1. 使用 YUI 函式庫 2008/11/20 @ YZU 快速建立 Web 2.0 程式 講者：josephj
- 2. Hi! 我是 Joseph 跑步環島 2008.5.18，屏東楓港 •在 Y 工作 3 年 •前 2.5 年是前端工程師 •今年 5 月當傳教士 -開發者與 Y 的橋樑 ✓社群合作 ✓技術推廣 ✓教育訓練 YDN Evangelist @josephj6802 http://josephj.com josephj6802@gmail.com
- 4. 相關連結 • http://farm4.static.flickr.com/ 3251/3017901989_9252512e77_o.jpg • http://josephj.com/entry.php?id=184 • http://josephj.com/entry.php?id=186
- 7. 什麼是前端工程師？ • 撰寫 HTML / CSS / JavaScript • 告訴瀏覽器該怎麼做 • 所有「檢視原始碼」看得到的都 是處理的範圍
- 9. no.
- 10. DataTransport data:custom,xml, json behavior:js mixed:newxhtml (X)HTML DOM JavaScript Specification Implementation Bugs [ Theory / Practice ] BOM API DOM API CSS server Macintosh Safari Firefox Opera Windows OperaIE5, 6, 7 Firefox Linux, Unix, Mobile 10,000+ UAs
- 11. DataTransport data:custom,xml, json behavior:js mixed:newxhtml, (X)HTML DOM JavaScript Specification Implementation Defects [ Theory / Practice ] BOM API DOM API CSS server Macintosh Safari Firefox Opera Windows OperaIE5, 6, 7 Firefox Linux, Unix, Mobile 10,000+ UAs knowledge areas: 7 dimensions: x 4 platforms: x 3 browsers per platform: x 4 rendering modes: x 2 =672
- 12. usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability
- 13. from Lifted ©2007 Pixar Animation Studios
- 14. 所以我們建立了...
- 16. 在瀏覽器上建立使用者 UI（控制項） Def. But.Button Label Menu Label Text Field Label Label Text Area click me 傳統內建 UI 使用 YUI 所建立的 UI
- 17. YUI 有著最好的瀏覽器支援度
- 20. Button + Menu + Container + ... = RTE Editor
- 21. 結構複雜、但使用起來簡單愉快
- 22. 且保證在每個主流瀏覽器都支援
- 25. YUI 核心 • 取得 HTML 物件參考 ex. document.getElementById() 可改寫為 YUD.get() • 綁事件 ex. 將標籤內的 onClick 改寫 YUE.on(‘click’, doSomething) 事件處理與 DOM 的存取是所有 JS 函式庫的核心
- 26. YUI 函式集 YAHOO.util.* : 好用的 Web 2.0 功能 • AJAX 相關 一般 AJAX 功能、跨網域存取、JSON 解析、資料來源處理、歷史紀錄 • 炫麗技巧 拖拉、動畫、縮放區塊大小 • 實用功能 Cookie 存取、Selector 存取、物件導向
- 27. Browser History Manager 解決 AJAX 沒有上一頁、下一頁的問題 http://tw.knowledge.yahoo.com/my/my_trace?show=AC00668153
- 28. 點選下方的資料會更新 更新內容離頂端過遠， 用傳統作法會讓使用者不便 且個人資料較少 SEO 的問題 因此決定採用 AJAX 一般的 AJAX 程式網址不會更新
- 30. YUI 控制項 • 自動完成 • 按鈕 • 日曆 • 圖表 • 顏色選取 • 視窗 • 資料表格 • 截圖 • 版面管理員 • 選單 • HTML 編輯器 • Slider • 頁籤組 • 樹狀瀏覽 • 上傳 YAHOO.widget.* : 功能強大的且易擴充的控制項
- 31. 在瀏覽器上建立使用者 UI（控制項） Def. But.Button Label Menu Label Text Field Label Label Text Area click me 傳統內建 UI 使用 YUI 所建立的 UI
- 32. •效能檢測、Test Case、Log 偵錯 •CSS / JavaScript 的壓縮工具 •提供 CDN 讓開發者直接使用 YAHOO.widget.* : 讓你的開發及產出更順暢 YUI 開發工具集
- 33. YUI Compressor
- 37. • Reset 將所有標籤預設樣式歸零 • Fonts 相對字型大小、可被縮放 • Grids 快速製作彈性 DIVs+CSS 版面 YUI CSS 基礎
- 39. 側邊欄寬度為 240px 平均分配 50%, 50% 版面寬度 950px
- 42. YUI 有哪些優點？
- 45. Problem Summary The user needs to enter an item into a text box which could ambiguous or hard to remember and therefore has the potential to be mis-typed. EXAMPLE: Auto completion of contacts in Yahoo! Mail Beta Use When The suggestions can be pulled from a manageable set of data. The input item can be entered in multiple ways. The input item can be matched with a specific data item in the system. Speed and accuracy of entry is an important goal. The total number of items would be too large or inconvenient for displaying in a standard drop down box. Solution Layout Use a standard text box for input. Label the text box to match the user's expection of what field will be searched against. Interaction As the user types, display a list of suggested items that most closely match what the user has typed. Continue to narrow or broaden the list of suggested items based on the user's input. Display the suggested items list in a drop down box directly underneath the text box. The suggested items list may be based on the complete set of data or more narrowly based on other criteria such as each item's frequency of use. When available, show multiple fields of information for each suggested item. In the Yahoo! Mail example above, two fields are presented: the contact's full name and the contact's email address. Highlight the closest matching item within the suggested items list. Show the matched item as first in the list. Highlight the background of the matched item. When multiple fields are shown for each suggested item the match may occur with the initial characters of any of the fields presented. For each suggested item in the suggest items list show the characters that exactly match the user's input. When multiple fields are shown in a suggested item the matching characters may appear in any of the fields presented. In the example below, the characters 'Yu' have been typed by the user. The match is on three items. Notice that the first item matched on the contact's email address '<yuiblogger.com>' whereas the second and third items are matched on the contact's name (e.g., 'Yusef Jones'.) Allow the user to delete a character of input and display the previous suggested items list. Allow the user to complete the input field by pressing the Tab key or Enter; key. The current matched item in the suggested items list will be accepted as the value for the input field. Allow the user to optionally highlight an item of their choice from the suggested item list with the mouse or with the up and down arrow keys. Allow the user to cancel the suggested items list by pressing the Esc key. The drop down list will close. Subsequently pressing the Tab key or Enter key will accept the value from the input field. However, typing more characters after hitting the Esc key will restart the auto completion behavior displaying the suggested items list. If multiple input items are allowed in a single input field, allow the user to use the Comma key to separate each input item. Pressing the comma key will complete an individual item match. The auto complete behavior restarts when the user begins typing characters for the next input item. Rationale Reducing the number of keystrokes allows for faster user input. Showing additional formatting information in the suggested items list (like the email address in the example above) removes ambiguity. Continual feedback helps the user narrow in on the correct choice. Accessibility Label the text box to match the user's expection of what field will be searched against. Allow the user to highlight a desired match either using a mouse or navigating to it with the up or down arrow keys. Allow the user to complete the form by pressing the Tab or Enter keys. Allow the user to cancel suggestions by pressing the Esc key. Allow the input field to receive keyboard focus by pressing the Tab key. Once the edit field is in focus make sure that the focus stays in the edit field during autocomplete. Do not send any page refreshes when updating the field (page refreshes will signal assistive technology to start reading the page again.) The insertion cursor should move as the left/right arrow keys are pressed in the text field. QUICK JUMP Solution Rationale Accessibility RELATED PATTERNS Calendar Picker AS USED ON YAHOO! Yahoo! Mail Beta Yahoo! Maps Beta Yahoo! My Web 2 BLOG Blog Article Y! UI CODE EXAMPLES Auto Complete Component Y! Search (JSON) Y! Search (XML) In-Memory (array) In-Memory (function) Flickr (XML) Flat data Playground Show with revisions This work is licensed under a Creative Commons Attribution 2.5 License. Design Pattern Library Auto Complete Copyright © 2005-2007 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service - Copyright Policy - Job Openings Developer Network Home Help Site Search Yahoo! Developer Network > Design Pattern Library > Auto Complete
- 46. 超完整的範例 目前在 YUI 官網上超過 300 個範例
- 48. 各類文件把你教到會
- 49. Yahoo! User Interface Blog In the Wild for November 30th Nate Koechley 11/30/07 19:45:25 Implementation Focus: TripIt Eric Miraglia 11/14/07 11:22:42 Caridy Patiño Mayea’s Bubbling Library Updated Eric Miraglia 11/07/07 09:23:45 Implementation Focus: Nestoria Eric Miraglia 11/06/07 17:58:27 Using the Yahoo Global Object to Manage Object Inheritance and Composition: Four New YUI Examples Eric Miraglia 11/06/07 17:54:03 YUI Forum on Yahoo! Groups Using DataTable with Drag and Drop guiltyspark05 12/03/07 21:52:02 [more videos ]YUI Theater Nate Koechley — "The YUI CSS Foundation" Senior YUI engineer Nate Koechley guides you through the YUI CSS foundation in this October 2007 tech talk. Using YUI: FAQ Getting Started Licensing Articles Cheat Sheets Support & Community Filing Bugs & Feature Requests Searchable API Documentation: API docs are availabe for every YUI component. You can search the API documentation with instant filtering on the main API page. The YUI Compressor: The YUI Compressor is a build-process component that helps you minify your JavaScript and CSS. Documentation and download information are available here. YUI Core: The YAHOO Global Object (base requirement for all YUI components) DOM Collection (convenience methods for DOM interactions) Event Utility (event normalization and tools) YUI Library Utilities: Animation Utility Browser History Manager Connection Manager (for XHR/Ajax) DataSource Utility Drag and Drop Utility Element Utility ImageLoader Utility [experimental] The YUILoader Utility The YUI Test YUI Library Controls/Widgets: AutoComplete Button Control Calendar Color Picker Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog) DataTable Logger Menu Rich Text Editor Slider TabView TreeView YUI Library CSS Tools: CSS Reset (neutralizes browser CSS styles) CSS Base (applies consistent style foundation for common elements) CSS Fonts The Yahoo! User Interface Library (YUI) The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses. Download YUI version 2.3.1, including full API documentation and more than 200 functional examples from Sourceforge. The library's developers blog at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups. Yahoo! UI Library Home YUIBlog YUI Discussion Forum YUI on Sourceforge API Documentation YUI Examples Gallery Powered by YUI YUI Theater YUI License YUI Articles YUI FAQ Graded Browser Support Skinning YUI Bug Reports/Feature Requests Serving YUI Files from Yahoo! Security Best Practices YUI Components Animation AutoComplete Browser History Manager Button Calendar Color Picker Connection Manager Container DataSource DataTable Dom Drag & Drop Element Event ImageLoader [experimental] Logger Menu Rich Text Editor Slider TabView TreeView Yahoo Global Object YUI Loader YUI Test Reset CSS Base CSS Fonts CSS Grids CSS
- 52. 每個元件都提供了三種版本
- 53. 有完整註解的版本
- 54. -debug 偵錯版
- 55. -min 最小化版
- 56. 版本改進的歷程說明
- 57. 完整 API 文件
- 59. YUI 劇場 共計約 50 個小時 講者由YUI 成員或專家所組成 developer.yahoo.com/yui/theater
- 60. YUI 的書
- 61. 雜誌評比名列前茅
- 64. 客製化容易
- 65. 密碼強度顯示器
- 66. 跟桌面一樣的選取方式
- 67. 用YUI 來製作簡報系統 （為去年的 OSDC 所做的）
- 68. 翻頁（Carousel）模組
- 69. 手風琴模組
- 70. 用於「知識+名片」的手風琴模組
- 71. 用YUI 做的俄羅斯方塊
- 72. 提供專業視覺設計師的樣式
- 75. 有哪些網站使用YUI？
- 77. Q & A
- 78. 問：YUI 是否會收費？
- 79. YUI 是基於最鬆散的 BSD License 條款授權 你可以自由引用、修改、甚至放在商業軟體販售
- 80. 問：為什麼 Open Source ?
- 81. • Fasten Improvement 回應使用者的需求 • Fun 與使用者互動 • Innovation 有更多創新的應用 • Recruiting 培養前端工程師 • 也沒辦法不開放，檢視原始碼就看光了 • 現在你可以簽約成為 YUI Contributor
- 83. • 純 JavaScript 函式庫 • 最齊全的文件 • 不改變 JavaScript 原本的結構 • 不污染、違反網頁標準化的精神 • 客製化最容易 • 經過完整的 QA 流程測試 • 在標準瀏覽器上皆能正常運作
- 85. Aptana
- 87. no.
- 88. • 無法滿足所有族群需求 • ASP, PHP, RoR, Python, JAVA... • 必需考慮後續維護的問題 • 但有 3rd Party 自行研發
- 89. YUI 實例演練
- 91. 1. HTML 模組 在Yahoo! 每一頁都是由許多的模組所構成
- 93. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> 模組的結構 一個 ID 代表一個模組 不能重複 .hd, .bd, .ft 分別代表模組的 header、body、footer
- 95. ＃ykpsb •ykp 為知識+ 的 prefix •sb 為 search box 的縮寫 •檔案：inc/search_box.php
- 96. <div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div class=”extra”> ... </div> </div> </div> form .extra [HTML] <style> #ykpsb { margin-bottom:10px; } #ykpsb form { float:left; } #ykpsb .extra { float:right; } </style> [CSS] 因每個模組有 id，所以 CSS 可以寫得很 namespace 好處就是很安全，不同模組不會互相干擾
- 97. 練習 1：HTML 模組 （3 Mins） http://josephj.com/training/yzu/html-module.html 1. 替此文章模組取個適合的 id 2. 加上 hd, bd, ft 的 class 3. 利用前頁的方法設定 CSS color:#369; background:#ffe; font:bold 16px;
- 98. 2. YUI Grids http://developer.yahoo.com/yui/grids/builder/ 快速 DIV + CSS 版面產生器
- 100. YUI AJAX YUI 用來做 AJAX 叫做 Connection Manager 使用者瀏覽器 A 網站 1. 發出 Request A 網站 伺服器 2. 伺服器處理 Request 3. 伺服器回傳 4. 整份網頁重新整理 傳統流程：
- 101. 使用者瀏覽器 A 網站 1. 用 JavaScript 發出 Request A 網站 伺服器 2. 伺服器處理 Request 3. 伺服器回傳 4. 只有小部分更新 AJAX流程： YUI AJAX
- 103. 4. YUI Get Utility http://josephj.com/training/yzu/yui-get.html 存取跨網域的資料
- 108. 練習 5：YUI 選單 http://josephj.com/training/yzu/yui-menu.html 1.請以 new YAHOO.widget.MenuBar([模組id]); 新增一個 YUI 選單物件 2.執行這個物件的 render() 方法
- 109. 練習 5：YUI 選單 http://josephj.com/training/yzu/yui-menu.html autosubmenudisplay (true 或 false) 是否自動顯示子選單 hidedelay （毫秒） 滑鼠移開 n 毫秒後才隱藏 lazyload (true 或 false) 是否滑過去時才建立子選單 常用屬性：
- 110. 6. YUI 按鈕 輕鬆做出互動性豐富的按鈕 UI
- 111. YUI Button 一個按鈕該有的互動效果， YUI Button 都提供 更提供各種形式的按鈕 HTML 預設的按鈕醜又缺乏互動
- 112. 練習 6：YUI 按鈕 http://josephj.com/training/yzu/yui-button.html 1.請以 new YAHOO.widget.Button([連 結 id]); 將連結轉換為按鈕
- 113. 7. YUI 視窗 Web 2.0 的「開新視窗」
- 114. YUI Container 家族 YAHOO.widget.Panel YAHOO.widget.Panel YAHOO.widget.Dialog YAHOO.widget.SimpleDialog
- 115. 練習 7：YUI 視窗 http://josephj.com/training/yzu/yui-panel.html 1. 請以 var oPanel = new YAHOO.widget.Panel([模組 id], [屬性]); 將 #panel 模組轉換為視窗（屬性設定請看下一頁） 2. oPanel.render(document.body)： 將模組 append 到最外層 3. oButton.addListener(‘click’, onButtonClick) onButtonClick 函式：oPanel.show();
- 116. 練習 7：YUI 視窗 http://josephj.com/training/yzu/yui-panel.html close 是否要有關閉的按鈕 fixedcenter 是否要置中對齊 modal 是否為獨佔模式 underlay shadow’,‘matte’ visible 預設是否顯示 width 視窗的寬度 {屬性1 : 屬性值 1, 屬性 2 : 屬性值 2}
- 117. Questions?