让开发也懂前端

12,510 views
12,509 views

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
12,510
On SlideShare
0
From Embeds
0
Number of Embeds
4,059
Actions
Shares
0
Downloads
435
Comments
3
Likes
47
Embeds 0
No embeds

No notes for slide

让开发也懂前端

  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

×