Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Professional Web Development

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

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}

    Als Erste(r) kommentieren

    Loggen Sie sich ein, um Kommentare anzuzeigen.

  • weijing329

    Nov. 17, 2008
  • TopGeekChina

    Dec. 7, 2010
  • webinn

    Jan. 15, 2012
  • baishuiz

    Dec. 13, 2013

Aufrufe

Aufrufe insgesamt

2.482

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

438

Befehle

Downloads

56

Geteilt

0

Kommentare

0

Likes

4

×