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=quot;http://schemas.microsoft.com/client/2007quot; xmlns:x=quot;http://schemas.microsoft.com/winfx/2006/xamlquot;> <Ellipse Canvas.Left=quot;30quot; Canvas.Top=quot;30quot; Height=quot;200quot; Width=quot;200quot; Stroke=quot;Blackquot; StrokeThickness=quot;10quot; Fill=quot;SlateBluequot; /> </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=quot;1.0quot; encoding=quot;UTF-8quot;?> <page title=quot;Add text formatquot; path=quot;admin/settings/filter/addquot; base=quot;/quot;> <title>Add text format</title> <content>...</content> <menu id=quot;navigationquot; title=quot;Navigationquot;> <item path=quot;user/1quot; title=quot;My accountquot; /> <item path=quot;node/addquot; title=quot;Create contentquot; children=quot;2quot; /> <item path=quot;adminquot; title=quot;Administerquot; /> <item path=quot;admin/contentquot; title=quot;Content managementquot; children=quot;6quot; /> <item path=quot;admin/buildquot; title=quot;Site buildingquot; children=quot;4quot; /> <item path=quot;admin/settingsquot; title=quot;Site configurationquot;>...</item> <item path=quot;admin/userquot; title=quot;User managementquot; /> <item path=quot;admin/reportsquot; title=quot;Reportsquot; /> <item path=quot;admin/helpquot; title=quot;Helpquot; /> <item path=quot;logoutquot; title=quot;Log outquot; /> </menu> <user name=quot;adminquot; id=quot;1quot; /> </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

http://www.slideshare.net	16
http://www.socialeyes.com:8010	2
http://www.techgig.com	1

What's New in Web Development

by Konstantin Käfer on Mar 05, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 19

Statistics

What’s New in Web Development — Presentation Transcript