Using HTML5 and CSS3 today
3 likes1,704 views
The document discusses HTML5 and CSS3, emphasizing their significance as evolving standards by W3C that enhance web development and browser functionality. It highlights key semantic elements introduced in HTML5, such as <header>, <nav>, and <article>, along with CSS3 features like transforms and border-radius. Additionally, it provides resources for testing and learning as well as modern web development practices and tools.
Using HTML5 and CSS3 today
- 1. Martin Beeby@thebeebsUsing HTML5 and CSS3 [email protected]
- 2. Not @thebiebs but @thebeebs
- 3. Browsers and MicrosoftWe talked to developers and got feedbackWe improved our product based upon that feedback
- 4. the internet has changed
- 6. what is HTML5HTML5 is a standard developed by W3CHTML5 is often incorrectly used as an umbrella termStill under developmentNeeds to be done the right way
- 7. Standards are good Standardise what we had like XMLHTTPRequestStandardise what was newStandardise the way mark up errors like<p><span>thebeebs</p></span>are handledStandards that are testablehttp://bit.ly/submitHTML5Tests
- 10. what is CSS3controls the way HTML looksAchieve things that was previously only possible using JavaScript
- 11. Oh So Shiny!HTML5CCS3WebApps – WebSockets, Web Storage, etcSVGGeoLocationECMA
- 13. HTML5<!DOCTYPE html>Markup Elements <header>, <hgroup>, <nav>, <aside>, <footer> <article>, <section> <figure>, <figcaption>
- 14. document changes
- 17. <script>You no longer need the <script type="text/javascript"></script>This has always worked but was never valid before.
- 18. Semantic Web
- 19. <header>Represents a group of introductory or navigational aids<header> <hgroup> <h1>My Site</h1> <h2>Is rocking a hgroup</h2> </hgroup></header>Can be more than one per page
- 20. <nav>Should be used to wrap navigational linksNot links that are ads or a collection of links that make up the main content of the page.You shouldn’t put links for things like terms of service or copyright pages.<nav> <ul> <li>Menu Name</li> </ul></nav>
- 21. <aside>Good for content that is separate to the main contentPull QuotesSideBars
- 22. <article>Represents a component part of a pageCould be independently distributableDon’t think magazine article Think distinct object<article> <h1>The articles Title</h1> <footer>Posted in category xyz</footer></article>
- 23. <section>The section element represents a generic document or application section.Not a generic container element. When an element is needed for styling purposes or as a convenience for scripting use the div element instead.Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
- 24. <footer>Copyright DataWho Wrote the fileRelated DocumentsCan be more than one per page
- 25. lime
- 28. rich graphicsAudio & VideoCanvasSVG 1.1Basic shapesPathsTextTransformsPaintingFilling, ColourScriptingStylingGradientsPatterns
- 30. video tag<video src=”videos/video.mp4” id=”myVideo”></video>
- 31. video tag<video id=”myVideo”poster=”videos/poster.jpg”autoplaycontrolspreload=”auto”playbackRate=”1”width=”448”><source src=”videos/video.mp4” type=’video/mp4’ /><source src=”video/video.ogv” type=’video/ogg’ /></video>
- 32. video codec
- 33. modernizr.com
- 34. <div id="vidControls"><a href="#" onclick="slower()">Slower</a><a href="#" onclick="play()">Play</a><a href="#" onclick="pause()">Pause</a><a href="#" onclick="faster()">Faster</a></div>
- 35. function slower() {var video = document.getElementById("myVideo");varplaybackRate = video.playbackRate; if (playbackRate <= 1)playbackRate = playbackRate / 2; elseplaybackRate--;video.playbackRate = playbackRate;}function faster() {document.getElementById("myVideo").playbackRate++;}function pause() {document.getElementById("myVideo").pause();}function play() {document.getElementById("myVideo").play();}
- 36. video demo
- 37. canvas
- 39. Canvas Demo – Museum of China
- 40. GeoLocation (Where Am I?)
- 41. What’s Generally Safe To Use?SVGDocument Object ModelCore - Level 2 & 3Events – Level 2 & 3CSS32D TransformsBackgrounds & BordersFontsMedia QueriesSelectorsColors and OpacityHTML5Doc TypeSemantic ElementsAudio & VideoCanvasSelection APIsContent EditableDOM StorageAjax NavigationCross Document MessagingGeoLocation
- 42. modernizr.com
- 43. Using Shims and Poly FillsUsed to fill the holes in support by legacy browserExample:Use http://json.org/json2.js when Native JSON is not supportedGreat list of PolyFills (use with caution)http://bit.ly/HTML5pollyfills
- 44. CSS3
- 45. border-radiusimage {border-radius:105px}For more Info http://bit.ly/border-radius
- 46. transforms
- 47. <style> #mVideo { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left;-ms-transform-origin: bottom left; }</style>
- 48. Apply the standard last.target{ -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
- 49. web fonts@font-face { font-family: FelbridgeOTSCondensed;src: url('fonts/FelbridgeOTSCondensed.woff');}#title {font: 30pt FelbridgeOTSCondensed, sans-serif; letter-spacing: 0.01em; text-align: center;color: white;background-color:rgb(152,155,177); }
- 52. fontsquirrel.com
- 53. Come Meet Ubelly.comFree windows Hosting offersUbel.ly/2mthsfree
- 54. resourcesBooksIntroducing HTML5 by Bruce Lawson & Remy SharpW3C Web Sites & ResourcesW3C HTML5 Specification – www.w3.org/TR/html5 HTML5 Test Suite - test.w3.org/html/tests/reporting/report.htmMicrosoft Internet Explorer 9 SitesEngineering Blog – blogs.msdn.com/ie/Beauty Of The Web – www.beautyoftheweb.com/experience/IE Test Drive – www.ietestdrive.comMy Blog http://blogs.msdn.com/b/thebeebs
- 55. thankyou
Editor's Notes
- #41: Geo Location