Moving to the client - HTML5 is here
9 likes1,836 views
The document outlines the advancements and features introduced with HTML5, specifically focusing on new form elements, built-in validation, and improved user experience. It highlights the use of JavaScript for native functionality, such as autofocus and custom validation, as well as the introduction of the canvas element for graphical content. Additionally, it discusses the overall benefits of transitioning to HTML5, including richer content creation capabilities and better browser support.
![Or something the browser can do for you...
Required:
<input required name="name">
Pattern:
<input pattern="[0-9]{5}" name="postleitzahl">
Firefox Webkit Opera
input:valid { background:lime }
input:invalid { background:red; color:white }](https://image.slidesharecdn.com/moving-to-the-client-110205034857-phpapp01/85/Moving-to-the-client-HTML5-is-here-20-320.jpg)
Moving to the client - HTML5 is here
- 1. Moving to HTML5 is here! the client
- 8. Why HTML5?
- 15. Forms
- 16. HTML forms are just not as rich as others...
- 17. That’s why HTML5 added a few new ones...
- 18. A few things we did with JS are now built-in: Autofocus: <input autofocus name="name"> Default content: <input placeholder="please enter your name" name="name"> Autocomplete: <input autocomplete name="name"> Limits and steps: <input min="0" max="360" step="5" name="angle" type="number"> Multiple: <input multiple type="file" type="email"> <input multiple type="email" type="file"> Related elements: <output> <meter> <progress>
- 19. Validation is something for real men...
- 20. Or something the browser can do for you... Required: <input required name="name"> Pattern: <input pattern="[0-9]{5}" name="postleitzahl"> Firefox Webkit Opera input:valid { background:lime } input:invalid { background:red; color:white }
- 21. Overriding validation and styling results. <input type="submit" value="Save" formnovalidate> </input> form.oninputchange = function(){} if(element.willValidate){ element.setCustomValidity('That did not work!'); if(element.validity.valid){ // yay! } else { // boo! } } /* validity states: valueMissing, typeMismatch, patternMismatch, tooLong, rangeUnderflow, rangeOverflow, stepMismatch,customError */
- 22. So we have: Richer form elements with native support In-built validation Events and attributes for custom validation Time and Date functionality No more need for terrible client side validation Almost browser support (needs bitching!)
- 23. Canvas
- 24. Apple even creates open standards for the web -Steve Jobs
- 25. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 26. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 27. context.save(); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore(); context.fillRect(350, 50, 100, 100);
- 28. context.lineWidth = "10"; context.lineJoin = "round"; context.moveTo(50, 50); context.lineTo(200, 200); context.lineTo(100, 300); context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.strokeStyle = "#00f"; context.arc(200, 400, 75, 0, Math.PI*2, false); context.stroke();
- 30. context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 32. context.strokeStyle = "transparent"; context.arc(100, 100, 75, 0, Math.PI*2, false); context.clip(); context.stroke(); context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 34. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 36. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 38. http://craftymind.com/factory/html5video/ CanvasVideo.html
- 40. SVG vs. canvas
- 41. Vector vs. bitmap SVG for interaction, shapes etc canvas for speed, animations SVG = “Real” DOM elements Google indexes SVG
- 42. Video/Audio
- 43. Flash is a black box inside a document. Alien
- 44. HTML5 audio and video make things much simpler: Video and audio are just like any other HTML element Native controls provided by the browser Better accessibility (keyboard navigation) Native and simple API (Flash APIs varied from provider to provider) Easy interaction with other technologies (Canvas, CSS)
- 45. Embedding video or audio
- 46. Embedding video for all browsers: <video controls> <source src="http://www.archive.org/{...}_512kb.mp4" type="video/mp4" media="(min-device-width:800px)"></source> <source src="http://www.archive.org/{...}_low.mp4" type="video/mp4"></source> <source src="http://www.archive.org/{...}.webm" type="video/webm"></source> <source src="http://www.archive.org/{...}.ogv" type="video/ogg"></source> <p>Watch the movie on <a href="{...}_monsters"> archive.org</a>.</p> </video>
- 47. Copyright
- 50. Controls differ from browser to browser... Firefox Opera Safari Full Screen Chrome
- 51. HTML5’s Media API gives you control: load() - load a new media. canPlayType(type) - returns probably, maybe and “” (really!) play() - play the movie pause() - pause the movie. addTrack(label,kind,language) -for subtitles
- 52. *a lot* of control! Video details: width / height / videoWidth / videoHeight / poster Controls: controls / volume / muted Tracks: tracks Network state: src / currentSrc / networkState / preload / buffered Ready state readyState / seeking Playback state currentTime / startTime / duration / paused / defaultPlayBackRate / playbackRate / played / seekable / ended / autoplay / loop HTML5 video events: loadstart / progress / suspend / abort / error / emptied / stalled / play / pause / loadedmetadata / loadeddate / waiting / playing / canplay / canplaythrough / seeking / seeked / timeupdate / ended / ratechange
- 59. Web Storage
- 64. var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing" }; localStorage.setItem("sarah", JSON.stringify(sarahPalin)); console.log(typeof JSON.parse(localStorage.getItem("sarah")));
- 67. if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesn't seem to trigger it */ window.addEventListener("online", isOnline, false); window.addEventListener("offline", isOffline, false); } else { /* Works in IE with the Work Offline option in the File menu and pulling the ethernet cable */ document.body.ononline = isOnline; document.body.onoffline = isOffline; }
- 68. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 70. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 71. What else is coming?
- 72. Video, live web content and live audio analysis in a 3D environment. http://www.youtube.com/watch?v=VUOIS3jtD8Y http://vocamus.net/dave/?p=1233
- 75. Other great things already working for us Web Workers - multithreaded JS Web Sockets - long polling and realtime multi user interaction Audio analysis Face detection in JavaScript Server side rendering in JavaScript Image generation
- 76. Next steps... Touch interfaces - multi touch features Device input support
- 77. Happy Ending
- 79. Robert Nyman Chris Heilmann http://robertnyman.com/speaking/ http://www.wait-till-i.com/ http://robertnyman.com/html5/ Twitter: @codepo8 Twitter: @robertnyman Pictures: Space: http://blog.silive.com/weather/2008/06/Astronaut-From-Apollo-11-Mission-1-1024x768.jpg Robert and Chris: http://www.flickr.com/photos/screenorigami/5073291880/sizes/z/ George W Bush fail 1: http://freetraveler.net/pictures/2.09.06/fun/1.jpg George W Bush fail 2: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/g2.jpg George W Bush fail 3: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/gb3.jpg Head in ground: http://56minus1.com/2009/02/things-well-done-li-wei/ Rocks my socks off: http://www.threestyles.com/tutorials/html5-rocks-my-socks-off/ Web browser icons: http://paulirish.com/2010/high-res-browser-icons/ Go where I've never been: http://musicisart.ws/diane-arbus/ Basketball player: http://www.hemmy.net/2008/03/22/the-fail-collection/ Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of-china/?quick_view=1 Canvas: http://www.ioffer.com/c/Drawings-1000407 Oriental studies: http://www.swollenpickles.com/2007/01/29/phallic-logo-awards/ Fight club: http://www.unique-screenwriting.com/rules-of-fight-club.html Storage fail: http://failfun.com/funny-pictures/gangsta-fail/ Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie-monster.html You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/ Internet hole: http://cheezburger.com/View/3194058752 Beer fail: https://witnessthis.wordpress.com/tag/shark-fail/
- 80. We can’t change history, but we can change the future. Be nice to each other.