![And this
<input
type="text"
required
pattern="[A‐z]{1,20}
[A‐z]{1,20}">](https://image.slidesharecdn.com/html5-preso-110324161729-phpapp02/85/HTML5-what-s-new-25-320.jpg)
![Adding a Flash fallback
<object
type="application/x‐shockwave‐flash"
data="player.swf"
width="480"
height="283">
<param
name="allowfullscreen"
value="true">
<param
name="allowscriptaccess"
value="always">
<param
name="flashvars"
value="file=video.mp4">
<!‐‐[if
IE]><param
name="movie"
value="player.swf"><![endif]‐‐>
<img
src="video.jpg"
width="480"
height="283"
alt="Video">
</object>](https://image.slidesharecdn.com/html5-preso-110324161729-phpapp02/85/HTML5-what-s-new-38-320.jpg)
HTML5: what's new?
- 1. HTML5: What's new? Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
- 2. Who the hell am I? ‣ Opera open standards evangelist and tech writer ‣ Telling the world about open standards & Opera ‣ Improving web education ‣ Drinking beer & saving the world before morning ‣ Drumming in a heavy metal band
- 4. What is HTML5? A new HTML spec that defines: ‣ New semantic elements ‣ New features such as native video, more powerful forms, web sockets ‣ New APIs for controlling such features ‣ Error handling, and other such useful things
- 5. There’s nothing wrong with HTML4... http://www.flickr.com/photos/birdfarm/519230710/
- 6. But HTML5 has more bling As if! Not publishing this one...
- 7. HTML5 does not replace HTML4 ‣ It’s backwards compatible ‣ It fills up holes ‣ It adds new markup and APIs ‣ It competes with proprietary/plug-in technology
- 8. New syntax: better semantics http://www.flickr.com/photos/zscheyge/49012397/
- 16. Where does this leave the humble <div>? Use it for anything that isn’t covered by other new elements, and is just a general grouping, e.g. for styling purposes, for which you don’t want to create a new section. An intro <div>, perhaps?
- 17. Browsers don’t ACTUALLY support these ... yet But we can get them displaying ok ‣ You can style any element with CSS, even if the browser doesn’t recognise it ‣ Give all the structural elements display: block; ‣ IE also needs some scripting: createElement(‘article’); ‣ HTML5Shiv sorts it all out
- 18. New forms! http://www.flickr.com/photos/zscheyge/49012397/
- 19. HTML5 forms Previously called Web Forms 2.0 ‣ More powerful form controls ‣ Built-in validation
- 22. Validation Form validation used to be horrendous
- 23. var elements = document.getElementsByTagName('input'); // loop through all input elements in form Who the hell wants to write for(var i = 0; i < elements.length; i++) { // check if element is mandatory; ie has a pattern var pattern = elements.item(i).getAttribute('pattern'); this?? 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;
- 24. HTML5 gives you this <input type="text" required>
- 28. <canvas> Scriptable graphics ‣ Standard API for drawing ‣ Supporting across all modern browsers
- 30. The basics var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle ctx.fillRect
- 31. <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/
- 32. Video and audio! http://www.flickr.com/photos/zscheyge/49012397/
- 33. <video> and <audio> New elements, plus new API for controlling audio and video
- 34. The old school way <object width="425" height="344"> <param name="movie" value="http://www.example.com/ v/LtfQg4KkR88&hl=en&fs=1"></param> <param name="allowFullScreen" value="true"></param> <embed src="http://www.example.com/v/ LtfQg4KkR88&hl=en&fs=1" type="application/x‐shockwave‐flash" allowfullscreen="true" width="425" height="344"></embed> </object>
- 35. The badass sexy new way <video src="video.webm" width="480px" height="283px" controls poster="poster.png"> </video>
- 38. Adding a Flash fallback <object type="application/x‐shockwave‐flash" data="player.swf" width="480" height="283"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=video.mp4"> <!‐‐[if IE]><param name="movie" value="player.swf"><![endif]‐‐> <img src="video.jpg" width="480" height="283" alt="Video"> </object>
- 40. Going offline http://www.flickr.com/photos/zscheyge/49012397/
- 41. Offline apps! ‣ Generally, the web doesn't work very well without a web connection! ‣ What can we do about this?
- 42. Offline applications ‣ AppCache: Save an offline version of your web page files and use those to display your web page when you lose network. ‣ Web storage: Like cookies, but more powerful. Store things such as form data and user preferences ‣ WebSQL: A fully-functioning database in your browser. Store a user's data so they can continue working with it when the network goes down
- 43. Offline applications ‣ For more information, check out http:// dev.opera.com/articles/view/taking-your-web- apps-offline-web-storage-appcache-websql/
- 44. And why is this all so good again? http://www.flickr.com/photos/zscheyge/49012397/
- 45. 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
- 46. 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
- 47. 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
- 48. Less reliance on Flash ‣ Means less skills needed in the team ‣ HTML5 plays nicer with the rest of the page; you can fill in any missing functionality with JS ‣ Less Flash means better accessibility (note: there are some HTML5 accessibility gotchas, like Canvas) ‣ Downloading a plugin breaks brand experience and can confuse users
- 49. HTML5 works on iDevices ‣ Like iPad and iPhone ‣ A crucial market to be in ‣ Flash has not been allowed on these devices
- 50. Offline apps! ‣ Never before possible...
- 51. Thanks for listening! ‣ [email protected] ‣ @chrisdavidmills ‣ http://dev.opera.com/articles/tags/html5/ ‣ http://html5doctor.com
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n