HTML5
Download as PPTX, PDF1 like475 views
The document discusses new features in HTML5 including semantic elements like <nav> and <article>, new form input types, multimedia with <video> and <canvas>, offline web apps, CSS3 features like columns and transforms, local storage in JavaScript, and expectations for widespread HTML5 support on mobile devices in 2013.
![<form action="/newAttributes">
<input type=text autofocus />
<input type=email placeholder="a@b.com" />
<input type=email required />
<input type=text pattern="^[1-9]+[0-9]*$" />
</form>](https://image.slidesharecdn.com/html5-120427113417-phpapp01/85/HTML5-14-320.jpg)
HTML5
- 1. <!DOCTYPE html> Brandon Byars bbyars@thoughtworks.com
- 2. The HTML5 Ecosystem HTML5 CSS3 new JavaScript APIs
- 5. HTML
- 7. <nav> <ul> <li><a href=“/”>Home</a></li> <li><a href=“/about”>About Us</a></li> <li> <a href=“/faq”> Frequently Asked Questions </a> </li> </ul> </nav>
- 8. <section id=“magazine”> <article> <header> <h1>Semantic Markup Rules!</h1> <p>An overview of new elements</p> </header> <p>Lorem ipsum dolor set amet…</p> <aside>For more details, see…</aside> </article> </section>
- 9. <big> <table align=“left” <center> bgcolor=“#ff0” <font> border=“1px” cellpadding=“2px” <strike> cellspacing=“2px” /> <u> <tt> <frame>
- 14. <form action="/newAttributes"> <input type=text autofocus /> <input type=email placeholder="a@b.com" /> <input type=email required /> <input type=text pattern="^[1-9]+[0-9]*$" /> </form>
- 15. <img draggable="true" /> function drag(ev) { ev.dataTransfer.setData ("Text",ev.target.id); } function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data) ); ev.preventDefault(); }
- 16. Multimedia Audio Video Canvas SVG
- 17. <video width="320" height="240” controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>
- 20. SVG
- 21. <html manifest="demo.appcache"> CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: *
- 22. CSS
- 23. CSS3 Selectors p:nth-of-type(2n+1) {color: red;} p:nth-child(2n+1) {color: red;} #content { column-count: 2; column-gap: 20px; column-rule: 1px solid #ddccb5; } span.weight:after { content: "lbs"; color: #bbb; }
- 24. <style media="only all and (max-width: 480)" />
- 25. CSS3 Transforms • Rotate • Scale • Skew • Matrix
- 26. @font-face { font-family: AwesomeFont; src: url(http://example.com/awesomeco.ttf); font-weight: bold; }
- 27. JavaScript
- 31. More JavaScript • Browser history • Web workers • File APIs • Cross document messaging • Touch events
- 34. Looking to the Future… HTML5 compatible phones to top 1 billion in 2013
Editor's Notes
- #3: WHATWG = Google, Apple, Mozilla, Opera (MS declined b/c lack of patent policy). Formed to move HTML forward while W3C was mired in XHTML hell until 2009
- #4: XHTML turned out to be a colossal waste of time, W3C finally abandoned in 2009WHATWG had been working on alternative that is now called HTML5 since 2004IE never recognized XHTML content type
- #5: * Large thanks to mobile (iphone) and chrome - implementations
- #7: Web spiders, robotsAccessibility (ARIA not mentioned much in this talk)AI – Siri exampleIf we’re going to make the web a platform for computers, need semantics
- #8: divitis had replaced tables of 1998Focus on replacing common patterns of divs with semantically meaningful tags
- #9: Also allows an aside and figcaption, for exampleRetains its document nature
- #10: Frames popular in enterprise software (PeopleSoft, Outlook Web Access) but caused many usability and accessiblity issued
- #15: Notice not xml conformant. It can be: autofocus=“true”Required and pattern didn’t work in my tests = test/index.html
- #16: Drag & drop with few enough characters I could fit it on a slide w/reasonable font sizeShows why it’s hard to separate HTML5 from the larger ecosystem (including JS)
- #17: Audio:MP3 = IE, Chrome, SafariWav = Firefox, Chrome, Safari, OperaOgg = Firefox, Chrome, Opera
- #18: TODO: What is controls?MP4 = IE, Chrome, SafariWebM = Firefox, Chrome, OperaOgg = Firefox, Chrome, Opera
- #20: Canvas – again hard to separate HTML elements from the JS ecosystem
- #21: Dev – create in text editor:* Can be created and edited with any text editorCan be searched, indexed, scripted, and compressedUser* Scalable and are zoomable (and the image can be zoomed without degradation)* can be printed with high quality at any resolution
- #22: Allows webappsUpdate comment to refresh cacheTied with local storage
- #25: Flip to boston globeAlso have orientation and color capabilities
- #30: Uses Upgrade header in HTTP
- #31: Simple api to get lat/long* On desktop, gives somewhat better resolution than picture indicates; can be quite accurate on a phone
- #35: Touch events added