让开发也懂前端
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

让开发也懂前端

on

  • 11,740 views

 

Statistics

Views

Total Views
11,740
Views on SlideShare
8,006
Embed Views
3,734

Actions

Likes
46
Downloads
424
Comments
3

21 Embeds 3,734

http://lifesinger.wordpress.com 3074
http://www.akasuna.com 237
url_unknown 220
http://wiki.ued.taobao.net 47
http://yslove.net 47
http://www.techgig.com 37
http://www.chengxuyuans.com 22
http://xianguo.com 14
http://www.slideshare.net 10
http://www.landfancy.com 7
http://www.zhuaxia.com 5
http://www.itfeed.cn 3
http://www.cnblogs.com 2
https://twitter.com 2
http://xnny.net 1
http://archive.cnblogs.com 1
http://www.itfeed.com 1
http://zhuaxia.com 1
http://172.25.1.151 1
http://yslove.wordpress.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • a good slide, thanks, up !!
    Are you sure you want to
    Your message goes here
    Processing…
  • thank you for sharing it
    Are you sure you want to
    Your message goes here
    Processing…
  • 谢分享~
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

让开发也懂前端 Presentation Transcript

  • 1. Thursday, July 7, 2011
  • 2. Who am I ? • • Frank Wang / lifesinger • / • http://lifesinger.wordpress.com/Thursday, July 7, 2011
  • 3. Topics • • Web HTML • CSS • JavaScript • •Thursday, July 7, 2011
  • 4. Thursday, July 7, 2011
  • 5. http://www.flickr.com/photos/kejun/3114605967/Thursday, July 7, 2011
  • 6. Thursday, July 7, 2011
  • 7. Web HTMLThursday, July 7, 2011
  • 8. Thursday, July 7, 2011
  • 9. http://www.w3.org/People/Berners-Lee/Thursday, July 7, 2011
  • 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. HTML • HyperText Markup Language • “ ”Thursday, July 7, 2011
  • 12. Thursday, July 7, 2011
  • 13. Thursday, July 7, 2011
  • 14. http://dancewithnet.com/2009/06/14/activating-browser- modes-with-doctype/Thursday, July 7, 2011
  • 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. HTML • • •Thursday, July 7, 2011
  • 17. • table • div span • liThursday, July 7, 2011
  • 18. Thursday, July 7, 2011
  • 19. Thursday, July 7, 2011
  • 20. Thursday, July 7, 2011
  • 21. Thursday, July 7, 2011
  • 22. Thursday, July 7, 2011
  • 23. HTML5Thursday, July 7, 2011
  • 24. Thursday, July 7, 2011
  • 25. <progress> <datalist> <nav> <time> <canvas> <figure> <section> <video> <audio> <ruby> ... http://www.w3.org/TR/html5/Thursday, July 7, 2011
  • 26. http://www.w3.org/TR/html5/Thursday, July 7, 2011
  • 27. CSSThursday, July 7, 2011
  • 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. CSS • Cascading Style Sheet • •Thursday, July 7, 2011
  • 30. Thursday, July 7, 2011
  • 31. CSS • • •Thursday, July 7, 2011
  • 32. http://www.w3.org/TR/css3-selectors/Thursday, July 7, 2011
  • 33. http://www.w3.org/wiki/CSS/PropertiesThursday, July 7, 2011
  • 34. Thursday, July 7, 2011
  • 35. display • div p block • span a img inline • display: block/inline/inline-block/none;Thursday, July 7, 2011
  • 36. Thursday, July 7, 2011
  • 37. http://www.quirksmode.org/css/display.htmlThursday, July 7, 2011
  • 38. float • •Thursday, July 7, 2011
  • 39. Thursday, July 7, 2011
  • 40. position • position: relative/absolute/static/fixed •Thursday, July 7, 2011
  • 41. Thursday, July 7, 2011
  • 42. Thursday, July 7, 2011
  • 43. Cascading • •Thursday, July 7, 2011
  • 44. http://www.stuffandnonsense.co.uk/archives/ css_specificity_wars.htmlThursday, July 7, 2011
  • 45. CSS http://csszengarden.com/Thursday, July 7, 2011
  • 46. CSS http://www.quirksmode.org/css/contents.htmlThursday, July 7, 2011
  • 47. CSS http://www.gtalbot.org/BrowserBugsSection/Thursday, July 7, 2011
  • 48. CSS 3 http://media.24ways.org/2009/15/space.htmlThursday, July 7, 2011
  • 49. Thursday, July 7, 2011
  • 50. JavaScriptThursday, July 7, 2011
  • 51. • 1995 JavaScript • 1996 ECMAScript • 1999 ECMAScript 3 • 2009 ECMAScript 5 • ECMAScript HarmonyThursday, July 7, 2011
  • 52. JavaScriptThursday, July 7, 2011
  • 53. Java JavaScriptThursday, July 7, 2011
  • 54. JavaScript C Self “ ” -- Brendan Eich http://www.ruanyifeng.com/blog/2011/06/ birth_of_javascript.htmlThursday, July 7, 2011
  • 55. Java Scheme C Self JavaScriptThursday, July 7, 2011
  • 56. Thursday, July 7, 2011
  • 57. Thursday, July 7, 2011
  • 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. 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. Thursday, July 7, 2011
  • 61. DOM • Document Object Model • DOM • DOM JavaScriptThursday, July 7, 2011
  • 62. DOM Scripting: Web Design with JavaScript and the Document Object ModelThursday, July 7, 2011
  • 63. http://es5.github.com/ http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/Thursday, July 7, 2011
  • 64. JavaScriptThursday, July 7, 2011
  • 65. Thursday, July 7, 2011
  • 66. Thursday, July 7, 2011
  • 67. vs.Thursday, July 7, 2011
  • 68. http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2CdojoThursday, July 7, 2011
  • 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. Thursday, July 7, 2011
  • 71. DOM Event Ajax... Validator Storage Template... Calendar Tabs Dialog... MVC Unit Testing Module Loader...Thursday, July 7, 2011
  • 72. Thursday, July 7, 2011
  • 73. Thursday, July 7, 2011
  • 74. http://addyosmani.com/resources/toolschart/chart.pdfThursday, July 7, 2011
  • 75. KISSYThursday, July 7, 2011
  • 76. 2008Thursday, July 7, 2011
  • 77. 2009Thursday, July 7, 2011
  • 78. 2008 - 2009 • yahoo-dom-event.js • UI TBra • 2009 suggest, kissy editor • web pages • KISSY • ExtJSThursday, July 7, 2011
  • 79. 2010Thursday, July 7, 2011
  • 80. 2010 • Yahoo YUI3 • YUI3 IE6-7 • jQuery • KISSY Switchable Calendar DataLazyload AJBridge • webww web apps •Thursday, July 7, 2011
  • 81. KISSY • KISSY Editor • YUI2 jQuery • • KISSYThursday, July 7, 2011
  • 82. KISSY coreThursday, July 7, 2011
  • 83. Thursday, July 7, 2011
  • 84. Thursday, July 7, 2011
  • 85. Thursday, July 7, 2011
  • 86. ... kissy --Thursday, July 7, 2011
  • 87. ... “ ” --Thursday, July 7, 2011
  • 88. --Thursday, July 7, 2011
  • 89. Thursday, July 7, 2011
  • 90. Thursday, July 7, 2011
  • 91. Thursday, July 7, 2011
  • 92. Thursday, July 7, 2011
  • 93. Thursday, July 7, 2011
  • 94. SeaJS http://seajs.com/Thursday, July 7, 2011
  • 95. SeaJS • • •Thursday, July 7, 2011
  • 96. Thursday, July 7, 2011
  • 97. Thursday, July 7, 2011
  • 98. 1991 WorldWideWeb http://en.wikipedia.org/wiki/Web_browserThursday, July 7, 2011
  • 99. 1993 Mosaic http://en.wikipedia.org/wiki/Mosaic_(web_browser)Thursday, July 7, 2011
  • 100. IEThursday, July 7, 2011
  • 101. FirefoxThursday, July 7, 2011
  • 102. ChromeThursday, July 7, 2011
  • 103. SafariThursday, July 7, 2011
  • 104. OperaThursday, July 7, 2011
  • 105. Thursday, July 7, 2011
  • 106. WebKit Gecko Trident PrestoThursday, July 7, 2011
  • 107. How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htmThursday, July 7, 2011
  • 108. Thursday, July 7, 2011
  • 109. Thursday, July 7, 2011
  • 110. WebKit Developer ToolsThursday, July 7, 2011
  • 111. Thursday, July 7, 2011
  • 112. Thursday, July 7, 2011
  • 113. Thursday, July 7, 2011
  • 114. • • 1800 •Thursday, July 7, 2011
  • 115. Thursday, July 7, 2011
  • 116. 1993Thursday, July 7, 2011
  • 117. 2005Thursday, July 7, 2011
  • 118. 2010Thursday, July 7, 2011
  • 119. 2022 ?Thursday, July 7, 2011
  • 120. Q &A • Twitter: @lifesinger • @ • • lifesinger@gmail.comThursday, July 7, 2011
  • 121. Thanks!Thursday, July 7, 2011