Your SlideShare is downloading. ×
0
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
让开发也懂前端
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

让开发也懂前端

11,536

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,536
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
428
Comments
3
Likes
47
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×