Download to read offline
![<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/75/HTML5-14-2048.jpg)
Uploaded byBrandon Byars
HTML5
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.
More Related Content
![[PSU Web 2011] HTML5 Design](https://cdn.slidesharecdn.com/ss_thumbnails/html5-design-110613130006-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5
- 1. <!DOCTYPE html> Brandon Byars bbyars@thoughtworks.com
- 2. The HTML5 Ecosystem HTML5 CSS3 new JavaScript APIs
- 5.
- 6.
- 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>
- 10.
- 11.
- 12.
- 13.
- 14. <form action="/newAttributes"> <input type=textautofocus /> <input type=email placeholder="a@b.com" /> <input type=email required /> <input type=text pattern="^[1-9]+[0-9]*$" /> </form>
- 15. <img draggable="true" /> functiondrag(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>
- 18.
- 19.
- 20.
- 21. <html manifest="demo.appcache"> CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: *
- 22.
- 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 alland (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.
- 28.
- 31. More JavaScript • Browserhistory • Web workers • File APIs • Cross document messaging • Touch events
- 32.
- 33.
- 34. Looking to theFuture… 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