SlideShare a Scribd company logo

Html5, css3, canvas, svg and webgl

•Download as PPT, PDF•
•
Kilian Valkhof
Kilian Valkhof

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

1 of 23
Downloaded 78 times
HTML5, CSS3, Canvas, SVG, WebGL, WTF, BBQ. kilianvalkhof.com – @kilianvalkhof
HTML 1 (1991)
HTML 5...2022!? ishtml5readyyet.com
HTML...javascript...DOM
<!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”>
<header> <hgroup> <nav> <section> <article> <aside> <figure> <footer> http://ejohn.org/blog/html5-shiv/
<input type= email url range number date/month/week time search color http://www.modernizr.com/
...Microdata, WAI-Aria validator.w3.org doet al html5!
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
Selectors :nth-of-child(even) :last-of-type() :not() :empty
@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
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; }
Simpel: http://kilianvalkhof.com/uploads/spinners Minder simpel: http://53miles.com Heel cool: http://tylergaw.com/lab/themanfromhollywood/
...rgba, hsv, multicolumns, rounded corners, gradients, text-shadows, background sizing, multiple backgrounds, transforms cssdesk.com
Var awesome = document.querySelectorAll(“div>p:first-child span.name[“title”]”); Nieuwe javascript API's querySelectorAll:
Localstorage/sessionstorage window.localStorage['key'] = value; window.sessionStorage['key'] = anothervalue;
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
...websockets, webworkers, geolocation, drag and drop
<video>, <audio> youtube.com/html5/ Ingebouwd. Eigen design. Besturen via javascript: video.play(); video.pause();
<Canvas> 2d Bitmap Snel (geen DOM) https://developer.mozilla.org/en/Canvas_tutorial http://mrdoob.com
SVG 2d vector DOM (gratis events) Raphaeljs.com Grafico.kilianvalkhof.com
WebGL 3d Bovenop Canvas OpenGL 2.0 ...webkit nightlies, chrome dev builds http://www.youtube.com/watch?v=dgTnHjPHeks
Vragen? Kilian Valkhof [email_address] @kilianvalkhof op twitter

More Related Content

Html5, css3, canvas, svg and webgl