What's New in Web Development

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    4 Favorites

    What's New in Web Development - Presentation Transcript

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

    + Konstantin KäferKonstantin Käfer, 8 months ago

    custom

    1547 views, 4 favs, 1 embeds more stats

    This is an overview session that touches onto all k more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1547
      • 1545 on SlideShare
      • 2 from embeds
    • Comments 0
    • Favorites 4
    • Downloads 72
    Most viewed embeds
    • 2 views on http://www.socialeyes.com:8010

    more

    All embeds
    • 2 views on http://www.socialeyes.com:8010

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories