Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (8)
Ähnlich wie HTML5: what's new?
Ähnlich wie HTML5: what's new? (20)
Mehr von Chris Mills
Mehr von Chris Mills (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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! ‣ cmills@opera.com ‣ @chrisdavidmills ‣ http://dev.opera.com/articles/tags/html5/ ‣ http://html5doctor.com
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n