Your SlideShare is downloading. ×

Professional Web Development

2,045

Published on

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,045
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
55
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Professional Front-end Engineering josephj 2008.11.17 Yahoo! Course @ http://tw.developer.yahoo.com/course/
  • 2. •YDN •YAP •ITHome •SA@Taipei Open YUI 3.0 •Yahoo! Live
  • 3. Links • http://developer.yahoo.com/r3/ • http://devzone.zend.com/article/2585-Using-YAML-With-PHP- and-PECL • http://farm4.static.flickr.com/ 3251/3017901989_17f1bc4a5e_b.jpg • http://www.sun-line.idv.tw/blog/index.php?load=read&id=521 • http://profiles.yahoo.com/josephj6802 • http://apps.yahoo.com/-MMT5Q550/YahooFullView/index.php • http://www.slideshare.net/josephj/slideshows
  • 4. •YUI Grids • Yahoo! Pipes •
  • 5. YUI Grids Box Model
  • 6. Pipes
  • 7. Web 2.0 Format
  • 8. http://www.flickr.com/photos/tags/twopenhack08
  • 9. http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&lang=en-us&format=atom
  • 10. http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&lang=en-us&format=php
  • 11. <script src=” http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&format=json&jsoncallback=getFlickrData”></script>
  • 12. http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&format=lol
  • 13. API Feed Schema
  • 14. Service ...
  • 15. JavaScript HTML ...
  • 16. Schema Code
  • 17. Pipes Remix Feed
  • 18. Yahoo! F2E
  • 19. 1. HTML Yahoo!
  • 20. <div id=”nav”> <div class=”hd”> <h2> </h2> </div> ID <div class=”bd”> .hd, .bd, .ft <p> </p> header body footer </div> <div class=”ft”> <a href=”...”> ... </a> </div> </div>
  • 21. yhtw_masthead ykpmt ykpsb ykpimt ykpadv ykpimqa ykpimr ykpug ykpiht ykpiht
  • 22. ykpsb • ykp + prefix • sb search box • inc/search_box.php
  • 23. id CSS namespace form .extra [HTML] [CSS] <style> <div id=”ykpsb”> #ykpsb { <div class=”bd clearfix”> margin-bottom:10px; <form ...> } ... #ykpsb form { </form> float:left; <div class=”extra”> } ... #ykpsb .extra { </div> float:right; </div> } </div> </style>
  • 24. 1 HTML 3 Mins http://josephj.com/training/ncu/html-module.html 1. id 2. hd, bd, ft class 3. CSS font:bold 16px; background:#ffe; color:#369;
  • 25. 2. CSS float
  • 26. <table> <table border=”1”> <tr> <td align=”left”> </td> <td align=”right”> </td> </tr> </table>
  • 27. CSS float <div id=”masthead” style=”border:solid 1px #000”> <span style=”float:left”> </span> <span style=”float:right”> </span> </div>
  • 28. float border
  • 29. IE zoom:1 <div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> </span> <span style=”float:right”> </span> </div>
  • 30. <div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> </span> <span style=”float:right”> </span> </div> <style> /* clear:both */ #masthead:after { content:’’; display:block; clear:both; } </style>
  • 31. 2 CSS 3 Mins http://josephj.com/training/ncu/float.html 1. 2. YUI 3. border 4. float border:solid 5px #ccc; font:bold 197%;
  • 32. 3. CSS <img> CSS background User
  • 33. Yahoo! CSS
  • 34. <img> background-image
  • 35. background:[ ] [url( )] [x, y ] [ ]; background:#369 url(ico_yui.gif) left top repeat-x; 0 100% repeat-y 0 -12px no-repeat background-color:#369; background-image:url(ico_yui.gif); background-position:left top; background-repeat:repeat-x;
  • 36. 3 CSS 3 Mins http://josephj.com/training/ncu/background.html 1. http://josephj.com/training/ncu/bg_nav.png
  • 37. 4. CSS
  • 38. • position • position:static; • position:absolute; • position:relative; • position:fixed; • top, right, bottom, left • 5px position:relative; top:5px; • position:absolute; right:0; left:0; • IE6 position:fixed;bottom:0;
  • 39. <div/> <div/> <div/> <div/> position:static;
  • 40. <div/> <div/> <div/> <div style=”position:absolute; bottom:0;right:0;”> position:absolute;
  • 41. <div/> <div style=”position:relative;” /> <div style=”position:absolute; bottom:0;right:0;”> <div/> position:relative; position:absolute;
  • 42. 4 CSS http://josephj.com/training/ncu/position.html 1. li position:relative; 2. img position:absolute; top, right
  • 43. 5. CSS Hack
  • 44. IE 6,7 • • background:blue; • IE 6 7 * CSS Rule • *background:red; • IE 6 _ CSS Rule IE 7 • _background:green;
  • 45. #article .bd { background:blue; FF, IE 6, IE 7, Safari... *background:green; IE 6, IE 7 _background:red; IE 6 } IE 6, IE7, Firefox
  • 46. 5 CSS Hack http://josephj.com/training/ncu/css-hack.html 1. #article .bd FF pink, IE7 green, IE6 red
  • 47. 6. CSS
  • 48. 18px 18px background:100% 0; background:100% -18px; 72px background:0 -36px; background:0 -54px; CSS Sprites http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
  • 49. • http://josephj.com/training/ncu/round-corner.html • http://josephj.com/training/ncu/round-corner-sample.html • http://josephj.com/training/ncu/round-corner-sample-2.html • http://josephj.com/training/ncu/round-corner-sample-3.html
  • 50. 7. YUI
  • 51. 7 YUI http://josephj.com/training/ncu/yui-menu.html 1. new YAHOO.widget.MenuBar([ id]); YUI 2. render()
  • 52. 7 YUI http://josephj.com/training/ncu/yui-menu.html (true false) autosubmenudisplay hidedelay n (true false) lazyload
  • 53. 8. YUI UI
  • 54. YUI Button HTML YUI Button
  • 55. 8 YUI http://josephj.com/training/ncu/yui-button.html 1. new YAHOO.widget.Button([ id]);
  • 56. 6. YUI Web 2.0
  • 57. YUI Container YAHOO.widget.Dialog YAHOO.widget.Panel YAHOO.widget.Panel YAHOO.widget.SimpleDialog
  • 58. 9 YUI http://josephj.com/training/ncu/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();
  • 59. 9 YUI http://josephj.com/training/ncu/yui-panel.html close fixedcenter modal underlay shadow’, ‘matte’ visible width { 1: 1, 2: 2}

×