• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5, css3, canvas, svg and webgl
 

Html5, css3, canvas, svg and webgl

on

  • 5,768 views

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

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

Statistics

Views

Total Views
5,768
Views on SlideShare
5,716
Embed Views
52

Actions

Likes
2
Downloads
62
Comments
0

1 Embed 52

http://www.slideshare.net 52

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5, css3, canvas, svg and webgl Html5, css3, canvas, svg and webgl Presentation Transcript

    • 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