深入浅出了解 HTML5 和 CSS.pptVIP

Next generation web languages David Penny, EMCDDAParma, 12 November 2009 Contents Are we sure it’s broken? Overview of HTML 5 Overview of CSS 3 Should I be using them? Conclusion Are you sure it’s broken? Bold statement 1 ‘The websites of today are built with languages largely conceived during the mid to late1990’s, when the web was still in its infancy.’* * Work on HTML 4 started in early 1997 CSS 2 was published in 1998 The website circa 1998 Simple layout No frills design Text, text and more text Website = slightly geeky pursuit in an analogue world The website circa 2009 Complex layout Fancy eye-catching designs Lots of user-interactivity ‘Website’ = essential hub for our digital lifestyles Bold statement 2 ‘The web has arrived where it is today despite of the current standards and not because of them.’ To the rescue: HTML 5 and CSS 3 HTML 5 Specifically designed for web applications Nice to search engines and screen readers HTML 5 will update HTML 4.01, DOM Level 2 CSS level 3 Will make it easier to do complex designs Will look the same across all browsers CSS 3 will update CSS level 2 (CSS 2.1) Overview of HTML 5 HTML 5 overview: new tags to the rescue HTML 5 overview: at last, video and audio Currently Video and audio handled by plugins (Flash, ReatTime, etc.) New video and audio and associated APIs tags will be used as img tag is today Browsers will need to define how video and audio should be played (controls, interface, etc.) HTML 5 overview: Web applications 1.0 Web applications a huge part of HTML 5. Standard was initially called ‘Web applications 1.0’ Great news for developers and end-users: expect fast, full-featured advanced web applications soon Some APIs include: offline storage, geo-location, drag and drop, canvas (drawing), ‘workers’, contenteditable HTML 5 overview: Form handling required attribute: browser checks for you that the data has been entered email input type: a valid email must be entered url input type: requires a valid