![And this
<input
type=”text”
required
pattern=”[A‐z]{1,20}
[A‐z]{1,20}”>](https://image.slidesharecdn.com/digital-breakfast-html5-preso-110307060302-phpapp01/85/For-non-developers-HTML5-A-richer-web-for-everyone-21-320.jpg)
(For non-developers) HTML5: A richer web for everyone
- 1. HTML5: A richer web for everyone Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
- 2. Who am I? ‣ Opera open standards evangelist and tech writer ‣ Telling the world about open standards & Opera ‣ Improving web education ‣ Drumming in a heavy metal band
- 4. What is HTML5? A new version of HTML that defines: ‣ More consistent features ‣ New features that compete with Flash ‣ Easier and quicker ways to implement things that were previously complicated ‣ Error handling, and other such useful things
- 5. It’s not all rosy ‣ Tooling more limited than say, Flash or HTML4 ‣ Cross browser support not quite as easy as Flash ‣ HTML5 not much good if you have JavaScript disabled
- 6. But things are getting better ‣ All modern browsers support most of this stuff now ‣ Workarounds are perfectly possible ‣ Tools are getting better (from HTML5boilerplate.com to Dreamweaver)
- 7. HTML5 does not replace HTML4 You are already using HTML5 by using HTML4.x ‣ It’s backwards compatible ‣ It fills up holes ‣ It competes with proprietary/plugin technology
- 8. HTML5 isn’t... ‣ CSS3, WOFF ‣ SVG, SMIL, WebGL ‣ Geolocation, WAC ‣ Indexed DB, File API ‣ Server-sent events ‣ Web workers, XHR2
- 9. Let’s look at the new features http://www.flickr.com/photos/zscheyge/49012397/
- 13. HTML5 forms Previously called Web Forms 2.0 ‣ More powerful form controls ‣ Built-in validation
- 17. Other new input types <input type=”email”> <input type=”url”> <input type=”tel”>
- 18. Validation Form validation used to be horrendous Who wants to spend the time coding something like...
- 19. function validate() { var str = “”; var elements = document.getElementsByTagName('input'); // loop through all input elements in form ...this?? for(var i = 0; i < elements.length; i++) { // check if element is mandatory; ie has a pattern var pattern = elements.item(i).getAttribute('pattern'); if (pattern != null) { var value = elements.item(i).value; // validate the value of this element, using its defined pattern var offendingChar = value.match(pattern); // if an invalid character is found or the element was left empty if(offendingChar != null || value.length == 0) { // add up all error messages str += elements.item(i).getAttribute('errorMsg') + “n” + “Found this illegal value: '” + offendingChar + “' n”; // notify user by changing background color, in this case to red elements.item(i).style.background = “red”; } } } if (str != “”) { // do not submit the form alert(”ERROR ALERT!!n” +str); return false; } else { // form values are valid; submit
- 20. HTML5 gives you this <input type=”text” required>
- 22. <canvas> Scriptable graphics ‣ Standard API for drawing ‣ Supporting across all modern browsers
- 23. <canvas> examples ‣ http://dev.opera.com/articles/view/html-5- canvas-the-basics/ ‣ http://ejohn.org/blog/processingjs/ ‣ http://www.hakim.se/experiments/ ‣ http://www.canvasdemos.com/ ‣ http://people.opera.com/patrickl/experiments/ canvas/particle/3/
- 24. <video> and <audio> New elements, plus new API for controlling audio and video
- 26. And why is this all so good again? http://www.flickr.com/photos/zscheyge/49012397/
- 27. Better consistency ‣ Better machine readability & interoperability: ‣ Easier syndication and reuse ‣ Less time worrying about design consistency ‣ Less time training up new team members ‣ Defined error handling means things work more consistently, even if they are broken! ‣ Better cross browser apps ‣ Less time spent debugging
- 28. Better accessibility ‣ For example, HTML5 video is keyboard accessible out of the box ‣ New elements bringing consistency is also important here ‣ Less time and money spent on accessibility ‣ 1 in 5 people in the UK have some kind of disability - a market you can’t ignore
- 29. Less reliance on JavaScript ‣ Less work for your developers to do, so faster implementation and prototyping ‣ Less pain for designers and other less technical team members ‣ Faster loading sites
- 30. Less reliance on Flash ‣ Means less skills needed in the team ‣ HTML5 plays nicer with the rest of the page ‣ Less Flash means better accessibility (note: there are some HTML5 accessibility gotchas, like Canvas) ‣ Downloading a plugin breaks brand experience and can confuse users
- 31. HTML5 works on iDevices ‣ Like iPad and iPhone ‣ A crucial market to be in ‣ Flash has not been allowed on these devices
- 32. Thanks for listening! ‣ [email protected] ‣ @chrisdavidmills ‣ http://dev.opera.com/articles/tags/html5/ ‣ http://html5doctor.com