让开发也懂前端

Thursday, July 7, 2011

Who am I ? • • Frank Wang / lifesinger • / • http://lifesinger.wordpress.com/Thursday, July 7, 2011

Topics • • Web HTML • CSS • JavaScript • •Thursday, July 7, 2011

http://www.ﬂickr.com/photos/kejun/3114605967/Thursday, July 7, 2011

Web HTMLThursday, July 7, 2011

http://www.w3.org/People/Berners-Lee/Thursday, July 7, 2011

• 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

HTML • HyperText Markup Language • “ ”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 • a, em, strong, pre... • form, input, button, label... • img, object... • table, tr, td, caption, tbody... • ... http://reference.sitepoint.com/html/elementsThursday, July 7, 2011

HTML • • •Thursday, July 7, 2011

• table • div span • liThursday, July 7, 2011

HTML5Thursday, July 7, 2011

<progress> <datalist> <nav> <time> <canvas> <ﬁgure> <section> <video> <audio> <ruby> ... http://www.w3.org/TR/html5/Thursday, July 7, 2011

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 • 1998 CSS Level 2 • CSS Level 3Thursday, July 7, 2011

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

display • div p block • span a img inline • display: block/inline/inline-block/none;Thursday, July 7, 2011

http://www.quirksmode.org/css/display.htmlThursday, July 7, 2011

ﬂoat • •Thursday, July 7, 2011

position • position: relative/absolute/static/ﬁxed •Thursday, July 7, 2011

Cascading • •Thursday, July 7, 2011

http://www.stuffandnonsense.co.uk/archives/ css_speciﬁcity_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

JavaScriptThursday, July 7, 2011

• 1995 JavaScript • 1996 ECMAScript • 1999 ECMAScript 3 • 2009 ECMAScript 5 • ECMAScript HarmonyThursday, July 7, 2011

Java JavaScriptThursday, July 7, 2011

JavaScript C Self “ ” -- Brendan Eich http://www.ruanyifeng.com/blog/2011/06/ birth_of_javascript.htmlThursday, July 7, 2011

Java Scheme C Self JavaScriptThursday, July 7, 2011

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

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

DOM • Document Object Model • DOM • DOM JavaScriptThursday, July 7, 2011

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/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 %2Cmodernize&ctab=0&geo=all&date=all&sort=0Thursday, July 7, 2011

DOM Event Ajax... Validator Storage Template... Calendar Tabs Dialog... MVC Unit Testing Module Loader...Thursday, July 7, 2011

http://addyosmani.com/resources/toolschart/chart.pdfThursday, July 7, 2011

KISSYThursday, July 7, 2011

2008Thursday, July 7, 2011

2008 - 2009 • yahoo-dom-event.js • UI TBra • 2009 suggest, kissy editor • web pages • KISSY • ExtJSThursday, July 7, 2011

2010 • Yahoo YUI3 • YUI3 IE6-7 • jQuery • KISSY Switchable Calendar DataLazyload AJBridge • webww web apps •Thursday, July 7, 2011

KISSY • KISSY Editor • YUI2 jQuery • • KISSYThursday, July 7, 2011

KISSY coreThursday, July 7, 2011

... kissy --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

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

WebKit Gecko Trident PrestoThursday, July 7, 2011

How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htmThursday, July 7, 2011

WebKit Developer ToolsThursday, July 7, 2011

• • 1800 •Thursday, July 7, 2011

2022 ?Thursday, July 7, 2011

Q &A • Twitter: @lifesinger • @ • • lifesinger@gmail.comThursday, July 7, 2011

Thanks!Thursday, July 7, 2011

http://lifesinger.wordpress.com	2002
url_unknown	220
http://www.akasuna.com	197
http://yslove.net	42
http://wiki.ued.taobao.net	31
http://www.techgig.com	22
http://www.chengxuyuans.com	22
http://xianguo.com	13
http://www.slideshare.net	10
http://www.landfancy.com	5
http://www.zhuaxia.com	5
http://www.itfeed.cn	3
http://yslove.wordpress.com	1
http://172.25.1.151	1
http://zhuaxia.com	1
http://www.itfeed.com	1
http://archive.cnblogs.com	1
http://xnny.net	1

让开发也懂前端

by lifesinger on Jul 07, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 2,578

Statistics

让开发也懂前端 — Presentation Transcript