What's New in Web Development

What’s new in Web Development? Konstantin Käfer

1 HTML 5 2 Gears, Native Client & Silverlight 3 CSS 3 4 Client side XSLT 2 Konstantin Käfer

HTML 5 3 Konstantin Käfer

Standardize what’s already there 4 Konstantin Käfer

Standardize solutions for real-life applications 5 Konstantin Käfer

HTML 5: Structural Elements <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; } 6 Konstantin Käfer

HTML 5 in action Doctype: <!DOCTYPE html> ‣ Most browsers support any tags ‣ Except our beloved Internet Explorer ‣ <section> <section></section> <h2>Alpha</h2> <h2>Alpha</h2> <p> <p> Section Alpha Section Alpha </p> </p> </section> </section><//section> 7 Konstantin Käfer

document.createElement('section'); 8 Konstantin Käfer

HTML 5 New input types 9 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 Microsoft’s Flash clone ‣ Based on XAML and WPF ‣ <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> .NET languages (C#, VB.NET, IronPython, ...) ‣ 17 Konstantin Käfer

Silverlight Demos 18 Konstantin Käfer

CSS 3 Split up in modules ‣ Some parts are already implemented ‣ – Use them now! (Degrade gracefully) 19 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 <xsl:value-of> Title:$name Date:$curdat Transform XML documents </xsl:value-o ‣ to HTML XSLT Code XML Input Use the same XML for ‣ Web Services XSLT Processor Result Document 23 Konstantin Käfer

Example: WoW Armory 24 Konstantin Käfer

Client side XML/XSLT <?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> 25 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

Thanks! Questions? Konstantin Käfer mail@kkaefer.com 27 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 Konstantin Käfer

What's New in Web Development

0 comments

Notes on slide 1

4 Favorites