Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What's New in Web Development

3,491 views

Published on

This is an overview session that touches onto all kinds of new developments in the wide field of web design. This talk is mainly focussed on client side technologies (HTML, CSS, JavaScript) and outlines the news of the past months. If you have not been following the buzz lately, this is a good session to get you up to speed.

Published in: Technology
  • Be the first to comment

What's New in Web Development

  1. 1. What’s new in Web Development? Konstantin Käfer
  2. 2. 1 HTML 5 2 Gears, Native Client & Silverlight 3 CSS 3 4 Client side XSLT 2 Konstantin Käfer
  3. 3. HTML 5 3 Konstantin Käfer
  4. 4. Standardize what’s already there 4 Konstantin Käfer
  5. 5. Standardize solutions for real-life applications 5 Konstantin Käfer
  6. 6. 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
  7. 7. 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
  8. 8. document.createElement('section'); 8 Konstantin Käfer
  9. 9. HTML 5 New input types 9 Konstantin Käfer
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. HTML 5: Miscellaneous Drag-and-Drop ‣ Cross-document message exchange ‣ Data grids ‣ Undo manager ‣ Web sockets ‣ <video>, <audio> tags ‣ 13 Konstantin Käfer
  14. 14. Google Gears Offline applications ‣ Worker pools ‣ (for compute-intensive applications) Databases ‣ (not fully compatible with HTML 5) Geolocation ‣ 14 Konstantin Käfer
  15. 15. Gears Demos 15 Konstantin Käfer
  16. 16. Google Native Client 16 Konstantin Käfer
  17. 17. 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
  18. 18. Silverlight Demos 18 Konstantin Käfer
  19. 19. CSS 3 Split up in modules ‣ Some parts are already implemented ‣ – Use them now! (Degrade gracefully) 19 Konstantin Käfer
  20. 20. 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
  21. 21. 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
  22. 22. WebKit’s CSS enhancements Transforms: Rotating, Scaling, Morphing, ... ‣ Transitions: Animate between two states ‣ Animations: Define keyframes and timelines ‣ Demo ‣ 22 Konstantin Käfer
  23. 23. 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
  24. 24. Example: WoW Armory 24 Konstantin Käfer
  25. 25. 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
  26. 26. 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
  27. 27. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 27 Konstantin Käfer
  28. 28. 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

×