HTML5 Forms and Canvas
•
9 recomendaciones•1,835 vistas
In this talk Chris Heilmann and Robert Nyman de-mystify some of the rumours around HTML5 and show you just how many tasks of day-to-day app development can be done by the browser for you rather than having to write all the code by yourself. Life as a front-end developer is much easier than you think - if you keep up-to-date and embrace the movement that wants to make the web an easier and faster place for all. The audio of the talk is available at http://www.archive.org/details/Html5IsHere-ChrisHeilmannAndRobertNymanAtFosdem2011
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (18)
Destacado
Similar a HTML5 Forms and Canvas
Similar a HTML5 Forms and Canvas (20)
Más de Christian Heilmann
Más de Christian Heilmann (20)
Último
Último (20)
HTML5 Forms and Canvas
- 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
- 49. http://vid.ly
- 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.