Advertisement
The Future of the Web: HTML5
Apr. 4, 2010•0 likes•8,165 views
42 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Overview of the new HTML5
Derek BenderFollow
Senior UX Designer at VidarooAdvertisement
The Future of the Web: HTML5
- the FUTURE of the WEB: HTML 5
- the FUTURE of the WEB: HTML 5
- Work started in 2004 Collaborative effort between the W3C HTML Working Group & the WHATWG the FUTURE of the WEB: HTML 5
- The WHATWG Web Hypertext Application Technology Working Group and many other individuals... the FUTURE of the WEB: HTML 5
- The W3C World Wide Web Consortium An international community that develops standards to ensure the long-term growth of the Web. the FUTURE of the WEB: HTML 5
- the NEW stuff finally! the FUTURE of the WEB: HTML 5
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> the FUTURE of the WEB: HTML 5
- the FUTURE of the WEB: HTML 5
- the FUTURE of the WEB: HTML 5
- new ELEMENTS structural elements: • header • nav • section • article • aside • footer the FUTURE of the WEB: HTML 5
- the FUTURE of the WEB: HTML 5
- new ELEMENTS the FUTURE of the WEB: HTML 5
- <video> & <audio> <video src=”video.mp4”>back up content here</video> <audio src=”audio.mp3”>back up content here</audio> controls fully stylable with CSS autobuffer boolean attribute specifying whether to buffer in advance loop repeated play, duh autoplay play from page load, duh the FUTURE of the WEB: HTML 5
- more NEW elements • hgroup • details • summary • mark • output • progress • menu • nsfw? the FUTURE of the WEB: HTML 5
- canvas <canvas width=”150” height=”150”> fallback content here </canvas> the FUTURE of the WEB: HTML 5
- APIs • drag & drop • document editing • offline app caching • simple client storage • structured client storage • cross-document messaging • getElementByClassName the FUTURE of the WEB: HTML 5
- block-level LINKS <a href=”#” class=”story”> <img src=”img.png” /> <h4>Title here</h4> <p>Text here</p> </a> the FUTURE of the WEB: HTML 5
- webforms 2.0 new input types • color • url • number • range • time • email • month • search • date • tel • datetime • week • datetime-local <input type=”color” required=”required” /> the FUTURE of the WEB: HTML 5
- webforms 2.0 new attributes • required • autocomplete • autofocus • pattern (formatting) • and more! <input type=”color” required=”required” /> the FUTURE of the WEB: HTML 5
- deprecated ELEMENTS drop it like its hot • center • font • frameset (finally!!!!) • strike you’re safe for now <blink> and <marquee> the FUTURE of the WEB: HTML 5
- HTML5 is awesome! I know, stay calm the FUTURE of the WEB: HTML 5
- But what about support? Glad you asked... the FUTURE of the WEB: HTML 5
- The future is already here. It’s just not very evenly distributed. William Gibson the FUTURE of the WEB: HTML 5
- the BROWSERS but what about... the FUTURE of the WEB: HTML 5
- the BROWSERS 2011 the FUTURE of the WEB: HTML 5
- Should I start using HTML 5 now? Sure. the FUTURE of the WEB: HTML 5
- benefits of HTML5 • cleaner markup • additional semantics for new elements • new form elements take out hassle of scripting forms • staying ahead of the curve • makes you feel really smart the FUTURE of the WEB: HTML 5
- downsides of HTML5 • spec not finished and likely to change • not everything works in every browser • you look like a pretentious jerk when you brag to your friends the FUTURE of the WEB: HTML 5
- Evolution, not revolution. the FUTURE of the WEB: HTML 5
- As of Feb 2010 HTML5 is still at Working Draft stage in the W3C. HTML5 has been at Last Call in the WHATWG since October 2009. the FUTURE of the WEB: HTML 5
- TAKEAWAYS • started in 2004 • starting to see widespread browser support • more semantic • I Webforms 2.0! • IE9 in 2011 the FUTURE of the WEB: HTML 5
- Resources & links W3C Working Draft http://dev.w3.org/html5/spec/Overview.html HTML5 Doctor http://html5doctor.com/ ALA article http://www.alistapart.com/articles/previewo tml5 Web Forms 2.0 spec http://www.whatwg.org/specs/web-forms/current-work/ HTML5 site gallery http://www.1stwebdesigner.com/inspiration/ultra-modern-websites-html5/ O’Reilly article http://radar.oreilly.com/2010/03/why-html5-is-worth-your-time.html Modernizr http://www.modernizr.com the FUTURE of the WEB: HTML 5
- I’m derekbender @derekbender derekbender.com & mymoustacheand.me slideshare.net/derekbender nfistudios.com memberfuse.com Thanks the FUTURE of the WEB: HTML 5
Editor's Notes
- .
- WHATWG is a growing community of people interested in evolving the Web. Focuses on the development of HTML and APIs needed for Web applications. Founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004 and now has many individuals representing all corners of the web.
- International community that develops standards to ensure the long-term growth of the Web.
- now on to the new stuff in html5!
- here is an example of what most peoples markup looks like pluses: straight forward, familiar negatives: cluttered &#x201C;div soup&#x201D;, high possibility of people misnaming, relies on trust if multiple people work on it what about the guy who name his divs after tv shows?
- confusing to the guy who comes afterwards greysanatomy, howd that get in there?
- Provides new semantic vocabulary for parts of a page previously served by DIVs with IDs and Class attributes.
- clear, semantic code
- Allows for associating captions with embedded content. can be used with video, audio, pullquotes, images and more
- hgroup represents a grouping of headings. The element is used to group H tags when the heading has multiple levels, such as subheadings, alternative titles, or taglines details element represents a widget from which the user can obtain additional information or controls summary can be a caption, or legend for the rest of the contents of the details element. mark element represents a text highlighted for reference purposes output element represents the result of a calculation. progress represents the completion progress of a task, like a loading bar menu element represents a list of commands nsfw tag would have been AWESOME!!!!!!!
- Canvas provides an API for drawing directly in the browser using Javascript. Can be used to draw graphs, charts and simple animations. The tag allows any SVG graphics to be created on the fly with fallback content provided to legacy browsers.
- In addition to specifying markup, HTML5 specifies scripting application programming interfaces
- One new and exciting thing you can do in HTML 5 is wrap links round &#x201C;block-level&#x201D; elements. Instead of markup that looks like this, with html5 <a> tags can wrap block level elements and cut down on the amount of markup needed
- One new and exciting thing you can do in HTML 5 is wrap links round &#x201C;block-level&#x201D; elements. Instead of markup that looks like this, with html5 <a> tags can wrap block level elements and cut down on the amount of markup needed
- not just limited to: text, password, submit, file, etc
- Required to indicate that the user must enter a value Autocomplete accepts either on or off, if off the browser will not be allowed to store the value Autofocus give focus to the element, helpful for the first element on a form Pattern specifies a format or pattern to match
- I know, stay calm.
- google properly indexes html5 sites if using for client work keep to the simpler stuff thats supported use Modernizr to help with older browser support (js that helps update your markup/css for older browsers)
- Like everything on the web, html is constantly evolving & changing. by no means will it solve everyones problems, BUT it seems to be a great leap forward.
- Ian Hickson, editor of the HTML5 specification, expects the specification to reach the W3C Candidate Recommendation stage during 2012 Today many parts of the specification are stable and may be implemented into products
Advertisement