Professional
Front-end Engineering
                        josephj



                2008.11.17
     Yahoo! Course @
    ...
•YDN
•YAP
•ITHome
•SA@Taipei     Open   YUI 3.0
•Yahoo! Live
Links
•   http://developer.yahoo.com/r3/

•   http://devzone.zend.com/article/2585-Using-YAML-With-PHP-
    and-PECL

•   ...
•YUI Grids
• Yahoo! Pipes
•
YUI Grids
       Box Model
Pipes
Web 2.0
          Format
http://www.flickr.com/photos/tags/twopenhack08
http://api.flickr.com/services/feeds/photos_public.gne?
   tags=twopenhack08&lang=en-us&format=atom
http://api.flickr.com/services/feeds/photos_public.gne?
    tags=twopenhack08&lang=en-us&format=php
<script src=” http://api.flickr.com/services/feeds/photos_public.gne?
         tags=twopenhack08&format=json&jsoncallback=g...
http://api.flickr.com/services/feeds/photos_public.gne?
            tags=twopenhack08&format=lol
API   Feed
Schema
Service   ...
JavaScript   HTML ...
Schema
 Code
Pipes   Remix Feed
Yahoo!   F2E
1. HTML
 Yahoo!
<div id=”nav”>
         <div class=”hd”>
             <h2>    </h2>
         </div>
ID       <div class=”bd”>         .hd,...
yhtw_masthead




ykpmt

ykpsb


ykpimt                   ykpadv




ykpimqa         ykpimr




                         y...
ykpsb


• ykp      +    prefix
• sb    search box
•       inc/search_box.php
id          CSS              namespace
form                               .extra



[HTML]                           [CSS]...
1        HTML                            3 Mins
http://josephj.com/training/ncu/html-module.html

           1.           ...
2. CSS
  float
<table>




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




<div id=”masthead” style=”border:solid 1px #000”>
    <span style=”float:left”>

    </span>
    <spa...
float




border
IE
                            zoom:1

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

   </span>
   <span style=”float:r...
2       CSS                  3 Mins
        http://josephj.com/training/ncu/float.html

                     1.
           ...
3. CSS
 <img>   CSS background   User
Yahoo!   CSS
<img>


 background-image
background:[        ]
                    [url(                 )]
                    [x, y      ]
                    [ ...
3     CSS                3 Mins
http://josephj.com/training/ncu/background.html


   1.
        http://josephj.com/trainin...
4. CSS
• position
 • position:static;
 • position:absolute;
 • position:relative;
 • position:fixed;
• top, right, bottom, left
 •...
<div/>




<div/>


 <div/>




<div/>




          position:static;
<div/>




<div/>



<div/>


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




         position:a...
<div/>




<div style=”position:relative;” />
                  <div style=”position:absolute;
                  bottom:0;...
4     CSS
http://josephj.com/training/ncu/position.html

 1.    li        position:relative;
 2.    img           position...
5. CSS Hack
IE 6,7

•
 • background:blue;
• IE 6 7         *       CSS Rule
 • *background:red;
• IE 6     _       CSS Rule
 IE 7
• _b...
#article .bd {
  background:blue;        FF, IE 6, IE 7, Safari...


     *background:green;          IE 6, IE 7

     _ba...
5    CSS Hack
http://josephj.com/training/ncu/css-hack.html


  1.      #article .bd  FF          pink,
       IE7   green...
6. CSS
18px


   18px                                                       background:100% 0;




                              ...
•   http://josephj.com/training/ncu/round-corner.html



•   http://josephj.com/training/ncu/round-corner-sample.html



•...
7. YUI
7    YUI
http://josephj.com/training/ncu/yui-menu.html

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



                          (true   false)
  autosubmenudisplay


 ...
8. YUI
         UI
YUI Button
HTML

            YUI Button
8     YUI
http://josephj.com/training/ncu/yui-button.html

   1.     new YAHOO.widget.Button([
        id]);
6. YUI
  Web 2.0
YUI Container
                       YAHOO.widget.Dialog

YAHOO.widget.Panel




YAHOO.widget.Panel

                     ...
9        YUI
http://josephj.com/training/ncu/yui-panel.html
  1.     var oPanel = new YAHOO.widget.Panel([       id], [   ...
9        YUI
http://josephj.com/training/ncu/yui-panel.html

          close
     fixedcenter
          modal
         unde...
Professional Web Development
Professional Web Development
Professional Web Development
Professional Web Development
Upcoming SlideShare
Loading in …5
×

Professional Web Development

2,182 views
2,145 views

Published on

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,182
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
55
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}

×