Embed Size (px)
DESCRIPTION
Presentation given on 20th of April at The university of applied sciences in Rotterdam. A broad overview of upcoming web technologies.
Citation preview
HTML5, CSS3, Canvas, SVG, WebGL, WTF, BBQ.kilianvalkhof.com – @kilianvalkhof
HTML 1(1991)
HTML 5...2022!?ishtml5readyyet.com
HTML...javascript...DOM
<!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”>
<header><hgroup><nav><section><article><aside><figure><footer> http://ejohn.org/blog/html5-shiv/
<input type= emailurlrangenumberdate/month/weektimesearchcolor
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 AnimationsCSS 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="cache-manifest">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>2dBitmapSnel (geen DOM)
https://developer.mozilla.org/en/Canvas_tutorialhttp://mrdoob.com
SVG2dvectorDOM (gratis events)
Raphaeljs.comGrafico.kilianvalkhof.com
WebGL3dBovenop CanvasOpenGL 2.0
...webkit nightlies, chrome dev builds
http://www.youtube.com/watch?v=dgTnHjPHeks
![[MS-SVG]: Internet Explorer Scalable Vector Graphics (SVG ...interoperability.blob.core.windows.net/web/MS-SVG/[MS-SVG].pdf · Internet Explorer Scalable Vector Graphics (SVG) Standards](https://img.pdfslide.us/doc/110x75/5a6fc5167f8b9ac0538b6194/ms-svg-internet-explorer-scalable-vector-graphics-svg-interoperabilityblobcorewindowsnetwebms-svgms-svgpdfpdf.jpg)
