Download as PDF, PPTX
![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/75/Moving-to-the-client-HTML5-is-here-20-2048.jpg)
Uploaded byChristian Heilmann
Moving to the client - HTML5 is here
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.
More Related Content
Similar to Moving to the client - HTML5 is here
Moving to the client - HTML5 is here
- 1. Moving to HTML5 is here! the client
- 8.
- 15.
- 16. HTML forms arejust not as rich as others...
- 17. That’s why HTML5added a few new ones...
- 18. A few thingswe 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 somethingfor real men...
- 20. Or something thebrowser 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 andstyling 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: Richerform 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.
- 24. Apple even createsopen 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");
- 35.
- 36. HTML5 Canvas forInternet Explorer <= 8 - explorercanvas
- 37.
- 38. http://craftymind.com/factory/html5video/ CanvasVideo.html
- 40.
- 41. Vector vs. bitmap SVGfor interaction, shapes etc canvas for speed, animations SVG = “Real” DOM elements Google indexes SVG
- 42.
- 43. Flash is ablack box inside a document. Alien
- 44. HTML5 audio andvideo 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 oraudio
- 46. Embedding video forall 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.
- 48.
- 49.
- 50. Controls differ frombrowser to browser... Firefox Opera Safari Full Screen Chrome
- 51. HTML5’s Media APIgives 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* ofcontrol! 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
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 62.
- 63.
- 64. var sarahPalin ={ "contest" : "Miss Alaska pageant", "Talent" : "Flute playing" }; localStorage.setItem("sarah", JSON.stringify(sarahPalin)); console.log(typeof JSON.parse(localStorage.getItem("sarah")));
- 65.
- 66.
- 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 thenavigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 69.
- 70. CACHE MANIFEST # VERSION10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 71. What else iscoming?
- 72. Video, live webcontent and live audio analysis in a 3D environment. http://www.youtube.com/watch?v=VUOIS3jtD8Y http://vocamus.net/dave/?p=1233
- 73.
- 74.
- 75. Other great thingsalready 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.
- 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 changehistory, but we can change the future. Be nice to each other.