HTML5
•Download as PPTX, PDF•
1 like•465 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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to HTML5
Similar to HTML5 (20)
Recently uploaded
Recently uploaded (20)
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
- 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
- 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
- * Large thanks to mobile (iphone) and chrome - implementations
- 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
- divitis had replaced tables of 1998Focus on replacing common patterns of divs with semantically meaningful tags
- Also allows an aside and figcaption, for exampleRetains its document nature
- Frames popular in enterprise software (PeopleSoft, Outlook Web Access) but caused many usability and accessiblity issued
- Notice not xml conformant. It can be: autofocus=“true”Required and pattern didn’t work in my tests = test/index.html
- 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)
- Audio:MP3 = IE, Chrome, SafariWav = Firefox, Chrome, Safari, OperaOgg = Firefox, Chrome, Opera
- TODO: What is controls?MP4 = IE, Chrome, SafariWebM = Firefox, Chrome, OperaOgg = Firefox, Chrome, Opera
- Canvas – again hard to separate HTML elements from the JS ecosystem
- 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
- Allows webappsUpdate comment to refresh cacheTied with local storage
- Flip to boston globeAlso have orientation and color capabilities
- Uses Upgrade header in HTTP
- Simple api to get lat/long* On desktop, gives somewhat better resolution than picture indicates; can be quite accurate on a phone
- Touch events added