Html5, css3, canvas, svg and webgl
Download as PPT, PDF5 likes2,496 views
The document discusses various web technologies including HTML5, CSS3, JavaScript APIs, and graphics techniques such as Canvas, SVG, and WebGL. It highlights the evolution of HTML standards, mentions important resources, and explains features like animations, transitions, and storage APIs. The document also references examples and tutorials for implementing these technologies in web development.
![Var awesome = document.querySelectorAll(“div>p:first-child span.name[“title”]”); Nieuwe javascript API's querySelectorAll:](https://image.slidesharecdn.com/html5-100420080525-phpapp02/85/Html5-css3-canvas-svg-and-webgl-15-320.jpg)
![Localstorage/sessionstorage window.localStorage['key'] = value; window.sessionStorage['key'] = anothervalue;](https://image.slidesharecdn.com/html5-100420080525-phpapp02/85/Html5-css3-canvas-svg-and-webgl-16-320.jpg)
![Vragen? Kilian Valkhof [email_address] @kilianvalkhof op twitter](https://image.slidesharecdn.com/html5-100420080525-phpapp02/85/Html5-css3-canvas-svg-and-webgl-23-320.jpg)
Html5, css3, canvas, svg and webgl
- 1. HTML5, CSS3, Canvas, SVG, WebGL, WTF, BBQ. kilianvalkhof.com – @kilianvalkhof
- 5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!doctype html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset=”utf-8”>
- 6. <header> <hgroup> <nav> <section> <article> <aside> <figure> <footer> http://ejohn.org/blog/html5-shiv/
- 7. <input type= email url range number date/month/week time search color http://www.modernizr.com/
- 8. ...Microdata, WAI-Aria validator.w3.org doet al html5!
- 9. CSS3 Candidate Recommendation () 05 Dec 08 23 May 08 14 May 03 15 Sep 09 11 May 04 12 Mar 09 30 Jun 09 21 July 08 Working Draft () 10 Oct 06 19 Sep 06 15 Dec 05 06 Mar 07 04 May 07 15 Oct 09 18 Jun 09 09 Aug 07 09 Aug 07 16 Dec 04 05 Sep 07 Flexible Box Layout (Medium Priority) 23 Jul 09 Images Values (Medium Priority) 23 Jul 09 01 Dec 09 20 Mar 09 01 Dec 09 20 Mar 09 04 Aug 09 13 Aug 03 07 Nov 02 14 May 03 15 May 02 24 Feb 04 13 Aug 03
- 10. Selectors :nth-of-child(even) :last-of-type() :not() :empty
- 11. @font-face @font-face { font-family: 'SansBold'; font-weight:700; src: url('../fonts/sans/Sans-Bold.eot'); src: local('Sans Bold'), local('Sans-Bold'), url('Sans-Bold.woff') format('woff'), url('Sans-Bold.otf') format('opentype'), url('Sans-Bold.svg#Sans-Bold') format('svg'); } fontsquirrel.com
- 12. CSS Animations CSS Transitions a { background-color:#fff; -webkit-transition: background 1s linear; } a:hover { background-color:#f00; } @-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; } } a { -webkit-animation-name:pulse; -webkit-animation-duration:2s; -webkit-animation-count:infinite; }
- 13. Simpel: http://kilianvalkhof.com/uploads/spinners Minder simpel: http://53miles.com Heel cool: http://tylergaw.com/lab/themanfromhollywood/
- 14. ...rgba, hsv, multicolumns, rounded corners, gradients, text-shadows, background sizing, multiple backgrounds, transforms cssdesk.com
- 15. Var awesome = document.querySelectorAll(“div>p:first-child span.name[“title”]”); Nieuwe javascript API's querySelectorAll:
- 16. Localstorage/sessionstorage window.localStorage['key'] = value; window.sessionStorage['key'] = anothervalue;
- 17. ApplicationCache (a.k.a. Iphone web apps) <html manifest="cache-manifest"> CACHE MANIFEST CACHE: /src/scripts.js /src/style.css /src/background.png /src/sprite1.png
- 18. ...websockets, webworkers, geolocation, drag and drop
- 19. <video>, <audio> youtube.com/html5/ Ingebouwd. Eigen design. Besturen via javascript: video.play(); video.pause();
- 20. <Canvas> 2d Bitmap Snel (geen DOM) https://developer.mozilla.org/en/Canvas_tutorial http://mrdoob.com
- 21. SVG 2d vector DOM (gratis events) Raphaeljs.com Grafico.kilianvalkhof.com
- 22. WebGL 3d Bovenop Canvas OpenGL 2.0 ...webkit nightlies, chrome dev builds http://www.youtube.com/watch?v=dgTnHjPHeks
- 23. Vragen? Kilian Valkhof [email_address] @kilianvalkhof op twitter