Professional Web Development

2,251 views

Published on

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,251
On SlideShare
0
From Embeds
0
Number of Embeds
438
Actions
Shares
0
Downloads
56
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Professional Web Development

  1. 1. Professional Front-end Engineering josephj 2008.11.17 Yahoo! Course @ http://tw.developer.yahoo.com/course/
  2. 2. •YDN •YAP •ITHome •SA@Taipei Open YUI 3.0 •Yahoo! Live
  3. 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. 4. •YUI Grids • Yahoo! Pipes •
  5. 5. YUI Grids Box Model
  6. 6. Pipes
  7. 7. Web 2.0 Format
  8. 8. http://www.flickr.com/photos/tags/twopenhack08
  9. 9. http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&lang=en-us&format=atom
  10. 10. http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&lang=en-us&format=php
  11. 11. <script src=” http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&format=json&jsoncallback=getFlickrData”></script>
  12. 12. http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&format=lol
  13. 13. API Feed Schema
  14. 14. Service ...
  15. 15. JavaScript HTML ...
  16. 16. Schema Code
  17. 17. Pipes Remix Feed
  18. 18. Yahoo! F2E
  19. 19. 1. HTML Yahoo!
  20. 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. 21. yhtw_masthead ykpmt ykpsb ykpimt ykpadv ykpimqa ykpimr ykpug ykpiht ykpiht
  22. 22. ykpsb • ykp + prefix • sb search box • inc/search_box.php
  23. 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. 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. 25. 2. CSS float
  26. 26. <table> <table border=”1”> <tr> <td align=”left”> </td> <td align=”right”> </td> </tr> </table>
  27. 27. CSS float <div id=”masthead” style=”border:solid 1px #000”> <span style=”float:left”> </span> <span style=”float:right”> </span> </div>
  28. 28. float border
  29. 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. 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. 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. 32. 3. CSS <img> CSS background User
  33. 33. Yahoo! CSS
  34. 34. <img> background-image
  35. 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. 36. 3 CSS 3 Mins http://josephj.com/training/ncu/background.html 1. http://josephj.com/training/ncu/bg_nav.png
  37. 37. 4. CSS
  38. 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. 39. <div/> <div/> <div/> <div/> position:static;
  40. 40. <div/> <div/> <div/> <div style=”position:absolute; bottom:0;right:0;”> position:absolute;
  41. 41. <div/> <div style=”position:relative;” /> <div style=”position:absolute; bottom:0;right:0;”> <div/> position:relative; position:absolute;
  42. 42. 4 CSS http://josephj.com/training/ncu/position.html 1. li position:relative; 2. img position:absolute; top, right
  43. 43. 5. CSS Hack
  44. 44. IE 6,7 • • background:blue; • IE 6 7 * CSS Rule • *background:red; • IE 6 _ CSS Rule IE 7 • _background:green;
  45. 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. 46. 5 CSS Hack http://josephj.com/training/ncu/css-hack.html 1. #article .bd FF pink, IE7 green, IE6 red
  47. 47. 6. CSS
  48. 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. 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. 50. 7. YUI
  51. 51. 7 YUI http://josephj.com/training/ncu/yui-menu.html 1. new YAHOO.widget.MenuBar([ id]); YUI 2. render()
  52. 52. 7 YUI http://josephj.com/training/ncu/yui-menu.html (true false) autosubmenudisplay hidedelay n (true false) lazyload
  53. 53. 8. YUI UI
  54. 54. YUI Button HTML YUI Button
  55. 55. 8 YUI http://josephj.com/training/ncu/yui-button.html 1. new YAHOO.widget.Button([ id]);
  56. 56. 6. YUI Web 2.0
  57. 57. YUI Container YAHOO.widget.Dialog YAHOO.widget.Panel YAHOO.widget.Panel YAHOO.widget.SimpleDialog
  58. 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. 59. 9 YUI http://josephj.com/training/ncu/yui-panel.html close fixedcenter modal underlay shadow’, ‘matte’ visible width { 1: 1, 2: 2}

×