What’s newin
Web Development?
Konstantin
Käfer
Konstantin Käfer2
1
2
3
4
HTML 5
Gears, Native Client & Silverlight
CSS 3
Client side XSLT
Konstantin Käfer
HTML 5
3
Konstantin Käfer
Standardize what’salready there
4
Konstantin Käfer
Standardize solutionsfor real-life applications
5
Konstantin Käfer
HTML 5: Structural Elements
6
‣ <section>, <nav>, <article>, <aside>, <footer>, <figure>, <header>, <dialog>
‣ Behave like spans; use display:block
‣ For structuring pages
‣ Allows for nice CSS:
– footer { font-size: 0.75em; color: gray; }
Konstantin Käfer
HTML 5 in action‣ Doctype: <!DOCTYPE html>
‣ Most browsers support any tags
‣ Except our beloved Internet Explorer
7
<section> <h2>Alpha</h2> <p> Section Alpha </p></section>
<section></section> <h2>Alpha</h2> <p> Section Alpha </p></section><//section>
Konstantin Käfer
document.createElement('section');
8
Konstantin Käfer9
HTML 5
New input types
Konstantin Käfer
HTML 5: Storing data‣ Database Storage API: Plain SQL
‣ Local Storage: key-value pairs
‣ Session Storage: key-value pairs
‣ Supported by Mozilla, WebKit, Opera
10
Konstantin Käfer
HTML 5: <canvas>‣ Already supported by Mozilla, WebKit, Opera
‣ Arbitrary 2D drawing
‣ Can be emulated with VML in IE
‣ Applications:
– http://code.google.com/p/flot/
– http://wiki.github.com/sorccu/cufon/about
– http://ejohn.org/blog/processingjs/
11
Konstantin Käfer
Canvas Fonts‣ Alternative to images replacement and sIFR
‣ Use <canvas> and VML to render fonts
‣ Several libraries
– http://typeface.neocracy.org
– http://cufon.shoqolate.com
‣ Converts font files to proprietary format
12
Konstantin Käfer
HTML 5: Miscellaneous‣ Drag-and-Drop
‣ Cross-document message exchange
‣ Data grids
‣ Undo manager
‣ Web sockets
‣ <video>, <audio> tags
13
Konstantin Käfer
Google Gears‣ Offline applications
‣ Worker pools(for compute-intensive applications)
‣ Databases(not fully compatible with HTML 5)
‣ Geolocation
14
Konstantin Käfer
Gears Demos
15
Konstantin Käfer
Google Native Client
16
Konstantin Käfer
Silverlight
17
‣ Microsoft’s Flash clone
‣ Based on XAML and WPF
‣ .NET languages (C#, VB.NET, IronPython, ...)
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /></Canvas>
Konstantin Käfer
Silverlight Demos
18
Konstantin Käfer
CSS 3
19
‣ Split up in modules
‣ Some parts are already implemented
– Use them now! (Degrade gracefully)
Konstantin Käfer
CSS 3‣ border-radius: 5px;
‣ user-modify: read-write;
‣ box-shadow: 3px 3px 5px #888;
‣ background: rgba(0, 0, 0, 0.5);
‣ border-image: url(border.png) 5 5 10 10 round round;
‣ text-overflow: ellipsis;
20
Konstantin Käfer
CSS 3 cont.‣ column-width: 10em;
column-gap: 1em;
‣ @font-face { font-family: Aller; src: url('Aller-Roman.otf');}
font-family: Aller, sans-serif;
21
Konstantin Käfer
WebKit’s CSS enhancements‣ Transforms: Rotating, Scaling, Morphing, ...
‣ Transitions: Animate between two states
‣ Animations: Define keyframes and timelines
‣ Demo
22
Konstantin Käfer
Client side XSLT‣ Transform XML documents
to HTML
‣ Use the same XML forWeb Services
23
XML Input XSLT Code
XSLT Processor
<xsl:value-of>Title:$nameDate:$curdat</xsl:value-o
Result Document
Konstantin Käfer
Client side XML/XSLT
25
<?xml version="1.0" encoding="UTF-8"?><page title="Add text format" path="admin/settings/filter/add" base="/"> <title>Add text format</title>
<content>...</content>
<menu id="navigation" title="Navigation"> <item path="user/1" title="My account" /> <item path="node/add" title="Create content" children="2" /> <item path="admin" title="Administer" /> <item path="admin/content" title="Content management" children="6" /> <item path="admin/build" title="Site building" children="4" /> <item path="admin/settings" title="Site configuration">...</item> <item path="admin/user" title="User management" /> <item path="admin/reports" title="Reports" /> <item path="admin/help" title="Help" /> <item path="logout" title="Log out" /> </menu>
<user name="admin" id="1" /></page>
Konstantin Käfer
Server side JavaScript‣ Has been possible for a long time (CGI)
‣ Interpreters got extremely fast
‣ http://groups.google.com/group/serverjs
26
Konstantin Käfer
Sources & Credits – http://www.peterkroener.de/html5-was-geht-heute-
schon-was-geht-nicht-der-grosse-ueberblick/
– http://andybudd.com/presentations/css3/
– http://lipidity.com/apple/iphone-webkit-css-3
28
Recommended
