• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
What's New in Web Development
 

What's New in Web Development

on

  • 5,547 views

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 ...

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.

Statistics

Views

Total Views
5,547
Views on SlideShare
5,525
Embed Views
22

Actions

Likes
5
Downloads
119
Comments
0

4 Embeds 22

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    What's New in Web Development What's New in Web Development Presentation Transcript

    • 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