2012 web technology by RGBA group

Transcript

1. 9 2012 ⋧㏧ု⨶᥵⍂ۢݨ &WFO
   8V

2. ⱨگ ‣ ۢݨḑ਒ޔ௡ࢢትۢݨḑ㌢ޔ ‣ ӱவዅ
   
   ൖ
   3(#"
   ݞ㐘㌉ ‣ ᜥፒ
   2
   
   "
   ࡻ᨟⼏፭⸽௡ዅʬϫ
   2
   
   "

3. ƛ &WFO ƛ ⋣㏣⭶⭟ഥ ƛ FWFOEFTJHO
   ༦㉊⭶⭟ ƛ NPCJMF
   ৠ᳜ፇ௫
   5IF
   8BMM

   ƛ ⋍᫙
   3(#"
   ῢ⏪ "#065
   .&

4. ๏ ⋣㏣⭶⭟⑫ፎ ๏ ม
   
   ⵍⵖ⼱
   
   ॆ⑫ፎ ๏ ๖⬋ʱᙖ˯ ๏ ṕխ̙ஂ።ƫᚖ⼞ʱƬ▐⻇㡛 ๏ IUUQSHCBUX

5. 3(#"
   
   ݞ⼵ḕ ⮿ⱟ
   8FC
   %FTJHO Αᴣ
   4$44 㐟◠▒෺᭵ 8FC
   ୗ㕸 38%
   ࢘▒ቕ )J%1*
   ⭺⭣

6. ͸ྰ⮪ だተ⮿ⱟ
   8FC
   %FTJHO

7. 1024 x 768

8. None

9. ᵑഌ

10. Ղᬝ

11. ̩
    
    ஻᨟छῂЦʬϫ⋣⃳ڒ 0,
    ⇄ޢ ʪ൘บՁ㋩⌄ ͹⒀⼱
    3FTQPOTJWF
    %FTJHO
    ޹㡮 བྷ˯࿝ḑ࢘▎Ꮜᕀ⾱⬋ぜΙ˯

12. ݞ㐜ࢢܛ⪚㡳 ✓ ⬙⬰ʵ℻ት⬕ᐩ ✓ ˶ֽ຀೽ ✓ ⭄Ꮅ൷ࢇஂ ✓ ፫Ιխ⼋ऽཪ

13. ᨣͭ⬏だተ⮿ⱟ㡳 ✓ "HJMF
    ✓ ೸⁰㌴⬋ ✓ ፄ৙⭄Ꮅ൷ơፄ৙⪓⏀ ✓ ⭶⭟ᇪӑ෧຀㕸

14. ⋧㏧ʳወ
    ᵑഌ ࿼̩࿝ϰ⬋ἃ⼶

15. ᵕᩬˤʳወʪ₋㗔⨶

16. ⋧㏧ወ
    ⴁ⭤ឮ

17. None
18. None

19. ¡ ၄

20. None
21. None
22. None
23. None

24. 5IF
    .BUSJY
    

25. 5IF
    .BUSJY
    

26. ⋣㏣⭶⭟ዅ ⴁ⭤ឮ ḑቂ᱙

27. ͸ྰ⮪ Αᴣ
    4$44

28. ػᴞ
    $44
    ፕ̍㞬ݞ㐜㡳 ✓ ᜥፒ೷᭱஺᝖ ✓ ᜥፒⱽቆ ✓ ᜥ⻇᝖Ц⭟Ⅼ ✓ ᜥ⻇᝖஺
    GVODUJPO
    ぜ⪯Βᴟ ✓

    ᜥፒታθḑ
    JFIBDL
    ⭄ᜐታᐲ

29. ᨣͭ⬏ᴣ
    4$44㡳 ✓ ፒ೷᭱஺᝖ ✓ ፒⱽቆ ✓ ٩Ц⭟Ⅼ ✓ ٩஺
    NJYJO
    ぜ⪯Βᴟ ✓

    ፒታθḑ
    JFIBDL
    ⭄ᜐታᐲ
    CZ
    DPNQBTT

30. ᄂ⠩Αᴣ
    'JSFBQQ
    ᆿ஼
    4$44 ✓ IUUQGJSFBQQIBOEMJOPDPN ✓ NFOVCBS
    ⒳ዬ⁰෇ ✓ ൎ͹ံ
    4$44
    ⺨᨟
    $44 ✓ ⽞ፒӱ̝
    XFC
    ⭶⭟ณ਒ᴟḑ֤ⓗ

31. .article { font-family: sans-serif; } .article a { color: blue;

    } .article { font-family: sans-serif; a { color: blue; } } ೹᭵ /FTUJOH

32. .content-navigation { border-color: #3bbfce; color: #2b9eab; margin: 8px; } $blue:

    #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); margin: $margin / 2; } ⲁ቉ 7BSJBCMFT

33. @mixin table-base($padding) { th { text-align: center; font-weight: bold; }

    td, th { padding: $padding; } } .table { @include table-base(2px); } .data { @include table-base(10px); } .table th { text-align: center; font-weight: bold; } .table td, .table th { padding: 2px; } .data th { text-align: center; font-weight: bold; } .data td, .data th { padding: 10px; } 4$44
    .JYJOT $44

34. @import "compass"; .author-link { @include float-left; @include link-colors(blue, red); }

    DPNQBTT
    TDTT
    GSBNFXPSL .author-link { display: inline; float: left; color: blue; } .author-link:hover { color: red; } 1 2

35. @import "compass"; .logo { @include replace-text-with-dimensions("logo.png"); } DPNQBTT
    TDTT
    GSBNFXPSL .logo

    { text-indent: -119988px; overflow: hidden; text-align: left; background-image: url('/images/logo.png?1357639334'); background-repeat: no-repeat; background-position: 50% 50%; width: 214px; height: 50px; }

36. 4$44
    
    $PNQBTT ƛ 4$44 IUUQTBTTMBOHDPN ƛ $PNQBTT IUUQDPNQBTTTUZMFPSH

37. 㐛◜▎෷᭱ ⋣㏣⭶⭟˥ྭ⮦ᝥ༦ḑ

38. None

39. ᠩḕ᚝ᠱḕだ

40. None

41. ◠だぢፑࡻᨣⒷዯ⑁ሡⲁ

42. None

43. ㍻₟ৡḕ᚝௓ḕだ

44. ⯞ۙ

45. ̖ৢৢᛖṺਔ $y: #fcd208; .title { color: $y; border-bottom: 5px solid

    $y; } ̖ৢৢᛖṺਔ $y: #fcd208; $dark-y: darken($y, 10%); .title { color: $y; border-bottom: 5px solid $dark-y; } 㐟◠㌚ᩬʪᕿ͠
    CPSEFS
    ةፕ⹵̈ḕ༵ٖ㡳 ࿿̨࿠ϯ⬏⊰˯
    CPSEFS
    ᚝ቕୗ⁶ጌḕ㐟◠

46. ਙᏂʳૹᑾḕ⮩㡫௣஼࿟
    NJYJO
    ڒ㡳 @mixin title-and-border($color) { color: $color; border-bottom: 5px solid darken($color,

    10%); } ℿ͸ᚙᘢ⬏ᴣ⼓ᕿ௣⨲ˮ㡮 .title { @include title-and-border(#fcd208); }
47. None

48. ʫᕼḑ㉖㋣㡬

49. Ӱவ̌ẎṬⵋΘʴʫᕼ

50. None
51. None

52. NOA 5ZQFGBDF 'VUVSB

53. 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最

    近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜

54. .circle { margin-left: -3px; } 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得

    分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜

55. Sign in Sign up password username Sign in Sign up

    password username

56. .btn:first-child { margin-left: -3px; } Sign in Sign up password

    username Sign in Sign up password username

57. 8FC
    ୗ㕸 ِ̩ፎ⼫՚ḑݞ㐘

58. None
59. None

60. ᨣ̍㞬˄ቕୗ⽸㞬〸㡳 ๏ ஆ࿶℀ḑ㌱┗୕㕴ፒ㊶ ๏ 8JO
    ㏰⭶
    Ï
    ቭ⊁ኯ㕴 ๏ .BD
    ㏰⭶
    Ï
    㞴㕴5$ ๏ ٵൕ٪ʵ⊶ʬ ๏

    ୕㕴܃ⴗ೽

61. ਙͭ⭈᜔㡳 ๏ 'MBTI
    Ï
    ṕխፒয়ぞ⪓⏀ʵሗᄺ'MBTI ๏ ࢘ᬜ
    Ï
    ͙ፖࠨⳚᇓয়ơ෧຀
    ;[[ ๏ $BOWBT
    Ï
    ⭶⭟ഥʵፎᴟ
    ;[[ ๏ !GPOUGBDF
    Ï
    ⭶ஂ⪯㌜ơ୕ࣘფᘐ
    ;[[
    ␽ʺᗃᐲⵖয়

62. ㌮℄ୗ㕸ፙׁ

63. 8FCGPOUT
    ፙׁ ๏ 5ZQFLJU
    Ï
    ᙁቒ IUUQTUZQFLJUDPN ๏ +VTUGPOU
    Ï
    ˆቒ㡢⍑ ⇄㡣 IUUQXXXKVTUGPOUDPN ๏ 5ZQFTRVBSF
    ነቒ

    IUUQUZQFTRVBSFDPN
64. None
65. None
66. None
67. None
68. None

69. ʪ஄⬏ᴣናቕ੓ٽ
    5@5

70. None
71. None

72. 8JOEPXT .BD #FGPSF

73. 8JOEPXT .BD "GUFS

74. ⶤൗ٪⊺ʪୗࣘ

75. ု⨶ݞ㐜 㕍 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 ⻈⮻ٸ᝖
    EPNBJO нᡄ͹⬋ḑ୕ ځ
    TFSWFS
    ⬋ᛩ⊓ٸ୕㕴

    ʳ⹶୕㕴 ᡊᏤՁᎵ ୕㕴ʳ⹶୹࿜

76. ୗ㕸㉐᫽ݞ㐜 '065
    
    'MBTI
    PG
    6OTUZMFE
    5FYU
    
    ๏ IUUQEFNPFWFOEFTJHOUX

77. ⭺⭣ധ༐⬏ᄁ՟ፇ৛㡠 ๏ ʵ⬋㐳ῠ〴୕
    Ï
    Өය୕Ӕ㋹⡃㡮 ๏ ℻୕㕴⹶ӧทӻ㐳ῠ୕㕴 ๏ ഏ፟㐳ῠḑዏϸ٩̩ፄᏥۙ

78. 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 XGMPBEJOH XGBDUJWF PS 讀取失敗時... XGJOBDUJWF

    <html class="wf-loading" > <html class="wf-active" > <html class="wf-inactive" >

79. .title { // title style here }

80. .title { // title style here .wf-loading & { visibility:

    hidden; } .wf-active & { visibility: visible; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ

81. .title { // title style here @include transition(opacity .3s linear);

    .wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ ⑁ʸᴣ᠚ӧḕቶ්㐷ῤ㡠

82. %FGBVMU
    04 $POEFOTFE
    'POU
    5ZQFLJU ৡ௑˯㡮 .wf-active .date { font-size: 2em;

    }

83. ု⨶ݞ㐜 ‣ ୕㕴ፖׁݘϱ⃳ ‣ Βᴟ␹₼ᩨ
    ᜥ⼙⋣ 㕍

84. .title { // title style here @include transition(opacity .3s linear);

    .wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } .wf-inactive & { visibility: visible; opacity: 1; font-family: helvetcia, arial, sans-serif; } } ፙׁ৩ሪḕዒϷˤ٩̨⢫⏄

85. 3FTQPOTJWF
    %FTJHO ࢘ቒḑቭݞ㐘

86. ࢘

87. 1 2 1

88. ࢘ḕ᭵ᝈ <img src="foo.png"> @media (max-width: 320px) { img { max-width:

    100%; } }

89. ࢘ḕ᭵ᝈ <img src="foo.png" height="640" width="480"> @media (max-width: 320px) { img

    { max-width: 100%; height: auto; } }

90. 1 2 1 2

91. 0px 0px IFSF Loading...

92. 1 2 Onload! 85'

93. ⭈᜔ݞ㐜 ƛ ࿝ϰഏ፟࢘ᬜⱶٕ˘խḑ㕸൷ࢇஂ ƛ ᪊ᬜ࿡ขᬜḑᚚΝ
    
    
    
    
    
    

94. ⭈᜔ݞ㐜 100% auto img { width: 100%; height: auto; }

95. ⭈᜔ݞ㐜 100% 100% / 16 * 9 img { width:

    100%; height: 100% / 16 * 9; }

96. ⭈᜔ݞ㐜 .img-wrapper { position: relative; width: 100%; height: 0; padding-top:

    100% / 16 * 9; } img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .img-wrapper <img>

97. Ҽ⎟㟂 ƛ ٤ⓗࢇஂᚚΝ ƛ ㊣ᙎდֽ ƛ ࢘ᬜơขᬜḒ٩ ƛ ขᬜ௛ӱ⽆ᴟ㡢ൟ˚⾱ዅ℻ᚚ㡣

98. ቕ

99. 1

100. 1 咳咳，我現在還沒出 全⼒力呢...

101. 咳咳，我還沒出全⼒力 呢... ⽘௬

102. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬

103. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬

104. IUUQTHJUIVCDPNESZNBO.BDIPKT

105. 咳咳，我還沒出全⼒力 呢... ⽘௬

106. 咳咳，我還沒出 全⼒力呢... ⽢٩̨

107. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬

108. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨

109. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬

110. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨

111. IUUQTHJUIVCDPNESZNBO.BDIPKT

112. )J%1* 
     3FUJOB
     EJTQMBZ

113. )J%1*
     ፕ̍㞬ਔ㡳 ✓ቭᤰ ✓࢘ᬜ㐳ῠፄᠳይ ✓ፄ஖ኴ㉬ⱶḑቒ୕

114. ሚᄽ
     )J%1*
     ፕ̍㞬ʳਔ㡳 ✓࢘ᗃⱽয়˯ ✓░ᦫ⬲ࠨ๪㞨⻇㡮 ✓ᬀာ⨱஑ᙛ͹ḑVTFS

115. ̖ৢʳⰫ࢘

116. ᴣ̨࢘৘ḕ⽖ᇍ㡳

117. ሚᄽ
     )J%1*
     ḕӱ̜⽖ᇍ ✓ $44 ✓ 8FC
     GPOUT ✓ 47(

118. ṏぢΑᴣ
     $44 ✓ ࢖⬶
     CPSEFSSBEJVT ✓ ㋉ข
     CPYTIBEPX
     UFYUTIBEPX ✓ ᤉఅ
     MJOFBSHSBEJFOU
     SBEJBMHSBEJFOU

119. .box { border: 1px solid #ccc; box-shadow: 0 5px 10px

     rgba(0,0,0,.3); border-radius: 10px; } $44 Αᴟࢗᬜ

120. 8FC
     GPOUT ✓ ᬿᙥḑ୕㕴Βᴟ
     XFC
     GPOUT
     ʵ⬋ᴟ࢘ᬜ ✓ JDPO
     GPOUT ✓ ⎛㞾㡩ޢ◜

121. 8FC
     GPOUT Αᴟࢗᬜ AppWorks

122. None

123. TZNCPM
     GPOUT IPWFS XJUIPVU
     GPOUT

124. ٩⩰ᅓ்

125. ʳㅣḕ
     JDPO
     GPOUT
     ⴁᢏ ✓ IUUQTZNCPMTFUDPN
     ✓ IUUQQJDUPTDD
     ✓ IUUQGPSUBXFTPNFHJUIVCDPN'POU "XFTPNF
     ✓ IUUQBEBNXIJUDSPGUDPNDMJNBDPOT

     GPOU

126. 47(
     47(
     5JOZ ✓ ځぞᗃᐲ㡦ሡয়
     9
     ˥ʵ๱ ✓ ٩෻◜ ✓ *MMVTUSBUPS
     ⪩͵⺨ୖأ٩ ✓ 47(
     5JOZ

     ✓ ʵሗᄺᕻ∳ơ㋉ข
     ℻⹱⪯㌜ఋ຀
127. None

128. ʳሚᄽ
     47(
     ḕ᦯⬶ࠨ ✓ *&
     
     
      ✓ "OESPJE
     
     
     㡢٩̩Ⅼ˯㡣

129. <a class="brand" href="/"> <!--[if IE]> <div class="logo logo_ie"></div> <![endif]--> <!--[if

     !IE]--> <div class="logo logo_svg"></div> <!--[endif]--> </a> .logo { width: 220px; height: 30px; } .logo_svg { background: image-url("thewall-logo.svg"); } .logo_ie { background: image-url("thewall-logo.png"); } ፏ⇈ޢḕՓቴ
130. None
131. None

132. 2013 だተ⮿ⱟ
     8FC
     %FTJHO Αᴣ
     4"44 㐟◠▒෺᭵ 8FC
     ୗ㕸 38%
     ࢘▒ቕ )J%1*
     ⭺⭣

133. 5IBOLT ᙍ⻜㌉⊛
     
     ൖ൷
     3(#"
     ݞ㐘㌉ ٍ֥
     IUUQSHCBUX ਗᎿ͹ፒ̵ͮݞ㐘
     ᙍ⻜
     '#
     ⑶⊩࿝ IUUQGBDFCPPLDPNFWFOXV &WFO