Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (13)
Ähnlich wie HTML5
Ähnlich wie HTML5 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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
Hinweis der Redaktion
- 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