Html5, css3, canvas, svg and webgl
•Download as PPT, PDF•
5 likes•2,480 views
Presentation given on 20th of April at The university of applied sciences in Rotterdam. A broad overview of upcoming web technologies.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Html5, css3, canvas, svg and webgl
Similar to Html5, css3, canvas, svg and webgl (20)
Recently uploaded
Recently uploaded (20)
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