0
Thursday, July 7, 2011
Who am I ?                     •                     • Frank Wang / lifesinger                     •           /          ...
Topics                     •                     • Web      HTML                     •        CSS                     •   ...
Thursday, July 7, 2011
http://www.flickr.com/photos/kejun/3114605967/Thursday, July 7, 2011
Thursday, July 7, 2011
Web   HTMLThursday, July 7, 2011
Thursday, July 7, 2011
http://www.w3.org/People/Berners-Lee/Thursday, July 7, 2011
• 1989   Tim Berners-Lee   HTML                     • 1993   Mosaic                     • 1994   W3C                     •...
HTML                     •                           HyperText Markup                         Language                    ...
Thursday, July 7, 2011
Thursday, July 7, 2011
http://dancewithnet.com/2009/06/14/activating-browser-                       modes-with-doctype/Thursday, July 7, 2011
•          p, div, span, h1-h6, body...                     •          ul, ol, dl, li, dd, dt                     •       ...
HTML                     •                     •                     •Thursday, July 7, 2011
•   table                     •     div   span                     •     liThursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
HTML5Thursday, July 7, 2011
Thursday, July 7, 2011
<progress>            <datalist>                         <nav>                  <time>                                    ...
http://www.w3.org/TR/html5/Thursday, July 7, 2011
CSSThursday, July 7, 2011
• 1994 Håkon Wium Lie      CSS                    • 1996 CSS Level 1                    • 1997 CSS Working Group          ...
CSS                     •                 Cascading                         Style Sheet                     •             ...
Thursday, July 7, 2011
CSS                     •                     •                     •Thursday, July 7, 2011
http://www.w3.org/TR/css3-selectors/Thursday, July 7, 2011
http://www.w3.org/wiki/CSS/PropertiesThursday, July 7, 2011
Thursday, July 7, 2011
display                         •   div   p      block                         •   span a img           inline            ...
Thursday, July 7, 2011
http://www.quirksmode.org/css/display.htmlThursday, July 7, 2011
float                         •                         •Thursday, July 7, 2011
Thursday, July 7, 2011
position                     •   position: relative/absolute/static/fixed                     •Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Cascading                     •                     •Thursday, July 7, 2011
http://www.stuffandnonsense.co.uk/archives/                                  css_specificity_wars.htmlThursday, July 7, 2011
CSS                         http://csszengarden.com/Thursday, July 7, 2011
CSS                    http://www.quirksmode.org/css/contents.htmlThursday, July 7, 2011
CSS                         http://www.gtalbot.org/BrowserBugsSection/Thursday, July 7, 2011
CSS 3                         http://media.24ways.org/2009/15/space.htmlThursday, July 7, 2011
Thursday, July 7, 2011
JavaScriptThursday, July 7, 2011
• 1995 JavaScript                     • 1996 ECMAScript                     • 1999 ECMAScript 3                     • 2009...
JavaScriptThursday, July 7, 2011
Java   JavaScriptThursday, July 7, 2011
JavaScript                       C                            Self                                                “       ...
Java   Scheme                         C                                             Self                              Java...
Thursday, July 7, 2011
Thursday, July 7, 2011
Closure          for(var i = 0; i < elements.length; i++) {            (function(n) {              elements[n].addEventLis...
Prototype            function Animal(name) {              this.name = name;            }            function Dog(name) {  ...
Thursday, July 7, 2011
DOM     •                        Document             Object Model     •       DOM     •       DOM            JavaScriptTh...
DOM Scripting: Web Design with JavaScript and                     the Document Object ModelThursday, July 7, 2011
http://es5.github.com/                         http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/...
JavaScriptThursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
vs.Thursday, July 7, 2011
http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2CdojoThursday, July 7, 2011
http://www.google.com/trends?q=backbone%2Czepto%2Clabjs%2Cunderscore%2Cmustache                                           ...
Thursday, July 7, 2011
DOM Event Ajax...                               Validator Storage Template...                           Calendar Tabs Dial...
Thursday, July 7, 2011
Thursday, July 7, 2011
http://addyosmani.com/resources/toolschart/chart.pdfThursday, July 7, 2011
KISSYThursday, July 7, 2011
2008Thursday, July 7, 2011
2009Thursday, July 7, 2011
2008 - 2009                •        yahoo-dom-event.js                •                         UI                        ...
2010Thursday, July 7, 2011
2010                •        Yahoo         YUI3                •        YUI3                                              ...
KISSY                     •           KISSY Editor                     •         YUI2   jQuery                     •      ...
KISSY                         coreThursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
...                         kissy                                 --Thursday, July 7, 2011
...                         “                                  ”                             --Thursday, July 7, 2011
--Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
SeaJS                          http://seajs.com/Thursday, July 7, 2011
SeaJS                     •                     •                     •Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
1991                     WorldWideWeb                         http://en.wikipedia.org/wiki/Web_browserThursday, July 7, 2011
1993        Mosaic         http://en.wikipedia.org/wiki/Mosaic_(web_browser)Thursday, July 7, 2011
IEThursday, July 7, 2011
FirefoxThursday, July 7, 2011
ChromeThursday, July 7, 2011
SafariThursday, July 7, 2011
OperaThursday, July 7, 2011
Thursday, July 7, 2011
WebKit                                              Gecko                           Trident                               ...
How browsers work       http://taligarsiel.com/Projects/howbrowserswork1.htmThursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
WebKit Developer ToolsThursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
Thursday, July 7, 2011
•         •               1800         •Thursday, July 7, 2011
Thursday, July 7, 2011
1993Thursday, July 7, 2011
2005Thursday, July 7, 2011
2010Thursday, July 7, 2011
2022 ?Thursday, July 7, 2011
Q &A                     • Twitter: @lifesinger                     •             @                     •                 ...
Thanks!Thursday, July 7, 2011
Upcoming SlideShare
Loading in...5
×

让开发也懂前端

11,663

Published on

Published in: Technology, Design
3 Comments
47 Likes
Statistics
Notes
  • a good slide, thanks, up !!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thank you for sharing it
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 谢分享~
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
11,663
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
429
Comments
3
Likes
47
Embeds 0
No embeds

No notes for slide

Transcript of "让开发也懂前端"

  1. 1. Thursday, July 7, 2011
  2. 2. Who am I ? • • Frank Wang / lifesinger • / • http://lifesinger.wordpress.com/Thursday, July 7, 2011
  3. 3. Topics • • Web HTML • CSS • JavaScript • •Thursday, July 7, 2011
  4. 4. Thursday, July 7, 2011
  5. 5. http://www.flickr.com/photos/kejun/3114605967/Thursday, July 7, 2011
  6. 6. Thursday, July 7, 2011
  7. 7. Web HTMLThursday, July 7, 2011
  8. 8. Thursday, July 7, 2011
  9. 9. http://www.w3.org/People/Berners-Lee/Thursday, July 7, 2011
  10. 10. • 1989 Tim Berners-Lee HTML • 1993 Mosaic • 1994 W3C • 1997 HTML 3.2 • 1999 HTML 4.01 • 2000 XHTML 1.0 • 2008 HTML 5 http://www.w3.org/People/Raggett/book4/ch02.htmlThursday, July 7, 2011
  11. 11. HTML • HyperText Markup Language • “ ”Thursday, July 7, 2011
  12. 12. Thursday, July 7, 2011
  13. 13. Thursday, July 7, 2011
  14. 14. http://dancewithnet.com/2009/06/14/activating-browser- modes-with-doctype/Thursday, July 7, 2011
  15. 15. • p, div, span, h1-h6, body... • ul, ol, dl, li, dd, dt • a, em, strong, pre... • form, input, button, label... • img, object... • table, tr, td, caption, tbody... • ... http://reference.sitepoint.com/html/elementsThursday, July 7, 2011
  16. 16. HTML • • •Thursday, July 7, 2011
  17. 17. • table • div span • liThursday, July 7, 2011
  18. 18. Thursday, July 7, 2011
  19. 19. Thursday, July 7, 2011
  20. 20. Thursday, July 7, 2011
  21. 21. Thursday, July 7, 2011
  22. 22. Thursday, July 7, 2011
  23. 23. HTML5Thursday, July 7, 2011
  24. 24. Thursday, July 7, 2011
  25. 25. <progress> <datalist> <nav> <time> <canvas> <figure> <section> <video> <audio> <ruby> ... http://www.w3.org/TR/html5/Thursday, July 7, 2011
  26. 26. http://www.w3.org/TR/html5/Thursday, July 7, 2011
  27. 27. CSSThursday, July 7, 2011
  28. 28. • 1994 Håkon Wium Lie CSS • 1996 CSS Level 1 • 1997 CSS Working Group • 1998 CSS Level 2 • CSS Level 3Thursday, July 7, 2011
  29. 29. CSS • Cascading Style Sheet • •Thursday, July 7, 2011
  30. 30. Thursday, July 7, 2011
  31. 31. CSS • • •Thursday, July 7, 2011
  32. 32. http://www.w3.org/TR/css3-selectors/Thursday, July 7, 2011
  33. 33. http://www.w3.org/wiki/CSS/PropertiesThursday, July 7, 2011
  34. 34. Thursday, July 7, 2011
  35. 35. display • div p block • span a img inline • display: block/inline/inline-block/none;Thursday, July 7, 2011
  36. 36. Thursday, July 7, 2011
  37. 37. http://www.quirksmode.org/css/display.htmlThursday, July 7, 2011
  38. 38. float • •Thursday, July 7, 2011
  39. 39. Thursday, July 7, 2011
  40. 40. position • position: relative/absolute/static/fixed •Thursday, July 7, 2011
  41. 41. Thursday, July 7, 2011
  42. 42. Thursday, July 7, 2011
  43. 43. Cascading • •Thursday, July 7, 2011
  44. 44. http://www.stuffandnonsense.co.uk/archives/ css_specificity_wars.htmlThursday, July 7, 2011
  45. 45. CSS http://csszengarden.com/Thursday, July 7, 2011
  46. 46. CSS http://www.quirksmode.org/css/contents.htmlThursday, July 7, 2011
  47. 47. CSS http://www.gtalbot.org/BrowserBugsSection/Thursday, July 7, 2011
  48. 48. CSS 3 http://media.24ways.org/2009/15/space.htmlThursday, July 7, 2011
  49. 49. Thursday, July 7, 2011
  50. 50. JavaScriptThursday, July 7, 2011
  51. 51. • 1995 JavaScript • 1996 ECMAScript • 1999 ECMAScript 3 • 2009 ECMAScript 5 • ECMAScript HarmonyThursday, July 7, 2011
  52. 52. JavaScriptThursday, July 7, 2011
  53. 53. Java JavaScriptThursday, July 7, 2011
  54. 54. JavaScript C Self “ ” -- Brendan Eich http://www.ruanyifeng.com/blog/2011/06/ birth_of_javascript.htmlThursday, July 7, 2011
  55. 55. Java Scheme C Self JavaScriptThursday, July 7, 2011
  56. 56. Thursday, July 7, 2011
  57. 57. Thursday, July 7, 2011
  58. 58. Closure for(var i = 0; i < elements.length; i++) { (function(n) { elements[n].addEventListener(‘click’, function() { alert(n); }); })(i); } http://jibbering.com/faq/notes/closures/Thursday, July 7, 2011
  59. 59. Prototype function Animal(name) { this.name = name; } function Dog(name) { Animal.call(this, name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; var dog = new Dog(‘ ’); http://javascript.crockford.com/inheritance.htmlThursday, July 7, 2011
  60. 60. Thursday, July 7, 2011
  61. 61. DOM • Document Object Model • DOM • DOM JavaScriptThursday, July 7, 2011
  62. 62. DOM Scripting: Web Design with JavaScript and the Document Object ModelThursday, July 7, 2011
  63. 63. http://es5.github.com/ http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/Thursday, July 7, 2011
  64. 64. JavaScriptThursday, July 7, 2011
  65. 65. Thursday, July 7, 2011
  66. 66. Thursday, July 7, 2011
  67. 67. vs.Thursday, July 7, 2011
  68. 68. http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2CdojoThursday, July 7, 2011
  69. 69. http://www.google.com/trends?q=backbone%2Czepto%2Clabjs%2Cunderscore%2Cmustache %2Cmodernize&ctab=0&geo=all&date=all&sort=0Thursday, July 7, 2011
  70. 70. Thursday, July 7, 2011
  71. 71. DOM Event Ajax... Validator Storage Template... Calendar Tabs Dialog... MVC Unit Testing Module Loader...Thursday, July 7, 2011
  72. 72. Thursday, July 7, 2011
  73. 73. Thursday, July 7, 2011
  74. 74. http://addyosmani.com/resources/toolschart/chart.pdfThursday, July 7, 2011
  75. 75. KISSYThursday, July 7, 2011
  76. 76. 2008Thursday, July 7, 2011
  77. 77. 2009Thursday, July 7, 2011
  78. 78. 2008 - 2009 • yahoo-dom-event.js • UI TBra • 2009 suggest, kissy editor • web pages • KISSY • ExtJSThursday, July 7, 2011
  79. 79. 2010Thursday, July 7, 2011
  80. 80. 2010 • Yahoo YUI3 • YUI3 IE6-7 • jQuery • KISSY Switchable Calendar DataLazyload AJBridge • webww web apps •Thursday, July 7, 2011
  81. 81. KISSY • KISSY Editor • YUI2 jQuery • • KISSYThursday, July 7, 2011
  82. 82. KISSY coreThursday, July 7, 2011
  83. 83. Thursday, July 7, 2011
  84. 84. Thursday, July 7, 2011
  85. 85. Thursday, July 7, 2011
  86. 86. ... kissy --Thursday, July 7, 2011
  87. 87. ... “ ” --Thursday, July 7, 2011
  88. 88. --Thursday, July 7, 2011
  89. 89. Thursday, July 7, 2011
  90. 90. Thursday, July 7, 2011
  91. 91. Thursday, July 7, 2011
  92. 92. Thursday, July 7, 2011
  93. 93. Thursday, July 7, 2011
  94. 94. SeaJS http://seajs.com/Thursday, July 7, 2011
  95. 95. SeaJS • • •Thursday, July 7, 2011
  96. 96. Thursday, July 7, 2011
  97. 97. Thursday, July 7, 2011
  98. 98. 1991 WorldWideWeb http://en.wikipedia.org/wiki/Web_browserThursday, July 7, 2011
  99. 99. 1993 Mosaic http://en.wikipedia.org/wiki/Mosaic_(web_browser)Thursday, July 7, 2011
  100. 100. IEThursday, July 7, 2011
  101. 101. FirefoxThursday, July 7, 2011
  102. 102. ChromeThursday, July 7, 2011
  103. 103. SafariThursday, July 7, 2011
  104. 104. OperaThursday, July 7, 2011
  105. 105. Thursday, July 7, 2011
  106. 106. WebKit Gecko Trident PrestoThursday, July 7, 2011
  107. 107. How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htmThursday, July 7, 2011
  108. 108. Thursday, July 7, 2011
  109. 109. Thursday, July 7, 2011
  110. 110. WebKit Developer ToolsThursday, July 7, 2011
  111. 111. Thursday, July 7, 2011
  112. 112. Thursday, July 7, 2011
  113. 113. Thursday, July 7, 2011
  114. 114. • • 1800 •Thursday, July 7, 2011
  115. 115. Thursday, July 7, 2011
  116. 116. 1993Thursday, July 7, 2011
  117. 117. 2005Thursday, July 7, 2011
  118. 118. 2010Thursday, July 7, 2011
  119. 119. 2022 ?Thursday, July 7, 2011
  120. 120. Q &A • Twitter: @lifesinger • @ • • lifesinger@gmail.comThursday, July 7, 2011
  121. 121. Thanks!Thursday, July 7, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×