Html5, css3, canvas, svg and webgl

4,833
-1

Published on

Presentation given on 20th of April at The university of applied sciences in Rotterdam. A broad overview of upcoming web technologies.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,833
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
69
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Html5, css3, canvas, svg and webgl

  1. 1. HTML5, CSS3, Canvas, SVG, WebGL, WTF, BBQ. kilianvalkhof.com – @kilianvalkhof
  2. 2. HTML 1 (1991)
  3. 3. HTML 5...2022!? ishtml5readyyet.com
  4. 4. HTML...javascript...DOM
  5. 5. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <!doctype html> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /> <meta charset=”utf-8”>
  6. 6. <header> <hgroup> <nav> <section> <article> <aside> <figure> <footer> http://ejohn.org/blog/html5-shiv/
  7. 7. <input type= email url range number date/month/week time search color http://www.modernizr.com/
  8. 8. ...Microdata, WAI-Aria validator.w3.org doet al html5!
  9. 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. 10. Selectors :nth-of-child(even) :last-of-type() :not() :empty
  11. 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. 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. 13. Simpel: http://kilianvalkhof.com/uploads/spinners Minder simpel: http://53miles.com Heel cool: http://tylergaw.com/lab/themanfromhollywood/
  14. 14. ...rgba, hsv, multicolumns, rounded corners, gradients, text-shadows, background sizing, multiple backgrounds, transforms cssdesk.com
  15. 15. Var awesome = document.querySelectorAll(“div>p:first-child span.name[“title”]”); Nieuwe javascript API's querySelectorAll:
  16. 16. Localstorage/sessionstorage window.localStorage['key'] = value; window.sessionStorage['key'] = anothervalue;
  17. 17. ApplicationCache (a.k.a. Iphone web apps) <html manifest=&quot;cache-manifest&quot;> CACHE MANIFEST CACHE: /src/scripts.js /src/style.css /src/background.png /src/sprite1.png
  18. 18. ...websockets, webworkers, geolocation, drag and drop
  19. 19. <video>, <audio> youtube.com/html5/ Ingebouwd. Eigen design. Besturen via javascript: video.play(); video.pause();
  20. 20. <Canvas> 2d Bitmap Snel (geen DOM) https://developer.mozilla.org/en/Canvas_tutorial http://mrdoob.com
  21. 21. SVG 2d vector DOM (gratis events) Raphaeljs.com Grafico.kilianvalkhof.com
  22. 22. WebGL 3d Bovenop Canvas OpenGL 2.0 ...webkit nightlies, chrome dev builds http://www.youtube.com/watch?v=dgTnHjPHeks
  23. 23. Vragen? Kilian Valkhof [email_address] @kilianvalkhof op twitter

×