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

14. API Feed
Schema

15. Service ...

16. JavaScript HTML ...

17. Schema
Code

18. Pipes Remix Feed

20. Yahoo! F2E

21. 1. HTML
Yahoo!

23. <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>

24. yhtw_masthead
ykpmt
ykpsb
ykpimt ykpadv
ykpimqa ykpimr
ykpug
ykpiht ykpiht

25. ykpsb
• ykp + prefix
• sb search box
• inc/search_box.php

26. 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>

27. 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;

28. 2. CSS
float

29. <table>
<table border=”1”>
<tr>
<td align=”left”> </td>
<td align=”right”> </td>
</tr>
</table>

30. CSS float
<div id=”masthead” style=”border:solid 1px #000”>
<span style=”float:left”>
</span>
<span style=”float:right”>
</span>
</div>

31. float
border

32. IE
zoom:1
<div id=”masthead” style=”zoom:1;border:solid 1px #000”>
<span style=”float:left”>
</span>
<span style=”float:right”>
</span>
</div>

33. <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>

34. 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%;

35. 3. CSS
<img> CSS background User

36. Yahoo! CSS

37. <img>
background-image

38. 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;

39. 3 CSS 3 Mins
http://josephj.com/training/ncu/background.html
1.
http://josephj.com/training/ncu/bg_nav.png

40. 4. CSS

41. • 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;

42. <div/>
<div/>
<div/>
<div/>
position:static;

43. <div/>
<div/>
<div/>
<div style=”position:absolute;
bottom:0;right:0;”>
position:absolute;

44. <div/>
<div style=”position:relative;” />
<div style=”position:absolute;
bottom:0;right:0;”>
<div/>
position:relative;
position:absolute;

45. 4 CSS
http://josephj.com/training/ncu/position.html
1. li position:relative;
2. img position:absolute;
top, right

46. 5. CSS Hack

47. IE 6,7
•
• background:blue;
• IE 6 7 * CSS Rule
• *background:red;
• IE 6 _ CSS Rule
IE 7
• _background:green;

48. #article .bd {
background:blue; FF, IE 6, IE 7, Safari...
*background:green; IE 6, IE 7
_background:red; IE 6
}
IE 6, IE7, Firefox

49. 5 CSS Hack
http://josephj.com/training/ncu/css-hack.html
1. #article .bd FF pink,
IE7 green, IE6 red

50. 6. CSS

51. 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

53. • 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

54. 7. YUI

55. 7 YUI
http://josephj.com/training/ncu/yui-menu.html
1. new
YAHOO.widget.MenuBar([ id]);
YUI
2. render()

56. 7 YUI
http://josephj.com/training/ncu/yui-menu.html
(true false)
autosubmenudisplay
hidedelay
n
(true false)
lazyload

57. 8. YUI
UI

58. YUI Button
HTML
YUI Button

59. 8 YUI
http://josephj.com/training/ncu/yui-button.html
1. new YAHOO.widget.Button([
id]);

60. 6. YUI
Web 2.0

61. YUI Container
YAHOO.widget.Dialog
YAHOO.widget.Panel
YAHOO.widget.Panel
YAHOO.widget.SimpleDialog

62. 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();

63. 9 YUI
http://josephj.com/training/ncu/yui-panel.html
close
fixedcenter
modal
underlay shadow’, ‘matte’
visible
width
{ 1: 1, 2: 2}